/* =====================================================================
   SM PRODUCTION — "THE ARCHIVE"
   A contact-sheet inspired editorial system. Dual theme.

   1. Tokens / theme      6. Hero            11. Filmstrip
   2. Reset               7. Chrome          12. Ledger / stats
   3. Type                8. Menu            13. Quote / journal
   4. Layout              9. Plate           14. Forms / footer
   5. Motion             10. Index list      15. Responsive
   ===================================================================== */

/* ---------------------------------------------------------------- 1 */
/* LIGHT is the base. Dark overrides only the tokens that change.     */
:root{
  color-scheme: light;

  --paper:      #EFEBE3;   /* bone, warm — not white */
  --paper-2:    #E7E2D8;
  --paper-3:    #DDD7CA;
  --ink:        #17150F;   /* warm near-black */
  --ink-70:     rgba(23,21,15,.70);
  --ink-45:     rgba(23,21,15,.45);
  --ink-28:     rgba(23,21,15,.28);
  --rule:       rgba(23,21,15,.16);
  --rule-soft:  rgba(23,21,15,.08);
  --accent:     #A85B12;   /* burnt amber — brand mark, darkened for paper */
  --accent-ink: #FFF6E9;
  --shade:      rgba(23,21,15,.06);
  --grain-op:   .030;
  --img-tone:   0;         /* dark-mode image dimming */

  /* Type */
  --f-display:  'Instrument Serif', 'Times New Roman', serif;
  --f-sans:     'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-mono:     'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Rhythm */
  --gutter:     clamp(1.1rem, 4.5vw, 5.5rem);
  --bay:        clamp(4.5rem, 10vw, 10rem);
  --maxw:       1680px;
  --bar-h:      38px;
  --head-h:     94px;
  --rail:       clamp(0px, 2.1vw, 30px);   /* sprocket rail width */
  --hole:       rgba(23,21,15,.30);

  /* Motion */
  --ease:       cubic-bezier(.19,1,.22,1);
  --ease-io:    cubic-bezier(.76,0,.24,1);
}

:root[data-theme="dark"]{
  color-scheme: dark;

  --paper:      #0C0B09;
  --paper-2:    #131110;
  --paper-3:    #1B1917;
  --ink:        #EFE9DD;
  --ink-70:     rgba(239,233,221,.68);
  --ink-45:     rgba(239,233,221,.44);
  --ink-28:     rgba(239,233,221,.26);
  --rule:       rgba(239,233,221,.15);
  --rule-soft:  rgba(239,233,221,.07);
  --accent:     #E9A23B;
  --accent-ink: #100E0A;
  --shade:      rgba(239,233,221,.05);
  --grain-op:   .055;
  --img-tone:   .06;
  --hole:       rgba(0,0,0,.72);
}

/* Follow the OS until the visitor chooses for themselves. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --paper:#0C0B09; --paper-2:#131110; --paper-3:#1B1917;
    --ink:#EFE9DD; --ink-70:rgba(239,233,221,.68); --ink-45:rgba(239,233,221,.44);
    --ink-28:rgba(239,233,221,.26); --rule:rgba(239,233,221,.15); --rule-soft:rgba(239,233,221,.07);
    --accent:#E9A23B; --accent-ink:#100E0A; --shade:rgba(239,233,221,.05);
    --grain-op:.055; --img-tone:.06; --hole:rgba(0,0,0,.72);
  }
}

/* ---------------------------------------------------------------- 2 */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html.has-lock, body.has-lock{ overflow:hidden; }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-sans);
  font-size:17px;
  font-weight:350;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  padding-inline:var(--rail);
  transition:background-color .5s var(--ease), color .5s var(--ease);
}

img,svg,video,iframe{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
ul,ol{ list-style:none; }
::selection{ background:var(--accent); color:var(--accent-ink); }
[hidden]{ display:none !important; }

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--paper); }
::-webkit-scrollbar-thumb{ background:var(--ink-28); }
::-webkit-scrollbar-thumb:hover{ background:var(--accent); }

/* Film grain — the whole site sits under one sheet of it. */
.grain{
  position:fixed; inset:-120%;
  z-index:9997;
  pointer-events:none;
  opacity:var(--grain-op);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 6s steps(6) infinite;
  will-change:transform;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}      16%{transform:translate(-3%,-4%)}
  33%{transform:translate(2%,-2%)}  50%{transform:translate(-2%,3%)}
  66%{transform:translate(3%,2%)}   83%{transform:translate(-4%,-1%)}
  100%{transform:translate(0,0)}
}

/* ---------------------------------------------------------------- 3 */
h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:400;
  line-height:.92;
  letter-spacing:-.022em;
}

/* Display scale — deliberately extreme at the top end. */
.t-mega{ font-size:clamp(3.4rem, 11.5vw, 12.5rem); }
.t-xl  { font-size:clamp(2.7rem, 7.4vw, 8rem); }
.t-lg  { font-size:clamp(2.1rem, 4.4vw, 4.6rem); }
.t-md  { font-size:clamp(1.6rem, 2.6vw, 2.7rem); }
.t-sm  { font-size:clamp(1.25rem, 1.7vw, 1.7rem); line-height:1.1; }

em, .ital{ font-style:italic; }
.tint{ color:var(--accent); }

/* Mono is the archive's voice: numbers, places, times, labels. */
.meta{
  font-family:var(--f-mono);
  font-size:.75rem;
  font-weight:400;
  letter-spacing:.2em;
  text-transform:uppercase;
  line-height:1.4;
  color:var(--ink-45);
}
.meta.is-accent{ color:var(--accent); }
.meta.is-ink{ color:var(--ink); }
.meta-lg{ font-size:.84rem; letter-spacing:.16em; }

/* A ruled label: 01 ── LABEL */
.stamp{
  display:inline-flex; align-items:center; gap:.85rem;
  font-family:var(--f-mono);
  font-size:.75rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-45);
}
.stamp b{ font-weight:400; color:var(--accent); }
.stamp::after{ content:''; width:clamp(28px,5vw,74px); height:1px; background:var(--rule); }
.stamp.is-lead::before{ content:''; width:clamp(28px,5vw,74px); height:1px; background:var(--rule); }
.stamp.is-lead::after{ display:none; }

.body-lg{
  font-size:clamp(1.02rem,1.18vw,1.2rem);
  line-height:1.72;
  color:var(--ink-70);
  max-width:56ch;
  font-weight:350;
}
.body-sm{ font-size:.93rem; line-height:1.7; color:var(--ink-70); }
p + p{ margin-top:1em; }

/* Vertical mono rail down the left edge of a full-bleed block */
.rail{
  position:absolute;
  left:calc(var(--gutter) - 6px);
  top:50%;
  transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;
  z-index:6;
  display:flex; align-items:center; gap:1.4rem;
  font-family:var(--f-mono);
  font-size:.71rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-45);
}
.rail i{ display:block; width:1px; height:46px; background:var(--rule); }

/* ---------------------------------------------------------------- 4 */
.shell{
  width:100%; max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.shell-tight{ max-width:1080px; }

.bay{ padding-block:var(--bay); position:relative; }
.bay.is-tint{ background:var(--paper-2); }
.bay.is-deep{ background:var(--paper-3); }

.rule{ height:1px; background:var(--rule); border:0; }
.rule-soft{ height:1px; background:var(--rule-soft); border:0; }

/* The 12-column bed everything asymmetric is built on */
.bed{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(1rem,2vw,2.2rem); }
.c1{grid-column-end:span 1}   .c2{grid-column-end:span 2}   .c3{grid-column-end:span 3}
.c4{grid-column-end:span 4}   .c5{grid-column-end:span 5}   .c6{grid-column-end:span 6}
.c7{grid-column-end:span 7}   .c8{grid-column-end:span 8}   .c9{grid-column-end:span 9}
.c10{grid-column-end:span 10} .c12{grid-column-end:span 12}
.o1{grid-column-start:2}  .o2{grid-column-start:3}  .o3{grid-column-start:4}
.o5{grid-column-start:6}  .o7{grid-column-start:8}  .o8{grid-column-start:9}

.stack{ display:grid; gap:clamp(1rem,1.6vw,1.6rem); align-content:start; }
.row{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }
.push{ margin-left:auto; }
.mt1{margin-top:1rem} .mt2{margin-top:2rem} .mt3{margin-top:clamp(2rem,4vw,3.5rem)}

/* A section number set enormous and ghosted behind its content */
.ghost-no{
  position:absolute;
  font-family:var(--f-display);
  font-size:clamp(9rem,26vw,28rem);
  line-height:.72;
  color:var(--ink);
  opacity:.045;
  pointer-events:none;
  user-select:none;
  z-index:0;
}

/* ---------------------------------------------------------------- 5 */
.frame{ position:relative; overflow:hidden; background:var(--paper-3); }
.frame img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1.5s var(--ease), filter .6s var(--ease);
  will-change:transform;
}
.frame::before{
  content:'';
  position:absolute; inset:0; z-index:1;
  background:#000;
  opacity:var(--img-tone);
  pointer-events:none;
}
.r-1x1{aspect-ratio:1/1}  .r-4x3{aspect-ratio:4/3}  .r-3x2{aspect-ratio:3/2}
.r-3x4{aspect-ratio:3/4}  .r-4x5{aspect-ratio:4/5}  .r-2x3{aspect-ratio:2/3}
.r-16x9{aspect-ratio:16/9} .r-21x9{aspect-ratio:21/9}

/* Wipe reveal — a shutter opening, not a fade */
[data-wipe]{ position:relative; overflow:hidden; }
[data-wipe] > *{
  clip-path:inset(0 0 100% 0);
  transform:scale(1.08);
  transition:clip-path 1.2s var(--ease-io), transform 1.6s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-wipe].in > *{ clip-path:inset(0 0 0 0); transform:scale(1); }

/* Line-by-line rise */
[data-rise]{
  opacity:0;
  transform:translate3d(0,26px,0);
  transition:opacity .9s var(--ease), transform 1.05s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-rise="none"]{ transform:none; }
[data-rise="left"]{ transform:translate3d(-28px,0,0); }
[data-rise="right"]{ transform:translate3d(28px,0,0); }
[data-rise].in{ opacity:1; transform:none; }

/* Word reveal for display type */
.ln{ display:block; overflow:hidden; padding-bottom:.06em; }
.wd{
  display:inline-block;
  transform:translate3d(0,105%,0);
  opacity:0;
  transition:transform 1.05s var(--ease), opacity .55s linear;
}
.in .wd{ transform:none; opacity:1; }

/* Scroll-velocity skew, applied by JS */
.skewable{ transition:transform .45s var(--ease); }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
  [data-rise],.wd{ opacity:1!important; transform:none!important; }
  [data-wipe] > *{ clip-path:none!important; transform:none!important; filter:none!important; }
  [data-wipe]::after{ animation:none!important; }
  .grain{ animation:none; }
}

