/* ==========================================================================
   be stories. — production stylesheet
   Ink / Bone / Amber. Type does the work. Nothing moves without reason.
   ========================================================================== */

:root{
  /* colour */
  /* Palette is the manual's, not the brief's. Where the two disagreed the
     production identity wins: Ink #15130F, Bone #EFEAE0, Point #A0641F,
     lightened to #BE8038 on dark grounds — the only permitted variation.
     #0A0908 is the page ground the manual permits behind a reversed mark. */
  --ink:#15130F;
  --ink-raise:#1B1915;
  --ink-deep:#0A0908;
  --bone:#EFEAE0;
  --paper:#E5DFD3;
  --amber:#A0641F;
  --amber-rev:#BE8038;
  --smoke:#8C887F;

  --on-ink:#EFEAE0;
  --on-ink-2:rgba(239,234,224,.64);
  --on-ink-3:rgba(239,234,224,.40);
  --on-bone:#15130F;
  --on-bone-2:rgba(21,19,15,.64);
  --on-bone-3:rgba(21,19,15,.36);
  --hair-ink:rgba(239,234,224,.14);
  --hair-bone:rgba(21,19,15,.14);

  /* type */
  --display:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --text:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --meta:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* measure */
  --gut:clamp(20px,4.4vw,64px);
  --max:1440px;
  --rail:clamp(0px,10vw,168px);

  /* motion */
  --ease:cubic-bezier(.2,0,.1,1);
  --slow:900ms;
  --mid:520ms;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ink);color:var(--on-ink);
  font-family:var(--text);font-size:16.5px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--amber);color:var(--bone)}

/* --- film grain, fixed, barely there ----------------------------------- */
.grain{
  position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
}
@media (prefers-reduced-motion:reduce){.grain{opacity:.03}}

/* --- layout ------------------------------------------------------------- */
.shell{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.band{padding-block:clamp(72px,13vh,168px)}
.band--tight{padding-block:clamp(56px,8vh,104px)}
.band.paper{background:var(--paper);color:var(--on-bone)}
.band.bone{background:var(--bone);color:var(--on-bone)}
.band.raise{background:var(--ink-raise)}
.band.deep{background:var(--ink-deep)}
.rule{height:1px;background:var(--hair-ink);border:0;margin:0}
.paper .rule,.bone .rule{background:var(--hair-bone)}

.cols{display:grid;grid-template-columns:1fr;gap:clamp(24px,4vw,64px)}
@media(min-width:900px){
  .cols--rail{grid-template-columns:var(--rail) minmax(0,1fr)}
  .cols--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cols--split{grid-template-columns:minmax(0,.42fr) minmax(0,.58fr)}
}

/* --- type --------------------------------------------------------------- */
.meta{
  font-family:var(--meta);font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--on-ink-3);font-weight:400;
}
.paper .meta,.bone .meta{color:var(--on-bone-3)}
.meta--amber{color:var(--amber-rev)}
.paper .meta--amber,.bone .meta--amber{color:var(--amber)}

.d1{font-family:var(--display);font-weight:700;font-size:clamp(36px,7.4vw,104px);
    line-height:.97;letter-spacing:-.037em;margin:0}
.d2{font-family:var(--display);font-weight:700;font-size:clamp(29px,4.9vw,66px);
    line-height:1.02;letter-spacing:-.032em;margin:0}
.d3{font-family:var(--display);font-weight:600;font-size:clamp(23px,3vw,40px);
    line-height:1.1;letter-spacing:-.024em;margin:0}
.lede{font-size:clamp(17.5px,1.85vw,23px);line-height:1.46;letter-spacing:-.012em;
      color:var(--on-ink-2);font-weight:400;margin:0}
.paper .lede,.bone .lede{color:var(--on-bone-2)}
.body{max-width:60ch;color:var(--on-ink-2)}
.paper .body,.bone .body{color:var(--on-bone-2)}
.body p{margin:0 0 1.05em}
.body p:last-child{margin-bottom:0}
.tight{max-width:22ch}
.measure{max-width:34ch}

