/* DO NOT use {% static %} inside CSS files. Use relative URLs. */
@font-face {
  font-family: 'Stolzl';
  src: url("../fonts/stolzl_light.b2d69a9b89f3.otf") format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Stolzl';
  src: url("../fonts/stolzl_light.b2d69a9b89f3.otf") format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Stolzl';
  src: url("../fonts/stolzl_bold.7b8c81b13e48.otf") format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Stolzl';
  src: url("../fonts/stolzl_bold.7b8c81b13e48.otf") format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* The rest of your shared styles previously in <style>... */
/* Keep ONLY dynamic color stuff (from app_settings) inline as CSS variables in base.html */
.marquee-item{
  color: transparent;
  -webkit-text-stroke: 3px var(--ia-accent, #d4af37);
  text-transform: uppercase;
  font-weight: 800;
  font-family: inherit;
  font-size: clamp(2.5rem, 10vw, 8rem);
  letter-spacing: .02em;
  margin-right: 3rem;
  white-space: nowrap;
}
.marquee-track{ display:flex; width:max-content; animation: marquee-left 120s linear infinite; }
@keyframes marquee-left{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

.pf-card-media { aspect-ratio: 2 / 3; }
.pf-card.landscape .pf-card-media { aspect-ratio: 3 / 2; }

.pf-circle { transform: translate(-12px, 12px) scale(.96); opacity: 0; transition: transform .35s ease, opacity .35s ease; }
.pf-card:hover .pf-circle { transform: translate(0,0) scale(1); opacity: 1; }

.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
html, body { overflow-x: clip; }

/* Buttons, etc. should read colors from CSS variables, not hard-coded values */
.btn-primary { background: var(--ia-accent); color: #fff; border: 1px solid var(--ia-accent); }
.btn-primary:hover { filter: brightness(1.1); }
.btn-outline-primary { background: var(--ia-bg); color: var(--ia-secondary); border: 1px solid var(--ia-secondary); }
.btn-outline-primary:hover { filter: brightness(1.1); }
.btn-outline-primary.active,
.btn-outline-primary:active { background: var(--ia-bg); color: var(--ia-accent); border-color: var(--ia-accent); }