/* =========================================================================
   DREAM OWNERS CLUB — clean rebuild
   Principles: simple & clean · content leads · limited animation · concise text
   ========================================================================= */
:root{
  /* motion tokens: curves lifted from the Lowdown (Salient) build, durations
     capped at the house 900ms ceiling */
  --ease-out-cubic:cubic-bezier(.215,.61,.355,1);--ease-cta:cubic-bezier(.12,.75,.4,1);
  --ease-line:cubic-bezier(.23,.46,.4,1);--ease-btn:cubic-bezier(.25,1,.33,1);
  --ease-zoom:cubic-bezier(.05,.2,.1,1);--ease-overlay:cubic-bezier(.2,1,.2,1);
  --ease-x:cubic-bezier(.52,.01,.16,1);--ease-ocm:cubic-bezier(.15,.2,.1,1);
  --t-micro:.2s;--t-cta:.33s;--t-line:.4s;--t-btn:.45s;--t-zoom:.65s;--t-reveal:.75s;--t-settle:.9s;
  --bg:#0a0a0b;--bg-2:#111113;--ink:#f2f2f0;--muted:#9a9ea3;--faint:#83878e;
  --silver:#eeece7;--silver-2:#e4e1da;--silver-ink:#111113;--silver-muted:#5a5d62;
  --chrome:linear-gradient(180deg,#fff 0%,#d2d4d8 22%,#8b8e94 46%,#54565b 52%,#9a9da3 66%,#e9eaec 84%,#fff 100%);
  --silver-flat:#c7c9cc;
  --nav-active:#e9e9e7;
  --line:rgba(242,242,240,.10);--line-2:rgba(242,242,240,.24);
  --acc:#c7c9cc;--acc-2:#e9e9e7;--acc-glow:rgba(199,201,204,.4);--err:#c22a2a;
  --maxw:1280px;--gut:24px;--navh:76px;
  /* Type system (brand guidelines p.5): Archivo for display and UI, Source Sans 3
     for body copy. Loaded from Google Fonts in every page head; the fallbacks
     keep the metrics close if the request fails. */
  --disp:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --body:'Source Sans 3','Helvetica Neue',Helvetica,Arial,sans-serif;
  --nav-font:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  /* --ease is an expo-out curve: right for things that move, wrong for things
     that fade. On opacity it reaches ~90% almost at once and then crawls, which
     reads as a jump rather than a fade. Cross-dissolves use this instead. */
  --ease-fade:cubic-bezier(.4,0,.2,1);
  /* One type system: UI furniture (buttons, nav, labels, tags) is Archivo 600,
     uppercase, tracked at --ui-track. Headings are Archivo 800 uppercase with
     --head-track (near-solid, as the guidelines set it). Body copy is Source Sans
     regular with no tracking. Every surface pulls from these, never its own. */
  --ui-track:.08em;
  --head-track:.02em;
  --ui-weight:600;
  --body-font:'Source Sans 3','Helvetica Neue',Helvetica,Arial,sans-serif;
  --silver-hover:#a8abb0;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
/* Stop phones re-scaling text on rotate, but leave pinch zoom alone: locking
   it strands anyone whose browser has remembered a zoom level. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* Bump the type scale on phones — the wide tracking makes small sizes read smaller
   than they measure, so rem-based copy needs more room on narrow screens. */
@media(max-width:640px){html{font-size:106%}}
[id]{scroll-margin-top:calc(var(--navh) + 24px)}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-weight:400;letter-spacing:0;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--acc);color:var(--bg)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}

/* ---- type ---- */
h1,h2,h3{font-family:var(--disp);font-weight:800;letter-spacing:var(--head-track);line-height:1.1;text-transform:uppercase}
h1{font-size:clamp(2rem,5.4vw,3.8rem)}
h2{font-size:clamp(1.6rem,3.8vw,2.7rem)}
h3{font-size:clamp(1.1rem,2.1vw,1.4rem)}
p{max-width:60ch}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--nav-font);font-size:.8125rem;letter-spacing:var(--ui-track);text-transform:uppercase;color:var(--ink);font-weight:var(--ui-weight)}
.lead{color:var(--muted);font-size:1.05rem;max-width:56ch}
.dotline{font-family:var(--nav-font);font-weight:var(--ui-weight);letter-spacing:var(--ui-track);text-transform:uppercase}
.dotline .dot{display:inline-block;margin:0 .5em;font-size:.5em;vertical-align:middle}
.s-light .lead,.s-light-alt .lead{color:var(--silver-muted)}
.s-light .eyebrow,.s-light-alt .eyebrow{color:var(--acc)}

/* ---- buttons ----
   One button, site-wide (Asim, 2026-10-13): no fill, a faint square outline at
   rest so it reads as a button, and on hover a bright outline sweeps in the way
   the nav underline does, top and bottom first, then the sides. It sweeps back
   out on leave. Nothing lifts, nothing scales. */
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--nav-font);font-size:.86rem;font-weight:var(--ui-weight);letter-spacing:var(--ui-track);text-transform:uppercase;color:var(--ink);background:transparent;border:0;box-shadow:inset 0 0 0 1px var(--line-2);padding:17px 32px;border-radius:0;transition:color .25s}
.btn::before,.btn::after{content:"";position:absolute;inset:0;border:1px solid var(--ink);pointer-events:none;transition:transform .35s var(--ease-x)}
.btn::before{border-width:1px 0;transform:scaleX(0);transform-origin:right;transition-delay:.12s}
.btn::after{border-width:0 1px;transform:scaleY(0);transform-origin:top}
.btn:hover,.btn:focus-visible{background:transparent;color:var(--ink)}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1);transform-origin:left;transition-delay:0s}
.btn:hover::after,.btn:focus-visible::after{transform:scaleY(1);transform-origin:bottom;transition-delay:.12s}
.btn[disabled],.btn:disabled{opacity:.5;cursor:default}
.btn[disabled]::before,.btn[disabled]::after{display:none}
.s-light .btn,.s-light-alt .btn{color:var(--silver-ink);box-shadow:inset 0 0 0 1px rgba(17,17,19,.25)}
.s-light .btn::before,.s-light .btn::after,.s-light-alt .btn::before,.s-light-alt .btn::after{border-color:var(--silver-ink)}
@media(prefers-reduced-motion:reduce){.btn::before,.btn::after{transition:none}}

/* ---- shared type system ---- */
h1,h2,h3,h4,h5,h6{letter-spacing:var(--head-track)}
.btn,.eyebrow,label,.nav-links a,.mobile-menu a,.foot-meta,.terms,.ok,.dotline{letter-spacing:var(--ui-track);font-weight:var(--ui-weight)}
/* No stranded single words: headings balance their lines, copy avoids widows. */
h1,h2,h3,h4,h5,h6{text-wrap:balance}
p,.lead,.ed-copy p,.ed-statement p,li{text-wrap:pretty}
h4,h5,h6{font-family:var(--disp);font-weight:800;text-transform:uppercase;line-height:1.2}
p,.lead,li,blockquote,.prefs-row-text span,.prefs-box>p{font-family:var(--body-font);font-weight:400;letter-spacing:normal;text-transform:none}


/* =======================  PRELOADER  ======================= */
/* The panel and the logo fade out together as ONE layer, so it reads as a
   cross-dissolve into whatever is underneath — the gate on first arrival, the
   page itself after that. Fading the logo separately from the panel, as this
   used to, ran two different durations against each other and looked uneven. */
.preloader{position:fixed;inset:0;top:0;right:0;bottom:0;left:0;z-index:10050;background:var(--bg);display:flex;align-items:center;justify-content:center;will-change:opacity;transition:opacity 1s var(--ease-fade)}
.preloader.is-mark{transition-duration:.45s}
/* ---- logo intro ----
   First arrival: emblem and wordmark fade up slowly, hold, then dissolve away.
   Page to page: the emblem alone, quick enough to feel like a beat. */
.intro{display:flex;flex-direction:column;align-items:center;gap:22px}
/* The emblem fades up, the wordmark follows a beat later, both hold, then the
   whole lockup fades away to the access gate. No drawing, no wipe, no movement:
   the mark is the only statement being made. */
.intro-mark{position:relative;display:block;width:clamp(74px,12vw,116px);aspect-ratio:2357/2390}
.intro-emblem{position:absolute;inset:0;top:0;right:0;bottom:0;left:0;display:block;background:var(--silver-flat);
  -webkit-mask-image:url('logo/icon-w-512.png');mask-image:url('logo/icon-w-512.png');
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  opacity:0;will-change:opacity;animation:introFade 1.5s var(--ease-fade) .2s forwards}
.intro-word{position:relative;display:block;width:clamp(170px,26vw,260px);aspect-ratio:2117/136}
.intro-word-mask{position:absolute;inset:0;top:0;right:0;bottom:0;left:0;background:var(--silver-flat);
  -webkit-mask-image:url('logo/doc-w-l.png');mask-image:url('logo/doc-w-l.png');
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  opacity:0;will-change:opacity;animation:introFade 1.5s var(--ease-fade) .55s forwards}
@keyframes introFade{from{opacity:0}to{opacity:1}}
/* The logo is painted through mask-image, so until those PNGs decode the element
   draws nothing at all. An animation started at parse time therefore ran, and
   finished, while there was still nothing on screen — and the logo then simply
   appeared at full strength with no fade. Hold both fades until the masks are
   actually in (see the inline script under the markup), then run them. */
.intro-emblem,.intro-word-mask{animation-play-state:paused}
.preloader.is-ready .intro-emblem,.preloader.is-ready .intro-word-mask{animation-play-state:running}
/* Page-to-page: the emblem alone, and much quicker, so it reads as a beat
   between pages rather than a second title sequence. */
.preloader.is-mark .intro-word{display:none}
.preloader.is-mark .intro-mark{width:clamp(48px,7vw,72px)}
.preloader.is-mark .intro-emblem{animation-duration:.45s;animation-delay:0s}
@media(prefers-reduced-motion:reduce){
  /* Keep the fade. A cross-dissolve has no travel, no parallax and no spin, and
     it is what the accessibility guidance recommends USING IN PLACE OF motion —
     so removing it is the wrong reading of this setting. Killing it here is what
     made the intro look broken for anyone with Reduce Motion switched on: the
     logo snapped to full opacity with no fade in, then dissolved. Shorter, not
     absent. */
  .intro-emblem{animation-duration:.7s!important;animation-delay:.1s}
  .intro-word-mask{animation-duration:.7s!important;animation-delay:.35s}
  .preloader{transition-duration:.55s!important}
}

.preloader.hide{opacity:0;pointer-events:none}

/* Content lifts in once the intro clears. Two safeguards, because a hidden page
   is the worst possible failure: the hiding rule only applies after the script
   has added .has-preloader, and this animation reveals everything after five
   seconds regardless of what the script does. */
body.has-preloader:not(.loaded)>header,body.has-preloader:not(.loaded)>main,
body.has-preloader:not(.loaded)>section,body.has-preloader:not(.loaded)>footer{
  opacity:0;animation:failsafeReveal 0s 5s forwards}
/* A pure cross-fade, no lift: the page rising 10px while the overlay dissolved
   made the two read as separate, competing moves instead of one dissolve. */
body.loaded>header,body.loaded>main,body.loaded>section,body.loaded>footer{
  animation:pageBlend .9s var(--ease-fade) both}
@keyframes pageBlend{from{opacity:0}to{opacity:1}}
@keyframes failsafeReveal{to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  body.has-preloader:not(.loaded)>header,body.has-preloader:not(.loaded)>main,
  body.has-preloader:not(.loaded)>section,body.has-preloader:not(.loaded)>footer{opacity:1;animation:none}
  body.loaded>header,body.loaded>main,body.loaded>section,body.loaded>footer{animation:none}
}

/* =======================  NAV  ======================= */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--navh);display:flex;align-items:center;background:rgba(10,10,11,0);border-bottom:1px solid transparent;transition:background .3s ease,border-color .3s ease,transform .3s ease}
.nav.hide{transform:translateY(-100%);pointer-events:none}
.nav.on{background:rgba(10,10,11,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-color:var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;width:100%}
.nav-l{display:flex;align-items:center;gap:22px}
.nav-div{width:2px;height:24px;background:var(--silver-flat);flex:0 0 auto}
.brand-mark{display:block;width:220px;aspect-ratio:2117/136;background:var(--silver-flat);-webkit-mask-image:url('logo/doc-w-l.png');mask-image:url('logo/doc-w-l.png');-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:left center;mask-position:left center}
@media(max-width:480px){.brand-mark{width:175px}}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{font-family:var(--nav-font);font-size:.8125rem;font-weight:var(--ui-weight);letter-spacing:var(--ui-track);text-transform:uppercase;color:var(--ink);opacity:.75;transition:opacity .2s}
.nav-links a:hover,.nav-links a.active{opacity:1}
.nav-links a.active{color:var(--nav-active)}
/* Account sits on its own at the right of the bar, apart from the page links. */
.nav-r{display:flex;align-items:center;gap:16px;margin-left:auto;padding-left:22px;position:relative}
.nav-r::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:2px;height:24px;background:var(--silver-flat);opacity:.5}
.nav-r:empty::before{display:none}
.nav-r .nav-auth{font-family:var(--nav-font);font-size:.8125rem;font-weight:var(--ui-weight);letter-spacing:var(--ui-track);text-transform:uppercase;color:var(--ink);opacity:.75;transition:opacity .2s}
.nav-r .nav-auth:hover{opacity:1}
@media(max-width:860px){.nav-r{padding-left:0;margin-left:auto;margin-right:14px}.nav-r::before{display:none}}
.nav-cta{display:none}
.profile-wrap{position:relative;display:flex;align-items:center}
.profile-btn{width:34px;height:34px;display:grid;place-items:center;color:var(--ink);opacity:.8;border:0}
.profile-btn:hover{opacity:1}
.profile-btn svg{width:18px;height:18px}
.profile-menu{position:absolute;top:calc(100% + 12px);right:0;min-width:140px;background:var(--bg-2);border:1px solid var(--line-2);display:none;flex-direction:column;z-index:50}
.profile-wrap.open .profile-menu{display:flex}
.profile-menu a{display:block;padding:12px 16px;font-family:var(--nav-font);font-weight:var(--ui-weight);font-size:.8125rem;letter-spacing:var(--ui-track);text-transform:uppercase;color:var(--ink);opacity:.75}
.profile-menu a:hover{opacity:1;background:rgba(242,242,240,.06)}
.mm-links .nav-auth{display:block}
.menu-btn{display:none;width:40px;height:40px;border-radius:0;place-items:center;transition:background .2s}
.menu-btn:hover{background:rgba(242,242,240,.08)}
.menu-btn span{display:block;width:18px;height:1.5px;background:var(--ink)}
.menu-btn span+span{margin-top:4px}

.mobile-menu{position:fixed;inset:0;top:0;right:0;bottom:0;left:0;z-index:99;background:var(--bg);display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:calc(var(--navh) + 48px) var(--gut) 220px;overflow-y:auto;-webkit-overflow-scrolling:touch;opacity:0;pointer-events:none}
body.menu-open .mobile-menu{opacity:1;pointer-events:auto}
.mm-links{display:flex;flex-direction:column;gap:20px}
.mobile-menu a{font-family:var(--nav-font);font-weight:var(--ui-weight);font-size:clamp(1.15rem,5.5vw,1.5rem);letter-spacing:var(--ui-track);text-transform:uppercase;color:var(--ink);opacity:.8;padding:5px 0}
.mobile-menu a.active{opacity:1;color:var(--nav-active)}

@media(max-width:860px){
  .nav-links{display:none}
  .nav-div{display:none}
  .menu-btn{display:grid}
}

/* =======================  HERO  ======================= */
/* var(--bg), not #000: the hero has to end on the same black the section below
   it starts on, or the join reads as a line. */
.hero{position:relative;height:104vh;height:104svh;min-height:620px;overflow:hidden;background:var(--bg)}
.hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% center;filter:grayscale(1) brightness(1.02) contrast(1.05)}
.hero-flicker{position:absolute;left:36%;top:36%;width:26%;height:26%;z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(ellipse 60% 55% at 50% 50%,rgba(255,255,255,.85) 0%,rgba(255,255,255,.34) 40%,rgba(255,255,255,0) 74%);
  animation:heroFlicker 9s ease-in-out infinite}
@keyframes heroFlicker{
  0%{opacity:.38}
  15%{opacity:.5}
  32%{opacity:.42}
  50%{opacity:.72}
  58%{opacity:.46}
  75%{opacity:.6}
  100%{opacity:.38}
}
/* Each LED element in the light bar catches in turn, left to right, so the
   headlight reads as lighting up in sequence rather than pulsing as one blob. */