/* --- links -------------------------------------------------------------- */
.link{
  display:inline-flex;align-items:baseline;gap:.55em;position:relative;
  font-size:15px;letter-spacing:-.005em;padding-block:6px;
}
.link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;opacity:.28;transform-origin:left;
  transition:opacity var(--mid) var(--ease),background-color var(--mid) var(--ease);
}
.link:hover::after,.link:focus-visible::after{opacity:1;background:var(--amber-rev)}
.paper .link:hover::after,.bone .link:hover::after{background:var(--amber)}
.link .arw{font-family:var(--meta);font-size:12px;opacity:.5;
  transition:transform var(--mid) var(--ease),opacity var(--mid) var(--ease)}
.link:hover .arw{transform:translateX(4px);opacity:1;color:var(--amber-rev)}
.paper .link:hover .arw,.bone .link:hover .arw{color:var(--amber)}
.links{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,40px)}
:focus-visible{outline:1px solid var(--amber-rev);outline-offset:4px}

/* --- masthead ----------------------------------------------------------- */
.masthead{
  position:fixed;top:0;left:0;right:0;z-index:20;
  transition:background-color var(--slow) var(--ease),border-color var(--slow) var(--ease);
  border-bottom:1px solid transparent;
}
.masthead.settled{background:rgba(21,19,15,.86);backdrop-filter:blur(14px);
  border-bottom-color:var(--hair-ink)}
.masthead__in{max-width:var(--max);margin:0 auto;padding:0 var(--gut);
  height:74px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;height:100%}
.brand svg{height:17px;width:auto;overflow:visible}
/* Clear space, per the manual: x-height of the mark = 0.68 x its height.
   Enforced in CSS so no layout change can encroach on it. */
.masthead .brand{padding-right:calc(17px * .68);min-height:calc(17px * 2.36)}
.foot .brand{padding-block:calc(22px * .68)}
.nav{display:none;gap:clamp(18px,2.4vw,34px);align-items:center}
@media(min-width:900px){.nav{display:flex}}
.nav a{font-size:13.5px;color:var(--on-ink-2);letter-spacing:-.004em;position:relative;padding-block:4px;
  transition:color var(--mid) var(--ease)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--on-ink)}
.nav a[aria-current="page"]::before{content:"";position:absolute;left:-11px;top:calc(50% - 1.5px);
  width:3px;height:3px;border-radius:50%;background:var(--amber-rev)}
.nav .cta{color:var(--on-ink)}
.nav .cta::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--amber-rev);
  transform:scaleX(1);transform-origin:left;transition:transform var(--mid) var(--ease)}
.burger{display:flex;align-items:center;gap:9px;font-family:var(--meta);font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--on-ink-2)}
@media(min-width:900px){.burger{display:none}}
.burger i{display:block;width:19px;height:1px;background:currentColor;position:relative}
.burger i::after{content:"";position:absolute;left:0;top:5px;width:19px;height:1px;background:currentColor}

.drawer{position:fixed;inset:0;z-index:19;background:var(--ink-deep);
  transform:translateY(-100%);transition:transform 620ms var(--ease);
  display:flex;flex-direction:column;justify-content:space-between;padding:96px var(--gut) 40px}
.drawer[data-open="true"]{transform:translateY(0)}
.drawer a{display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(28px,7vw,44px);letter-spacing:-.03em;line-height:1.28;color:var(--on-ink)}
.drawer .foot{color:var(--on-ink-3)}