html:not(.js) [data-rise],
html:not(.js) .wd{ opacity:1!important; transform:none!important; }
html:not(.js) [data-wipe] > *{ clip-path:none!important; transform:none!important; filter:none!important; }
html:not(.js) #boot{ display:none; }
html:not(.js) .slide{ opacity:1!important; visibility:visible!important; }
html:not(.js) .slide ~ .slide{ display:none; }
html:not(.js) .voice{ position:relative!important; opacity:1!important; visibility:visible!important; }
html:not(.js) .fold-a{ max-height:none!important; }

/* ---------------------------------------------------------------- 6 */
/* ACTIONS — sharp corners everywhere. No pills, no rounded chrome.  */
.act{
  position:relative;
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--f-mono);
  font-size:.77rem; letter-spacing:.2em; text-transform:uppercase;
  padding-block:.45rem;
  color:var(--ink);
  white-space:nowrap;
}
.act::after{
  content:'';
  position:absolute; left:0; bottom:0;
  width:100%; height:1px;
  background:currentColor;
  transform:scaleX(1); transform-origin:left;
  transition:transform .5s var(--ease-io);
}
.act:hover::after{ transform:scaleX(0); transform-origin:right; }
.act .gl{ transition:transform .5s var(--ease); }
.act:hover .gl{ transform:translate(3px,-3px); }
.act.is-quiet{ color:var(--ink-45); }
.act.is-quiet:hover{ color:var(--ink); }

.act-box{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:.7rem;
  padding:1.05rem 2.1rem;
  border:1px solid var(--ink);
  font-family:var(--f-mono);
  font-size:.77rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink);
  overflow:hidden;
  isolation:isolate;
  transition:color .45s var(--ease), border-color .45s var(--ease);
  white-space:nowrap;
}
.act-box::before{
  content:'';
  position:absolute; inset:0; z-index:-1;
  background:var(--ink);
  transform:translateY(100%);
  transition:transform .55s var(--ease-io);
}
.act-box:hover{ color:var(--paper); }
.act-box:hover::before{ transform:translateY(0); }
.act-box.is-fill{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.act-box.is-fill::before{ background:var(--ink); }
.act-box.is-fill:hover{ color:var(--paper); border-color:var(--ink); }
.act-box.is-line{ border-color:var(--rule); }
.act-box.is-sm{ padding:.72rem 1.35rem; font-size:.71rem; }

/* ---------------------------------------------------------------- 7 */
/* BOOT — a lens finding focus, then the shutter opening              */
#boot{
  position:fixed; inset:0; z-index:9999;
  background:transparent;
  display:grid; place-items:center;
  overflow:hidden;
}
#boot.gone{ visibility:hidden; }

.boot-in{
  display:grid; justify-items:center; gap:1.5rem;
  width:min(360px,72vw);
  position:relative; z-index:3;
  transition:opacity .45s var(--ease);
}
#boot.open .boot-in{ opacity:0; }

/* ---- the barrel: aperture blades sitting behind the mark ---- */
.barrel{ position:relative; width:216px; height:216px; display:grid; place-items:center; }
.barrel .iris{
  position:absolute; inset:0;
  width:100%; height:100%;
  transform:scale(.42) rotate(-30deg);
  opacity:0;
  transition:transform 1.15s var(--ease), opacity .6s var(--ease);
}
#boot.rolling .barrel .iris{ transform:scale(1) rotate(0deg); opacity:1; }
#boot.locked  .barrel .iris{ transform:scale(1.06) rotate(4deg); }
#boot.open    .barrel .iris{ transform:scale(2.6) rotate(38deg); opacity:0; }
.iris .blade{ fill:none; stroke:var(--accent); stroke-width:1.1; }
.iris .ring{ fill:none; stroke:var(--rule); stroke-width:1; }
.iris-spin{ transform-origin:50% 50%; animation:irisTurn 11s linear infinite; }
@keyframes irisTurn{ to{ transform:rotate(360deg); } }

/* ---- the mark, racked into focus ---- */
.boot-logo{ position:relative; width:126px; display:grid; place-items:center; }
.bl-d{ display:none; }
:root[data-theme="dark"] .bl-l{ display:none; }
:root[data-theme="dark"] .bl-d{ display:grid; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .bl-l{ display:none; }
  :root:not([data-theme="light"]) .bl-d{ display:grid; }
}
.boot-logo img{
  grid-area:1/1;
  width:100%;
  transition:filter 1.05s var(--ease), transform 1.05s var(--ease), opacity .5s var(--ease);
}
/* Two tinted copies split apart, the way a fast lens fringes wide open */
.boot-logo .lg-r{ mix-blend-mode:multiply; filter:blur(9px); transform:translate(-7px,3px); opacity:.55; }
.boot-logo .lg-c{ mix-blend-mode:multiply; filter:blur(9px); transform:translate(7px,-3px); opacity:.55; }
:root[data-theme="dark"] .boot-logo .lg-r,
:root[data-theme="dark"] .boot-logo .lg-c{ mix-blend-mode:screen; }
.boot-logo .lg-m{ filter:blur(11px); transform:scale(1.14); }
#boot.locked .boot-logo .lg-m{ filter:blur(0); transform:scale(1); }
#boot.locked .boot-logo .lg-r,
#boot.locked .boot-logo .lg-c{ filter:blur(0); transform:none; opacity:0; }

/* ---- readout ---- */
.boot-meta{
  display:flex; align-items:center; gap:1rem;
  font-family:var(--f-mono); font-size:.69rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-45);
}
.boot-af{ display:flex; align-items:center; gap:.45rem; }
.boot-af::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--ink-28);
  transition:background-color .35s, box-shadow .35s;
}
#boot.locked .boot-af{ color:var(--accent); }
#boot.locked .boot-af::before{ background:var(--accent); box-shadow:0 0 9px var(--accent); }
.boot-bar{ width:100%; height:1px; background:var(--rule); position:relative; overflow:hidden; }
.boot-bar span{
  position:absolute; inset:0;
  background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s linear;
}
.boot-n{ font-variant-numeric:tabular-nums; }

/* ---- the shutter: two curtains part and the site is behind them ---- */
.curtain{
  position:absolute; left:0; right:0;
  height:50.5%;
  background:var(--paper);
  z-index:2;
  transition:transform 1s var(--ease-io);
}
.curtain.t{ top:0; }
.curtain.b{ bottom:0; }
#boot.open .curtain.t{ transform:translateY(-100%); }
#boot.open .curtain.b{ transform:translateY(100%); }
/* A hairline of light along the parting edge */
.curtain::after{
  content:'';
  position:absolute; left:0; right:0; height:1px;
  background:var(--accent);
  opacity:0; transition:opacity .3s;
}
.curtain.t::after{ bottom:0; }
.curtain.b::after{ top:0; }
#boot.locked .curtain::after{ opacity:.6; }

/* TICKER — the authored detail: place, local time, availability     */
.ticker{
  position:fixed; top:0; left:var(--rail); right:var(--rail);
  z-index:901;
  height:var(--bar-h);
  background:var(--ink);
  color:var(--paper);
  display:flex; align-items:center;
  overflow:hidden;
  font-family:var(--f-mono);
  font-size:.69rem; letter-spacing:.24em; text-transform:uppercase;
}
.ticker-in{
  width:100%; max-width:var(--maxw);
  margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:center; gap:1.35rem;
  white-space:nowrap;
  overflow:hidden;
}
.ticker-in > span{ white-space:nowrap; flex-shrink:0; }
/* Shed the lower-priority readouts before anything is allowed to wrap */
@media (max-width:1280px){ .ticker .tc-seg{ display:none; } }
@media (max-width:1080px){ .ticker .avail{ display:none; } }
@media (max-width:820px){  .ticker .city-seg{ display:none; } }
.ticker .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--accent);
  animation:live 2.2s var(--ease) infinite;
  flex-shrink:0;
}
@keyframes live{ 0%,100%{opacity:1} 50%{opacity:.25} }
.ticker .sep{ opacity:.35; }
.ticker .roll{ margin-left:auto; opacity:.6; }

/* HEADER                                                            */
.head{
  position:fixed; top:var(--bar-h); left:var(--rail); right:var(--rail);
  z-index:900;
  height:var(--head-h);
  display:flex; align-items:center;
  /* Always legible — the menu never floats unreadably over a photograph */
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  border-bottom:1px solid var(--rule);
  box-shadow:0 1px 0 var(--rule-soft), 0 14px 40px rgba(0,0,0,.10);
  transition:background-color .5s var(--ease), height .4s var(--ease),
             border-color .5s var(--ease), transform .55s var(--ease),
             box-shadow .5s var(--ease);
}
:root[data-theme="dark"] .head{ box-shadow:0 1px 0 var(--rule-soft), 0 18px 46px rgba(0,0,0,.55); }
.head.stuck{
  height:74px;
  background:color-mix(in srgb, var(--paper) 97%, transparent);
}
.head.gone{ transform:translateY(calc(-100% - var(--bar-h))); }
.head-in{
  width:100%; max-width:var(--maxw); height:100%;
  margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:stretch; justify-content:space-between;
  gap:clamp(.6rem,1.4vw,1.6rem);
  min-width:0;
}
.mark,.head-end{ align-self:center; flex-shrink:0; }
.nav{ min-width:0; }
.mark{ display:flex; align-items:center; gap:.9rem; flex-shrink:0; }
.mark img{ height:74px; width:auto; transition:height .4s var(--ease); }

/* One logo per theme — the mark has a light and a dark cut. */
.logo-d{ display:none; }
:root[data-theme="dark"] .logo-l{ display:none; }
:root[data-theme="dark"] .logo-d{ display:block; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logo-l{ display:none; }
  :root:not([data-theme="light"]) .logo-d{ display:block; }
}
.boot-in img{ grid-row:1; }
.head.stuck .mark img{ height:56px; }
.mark .wordmark{
  display:grid; gap:.3rem;
  border-left:1px solid var(--rule);
  padding-left:1rem;
  transition:opacity .4s var(--ease);
}
.mark .wordmark b{
  font-family:var(--f-display);
  font-weight:400;
  font-size:1.22rem;
  line-height:1;
  letter-spacing:.005em;
  color:var(--ink);
  white-space:nowrap;
}
.mark .wordmark span{
  font-family:var(--f-mono);
  font-size:.61rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-45);
  line-height:1;
  white-space:nowrap;
}
.head.stuck .mark .wordmark b{ font-size:1.05rem; }
/* ---- header space budget ----------------------------------------
   The menu is the point. Everything else yields to it, in this order:
   wordmark, then the Book button (Booking is already a menu item),
   then the ƒ-stop labels, then the mute control. Only when the menu
   itself genuinely cannot fit does the burger take over.            */
@media (max-width:1430px){ .mark .wordmark{ display:none; } }

/* The Book button duplicates the Booking menu item while the menu shows */
.head-end > .act-box{ display:none; }
@media (max-width:900px){ .head-end > .act-box{ display:inline-flex; } }