.hero-glints{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen}
/* Each bulb breathes on its own clock with `alternate`, so the light eases in and
   out continuously instead of restarting a loop — no visible jump, no lockstep. */
.hero-glints span{position:absolute;border-radius:50%;opacity:.25;
  background:radial-gradient(closest-side,rgba(255,255,255,.98) 0%,rgba(255,255,255,.6) 34%,rgba(255,255,255,.22) 60%,rgba(255,255,255,0) 100%);
  box-shadow:0 0 26px 8px rgba(255,255,255,.34),0 0 62px 22px rgba(255,255,255,.16);
  filter:blur(1.5px);will-change:opacity,transform;
  animation:bulb 5.4s ease-in-out infinite alternate}
/* a faint horizontal bloom, the way a lens spreads a bright point */
.hero-glints span::before{content:"";position:absolute;left:50%;top:50%;width:340%;height:3px;
  transform:translate(-50%,-50%) rotate(14deg);filter:blur(2px);opacity:.5;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.6) 50%,rgba(255,255,255,0) 100%)}
.hero-glints span:nth-child(1){animation-duration:4.6s;animation-delay:-1.1s}
.hero-glints span:nth-child(2){animation-duration:5.9s;animation-delay:-3.4s}
.hero-glints span:nth-child(3){animation-duration:5.2s;animation-delay:-2.2s}
.hero-glints span:nth-child(4){animation-duration:6.6s;animation-delay:-4.8s}
@keyframes bulb{
  from{opacity:.2;transform:scale(.9)}
  to{opacity:.95;transform:scale(1.14)}
}
@media(prefers-reduced-motion:reduce){.hero-glints span{animation:none;opacity:.45;transform:scale(1)}}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(0,0,0,.34)}
/* Fade must be fully black BEFORE the hero ends, or the join shows as a seam. */
/* Strong, obvious fade across the lower half — fully black well before the hero
   ends, while staying clear of the headlight higher up.
   It sits ABOVE the flat ::after wash (z-index 2 against 1). Painted underneath,
   the wash darkened the fade's solid end to roughly #070707 while the section
   below stayed var(--bg), and that mismatch showed as a hard line straight
   across the page. Ending on exactly var(--bg) is what makes the join vanish. */
.hero::before{content:"";position:absolute;left:0;right:0;bottom:0;height:66%;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(10,10,11,0) 0%,rgba(10,10,11,.38) 18%,rgba(10,10,11,.72) 40%,rgba(10,10,11,.93) 60%,var(--bg) 76%,var(--bg) 100%)}
/* Homepage slogan (Asim, 2026-10-13): Ultrace tile type. Three words stacked,
   block and large, left aligned like a gallery caption, the button under it. */
.hero-tagline{position:absolute;left:0;right:0;top:52%;z-index:2;pointer-events:none}
.hero-tagline .wrap{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(22px,3vw,34px)}
.hero-stack{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:var(--head-track);line-height:.88;font-size:clamp(2.6rem,5.8vw,5.6rem);color:var(--ink);display:flex;flex-direction:column}
.hero-tagline .hero-statement{font-family:var(--nav-font);font-weight:var(--ui-weight);letter-spacing:.01em;font-size:clamp(.85rem,1.7vw,1.05rem);line-height:1.6;color:var(--muted);max-width:54ch}
@media(max-width:640px){.hero-tagline{top:44%}.hero-stack{font-size:clamp(2.3rem,12vw,3.4rem)}}
.mission-h1{font-size:clamp(.8125rem,2.6vw,1.6rem);margin-bottom:20px;white-space:nowrap}
@media(max-width:480px){.mission-h1{letter-spacing:var(--head-track)}}
.about-copy{display:grid;gap:20px}
.about-copy .lead{max-width:none}
.story-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1);opacity:.07;z-index:0;pointer-events:none}
.statement{font-family:var(--disp);font-weight:700;color:var(--ink);font-size:clamp(1.05rem,2.2vw,1.4rem);letter-spacing:0;text-transform:none;max-width:44ch;margin-bottom:8px}

/* ---- phone sizing (tested against iPhone 15 Pro Max, 430x932) ---- */
@media(max-width:640px){
  .hero{height:78svh;min-height:520px}
  /* login/account: fill the screen width and scale up to thumb size */
  .login-box{max-width:none}
  .login-emblem{width:118px;margin:0 auto 30px}
  .login-actions{gap:13px}
  .login-box .btn{padding:17px 18px;font-size:.82rem}
  .login-form{gap:20px}
  .login-form input{font-size:1.05rem;padding:13px 2px}
  .login-form label{font-size:.8125rem}
  .lw-title{font-size:clamp(.8125rem,3.4vw,1.45rem)}
  .lw-note{font-size:.8125rem;max-width:none}
  .account-section{max-width:none}
  /* editorial story panels */
  .ed-hero-in h1{font-size:clamp(2.7rem,13vw,4rem)}
  .ed-copy p{font-size:1rem;line-height:1.8}
  .ed-copy h2{font-size:clamp(1.5rem,7vw,2rem)}
  .ed-statement p{font-size:1rem}
  .ed-band{height:42svh}
  /* article header */
  .post-hero{min-height:58svh}
  .post-hero-in .art-meta{margin-top:14px}
}

/* =======================  PAGE BANNERS (homepage stack)  ======================= */
.pgbanner{position:relative;height:640px;overflow:hidden;background:#000;display:flex}
.pgbanner.small{height:340px}
@media(max-width:760px){.pgbanner{height:380px}.pgbanner.small{height:260px}}
@media(max-width:480px){.pgbanner{height:320px}}
.pgbanner-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.85)}
video.pgbanner-media{filter:grayscale(1) brightness(.85)}
.pgbanner::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(0,0,0,.5)}
.pgbanner-ov{position:relative;z-index:2;width:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--gut) 48px}
.pgbanner-ov .btn{align-self:flex-start}

/* =======================  SECTIONS  ======================= */
section{position:relative}
.sect{padding:clamp(64px,9vw,120px) 0}
/* The events block slides up over the hero's faded tail, so the picture runs on
   behind the heading instead of stopping at a hard edge. */
.hero + .sect{position:relative;z-index:2;background:transparent;margin-top:clamp(-150px,-11vh,-70px);padding-top:0}
.hero + .sect > .wrap{padding-top:clamp(20px,3vw,40px)}
.s-dark{background:var(--bg)}
.s-alt{background:var(--bg-2)}
.s-light{background:var(--silver);color:var(--silver-ink)}
.s-light-alt{background:var(--silver-2);color:var(--silver-ink)}
.sect-head{max-width:64ch;margin-bottom:48px}
.sect-head h2{margin-bottom:16px}

/* reveal-on-scroll */

/* =======================  GALLERY GRID  ======================= */
.ggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gitem{position:relative;overflow:hidden;border-radius:0;aspect-ratio:4/5;background:var(--bg-2);cursor:pointer}
.s-light .gitem,.s-light-alt .gitem{background:rgba(17,17,19,.06)}
.gitem img{width:100%;height:100%;object-fit:cover}
.gitem .cap{position:absolute;left:14px;bottom:12px;z-index:2;font-size:.8125rem;font-family:var(--nav-font);font-weight:var(--ui-weight);letter-spacing:var(--ui-track);text-transform:uppercase;color:#fff;opacity:0;transform:translateY(6px);transition:.3s var(--ease)}
.gitem::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.55) 100%);opacity:0;transition:opacity var(--t-zoom) var(--ease-overlay)}
.gitem:hover::after,.gitem:hover .cap{opacity:1;transform:none}
.gitem.wide{grid-column:span 2;aspect-ratio:8/5}
@media(max-width:760px){.ggrid{grid-template-columns:repeat(2,1fr)}.gitem.wide{grid-column:span 2}}

.lightbox{position:fixed;inset:0;top:0;right:0;bottom:0;left:0;z-index:300;display:none;align-items:center;justify-content:center;background:rgba(10,10,11,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:40px}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:86vh;object-fit:contain;border-radius:0;transition:opacity .35s var(--ease-fade)}
.lb-close,.lb-nav{position:fixed;color:var(--ink);width:46px;height:46px;border:1px solid var(--line-2);border-radius:0;display:grid;place-items:center;transition:.2s;z-index:2;background:rgba(10,10,11,.5)}
.lb-close{top:24px;right:24px;font-size:1.1rem}.lb-nav{top:50%;transform:translateY(-50%);font-size:1.4rem}
.lb-close:hover,.lb-nav:hover{background:var(--silver-hover);border-color:var(--silver-hover);color:var(--bg)}
.lb-prev{left:22px}.lb-next{right:22px}
.lb-count{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);font-size:.8125rem;letter-spacing:.06em;color:var(--muted);z-index:2}

/* =======================  ARTICLE HEADER  =======================
   Long headlines get the full banner width instead of stacking in a narrow
   column: image runs edge to edge, title and meta sit over its lower third. */
.post-hero{position:relative;min-height:68vh;display:flex;align-items:flex-end;overflow:hidden;background:#000}
.post-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.2) brightness(.6)}
.post-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,11,.25) 0%,rgba(10,10,11,.1) 45%,rgba(10,10,11,.92) 100%)}
.post-hero-in{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut) clamp(34px,5vw,68px)}
.post-hero-in h1{font-size:clamp(1.5rem,3.6vw,2.9rem);line-height:1.22;max-width:none}
.post-hero-in .art-meta{margin-top:18px}
@media(max-width:760px){.post-hero{min-height:56vh}.post-hero-in h1{font-size:clamp(1.3rem,6vw,1.9rem);max-width:none}}

/* =======================  BLOG MAGAZINE GRID  ======================= */
.mag-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 24px}
.mag-card{display:block}
.mag-card .mag-img{position:relative;overflow:hidden;border-radius:0;aspect-ratio:4/3;background:var(--bg-2);margin-bottom:16px}
.mag-card .mag-img img{width:100%;height:100%;object-fit:cover}
.mag-card h3{font-size:1.1rem;line-height:1.3;margin-bottom:10px;transition:color .2s}
.mag-card:hover h3{color:var(--acc-2)}
.mag-meta{font-size:.8125rem;color:var(--muted);display:flex;gap:8px;align-items:center}
.mag-meta .mdot{width:3px;height:3px;border-radius:50%;background:var(--muted);flex:0 0 auto}
@media(max-width:960px){.mag-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.mag-grid{grid-template-columns:1fr}}
.art-meta{margin-top:14px}
.art-copy{max-width:68ch;display:grid;gap:20px;margin-top:8px}


/* =======================  EVENTS  ======================= */
/* ---- poster-style event cards ---- */

.eposters{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.eposters.single{grid-template-columns:minmax(0,440px);justify-content:center}
.eposters.single.flush{justify-content:start}
.sect-head.center{text-align:center;margin-left:auto;margin-right:auto}
.sect-head.center h2{margin-bottom:0}
.sect-head.flush{margin-bottom:32px}
.sect-head.flush h2{margin-bottom:0}
.ecard{display:flex;flex-direction:column;gap:14px;min-width:0}
.tile-mail{align-self:flex-start;font-family:var(--nav-font);font-weight:var(--ui-weight);font-size:.8125rem;letter-spacing:var(--ui-track);text-transform:uppercase;color:var(--muted);text-decoration:underline;text-underline-offset:4px;transition:color .2s}
.tile-mail:hover{color:var(--ink)}
.mail-band{margin:clamp(56px,8vw,96px) auto 0;max-width:720px;text-align:center;padding:clamp(36px,5vw,56px) var(--gut);border:1px solid var(--line-2);background:var(--bg-2)}
.mail-band h3{font-size:clamp(1.3rem,2.6vw,1.9rem);margin-bottom:12px}
.mail-band p{font-family:var(--nav-font);font-weight:var(--ui-weight);letter-spacing:var(--ui-track);text-transform:uppercase;font-size:.84rem;line-height:1.8;color:var(--muted);max-width:46ch;margin:0 auto 26px}
/* The box takes the same outline sweep as the buttons and the nav underline. */
.mail-band{position:relative}
.mail-band::before,.mail-band::after{content:"";position:absolute;inset:-1px;border:1px solid var(--ink);pointer-events:none;transition:transform .45s var(--ease-x)}
.mail-band::before{border-width:1px 0;transform:scaleX(0);transform-origin:right;transition-delay:.15s}
.mail-band::after{border-width:0 1px;transform:scaleY(0);transform-origin:top}
.mail-band:hover::before,.mail-band:focus-within::before{transform:scaleX(1);transform-origin:left;transition-delay:0s}
.mail-band:hover::after,.mail-band:focus-within::after{transform:scaleY(1);transform-origin:bottom;transition-delay:.15s}
.ptile{display:block;position:relative;overflow:hidden;border-radius:0;aspect-ratio:3/4;background:#000;isolation:isolate}
.ptile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ptile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,11,0) 0%,rgba(10,10,11,.15) 40%,rgba(10,10,11,.92) 100%);z-index:1}
.ptop{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:16px 18px;gap:10px}
.ppresents{font-family:var(--nav-font);font-size:.8125rem;font-weight:var(--ui-weight);letter-spacing:var(--ui-track);text-transform:uppercase;color:rgba(242,242,240,.8)}
.pbadge{width:34px;height:34px;flex:0 0 auto}
.tover{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px 20px 22px}
.ptag{display:block;font-family:var(--nav-font);font-size:.8125rem;font-weight:var(--ui-weight);letter-spacing:var(--ui-track);text-transform:uppercase;color:var(--acc-2);margin-bottom:6px}
.ptitle{font-family:var(--disp);font-weight:800;font-size:clamp(1.05rem,1.9vw,1.35rem);line-height:1.15;letter-spacing:var(--head-track);text-transform:uppercase;color:var(--ink);margin-bottom:8px}
.pdate{font-family:var(--nav-font);font-weight:var(--ui-weight);font-size:.8125rem;color:var(--muted);letter-spacing:var(--ui-track);text-transform:uppercase}
.eidx{position:absolute;top:16px;right:16px;z-index:2;font-family:var(--disp);font-weight:800;font-size:.8125rem;color:rgba(242,242,240,.55)}