/* --- hero --------------------------------------------------------------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;padding-top:120px;overflow:hidden}
.hero__field{position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(120% 90% at 74% 18%,rgba(160,100,31,.11) 0%,transparent 58%),
    radial-gradient(140% 120% at 12% 100%,rgba(239,234,224,.07) 0%,transparent 62%),
    linear-gradient(180deg,#191713 0%,#0F0E0C 62%,#0A0908 100%);
}
.hero__field::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(10,9,8,.74) 100%)}
.hero__in{position:relative;z-index:1;width:100%;max-width:var(--max);margin:0 auto;
  padding:0 var(--gut) clamp(40px,7vh,84px)}
.hero .d1{max-width:15ch}
.hero__lede{margin-top:clamp(22px,3vh,34px);max-width:48ch}
.hero__acts{margin-top:clamp(28px,4vh,44px)}
.hero__meta{margin-top:clamp(40px,7vh,72px);display:flex;justify-content:space-between;
  align-items:flex-end;gap:20px;flex-wrap:wrap;padding-top:18px;border-top:1px solid var(--hair-ink)}
.scroll{display:none}
@media(min-width:900px){
  .scroll{display:flex;align-items:center;gap:12px}
  .scroll span{display:block;width:56px;height:1px;background:var(--on-ink-3);
    transform-origin:left;animation:draw 3.4s var(--ease) infinite}
}
@keyframes draw{0%{transform:scaleX(0)}45%{transform:scaleX(1)}55%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.scroll span{animation:none;transform:scaleX(1)}}

/* --- reveal ------------------------------------------------------------- */
.rv{opacity:0;transform:translateY(14px);
  transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* --- statement pair ----------------------------------------------------- */
.stmt{display:flex;flex-direction:column;gap:.14em}
.stmt .b{color:var(--on-ink-3)}
.paper .stmt .b,.bone .stmt .b{color:var(--on-bone-3)}

/* --- work / exhibition -------------------------------------------------- */
.exhibit{display:block;border-top:1px solid var(--hair-ink);padding-block:clamp(40px,7vh,86px)}
.paper .exhibit,.bone .exhibit{border-top-color:var(--hair-bone)}
.exhibit__head{display:flex;gap:clamp(16px,3vw,40px);align-items:baseline;flex-wrap:wrap}
.exhibit__no{font-family:var(--meta);font-size:11px;letter-spacing:.16em;color:var(--amber-rev)}
.paper .exhibit__no,.bone .exhibit__no{color:var(--amber)}
.exhibit .d2{margin-top:clamp(18px,3vh,32px);max-width:19ch}
.plate{position:relative;margin-top:clamp(26px,4vh,48px);aspect-ratio:16/9;overflow:hidden;
  background:linear-gradient(126deg,#1B1A16 0%,#100F0D 46%,#181713 100%)}
.bone .plate,.paper .plate{background:linear-gradient(126deg,#DCD5C7 0%,#EDE7DC 48%,#D6CEBE 100%)}
.plate--tall{aspect-ratio:4/5}
.plate--wide{aspect-ratio:21/9}
.plate img{width:100%;height:100%;object-fit:cover}
.plate__note{position:absolute;left:16px;bottom:14px;z-index:2}
.plate::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(239,234,224,.07)}
.bone .plate::after,.paper .plate::after{box-shadow:inset 0 0 0 1px rgba(21,19,15,.08)}
a.exhibit .plate img,a.exhibit .plate{transition:transform 1100ms var(--ease)}
a.exhibit:hover .plate img{transform:scale(1.022)}

/* --- index list (capabilities, journal, method) ------------------------- */
.index{border-top:1px solid var(--hair-ink)}
.paper .index,.bone .index{border-top-color:var(--hair-bone)}
.index__row{display:grid;grid-template-columns:1fr;gap:8px;
  padding-block:clamp(22px,3.4vh,34px);border-bottom:1px solid var(--hair-ink);
  transition:background-color var(--mid) var(--ease)}
.paper .index__row,.bone .index__row{border-bottom-color:var(--hair-bone)}
@media(min-width:820px){
  .index__row{grid-template-columns:64px minmax(0,.36fr) minmax(0,1fr);
    gap:clamp(20px,3vw,48px);align-items:baseline}
}
a.index__row:hover{background:rgba(239,234,224,.028)}
.paper a.index__row:hover,.bone a.index__row:hover{background:rgba(21,19,15,.028)}
.index__row h3{font-family:var(--display);font-weight:600;font-size:clamp(19px,2vw,25px);
  letter-spacing:-.02em;line-height:1.2;margin:0}
.index__row p{margin:0;color:var(--on-ink-2);font-size:15.5px;max-width:48ch}
.paper .index__row p,.bone .index__row p{color:var(--on-bone-2)}

/* --- two-column ledger (partnership) ------------------------------------ */
.ledger{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,72px)}
@media(min-width:820px){.ledger{grid-template-columns:1fr 1fr}}
.ledger ul{list-style:none;margin:14px 0 0;padding:0}
.ledger li{padding-block:11px;border-bottom:1px solid var(--hair-ink);font-size:16.5px}
.paper .ledger li,.bone .ledger li{border-bottom-color:var(--hair-bone)}

/* --- signals (desire is designed) --------------------------------------- */
.signals{list-style:none;margin:0;padding:0;max-width:52ch}
.signals li{position:relative;padding:13px 0 13px 30px;border-bottom:1px solid var(--hair-bone);
  font-size:clamp(17px,1.7vw,21px);letter-spacing:-.012em}
.signals li::before{content:"";position:absolute;left:0;top:calc(50% - .5px);width:14px;height:1px;
  background:var(--amber)}

/* --- ways to work ------------------------------------------------------- */
.way{display:grid;grid-template-columns:1fr;gap:clamp(14px,2.4vw,44px);
  padding-block:clamp(30px,4.6vh,52px);border-top:1px solid var(--hair-ink)}
@media(min-width:900px){.way{grid-template-columns:minmax(0,.34fr) minmax(0,.44fr) minmax(0,.22fr)}}
.way ul{list-style:none;margin:0;padding:0;columns:2;column-gap:26px}
.way li{font-size:14.5px;color:var(--on-ink-2);padding-block:3px}

/* --- forms -------------------------------------------------------------- */
.field{position:relative;padding-top:22px;margin-bottom:26px}
.field label{position:absolute;top:0;left:0;font-family:var(--meta);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--on-ink-3)}
.field input,.field textarea,.field select{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--hair-ink);
  color:var(--on-ink);font:inherit;font-size:16.5px;padding:9px 0;border-radius:0;
  transition:border-color var(--mid) var(--ease)}
.field textarea{min-height:104px;resize:vertical}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--smoke) 50%),
  linear-gradient(135deg,var(--smoke) 50%,transparent 50%);
  background-position:calc(100% - 12px) 21px,calc(100% - 7px) 21px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.field select option{background:var(--ink);color:var(--on-ink)}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-bottom-color:var(--amber-rev)}
