/* House of Legends: site styles
   Source of truth for colour and type is the House of Legends design system (tokens.json).
   Sal green carries the big moments, chalk carries the reading, laterite and ochre mark the timeline. */

:root{
  --chalk:#F5F4F0;
  --linen:#EBE8E0;
  --ph:#E4E0D6;
  --ink:#1B1918;
  --muted:#5F655E;
  --rule:#D5D2C8;
  --wall:#1E3A31;
  --wall-deep:#15291F;
  --night:#0F1F18;
  --wall-ph:#284A3F;
  --on-wall:#F1EFE8;
  --on-wall-muted:#B8C2B9;
  --rule-wall:#2B3631;
  --brass:#8E6E33;
  --brass-dark:#6B5226;
  --brass-lite:#CDAE6E;
  --laterite:#9A4A2F;
  --laterite-ground:#8A3F27;
  --ochre:#C9974A;
  --ochre-pale:#F0D9A8;
  --on-laterite-muted:#F2E6DA;
  --error:#8A3B2E;

  --f-display:"Libre Caslon Display",Didot,"Bodoni 72",Georgia,serif;
  --f-body:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --f-mark:Montserrat,"Helvetica Neue",Arial,sans-serif;

  --hang:0 18px 40px -22px rgba(0,0,0,.8);
  --hang-light:0 18px 40px -22px rgba(20,30,25,.45);

  --gutter:20px;
  --sec-pad:clamp(72px,9vw,112px);
  --hdr-h:96px;
  --sub-top:0px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:120px}
body{margin:0;background:var(--chalk);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}
dl,dd{margin:0}
a{color:var(--brass)}
a:hover{color:var(--brass-dark)}
button{font:inherit}
:focus-visible{outline:2px solid var(--brass-lite);outline-offset:3px}
.sec--chalk :focus-visible,.sec--linen :focus-visible{outline-color:var(--brass)}
::selection{background:var(--brass-lite);color:var(--ink)}
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--chalk);color:var(--ink);padding:10px 16px}
.skip:focus{left:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:1280px;margin:0 auto;padding-inline:var(--gutter)}
.measure{max-width:36em}

/* ---------- type ---------- */
.d{font-family:var(--f-display);font-weight:400}
.mk{font-family:var(--f-mark);font-weight:700;font-size:11.5px;line-height:1.4;letter-spacing:.2em;text-transform:uppercase}
.h-xl{font-family:var(--f-display);font-size:clamp(48px,7.8vw,112px);line-height:1;letter-spacing:-.01em}
.h-l{font-family:var(--f-display);font-size:clamp(34px,3.9vw,56px);line-height:1.05;letter-spacing:-.01em}
.h-m{font-family:var(--f-display);font-size:30px;line-height:1.15}
.lede{font-size:clamp(19px,1.6vw,21px);line-height:1.55}
.small{font-size:14.5px;line-height:1.45}
.tiny{font-size:13.5px;line-height:1.5}
.muted{color:var(--muted)}
.eyebrow{color:var(--brass)}
.laterite{color:var(--laterite)}
.ochre{color:var(--ochre)}
.prose{display:flex;flex-direction:column;gap:1em;max-width:36em}
.prose em{font-style:italic}

/* text links */
.tl{color:var(--brass);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;align-self:flex-start;background:none;border:0;padding:0;cursor:pointer;transition:color .2s}
.tl:hover{color:var(--ink)}
.tl::after{content:"";display:inline-block;width:.9em;height:.6em;margin-left:.45em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M0 6h16M11 1l5 5-5 5' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center/contain;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M0 6h16M11 1l5 5-5 5' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center/contain;transition:transform .25s var(--ease)}
.tl:hover::after{transform:translateX(4px)}
.tl.no-arrow::after{display:none}

