/* pages.css — hero video, campaign videos, banners, prose pages, studio */

/* ===== HERO VIDEO (full-screen, real FW25 video) ===== */
.hero{position:relative;display:flex;align-items:center;justify-content:center;
  height:calc(100vh - var(--announce-h));min-height:600px;overflow:hidden;background:#0c0c0c;cursor:pointer}
.hero .hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .hero-logo{position:relative;z-index:3;width:min(62vw,820px);
  filter:brightness(0) invert(1) drop-shadow(0 2px 18px rgba(0,0,0,.4))}
.hero .hero-link{position:absolute;left:var(--gutter);bottom:26px;z-index:3;color:#fff;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:2px}
.hero::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.18);z-index:1}
.hero .hero-vid{z-index:0}

/* ===== CAMPAIGN VIDEOS (click-to-play) ===== */
.cvideo{position:relative;aspect-ratio:16/9;max-height:88vh;background:#0c0c0c center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;overflow:hidden;margin:0}
.cvideo::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.28)}
.cvideo .cv-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;background:#000}
/* tall/vertical campaign video (e.g. Burnaboy) — taller box, show whole frame */
.cvideo-tall{aspect-ratio:16/10;max-height:none}
.cvideo-tall .cv-vid{object-fit:contain;background:#0c0c0c}
@media(max-width:760px){.cvideo-tall{aspect-ratio:3/4}}
.cvideo.playing::before{display:none}
.cvideo .cv-play{position:relative;z-index:1;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.6);
  color:#fff;padding:14px 26px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:.2s}
.cvideo .cv-play:hover{background:rgba(0,0,0,.8)}
.cvideo.playing .cv-play{display:none}
.cvideo .cv-cap{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:40px var(--gutter);
  display:flex;flex-direction:column;gap:14px;align-items:flex-start;color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.6),transparent)}