.field .hint{font-size:12.5px;color:var(--on-ink-3);margin-top:7px}
.grid-2{display:grid;grid-template-columns:1fr;gap:0 clamp(24px,3vw,48px)}
@media(min-width:720px){.grid-2{grid-template-columns:1fr 1fr}}
.submit{display:inline-flex;align-items:center;gap:12px;padding:15px 0;
  font-size:15.5px;border-bottom:1px solid var(--amber-rev);color:var(--on-ink)}
.submit:disabled{opacity:.4;cursor:default}
.formnote{font-size:13px;color:var(--on-ink-3);margin-top:20px;max-width:46ch}
.notice{margin-top:22px;padding:16px 18px;border-left:2px solid var(--amber-rev);
  background:rgba(239,234,224,.04);font-size:15px}
.notice[hidden]{display:none}

/* --- booking ------------------------------------------------------------ */
.book{display:grid;grid-template-columns:1fr;gap:clamp(30px,4vw,64px)}
@media(min-width:960px){.book{grid-template-columns:minmax(0,.46fr) minmax(0,.54fr)}}
.cal__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:14px;border-bottom:1px solid var(--hair-ink)}
.cal__nav{display:flex;gap:14px}
.cal__nav button{font-family:var(--meta);font-size:11px;letter-spacing:.14em;color:var(--on-ink-2)}
.cal__nav button:hover{color:var(--amber-rev)}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;margin-top:16px}
.cal__dow{font-family:var(--meta);font-size:9.5px;letter-spacing:.14em;color:var(--on-ink-3);
  text-align:center;padding-bottom:8px}
.cal__day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--on-ink-2);position:relative;
  transition:color var(--mid) var(--ease),background-color var(--mid) var(--ease)}
.cal__day[data-state="off"]{color:var(--on-ink-3);opacity:.32;cursor:default}
.cal__day[data-state="open"]{cursor:pointer}
.cal__day[data-state="open"]::after{content:"";position:absolute;bottom:22%;width:3px;height:3px;
  border-radius:50%;background:var(--amber-rev);opacity:.85}
.cal__day[data-state="open"]:hover{color:var(--on-ink);background:rgba(239,234,224,.05)}
.cal__day[aria-selected="true"]{background:var(--bone);color:var(--ink)}
.cal__day[aria-selected="true"]::after{background:var(--amber)}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;margin-top:18px}
.slot{padding:12px 8px;border:1px solid var(--hair-ink);font-family:var(--meta);font-size:12px;
  letter-spacing:.08em;color:var(--on-ink-2);text-align:center;
  transition:border-color var(--mid) var(--ease),color var(--mid) var(--ease)}