/* ---------- sections ---------- */
.sec{position:relative;overflow:hidden}
.sec>.wrap{position:relative}
.sec--wall{background:var(--wall);color:var(--on-wall)}
.sec--deep{background:var(--wall-deep);color:var(--on-wall)}
.sec--night{background:var(--night);color:var(--on-wall-muted)}
.sec--chalk{background:var(--chalk);color:var(--ink)}
.sec--linen{background:var(--linen);color:var(--ink)}
.sec--laterite{background:var(--laterite-ground);color:var(--chalk)}
.sec--wall .muted,.sec--deep .muted{color:var(--on-wall-muted)}
.sec--wall .eyebrow,.sec--deep .eyebrow{color:var(--brass-lite)}
.sec--wall .tl,.sec--deep .tl,.sec--laterite .tl{color:var(--brass-lite)}
.sec--wall .tl:hover,.sec--deep .tl:hover{color:var(--on-wall)}
.sec--wall a:not(.btn):not(.tl),.sec--deep a:not(.btn):not(.tl){color:inherit}
.sec--laterite .eyebrow{color:var(--ochre-pale)}
.sec--laterite .muted{color:var(--on-laterite-muted)}
.bt-wall{border-top:1px solid var(--rule-wall)}
.bt-rule{border-top:1px solid var(--rule)}
.pad{padding-block:var(--sec-pad)}
.pad-top{padding-top:var(--sec-pad)}
.pad-creeper{padding-top:clamp(150px,13vw,184px);padding-bottom:var(--sec-pad)}

.col{display:flex;flex-direction:column}
.gap-8{gap:8px}.gap-14{gap:14px}.gap-20{gap:20px}.gap-24{gap:24px}.gap-28{gap:28px}.gap-32{gap:32px}.gap-48{gap:48px}.gap-56{gap:56px}.gap-64{gap:64px}
.row-between{display:flex;flex-wrap:wrap;gap:20px 64px;align-items:flex-end;justify-content:space-between}
.split{display:flex;flex-wrap:wrap;gap:56px 96px;align-items:flex-start}
.split--center{align-items:center}
.split>.main{flex:1 1 520px;min-width:0}
.split>.side{flex:1 1 300px;min-width:0}
.grid{display:grid;gap:48px 40px;align-items:end}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:48px 32px}
.grid-5{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:40px 28px;align-items:start}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr))}
.actions{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center}