.ptile.locked img{filter:brightness(.12) grayscale(.6)}
.ptile.locked::after{background:linear-gradient(180deg,rgba(10,10,11,.4) 0%,rgba(10,10,11,.75) 40%,rgba(10,10,11,.98) 100%)}
.ptile.locked .lock-mark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;display:block}
.emblem-lock{display:block;width:104px;aspect-ratio:2357/2390;background:var(--silver-flat);-webkit-mask-image:url('logo/icon-w-512.png');mask-image:url('logo/icon-w-512.png');-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;opacity:.9}
/* Padlock sits inside the emblem's centre counter, same silver as the mark. */
.lock-icon{position:absolute;top:53%;left:49.5%;transform:translate(-50%,-50%);width:25px;height:25px;color:var(--silver-flat);filter:drop-shadow(0 0 3px rgba(10,10,11,.9))}
.ptile.locked .ptitle{color:var(--muted)}
.ptile.locked .pdate{color:var(--faint)}
.ptile.locked .pdate.real{color:var(--ink);font-weight:700}
.ptile.blurred img{filter:brightness(.38) blur(9px)}
/* Usman 2026-10-13: the two Drive photos are dark and red; lift them and keep them monochrome so they read behind the lock. */
.ptile.locked.lift img{filter:brightness(.34) grayscale(1)}
.ptile.blurred.lift img{filter:brightness(.5) grayscale(1) blur(9px)}
@media(max-width:860px){.eposters{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.eposters{grid-template-columns:1fr}.ptile{aspect-ratio:4/5}}

/* =======================  CONTACT BANNER  ======================= */
.contact-banner{background:var(--bg-2);padding:clamp(56px,8vw,100px) 0}
.cb-inner{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.cb-l h2{margin-bottom:14px}
form{display:grid;gap:18px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:grid;gap:8px}
label{font-family:var(--nav-font);font-size:.8125rem;font-weight:var(--ui-weight);letter-spacing:var(--ui-track);text-transform:uppercase;color:var(--muted)}
input,textarea,select{background:transparent;border:0;border-bottom:1px solid var(--line-2);padding:10px 2px;color:var(--ink);font-family:var(--body-font);font-weight:400;letter-spacing:0;font-size:1rem;transition:border-color .2s;width:100%}
/* Caps on single-line fields only — a typed paragraph in caps is unreadable. This is
   cosmetic, so submitted values keep whatever casing the visitor typed. */
input:not([type="checkbox"]):not([type="file"]),select{text-transform:uppercase;font-family:var(--nav-font);font-weight:var(--ui-weight);letter-spacing:var(--ui-track)}
input::placeholder,textarea::placeholder{font-family:var(--body-font);font-weight:400;letter-spacing:0;text-transform:none;color:#878b92}
/* Chrome paints its own white/yellow block on autofilled fields. The long
   transition keeps our transparent field showing; the fill-colour keeps the text
   readable on the dark ground. */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,
input:-webkit-autofill:active,textarea:-webkit-autofill,select:-webkit-autofill{
  -webkit-text-fill-color:var(--ink);caret-color:var(--ink);
  transition:background-color 100000s ease-in-out 0s;
  background-clip:content-box}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--acc)}
textarea{min-height:140px;resize:vertical}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9ea3' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right center;background-size:16px;padding-right:24px}
select option{background:var(--bg-2);color:var(--ink)}
/* Contact form fits one view: paired rows, shorter message box. */
.form-compact{gap:14px}
.form-compact textarea{min-height:92px}
.form-compact .submit{margin-top:2px}
@media(min-width:861px){.form-compact .f2{gap:22px}}
/* Break only on wide screens — on a phone the copy wraps on its own. */
.br-wide{display:none}
@media(min-width:861px){.br-wide{display:inline}}
.req{color:#ff5c5c;margin-left:2px}
.submit{justify-self:start;margin-top:4px}
.ok{display:none;font-family:var(--nav-font);font-weight:var(--ui-weight);font-size:.8125rem;letter-spacing:var(--ui-track);text-transform:uppercase;border:1px solid var(--acc);padding:14px;color:var(--ink);border-radius:0;background:rgba(199,201,204,.14)}
.ok.show{display:block}
.form-err{display:none;font-family:var(--body-font);font-weight:400;letter-spacing:normal;text-transform:none;font-size:.82rem;line-height:1.6;color:var(--err)}
.form-err.show{display:block}
.field.err input,.field.err select,.field.err textarea{border-color:#ff5c5c}
@media(max-width:760px){.cb-inner{grid-template-columns:1fr}.f2{grid-template-columns:1fr}}

/* =======================  FOOTER  ======================= */
footer{padding:40px 0;border-top:1px solid var(--line)}
footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
footer .fl{display:flex;align-items:center;gap:16px}
footer .fl img.emblem{width:30px;height:auto}
.fdiv{width:1px;height:30px;background:var(--line-2)}
.foot-meta{font-family:var(--nav-font);font-weight:var(--ui-weight);font-size:.8125rem;letter-spacing:var(--ui-track);text-transform:uppercase;color:var(--muted)}
.foot-r{display:flex;align-items:center;gap:18px}
.terms{font-family:var(--nav-font);font-weight:var(--ui-weight);font-size:.8125rem;letter-spacing:var(--ui-track);text-transform:uppercase;color:var(--muted)}
.socials{display:flex;gap:18px}
.socials a{display:grid;place-items:center;transition:opacity .2s}
.socials a:hover{opacity:.65}
.socials svg{width:26px;height:26px;stroke:var(--ink)}

/* =======================  COOKIE BANNER  ======================= */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:500;background:var(--bg-2);border-top:1px solid var(--line-2);padding:20px var(--gut);display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:space-between;font-family:var(--nav-font)}
.cookie-banner p{margin:0;font-family:var(--nav-font);font-weight:var(--ui-weight);font-size:.8125rem;letter-spacing:var(--ui-track);text-transform:uppercase;line-height:1.9;color:var(--muted);max-width:none;flex:1 1 440px}
.cookie-banner a{color:var(--ink);text-decoration:underline}
.cookie-actions{display:flex;gap:12px;flex:0 0 auto;flex-wrap:wrap}
.cookie-actions .btn{padding:10px 20px;font-size:.8125rem}
.cookie-prefs-btn{font-family:var(--nav-font);font-weight:var(--ui-weight);font-size:.8125rem;letter-spacing:var(--ui-track);text-transform:uppercase;color:var(--muted);text-decoration:underline;background:none;border:0;cursor:pointer}
/* On a phone the banner must stay a bar, not take over the screen: tighter copy,
   preferences on its own line, Reject and Accept side by side. */
@media(max-width:640px){
  .cookie-banner{flex-direction:column;align-items:stretch;gap:12px;padding:14px var(--gut) 16px}
  .cookie-banner p{font-size:.8125rem;line-height:1.75;flex:none}
  .cookie-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:center}
  .cookie-prefs-btn{grid-column:1/-1;justify-self:start;font-size:.8125rem}
  .cookie-actions .btn{width:100%;padding:11px 10px;font-size:.8125rem;letter-spacing:var(--ui-track)}
}

/* ---- cookie preferences modal ---- */
.prefs-modal{position:fixed;inset:0;top:0;right:0;bottom:0;left:0;z-index:600;display:none;align-items:center;justify-content:center;background:rgba(10,10,11,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:24px}
.prefs-modal.open{display:flex}
.prefs-box{width:100%;max-width:440px;background:var(--bg-2);border:1px solid var(--line-2);padding:32px;max-height:86vh;overflow-y:auto}
.prefs-box h2{font-size:1.1rem;margin-bottom:14px}
.prefs-box>p{font-size:.82rem;color:var(--muted);line-height:1.65;margin-bottom:24px}
.prefs-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px 0;border-top:1px solid var(--line)}
.prefs-row:first-of-type{border-top:1px solid var(--line)}
.prefs-row-text strong{display:block;font-family:var(--nav-font);font-size:.8125rem;font-weight:var(--ui-weight);letter-spacing:var(--ui-track);text-transform:uppercase;margin-bottom:4px}
.prefs-row-text span{display:block;font-size:.8125rem;color:var(--muted);line-height:1.6}
.prefs-toggle{position:relative;flex:0 0 auto;width:40px;height:22px;border-radius:0;border:1px solid var(--line-2);background:transparent;cursor:pointer}
.prefs-toggle::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;background:var(--muted);transition:transform .2s,background .2s}
.prefs-toggle.on{border-color:var(--silver-flat)}
.prefs-toggle.on::after{transform:translateX(17px);background:var(--silver-flat)}
.prefs-toggle.disabled{opacity:.4;cursor:not-allowed}
.prefs-actions{display:flex;justify-content:flex-end;margin-top:28px}

/* ---- legal modal (privacy policy over the gate) ---- */
.legal-modal{position:fixed;inset:0;top:0;right:0;bottom:0;left:0;z-index:10001;display:none;align-items:center;justify-content:center;background:rgba(10,10,11,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:24px}
.legal-modal.open{display:flex;animation:pageBlend .4s var(--ease) both}
.legal-modal-box{position:relative;width:100%;max-width:640px;background:var(--bg-2);border:1px solid var(--line-2);padding:40px 32px 32px;max-height:84vh;overflow-y:auto}
.legal-modal-close{position:absolute;top:12px;right:12px;width:34px;height:34px;display:grid;place-items:center;color:var(--muted);font-size:1rem;transition:color .2s}
.legal-modal-close:hover{color:var(--ink)}
.legal-modal-body h2{font-size:1.15rem;margin-bottom:14px}
.legal-modal-body h3{font-size:.86rem;margin:22px 0 8px}
.legal-modal-body p,.legal-modal-body li{font-size:.86rem;color:var(--muted);line-height:1.7;max-width:none}
.legal-modal-body ul{padding-left:18px;margin:8px 0}
.legal-modal-sec+.legal-modal-sec{margin-top:36px;padding-top:32px;border-top:1px solid var(--line)}
/* legal points: small emblem in place of numbers (legal page and modal) */
#terms h3,#privacy-policy h3,.legal-modal-body h3{display:flex;align-items:center;gap:10px}
#terms h3::before,#privacy-policy h3::before,.legal-modal-body h3::before{content:"";flex:none;width:1em;height:1em;background:url(logo/icon-w-512.png) center/contain no-repeat;opacity:.9}

/* ---- mailing list modal (shared component) ---- */
.mail-modal{position:fixed;inset:0;top:0;right:0;bottom:0;left:0;z-index:600;display:none;align-items:center;justify-content:center;background:rgba(10,10,11,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:24px}
.mail-modal.open{display:flex}
.mail-modal-box{position:relative;width:100%;max-width:960px;background:var(--bg-2);border:1px solid var(--line-2);display:grid;grid-template-columns:1fr 1fr;max-height:90vh;overflow-y:auto}
.mail-modal-img{position:relative;min-height:100%;background:var(--bg)}
.mail-modal-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.15) brightness(.85)}
.mail-modal-copy{padding:clamp(36px,5vw,56px) clamp(28px,4vw,52px)}
.mail-modal-copy .lead{font-size:1rem}
.mail-modal-copy .field label{display:block;text-align:left}
.mail-modal-copy .ml-row{flex-direction:column;gap:14px}
.mail-modal-copy .ml-row .btn{width:100%}
@media(max-width:760px){.mail-modal{padding:12px}.mail-modal-box{grid-template-columns:1fr}.mail-modal-img{min-height:180px;aspect-ratio:16/9}}
.mail-modal-close{position:absolute;top:14px;right:14px;z-index:2;width:36px;height:36px;display:grid;place-items:center;color:var(--ink);background:rgba(10,10,11,.55);font-size:1.1rem}
.mail-modal-close:hover{color:var(--ink)}
.mail-modal-box h2{margin-bottom:14px;font-size:clamp(1.6rem,3.4vw,2.3rem)}
.mail-modal-box .lead{margin-bottom:24px}

/* =======================  MAILING LIST  ======================= */
/* Usman 2026-10-13: given space and depth. A photo (in colour since AM, 2026-10-15) sits behind the band and fades
   to black under the copy; the heading is full size; the field is one large underlined line. */
.mail-cta{position:relative;isolation:isolate;overflow:hidden;background:var(--bg);padding:clamp(48px,6vw,84px) 0;border-top:1px solid var(--line)}
.mail-cta::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,var(--bg) 0%,rgba(10,10,11,.9) 38%,rgba(10,10,11,.55) 100%),url(photos/DSC09651.webp) right 40%/cover no-repeat}
/* Part 1 §4.10: this heading must stay on one line at every width. */
.mail-cta h2{white-space:nowrap;font-size:clamp(1.05rem,2.8vw,2.05rem)}
.mail-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.mail-cta .lead{font-size:clamp(.95rem,1.2vw,1.08rem);max-width:44ch;margin-bottom:0;color:var(--muted)}
.mail-cta label{color:var(--ink)}

.mail-l h2{margin-bottom:12px}
/* Field and button share a row; the consent line sits quietly underneath. */
.mail-form{display:flex;flex-direction:column;gap:16px}
.ml-row{display:flex;gap:14px;align-items:flex-end}
.ml-row .field{flex:1 1 auto;gap:7px}
.ml-row .btn.submit{flex:0 0 auto;margin-top:0;padding:0 30px;height:46px;font-size:.8125rem}
.mail-cta input[type="email"]{font-size:.95rem;padding:11px 2px;border-bottom-color:var(--ink)}
/* Usman 2026-10-13: the placeholder says the field is required, in the UI type, uppercase. */
.mail-cta input[type="email"]::placeholder,.mail-modal-copy input[type="email"]::placeholder{color:var(--muted);font-family:var(--nav-font);font-weight:var(--ui-weight);letter-spacing:var(--ui-track);text-transform:uppercase}
@media(max-width:560px){.ml-row{flex-direction:column;align-items:stretch}.ml-row .btn.submit{width:100%;height:46px}}
@media(max-width:760px){.mail-cta::after{background:linear-gradient(180deg,rgba(10,10,11,.75) 0%,rgba(10,10,11,.92) 55%,var(--bg) 100%),url(photos/mobile/DSC09651.webp) center 35%/cover no-repeat}}
.mail-row{display:flex;gap:12px}
.mail-row input[type="email"]{flex:1}
.mail-check{display:flex;align-items:flex-start;gap:10px;font-family:var(--nav-font);font-weight:var(--ui-weight);letter-spacing:var(--ui-track);text-transform:uppercase;font-size:.8125rem;line-height:1.6;color:var(--muted);cursor:pointer}
/* Square, fixed size, and sitting on the first line of the text beside it. */
.mail-check input{appearance:none;-webkit-appearance:none;box-sizing:border-box;width:16px;height:16px;min-height:16px;max-height:16px;padding:0;margin:0;flex:0 0 16px;align-self:flex-start;border:1px solid var(--line-2);border-radius:0;display:inline-grid;place-content:center;cursor:pointer}
.mail-check input:checked{background:var(--ink)}
.mail-check input:checked::after{content:"\2715";font-size:10px;line-height:1;color:var(--bg)}
.mail-check a{color:var(--ink);text-decoration:underline}
@media(max-width:760px){.mail-inner{grid-template-columns:1fr}.mail-row{flex-direction:column}}
/* AM, 2026-10-15: the tick box comes first, before the consent text, like every other tick box on the site. */
.mail-check-end{white-space:nowrap}

/* =======================  OUR STORY  ======================= */
.story-section{padding:clamp(56px,8vw,100px) 0}
.story-grid{display:grid;grid-template-columns:1fr 1.18fr;gap:clamp(40px,5vw,72px);align-items:center}
.story-grid.rev{grid-template-columns:1.18fr 1fr}
.story-grid.rev .story-media{order:2}
.story-media{border-radius:0;overflow:hidden;aspect-ratio:4/5;background:var(--bg-2)}
.story-media img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.3) brightness(.9)}
.story-copy{max-width:52ch}
.story-copy h2{margin-bottom:6px}
.story-copy p{margin-top:14px}
.story-quote{padding:clamp(48px,8vw,90px) 0;text-align:center}
.story-quote h2{font-size:clamp(1.9rem,5.2vw,3.4rem);max-width:22ch;margin:14px auto 0}
/* Our Story reads as one article: a single measure of copy with full-width
   photographs between sections, instead of alternating split panels. */
.story-article{max-width:960px;margin:0 auto;padding:clamp(40px,6vw,80px) var(--gut) clamp(24px,4vw,48px)}
.story-article>*:not(figure){max-width:680px;margin-left:auto;margin-right:auto}
.story-article h2{font-size:clamp(1.5rem,3.2vw,2.4rem);margin:clamp(40px,6vw,64px) auto 18px}
.story-article h2:first-child{margin-top:0}
.story-article p{font-size:1.08rem;line-height:1.85;color:var(--ink)}
.story-article p+p{margin-top:18px}
.story-article .lead{font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.6;color:var(--ink);max-width:680px;margin:0 auto}
.story-article figure{margin:clamp(40px,6vw,64px) 0;aspect-ratio:3/2;overflow:hidden;background:var(--bg-2)}
.story-article figure img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15)}
.story-article .story-pull{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:var(--head-track);font-size:clamp(1.3rem,3vw,2.1rem);line-height:1.3;text-align:center;margin-top:clamp(40px,6vw,64px)}
/* Sign-off: "We Are" over the block wordmark (Asim, 2026-10-13). */
.story-signoff{text-align:center;padding:clamp(56px,8vw,110px) 0}
.story-signoff .wrap{display:flex;flex-direction:column;align-items:center;gap:clamp(18px,2.6vw,34px)}
.so-we{font-family:var(--disp);font-weight:800;letter-spacing:var(--head-track);text-transform:uppercase;font-size:clamp(3rem,11vw,9.4rem);line-height:.86;color:var(--ink)}
.so-logo{display:block;width:min(100%,1080px);aspect-ratio:2117/136;background:var(--silver-flat);-webkit-mask-image:url('logo/doc-w-l.png');mask-image:url('logo/doc-w-l.png');-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}

/* Our Story, editorial (Usman, 2026-10-14, after ultraceofficial.com): centred
   heading blocks, full-bleed photo pairs, split image and text panels, a
   three-up grid. Every photo is shown at its own 2:3 shape, so nothing is
   cropped or zoomed. Only the text and grid fade up; the photos sit still. */