@media (max-width:1340px){
  .nav a{ font-size:.86rem; padding-inline:clamp(.6rem,1.15vw,1.15rem); }
}
@media (max-width:1300px){
  .tsw button span{ display:none; }
  .tsw button{ min-width:38px; padding:0; }
}
@media (max-width:1180px){
  .head-end .mute{ display:none; }
  .nav a{ font-size:.82rem; padding-inline:.6rem; letter-spacing:.1em; }
  .nav a sup{ font-size:.6rem; }
}
@media (max-width:1010px){
  .nav a{ font-size:.76rem; padding-inline:.45rem; letter-spacing:.06em; }
  .mark img{ height:56px; }
  .head.stuck .mark img{ height:46px; }
}

.nav{ display:flex; align-items:stretch; gap:0; height:100%; }
.nav a{
  position:relative;
  display:flex; flex-direction:column; justify-content:center; gap:.28rem;
  padding:0 clamp(.7rem,1.35vw,1.35rem);
  font-family:var(--f-mono);
  font-size:.84rem;
  font-weight:400;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink-45);
  border-left:1px solid var(--rule-soft);
  transition:color .35s var(--ease), background-color .35s var(--ease);
}
.nav a:last-child{ border-right:1px solid var(--rule-soft); }
/* The scene number sits above the label, slate-style — never jammed against it */
.nav a sup{
  display:block;
  font-size:.66rem; line-height:1;
  letter-spacing:.18em;
  color:var(--ink-28);
  transition:color .3s var(--ease);
}
.nav a::after{
  content:'';
  position:absolute; left:0; right:0; bottom:0;
  height:2px; background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease-io);
}
.nav a:hover{ color:var(--ink); background:var(--shade); }
.nav a:hover sup{ color:var(--accent); }
.nav a.on{ color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); }
.nav a.on sup{ color:var(--accent); }
.nav a.on::after{ transform:scaleX(1); }
.nav a::after{ height:3px; }

.head-end{ display:flex; align-items:center; gap:.9rem; }

/* THEME SWITCH — mono-labelled, sharp, no toy slider */
.tsw{
  display:flex; align-items:stretch;
  border:1px solid var(--rule);
  height:34px;
  overflow:hidden;
  flex-shrink:0;
}
.tsw button{
  display:grid; place-items:center;
  width:36px;
  color:var(--ink-45);
  transition:background-color .35s var(--ease), color .35s var(--ease);
}
.tsw button + button{ border-left:1px solid var(--rule); }
.tsw button:hover{ color:var(--ink); }
.tsw button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); }

/* Burger */
.burger{
  width:38px; height:34px;
  display:none; place-items:center;
  border:1px solid var(--rule);
  position:relative; z-index:1002;
  flex-shrink:0;
}
.burger i{ display:block; width:15px; height:1px; background:var(--ink); transition:transform .42s var(--ease), opacity .25s; }
.burger i + i{ margin-top:4px; }
.burger.open i:nth-child(1){ transform:translateY(2.5px) rotate(45deg); }
.burger.open i:nth-child(2){ opacity:0; }
.burger.open i:nth-child(3){ transform:translateY(-2.5px) rotate(-45deg); }

/* Scroll meter — a thin film-advance bar */
.meter{
  position:fixed; top:var(--bar-h); left:var(--rail); right:var(--rail);
  height:2px;
  background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  z-index:902;
}

/* ---------------------------------------------------------------- 8 */
.veil{
  position:fixed; top:0; bottom:0; left:var(--rail); right:var(--rail); z-index:1001;
  background:var(--paper);
  display:grid;
  grid-template-rows:auto 1fr auto;
  padding:calc(var(--bar-h) + var(--head-h) + 1.5rem) var(--gutter) 2rem;
  transform:translateY(-101%);
  transition:transform .8s var(--ease-io);
  overflow-y:auto;
}
.veil.open{ transform:none; }
.veil-head{ display:flex; justify-content:space-between; gap:1rem; padding-bottom:1.6rem; border-bottom:1px solid var(--rule); }
.veil-list{ display:grid; align-content:center; gap:.1rem; padding-block:clamp(1.5rem,4vw,3rem); }
.veil-list li{ overflow:hidden; border-bottom:1px solid var(--rule-soft); }
.veil-list a{
  display:flex; align-items:baseline; gap:1.2rem;
  padding-block:clamp(.4rem,1.1vw,.8rem);
  font-family:var(--f-display);
  font-size:clamp(2.1rem,7vw,5rem);
  line-height:1.12;
  transform:translateY(103%);
  opacity:0;
  transition:transform .75s var(--ease), opacity .5s var(--ease), color .35s;
}
.veil.open .veil-list a{ transform:none; opacity:1; }
.veil-list a:hover{ color:var(--accent); }
.veil-list a span{
  font-family:var(--f-mono);
  font-size:.71rem; letter-spacing:.2em;
  color:var(--accent);
  flex-shrink:0;
}
.veil-list a .to{
  margin-left:auto;
  font-family:var(--f-mono);
  font-size:.71rem; letter-spacing:.2em;
  color:var(--ink-28);
  opacity:0; transform:translateX(-14px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.veil-list a:hover .to{ opacity:1; transform:none; }
.veil-tools{
  display:flex; align-items:center; gap:.6rem;
  padding-bottom:1.4rem;
}
.veil-tools .tsw button span{ display:inline; }
.veil-foot{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem;
  padding-top:1.6rem; border-top:1px solid var(--rule);
  opacity:0; transition:opacity .5s .3s;
}
.veil.open .veil-foot{ opacity:1; }
.veil-foot a:hover{ color:var(--accent); }

/* CURSOR */
.cur{
  position:fixed; top:0; left:0; z-index:9996;
  width:9px; height:9px;
  margin:-4.5px 0 0 -4.5px;
  border-radius:50%;
  background:var(--accent);
  pointer-events:none;
  transition:width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease),
             background-color .3s, opacity .3s;
}
.cur.wide{
  width:78px; height:78px; margin:-39px 0 0 -39px;
  background:var(--accent);
}
.cur .lab{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-family:var(--f-mono);
  font-size:.63rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-ink);
  opacity:0; transition:opacity .25s;
}
.cur.wide .lab{ opacity:1; }
@media (hover:none),(max-width:1024px){ .cur{ display:none } }

/* ---------------------------------------------------------------- 9 */
/* HERO                                                              */
.hero{
  position:relative;
  height:100svh; min-height:640px;
  overflow:hidden;
  background:var(--paper);
}
.slide{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition:opacity 1.3s var(--ease), visibility 1.3s;
}
.slide.on{ opacity:1; visibility:visible; z-index:2; }
.slide .plate-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transform:scale(1.12);
  transition:transform 9s linear;
}
.slide.on .plate-bg{ transform:scale(1); }
.slide::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 62%, rgba(0,0,0,.62) 100%);
}
/* With no copy over them, the photographs get to be the whole point */
.hero.is-bare .slide::after{
  background:
    linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 68%, rgba(0,0,0,.52) 100%);
}
.hero.is-bare .slide{ transition:opacity 1.6s var(--ease), visibility 1.6s; }
.hero-type{
  position:relative; z-index:5;
  height:100%;
  display:grid; align-content:end;
  padding-bottom:clamp(5rem,11vh,8.5rem);
  color:#F4EFE6;
}
.hero-type .shell{ display:grid; gap:1.5rem; }
.hero-h{ max-width:16ch; }
.hero-h .wd{ transition-delay:calc(var(--i,0) * 62ms + 320ms); }
.hero-sub{
  max-width:46ch;
  color:rgba(244,239,230,.76);
  font-size:clamp(.94rem,1.06vw,1.06rem);
  opacity:0; transform:translateY(16px);
  transition:all .8s var(--ease) .8s;
}
.hero-do{
  display:flex; flex-wrap:wrap; gap:.9rem; margin-top:.5rem;
  opacity:0; transform:translateY(16px);
  transition:all .8s var(--ease) .95s;
}
.slide.on .hero-sub,.slide.on .hero-do{ opacity:1; transform:none; }
.slide.on .hero-stamp{ opacity:1; transform:none; }
.hero-stamp{ opacity:0; transform:translateY(16px); transition:all .8s var(--ease) .25s; color:rgba(244,239,230,.6); }
.hero-stamp::after{ background:rgba(244,239,230,.3); }
.hero-stamp b{ color:var(--accent); }
.slide:not(.on) .wd{ transform:translate3d(0,60%,0); opacity:0; transition-duration:.25s; transition-delay:0s; }
.slide:not(.on) .hero-sub,.slide:not(.on) .hero-do,.slide:not(.on) .hero-stamp{ transition-duration:.25s; transition-delay:0s; }

.hero .rail{ color:rgba(244,239,230,.55); }
.hero .rail i{ background:rgba(244,239,230,.3); }

/* Frame counter + advance bars */
.hero-deck{
  position:absolute; z-index:6;
  left:var(--gutter); right:var(--gutter); bottom:1.8rem;
  display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem;
  color:rgba(244,239,230,.75);
}
.frames{ display:flex; align-items:center; gap:.55rem; }
.frames button{
  position:relative;
  width:clamp(30px,4vw,58px); height:2px;
  background:rgba(244,239,230,.24);
  overflow:hidden;
}
.frames button::after{
  content:''; position:absolute; inset:0;
  background:var(--accent);
  transform:scaleX(0); transform-origin:left;
}
.frames button.on::after{ animation:advance var(--dur,7s) linear forwards; }
@keyframes advance{ to{ transform:scaleX(1) } }
.count{ font-family:var(--f-mono); font-size:.76rem; letter-spacing:.2em; }
.count b{ font-weight:400; color:#F4EFE6; font-size:1.15rem; }
.hero-arrows{ display:flex; gap:.5rem; }
.hero-arrows button{
  width:42px; height:42px;
  display:grid; place-items:center;
  border:1px solid rgba(244,239,230,.28);
  color:rgba(244,239,230,.8);
  transition:all .4s var(--ease);
}
.hero-arrows button:hover{ background:#F4EFE6; border-color:#F4EFE6; color:#111; }

/* PAGE HEAD (inner pages) */
.phead{
  position:relative;
  min-height:clamp(400px,62vh,660px);
  display:grid; align-items:end;
  padding-top:calc(var(--bar-h) + var(--head-h));
  overflow:hidden;
  color:#F4EFE6;
}
.phead .plate-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transform:scale(1.09);
  animation:pheadIn 2.6s var(--ease) forwards;
}
@keyframes pheadIn{ to{ transform:scale(1) } }
.phead::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.52),rgba(0,0,0,.18) 44%,rgba(0,0,0,.84));
}
.phead .shell{ position:relative; z-index:2; padding-bottom:clamp(2.6rem,6vw,4.6rem); display:grid; gap:1.2rem; }
.phead .stamp{ color:rgba(244,239,230,.62); }
.phead .stamp::after,.phead .stamp.is-lead::before{ background:rgba(244,239,230,.3); }
.crumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:.55rem;
  font-family:var(--f-mono); font-size:.71rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(244,239,230,.52);
}
.crumb a:hover{ color:var(--accent); }
.crumb .sl{ opacity:.4; }