.slot:hover{border-color:var(--on-ink-3);color:var(--on-ink)}
.slot[aria-pressed="true"]{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.tz{margin-top:14px}
.summary{border-top:1px solid var(--hair-ink);margin-top:26px;padding-top:16px;
  display:flex;gap:10px;flex-wrap:wrap;align-items:baseline}

/* --- team --------------------------------------------------------------- */
.people{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,64px)}
@media(min-width:820px){.people{grid-template-columns:1fr 1fr}}

/* --- article ------------------------------------------------------------ */
.article{max-width:66ch}
.article p{margin:0 0 1.25em;color:var(--on-ink-2)}
.article h2{font-family:var(--display);font-weight:600;font-size:clamp(21px,2.4vw,30px);
  letter-spacing:-.022em;line-height:1.16;margin:2.4em 0 .7em;color:var(--on-ink)}
.article blockquote{margin:2em 0;padding-left:22px;border-left:1px solid var(--amber-rev);
  font-size:clamp(19px,2.2vw,26px);line-height:1.34;letter-spacing:-.018em;color:var(--on-ink)}
.article .dek{font-size:clamp(18px,1.9vw,23px);line-height:1.44;color:var(--on-ink-2);
  letter-spacing:-.012em;margin-bottom:2em}

/* --- case study --------------------------------------------------------- */
.chapter{padding-block:clamp(44px,7vh,92px);border-top:1px solid var(--hair-ink)}
.chapter__label{margin-bottom:clamp(14px,2vh,22px)}
.spec{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px}
.spec dt{font-family:var(--meta);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--on-ink-3);margin-bottom:6px}
.spec dd{margin:0;font-size:15.5px}

/* --- footer ------------------------------------------------------------- */
.foot{background:var(--ink-deep);padding-block:clamp(52px,8vh,96px)}
.foot__top{display:grid;grid-template-columns:1fr;gap:clamp(30px,5vw,64px);align-items:start}
@media(min-width:820px){.foot__top{grid-template-columns:minmax(0,.42fr) minmax(0,.58fr)}}
.foot__nav{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
@media(min-width:560px){.foot__nav{grid-template-columns:repeat(3,1fr)}}
.foot__nav a{font-size:14.5px;color:var(--on-ink-2);padding-block:5px}
.foot__nav a:hover{color:var(--on-ink)}
.foot .brand svg{height:22px}
.foot__base{margin-top:clamp(40px,6vh,72px);padding-top:18px;border-top:1px solid var(--hair-ink);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:baseline}

/* --- misc --------------------------------------------------------------- */
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gut);top:14px;z-index:40;background:var(--bone);color:var(--ink);
  padding:10px 14px;font-size:14px}
.stack>*+*{margin-top:clamp(18px,2.6vh,30px)}
.stack-l>*+*{margin-top:clamp(28px,4.4vh,56px)}
.pill{display:inline-block;font-family:var(--meta);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--amber-rev);border:1px solid rgba(190,128,56,.36);
  padding:4px 9px}
.paper .pill,.bone .pill{color:var(--amber);border-color:rgba(160,100,31,.34)}

/* =========================================================================
   REFINEMENT PASS — pacing, contrast, cinematic frames
   The interface stays disciplined. The work is allowed to be seductive.
   ========================================================================= */

/* --- the frame ----------------------------------------------------------
   Art-directed light studies standing in for film that has not been shot.
   Each is composed for its project: key direction, temperature, falloff.
   Replace the whole .frame__light stack with one <video> or <picture>.      */
.frame{position:relative;overflow:hidden;background:#070706;isolation:isolate}
.frame__light{position:absolute;inset:-8%;z-index:0;transform:scale(1.04)}
.frame__grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.09;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2'/></filter><rect width='120' height='120' filter='url(%23g)'/></svg>")}
.frame::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 46%,transparent 24%,rgba(7,7,6,.42) 74%,rgba(7,7,6,.86) 100%)}
.frame__note{position:absolute;left:clamp(14px,2vw,24px);bottom:clamp(12px,2vw,20px);z-index:4;
  font-family:var(--meta);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(239,234,224,.3)}
@media (prefers-reduced-motion:no-preference){
  .frame__light{animation:drift 34s var(--ease) infinite alternate}
}
@keyframes drift{
  0%{transform:scale(1.04) translate3d(0,0,0)}
  100%{transform:scale(1.10) translate3d(-1.2%,-1%,0)}
}