.story-article.os{max-width:none;padding:0}
.story-article.os>*{max-width:none}
.story-article.os figure{margin:0;aspect-ratio:2/3;overflow:hidden;background:var(--bg-2)}
.story-article.os figure img{display:block;width:100%;height:100%;object-fit:cover}
.story-article.os h2{font-size:clamp(2.2rem,6vw,5rem);line-height:.92;margin:0;text-wrap:balance}
.os-sub{font-family:var(--nav-font);font-weight:var(--ui-weight);letter-spacing:var(--ui-track);text-transform:uppercase;font-size:clamp(.82rem,1.2vw,.95rem);line-height:1.5;color:var(--muted);margin:clamp(12px,1.6vw,18px) 0 clamp(26px,3.4vw,40px)}
.story-article.os p.os-sub{font-size:clamp(.82rem,1.2vw,.95rem);line-height:1.5;color:var(--muted)}
.story-article.os>.os-text{max-width:760px;margin:0 auto;padding:clamp(80px,11vw,160px) var(--gut);text-align:center}
.os-text p{max-width:none}
.os-text p:not(.os-sub){text-align:left}
.os-text h2+p:not(.os-sub){margin-top:clamp(26px,3.4vw,40px)}
.os-pair{display:grid;grid-template-columns:1fr 1fr}
.os-split{display:grid;grid-template-columns:1fr 1fr;background:var(--bg-2)}
.os-panel{display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(40px,7vw,110px)}
.os-panel h2{margin-bottom:clamp(22px,3vw,36px)!important}
.os-flip figure{order:2}
.os-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,30px);max-width:var(--maxw)!important;margin:clamp(80px,11vw,160px) auto 0;padding:0 var(--gut)}
.os-close{padding-bottom:clamp(64px,9vw,120px)}
.os-links{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(24px,4vw,60px);margin-top:clamp(36px,5vw,56px)}
.os-links a{font-family:var(--nav-font);font-weight:var(--ui-weight);letter-spacing:var(--ui-track);text-transform:uppercase;font-size:.85rem;color:var(--ink);text-decoration:none;padding-bottom:6px;border-bottom:1px solid var(--line-2);transition:border-color .3s ease}
.os-links a:hover,.os-links a:focus-visible{border-color:var(--ink)}
@media(max-width:800px){
  .os-pair,.os-split{grid-template-columns:1fr}
  .os-flip figure{order:0}
  .os-panel{padding:clamp(40px,10vw,64px) var(--gut)}
  .os-grid{grid-template-columns:1fr;gap:14px}
}
/* slower, softer arrival than the standard reveal */
/* closing lines: short, centred, broken for rhythm */
.ed-closing{padding-bottom:clamp(40px,6vw,72px)}
.ed-closing p{font-size:clamp(1.3rem,3.4vw,2.3rem);font-weight:700;line-height:1.5;max-width:none;color:var(--ink)}
@media(max-width:760px){.story-grid,.story-grid.rev{grid-template-columns:1fr}.story-grid .story-media{order:-1;aspect-ratio:4/3}.story-copy{max-width:none}}

/* =======================  OUR STORY (editorial)  =======================
   Ultrace-style rhythm: imagery runs edge to edge at full height, copy sits in
   its own half with room to breathe, and statement bands break up the scroll. */
/* Inner page heroes (Asim, 2026-10-13): show more of each photograph. The
   picture runs tall, anchored nearer its top, and bleeds down behind the page,
   fading to black; the title sits where that fade begins and the content follows
   straight on, so the page starts higher. Titles are large block type, left
   aligned, gallery style; the line under them is uppercase UI type everywhere.
   --eh-img is how tall the picture runs, --eh-top is where the title starts,
   --eh-y moves the crop (0% shows the top of the frame). */
.ed-hero{--eh-img:112vh;--eh-top:54vh;--eh-y:30%;position:relative;display:block;height:auto;min-height:0;padding-top:var(--eh-top)}
.ed-hero>img{position:absolute;left:0;right:0;top:0;width:100%;height:var(--eh-img);object-fit:cover;object-position:var(--eh-x,center) var(--eh-y);filter:grayscale(.15) brightness(.78);z-index:0}
.ed-hero::after{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--eh-img) + 2px);z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,11,.28) 0%,rgba(10,10,11,0) 18%,rgba(10,10,11,0) 36%,rgba(10,10,11,.55) 56%,rgba(10,10,11,.88) 76%,var(--bg) 97%)}
.ed-hero-in{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);text-align:left}
.ed-hero-in h1{font-size:clamp(3rem,9.6vw,8.6rem);line-height:.88;margin-bottom:clamp(16px,2vw,26px);max-width:none}
.ed-hero-in .dotline,.ed-hero-in .lead{font-family:var(--nav-font);font-weight:var(--ui-weight);letter-spacing:var(--ui-track);text-transform:uppercase;color:var(--silver-flat);font-size:clamp(.82rem,1.3vw,1.02rem);line-height:1.7;max-width:62ch;margin:0}
.ed-hero-in .lead+.lead{margin-top:6px}
.ed-hero-in .lead a{color:var(--ink);text-decoration:underline}
/* Our Story carries the slogan across the picture as block type, not a caption. */
.ed-hero-in .dotline.big{font-family:var(--disp);font-weight:800;letter-spacing:var(--head-track);font-size:clamp(1.4rem,3.4vw,3rem);line-height:1;color:var(--ink);max-width:none}
.ed-hero.mid{--eh-img:104vh;--eh-top:50vh}
.ed-hero.short{--eh-img:72vh;--eh-top:34vh}
.ed-hero.short .ed-hero-in h1{font-size:clamp(2.4rem,6.4vw,5.6rem)}
/* What follows the hero sits over the faded tail of the picture. */
.ed-hero + .sect,.ed-hero + .feature,.ed-hero + .story-article{position:relative;z-index:2;background:transparent}
.ed-hero + .sect{padding-top:clamp(36px,5vw,64px)}
.ed-hero + .feature{padding-top:clamp(32px,5vw,64px)}
@media(max-width:860px){.ed-hero{--eh-img:86svh;--eh-top:44svh}.ed-hero.mid{--eh-img:80svh;--eh-top:40svh}.ed-hero.short{--eh-img:60svh;--eh-top:28svh}}

.ed-split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:76vh}
.ed-split.rev .ed-media{order:-1}
.ed-media{position:relative;overflow:hidden;min-height:56vh;background:var(--bg-2)}
.ed-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.18)}
.ed-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(36px,5.5vw,92px);background:var(--bg)}
.ed-copy.alt{background:var(--bg-2)}
.ed-copy h2{font-size:clamp(1.9rem,4.2vw,3.4rem);margin-bottom:20px}
.ed-copy p{font-size:.95rem;line-height:1.85;max-width:48ch}
.ed-copy p+p{margin-top:16px}

/* full-bleed band with a single line held over it */
.ed-band{position:relative;height:62vh;min-height:360px;overflow:hidden;display:grid;place-items:center}
.ed-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.4) brightness(.45)}
.ed-band .dotline{position:relative;z-index:2;font-size:clamp(.85rem,2.4vw,1.8rem);color:var(--ink);text-align:center;padding:0 var(--gut)}

.ed-statement{text-align:center;padding:clamp(64px,9vw,130px) var(--gut);background:var(--bg)}
.ed-statement h2{font-size:clamp(1.9rem,4.6vw,3.6rem);margin-bottom:22px}
.ed-statement p{font-size:1rem;line-height:1.9;max-width:64ch;margin:0 auto}
.ed-statement p+p{margin-top:16px}

.ed-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.ed-strip .ed-cell{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bg-2)}
.ed-strip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.2)}

@media(max-width:860px){
  .ed-split,.ed-split.rev{grid-template-columns:1fr;min-height:0}
  .ed-split .ed-media,.ed-split.rev .ed-media{order:-1;min-height:0;aspect-ratio:4/3}
  .ed-copy{padding:clamp(28px,7vw,44px) var(--gut)}
  .ed-band{height:46vh}
  .ed-strip{grid-template-columns:1fr;gap:4px}
  .ed-strip .ed-cell{aspect-ratio:16/10}
}

/* =======================  MEDIA HOVER GRID  ======================= */
/* Horizontal rail: tiles scroll left-right, snap, and drag with the mouse. */
/* Every tile is on screen at once: the old horizontal rail hid the fourth tile
   behind a drag/scroll-snap that mouse users could not reach. */
.media-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}
.media-tile{position:relative;display:block;overflow:hidden;aspect-ratio:4/3}
.media-tile img{width:100%;height:100%;object-fit:cover;filter:brightness(.88)}
.media-tile::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(10,10,11,0);transition:background var(--t-zoom) var(--ease-overlay)}
/* Hover (Asim, 2026-10-13): the picture drops much darker and the title arrives
   as large block type, stacked and left aligned at the foot of the tile. */
.media-tile .mt-title{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;justify-content:flex-start;text-align:left;padding:clamp(20px,3vw,40px);opacity:0;transition:opacity var(--t-zoom) var(--ease-overlay)}
.media-tile .mt-title span{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:var(--head-track);font-size:clamp(2rem,4.4vw,4.2rem);line-height:.9;color:#fff}
.media-tile:hover::after,.media-tile:focus-visible::after{background:rgba(10,10,11,.8)}
.media-tile:hover .mt-title,.media-tile:focus-visible .mt-title{opacity:1}
@media(hover:none){.media-tile::after{background:linear-gradient(180deg,rgba(10,10,11,0) 30%,rgba(10,10,11,.75) 100%)}.media-tile .mt-title{opacity:1}.media-tile img{filter:brightness(.8)}}
@media(max-width:640px){.media-grid{grid-template-columns:1fr}}

/* Credits read as body copy, matching the line above them — not as UI furniture. */
.shoot-credits{display:flex;flex-direction:column;gap:6px;margin-top:18px;font-family:var(--body-font);font-weight:400;letter-spacing:normal;text-transform:none;font-size:1.05rem;line-height:1.7;color:var(--muted)}
.shoot-credits a{color:var(--ink);text-decoration:underline}

/* ---- media viewer (swipeable large-format image nav) ---- */
.mv-stage{position:relative;aspect-ratio:16/10;background:var(--bg-2);overflow:hidden;margin-top:40px}
.mv-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s var(--ease-fade);cursor:pointer}
.mv-img.under{opacity:1;cursor:default}
.mv-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:48px;height:48px;display:grid;place-items:center;color:var(--ink);background:rgba(10,10,11,.5);border:1px solid var(--line-2);font-size:1.4rem;transition:background .2s}
.mv-nav:hover{background:var(--silver-hover);color:var(--bg);border-color:var(--silver-hover)}
.mv-prev{left:16px}.mv-next{right:16px}
.mv-count{margin-top:14px;text-align:center;font-family:var(--nav-font);font-weight:var(--ui-weight);font-size:.8125rem;letter-spacing:var(--ui-track);text-transform:uppercase;color:var(--muted)}
@media(max-width:640px){.mv-stage{aspect-ratio:4/5}.mv-nav{width:40px;height:40px}}

/* =======================  STORE  ======================= */
.shop-cats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:36px}
.shop-cat{font-family:var(--nav-font);font-size:.8125rem;font-weight:var(--ui-weight);letter-spacing:var(--ui-track);text-transform:uppercase;padding:11px 20px;border:1px solid var(--line-2);border-radius:0;color:var(--muted);transition:all .2s;cursor:pointer;background:transparent}
.shop-cat.active{color:var(--bg);background:var(--silver-flat);border-color:var(--silver-flat)}
.shop-cat:hover:not(.active){border-color:var(--silver-flat);color:var(--ink)}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pcard{border:1px solid var(--line);border-radius:0;overflow:hidden;background:var(--bg-2);display:flex;flex-direction:column}
.pcard-img{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:26px;background:var(--bg)}
.pcard-img img{max-width:68%;max-height:68%;filter:brightness(0) saturate(100%) invert(78%)}
.pcard-body{padding:18px;display:flex;flex-direction:column;gap:6px;flex:1}
.pcard-body h3{font-size:1rem;line-height:1.3}
.pcard-size{font-size:.8125rem;font-family:var(--nav-font);font-weight:var(--ui-weight);letter-spacing:var(--ui-track);text-transform:uppercase;color:var(--muted)}
.pcard-desc{font-family:var(--body-font);font-weight:400;letter-spacing:normal;text-transform:none;font-size:.8125rem;color:var(--muted);line-height:1.6;margin-top:2px}
.pcard-variants{font-size:.8125rem;font-family:var(--nav-font);font-weight:var(--ui-weight);letter-spacing:var(--ui-track);text-transform:uppercase;color:var(--faint);margin-top:4px}
.pcard-price{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);font-family:var(--disp);font-weight:800;font-size:1.1rem}
.pcat-empty{color:var(--muted);font-size:.9rem;padding:30px 0 60px}
@media(max-width:960px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.pgrid{grid-template-columns:1fr 1fr;gap:12px}.pcard-body{padding:12px}}
.pcard{cursor:pointer}

.shop-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:36px;flex-wrap:wrap;gap:16px}
.shop-toolbar .shop-cats{margin-bottom:0}
.cart-btn{position:relative;font-family:var(--nav-font);font-size:.8125rem;font-weight:var(--ui-weight);letter-spacing:var(--ui-track);text-transform:uppercase;color:var(--ink);border:1px solid var(--line-2);padding:11px 20px;cursor:pointer;background:transparent}
.cart-btn:hover{border-color:var(--silver-flat)}
/* Shop filters and the cart take the site button: faint outline, bright outline
   sweeps in on hover; the chosen filter holds the full outline instead of a fill. */
.shop-cat,.cart-btn{position:relative;border:0;box-shadow:inset 0 0 0 1px var(--line-2)}
.shop-cat::before,.shop-cat::after,.cart-btn::before,.cart-btn::after{content:"";position:absolute;inset:0;border:1px solid var(--ink);pointer-events:none;transition:transform .35s var(--ease-x)}
.shop-cat::before,.cart-btn::before{border-width:1px 0;transform:scaleX(0);transform-origin:right;transition-delay:.12s}
.shop-cat::after,.cart-btn::after{border-width:0 1px;transform:scaleY(0);transform-origin:top}
.shop-cat:hover::before,.shop-cat.active::before,.cart-btn:hover::before{transform:scaleX(1);transform-origin:left;transition-delay:0s}
.shop-cat:hover::after,.shop-cat.active::after,.cart-btn:hover::after{transform:scaleY(1);transform-origin:bottom;transition-delay:.12s}
.shop-cat.active,.shop-cat:hover:not(.active){color:var(--ink);background:transparent}
.cart-count{display:inline-block;margin-left:8px;min-width:18px;padding:1px 5px;background:var(--silver-flat);color:var(--bg);font-size:.8125rem;text-align:center}

/* ---- product detail modal ---- */
.pd-modal{position:fixed;inset:0;z-index:650;display:none;align-items:center;justify-content:center;background:rgba(10,10,11,.75);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:24px}
.pd-modal.open{display:flex}
.pd-box{position:relative;width:100%;max-width:760px;max-height:88vh;overflow-y:auto;background:var(--bg-2);border:1px solid var(--line-2);display:grid;grid-template-columns:1fr 1fr}
.pd-close{position:absolute;top:14px;right:14px;z-index:2;width:32px;height:32px;display:grid;place-items:center;color:var(--ink);background:rgba(10,10,11,.5)}
.pd-img{background:var(--bg);display:flex;align-items:center;justify-content:center;padding:40px}
.pd-img img{max-width:70%;max-height:70%;filter:brightness(0) saturate(100%) invert(78%)}
.pd-body{padding:32px}
.pd-body h2{margin-bottom:10px}
.pd-size{font-size:.8125rem;color:var(--muted);font-family:var(--nav-font);font-weight:var(--ui-weight);letter-spacing:var(--ui-track);text-transform:uppercase;margin-bottom:16px}
.pd-desc{font-size:.9rem;color:var(--muted);line-height:1.6;margin-bottom:20px}
.pd-price{font-family:var(--disp);font-weight:800;font-size:1.3rem;margin-bottom:22px}
.pd-field{margin-bottom:18px}
.pd-field label{display:block;margin-bottom:8px}
.pd-variants{display:flex;gap:8px;flex-wrap:wrap}
.pd-variant{font-family:var(--nav-font);font-weight:var(--ui-weight);font-size:.8125rem;letter-spacing:var(--ui-track);text-transform:uppercase;padding:8px 14px;border:1px solid var(--line-2);color:var(--muted);cursor:pointer;background:transparent}
.pd-variant.active{color:var(--bg);background:var(--ink);border-color:var(--ink)}
.pd-qty{display:flex;align-items:center;gap:0;width:fit-content;border:1px solid var(--line-2)}
.pd-qty button{width:36px;height:36px;font-size:1.1rem}
.pd-qty span{width:40px;text-align:center;font-family:var(--nav-font)}
@media(max-width:640px){.pd-box{grid-template-columns:1fr}}