.cvideo.playing .cv-cap{display:none}
.cvideo .cv-title{font-size:clamp(18px,2.4vw,28px);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.cvideo .cv-cta{border:1px solid #fff;padding:12px 28px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:.2s}
.cvideo .cv-cta:hover{background:#fff;color:var(--ink)}

/* ===== FW26 announcement band ===== */
.fw26-band{text-align:center;padding:48px var(--gutter);font-size:clamp(15px,2vw,22px);
  letter-spacing:.18em;text-transform:uppercase;font-weight:600}

/* ===== full-width SUPERVILLAINS banner ===== */
.fullbanner{display:flex;align-items:center;justify-content:center;min-height:70vh;
  background:#0c0c0c center/cover no-repeat;position:relative;cursor:pointer}
.fullbanner::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.32)}
.fullbanner .fb-inner{position:relative;z-index:1;text-align:center;color:#fff;display:flex;flex-direction:column;align-items:center;gap:26px}
.fullbanner h2{font-size:clamp(40px,8vw,110px);font-weight:700;letter-spacing:.04em}
.btn.light{border-color:#fff;color:#fff}
.btn.light:hover{background:#fff;color:var(--ink)}

/* ===== PROSE PAGES (about, contact, policies) ===== */
.prose{max-width:760px}
.prose.nomargin{margin:0}
.prose .lead{font-weight:300;font-size:clamp(28px,4vw,48px);line-height:1.1;margin-bottom:30px}
.prose h3{font-weight:500;font-size:22px;margin:34px 0 10px}
.prose p,.prose li{color:#3a3a3a;margin-bottom:14px}
.prose .bullets{margin-left:18px}
.prose .bullets li{list-style:disc}
.prose .muted{color:var(--soft)}
.prose .mail{border-bottom:1px solid currentColor}
/* order-status lookup form */
.order-form{max-width:420px;margin:18px 0 8px}
.order-result{max-width:420px}
.order-result .order-card{border:1px solid var(--line);padding:18px 20px;margin-top:6px}
.order-result .order-card p{margin-bottom:8px;color:#3a3a3a}
.order-result .order-err{color:#a33;font-size:14px}

/* about page collection CTA cards (matches the real site's two image+shop blocks) */
.about-cta{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:48px;max-width:760px}
.about-card{position:relative;display:block;cursor:pointer;overflow:hidden;background:var(--wash)}
.about-card img{width:100%;height:420px;object-fit:cover;display:block;transition:transform .5s ease}
.about-card:hover img{transform:scale(1.04)}
.about-card-body{position:absolute;left:0;right:0;bottom:0;padding:22px;background:linear-gradient(transparent,rgba(0,0,0,.6));color:#fff}
.about-card-body h3{font-weight:600;font-size:16px;letter-spacing:.06em;margin:0 0 4px;color:#fff}
.about-shop{font-size:13px;opacity:.9}
@media(max-width:640px){.about-cta{grid-template-columns:1fr}.about-card img{height:300px}}

/* contact form */
.cform{display:flex;flex-direction:column;gap:18px;max-width:520px;margin-top:24px}
.cform label{display:flex;flex-direction:column;gap:7px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.cform input,.cform textarea{border:1px solid var(--line2);padding:12px 14px;font-size:14px;color:var(--ink);font-weight:300;resize:vertical}
.cform input:focus,.cform textarea:focus{outline:none;border-color:var(--ink)}
.cform .btn{align-self:flex-start;margin-top:4px;cursor:pointer}
.formnote{font-size:12px;color:var(--soft);margin-top:12px;min-height:1em}

/* ===== STUDIO PAGE ===== */
.studio-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:50px;align-items:start}
.studio-card{border:1px solid var(--line);padding:30px}
.studio-card .typ{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.studio-card .price{font-size:26px;margin:8px 0 16px}
.studio-card .price .per{font-size:14px;color:var(--soft)}
.studio-card .rate{display:flex;justify-content:space-between;padding:14px 0;border-top:1px solid var(--line);font-size:14px}
.studio-card .studio-cta{display:block;text-align:center;background:var(--ink);color:#fff;padding:15px;margin-top:20px;letter-spacing:.12em;text-transform:uppercase;font-size:12px}
@media(max-width:760px){.studio-grid{grid-template-columns:1fr;gap:30px}}

/* ============================================================= */
/* FAT 2026 — "THE WALK" cinematic runway film (look-by-look)    */
/* Full-bleed black theater: one look per viewport, scroll-snap, */
/* fixed HUD counter, inline runway clips, fade-up reveals.       */
/* ============================================================= */
.fat-view{background:#000;color:#fff}
.fat-view.active{display:block}
/* full-bleed: escape the global max-width / padding, run edge-to-edge */
#view-fat2026{position:relative;width:100%;margin:0;padding:0}
/* scroll-snap container = the page; each slide snaps to top */
.fat-view.active ~ * {}
html:has(#view-fat2026.active){scroll-snap-type:y proximity}

/* ---- opening title card ---- */
.fat-intro{position:relative;height:100vh;min-height:560px;display:flex;align-items:center;justify-content:center;
  text-align:center;background:radial-gradient(120% 90% at 50% 38%,#1a1a1a 0%,#000 70%);scroll-snap-align:start;overflow:hidden}
.fat-intro::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);pointer-events:none}
.fat-intro-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:22px;
  animation:fatRise 1.2s cubic-bezier(.16,.84,.3,1) both}
@keyframes fatRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.fat-eyebrow{font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:#8d8d8d}
.fat-title{font-family:'Assistant',sans-serif;font-weight:700;
  font-size:clamp(64px,17vw,260px);line-height:.86;letter-spacing:-.02em;margin:0;
  color:#fff;text-shadow:0 0 60px rgba(255,255,255,.08)}
.fat-sub{font-size:13px;letter-spacing:.26em;text-transform:uppercase;color:#cfcfcf}
.fat-scroll{margin-top:18px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:#6f6f6f;
  animation:fatPulse 2.4s ease-in-out infinite}
@keyframes fatPulse{0%,100%{opacity:.4;transform:translateY(0)}50%{opacity:1;transform:translateY(5px)}}

/* ---- each look = a full-bleed slide ---- */
.fat-look{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:#000;scroll-snap-align:start;overflow:hidden;
  opacity:0;transform:translateY(34px);transition:opacity 1s ease,transform 1.1s cubic-bezier(.16,.84,.3,1)}
.fat-look.shown{opacity:1;transform:none}
.fat-stage{position:relative;width:100%;height:100vh;display:flex;align-items:center;justify-content:center}
/* blurred, darkened cover backdrop fills the viewport edge-to-edge (atmosphere) */
.fat-bg{position:absolute;inset:0;background-size:cover;background-position:center;
  filter:blur(34px) brightness(.42) saturate(1.1);transform:scale(1.18);z-index:0}
/* the sharp portrait, shown COMPLETE (full-length) and centered on top */
.fat-pic{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  width:100%;height:100%}
.fat-img{display:block;max-width:100%;max-height:100vh;width:auto;height:100%;object-fit:contain;
  box-shadow:0 24px 90px rgba(0,0,0,.6)}
/* image fades in once decoded */
.fat-img{opacity:0;transition:opacity .9s ease,transform 9s ease}
.fat-img[src]{opacity:1}
.fat-look.shown .fat-img{transform:scale(1.025)}     /* slow ken-burns drift */
/* gentle top+bottom vignette so captions/HUD stay legible over any frame */
.fat-look::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,transparent 18% 70%,rgba(0,0,0,.72) 100%)}

/* ---- inline runway film ---- */
.fat-stage-video{background:#050505}
.fat-vid{position:relative;z-index:1;max-width:100%;max-height:100vh;width:auto;height:100%;
  object-fit:contain;display:block;box-shadow:0 24px 90px rgba(0,0,0,.6)}
/* finale film is landscape-ish cast walk — let it cover wider */
.fat-finale .fat-vid{width:auto;height:100%}
.fat-filmtag{position:absolute;top:calc(var(--announce-h) + var(--header-h) + 18px);right:24px;z-index:4;
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:#fff;
  background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.4);padding:7px 12px;backdrop-filter:blur(4px);
  animation:fatBlink 2.6s ease-in-out infinite}
@keyframes fatBlink{0%,100%{opacity:.65}50%{opacity:1}}

/* ---- per-slide caption (bottom-left, whisper-small) ---- */
.fat-cap{position:absolute;left:clamp(18px,4vw,56px);bottom:clamp(46px,7vh,72px);z-index:3;
  display:flex;flex-direction:column;gap:5px;max-width:min(80vw,520px)}
.fat-cap-k{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#fff;font-weight:600}
.fat-cap-n{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:clamp(15px,2vw,21px);
  color:#e7e7e7;line-height:1.25}
.fat-cap-film{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#9a9a9a;margin-top:2px}
.fat-cap-dim .fat-cap-k{color:rgba(255,255,255,.62);font-weight:500}
.fat-still .fat-img{object-position:center 26%}

/* cast + finale framing */
.fat-cast .fat-img{object-position:center top}
.fat-finale{background:#050505}
.fat-finale .fat-vid{height:100vh}

/* ---- fixed HUD: look counter, bottom-right ---- */
.fat-hud{position:fixed;right:clamp(16px,4vw,48px);bottom:clamp(18px,4vh,40px);z-index:110;
  display:flex;flex-direction:column;align-items:flex-end;gap:3px;pointer-events:none;
  mix-blend-mode:difference;color:#fff}
.fat-hud-show{font-size:10px;letter-spacing:.28em;text-transform:uppercase;opacity:.8}
.fat-hud-count{font-size:13px;letter-spacing:.18em;font-variant-numeric:tabular-nums}
.fat-hud-count b{font-size:22px;font-weight:700}
/* HUD + caption only matter while the runway view is the active one */
body:not(:has(#view-fat2026.active)) .fat-hud{display:none}

/* ---- exit / shop link, fixed bottom-left ---- */
.fat-exit{position:fixed;left:clamp(16px,4vw,48px);bottom:clamp(18px,4vh,40px);z-index:110;
  color:#fff;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.55);padding-bottom:2px;mix-blend-mode:difference}
.fat-exit:hover{opacity:.7}
body:not(:has(#view-fat2026.active)) .fat-exit{display:none}

/* broken-image placeholder on black */
.fat-stage .ph{display:flex;align-items:center;justify-content:center;width:100%;height:100vh;
  font-family:'Playfair Display',serif;font-size:18px;color:#555;background:#0a0a0a;text-align:center;padding:0 10vw}

/* reduced motion: kill drifts/pulses, keep it readable */
@media(prefers-reduced-motion:reduce){
  .fat-look,.fat-img,.fat-intro-inner{transition:none;animation:none;transform:none;opacity:1}
  .fat-look.shown .fat-img{transform:none}
  .fat-scroll,.fat-filmtag{animation:none}
}
@media(max-width:760px){
  .fat-title{font-size:clamp(52px,21vw,120px)}
  .fat-filmtag{top:calc(var(--announce-h) + var(--header-h) + 10px);right:14px}
  .fat-cap-n{font-size:15px}
}

/* ===== FAT 2026 lightbox (click any look image/video → fullscreen, zoomable) ===== */
.fatlb{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.92);opacity:0;transition:opacity .25s ease;backdrop-filter:blur(6px)}
.fatlb.open{opacity:1}
.fatlb-stage{position:relative;max-width:100vw;max-height:100vh;display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;padding:clamp(8px,3vw,40px);box-sizing:border-box}
.fatlb-img{max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-in;
  transition:transform .25s cubic-bezier(.2,.7,.2,1);will-change:transform;user-select:none;-webkit-user-drag:none}
.fatlb-img.zoomed{cursor:grab;transition:none}
.fatlb-img.zoomed:active{cursor:grabbing}
.fatlb-vid{max-width:100%;max-height:100%;object-fit:contain;background:#000}
.fatlb-x{position:fixed;top:18px;right:22px;z-index:3;width:40px;height:40px;border:0;cursor:pointer;
  background:rgba(255,255,255,.10);color:#fff;font-size:26px;line-height:1;border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:background .2s ease}
.fatlb-x:hover{background:rgba(255,255,255,.22)}
@media(max-width:760px){ .fatlb-x{top:12px;right:14px;width:36px;height:36px;font-size:22px} }