/* Homepage "Fès spotlight" (index.html, approved 2026-11-14). Fès is the current capital, so the homepage points to it.
   Second pass (2026-11-14): the first version read as "AI-styled" (glows, pulsing dots, a rotating gold edge, gradients,
   grain). This one is flat and quiet: one ochre accent, no glow, no pulsing, no gradient buttons. */

.fes-spot{--fes:#b98222;--fes-ink:#7a520f;--night:#0b1412}

/* the one Fès button: solid, like the site's other buttons */
.btn-fes{background:var(--fes);color:#fff;border:1px solid var(--fes);transition:background .25s,border-color .25s}
.btn-fes:hover{background:var(--fes-ink);border-color:var(--fes-ink)}

/* ---------- header link ---------- */
.nav-fes{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;font-size:.86rem;font-weight:600;white-space:nowrap;
  color:var(--fes-ink);border:1px solid rgba(185,130,34,.45);background:transparent;transition:background .25s,color .25s}
.nav-fes i{width:6px;height:6px;border-radius:50%;background:var(--fes)}
.nav-fes:hover{background:var(--fes);color:#fff;border-color:var(--fes)}
.nav-fes:hover i{background:#fff}
/* phones and tablets: logo, name, link and menu button share one row; the name gives way with an ellipsis */
@media (max-width:1080px){
  .fes-spot .brand{min-width:0;flex:1 1 auto}
  .fes-spot .brand span{min-width:0;overflow:hidden}
  .fes-spot .brand b{display:block;overflow:hidden;text-overflow:ellipsis}
  .nav-fes{flex-shrink:0;margin-inline-start:auto}
}
@media (max-width:420px){.nav-fes{padding:6px 10px;font-size:.8rem;gap:6px}.nav-fes span{display:none}.fes-spot .brand b{font-size:.84rem}}

/* the extra link has to fit: menu items never wrap, spacing tightens, and on narrower desktops the brand's subtitle steps aside */
@media (min-width:1081px){
  .fes-spot .links{gap:2px;min-width:0}
  .fes-spot .links a{white-space:nowrap;padding:8px 9px}
  .fes-spot .nav{gap:10px}
  .fes-spot .brand{flex-shrink:0}
  .fes-spot .nav-cta{padding-inline:16px;font-size:.86rem;white-space:nowrap}
}
@media (min-width:1081px) and (max-width:1320px){
  .fes-spot .brand small{display:none}
  .fes-spot .brand b{font-size:.86rem}
  .fes-spot .links a{padding:8px 6px;font-size:.82rem}
  .nav-fes{padding:6px 10px;font-size:.8rem}
  .fes-spot .nav-cta{padding-inline:13px;font-size:.8rem}
}

/* ---------- the Fès slide: a plain label, real dates, and the photo that gives way to film ---------- */
.slide-reel{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease;z-index:0;pointer-events:none}
.slide.reel-on .slide-reel{opacity:1}
.fes-spot .slide.is-current .cap{z-index:2}
.now-badge{position:absolute;z-index:2;top:16px;inset-inline-start:16px;padding:6px 12px;border-radius:8px;
  font-size:.78rem;font-weight:600;color:#fff;background:var(--fes)}
.fes-spot .slide.is-current .cap .btn{margin-top:12px}

/* ---------- teaser band ---------- */
.hm-fes{position:relative;overflow:hidden;margin-block:clamp(40px,7vw,90px) 0;padding-block:clamp(56px,8vw,110px);background:var(--night);color:#f1ece2}
.hm-fes-in{position:relative;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.25fr);gap:clamp(24px,5vw,72px);align-items:center}
.hm-fes-eyebrow{font-size:.85rem;font-weight:600;color:var(--fes)}
.hm-fes h2{margin-top:12px;font-size:clamp(1.7rem,3.2vw,2.6rem);font-weight:600;line-height:1.35}
.hm-fes p{margin-top:14px;color:rgba(241,236,226,.68);line-height:1.9;max-width:46ch}
.hm-fes-facts{display:flex;flex-wrap:wrap;gap:0;margin:22px 0 0;padding:0;list-style:none;border-top:1px solid rgba(241,236,226,.14)}
.hm-fes-facts li{padding:14px 0 0;padding-inline-end:26px;margin-inline-end:26px;border-inline-end:1px solid rgba(241,236,226,.14)}
.hm-fes-facts li:last-child{border:0;margin:0;padding-inline-end:0}
.hm-fes-facts b{display:block;font-size:1.5rem;font-weight:600;line-height:1.2}
.hm-fes-facts span{font-size:.8rem;color:rgba(241,236,226,.6)}
.hm-fes .btn-fes{margin-top:26px}
.hm-fes-word{position:relative;display:block;aspect-ratio:2.1/1}
.hm-fes-word canvas{position:absolute;inset:0;width:100%;height:100%;display:none}
.hm-fes-word video{display:none}
.hm-fes-fallback{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(6rem,19vw,17rem);font-weight:700;line-height:1;color:var(--fes)}
.fs-live .hm-fes-word canvas{display:block}
.fs-live .hm-fes-fallback{display:none}
@media (max-width:860px){
  .hm-fes-in{grid-template-columns:minmax(0,1fr);text-align:center}
  .hm-fes-word{order:-1}
  .hm-fes p{margin-inline:auto}
  .hm-fes-facts{justify-content:center}
}