/* ---- cart sidebar ---- */
.cart-overlay{position:fixed;inset:0;z-index:680;display:none;background:rgba(10,10,11,.6)}
.cart-overlay.open{display:block}
.cart-panel{position:fixed;top:0;right:0;bottom:0;z-index:690;width:100%;max-width:380px;background:var(--bg-2);border-left:1px solid var(--line-2);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .35s var(--ease)}
.cart-overlay.open .cart-panel{transform:translateX(0)}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:24px;border-bottom:1px solid var(--line)}
.cart-close{width:32px;height:32px;display:grid;place-items:center;color:var(--muted)}
.cart-close:hover{color:var(--ink)}
.cart-items{flex:1;overflow-y:auto;padding:8px 24px}
.cart-item{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.cart-item img{width:56px;height:56px;object-fit:contain;background:var(--bg);padding:8px;filter:brightness(0) saturate(100%) invert(78%)}
.cart-item-info{flex:1}
.cart-item-info h4{font-family:var(--nav-font);font-weight:var(--ui-weight);font-size:.82rem;letter-spacing:var(--ui-track);text-transform:uppercase;margin-bottom:4px}
.cart-item-meta{font-size:.8125rem;color:var(--muted);font-family:var(--nav-font);font-weight:var(--ui-weight);letter-spacing:var(--ui-track);text-transform:uppercase}
.cart-item-remove{font-size:.8125rem;color:var(--muted);text-decoration:underline;margin-top:6px;cursor:pointer;background:none;border:0}
.cart-item-price{font-family:var(--disp);font-weight:800;font-size:.9rem;white-space:nowrap}
.cart-empty{padding:40px 0;text-align:center;font-family:var(--body-font);font-weight:400;letter-spacing:normal;color:var(--muted);font-size:.85rem}
.cart-foot{padding:24px;border-top:1px solid var(--line)}
.cart-total{display:flex;justify-content:space-between;margin-bottom:16px;font-family:var(--nav-font);font-weight:var(--ui-weight);font-size:.85rem;letter-spacing:var(--ui-track);text-transform:uppercase}
.cart-total strong{font-family:var(--disp);font-weight:800;font-size:1.1rem;text-transform:none;letter-spacing:0}
/* Same body copy treatment as the shop item descriptions. */
.cart-checkout-msg{display:none;font-family:var(--body-font);font-weight:400;letter-spacing:normal;text-transform:none;font-size:.8125rem;color:var(--muted);margin-top:12px;line-height:1.6}
.cart-checkout-msg.show{display:block}
/* Promo code — sits above the totals in the cart footer. Inputs and .btn.ghost
   already carry the site's UI type, so only layout lives here. */
.cart-promo{display:grid;gap:8px;margin-bottom:18px}
.cart-promo label{font-family:var(--nav-font);font-weight:var(--ui-weight);font-size:.8125rem;letter-spacing:var(--ui-track);text-transform:uppercase;color:var(--muted)}
.cart-promo-row{display:flex;gap:10px;align-items:stretch}
.cart-promo-row input{flex:1;min-width:0;text-transform:uppercase}
.cart-promo-row .btn{padding:10px 16px;white-space:nowrap}
.cart-promo-msg{font-family:var(--body-font);font-weight:400;font-size:.8125rem;color:var(--muted);min-height:1.2em}
.cart-sub,.cart-promo-line{margin-bottom:8px;color:var(--muted)}
.cart-sub[hidden],.cart-promo-line[hidden]{display:none}

/* =======================  ACCESS GATE  ======================= */
body.gate-locked{overflow:hidden}
/* Height pinned to the real viewport so the layout doesn't jump when the phone's
   address bar slides in and out. dvh where supported, vh as the fallback. */
.gate{position:fixed;inset:0;top:0;right:0;bottom:0;left:0;z-index:10000;background:var(--bg) url('photos/bg-gate.webp') center/cover no-repeat;display:flex;align-items:center;justify-content:center;padding:24px;overflow-y:auto;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh}
.gate::before{content:"";position:absolute;inset:0;background:rgba(10,10,11,.74);pointer-events:none}
.gate-box{position:relative;z-index:1;width:100%;max-width:330px;text-align:center;margin:auto}
@media(max-width:640px){.gate{background-image:url('photos/mobile/bg-gate.webp')}}
.gate-emblem{display:block;width:64px;aspect-ratio:2357/2390;background:var(--silver-flat);-webkit-mask-image:url('logo/icon-w-512.png');mask-image:url('logo/icon-w-512.png');-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;margin:0 auto 14px}
.gate-wordmark{display:block;width:100%;aspect-ratio:2117/136;background:var(--silver-flat);-webkit-mask-image:url('logo/doc-w-l.png');mask-image:url('logo/doc-w-l.png');-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;margin:0 auto 28px}
.gate-form{display:flex;flex-direction:column;gap:14px}
.gate-form input{text-align:center;font-size:.8125rem;letter-spacing:var(--ui-track);text-transform:uppercase;font-family:var(--nav-font);font-weight:var(--ui-weight)}
.gate .btn,.gate .btn.submit{font-size:.8125rem;letter-spacing:var(--ui-track)}
.gate-err{display:none;font-size:.8125rem;font-weight:var(--ui-weight);text-align:center;color:var(--err);letter-spacing:var(--ui-track);text-transform:uppercase;font-family:var(--nav-font);line-height:1.7}
.gate-err.show{display:block}
.gate-or{font-family:var(--nav-font);font-weight:var(--ui-weight);font-size:.8125rem;letter-spacing:var(--ui-track);text-transform:uppercase;color:var(--silver-flat);margin:20px 0;text-align:center}
.gate-signup .field,.gate-signup .mail-form{text-align:center}
.gate-signup input[type="email"]{text-align:center;font-size:.8125rem;letter-spacing:var(--ui-track);text-transform:uppercase}
.gate-form input::placeholder,.gate-signup input[type="email"]::placeholder{font-family:var(--nav-font);font-weight:var(--ui-weight);font-size:.8125rem;letter-spacing:var(--ui-track);text-transform:uppercase}
/* Lock page consent: a centred line with the tick box straight after "Privacy Policy.", on the same line (Asim, 2026-10-13).
   .mail-check-end keeps the last words and the box together so the box never wraps on its own. */
.gate-signup .mail-check{display:block;text-align:center;white-space:normal;font-family:var(--nav-font);font-weight:var(--ui-weight);font-size:.8125rem;letter-spacing:var(--ui-track);text-transform:uppercase;line-height:1.7}
.gate-signup .mail-check-end{white-space:nowrap}
.gate-signup .mail-check input{display:inline-grid;vertical-align:middle;margin:-3px 0 0 8px}
.gate-signup .form-err{font-family:var(--nav-font);font-size:.8125rem;font-weight:var(--ui-weight);text-align:center;color:var(--err);letter-spacing:var(--ui-track);text-transform:uppercase;line-height:1.7}
/* Phones scale the root type up, which pushed the gate's one-line items onto two.
   Everything here drops together so they stay equal to each other. */
/* Phones: the gate is sized so the whole thing fits on screen without anyone
   pinching — width from the screen, and a second pass for short screens so it
   shrinks rather than overflowing. Fields stay at 16px, which is the threshold
   below which mobile browsers zoom the page when you tap one. */
@media(max-width:640px){
  .gate{padding:18px 16px;align-items:center}
  .gate-box{max-width:min(80vw,380px)}
  .gate-emblem{width:min(17vw,78px);margin:0 auto 14px}
  .gate-wordmark{margin:0 auto 22px}
  .gate-form{gap:13px}
  .gate-form input,.gate-signup input[type="email"]{font-size:16px;letter-spacing:var(--ui-track);padding:12px 2px}
  .gate-form input::placeholder,.gate-signup input[type="email"]::placeholder{font-size:16px;letter-spacing:var(--ui-track)}
  .gate .btn,.gate .btn.submit{font-size:.8125rem;letter-spacing:var(--ui-track);padding:15px 12px;min-height:48px}
  .gate-or{font-size:.8125rem;letter-spacing:var(--ui-track);margin:18px 0}
  .gate-signup .mail-check{font-size:.8125rem;letter-spacing:var(--ui-track);white-space:normal;text-align:center}
  .gate-err,.gate-signup .form-err{font-size:.8125rem;letter-spacing:.06em}
}
/* Short screens (or a phone with a big browser bar): tighten everything further
   so nothing is ever pushed off the bottom. */
@media(max-width:640px) and (max-height:780px){
  .gate-emblem{width:min(15vw,66px);margin-bottom:10px}
  .gate-wordmark{margin-bottom:16px}
  .gate-form{gap:11px}
  .gate .btn,.gate .btn.submit{padding:13px 12px;min-height:44px}
  .gate-or{margin:14px 0}
}
@media(max-width:640px) and (max-height:660px){
  .gate-box{max-width:min(76vw,330px)}
  .gate-emblem{width:56px}
  .gate-or{margin:11px 0;font-size:.8125rem}
  .gate .btn,.gate .btn.submit{min-height:42px;font-size:.8125rem}
}
/* Same rule for every other form on the site — 16px is the threshold below
   which mobile browsers zoom the page on focus. */
@media(max-width:860px){
  input:not([type="checkbox"]),select,textarea{font-size:16px}
  .login-form input,.mail-cta input[type="email"],.form-compact input,.form-compact textarea,.form-compact select{font-size:16px}
}

/* Short pages (login, orders, profile) would otherwise leave the footer floating
   mid-screen with dead space under it. */
body.page-short{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
body.page-short>main,body.page-short>section{flex:1 0 auto}
body.page-short>footer{flex:0 0 auto;margin-top:auto}

/* ---- login / account pages ---- */
.login-box{max-width:360px;margin:0 auto;text-align:center}
.login-emblem{display:block;width:96px;aspect-ratio:2357/2390;background:var(--silver-flat);-webkit-mask-image:url('logo/icon-w-512.png');mask-image:url('logo/icon-w-512.png');-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;margin:0 auto 34px}
.login-wordmark{display:block;width:150px;aspect-ratio:2117/136;background:var(--silver-flat);-webkit-mask-image:url('logo/doc-w-l.png');mask-image:url('logo/doc-w-l.png');-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;margin:0 auto 40px}
.login-actions{display:flex;flex-direction:column;gap:14px}
.login-form{display:none;flex-direction:column;gap:16px;text-align:left;margin-top:16px}
.login-form.show{display:flex}
.login-form input{text-align:center}
/* Post-signup state: the form leaves quickly, then the mark, the title and the
   note arrive one after the other. */
.login-form.fade-out{opacity:0;transform:translateY(-6px);transition:opacity .25s ease,transform .25s ease;pointer-events:none}
.login-box.done{max-width:900px;transition:max-width .6s var(--ease)}
.login-box.done .login-emblem{animation:lwIn 1.1s var(--ease) both}
.login-welcome{display:none;text-align:center;margin-top:18px}
.login-welcome.show{display:block}
.lw-title{font-family:var(--nav-font);font-weight:var(--ui-weight);font-size:clamp(.8125rem,3.4vw,2rem);letter-spacing:var(--ui-track);text-transform:uppercase;color:var(--ink);line-height:1.3;margin:0 auto;max-width:none;white-space:nowrap}
.lw-note{font-family:var(--nav-font);font-weight:var(--ui-weight);font-size:.8125rem;letter-spacing:var(--ui-track);text-transform:uppercase;color:var(--muted);line-height:1.9;margin:18px auto 0;max-width:360px}
.login-welcome.show .lw-title{animation:lwIn 1.2s var(--ease) .55s both}
.login-welcome.show .lw-note{animation:lwIn 1.2s var(--ease) 1.35s both}
@keyframes lwIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.login-box.done .login-emblem,.login-welcome.show .lw-title,.login-welcome.show .lw-note{animation:none}}
.login-form label{color:var(--ink)}
.login-toggle{display:none}
.login-toggle.hide{display:none!important}
.account-section{max-width:480px}
.account-section .field{margin-bottom:4px}
.pref-row{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-top:1px solid var(--line)}
.pref-row:last-of-type{border-bottom:1px solid var(--line)}
.pref-row-text strong{display:block;font-family:var(--nav-font);font-size:.8125rem;font-weight:var(--ui-weight);letter-spacing:var(--ui-track);text-transform:uppercase;margin-bottom:4px}
.pref-row-text span{display:block;font-family:var(--body-font);font-weight:400;letter-spacing:normal;text-transform:none;font-size:.8125rem;line-height:1.6;color:var(--muted)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---- file attachments on the contact form ---- */
.filedrop{position:relative;display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;text-align:center;
  padding:22px 18px;border:1px dashed var(--line-2);background:rgba(242,242,240,.02);transition:border-color .2s,background .2s;cursor:pointer}
.filedrop:hover,.filedrop.over{border-color:var(--silver-flat);background:rgba(242,242,240,.05)}
.filedrop input[type="file"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.filedrop-label{font-family:var(--nav-font);font-weight:var(--ui-weight);font-size:.8125rem;letter-spacing:var(--ui-track);text-transform:uppercase;color:var(--muted)}
.filedrop-label strong{color:var(--ink);font-weight:var(--ui-weight)}
.filedrop-hint{font-family:var(--body-font);font-weight:400;letter-spacing:normal;font-size:.8125rem;color:var(--faint)}
.filedrop-hint.warn{color:#ff8a8a}
.filelist{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.filelist li{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--bg-2);border:1px solid var(--line)}
.fl-name{font-family:var(--body-font);font-weight:400;letter-spacing:normal;font-size:.86rem;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fl-size{font-family:var(--body-font);font-weight:400;letter-spacing:normal;font-size:.8125rem;color:var(--faint);margin-left:auto;flex:0 0 auto}
.fl-remove{flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;color:var(--muted);border:1px solid var(--line-2);font-size:.8125rem}
.fl-remove:hover{color:var(--bg);background:var(--silver-hover);border-color:var(--silver-hover)}
@media(hover:none),(max-width:860px){.fl-remove{width:44px;height:44px}}

/* =======================  FEATURE COLLAGE  =======================
   Layered, offset photography beside the story — one image behind, one breaking
   the top edge, one dropping below. Square corners keep it ours. */
.feature{padding:clamp(48px,7vw,104px) 0}
.feature-in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,72px);align-items:center}
.feature.rev .feature-collage{order:2}

.feature-collage{position:relative;aspect-ratio:1/1.02}
.feature-collage figure{position:absolute;margin:0;overflow:hidden;background:var(--bg-2);
  box-shadow:0 28px 60px rgba(0,0,0,.65)}
.feature-collage img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.12)}
.feature-collage .fc-a{left:0;top:9%;width:58%;height:62%;z-index:1}
.feature-collage .fc-b{right:0;top:0;width:48%;height:52%;z-index:2}
.feature-collage .fc-c{left:14%;bottom:0;width:58%;height:40%;z-index:3}

.feature-copy{max-width:52ch}
.feature-copy .feature-rule{display:block;width:100%;height:1px;background:var(--silver-flat);opacity:.55;margin-bottom:16px}
.feature-copy h1,.feature-copy h2{font-size:clamp(1.6rem,3.4vw,2.6rem);margin:10px 0 22px}
.feature-copy .shoot-credits{margin-top:26px;font-size:.88rem}
.feature-copy p{font-size:.98rem;line-height:1.85;color:var(--muted)}
.feature-copy p+p{margin-top:16px}
.feature-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

@media(max-width:860px){
  .feature-in,.feature.rev .feature-in{grid-template-columns:1fr}
  .feature.rev .feature-collage{order:-1}
  /* On a phone the overlap turns into a clean stack — layering at this width
     just makes the photographs small. The per-image offsets have to be undone
     at the same specificity, or the desktop percentages keep winning. */
  .feature-collage{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .feature-collage .fc-a,.feature-collage .fc-b,.feature-collage .fc-c{
    position:static;inset:auto;width:auto;height:auto;box-shadow:none;aspect-ratio:1/1}
  .feature-collage .fc-a{grid-column:1/-1;aspect-ratio:16/10}
  .feature-copy{max-width:none}
}

/* =======================  SHORT FILMS  =======================
   Two square film cards side by side. Posters load with the page; the clip
   itself only downloads when someone hovers or taps, so the section is cheap. */
/* Sits directly under the feature images, with the gallery following on. */
.films{padding:clamp(26px,3vw,44px) 0 clamp(40px,5vw,72px)}
.feature{padding-bottom:clamp(22px,3vw,40px)}
#mv-section{padding-top:clamp(20px,3vw,40px)}
.films-head{text-align:center;margin-bottom:clamp(28px,4vw,52px)}
.films-head h2{font-size:clamp(1.5rem,3.4vw,2.6rem)}
.films-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px)}
.film-card{display:block}
.film-frame,.vid-frame{position:relative;aspect-ratio:1/1;overflow:hidden;cursor:pointer;--crop:1;background:var(--bg-2) center/cover no-repeat;background-image:var(--poster)}
.film-frame video,.vid-frame video{width:100%;height:100%;object-fit:cover;display:block;transform:scale(calc(var(--crop) * 1.04))}
/* Once the script manages the frame the clip is hidden until its first frame
   really renders, then crossfades over the poster and settles from 1.04 to 1. */