/* --------------------------------------------------------------- 10 */
/* MARQUEE — mixed serif/mono, the archive muttering to itself       */
.crawl{
  overflow:hidden;
  padding-block:clamp(1.1rem,2vw,1.7rem);
  border-block:1px solid var(--rule);
  background:var(--paper-2);
}
.crawl-track{ display:flex; align-items:center; gap:2.6rem; width:max-content; animation:crawl 46s linear infinite; }
.crawl:hover .crawl-track{ animation-play-state:paused; }
@keyframes crawl{ to{ transform:translateX(-50%) } }
.crawl-track span{
  font-family:var(--f-display);
  font-size:clamp(1.35rem,2.5vw,2.2rem);
  font-style:italic;
  color:var(--ink-45);
  white-space:nowrap;
}
.crawl-track em{
  font-family:var(--f-mono); font-style:normal;
  font-size:.71rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--accent);
  white-space:nowrap;
}

/* PLATE — an image with its archive caption. The core content unit. */
.plate{ display:grid; gap:.9rem; }
.plate .cap{
  display:flex; align-items:baseline; gap:.9rem;
  font-family:var(--f-mono); font-size:.71rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-45);
  padding-top:.6rem;
  border-top:1px solid var(--rule);
}
.plate .cap b{ font-weight:400; color:var(--accent); }
.plate .cap .push{ color:var(--ink-28); }
.plate:hover .frame img{ transform:scale(1.045); }

/* INDEX LIST — bare rows; hovering swaps the backdrop              */
.index{ position:relative; z-index:1; }
.index-bg{
  position:absolute; inset:0; z-index:0;
  overflow:hidden; pointer-events:none;
}
.index-bg img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.1);
  transition:opacity .8s var(--ease), transform 1.6s var(--ease);
}
.index-bg img.on{ opacity:.16; transform:scale(1); }
:root[data-theme="dark"] .index-bg img.on{ opacity:.24; }

.irow{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:center;
  gap:clamp(1rem,3vw,3rem);
  padding-block:clamp(1.4rem,2.9vw,2.5rem);
  border-top:1px solid var(--rule);
  transition:padding-inline .55s var(--ease);
}
.irow:last-child{ border-bottom:1px solid var(--rule); }
.irow .no{ font-family:var(--f-mono); font-size:.75rem; letter-spacing:.18em; color:var(--accent); }
.irow h3{
  font-size:clamp(1.7rem,3.6vw,3.4rem);
  transition:transform .55s var(--ease), color .4s var(--ease);
}
.irow .note{
  font-family:var(--f-mono); font-size:.71rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-45);
  text-align:right;
  max-width:22ch;
}
.irow .gl{
  width:38px; height:38px;
  display:grid; place-items:center;
  border:1px solid var(--rule);
  color:var(--ink-45);
  transition:all .5s var(--ease);
  flex-shrink:0;
}
.irow:hover{ padding-inline:clamp(.4rem,1.4vw,1.5rem); }
.irow:hover h3{ transform:translateX(6px); }
.irow:hover .gl{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); transform:rotate(45deg); }

/* --------------------------------------------------------------- 11 */
/* FILMSTRIP — horizontal contact sheet with sprocket edges          */
.strip-wrap{ position:relative; }
.strip{
  display:flex;
  gap:0;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  -ms-overflow-style:none;
  cursor:grab;
  border-block:1px solid var(--rule);
  background:var(--paper-2);
}
.strip::-webkit-scrollbar{ display:none; }
.strip.dragging{ cursor:grabbing; scroll-snap-type:none; }
.strip.dragging *{ pointer-events:none; }

.cell{
  position:relative;
  flex:0 0 auto;
  width:clamp(280px,31vw,520px);
  scroll-snap-align:center;
  padding:clamp(1rem,1.8vw,1.6rem) clamp(1rem,1.6vw,1.4rem);
  border-right:1px solid var(--rule);
  display:grid; gap:.85rem;
  transition:background-color .5s var(--ease);
}
.cell:hover{ background:var(--shade); }
.cell:first-child{ border-left:1px solid var(--rule); }
.cell .frame{ aspect-ratio:4/5; }
.cell:hover .frame img{ transform:scale(1.05); }
.cell .cell-h{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.cell h3{ font-size:clamp(1.15rem,1.5vw,1.55rem); line-height:1.1; }
.cell .cell-m{
  display:flex; justify-content:space-between; gap:1rem;
  font-family:var(--f-mono); font-size:.69rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-45);
  padding-top:.55rem; border-top:1px solid var(--rule);
}

/* Sprocket holes, top and bottom, like real 35mm */
.sprockets{
  height:18px;
  background:var(--paper-3);
  border-block:1px solid var(--rule);
  position:relative;
}
.sprockets::after{
  content:'';
  position:absolute; inset:0;
  background:var(--hole);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='18'%3E%3Crect x='15' y='4.5' width='28' height='9' rx='3' fill='%23000'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='18'%3E%3Crect x='15' y='4.5' width='28' height='9' rx='3' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-repeat:repeat-x;  mask-repeat:repeat-x;
  -webkit-mask-position:center;  mask-position:center;
  -webkit-mask-size:58px 18px;   mask-size:58px 18px;
}

.strip-nav{ display:flex; align-items:center; gap:.5rem; }
.strip-nav button{
  width:42px; height:42px;
  display:grid; place-items:center;
  border:1px solid var(--rule);
  color:var(--ink-45);
  transition:all .4s var(--ease);
}
.strip-nav button:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.strip-hint{ font-family:var(--f-mono); font-size:.69rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-28); }

/* GRID OF WORK (portfolio pages) — deliberately uneven */
.works{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(1rem,2vw,2.4rem) clamp(1rem,2vw,2.2rem); }
.work{ grid-column-end:span 4; position:relative; transition:opacity .5s var(--ease), transform .5s var(--ease); }
.work.w-wide{ grid-column-end:span 7; }
.work.w-mid { grid-column-end:span 5; }
.work.w-half{ grid-column-end:span 6; }
.work.w-off { grid-column-end:span 5; grid-column-start:2; }
.work.hidden{ display:none; }
.work .frame{ aspect-ratio:4/5; }
.work.w-wide .frame,.work.w-half .frame{ aspect-ratio:3/2; }
.work:hover .frame img{ transform:scale(1.045); }
.work .cap{
  display:flex; align-items:baseline; gap:.9rem;
  margin-top:.85rem; padding-top:.6rem;
  border-top:1px solid var(--rule);
  font-family:var(--f-mono); font-size:.71rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-45);
}
.work .cap b{ font-weight:400; color:var(--accent); }
.work h3{ font-size:clamp(1.3rem,1.9vw,1.95rem); margin-top:.5rem; transition:color .4s; }
.work:hover h3{ color:var(--accent); }

/* Filters */
.filters{ display:flex; flex-wrap:wrap; gap:.4rem; }
.filters a{
  padding:.6rem 1.15rem;
  border:1px solid var(--rule);
  font-family:var(--f-mono); font-size:.71rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-45);
  transition:all .4s var(--ease);
}
.filters a:hover{ color:var(--ink); border-color:var(--ink-45); }
.filters a.on{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

/* MASONRY (album gallery) */
.sheet{ columns:3; column-gap:clamp(.7rem,1.4vw,1.4rem); }
.sheet .sh{
  break-inside:avoid;
  margin-bottom:clamp(.7rem,1.4vw,1.4rem);
  position:relative;
  cursor:pointer;
  overflow:hidden;
}
.sheet .sh img{ width:100%; transition:transform 1.2s var(--ease); }
.sheet .sh:hover img{ transform:scale(1.045); }
.sheet .sh .no{
  position:absolute; left:.65rem; top:.65rem;
  font-family:var(--f-mono); font-size:.65rem; letter-spacing:.16em;
  color:#F4EFE6;
  background:rgba(0,0,0,.45);
  padding:.18rem .45rem;
  opacity:0; transition:opacity .4s;
}
.sheet .sh:hover .no{ opacity:1; }

/* FILM CARDS */
.reel{ position:relative; cursor:pointer; }
.reel .frame{ aspect-ratio:16/10; }
.reel .frame::after{
  content:''; position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.68));
}
.reel:hover .frame img{ transform:scale(1.045); }
.reel .go{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:clamp(58px,6vw,82px); aspect-ratio:1;
  display:grid; place-items:center;
  border:1px solid rgba(244,239,230,.55);
  border-radius:50%;
  color:#F4EFE6; z-index:4;
  transition:all .5s var(--ease);
}
.reel:hover .go{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.reel .reel-m{
  position:absolute; z-index:4;
  left:clamp(1rem,1.8vw,1.6rem); right:clamp(1rem,1.8vw,1.6rem); bottom:clamp(1rem,1.8vw,1.4rem);
  color:#F4EFE6;
}
.reel .reel-m .k{
  font-family:var(--f-mono); font-size:.69rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent);
}
.reel .reel-m h3{ font-size:clamp(1.2rem,1.8vw,1.8rem); margin-top:.35rem; }
.reel .reel-m .d{
  font-family:var(--f-mono); font-size:.67rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(244,239,230,.55); margin-top:.3rem;
}

/* --------------------------------------------------------------- 12 */
/* LEDGER — stats as a ruled table, not tiles                        */
.ledger{ border-top:1px solid var(--rule); }
.led{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:baseline;
  gap:clamp(1rem,3vw,3rem);
  padding-block:clamp(1.1rem,2.2vw,1.9rem);
  border-bottom:1px solid var(--rule);
  transition:background-color .45s var(--ease), padding-inline .45s var(--ease);
}
.led:hover{ background:var(--shade); padding-inline:clamp(.4rem,1.2vw,1.2rem); }
.led .k{ font-family:var(--f-mono); font-size:.71rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); }
.led .l{ font-size:clamp(1.05rem,1.5vw,1.5rem); font-family:var(--f-display); color:var(--ink-70); }
.led .v{
  font-family:var(--f-display);
  font-size:clamp(2.4rem,5.2vw,5rem);
  line-height:.9;
  font-variant-numeric:tabular-nums;
}

/* TEAM */
.person .frame{ aspect-ratio:3/4; }
.person .frame img{ filter:grayscale(1) contrast(1.04); }
.person:hover .frame img{ filter:grayscale(0); transform:scale(1.04); }
.person .frame.blank{ display:grid; place-items:center; background:var(--paper-3); }
.person .frame.blank span{ font-family:var(--f-display); font-size:clamp(3rem,5vw,4.4rem); color:var(--ink-28); }
.person h3{ font-size:1.5rem; margin-top:1rem; }
.person .role{ font-family:var(--f-mono); font-size:.69rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-top:.4rem; }