/* midnight — fragrance. cold black, one warm edge high right, deep falloff */
.frame--midnight .frame__light{background:
  radial-gradient(58% 46% at 78% 16%,rgba(190,128,56,.30) 0%,rgba(190,128,56,.06) 42%,transparent 68%),
  radial-gradient(90% 70% at 26% 78%,rgba(120,140,170,.14) 0%,transparent 62%),
  linear-gradient(157deg,#0D1015 0%,#07080B 46%,#050506 100%)}
/* interior — hospitality. a shaft of pale light in a warm dark room */
.frame--interior .frame__light{background:
  linear-gradient(101deg,transparent 30%,rgba(239,234,224,.16) 37%,rgba(239,234,224,.03) 44%,transparent 52%),
  radial-gradient(70% 90% at 34% 30%,rgba(239,234,224,.10) 0%,transparent 58%),
  radial-gradient(100% 80% at 88% 92%,rgba(160,100,31,.14) 0%,transparent 60%),
  linear-gradient(168deg,#141210 0%,#0A0908 58%,#070706 100%)}
/* amber — luxury food. low warm key from the right, mahogany, shallow focus */
.frame--amber .frame__light{background:
  radial-gradient(52% 62% at 72% 62%,rgba(214,150,72,.34) 0%,rgba(160,100,31,.16) 38%,transparent 66%),
  radial-gradient(80% 60% at 22% 22%,rgba(96,52,24,.30) 0%,transparent 60%),
  linear-gradient(152deg,#1A100A 0%,#0C0705 52%,#070504 100%)}
/* metal — jewellery. a cold specular sweep across near-black */
.frame--metal .frame__light{background:
  linear-gradient(114deg,transparent 34%,rgba(239,234,224,.20) 46%,rgba(239,234,224,.04) 53%,transparent 62%),
  radial-gradient(60% 50% at 30% 70%,rgba(150,160,175,.12) 0%,transparent 62%),
  linear-gradient(160deg,#101114 0%,#080809 55%,#060607 100%)}

.frame--bleed{width:100vw;margin-left:calc(50% - 50vw)}
.frame--full{height:100svh}
.frame--wide{aspect-ratio:4/5}
.frame--portrait{aspect-ratio:4/5}
@media(min-width:820px){
  .frame--wide{aspect-ratio:21/9}
  .frame--portrait{aspect-ratio:16/9}
}

/* --- work interruption --------------------------------------------------- */
.interrupt{position:relative}
.interrupt__cap{position:absolute;z-index:5;left:var(--gut);bottom:clamp(26px,5vh,52px);
  right:var(--gut);display:flex;gap:14px;flex-wrap:wrap;align-items:baseline}
.interrupt__cap .meta{color:rgba(239,234,224,.5)}

/* --- exhibition worlds --------------------------------------------------- */
.world{position:relative;padding-block:clamp(48px,9vh,120px)}
.world__meta{display:flex;gap:14px;flex-wrap:wrap;align-items:baseline}
.world__idea{margin-top:clamp(16px,2.6vh,28px);max-width:17ch}
.world__frame{margin-top:clamp(26px,4.6vh,56px);display:block}
a.world:hover .frame__light{filter:brightness(1.06)}
.frame__light{transition:filter 1200ms var(--ease)}
.world__more{margin-top:clamp(18px,2.6vh,26px)}

/* --- desire: paced ------------------------------------------------------- */
.pace{list-style:none;margin:clamp(28px,5vh,56px) 0 0;padding:0;max-width:24ch}
.pace li{font-family:var(--display);font-weight:600;
  font-size:clamp(21px,3.4vw,42px);line-height:1.18;letter-spacing:-.026em;
  padding-block:clamp(9px,1.5vh,15px);opacity:0;transform:translateY(10px);
  transition:opacity 1100ms var(--ease),transform 1100ms var(--ease)}
.pace li.on{opacity:1;transform:none}
.pace li:last-child{color:var(--amber);margin-top:clamp(14px,2.4vh,26px)}
@media (prefers-reduced-motion:reduce){.pace li{opacity:1;transform:none;transition:none}}

/* --- takeover: the film edit --------------------------------------------- */
.takeover{position:relative;height:260svh;background:#070706}
.takeover__stage{position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.takeover .frame{position:absolute;inset:0;transform:scale(.86);opacity:0;
  transition:transform 200ms linear,opacity 200ms linear}
.takeover__inner{position:relative;z-index:6;text-align:center;padding-inline:var(--gut)}
.takeover__ident{opacity:0;transition:opacity 700ms var(--ease)}
.takeover__ident svg{height:clamp(20px,3.4vw,34px);width:auto;margin:0 auto}
.takeover__line{margin-top:clamp(26px,5vh,54px);opacity:0;transform:translateY(12px);
  transition:opacity 1400ms var(--ease),transform 1400ms var(--ease)}
.takeover__line .d2{max-width:none}
body.veiled .masthead{opacity:0;pointer-events:none;transition:opacity 600ms var(--ease)}
@media (prefers-reduced-motion:reduce){
  .takeover{height:100svh}
  .takeover .frame{transform:none;opacity:1}
  .takeover__ident,.takeover__line{opacity:1;transform:none}
  body.veiled .masthead{opacity:1;pointer-events:auto}
}

/* --- hero, commanding ---------------------------------------------------- */
.hero .d1{font-size:clamp(38px,8.6vw,118px);letter-spacing:-.042em;max-width:13ch}
.hero__lede{max-width:42ch}
.hero__acts{margin-top:clamp(24px,3.4vh,38px)}
.hero__acts .link{font-size:14px;color:var(--on-ink-2)}
.hero__acts .link:hover{color:var(--on-ink)}
.hero__field{background:
  radial-gradient(56% 44% at 76% 14%,rgba(190,128,56,.16) 0%,transparent 62%),
  radial-gradient(86% 70% at 18% 88%,rgba(120,138,166,.10) 0%,transparent 62%),
  linear-gradient(163deg,#131512 0%,#0A0908 56%,#070706 100%)}
@media (prefers-reduced-motion:no-preference){
  .hero__field{animation:drift 44s var(--ease) infinite alternate}
}

/* --- amber scarcity: rail numbers go quiet ------------------------------- */
.index__row .meta.meta--amber{color:var(--on-ink-3)}
.paper .index__row .meta.meta--amber,.bone .index__row .meta.meta--amber{color:var(--on-bone-3)}

/* --- the close: the page ends on a frame, not a paragraph ---------------- */
.close{position:relative;min-height:74svh;display:flex;align-items:flex-end;overflow:hidden}
.close .frame{position:absolute;inset:0}
.close .frame::after{background:radial-gradient(120% 100% at 50% 50%,rgba(7,7,6,.35) 0%,rgba(7,7,6,.82) 100%)}
.close__in{position:relative;z-index:5;width:100%;padding-block:clamp(44px,9vh,104px)}
@media(max-width:640px){.takeover{height:210svh}}

/* =========================================================================
   QA PASS — behaviour only. No visual redesign.
   ========================================================================= */

/* anchors clear the fixed masthead */
[id]{scroll-margin-top:96px}

/* tap targets: 44px minimum on every navigational control */
.nav a{padding-block:14px}
.foot__nav a{padding-block:12px}
.link{min-height:44px;align-items:center}
.burger{min-height:44px;padding-block:10px}
.cal__day{min-height:44px}
.slot{min-height:44px;display:flex;align-items:center;justify-content:center}

/* the drawer must not be reachable by keyboard while closed */
.drawer{visibility:hidden}
.drawer[data-open="true"]{visibility:visible}

/* form error states — amber, the existing accent. No new colour. */
.err{font-family:var(--meta);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--amber-rev);margin:8px 0 0}
.err[hidden]{display:none}
.field[data-invalid="true"] input,
.field[data-invalid="true"] textarea,
.field[data-invalid="true"] select{border-bottom-color:var(--amber-rev)}
.field[data-invalid="true"] label{color:var(--amber-rev)}
.bone .err,.paper .err{color:var(--amber)}

/* success + failure notices */
.notice strong{font-weight:700}
.notice--bad{border-left-color:var(--amber-rev)}

/* manage page */
.appt{border-top:1px solid var(--hair-ink);border-bottom:1px solid var(--hair-ink);
  padding-block:clamp(20px,3vh,30px);margin-block:clamp(24px,4vh,40px)}
.appt dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;margin:0}
.appt dt{font-family:var(--meta);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--on-ink-3);margin-bottom:6px}
.appt dd{margin:0;font-size:15.5px}
.danger{color:var(--on-ink-2)}
.danger:hover{color:var(--on-ink)}