.film-frame.film-ready video,.vid-frame.film-ready video{opacity:0;transition:opacity .4s var(--ease-fade),transform var(--t-settle) var(--ease-zoom)}
.film-frame.playing video,.vid-frame.playing video{opacity:1;transform:scale(var(--crop))}
.film-frame.blocked .film-play{opacity:1}
/* This clip ships with letterbox bars burnt into the picture (64px top and
   bottom of 562). Scaling past them makes both cards fill edge to edge. */
.film-frame.crop-bars{--crop:1.36;background-size:auto calc(var(--crop) * 100%)}
.film-frame::after{content:"";position:absolute;inset:0;background:rgba(10,10,11,.28);transition:background var(--t-zoom) var(--ease-overlay);pointer-events:none}
.film-frame.playing::after{background:rgba(10,10,11,.18)}
.film-card:hover .film-frame::after{background:rgba(10,10,11,0)}
.film-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:62px;height:62px;
  display:grid;place-items:center;border:1px solid rgba(242,242,240,.75);background:rgba(10,10,11,.35);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);transition:opacity .3s,background .3s;pointer-events:none}
.film-play svg{width:18px;height:18px;fill:var(--ink);margin-left:2px}
.film-frame.playing .film-play{opacity:0}
/* Clips play by themselves, so the badge is only a cue for people who have
   asked for reduced motion. */
@media(prefers-reduced-motion:no-preference){.film-play{opacity:0}}
.film-meta{padding-top:18px}
.film-meta h3{font-size:clamp(.95rem,1.7vw,1.15rem)}
.film-link{display:inline-flex;align-items:center;gap:12px;margin-top:12px;font-family:var(--nav-font);font-weight:var(--ui-weight);
  font-size:.8125rem;letter-spacing:var(--ui-track);text-transform:uppercase;color:var(--silver-flat);transition:color .2s}
/* The square frame dissolves while the chevron and a hairline shaft slide right,
   so the mark reads as "glyph in a frame" becoming a long arrow (Lowdown see-through CTA). */
.film-link .arrow,.cta-arrow .arrow{position:relative;display:block;width:30px;height:30px;flex:0 0 30px}
.film-link .arrow::before,.cta-arrow .arrow::before{content:"";position:absolute;inset:0;border:1px solid var(--line-2);transition:transform var(--t-cta) var(--ease-cta),opacity var(--t-cta) var(--ease-cta)}
.film-link .arrow svg,.cta-arrow .arrow svg{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;stroke:currentColor;fill:none;stroke-width:2;transition:transform var(--t-cta) var(--ease-cta)}
.film-link .arrow::after,.cta-arrow .arrow::after{content:"";position:absolute;left:2px;top:50%;width:16px;height:1px;margin-top:-.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--t-cta) var(--ease-cta)}
.film-card:hover .film-link{color:var(--ink)}
.film-card:hover .film-link .arrow::before,.cta-arrow:hover .arrow::before{transform:scale(.8);opacity:0}
.film-card:hover .film-link .arrow svg,.cta-arrow:hover .arrow svg{transform:translateX(9px)}
.film-card:hover .film-link .arrow::after,.cta-arrow:hover .arrow::after{transform:scaleX(1) translateX(9px)}
@media(max-width:700px){
  .films-grid{grid-template-columns:1fr;gap:28px}
  .film-play{width:54px;height:54px}
}

/* =======================  COMMENTS  ======================= */
.cm-wrap{padding:clamp(48px,7vw,86px) 0;border-top:1px solid var(--line)}
.cm-head{margin-bottom:26px}
.cm-head h2{font-size:clamp(1.3rem,2.6vw,1.8rem);margin-top:10px}
.cm-note{font-family:var(--body-font);font-weight:400;letter-spacing:normal;font-size:.92rem;color:var(--muted);line-height:1.7}
.cm-note a{color:var(--ink);text-decoration:underline}
.cm-compose{background:var(--bg-2);border:1px solid var(--line);padding:20px;margin-bottom:28px}
.cm-me{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.cm-name{font-family:var(--nav-font);font-weight:var(--ui-weight);font-size:.8125rem;letter-spacing:var(--ui-track);text-transform:uppercase;color:var(--ink)}
.cm-time{font-family:var(--body-font);font-weight:400;letter-spacing:normal;font-size:.8125rem;color:var(--faint);margin-left:auto}
.cm-avatar{width:34px;height:34px;object-fit:cover;flex:0 0 34px;background:var(--bg)}
.cm-avatar-blank{display:grid;place-items:center;font-family:var(--nav-font);font-weight:var(--ui-weight);font-size:.8rem;color:var(--bg);background:var(--silver-flat)}
.cm-compose textarea{min-height:92px;background:transparent;border:1px solid var(--line-2);padding:12px;
  font-family:var(--body-font);font-weight:400;letter-spacing:normal;font-size:.95rem;line-height:1.6;text-transform:none}
.cm-compose-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:12px}
.cm-count{font-family:var(--body-font);font-weight:400;letter-spacing:normal;font-size:.8125rem;color:var(--faint)}
.cm-err{display:none;font-family:var(--body-font);font-weight:400;letter-spacing:normal;font-size:.85rem;color:var(--err);margin-top:10px}
.cm-err.show{display:block}
.cm-item{padding:20px 0;border-top:1px solid var(--line)}
.cm-item-head{display:flex;align-items:center;gap:10px}
.cm-body{font-family:var(--body-font);font-weight:400;letter-spacing:normal;font-size:.95rem;line-height:1.75;color:var(--ink);margin:12px 0 0;max-width:70ch}
.cm-actions{display:flex;align-items:center;gap:8px;margin-top:14px}
.cm-vote{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid var(--line-2);
  font-family:var(--nav-font);font-weight:var(--ui-weight);font-size:.8125rem;letter-spacing:.06em;color:var(--muted);transition:.2s}
.cm-vote svg{width:16px;height:16px;fill:currentColor}
.cm-vote:hover{color:var(--ink);border-color:var(--silver-flat)}
.cm-vote.on{color:var(--bg);background:var(--silver-flat);border-color:var(--silver-flat)}
.cm-link{font-family:var(--body-font);font-weight:400;letter-spacing:normal;font-size:.82rem;color:var(--faint);
  text-decoration:underline;margin-left:auto;padding:8px 4px}
.cm-link:hover{color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* avatar upload on the profile page */
.avatar-row{display:flex;align-items:center;gap:18px;margin-bottom:6px}
.avatar-preview{width:82px;height:82px;flex:0 0 82px;object-fit:cover;background:var(--bg-2);border:1px solid var(--line-2);cursor:pointer}
.avatar-row.drop .avatar-preview{border-color:var(--acc);background:rgba(199,201,204,.12)}
.avatar-preview.blank{display:grid;place-items:center;font-family:var(--nav-font);font-weight:var(--ui-weight);font-size:1.5rem;color:var(--faint)}
.avatar-actions .btn{margin-bottom:8px}
.avatar-hint{font-family:var(--body-font);font-weight:400;letter-spacing:normal;font-size:.8125rem;color:var(--muted);line-height:1.6}
@media(max-width:640px){.cm-actions{flex-wrap:wrap}.cm-link{margin-left:0}}

/* =======================  SHOP — PHONE LAYOUT  =======================
   Product art is the brand marks, and the wordmark is a 15:1 strip: in a
   two-column phone card it rendered at 70x5px. Cards go single-column on
   phones and the art sits in a proper frame, so every mark reads. The
   toolbar becomes one scrolling row instead of three stacked ones. */
.pcard-img{aspect-ratio:1/1;display:grid;place-items:center;padding:12%;background:var(--bg)}
.pcard-img img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}
/* every frame is square; the emblem (near square) sits smaller so it weighs the same as the wordmark strips */
.pcard-img.mark{padding:27%}
.shop-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
@media(max-width:640px){
  .pgrid{grid-template-columns:1fr;gap:14px}
  .pcard-img{padding:10%}
  .pcard-img.mark{padding:28%}
  .pcard-body{padding:16px}
  .shop-toolbar{flex-wrap:nowrap;gap:10px;margin-bottom:22px}
  .shop-cats{display:flex;flex-wrap:nowrap;gap:8px;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px;margin-bottom:0}
  .shop-cats::-webkit-scrollbar{display:none}
  .shop-cat{flex:0 0 auto;white-space:nowrap;padding:12px 14px;font-size:.8125rem}
  .cart-btn{flex:0 0 auto;padding:12px 14px;font-size:.8125rem}
}

/* =======================  ACCESSIBILITY  =======================
   Keyboard focus must be visible (WCAG 2.4.7), touch targets need real size
   (WCAG 2.5.8), and nothing should sit below 12px on a phone. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:10002;background:var(--ink);color:var(--bg);
  font-family:var(--nav-font);font-weight:var(--ui-weight);font-size:.8125rem;letter-spacing:var(--ui-track);text-transform:uppercase;padding:14px 20px}
.skip-link:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--acc-2);outline-offset:3px}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--acc-2);outline-offset:2px;border-color:var(--acc)}
.btn:focus-visible,.prefs-toggle:focus-visible,.mail-check input:focus-visible{outline:2px solid var(--acc-2);outline-offset:3px}

/* Comfortable targets on touch screens */
@media(hover:none),(max-width:860px){
  .socials a{min-width:44px;min-height:44px}
  footer .fl>a{min-width:44px;min-height:44px;display:inline-flex;align-items:center}
  .terms,.nav-links a,.profile-menu a{min-height:44px;display:inline-flex;align-items:center}
  .brand{display:inline-flex;align-items:center;min-height:44px}
  .menu-btn{width:44px;height:44px}
  .cookie-prefs-btn{min-height:44px}
  input:not([type="checkbox"]),select{min-height:44px}
  textarea{min-height:110px}
  /* Against a wrapped two-line consent line, centring on the block reads better
     than hanging off the first line. */
  .mail-check{align-items:center;gap:12px}
  .mail-check input{width:24px;height:24px;min-height:24px;max-height:24px;flex:0 0 24px;align-self:center;margin-top:0}
  .mail-check input:checked::after{font-size:13px}
  .lb-close,.lb-nav,.mail-modal-close,.legal-modal-close,.mv-nav{width:48px;height:48px}
  .ppresents{font-size:.8125rem}
  .pcard-variants,.cart-item-meta,.foot-meta,.terms{font-size:.8125rem}
}

/* =======================  PASSWORD RESET (login.html)  =======================
   The forgot-password link under the sign-in password field, the one-line note
   above the reset form, and the button or quiet link that sits inside a
   welcome-style confirmation. Same furniture as the rest of the login box:
   bold, uppercase, tracked at --ui-track; the note alone is body copy. */
.login-forgot{display:flex;justify-content:center;margin-top:-4px}
.login-link{display:inline-block;font-family:var(--nav-font);font-size:.8125rem;font-weight:var(--ui-weight);letter-spacing:var(--ui-track);text-transform:uppercase;color:var(--muted);text-decoration:underline;text-underline-offset:4px;background:none;border:0;padding:0;cursor:pointer;transition:color .2s}
.login-link:hover{color:var(--ink)}
.login-link:focus-visible{outline:2px solid var(--acc-2);outline-offset:3px}
/* Body copy, not furniture: regular weight, no tracking, muted. */
.login-note{font-family:var(--body-font);font-weight:400;letter-spacing:normal;text-transform:none;font-size:.88rem;line-height:1.7;color:var(--muted);text-align:center;margin:0 auto;max-width:360px}
/* A CTA inside a confirmation arrives after the note, in the same lwIn sequence. */
.login-welcome .btn,.login-welcome .login-link{margin-top:26px}
.login-welcome.show .btn,.login-welcome.show .login-link{animation:lwIn 1.2s var(--ease) 1.9s both}
@media(prefers-reduced-motion:reduce){.login-welcome.show .btn,.login-welcome.show .login-link{animation:none}}
@media(max-width:640px){.login-link{font-size:.8125rem}}

/* Login: the same Volume 001 photography as every other page, as a dimmed
   backdrop behind the form rather than a hero, so the form stays the focus. */
.login-stage{position:relative;overflow:hidden;isolation:isolate}
/* One stage height for the whole sign in journey (Hamza, 2026-10-13). Sign in, forgot password, reset sent and the
   rest all sit in the same fixed height, so the page never jumps and the Legal footer stays at the foot of the
   screen on every panel. --login-h is the tallest everyday panel (sign in); top and bottom padding are kept
   tight enough that stage plus footer fit a normal screen. Create account is longer than any screen and may grow. */
.login-stage{--login-h:468px;--login-pt:40px;--login-pb:24px;padding-top:calc(var(--navh) + var(--login-pt));padding-bottom:var(--login-pb);min-height:calc(var(--navh) + var(--login-pt) + var(--login-h) + var(--login-pb))}
@media(max-width:640px){.login-stage{--login-h:484px;--login-pt:32px;--login-pb:32px}}
.login-stage .login-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:grayscale(.25) brightness(.32)}
.login-stage::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(10,10,11,.55) 0%,rgba(10,10,11,.35) 40%,var(--bg) 100%)}

/* =======================  MOTION SYSTEM (from the Lowdown)  =======================
   One entrance mechanism, quiet CTA micro-motion, a header that steps aside, a
   menu that arrives in sequence. Transform, opacity and static clip-path only. */

/* ---- scroll entrance: value picks the variant, data-delay holds it,
   data-stagger hands the move to the children ---- */
/* First-screen content on pages without the intro: shown in its final state, no entrance. */
.rv-instant,.rv-instant *,.rv-instant::before{transition:none!important}
[data-reveal]{--rv-y:24px;--rv-x:36px;--rv-dur:var(--t-reveal);--rv-delay:0s;--rv-step:0ms;--rv-i:0}
[data-reveal]:not([data-stagger]):not([data-reveal="mask-up"]):not([data-reveal="zoom-out"]):not([data-reveal="mail"]){opacity:0;
  transition:opacity var(--rv-dur) var(--ease-out-cubic) var(--rv-delay),transform var(--rv-dur) var(--ease-out-cubic) var(--rv-delay)}
[data-reveal=""]:not([data-stagger]),[data-reveal="fade-up"]:not([data-stagger]){transform:translateY(var(--rv-y))}
[data-reveal="from-left"]:not([data-stagger]){transform:translateX(calc(var(--rv-x) * -1))}
[data-reveal="from-right"]:not([data-stagger]){transform:translateX(var(--rv-x))}
[data-reveal="grow"]:not([data-stagger]){transform:scale(.94)}
[data-reveal].in:not([data-stagger]):not([data-reveal="mask-up"]):not([data-reveal="mail"]){opacity:1;transform:none}
[data-reveal][data-stagger]:not([data-reveal="mask-up"]) > *{opacity:0;
  transition:opacity var(--rv-dur) var(--ease-out-cubic) calc(var(--rv-delay) + var(--rv-i) * var(--rv-step)),
             transform var(--rv-dur) var(--ease-out-cubic) calc(var(--rv-delay) + var(--rv-i) * var(--rv-step))}
[data-reveal=""][data-stagger] > *,[data-reveal="fade-up"][data-stagger] > *{transform:translateY(var(--rv-y))}
[data-reveal="from-left"][data-stagger] > *{transform:translateX(calc(var(--rv-x) * -1))}
[data-reveal="from-right"][data-stagger] > *{transform:translateX(var(--rv-x))}
[data-reveal="grow"][data-stagger] > *{transform:scale(.94)}
[data-reveal][data-stagger].in > *{opacity:1;transform:none}
/* mask: the Lowdown column move. The element clips, each child rises from below its own height. */
[data-reveal="mask-up"]{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}
[data-reveal="mask-up"] > *{transform:translateY(102%);
  transition:transform var(--rv-dur) var(--ease-out-cubic) calc(var(--rv-delay) + var(--rv-i) * var(--rv-step))}
[data-reveal="mask-up"].in > *{transform:none}
[data-reveal="mask-up"].rv-done{-webkit-clip-path:none;clip-path:none}
/* zoom-out: a full-bleed picture settles from 1.08 to 1. No fade on the section:
   the page already blends in as the intro clears, and two fades read as a delay. */
[data-reveal="zoom-out"] > img,[data-reveal="zoom-out"] > video{transform:scale(1.08);transition:transform var(--t-settle) var(--ease-zoom) var(--rv-delay)}
[data-reveal="zoom-out"].in > img,[data-reveal="zoom-out"].in > video{transform:none}
.story-signoff[data-reveal]{--rv-dur:var(--t-settle);--rv-y:26px}
/* mail: the mailing list band arrives in sequence. A hairline draws across the top,
   the heading rises out of its own mask, then the line, the field and the consent follow. */