/* --------------------------------------------------------------- 13 */
/* VOICE — testimonials as a full pull quote                         */
.voice-stage{ position:relative; min-height:300px; }
.voice{
  position:absolute; inset:0;
  display:grid; gap:1.8rem;
  opacity:0; visibility:hidden;
  transform:translateY(16px);
  transition:opacity .7s var(--ease), transform .7s var(--ease), visibility .7s;
}
.voice.on{ opacity:1; visibility:visible; transform:none; position:relative; }
.voice q{
  font-family:var(--f-display);
  font-size:clamp(1.5rem,3.4vw,3.1rem);
  line-height:1.16;
  font-style:italic;
  quotes:'“' '”';
  display:block;
}
.voice .who{
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem;
  padding-top:1.1rem; border-top:1px solid var(--rule);
  font-family:var(--f-mono); font-size:.73rem; letter-spacing:.2em; text-transform:uppercase;
}
.voice .who b{ font-weight:400; }
.voice .who span{ color:var(--ink-45); }
.voice .who .st{ color:var(--accent); letter-spacing:.25em; }
.voice-nav{ display:flex; gap:.4rem; }
.voice-nav button{
  width:30px; height:2px;
  background:var(--rule);
  transition:background-color .4s var(--ease);
}
.voice-nav button.on{ background:var(--accent); }

/* FOLD (FAQ) */
.fold{ border-top:1px solid var(--rule); }
.fold-q{
  width:100%;
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:clamp(1rem,2.4vw,2.4rem);
  padding-block:clamp(1.2rem,2.2vw,1.8rem);
  border-bottom:1px solid var(--rule);
  text-align:left;
  transition:color .35s;
}
.fold-q .n{ font-family:var(--f-mono); font-size:.71rem; letter-spacing:.16em; color:var(--accent); }
.fold-q h3{ font-size:clamp(1.1rem,1.8vw,1.65rem); line-height:1.2; }
.fold-q .pm{ position:relative; width:26px; height:26px; flex-shrink:0; }
.fold-q .pm::before,.fold-q .pm::after{
  content:''; position:absolute; top:50%; left:50%;
  width:13px; height:1px; background:currentColor;
  transform:translate(-50%,-50%);
  transition:transform .45s var(--ease);
}
.fold-q .pm::after{ transform:translate(-50%,-50%) rotate(90deg); }
.fold-q:hover{ color:var(--accent); }
.fold-item.open .fold-q{ color:var(--accent); }
.fold-item.open .fold-q .pm::after{ transform:translate(-50%,-50%) rotate(0); }
.fold-a{ max-height:0; overflow:hidden; transition:max-height .6s var(--ease); border-bottom:1px solid var(--rule); }
.fold-item.open .fold-a{ border-bottom-color:var(--rule); }
.fold-a p{ padding:0 0 clamp(1.2rem,2.2vw,1.8rem) clamp(2.5rem,7vw,7rem); color:var(--ink-70); max-width:74ch; }

/* JOURNAL */
.post{ display:grid; gap:1.1rem; }
.post .frame{ aspect-ratio:3/2; }
.post:hover .frame img{ transform:scale(1.045); }
.post .k{
  display:flex; gap:1rem; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:.69rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent);
}
.post h3{ font-size:clamp(1.35rem,1.9vw,1.85rem); transition:color .35s; }
.post:hover h3{ color:var(--accent); }

/* PROSE */
.prose{ font-size:1.04rem; line-height:1.82; color:var(--ink-70); max-width:70ch; }
.prose h2,.prose h3{
  font-family:var(--f-display); color:var(--ink);
  font-size:clamp(1.5rem,2.4vw,2.2rem); line-height:1.1;
  margin:2.4rem 0 .9rem;
}
.prose p{ margin-bottom:1.15rem; }
.prose ul{ list-style:none; margin-bottom:1.15rem; }
.prose li{ padding-left:1.6rem; position:relative; margin-bottom:.55rem; }
.prose li::before{ content:'—'; position:absolute; left:0; color:var(--accent); }
.prose a{ color:var(--accent); text-decoration:underline; text-underline-offset:4px; }
.prose blockquote{
  border-left:1px solid var(--accent);
  padding-left:1.8rem; margin:2rem 0;
  font-family:var(--f-display); font-style:italic;
  font-size:1.5rem; line-height:1.24; color:var(--ink);
}

/* --------------------------------------------------------------- 14 */
/* FORMS */
.form{ display:grid; gap:1.5rem; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.fld label{
  display:block;
  font-family:var(--f-mono); font-size:.69rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-45); margin-bottom:.6rem;
}
.fld input,.fld select,.fld textarea{
  width:100%;
  background:transparent;
  border:0; border-bottom:1px solid var(--rule);
  padding:.75rem 0;
  font-size:1rem; font-weight:350;
  color:var(--ink);
  border-radius:0;
  transition:border-color .4s var(--ease);
}
.fld textarea{ resize:vertical; min-height:104px; }
.fld input:focus,.fld select:focus,.fld textarea:focus{ outline:none; border-color:var(--accent); }
.fld input::placeholder,.fld textarea::placeholder{ color:var(--ink-28); }
.fld select option{ background:var(--paper); color:var(--ink); }