/* ---------- motifs (our own drawings, in the spirit of alpana, kantha, creeper borders and Bishnupur terracotta) ---------- */
.motif{position:absolute;pointer-events:none;-webkit-mask-repeat:repeat;mask-repeat:repeat;will-change:transform}
.m-alpana{-webkit-mask-image:url(../img/motifs/alpana.svg);mask-image:url(../img/motifs/alpana.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}
.m-kantha{-webkit-mask-image:url(../img/motifs/kantha.svg);mask-image:url(../img/motifs/kantha.svg);-webkit-mask-size:240px 96px;mask-size:240px 96px;inset:0}
.m-creeper{-webkit-mask-image:url(../img/motifs/creeper.svg);mask-image:url(../img/motifs/creeper.svg);-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;-webkit-mask-size:320px 104px;mask-size:320px 104px;left:0;right:0;top:32px;height:104px;background-color:var(--laterite);opacity:.14}
.m-terra{-webkit-mask-image:url(../img/motifs/terracotta.svg);mask-image:url(../img/motifs/terracotta.svg);-webkit-mask-size:160px 160px;mask-size:160px 160px;top:0;bottom:0}
.m-gold{background-color:var(--brass-lite)}
.m-chalk{background-color:var(--on-wall)}
.m-red{background-color:var(--laterite)}
.spin-slow{animation:spin 240s linear infinite}
@keyframes spin{to{rotate:360deg}}

/* ---------- image slots ---------- */
.ph{background-color:var(--ph);background-image:repeating-linear-gradient(135deg,rgba(27,25,24,.06) 0 1px,transparent 1px 14px);display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:16px;color:var(--ink)}
.ph-d{background-color:var(--wall-ph);background-image:repeating-linear-gradient(135deg,rgba(241,239,232,.07) 0 1px,transparent 1px 14px);color:var(--on-wall)}
.ph-soft{background-color:#DCD8CD}
.ph .mk{color:var(--muted)}
.ph-d .mk{color:var(--on-wall-muted)}
.ph-band{padding:clamp(20px,3vw,48px);gap:6px}
.ph-band .ph-title{font-size:clamp(17px,1.6vw,21px)}
.slot-img{width:100%;height:100%;object-fit:contain;display:block}
.slot{position:relative;width:100%}
.standin{position:relative;display:block;width:100%}
.standin::after{content:"Stand-in image";position:absolute;left:8px;top:8px;font-family:var(--f-mark);font-weight:700;font-size:9px;letter-spacing:.18em;text-transform:uppercase;background:rgba(15,31,24,.78);color:var(--on-wall);padding:5px 8px;pointer-events:none}
.slot-wrap{display:block;width:100%}
.band .standin,.unveil .standin,.band .slot-wrap,.unveil .slot-wrap{width:min(100%,calc(min(78vh,820px) * var(--r,1.5)));margin-inline:auto}
.band .slot-img,.unveil .slot-img{width:100%;height:auto}
.band .unveil,.unveil:has(.slot-img){padding-block:clamp(20px,4vw,48px);background:var(--wall-deep)}
.slot>img{width:100%;height:auto}

/* mats and frames: art is never rounded and never cropped */
.mat{background:var(--linen);padding:clamp(16px,2vw,28px)}
.mat--chalk{background:var(--chalk);padding:20px}
.mat--wall{background:var(--on-wall);padding:24px;box-shadow:var(--hang)}
.mat--hang{box-shadow:var(--hang-light)}
.art{display:flex;flex-direction:column;gap:18px}
.label{font-size:14.5px;line-height:1.45}
.label b,.label .who{font-weight:600}
.label em{font-style:italic}
.sec--wall .label,.sec--deep .label{color:var(--on-wall-muted)}
.sec--wall .label b,.sec--wall .label em,.sec--deep .label b,.sec--deep .label em{color:var(--on-wall)}

.band{background:var(--wall-deep)}
.band figcaption{display:flex;flex-wrap:wrap;gap:4px 24px;justify-content:space-between;padding-block:16px;font-size:14.5px;line-height:1.45;color:var(--on-wall-muted)}
.band figcaption b{color:var(--on-wall);font-weight:600}

/* ---------- header ---------- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:60;color:var(--on-wall);transition:transform .45s var(--ease),background-color .35s,box-shadow .35s}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:24px 48px;height:var(--hdr-h);transition:height .35s var(--ease)}
.hdr__logo{display:block;line-height:0;flex:none}
.hdr__logo img{height:64px;width:auto;transition:height .35s var(--ease)}
.hdr.is-solid{background:rgba(21,41,31,.96);box-shadow:0 1px 0 var(--rule-wall);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hdr.is-solid .hdr__in{height:72px}
.hdr.is-solid .hdr__logo img{height:46px}
.hdr.is-hidden{transform:translateY(-100%)}
.nav{display:flex;flex-wrap:wrap;gap:14px 30px;align-items:center}
.nav a{color:var(--on-wall);text-decoration:none;padding-block:6px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.nav a:hover{color:var(--brass-lite)}
.nav a[aria-current="page"]{color:var(--brass-lite);border-bottom-color:var(--brass-lite)}
.menu-btn{display:none;align-items:center;gap:10px;height:44px;padding:0 4px 0 12px;background:none;border:0;color:var(--on-wall);cursor:pointer}
.menu-btn svg{width:22px;height:22px}
@media (max-width:1100px){
  .nav{display:none}
  .menu-btn{display:inline-flex}
  :root{--hdr-h:84px}
  .hdr__logo img{height:52px}
  .hdr.is-solid .hdr__in{height:64px}
  .hdr.is-solid .hdr__logo img{height:40px}
}

/* full-screen menu */
.menu{position:fixed;inset:0;z-index:100;background:var(--wall);color:var(--on-wall);display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility 0s .35s}
.menu.is-open{opacity:1;visibility:visible;transition:opacity .35s var(--ease)}
.menu>.wrap{width:100%}
.menu .motif{width:620px;height:620px;right:-260px;bottom:-200px;opacity:.1}
.menu__top{display:flex;align-items:center;justify-content:space-between;height:84px;flex:none}
.menu__top img{height:52px;width:auto}
.menu__nav{display:flex;flex-direction:column;padding-block:32px 40px;position:relative}
.menu__nav a{font-family:var(--f-display);font-size:clamp(34px,8vw,48px);line-height:1.3;color:var(--on-wall);text-decoration:none;opacity:0;transform:translateY(12px);transition:opacity .4s var(--ease),transform .4s var(--ease),color .2s}
.menu.is-open .menu__nav a{opacity:1;transform:none}
.menu__nav a:hover,.menu__nav a[aria-current="page"]{color:var(--brass-lite)}
.menu__foot{margin-top:auto;padding-block:24px 40px;border-top:1px solid var(--rule-wall);color:var(--on-wall-muted);font-size:15px;position:relative}
.close-btn{width:44px;height:44px;display:grid;place-items:center;background:none;border:0;color:var(--on-wall);cursor:pointer}
body.menu-open{overflow:hidden}

/* ---------- heroes ---------- */
.hero{padding-top:calc(var(--hdr-h) + clamp(48px,6vw,88px));padding-bottom:clamp(72px,8vw,112px)}
.hero--home{padding-top:calc(var(--hdr-h) + clamp(64px,8vw,96px));padding-bottom:clamp(88px,9vw,120px)}
.hero h1{max-width:10em}
.hero .lede{max-width:32em;color:var(--on-wall-muted)}
.hero-art{flex:0 1 400px}
.anim-hero>*{animation:rise 1s var(--ease) both}
.anim-hero>*:nth-child(2){animation-delay:.12s}
.anim-hero>*:nth-child(3){animation-delay:.24s}
.anim-hero>*:nth-child(4){animation-delay:.36s}
.anim-hero>*:nth-child(5){animation-delay:.48s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- chapter heads ---------- */
.chap{display:flex;align-items:baseline;gap:24px}
.numeral{font-family:var(--f-display);font-size:clamp(76px,8vw,112px);line-height:.9;color:var(--laterite)}
.sec--wall .numeral,.sec--deep .numeral{color:var(--ochre)}

/* ---------- horizontal timeline thread ---------- */
.hthread{overflow-x:auto;padding-bottom:12px;scrollbar-width:thin;scrollbar-color:var(--rule-wall) transparent;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.hthread ol{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(112px,1fr);gap:0 12px;min-width:min-content}
.hthread .line{position:absolute;left:0;right:0;top:7px;height:1px;background:var(--brass-lite);opacity:.6;transform-origin:left;transition:transform 1.6s var(--ease)}
.hthread li:not(.line){position:relative;display:flex;flex-direction:column;gap:6px;padding-top:32px;scroll-snap-align:start}
.hthread .dot{position:absolute;top:0;left:0;width:15px;height:15px;border-radius:50%;border:1.5px solid var(--brass-lite);background:var(--wall-deep);transition:transform .5s var(--ease),opacity .5s}
.hthread .dot.on{background:var(--brass-lite)}
.hthread .yr{font-family:var(--f-display);font-size:30px;line-height:1.15}
.hthread .yr.now{color:var(--brass-lite)}
.hthread .txt{font-size:14.5px;line-height:1.45;color:var(--on-wall-muted)}
.hthread--light ol{min-width:0;grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr))}
.hthread--light .line{background:var(--brass);opacity:.45}
.hthread--light .dot{border-color:var(--brass);background:var(--chalk)}
.hthread--light .dot.on{background:var(--laterite);border-color:var(--laterite)}
.hthread--light .yr.now{color:var(--laterite)}
.hthread--light .txt{color:var(--muted)}
.js .hthread .line{transform:scaleX(0)}
.js .hthread .dot,.js .hthread .yr,.js .hthread .txt{opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .hthread.in .line{transform:scaleX(1)}
.js .hthread.in .dot,.js .hthread.in .yr,.js .hthread.in .txt{opacity:1;transform:none;transition-delay:calc(var(--i,0) * 110ms + 200ms)}
.hthread-hint{display:none;font-size:13.5px;color:var(--on-wall-muted)}
.hthread.is-scrollable+.hthread-hint{display:block}
.hthread.is-scrollable{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
.hthread.is-scrollable.at-end{-webkit-mask-image:none;mask-image:none}
@media (max-width:640px){.hthread ol{grid-auto-columns:minmax(140px,1fr)}}

/* ---------- vertical thread (story page) ---------- */
.thr{position:relative;display:grid;grid-template-columns:minmax(96px,160px) minmax(0,1fr);gap:0 40px}
.thr::before{content:"";position:absolute;left:0;top:10px;bottom:0;width:1px;background:var(--brass);opacity:.3}
.thr__fill{position:absolute;left:0;top:10px;width:1px;height:0;background:var(--laterite);transition:height .15s linear}
.thr .yr{position:relative;padding-left:28px;font-family:var(--f-display);font-size:30px;line-height:1.15;color:var(--laterite)}
.thr .yr::before{content:"";position:absolute;left:-7px;top:12px;width:15px;height:15px;box-sizing:border-box;border-radius:50%;border:1.5px solid var(--brass);background:var(--chalk);transition:background-color .4s,border-color .4s,transform .4s var(--ease)}
.thr .yr.on::before{background:var(--laterite);border-color:var(--laterite);transform:scale(1.1)}
.thr--w::before{background:var(--brass-lite)}
.thr--w .thr__fill{background:var(--ochre)}
.thr--w .yr{color:var(--ochre)}
.thr--w .yr::before{border-color:var(--brass-lite);background:var(--wall)}
.sec--deep .thr--w .yr::before{background:var(--wall-deep)}
.thr--w .yr.on::before{background:var(--ochre);border-color:var(--ochre)}
.thr .ent{padding-bottom:56px;display:flex;flex-direction:column;gap:14px;max-width:36em}
.thr .ent:last-child{padding-bottom:0}
@media (max-width:640px){
  .thr{grid-template-columns:1fr;gap:0}
  .thr .yr{padding-left:28px;margin-bottom:8px}
  .thr .ent{padding-left:28px;padding-bottom:44px}
}

/* ---------- sticky sub navigation ---------- */
.subnav{position:sticky;top:var(--sub-top);z-index:40;background:rgba(245,244,240,.97);border-bottom:1px solid var(--rule);transition:top .45s var(--ease);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.subnav__in{display:flex;gap:0 28px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.subnav__in::-webkit-scrollbar{display:none}
.subnav a{flex:none;min-height:56px;display:inline-flex;align-items:center;color:var(--muted);text-decoration:none;border-bottom:1.5px solid transparent;margin-bottom:-1px;transition:color .2s,border-color .2s;white-space:nowrap}
.subnav a:hover{color:var(--ink)}
.subnav a.on{color:var(--ink);border-bottom-color:var(--laterite)}
.progress{position:fixed;left:0;top:0;height:2px;width:100%;background:var(--laterite);transform-origin:left;transform:scaleX(0);z-index:70;pointer-events:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border-radius:2px;border:1px solid var(--on-wall);background:var(--on-wall);color:var(--wall-deep);text-decoration:none;font-family:var(--f-mark);font-weight:700;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:background-color .25s,color .25s}
.btn:hover{background:transparent;color:var(--on-wall)}
.btn--ghost{background:transparent;color:var(--on-wall)}
.btn--ghost:hover{background:var(--on-wall);color:var(--wall-deep)}
.btn--ink{background:var(--ink);border-color:var(--ink);color:var(--chalk)}
.btn--ink:hover{background:transparent;color:var(--ink)}
.btn[disabled]{opacity:.6;cursor:progress}

/* ---------- cards ---------- */
.person{display:flex;flex-direction:column;gap:14px;color:var(--ink);text-decoration:none}
.person .ph{aspect-ratio:4/5}
.person .when{font-size:14.5px;color:var(--muted);margin-top:-8px}
.person:hover .h-m{color:var(--brass)}
.person .h-m{transition:color .2s}
.work-card{display:flex;flex-direction:column;gap:16px;color:var(--ink);text-decoration:none}
.work-card .mat--chalk{transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.work-card:hover .mat--chalk{transform:translateY(-4px);box-shadow:var(--hang-light)}
.rule-list li{border-top:1px solid var(--rule)}
.rule-list a{display:flex;flex-direction:column;gap:2px;padding:18px 0;color:var(--ink);text-decoration:none}
.rule-list a:hover .h-m{color:var(--brass)}
.tri{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:32px 40px}
.tri>div{border-top:1px solid var(--ink);padding-top:18px;display:flex;flex-direction:column;gap:8px}
.dates-list{border-top:1px solid var(--ink)}
.dates-list li{display:flex;gap:24px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--rule)}
.dates-list .h-m{color:var(--laterite);flex:0 0 80px}

/* closing invitation */
.closing{padding-block:clamp(96px,11vw,136px);text-align:center;align-items:center}
.closing h2{max-width:12em}
.closing p{max-width:30em}
.closing .actions{justify-content:center;margin-top:8px}

/* ---------- forms ---------- */
.fld{display:flex;flex-direction:column;gap:4px;min-width:0}
.fld label,.lab{font-size:14.5px;color:var(--muted)}
.f-in{background:transparent;border:0;border-bottom:1.5px solid var(--rule);color:var(--ink);font:inherit;padding:10px 0;border-radius:0;width:100%;transition:border-color .2s}
.f-in:focus{border-bottom-color:var(--brass);outline:none}
.f-in.bad{border-bottom-color:var(--error)}
textarea.f-in{resize:vertical;min-height:110px}
.f-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:28px 40px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{min-height:44px;padding:0 20px;border-radius:40px;border:1px solid var(--rule);background:transparent;color:var(--ink);font-size:15px;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--chalk);border-color:var(--ink)}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0;float:left;width:100%}
legend+*{clear:both}
.f-extra{display:flex;flex-direction:column;gap:28px;border-top:1px solid var(--rule);padding-top:32px}
.f-extra[hidden]{display:none}
.form-err{color:var(--error);font-size:14.5px}
.sent{border-left:2px solid var(--brass);padding:8px 0 8px 28px;display:flex;flex-direction:column;gap:16px}
.sent[hidden]{display:none}
.sec--wall .f-in,.sec--deep .f-in{color:var(--on-wall);border-bottom-color:var(--on-wall-muted)}
.sec--wall .f-in:focus,.sec--deep .f-in:focus{border-bottom-color:var(--brass-lite)}
.sec--wall .fld label,.sec--deep .fld label{color:var(--on-wall-muted)}
.sec--deep .sent{border-left-color:var(--brass-lite)}
.newsletter{margin-top:56px;width:100%;max-width:620px;text-align:left;border-top:1px solid var(--rule-wall);padding-top:40px}
.newsletter .row{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:flex-end}
.newsletter .fld{flex:1 1 260px}

/* ---------- work page ---------- */
.det div{display:grid;grid-template-columns:minmax(110px,160px) minmax(0,1fr);gap:4px 24px;padding:16px 0;border-top:1px solid var(--rule)}
.det{border-bottom:1px solid var(--rule)}
.det dt{font-size:14.5px;color:var(--muted)}
.sticky-label{flex:0 1 380px;display:flex;flex-direction:column;gap:28px;position:sticky;top:110px}
@media (max-width:960px){.sticky-label{position:static;flex-basis:100%}}
.ask{border-top:2px solid var(--brass);padding-top:22px;display:flex;flex-direction:column;gap:16px}
.wall-stage{margin:0 auto;width:min(520px,100%);display:flex;flex-direction:column;gap:20px}
.wall-stage .mat{padding:clamp(24px,4vw,48px);box-shadow:var(--hang)}

/* ---------- article ---------- */
.article{max-width:40em;margin:0 auto}
.article p+p{margin-top:1.1em}
.article h2{font-family:var(--f-display);font-size:clamp(28px,3vw,36px);line-height:1.15;margin:1.8em 0 .6em}
.article .lede{margin-bottom:1.4em}
.article figure{margin:2.2em 0}
.pull{font-family:var(--f-display);font-size:clamp(26px,2.8vw,34px);line-height:1.2;color:var(--laterite);border-left:2px solid var(--laterite);padding-left:24px;margin:1.6em 0}

/* ---------- footer ---------- */
.foot{font-size:14.5px}
.foot a{color:var(--on-wall-muted);text-decoration:none;transition:color .2s}
.foot a:hover{color:var(--on-wall)}
.foot__top{display:flex;flex-wrap:wrap;gap:40px 64px;justify-content:space-between;align-items:flex-start}
.foot__logo img{height:56px;width:auto}
.foot__nav{display:flex;flex-wrap:wrap;gap:12px 32px;max-width:620px}
.foot__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:28px 48px}
.foot__cols h3{color:var(--on-wall);margin-bottom:8px}
.foot__legal{display:flex;flex-wrap:wrap;gap:8px 32px;justify-content:space-between;border-top:1px solid var(--rule-wall);padding-top:24px;font-size:13.5px}

/* ---------- reveal on scroll ---------- */
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js [data-reveal].in{opacity:1;transform:none}
.js [data-reveal="fade"]{transform:none}
.js [data-reveal-group]>*{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js [data-reveal-group].in>*{opacity:1;transform:none}
.js [data-reveal-group].in>*:nth-child(2){transition-delay:.1s}
.js [data-reveal-group].in>*:nth-child(3){transition-delay:.2s}
.js [data-reveal-group].in>*:nth-child(4){transition-delay:.3s}
.js [data-reveal-group].in>*:nth-child(5){transition-delay:.4s}
.js [data-reveal-group].in>*:nth-child(6){transition-delay:.5s}
.js [data-reveal-group].in>*:nth-child(n+7){transition-delay:.6s}
.js .unveil{clip-path:inset(0 0 100% 0);transition:clip-path 1.4s var(--ease)}
.js .unveil.in{clip-path:inset(0 0 0 0)}

/* ---------- small screens ---------- */
@media (max-width:640px){
  :root{--gutter:16px}
  body{font-size:16.5px}
  .h-m{font-size:26px}
  .hthread .yr{font-size:26px}
  .thr .yr{font-size:26px}
  .chap{gap:16px}
  .hthread--light ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}
  .hthread--light .line{display:none}
  .det div{grid-template-columns:1fr}
  .closing{text-align:left;align-items:flex-start}
  .closing .actions{justify-content:flex-start}
  .foot__logo img{height:48px}
  .grid-5{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 16px}
  .person .h-m{font-size:21px}
  .person span:last-child{font-size:15px}
  .m-terra{width:72px!important;opacity:.06!important}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 16px}
  .mat--chalk{padding:12px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js [data-reveal],.js [data-reveal-group]>*,.js .hthread .line,.js .hthread .dot,.js .hthread .yr,.js .hthread .txt{opacity:1!important;transform:none!important}
  .js .unveil{clip-path:none!important}
}

@media print{
  .hdr,.menu,.subnav,.progress,.motif,.newsletter{display:none!important}
  .hero{padding-top:24px}
  body{background:#fff}
}