.mail-cta[data-reveal="mail"]{position:relative}
.mail-cta[data-reveal="mail"]::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:left center;opacity:.9;transition:transform var(--t-settle) var(--ease-x),opacity .6s var(--ease-fade) .9s}
.mail-cta[data-reveal="mail"].in::before{transform:scaleX(1);opacity:0}
.mail-cta[data-reveal="mail"] .mail-l h2{-webkit-clip-path:inset(0 0 100% 0);clip-path:inset(0 0 100% 0);transform:translateY(.5em);
  transition:clip-path var(--t-reveal) var(--ease-out-cubic) .15s,-webkit-clip-path var(--t-reveal) var(--ease-out-cubic) .15s,transform var(--t-reveal) var(--ease-out-cubic) .15s}
.mail-cta[data-reveal="mail"] .mail-l .lead,.mail-cta[data-reveal="mail"] .ml-row,.mail-cta[data-reveal="mail"] .mail-check{opacity:0;transform:translateY(18px);
  transition:opacity var(--t-reveal) var(--ease-out-cubic) var(--mv-d,0s),transform var(--t-reveal) var(--ease-out-cubic) var(--mv-d,0s)}
.mail-cta[data-reveal="mail"] .mail-l .lead{--mv-d:.28s}
.mail-cta[data-reveal="mail"] .ml-row{--mv-d:.36s}
.mail-cta[data-reveal="mail"] .mail-check{--mv-d:.48s}
.mail-cta[data-reveal="mail"].in .mail-l h2{-webkit-clip-path:inset(-.2em 0 -.2em 0);clip-path:inset(-.2em 0 -.2em 0);transform:none}
.mail-cta[data-reveal="mail"].in .mail-l .lead,.mail-cta[data-reveal="mail"].in .ml-row,.mail-cta[data-reveal="mail"].in .mail-check{opacity:1;transform:none}
@media(max-width:860px){
  [data-reveal="from-left"]:not([data-stagger]),[data-reveal="from-right"]:not([data-stagger]),
  [data-reveal="from-left"][data-stagger] > *,[data-reveal="from-right"][data-stagger] > *{transform:translateY(var(--rv-y))}
}
@media(prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal][data-stagger] > *,[data-reveal="mask-up"] > *,
  [data-reveal="zoom-out"] > img,[data-reveal="zoom-out"] > video{opacity:1!important;transform:none!important;transition:none!important}
  [data-reveal="mask-up"]{-webkit-clip-path:none;clip-path:none}
  .mail-cta[data-reveal="mail"]::before{display:none}
  .mail-cta[data-reveal="mail"] .mail-l h2,.mail-cta[data-reveal="mail"] .mail-l .lead,.mail-cta[data-reveal="mail"] .ml-row,.mail-cta[data-reveal="mail"] .mail-check{opacity:1!important;transform:none!important;transition:none!important;-webkit-clip-path:none!important;clip-path:none!important}
}

/* ---- text links: a hairline draws in from the left, leaves to the right ---- */
.cta-line,.terms,.nav-links a,.nav-r .nav-auth{position:relative}
.cta-line::after,.terms::after,.nav-links a::after,.nav-r .nav-auth::after{content:"";position:absolute;left:0;right:0;top:calc(50% + .8em);height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform var(--t-line) var(--ease-line);pointer-events:none}
.nav-links a::after,.nav-r .nav-auth::after{transition:transform .35s var(--ease-x)}
.cta-line:hover::after,.cta-line:focus-visible::after,.terms:hover::after,.terms:focus-visible::after,
.nav-links a:hover::after,.nav-links a:focus-visible::after,.nav-links a.active::after,
.nav-r .nav-auth:hover::after,.nav-r .nav-auth:focus-visible::after{transform:scaleX(1);transform-origin:left}
.nav-links a:focus-visible,.nav-r .nav-auth:focus-visible{opacity:1}
.terms{transition:color var(--t-micro) ease}
.terms:hover{color:var(--ink)}

/* ---- tiles: one slow, small zoom on the Lowdown curve; nothing filters, nothing lifts ---- */
@media(hover:hover){
  .ptile img,.media-tile img,.mag-card .mag-img img,.ed-strip img,.gitem img,.feature-collage img,.story-media img{transition:transform var(--t-zoom) var(--ease-zoom)}
  .ptile:hover img,.media-tile:hover img,.mag-card:hover .mag-img img,.ed-strip .ed-cell:hover img,.gitem:hover img,.feature-collage figure:hover img{transform:scale(1.04)}
}

/* ---- mobile menu: fades in, links rise one after another, bars become an X ---- */
.menu-btn span{transition:transform .4s var(--ease-x),opacity var(--t-micro) ease}
body.menu-open .menu-btn span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
body.menu-open .menu-btn span:nth-child(2){opacity:0;transform:scaleX(0)}
body.menu-open .menu-btn span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.mobile-menu{transition:opacity .35s var(--ease-fade)}
/* Selectors outrank .mobile-menu a / a.active so the closed state really is hidden. */
.mobile-menu .mm-links > *{opacity:.85;transform:translateX(calc(-100% - 80px));transition:transform .6s var(--ease-x),opacity .25s ease}
.mobile-menu .mm-links > a.active{opacity:1}
body.menu-open .mobile-menu .mm-links > *{transform:none}
.mobile-menu .mm-links > :nth-child(1){transition-delay:0s}
.mobile-menu .mm-links > :nth-child(2){transition-delay:.04s}
.mobile-menu .mm-links > :nth-child(3){transition-delay:.08s}
.mobile-menu .mm-links > :nth-child(4){transition-delay:.12s}
.mobile-menu .mm-links > :nth-child(5){transition-delay:.16s}
.mobile-menu .mm-links > :nth-child(6){transition-delay:.2s}
.mobile-menu .mm-links > :nth-child(n+7){transition-delay:.24s}
@media(max-width:860px){.nav.on{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}}

/* =======================  NEW MENU AND STACKED HOME  =======================
   AM, 2026-10-15 (YSL scroll). Menu: three lines at the left, the emblem in the middle (always there),
   links drop down in a column at the left. Home: three panels, the screen stays still and each next
   panel rolls over the one before it. Later rules override the old nav and mobile menu rules above. */
.nav .wrap{max-width:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--gut)}
.nav .menu-btn{display:grid;justify-self:start;margin-left:-10px}
.brand-emblem{display:block;width:48px;aspect-ratio:2357/2390;background:var(--silver-flat);-webkit-mask:url('logo/icon-w-512.png') center/contain no-repeat;mask:url('logo/icon-w-512.png') center/contain no-repeat}

.mobile-menu{top:var(--navh);right:auto;bottom:auto;left:0;width:min(280px,100%);height:auto;max-height:calc(100svh - var(--navh));padding:22px var(--gut) 26px;background:none;border:0;opacity:1;visibility:hidden;pointer-events:none;-webkit-clip-path:inset(0 0 100% 0);clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease-x),-webkit-clip-path .6s var(--ease-x),visibility 0s linear .6s}
body.menu-open .mobile-menu{visibility:visible;pointer-events:auto;-webkit-clip-path:inset(0);clip-path:inset(0);transition:clip-path .6s var(--ease-x),-webkit-clip-path .6s var(--ease-x),visibility 0s}
.mm-links{align-items:flex-start;gap:2px}
.mobile-menu a{position:relative;display:inline-block;font-size:.8125rem;padding:7px 0;text-shadow:0 1px 14px rgba(0,0,0,.7);opacity:0;transform:translateY(-10px);transition:opacity .4s ease,transform .5s var(--ease-x)}
body.menu-open .mobile-menu a{opacity:.85;transform:none}
body.menu-open .mobile-menu a:hover,body.menu-open .mobile-menu a:focus-visible,body.menu-open .mobile-menu a.active{opacity:1}
.mobile-menu a::after{content:"";position:absolute;left:0;right:0;top:calc(50% + .8em);height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease-x);pointer-events:none}
.mobile-menu a:hover::after,.mobile-menu a:focus-visible::after,.mobile-menu a.active::after{transform:scaleX(1);transform-origin:left}
@media(prefers-reduced-motion:reduce){.mobile-menu,.mobile-menu a{transition:none}}

.stack{position:relative}
.stack .panel{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;background:var(--bg)}
/* AM, 2026-10-16: 1.5 screens of scroll per home section: half a screen held, then one screen as the next panel rolls over. */
.hold-gap{height:var(--hold,50vh);height:var(--hold,50svh)}
.stack .p1,.stack .p2{position:sticky;top:0}
.stack .p1{z-index:1;height:100vh;height:100svh;min-height:0}
.stack .p2{z-index:2;display:flex;align-items:center;padding:calc(var(--navh) + 20px) 0 36px}
.stack>.p3{z-index:3;display:flex;flex-direction:column}
.p2 .panel-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:brightness(.42)}
.p2 .wrap{position:relative;z-index:1;width:100%}
.p2 .sect-head.flush{margin-bottom:22px}
.p2 .eposters{height:clamp(300px,calc(100svh - 330px),560px)}
.p2 .ptile{aspect-ratio:auto;height:100%}
.stack>.p3 .mail-cta{flex:1;display:flex;align-items:center;padding-top:calc(var(--navh) + 12px);padding-bottom:20px}
.stack>.p3 .mail-cta .mail-inner{width:100%}
.foot-center{display:flex;flex-direction:column;align-items:center;gap:12px;padding:64px var(--gut) 56px;text-align:center;border-top:1px solid var(--line);position:relative;z-index:1;background:var(--bg)}
.foot-center .foot-word{margin-bottom:26px}
.foot-center .foot-word .brand-mark{width:min(290px,62vw);margin:0 auto}
.foot-center .foot-legal{padding:4px 0}
.foot-center .socials{margin-top:4px}
.foot-center .socials{justify-content:center}
@media(max-width:560px){
  .p2 .eposters{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;height:clamp(280px,calc(100svh - 350px),520px);margin-right:calc(var(--gut) * -1);padding-right:var(--gut)}
  .p2 .eposters::-webkit-scrollbar{display:none}
  .p2 .ptile{flex:0 0 76%;scroll-snap-align:start}
}

/* AM follow up, 2026-10-15: lighter bar, longer closer lines that stay as lines, small menu type. */
.nav.on{background:rgba(10,10,11,.38);-webkit-backdrop-filter:none;backdrop-filter:none;border-color:transparent}
.nav .menu-btn{width:46px}
.nav .menu-btn span{width:28px}
.nav .menu-btn span+span{margin-top:3px}
body.menu-open .menu-btn span:nth-child(1),body.menu-open .menu-btn span:nth-child(2),body.menu-open .menu-btn span:nth-child(3){transform:none;opacity:1}

/* AM, 2026-10-15 15:35 to 15:43: bigger emblem, footer logo as wide as the rights line under it, menu button
   further right with longer, closer lines, no hover box, and a top to bottom left to right sweep on hover that
   plays backwards on mouse off. */
.brand-emblem{width:62px}
.foot-center .foot-lock{display:grid;justify-items:stretch;width:max-content;max-width:100%;margin:0 auto}
.foot-center .foot-lock .foot-word{display:block;margin:0 0 24px}
.foot-center .foot-lock .foot-word .brand-mark{width:100%;margin:0}
.foot-center .foot-lock .foot-meta{white-space:nowrap;text-align:center;font-size:.8125rem}
.nav .menu-btn{width:52px;margin-left:6px;transition:none;align-content:center;align-items:center;justify-items:center}
.nav .menu-btn:hover{background:none}
.nav .menu-btn span{position:relative;overflow:hidden;width:34px;opacity:.7;transition:opacity .3s ease}
.nav .menu-btn span+span{margin-top:2px}
.nav .menu-btn span::after{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-x)}
.nav .menu-btn:hover span::after,.nav .menu-btn:focus-visible span::after{transform:scaleX(1)}
.nav .menu-btn span:nth-child(1)::after{transition-delay:0s}
.nav .menu-btn span:nth-child(2)::after{transition-delay:.09s}
.nav .menu-btn span:nth-child(3)::after{transition-delay:.18s}
.nav .menu-btn:not(:hover):not(:focus-visible) span:nth-child(1)::after{transition-delay:.18s}
.nav .menu-btn:not(:hover):not(:focus-visible) span:nth-child(3)::after{transition-delay:0s}
body.menu-open .menu-btn span{opacity:1}
.mobile-menu{padding-left:39px}
@media(prefers-reduced-motion:reduce){.nav .menu-btn span::after{transition:none}}

/* AM, 2026-10-15 15:46: the page links slide in from the left edge of the page, no fade, and slide back out to the
   left when the menu closes. The panel stays up while they leave, then hides. */
.mobile-menu{overflow:hidden;background:none;-webkit-clip-path:none;clip-path:none;transition:visibility 0s linear .75s}
body.menu-open .mobile-menu{-webkit-clip-path:none;clip-path:none;transition:visibility 0s}
@media(prefers-reduced-motion:reduce){.mobile-menu .mm-links > *{transition:none}}
/* AM, 2026-10-15 17:40: no dark tint behind the open menu, and the page keeps scrolling while it is open. */

/* AM, 2026-10-15 16:08: the emblem gets the same breathing room above it as the footer leaves below the social
   icons, and the three menu lines open back up a little. */
:root{--navh:107px}
.foot-center{padding-bottom:22px}
@media(hover:none),(max-width:860px){.foot-center{padding-bottom:13px}}
/* AM, 2026-10-15 16:19: 22px, not 20. The 62px emblem is 62.9px tall, so a 107px bar leaves 22px above and below. */
.nav .menu-btn span+span{margin-top:5px}
/* AM, 2026-10-15 17:50: the open menu pushes the whole page right, leaving a clear menu column on the left. The
   header stays put so the three lines are always where you left them; pressing them again slides the page back. */
:root{--mm-w:280px}
@media(max-width:560px){:root{--mm-w:min(240px,66vw)}}
.mobile-menu{width:var(--mm-w)}
#content,body>.mail-cta,body>footer{transition:transform .6s var(--ease-x)}
body.menu-open #content,body.menu-open>.mail-cta,body.menu-open>footer{transform:translateX(var(--mm-w))}
@media(prefers-reduced-motion:reduce){#content,body>.mail-cta,body>footer{transition:none}}
/* The pushed page hangs off the right edge: clip it so nothing scrolls sideways (clip, not hidden, keeps the home
   panels sticky). */
html,body{overflow-x:clip}
/* With html clipping, a hidden body no longer stops the page scrolling, so the gate and lightbox locks move up to html. */
html:has(>body.gate-locked),html:has(>body[style*="overflow: hidden"]){overflow:hidden}
/* AM, 2026-10-15 18:56: a thinner menu column with slightly larger links, and no tint behind the header bar. */
:root{--mm-w:200px}
@media(max-width:560px){:root{--mm-w:min(180px,52vw)}}
.nav.on{background:none;box-shadow:none}
.mobile-menu a{font-size:.875rem}
/* Login: no emblem, centred labels, notes and ticks, and forgot password behaves like a menu link. */
.login-form .field label,.login-form .login-note{text-align:center}
#resetForm .login-note{font-family:var(--nav-font);font-weight:var(--ui-weight);letter-spacing:var(--ui-track);text-transform:uppercase;font-size:.8125rem;line-height:1.8}
#createForm .mail-check{justify-content:center;text-align:center}
.login-forgot .login-link{position:relative;font-size:.875rem;color:var(--ink);opacity:.85;text-decoration:none;transition:opacity .2s}
.login-forgot .login-link::after{content:"";position:absolute;left:0;right:0;top:calc(50% + .8em);height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease-x);pointer-events:none}
.login-forgot .login-link:hover,.login-forgot .login-link:focus-visible{opacity:1;color:var(--ink)}
.login-forgot .login-link:hover::after,.login-forgot .login-link:focus-visible::after{transform:scaleX(1);transform-origin:left}
@media(prefers-reduced-motion:reduce){.login-forgot .login-link::after{transition:none}}

/* AM, 2026-10-15 20:57: login. The Sign In and Create An Account buttons sit in the middle of the stage rather than
   near the top, and the stage shrinks to fit so the whole footer is on screen beneath it. Replaces the fixed
   --login-h stage height: the longer panels (sign in, create account) simply grow the page. */