.note{
  padding:1rem 1.25rem;
  border:1px solid var(--rule);
  border-left:2px solid var(--accent);
  background:var(--shade);
  font-size:.9rem;
}
.note.ok{ border-left-color:#3F8F5F; }
.note.bad{ border-left-color:#B4433A; }

/* CTA BAND */
.band{ position:relative; overflow:hidden; padding-block:clamp(4.5rem,9vw,8rem); color:#F4EFE6; }
.band .plate-bg{ position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.1); }
.band::after{ content:''; position:absolute; inset:0; background:rgba(0,0,0,.7); }
.band .shell{ position:relative; z-index:2; }
.band .stamp{ color:rgba(244,239,230,.6) }
.band .stamp::after,.band .stamp.is-lead::before{ background:rgba(244,239,230,.3) }
.band .body-lg{ color:rgba(244,239,230,.76) }
.band .act-box{ border-color:#F4EFE6; color:#F4EFE6 }
.band .act-box::before{ background:#F4EFE6 }
.band .act-box:hover{ color:#111 }
.band .act-box.is-fill{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink) }
.band .act-box.is-fill::before{ background:#F4EFE6 }
.band .act-box.is-fill:hover{ color:#111; border-color:#F4EFE6 }
.band .act{ color:#F4EFE6 }

/* FOOTER */
.foot{ background:var(--paper-2); border-top:1px solid var(--rule); }
.foot-top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:clamp(1.6rem,3.5vw,3.5rem); padding-block:clamp(3rem,6vw,5rem); }
.foot-mark img{ height:76px; width:auto; }
.foot h4{
  font-family:var(--f-mono); font-size:.69rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--accent); font-weight:400; margin-bottom:1.3rem;
}
.foot li + li{ margin-top:.75rem; }
.foot a{ font-size:.92rem; color:var(--ink-70); transition:color .3s, padding-left .35s var(--ease); }
.foot a:hover{ color:var(--accent); padding-left:5px; }
.sub-form{ display:flex; border-bottom:1px solid var(--rule); }
.sub-form input{ flex:1; background:none; border:0; padding:.75rem 0; font-size:.92rem; color:var(--ink); }
.sub-form input:focus{ outline:none; }
.sub-form button{ font-family:var(--f-mono); font-size:.71rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); }
.socials{ display:flex; gap:.45rem; }
.socials a{
  width:38px; height:38px; display:grid; place-items:center;
  border:1px solid var(--rule); color:var(--ink-45);
  transition:all .4s var(--ease); padding:0;
}
.socials a:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); padding:0; }
.foot-bot{
  border-top:1px solid var(--rule);
  padding-block:1.5rem;
  display:flex; flex-wrap:wrap; gap:.8rem 2rem; align-items:center; justify-content:space-between;
  font-family:var(--f-mono); font-size:.69rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-45);
}

/* FLOATING */
.dock{ position:fixed; right:clamp(.9rem,1.8vw,1.6rem); bottom:clamp(.9rem,1.8vw,1.6rem); z-index:880; display:grid; gap:.55rem; }
.dock a,.dock button{
  width:46px; height:46px; display:grid; place-items:center;
  background:var(--paper); border:1px solid var(--rule); color:var(--ink);
  transition:all .4s var(--ease);
}
.dock a:hover,.dock button:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.dock .wa{ background:#25D366; border-color:#25D366; color:#fff; }
.dock .wa:hover{ background:#1BAE52; border-color:#1BAE52; color:#fff; }
#up{ opacity:0; visibility:hidden; transform:translateY(8px); }
#up.on{ opacity:1; visibility:visible; transform:none; }

/* LIGHTBOX */
.lb{
  position:fixed; inset:0; z-index:9500;
  background:color-mix(in srgb, var(--paper) 96%, transparent);
  backdrop-filter:blur(8px);
  display:grid; place-items:center;
  opacity:0; visibility:hidden;
  transition:opacity .45s var(--ease), visibility .45s;
}
.lb.open{ opacity:1; visibility:visible; }
.lb-stage{ width:min(93vw,1560px); height:min(86vh,960px); display:grid; place-items:center; position:relative; }
.lb-stage img{
  max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  opacity:0; transform:scale(.97);
  transition:opacity .45s var(--ease), transform .55s var(--ease);
}
.lb-stage img.shown{ opacity:1; transform:none; }
.lb-stage iframe{ width:100%; aspect-ratio:16/9; border:0; max-height:100%; }
.lb-x,.lb-p,.lb-n{
  position:absolute;
  width:46px; height:46px; display:grid; place-items:center;
  border:1px solid var(--rule); color:var(--ink);
  transition:all .4s var(--ease); z-index:2;
}
.lb-x{ top:clamp(.8rem,2.6vh,2rem); right:clamp(.8rem,2.6vw,2rem); }
.lb-p{ left:clamp(.5rem,2.6vw,2rem); top:50%; transform:translateY(-50%); }
.lb-n{ right:clamp(.5rem,2.6vw,2rem); top:50%; transform:translateY(-50%); }
.lb-x:hover,.lb-p:hover,.lb-n:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.lb-c{
  position:absolute; bottom:clamp(.8rem,2.4vh,1.6rem); left:50%; transform:translateX(-50%);
  font-family:var(--f-mono); font-size:.71rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-45); text-align:center; width:82%;
}

/* PAGER */
.pager{ display:flex; justify-content:center; gap:.4rem; margin-top:clamp(2.5rem,5vw,4rem); }
.pager a,.pager span{
  min-width:44px; height:44px; display:grid; place-items:center;
  border:1px solid var(--rule);
  font-family:var(--f-mono); font-size:.76rem; color:var(--ink-45);
  transition:all .4s var(--ease);
}
.pager a:hover{ border-color:var(--ink); color:var(--ink); }
.pager .now{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* --------------------------------------------------------------- 15 */
@media (max-width:1200px){
  .foot-top{ grid-template-columns:1fr 1fr; }
  .sheet{ columns:2; }
  .veil-foot{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  :root{ --head-h:64px; }
  .nav{ display:none; }
  .burger{ display:grid; }
}
@media (max-width:1024px){
  .rail{ display:none; }
  .work,.work.w-wide,.work.w-mid,.work.w-half,.work.w-off{ grid-column-end:span 6; grid-column-start:auto; }
  .irow{ grid-template-columns:auto 1fr auto; }
  .irow .note{ display:none; }
  .ghost-no{ display:none; }
}
@media (max-width:760px){
  .bed > *{ grid-column-end:span 12 !important; grid-column-start:auto !important; }
  .form-row{ grid-template-columns:1fr; }
  .work,.work.w-wide,.work.w-mid,.work.w-half,.work.w-off{ grid-column-end:span 12; grid-column-start:auto; }
  .sheet{ columns:1; }
  .foot-top{ grid-template-columns:1fr; }
  .veil-foot{ grid-template-columns:1fr; }
  .hero-deck{ bottom:1.1rem; }
  .count,.hero-arrows{ display:none; }
  .led{ grid-template-columns:auto 1fr; }
  .led .l{ grid-column:1 / -1; }
  .ticker .roll{ display:none; }
  .strip-hint{ display:none; }
}

/* --------------------------------------------------- SPEC TABLE ---- */
/* Ruled key/value rows — used for album facts and contact details.    */
.specs{ border-top:1px solid var(--rule); }
.spec{
  display:grid; grid-template-columns:minmax(90px,.34fr) 1fr;
  gap:1rem clamp(1rem,2vw,2rem);
  align-items:baseline;
  padding-block:clamp(.9rem,1.6vw,1.25rem);
  border-bottom:1px solid var(--rule);
}
.spec .k{
  font-family:var(--f-mono); font-size:.69rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-45);
  display:flex; align-items:center; gap:.5rem;
}
.spec .v{ font-family:var(--f-display); font-size:clamp(1.05rem,1.4vw,1.4rem); line-height:1.3; }
.spec .v a:hover{ color:var(--accent); }
.spec .v small{ display:block; font-family:var(--f-sans); font-size:.88rem; color:var(--ink-45); margin-top:.2rem; }

/* Bordered panel — service sidebar, enquiry form */
.panel{ border:1px solid var(--rule); padding:clamp(1.4rem,3vw,2.6rem); }
.panel.is-tint{ background:var(--paper-2); }

/* Tick list */
.ticks{ display:grid; gap:.75rem; }
.ticks li{ display:flex; gap:.75rem; align-items:flex-start; font-size:.92rem; color:var(--ink-70); }
.ticks li .m{ color:var(--accent); flex-shrink:0; margin-top:3px; }

/* Numbered editorial columns (process, principles) */
.notes{ display:grid; gap:.9rem; }
.notes .n{ font-family:var(--f-mono); font-size:.71rem; letter-spacing:.2em; color:var(--accent); }
.notes h3{ font-size:clamp(1.15rem,1.7vw,1.6rem); line-height:1.15; }

/* Map strip */
.map{ line-height:0; filter:grayscale(1) contrast(.92); border-top:1px solid var(--rule); }
:root[data-theme="dark"] .map{ filter:grayscale(1) invert(.92) contrast(.85); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .map{ filter:grayscale(1) invert(.92) contrast(.85); }
}

/* =====================================================================
   FILM FORMAT
   The page is a frame of 35mm stock: perforated rails, a slate header,
   viewfinder marks, an aperture iris, and a focus-reticle pointer.
   ===================================================================== */

/* ------------------------------------------------ SPROCKET RAILS ---- */
.perf{
  position:fixed; top:0; bottom:0;
  width:var(--rail);
  z-index:960;
  pointer-events:none;
  background:var(--paper-2);
}
.perf.l{ left:0;  border-right:1px solid var(--rule); }
.perf.r{ right:0; border-left:1px solid var(--rule); }
/* Masked so the punch shape stays a true rounded rectangle in both themes */
.perf i{
  position:absolute; inset:0;
  display:block;
  background:var(--hole);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='58'%3E%3Crect x='4.5' y='15' width='11' height='28' rx='3.5' fill='%23000'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='58'%3E%3Crect x='4.5' y='15' width='11' height='28' rx='3.5' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-repeat:repeat-y;  mask-repeat:repeat-y;
  -webkit-mask-position:center;  mask-position:center;
  -webkit-mask-size:20px 58px;   mask-size:20px 58px;
  animation:advanceFilm 2.4s linear infinite;
}
/* The strip creeps, the way stock does through a gate */
@keyframes advanceFilm{ to{ -webkit-mask-position:center 58px; mask-position:center 58px; } }
@media (prefers-reduced-motion:reduce){ .perf i{ animation:none; } }
@media (max-width:760px){
  :root{ --rail:0px; }
  .perf{ display:none; }
}

/* ------------------------------------------------ SLATE HEADER ------ */
/* The ticker doubles as the clapper stick */
.ticker{ border-bottom:1px solid var(--rule); }
.ticker::before{
  content:'';
  position:absolute; inset:0 0 0 auto;
  width:clamp(90px,14vw,240px);
  background-image:repeating-linear-gradient(
    -58deg,
    var(--paper) 0 14px,
    var(--ink) 14px 28px
  );
  opacity:.9;
}
:root[data-theme="dark"] .ticker::before{ opacity:.75; }
.ticker .roll{ position:relative; z-index:2; mix-blend-mode:difference; }
@media (max-width:900px){ .ticker::before{ display:none; } }

/* Slate fields — SCENE / TAKE / ROLL, set like a real clapperboard */
.slate{
  display:flex; align-items:stretch;
  border:1px solid var(--rule);
  height:38px;
}
.slate div{
  display:flex; flex-direction:column; justify-content:center;
  padding:0 .7rem;
  font-family:var(--f-mono);
  line-height:1;
}
.slate div + div{ border-left:1px solid var(--rule); }
.slate .k{ font-size:.59rem; letter-spacing:.2em; color:var(--ink-28); margin-bottom:.18rem; }
.slate .v{ font-size:.78rem; letter-spacing:.1em; color:var(--ink); }
.slate .v.live{ color:var(--accent); display:flex; align-items:center; gap:.35rem; }
.slate .v.live::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--accent);
  animation:live 2s var(--ease) infinite;
}
@media (max-width:1320px){ .slate{ display:none; } }

/* ------------------------------------------------ APERTURE IRIS ----- */
.iris{ width:104px; height:104px; display:block; }
.iris .blade{
  fill:none;
  stroke:var(--accent);
  stroke-width:1.1;
  transform-origin:50% 50%;
  transition:transform 1.1s var(--ease);
}
#boot.done .iris .blade{ transform:rotate(46deg) scale(2.4); opacity:0; }
.iris .ring{ fill:none; stroke:var(--rule); stroke-width:1; }
.iris-spin{ transform-origin:50% 50%; animation:irisTurn 9s linear infinite; }
@keyframes irisTurn{ to{ transform:rotate(360deg); } }

/* ------------------------------------------------ VIEWFINDER -------- */
/* Corner crop brackets — the frame a camera actually shows you */
.vf{ position:relative; }
.vf::before,.vf::after,
.vf > .vf-b::before,.vf > .vf-b::after{
  content:'';
  position:absolute;
  width:20px; height:20px;
  z-index:6;
  pointer-events:none;
  border:1px solid rgba(244,239,230,.72);
  transition:width .5s var(--ease), height .5s var(--ease), opacity .5s;
}
.vf::before{ top:14px; left:14px;  border-right:0; border-bottom:0; }
.vf::after { top:14px; right:14px; border-left:0;  border-bottom:0; }
.vf > .vf-b::before{ bottom:14px; left:14px;  border-right:0; border-top:0; }
.vf > .vf-b::after { bottom:14px; right:14px; border-left:0;  border-top:0; }
.vf:hover::before,.vf:hover::after,
.vf:hover > .vf-b::before,.vf:hover > .vf-b::after{ width:30px; height:30px; }
.vf.is-ink::before,.vf.is-ink::after,
.vf.is-ink > .vf-b::before,.vf.is-ink > .vf-b::after{ border-color:var(--ink-28); }

/* Rule-of-thirds guides, barely there */
.thirds{
  position:absolute; inset:0; z-index:5;
  pointer-events:none;
  opacity:.16;
  background-image:
    linear-gradient(90deg, transparent calc(33.333% - .5px), rgba(244,239,230,.9) calc(33.333% - .5px) calc(33.333% + .5px), transparent calc(33.333% + .5px)),
    linear-gradient(90deg, transparent calc(66.666% - .5px), rgba(244,239,230,.9) calc(66.666% - .5px) calc(66.666% + .5px), transparent calc(66.666% + .5px)),
    linear-gradient(180deg, transparent calc(33.333% - .5px), rgba(244,239,230,.9) calc(33.333% - .5px) calc(33.333% + .5px), transparent calc(33.333% + .5px)),
    linear-gradient(180deg, transparent calc(66.666% - .5px), rgba(244,239,230,.9) calc(66.666% - .5px) calc(66.666% + .5px), transparent calc(66.666% + .5px));
}

/* REC flag + timecode, top-left of a live frame */
.rec{
  position:absolute; z-index:6;
  top:calc(var(--bar-h) + var(--head-h) + clamp(.8rem,1.8vw,1.6rem));
  left:clamp(1rem,2.4vw,2rem);
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--f-mono); font-size:.71rem; letter-spacing:.18em;
  color:rgba(244,239,230,.82);
}
.rec b{ display:flex; align-items:center; gap:.4rem; font-weight:400; color:#F4EFE6; }
.rec b::before{
  content:''; width:7px; height:7px; border-radius:50%;
  background:#E0503F;
  box-shadow:0 0 8px rgba(224,80,63,.9);
  animation:live 1.6s var(--ease) infinite;
}
.rec .tc{ color:rgba(244,239,230,.6); font-variant-numeric:tabular-nums; }

/* Exposure stamp, bottom-right of a frame */
.expo{
  position:absolute; z-index:6;
  right:clamp(1rem,2.4vw,2rem); bottom:clamp(1rem,2.4vw,2rem);
}
.expo.is-top{
  top:calc(var(--bar-h) + var(--head-h) + clamp(.8rem,1.8vw,1.6rem));
  bottom:auto;
}
.expo.is-ink{ color:var(--ink-28); }
.expo{
  font-family:var(--f-mono); font-size:.67rem; letter-spacing:.16em;
  color:rgba(244,239,230,.55);
}

/* ------------------------------------------------ FOCUS RETICLE ----- */
.cur{
  width:26px; height:26px; margin:-13px 0 0 -13px;
  background:none; border-radius:0;
}
.cur::before,.cur::after{
  content:'';
  position:absolute; top:50%; left:50%;
  background:var(--accent);
  transition:width .3s var(--ease), height .3s var(--ease), opacity .3s;
}
.cur::before{ width:11px; height:1px; transform:translate(-50%,-50%); }
.cur::after { width:1px; height:11px; transform:translate(-50%,-50%); }
.cur .box{
  position:absolute; inset:0;
  border:1px solid var(--accent);
  opacity:0;
  transition:inset .35s var(--ease), opacity .3s var(--ease), border-color .3s;
  clip-path:polygon(0 0,32% 0,32% 1px,1px 1px,1px 32%,0 32%,
                    0 68%,1px 68%,1px calc(100% - 1px),32% calc(100% - 1px),32% 100%,0 100%,
                    100% 100%,68% 100%,68% calc(100% - 1px),calc(100% - 1px) calc(100% - 1px),calc(100% - 1px) 68%,100% 68%,
                    100% 32%,calc(100% - 1px) 32%,calc(100% - 1px) 1px,68% 1px,68% 0,100% 0);
}
.cur.wide{ width:26px; height:26px; margin:-13px 0 0 -13px; background:none; }
.cur.wide .box{ inset:-22px; opacity:1; }
.cur.wide::before,.cur.wide::after{ opacity:.5; }
.cur .lab{
  position:absolute; left:50%; top:calc(100% + 26px);
  transform:translateX(-50%);
  display:block; inset:auto;
  white-space:nowrap;
  font-family:var(--f-mono); font-size:.63rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent);
  opacity:0; transition:opacity .25s;
}
.cur.wide .lab{ opacity:1; }

/* ------------------------------------------------ APERTURE RULE ----- */
/* An f-stop scale used as a section divider */
.fstop{
  display:flex; align-items:center; gap:0;
  border-top:1px solid var(--rule);
  padding-top:.7rem;
  font-family:var(--f-mono); font-size:.65rem; letter-spacing:.16em;
  color:var(--ink-28);
  overflow:hidden;
}
.fstop span{ flex:1; position:relative; white-space:nowrap; }
.fstop span::before{
  content:''; position:absolute; left:0; top:-.7rem;
  width:1px; height:7px; background:var(--rule);
}
.fstop span:nth-child(odd)::before{ height:11px; background:var(--ink-28); }

/* ------------------------------------------------ FILM REEL BUTTON -- */
#up{ position:relative; }
#up .reel-ico{
  position:absolute; inset:9px;
  border:1px solid currentColor;
  border-radius:50%;
  opacity:.55;
}
#up .reel-ico::before{
  content:''; position:absolute; inset:4px;
  border:1px solid currentColor; border-radius:50%;
}
#up:hover .reel-ico{ animation:irisTurn 3.2s linear infinite; }

/* ------------------------------------------------ GATE EDGES -------- */
/* Faint darkening at the frame edges, like light falloff on a gate */
.gate{
  position:fixed; inset:0;
  z-index:9994;
  pointer-events:none;
  box-shadow:inset 0 0 clamp(60px,10vw,160px) rgba(0,0,0,.20);
}
:root[data-theme="dark"] .gate{ box-shadow:inset 0 0 clamp(70px,12vw,190px) rgba(0,0,0,.55); }

@media (max-width:1024px){
  .rec{ font-size:.65rem; }
  .thirds{ display:none; }
}

/* =====================================================================
   THE LENS
   Everything below exists to make the site feel like glass:
   focus that racks, an aperture you can stop down, bokeh, flare.
   ===================================================================== */

/* ------------------------------------------------ RACK FOCUS -------- */
/* Frames arrive soft and pull sharp — the way a lens finds its subject. */
[data-wipe] img,
[data-wipe] .plate-bg{
  filter:blur(9px);
  transition:clip-path 1.2s var(--ease-io),
             transform 1.6s var(--ease),
             filter 1.15s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-wipe].in img,
[data-wipe].in .plate-bg{ filter:blur(0); }

/* A focus-confirm tick that flashes once as the frame locks */
[data-wipe]{ position:relative; }
[data-wipe]::after{
  content:'';
  position:absolute; z-index:7;
  right:12px; bottom:12px;
  width:7px; height:7px; border-radius:50%;
  background:var(--accent);
  opacity:0;
  pointer-events:none;
}
[data-wipe].in::after{ animation:afLock 1.5s var(--ease) forwards; animation-delay:calc(var(--d,0ms) + .75s); }
@keyframes afLock{
  0%{ opacity:0; transform:scale(.4); }
  22%{ opacity:1; transform:scale(1); box-shadow:0 0 12px var(--accent); }
  70%{ opacity:1; }
  100%{ opacity:0; }
}