body.page-short>main:has(>.login-stage){display:flex;flex-direction:column}
.login-stage{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;min-height:0;padding-top:calc(var(--navh) + 24px);padding-bottom:40px}
.login-stage>.wrap{width:100%}
/* The password rule, under the field: uppercase UI type one size below the label. */
.login-form .pw-rule{margin:8px 0 0;text-align:center;font-family:var(--nav-font);font-weight:var(--ui-weight);letter-spacing:var(--ui-track);text-transform:uppercase;font-size:.8125rem;line-height:1.6;color:var(--muted)}
@media(max-width:640px){.login-form .pw-rule{font-size:.8125rem}}
/* The gate's early access tick: box first, then three centred lines. */
.gate-signup .mail-check.gate-check{display:flex;justify-content:center;align-items:flex-start;gap:12px}
.gate-signup .gate-check input{margin:2px 0 0}
.gate-check>span{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.gate-signup .mail-check.gate-check{font-size:.8125rem;gap:10px}
.gate-signup .gate-check input{align-self:center;margin:0}
/* AM 2026-10-16: the lines ran wider than the box once type went to 13px, pushing the form off centre.
   Lines now wrap inside the box, and the text carries a right pad the width of the tick and its gap,
   so the words centre on the same axis as the field, the button and the logo. */
.gate-check>span>span{white-space:normal;text-wrap:balance}
.gate-check>span{flex:1 1 auto;min-width:0;padding-right:26px}
@media(hover:none),(max-width:860px){.gate-signup .mail-check.gate-check{gap:12px}.gate-check>span{padding-right:36px}}
/* AM 2026-10-17: one line each. The tick row may run wider than the 330px box, centred on the same axis,
   so each line stays on one line wherever the screen has room; it only wraps where the screen is narrower than the line. */
.gate-signup .mail-check.gate-check{margin-inline:max(-90px,calc((100% - 100vw + 32px) / 2))}
/* Login ticks: box first, each line on one line, the three rows centred as one neat block. */
.login-form .mail-check{align-self:center;align-items:center;font-size:.8125rem;width:max-content;max-width:100%}
.login-form .mail-check>span{white-space:nowrap}
.login-form .mail-check+.mail-check{margin-top:-4px}
@media(max-width:640px){.login-form .mail-check{font-size:.8125rem;gap:8px}}
@media(max-width:340px){.login-form .mail-check>span{white-space:normal}}
/* AM, 2026-10-15 21:11. Home events: See all events sits outside the reveal so it can never stay hidden in the
   bottom strip the observer ignores, with a little more room under it. One mailing list band on every page: home's
   no longer stretches to fill the screen, and the band is a size down everywhere. Footer lines a few points closer. */
.p2 .ev-more{margin-top:24px}
.p2 .eposters{height:clamp(280px,calc(100svh - 350px),540px)}
@media(max-width:560px){.p2 .eposters{height:clamp(260px,calc(100svh - 370px),500px)}}
.stack>.p3{display:block;min-height:0}
.stack>.p3 .mail-cta{display:block;flex:none}
.mail-cta,.stack>.p3 .mail-cta{padding:clamp(36px,4.5vw,60px) 0}
.mail-cta h2{font-size:clamp(1rem,2.4vw,1.7rem)}
.mail-cta .lead{font-size:clamp(.92rem,1.1vw,1rem)}
.foot-center{gap:6px}
.foot-center .foot-legal{padding:2px 0}
.foot-center .socials{margin-top:0}
@media(hover:none),(max-width:860px){.foot-center .foot-legal{min-height:32px}.foot-center{gap:2px}}
/* AM, 2026-10-15 21:34: the menu column is no longer a hard black block. Black from the left edge fades out to the
   right over the pushed page, so the column blends into it with no seam. Sits under the header and the links. */
:root{--mm-fade:180px}
@media(max-width:560px){:root{--mm-fade:110px}}
body::after{content:"";position:fixed;inset:0;z-index:98;pointer-events:none;background:linear-gradient(to right,var(--bg) 0,var(--bg) calc(var(--mm-w) * .55),rgba(10,10,11,0) calc(var(--mm-w) + var(--mm-fade)));opacity:0;transition:opacity .6s var(--ease-x)}
body.menu-open::after{opacity:1}
@media(prefers-reduced-motion:reduce){body::after{transition:none}}
/* AM, 2026-10-15 21:38: a full drop fade. The black now falls away on an eased curve all the way across the page to
   the right edge, so there is no point where the fade visibly stops. Solid all the way to the column edge so the
   pushed page's own left edge is never seen. Replaces the 21:34 fade's short linear tail. */
:root{--mm-s:var(--mm-w)}
body::after{background:linear-gradient(to right,var(--bg) 0,var(--bg) var(--mm-s),rgba(10,10,11,0.948) calc(var(--mm-s) + (100% - var(--mm-s)) * 0.1),rgba(10,10,11,0.819) calc(var(--mm-s) + (100% - var(--mm-s)) * 0.2),rgba(10,10,11,0.652) calc(var(--mm-s) + (100% - var(--mm-s)) * 0.3),rgba(10,10,11,0.475) calc(var(--mm-s) + (100% - var(--mm-s)) * 0.4),rgba(10,10,11,0.312) calc(var(--mm-s) + (100% - var(--mm-s)) * 0.5),rgba(10,10,11,0.179) calc(var(--mm-s) + (100% - var(--mm-s)) * 0.6),rgba(10,10,11,0.084) calc(var(--mm-s) + (100% - var(--mm-s)) * 0.7),rgba(10,10,11,0.027) calc(var(--mm-s) + (100% - var(--mm-s)) * 0.8),rgba(10,10,11,0.004) calc(var(--mm-s) + (100% - var(--mm-s)) * 0.9),rgba(10,10,11,0.000) calc(var(--mm-s) + (100% - var(--mm-s)) * 1))}
/* AM, 2026-10-15 21:45: a bit less black. The same eased fall off, but it reaches clear three quarters of the way
   across the page instead of at the right edge. Opening: the fade arrives first (quick, before the page has moved
   far), so the pushed page's hard left edge is always under solid black and no bar shows. Closing: the fade holds
   until the page is nearly home, then goes. */
body::after{background:linear-gradient(to right,var(--bg) 0,var(--bg) var(--mm-s),rgba(10,10,11,0.948) calc(var(--mm-s) + (100% - var(--mm-s)) * 0.075),rgba(10,10,11,0.819) calc(var(--mm-s) + (100% - var(--mm-s)) * 0.150),rgba(10,10,11,0.652) calc(var(--mm-s) + (100% - var(--mm-s)) * 0.225),rgba(10,10,11,0.475) calc(var(--mm-s) + (100% - var(--mm-s)) * 0.300),rgba(10,10,11,0.312) calc(var(--mm-s) + (100% - var(--mm-s)) * 0.375),rgba(10,10,11,0.179) calc(var(--mm-s) + (100% - var(--mm-s)) * 0.450),rgba(10,10,11,0.084) calc(var(--mm-s) + (100% - var(--mm-s)) * 0.525),rgba(10,10,11,0.027) calc(var(--mm-s) + (100% - var(--mm-s)) * 0.600),rgba(10,10,11,0.004) calc(var(--mm-s) + (100% - var(--mm-s)) * 0.675),rgba(10,10,11,0.000) calc(var(--mm-s) + (100% - var(--mm-s)) * 0.750));transition:opacity .2s var(--ease-fade) .4s}
body.menu-open::after{transition:opacity .22s var(--ease-fade)}
@media(prefers-reduced-motion:reduce){body::after,body.menu-open::after{transition:none}}
/* AM, 2026-10-15 21:49: a smooth fade in, not a blink. The black no longer pops in by opacity: it sweeps in from the
   left as one soft edged curtain (the eased fade leads, the solid black follows), and the page only starts to move
   once the solid black is ahead of its left edge, so no line is ever seen. Closing runs the other way: the page goes
   home first, then the curtain slides back out to the left. */
body::after{opacity:1;transform:translateX(-100%);transition:transform .4s cubic-bezier(.55,0,.75,.2) .35s}
body.menu-open::after{transform:none;transition:transform .5s cubic-bezier(.22,1,.36,1)}
body.menu-open #content,body.menu-open>.mail-cta,body.menu-open>footer{transition:transform .6s var(--ease-x) .18s}
@media(prefers-reduced-motion:reduce){body::after,body.menu-open::after{transition:none}}
/* AM, 2026-10-15 21:56: the solid black reached too far into the page. It now stops a few points after the longest
   menu link (Our Story ends at 131px desktop, 136px phones), and the page pushes by the same smaller amount so its
   left edge still sits under solid black. The eased fade is unchanged, and gains the room the bar gave up. */
:root{--mm-w:144px}
@media(max-width:560px){:root{--mm-w:148px}}
.mobile-menu{padding-right:0}
.mobile-menu a{white-space:nowrap}
/* AM, 2026-10-15 22:16: the home mailing list is a full screen panel like the two above it. The photo covers the
   whole panel, darkened evenly like the events panel; the heading is the same size as Upcoming Events, on the same
   left edge; copy and form sit in two equal columns. The field's placeholder carries a red asterisk like the login
   fields, so it is a span over the field (a real placeholder cannot be two colours) that hides once anything is typed. */
.stack>.p3 .mail-cta.mail-full{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:calc(var(--navh) + 20px) 0 36px;border-top:0}
.mail-cta.mail-full::after{background:linear-gradient(rgba(10,10,11,.58),rgba(10,10,11,.58)),url(photos/DSC09651.webp) center 40%/cover no-repeat}
@media(max-width:760px){.mail-cta.mail-full::after{background:linear-gradient(rgba(10,10,11,.62),rgba(10,10,11,.62)),url(photos/mobile/DSC09651.webp) center 35%/cover no-repeat}}
.mail-full .mail-inner{grid-template-columns:1fr 1fr;align-items:center}
.mail-full h2{font-size:clamp(1.6rem,3.8vw,2.7rem);white-space:normal}
.mail-full .mail-l h2{margin-bottom:16px}
.ml-ph{position:relative}
.ml-ph .ph{position:absolute;top:0;bottom:0;left:2px;display:flex;align-items:center;pointer-events:none;color:var(--muted);font-family:var(--nav-font);font-weight:var(--ui-weight);letter-spacing:var(--ui-track);text-transform:uppercase;font-size:.95rem;transition:opacity .15s}
.ml-ph input:not(:placeholder-shown)+.ph{opacity:0}
@media(max-width:860px){.ml-ph .ph{font-size:16px}}
.mail-full .form-err{font-family:var(--nav-font);font-weight:var(--ui-weight);letter-spacing:var(--ui-track);text-transform:uppercase;font-size:.8125rem;line-height:1.7}
@media(max-width:760px){.mail-full .mail-inner{grid-template-columns:1fr}}
/* AM, 2026-10-15 22:25: the whole panel in one left aligned column under the heading. The line under the heading is in
   the uppercase UI type on one line (it wraps on phones, where one line would be unreadably small); the tick box comes
   first, and the Sign Up button sits under the consent line. */
.mail-full .mail-inner{grid-template-columns:1fr;justify-items:start;gap:clamp(24px,3vw,36px)}
.mail-full .mail-l .lead{max-width:none;white-space:nowrap;font-family:var(--nav-font);font-weight:var(--ui-weight);letter-spacing:var(--ui-track);text-transform:uppercase;font-size:clamp(.8125rem,1vw,.9rem);line-height:1.6;color:var(--ink)}
.mail-full .mail-inner>div:last-child{width:100%;max-width:560px}
/* AM, 2026-10-15 22:32: Sign Up is the same size as Our Story and See all events (plain .btn: .86rem, 17px 32px). */
.mail-full .ml-btn{align-self:flex-start;margin-top:4px}
.mail-cta[data-reveal="mail"] .ml-btn{opacity:0;transform:translateY(18px);transition:opacity var(--t-reveal) var(--ease-out-cubic) .56s,transform var(--t-reveal) var(--ease-out-cubic) .56s}
.mail-cta[data-reveal="mail"].in .ml-btn{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.mail-cta[data-reveal="mail"] .ml-btn{opacity:1!important;transform:none!important;transition:none!important}}
@media(max-width:860px){.mail-full .mail-l .lead{white-space:normal}}

/* AM and Hamza, 2026-10-16 (accessibility): no readable text below 13px. The rights line under the footer logo
   used to be forced onto one line at a tiny size; at 13px it has to be allowed to wrap on narrow phones. */
@media(max-width:560px){.foot-center .foot-lock .foot-meta{white-space:normal}}

/* Accessibility, 2026-10-16: the footer logo link had a 23px hit area; WCAG 2.2 asks for 24px. */
.foot-word{min-height:24px}

/* AM 2026-10-17 00:11: the gate tick sits right beside its text. The text block now shrinks to its words instead of
   filling the widened row, so tick and text sit together as one centred block (the right pad keeps the words on the axis). */
.gate-check>span{flex:0 1 auto}
/* AM 2026-10-17 00:11: the three lines turn into an X when the menu opens and back into lines when it closes.
   Reverses the 2026-10-15 "no X on open". Lines are 1.5px with a 5px gap, so the outer two move 6.5px to the centre. */
.nav .menu-btn span{transition:opacity .3s ease,transform .4s var(--ease-x)}
body.menu-open .nav .menu-btn span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.menu-open .nav .menu-btn span:nth-child(2){opacity:0;transform:scaleX(0)}
body.menu-open .nav .menu-btn span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media(prefers-reduced-motion:reduce){.nav .menu-btn span{transition:none}}
/* Phones: the lines wrap there anyway, and wrapped centred text cannot shrink to its words, which left the tick
   stranded outside the box. So under 560px the row stays inside the box and the lines sit left, right beside the tick. */
@media(max-width:560px){
  .gate-signup .mail-check.gate-check{margin-inline:0;justify-content:flex-start}
  .gate-check>span{align-items:flex-start;text-align:left;padding-right:0}
  .gate-check>span>span{text-wrap:wrap}
}
/* AM 2026-10-17 00:26: the X fills the same box as the three lines, 34px wide and 14.5px tall, instead of a smaller
   45 degree cross. Line centres sit 13px apart, so each arm runs corner to corner of 34 x 13: 20.92 degrees, 36.4px long. */
body.menu-open .nav .menu-btn span:nth-child(1){transform:translateY(6.5px) rotate(20.92deg) scaleX(1.0706)}
body.menu-open .nav .menu-btn span:nth-child(3){transform:translateY(-6.5px) rotate(-20.92deg) scaleX(1.0706)}
/* AM 2026-10-17 00:26: every password box has a show or hide toggle on the right and a Caps Lock mark on the left
   (built in app.js). Equal padding both sides so centred text stays centred. Browser own reveal and caps marks hidden. */
.pw-wrap{position:relative;display:block;width:100%}
.pw-wrap>input.pw-in{padding-left:38px;padding-right:38px}
.pw-wrap>input::-ms-reveal{display:none}
.pw-wrap>input::-webkit-caps-lock-indicator{display:none}
.pw-eye,.pw-caps{position:absolute;top:50%;width:34px;height:34px;margin-top:-17px;display:grid;place-items:center;color:var(--muted)}
.pw-eye{right:0;transition:color var(--t-micro) ease}
.pw-eye:hover,.pw-eye:focus-visible{color:var(--ink)}
.pw-caps{left:0;color:var(--ink);opacity:0;transition:opacity var(--t-micro) ease;pointer-events:none}
.pw-wrap.caps .pw-caps{opacity:1}
.pw-eye svg,.pw-caps svg{width:18px;height:18px}
@media(hover:none){.pw-eye{width:44px;height:44px;margin-top:-22px;right:-5px}}
@media(prefers-reduced-motion:reduce){.pw-eye,.pw-caps{transition:none}}

/* AM 2026-10-17 18:24: the mailing list heading sits at exactly the height of Upcoming Events. The panel no longer
   centres its block; it starts at the events heading's own offset from the top of its panel, measured by app.js
   (--ev-head-top) at every screen size. Without script it falls back to the events panel's top padding. */
.stack>.p3 .mail-cta.mail-full{align-items:flex-start;padding-top:var(--ev-head-top,calc(var(--navh) + 20px))}

/* AM 2026-10-17 18:29: slide 3 is the mailing list and the footer together, one full screen. The panel is the
   screen's height; the photo section takes what the footer leaves, the footer sits at the bottom of the same
   screen. The heading keeps its Upcoming Events height. It may grow past the screen only if the content cannot fit. */
.stack>.p3{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
.stack>.p3 .mail-cta.mail-full{flex:1 0 auto;min-height:0;padding-bottom:28px}
.stack>.p3 .foot-center{flex:none;padding-top:clamp(28px,4vh,48px)}
.stack>.p3 .foot-center .foot-lock .foot-word{margin-bottom:clamp(12px,2vh,24px)}

/* AM 2026-10-17 18:36: no line above the footer on any page. The footer fades from black at the foot of the page up
   into the page colour. On the home page a soft band above it melts the photo panel into the footer too; elsewhere the
   page above is already the page colour and the band would only dim text that sits close to the footer, so it is not used. */
.foot-center{border-top:0;background:linear-gradient(180deg,var(--bg) 0%,#000 100%)}
.stack>.p3 .foot-center::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:clamp(64px,9vw,120px);pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,11,0) 0%,var(--bg) 100%)}