/* ------------------------------------------------ FOCUS LOCK -------- */
/* Half-press feel: hovering a frame acquires focus on it. */
.vf .af{
  position:absolute; z-index:7;
  left:14px; bottom:14px;
  display:flex; align-items:center; gap:.4rem;
  font-family:var(--f-mono); font-size:.63rem; letter-spacing:.18em;
  color:var(--accent);
  opacity:0; transform:translateY(5px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
  pointer-events:none;
}
.vf .af::before{
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 7px var(--accent);
}
.vf:hover .af{ opacity:1; transform:none; }
/* Brackets tighten on the subject rather than just growing */
.vf:hover::before,.vf:hover::after,
.vf:hover > .vf-b::before,.vf:hover > .vf-b::after{
  width:34px; height:34px;
  border-color:var(--accent);
}

/* ------------------------------------------------ APERTURE SWITCH --- */
/* The theme control is a real aperture: wide open for light,
   stopped down for dark. */
.tsw{ height:38px; }
.tsw button{
  width:auto; min-width:56px;
  padding:0 .55rem;
  display:flex; align-items:center; justify-content:center; gap:.4rem;
  font-family:var(--f-mono); font-size:.65rem; letter-spacing:.1em;
}
.tsw .apr{ width:17px; height:17px; flex-shrink:0; }
.tsw .apr circle{ fill:none; stroke:currentColor; stroke-width:1; }
.tsw .apr path{
  fill:currentColor;
  transform-box:view-box;
  transform-origin:12px 12px;
  transition:transform .55s var(--ease), opacity .45s var(--ease);
}
/* f/1.4 — blades swung out of the way */
.tsw .apr.open path{ transform:scale(.28); opacity:.25; }
.tsw button[aria-pressed="true"] .apr.open path{ transform:scale(.2); opacity:.16; }
/* f/16 — blades closed to a small hole */
.tsw .apr.shut path{ transform:scale(1); opacity:.85; }

/* ------------------------------------------------ BOKEH ------------- */
/* Out-of-focus highlights drifting behind the deepest sections. */
.bokeh{
  position:absolute; inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
.bokeh i{
  position:absolute;
  border-radius:50%;
  border:1px solid var(--accent);
  background:radial-gradient(circle at 40% 38%, rgba(233,162,59,.20), rgba(233,162,59,.05) 62%, transparent 70%);
  filter:blur(1.5px);
  opacity:.24;
  animation:drift 26s ease-in-out infinite alternate;
}
:root[data-theme="light"] .bokeh i{ opacity:.16; }
.bokeh i:nth-child(1){ width:190px; height:190px; left:6%;  top:14%; animation-duration:24s; }
.bokeh i:nth-child(2){ width:110px; height:110px; left:78%; top:22%; animation-duration:31s; animation-delay:-6s; }
.bokeh i:nth-child(3){ width:250px; height:250px; left:62%; top:58%; animation-duration:38s; animation-delay:-14s; opacity:.14; }
.bokeh i:nth-child(4){ width:74px;  height:74px;  left:26%; top:70%; animation-duration:21s; animation-delay:-9s; }
.bokeh i:nth-child(5){ width:140px; height:140px; left:44%; top:8%;  animation-duration:34s; animation-delay:-3s; opacity:.12; }
@keyframes drift{
  from{ transform:translate3d(0,0,0) scale(1); }
  to  { transform:translate3d(26px,-38px,0) scale(1.12); }
}
@media (prefers-reduced-motion:reduce){ .bokeh i{ animation:none; } }
.bay.is-deep > .shell{ position:relative; z-index:1; }

/* ------------------------------------------------ LENS DIAGRAM ------ */
/* A real optical cross-section — elements, groups, and the light path. */
.optic{ width:100%; height:auto; overflow:visible; }
.optic .el{ fill:none; stroke:var(--ink-28); stroke-width:1.1; }
.optic .el.hi{ stroke:var(--accent); }
.optic .ray{
  fill:none; stroke:var(--accent); stroke-width:.8;
  stroke-dasharray:3 4;
  opacity:.55;
  animation:rayRun 3.4s linear infinite;
}
@keyframes rayRun{ to{ stroke-dashoffset:-56; } }
.optic .axis{ stroke:var(--rule); stroke-width:1; stroke-dasharray:2 5; }
.optic .lab{
  fill:var(--ink-28);
  font-family:var(--f-mono); font-size:8.4px; letter-spacing:.14em;
  text-transform:uppercase;
}
.optic .lab.hi{ fill:var(--accent); }
@media (prefers-reduced-motion:reduce){ .optic .ray{ animation:none; } }

/* ------------------------------------------------ FOCUS SCALE ------- */
/* The scroll meter reads like a focus-distance ring. */
.meter{ background:none; transform:none; height:auto; }
.meter .bar{
  height:2px; background:var(--accent);
  transform:scaleX(0); transform-origin:left;
}
.meter .ticks{
  position:absolute; inset:0 0 auto 0;
  height:2px;
  display:flex; justify-content:space-between;
  padding-inline:0;
  pointer-events:none;
}
.meter .ticks i{ width:1px; height:5px; background:var(--ink-28); }

/* ------------------------------------------------ FLARE ------------- */
/* An anamorphic streak across the mark on hover. */
.mark{ position:relative; overflow:visible; }
.mark::after{
  content:'';
  position:absolute; top:50%; left:50%;
  width:190px; height:2px;
  transform:translate(-50%,-50%) scaleX(0);
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  filter:blur(2px);
  opacity:0;
  transition:transform .6s var(--ease), opacity .6s var(--ease);
  pointer-events:none;
}
.mark:hover::after{ transform:translate(-50%,-50%) scaleX(1); opacity:.75; }

/* ------------------------------------------------ THE BAG ----------- */
/* Kit list — the thing every photographer reads first. */
.bag{ border-top:1px solid var(--rule); }
.bag-row{
  display:grid;
  grid-template-columns:minmax(88px,.2fr) 1fr auto;
  gap:1rem clamp(1rem,2.4vw,2.4rem);
  align-items:baseline;
  padding-block:clamp(.8rem,1.5vw,1.15rem);
  border-bottom:1px solid var(--rule);
  transition:background-color .4s var(--ease), padding-inline .4s var(--ease);
}
.bag-row:hover{ background:var(--shade); padding-inline:.7rem; }
.bag-row .t{ font-family:var(--f-mono); font-size:.67rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); }
.bag-row .n{ font-family:var(--f-display); font-size:clamp(1rem,1.35vw,1.35rem); }
.bag-row .q{ font-family:var(--f-mono); font-size:.69rem; letter-spacing:.14em; color:var(--ink-28); }
@media (max-width:640px){
  .bag-row{ grid-template-columns:1fr auto; }
  .bag-row .t{ grid-column:1 / -1; }
}

/* =====================================================================
   THE FRONT ELEMENT
   A lens you can actually look into: barrel, knurl, engraving,
   coated glass, six blades that stop down as you scroll past.
   ===================================================================== */
.optics{ position:relative; }
.lens{
  width:clamp(230px, 30vw, 400px);
  aspect-ratio:1;
  margin-inline:auto;
  display:block;
  overflow:visible;
}
.lens .barrel-o{ fill:var(--paper-3); stroke:var(--rule); stroke-width:1; }
.lens .barrel-i{ fill:var(--paper-2); stroke:var(--rule); stroke-width:1; }
.lens .knurl{ stroke:var(--ink-28); stroke-width:1.6; opacity:.5; }
.lens .engrave{
  fill:var(--ink-45);
  font-family:var(--f-mono); font-size:6.4px; letter-spacing:.3em;
  text-transform:uppercase;
}
.lens .engrave.hi{ fill:var(--accent); }
/* Coated glass — the greenish-amber bloom of a multicoated element */
.lens .glass{ fill:url(#glassGrad); }
.lens .coat{ fill:url(#coatGrad); mix-blend-mode:screen; opacity:.55; }
:root[data-theme="light"] .lens .coat{ mix-blend-mode:multiply; opacity:.30; }
.lens .rim{ fill:none; stroke:var(--accent); stroke-width:.8; opacity:.5; }

/* The blades are a masked disc: the hexagonal hole is what scales.
   --stop 0 = wide open, 1 = stopped right down. */
.lens .bladefill{ fill:var(--paper-3); }
.lens .hole{
  transform-box:view-box;
  transform-origin:100px 100px;
  transform:scale(calc(1 - var(--stop, .18) * .80));
  transition:transform 1.15s var(--ease);
}
.lens .bladeline{
  stroke:var(--ink-28); stroke-width:.7; fill:none;
  transform-box:view-box;
  transform-origin:100px 100px;
  transform:scale(calc(1 - var(--stop, .18) * .80));
  transition:transform 1.15s var(--ease);
}
.lens:hover .hole,
.lens:hover .bladeline{ transform:scale(1); }

/* Specular highlights — the two catch-lights every lens photo has */
.lens .spec{ fill:#FFFFFF; opacity:.30; }
:root[data-theme="light"] .lens .spec{ opacity:.55; }
.lens .spec.b{ opacity:.14; }

.lens-read{
  display:flex; justify-content:center; gap:1.4rem; flex-wrap:wrap;
  margin-top:1.6rem;
  font-family:var(--f-mono); font-size:.69rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-45);
}
.lens-read b{ font-weight:400; color:var(--accent); }

/* =====================================================================
   FLASH
   A strobe fires at the moments that are actually exposures.
   ===================================================================== */
.flash{
  position:fixed; inset:0;
  z-index:9993;
  pointer-events:none;
  background:#FFFFFF;
  opacity:0;
  mix-blend-mode:screen;
}
:root[data-theme="light"] .flash{ mix-blend-mode:normal; }
.flash.fire{ animation:strobe .34s ease-out forwards; }
.flash.fire.soft{ animation:strobeSoft .5s ease-out forwards; }
@keyframes strobe{
  0%{ opacity:0; }
  7%{ opacity:.92; }
  16%{ opacity:.28; }
  26%{ opacity:.62; }   /* the second pop of a TTL pre-flash */
  100%{ opacity:0; }
}
@keyframes strobeSoft{
  0%{ opacity:0; }
  9%{ opacity:.34; }
  100%{ opacity:0; }
}
@media (prefers-reduced-motion:reduce){ .flash{ display:none; } }

/* A hot-shoe pilot lamp that charges, then sits ready */
.pilot{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--f-mono); font-size:.65rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-45);
}
.pilot::before{
  content:'';
  width:7px; height:7px; border-radius:50%;
  background:var(--accent);
  animation:charge 3.4s var(--ease) infinite;
}
@keyframes charge{
  0%,58%{ opacity:.2; box-shadow:none; }
  64%{ opacity:1; box-shadow:0 0 10px var(--accent); }
  100%{ opacity:.2; box-shadow:none; }
}

/* Session-once boot */
html.booted #boot{ display:none; }

/* ------------------------------------------------ SHUTTER SOUND ---- */
.mute{
  width:38px; height:38px;
  display:grid; place-items:center;
  border:1px solid var(--rule);
  color:var(--ink-45);
  flex-shrink:0;
  transition:color .35s var(--ease), border-color .35s var(--ease);
}
.mute:hover{ color:var(--ink); border-color:var(--ink-28); }
.mute .off{ display:none; }
.mute[aria-pressed="true"]{ color:var(--ink-28); }
.mute[aria-pressed="true"] .on{ display:none; }
.mute[aria-pressed="true"] .off{ display:grid; }
@media (max-width:520px){ .head-end .mute{ display:none; } }
.veil-tools .mute{ display:grid !important; }

/* =====================================================================
   PHOTO GALLERY — an even wall of frames, nothing between them
   ===================================================================== */
.wall{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(.5rem,1vw,1rem);
}
.wall .tile{
  position:relative;
  overflow:hidden;
  aspect-ratio:4/3;
  background:var(--paper-3);
  cursor:pointer;
}
.wall .tile img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1.1s var(--ease), filter .5s var(--ease);
}
.wall .tile::after{
  content:'';
  position:absolute; inset:0;
  background:rgba(0,0,0,.24);
  opacity:0;
  transition:opacity .45s var(--ease);
}
.wall .tile:hover img{ transform:scale(1.055); }
.wall .tile:hover::after{ opacity:1; }
.wall .tile .no{
  position:absolute; left:.7rem; top:.7rem; z-index:2;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.16em;
  color:#F4EFE6;
  opacity:0; transform:translateY(-4px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.wall .tile .zoom{
  position:absolute; right:.7rem; bottom:.7rem; z-index:2;
  width:32px; height:32px;
  display:grid; place-items:center;
  border:1px solid rgba(244,239,230,.6);
  color:#F4EFE6;
  opacity:0; transform:scale(.85);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.wall .tile:hover .no{ opacity:1; transform:none; }
.wall .tile:hover .zoom{ opacity:1; transform:none; }
@media (max-width:900px){ .wall{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .wall{ grid-template-columns:1fr; } }

/* =====================================================================
   THE FLIP BOOK — price lists that turn like a real book
   ===================================================================== */
.shelf{ display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(.9rem,2vw,2rem); }
@media (max-width:1100px){ .shelf{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){  .shelf{ grid-template-columns:repeat(2,1fr); } }

.vol{ position:relative; cursor:pointer; display:grid; gap:.9rem; }
.vol .board{
  position:relative;
  aspect-ratio:.62;
  overflow:hidden;
  background:var(--paper-3);
  box-shadow:0 18px 44px rgba(0,0,0,.24);
  transition:transform .6s var(--ease), box-shadow .6s var(--ease);
}
.vol .board img{ width:100%; height:100%; object-fit:cover; }
/* The spine — the giveaway that this is a book and not a card */
.vol .board::before{
  content:'';
  position:absolute; left:0; top:0; bottom:0;
  width:11px; z-index:2;
  background:linear-gradient(90deg, rgba(0,0,0,.42), rgba(0,0,0,.10) 62%, rgba(255,255,255,.16));
}
.vol .board::after{
  content:'';
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.5));
  opacity:0; transition:opacity .5s var(--ease);
}
.vol:hover .board{ transform:translateY(-7px) rotate(-.6deg); box-shadow:0 26px 60px rgba(0,0,0,.34); }
.vol:hover .board::after{ opacity:1; }
.vol .open-cue{
  position:absolute; z-index:3;
  left:50%; bottom:1rem; transform:translate(-50%,10px);
  font-family:var(--f-mono); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:#F4EFE6;
  opacity:0; transition:all .45s var(--ease);
}
.vol:hover .open-cue{ opacity:1; transform:translate(-50%,0); }
.vol h3{ font-size:clamp(1.05rem,1.35vw,1.3rem); line-height:1.15; }
.vol .pages{ font-family:var(--f-mono); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-45); }

/* ---- the reader ---- */
.reader{
  position:fixed; inset:0; z-index:9600;
  background:color-mix(in srgb, var(--paper) 97%, transparent);
  backdrop-filter:blur(10px);
  display:grid; grid-template-rows:auto 1fr auto;
  opacity:0; visibility:hidden;
  transition:opacity .45s var(--ease), visibility .45s;
}
.reader.open{ opacity:1; visibility:visible; }
.reader-bar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem clamp(1rem,3vw,2.2rem);
  border-bottom:1px solid var(--rule);
}
.reader-bar .ttl{ display:grid; gap:.25rem; }
.reader-bar .ttl b{ font-family:var(--f-display); font-weight:400; font-size:1.25rem; line-height:1; }
.reader-bar .ttl span{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-45); }
.reader-bar .acts{ display:flex; gap:.5rem; align-items:center; }

.book{
  display:grid; place-items:center;
  padding:clamp(1rem,3vh,2rem) clamp(1rem,3vw,2rem);
  perspective:2600px;
  overflow:hidden;
}
.book-stage{
  position:relative;
  height:min(72vh, 900px);
  aspect-ratio:var(--leaf-ratio, .56);
  transform-style:preserve-3d;
}
.leaf{
  position:absolute; inset:0;
  transform-origin:left center;
  transform-style:preserve-3d;
  transition:transform 1s var(--ease-io);
  will-change:transform;
}
.leaf.turned{ transform:rotateY(-179deg); }
.leaf .face{
  position:absolute; inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  overflow:hidden;
  background:var(--paper-2);
  box-shadow:0 12px 40px rgba(0,0,0,.28);
}
.leaf .face img{ width:100%; height:100%; object-fit:contain; background:var(--paper-2); }
/* The gutter shadow that makes a spread read as bound paper */
.leaf .face.front::before{
  content:'';
  position:absolute; left:0; top:0; bottom:0; width:34px; z-index:2;
  background:linear-gradient(90deg, rgba(0,0,0,.26), rgba(0,0,0,0));
  pointer-events:none;
}
.leaf .face.back{
  transform:rotateY(180deg);
  background:var(--paper-3);
}
.leaf .face.back::after{
  content:'';
  position:absolute; right:0; top:0; bottom:0; width:34px;
  background:linear-gradient(270deg, rgba(0,0,0,.22), rgba(0,0,0,0));
}
.leaf .face.back img{ opacity:.97; }

.reader-foot{
  display:flex; align-items:center; justify-content:center; gap:1rem;
  padding:1rem clamp(1rem,3vw,2.2rem);
  border-top:1px solid var(--rule);
}
.reader-foot button{
  width:44px; height:44px; display:grid; place-items:center;
  border:1px solid var(--rule); color:var(--ink-45);
  transition:all .35s var(--ease);
}
.reader-foot button:hover:not(:disabled){ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.reader-foot button:disabled{ opacity:.3; cursor:default; }
.reader-foot .cnt{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.2em;
  color:var(--ink-45); min-width:96px; text-align:center;
  font-variant-numeric:tabular-nums;
}
.reader-foot .cnt b{ color:var(--ink); font-weight:400; }
@media (max-width:700px){
  .book-stage{ height:min(62vh,640px); }
  .reader-bar .ttl b{ font-size:1.05rem; }
}