:root{
  color-scheme:light;
  --paper:#FDF8F0; --paper-2:#F5ECDF; --paper-3:#EFE3D2;
  --rule:#E0D2C0; --rule-strong:#C9B49B;
  --ink:#241713; --ink-2:#6E5A50; --ink-3:#9A857A;
  --red:#D91018; --red-deep:#A80C12; --ivory:#FFF6E8;
  --hotel:#9A6E24; --school:#2E4A7D; --hospital:#16645C; --auto:#4A4A52; --security:#4C5A2A;
  --f-display:"Marcellus","Hoefler Text",Georgia,serif;
  --f-body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-mono:"Spline Sans Mono",ui-monospace,Menlo,monospace;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:80px;
  --wrap:1180px; --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
body{background:var(--paper); color:var(--ink); font-family:var(--f-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--f-display); font-weight:400; margin:0; text-wrap:balance; letter-spacing:.005em}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--red); outline-offset:3px}
svg{display:block}
[hidden]{display:none!important}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--s5)}
.stack{display:flex; flex-direction:column; gap:var(--s4)}
.stack-s{display:flex; flex-direction:column; gap:var(--s2)}

.eyebrow{font-family:var(--f-mono); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}
.d1{font-size:clamp(36px,5.2vw,66px); line-height:1.04}
.d2{font-size:clamp(27px,3.5vw,44px); line-height:1.09}
.d3{font-size:clamp(21px,2.5vw,29px); line-height:1.16}
.lede{font-size:clamp(15.5px,1.4vw,18px); line-height:1.62; color:var(--ink-2); max-width:60ch}
.small{font-size:13.5px; color:var(--ink-2)}
.tiny{font-size:12.5px; color:var(--ink-3)}

/* ── nav: two levels ─────────────────────────────────── */
header.top{position:sticky; top:0; background:var(--paper); z-index:40; border-bottom:1px solid var(--rule)}
.topin{display:flex; align-items:center; justify-content:space-between; gap:var(--s5); padding:var(--s4) 0; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:var(--s3); cursor:pointer; background:0; border:0; font:inherit; color:inherit; text-align:left}
.brand .mk{width:40px; height:40px; color:var(--red)}
.brand .nm{font-family:var(--f-display); font-size:18px; line-height:1; letter-spacing:.07em; text-transform:uppercase}
.brand .sub{font-family:var(--f-mono); font-size:10px; letter-spacing:.13em; color:var(--ink-3); margin-top:4px; text-transform:uppercase}
nav.tabs{display:flex; gap:var(--s5); flex-wrap:wrap}
nav.tabs button{background:0; border:0; cursor:pointer; font-family:var(--f-body); font-weight:600; font-size:12.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-2); padding:6px 0; border-bottom:2px solid transparent; transition:color .2s var(--ease), border-color .2s var(--ease)}
nav.tabs button[aria-selected="true"]{color:var(--red); border-bottom-color:var(--red)}
nav.tabs button:hover{color:var(--ink)}

.subnav{border-top:1px solid var(--rule); background:var(--paper-2)}
.subin{display:flex; gap:0; overflow-x:auto; scrollbar-width:none}
.subin::-webkit-scrollbar{display:none}
.subin button{flex:1 1 auto; white-space:nowrap; background:0; border:0; cursor:pointer; font:inherit; color:var(--ink-2); padding:14px var(--s5) 12px; display:flex; align-items:center; gap:10px; border-bottom:3px solid transparent; font-family:var(--f-body); font-weight:600; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; transition:color .2s var(--ease), background .2s var(--ease)}
.subin button:hover{color:var(--ink); background:var(--paper-3)}
.subin button .dot{width:9px; height:9px; flex:none}
.subin button[aria-selected="true"]{color:var(--ink); background:var(--paper)}
.subin button .no{font-family:var(--f-mono); font-size:10px; color:var(--ink-3)}

.band{padding:var(--s9) 0}
.band.tint{background:var(--paper-2)}
.band.tight{padding:var(--s8) 0}
.band + .band{border-top:1px solid var(--rule)}

.btn{display:inline-flex; align-items:center; gap:10px; cursor:pointer; border:1px solid var(--red); background:var(--red); color:var(--ivory); padding:15px 28px; font-family:var(--f-body); font-weight:600; font-size:13px; letter-spacing:.07em; text-transform:uppercase; text-decoration:none; border-radius:0; transition:background .2s var(--ease), transform .2s var(--ease)}
.btn:hover{background:var(--red-deep); border-color:var(--red-deep); transform:translateY(-2px)}
.btn.ghost{background:transparent; color:var(--red)}
.btn.ghost:hover{background:rgba(217,16,24,.07)}
.btn-row{display:flex; gap:var(--s3); flex-wrap:wrap; align-items:center}

.crumb{display:flex; gap:9px; align-items:center; flex-wrap:wrap; font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.crumb button{background:0; border:0; padding:0; font:inherit; color:var(--red); cursor:pointer; letter-spacing:.1em; text-transform:uppercase}
.crumb button:hover{text-decoration:underline}

.hero{display:grid; grid-template-columns:120px 1fr; gap:var(--s6); align-items:start}
.hero .mkbig{width:120px; height:120px; color:var(--red)}
.herofoot{display:flex; gap:var(--s7); flex-wrap:wrap; margin-top:var(--s5); padding-top:var(--s5); position:relative}
.herofoot::before{content:""; position:absolute; top:0; left:0; height:2px; background:var(--red); width:100%}
.herofoot div{display:flex; flex-direction:column; gap:4px}
.herofoot .n{font-family:var(--f-display); font-size:clamp(26px,3vw,38px); line-height:1; color:var(--red)}
.herofoot .l{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}

.index{border-top:1px solid var(--rule-strong)}
.ixrow{display:grid; grid-template-columns:56px 6px 1fr 56px 84px; gap:var(--s5); align-items:center; padding:var(--s5) 0; border:0; border-bottom:1px solid var(--rule); width:100%; background:0; cursor:pointer; text-align:left; font:inherit; color:inherit; transition:background .22s var(--ease), padding-left .22s var(--ease)}
.ixrow:hover{background:var(--paper-2); padding-left:var(--s4)}
.ixrow .no{font-family:var(--f-mono); font-size:12px; color:var(--ink-3)}
.ixrow .bar{width:6px; height:46px; transition:height .3s var(--ease)}
.ixrow:hover .bar{height:64px}
.ixrow h3{font-size:clamp(21px,2.4vw,29px); line-height:1}
.ixrow .ds{font-size:13.5px; color:var(--ink-2); margin-top:6px; max-width:62ch}
.ixrow .gm{width:50px; height:50px; color:var(--ink-3); transition:color .22s var(--ease)}
.ixrow:hover .gm{color:var(--red)}
.ixrow .go{font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--red); text-align:right; transition:transform .22s var(--ease)}
.ixrow:hover .go{transform:translateX(5px)}
@media(max-width:820px){ .ixrow{grid-template-columns:38px 6px 1fr} .ixrow .gm,.ixrow .go{display:none} }

.spec{border-top:1px solid var(--rule-strong)}
.spec .r{display:grid; grid-template-columns:190px 1fr; gap:var(--s5); padding:14px 0; border-bottom:1px solid var(--rule); align-items:baseline}
.spec dt{font-family:var(--f-mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); margin:0}
.spec dd{margin:0; font-family:var(--f-mono); font-size:14px}
.tbd{color:var(--red); font-weight:500}
@media(max-width:640px){ .spec .r{grid-template-columns:1fr; gap:var(--s1)} }

.garments{display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); border-top:1px solid var(--rule-strong)}
.gitem{display:flex; flex-direction:column; gap:var(--s4); padding:var(--s5); border:0; border-bottom:1px solid var(--rule); border-right:1px solid var(--rule); background:0; cursor:pointer; text-align:left; font:inherit; color:inherit; transition:background .2s var(--ease)}
.gitem:hover{background:var(--paper-2)}
.gitem .hd{display:flex; justify-content:space-between; gap:var(--s3); align-items:flex-start}
.gitem h4{font-size:19px; line-height:1.16}
.gitem .code{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em; color:var(--ink-3); margin-top:6px}
.gitem .gm{width:44px; height:44px; color:var(--ink-3); flex:none; transition:color .2s var(--ease), transform .3s var(--ease)}
.gitem:hover .gm{color:var(--red); transform:translateY(-3px)}
.gitem .sz{font-family:var(--f-mono); font-size:11.5px; color:var(--ink-2); letter-spacing:.04em}

.sizerun{display:flex; flex-wrap:wrap; gap:6px}
.sizerun span{font-family:var(--f-mono); font-size:12.5px; min-width:46px; text-align:center; padding:10px 4px; border:1px solid var(--rule-strong); color:var(--ink-2)}
.sizerun span.on{border-color:var(--red); color:var(--red); font-weight:500}

.two{display:grid; grid-template-columns:1.15fr .85fr; gap:var(--s8)}
.three{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s7)}
.five{display:grid; grid-template-columns:repeat(5,1fr); gap:var(--s6)}
@media(max-width:900px){ .two,.three{grid-template-columns:1fr; gap:var(--s6)} .five{grid-template-columns:repeat(2,1fr)} .hero{grid-template-columns:1fr; gap:var(--s5)} .hero .mkbig{width:92px;height:92px} }

.numlead{font-family:var(--f-display); font-size:clamp(36px,4.6vw,60px); line-height:1; color:var(--red)}
.stepno{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.14em; color:var(--red); text-transform:uppercase}
.pullrule{height:2px; background:var(--red); width:64px}
.quote{font-family:var(--f-display); font-size:clamp(22px,2.8vw,34px); line-height:1.34; max-width:24ch}

.media{border:1px solid var(--rule-strong); background:var(--paper-2); position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; padding:var(--s5); gap:5px; transition:border-color .25s var(--ease)}
.media::before{content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(135deg,var(--rule) 0 1px,transparent 1px 15px); opacity:.55}
.media > *{position:relative}
.media:hover{border-color:var(--red)}
.media.r169{aspect-ratio:16/9} .media.r43{aspect-ratio:4/3} .media.r11{aspect-ratio:1/1} .media.r34{aspect-ratio:3/4}
.media .kind{position:absolute; top:var(--s4); left:var(--s4); font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ivory); background:var(--red); padding:5px 9px}
.media .pz{font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--red)}
.media .pd{font-size:13px; color:var(--ink-2); max-width:44ch}
.media .spec-note{font-family:var(--f-mono); font-size:10.5px; color:var(--ink-3); letter-spacing:.05em}
.playmark{position:absolute; inset:0; display:flex; align-items:center; justify-content:center}
.playmark svg{width:66px; height:66px; color:var(--red)}
.mediagrid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5)}
@media(max-width:900px){ .mediagrid{grid-template-columns:1fr 1fr} }
@media(max-width:600px){ .mediagrid{grid-template-columns:1fr} }

.people{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s7)}
@media(max-width:900px){ .people{grid-template-columns:1fr 1fr; gap:var(--s5)} }
@media(max-width:560px){ .people{grid-template-columns:1fr} }
.person .nm{font-family:var(--f-display); font-size:21px; margin-top:var(--s4)}
.person .role{font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--red); margin-top:5px}
.person .bio{font-size:13.5px; color:var(--ink-2); margin-top:var(--s3)}

.wa{font-family:var(--f-mono); font-size:13.5px; line-height:1.95; padding:var(--s5); border:1px solid var(--red); background:var(--paper); color:var(--ink-2)}
.wa b{font-weight:500; color:var(--red)}
.artframe{display:flex; justify-content:center; align-items:center; border:1px solid var(--rule-strong); background:var(--paper-2); min-height:340px}

.decades{display:grid; grid-template-columns:repeat(5,1fr); gap:var(--s5); align-items:end; margin-top:var(--s6); border-bottom:1px solid var(--rule-strong); padding-bottom:var(--s4)}
.dec{display:flex; flex-direction:column; gap:var(--s3); justify-content:flex-end}
.dec .bar{width:100%; background:var(--red); transform-origin:bottom; transition:transform .8s var(--ease)}
.dec .yr{font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; color:var(--ink-3)}
.dec .ct{font-family:var(--f-display); font-size:17px}
@media(max-width:700px){ .decades{grid-template-columns:repeat(2,1fr)} }

footer{border-top:1px solid var(--rule); padding:var(--s7) 0}
.foot{display:flex; justify-content:space-between; gap:var(--s5); flex-wrap:wrap; font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}

@media(max-width:720px){
  .topin{padding:var(--s3) 0; gap:var(--s3)}
  nav.tabs{gap:var(--s5); overflow-x:auto; flex-wrap:nowrap; width:100%; scrollbar-width:none; padding-bottom:3px}
  nav.tabs::-webkit-scrollbar{display:none}
  nav.tabs{-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent 100%); mask-image:linear-gradient(90deg,#000 86%,transparent 100%)}
  nav.tabs button{white-space:nowrap; font-size:11.5px}
  .subin{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 100%); mask-image:linear-gradient(90deg,#000 88%,transparent 100%)}
  .subin button{padding:12px var(--s4) 10px; font-size:11.5px}
  .brand .mk{width:34px; height:34px}
  .brand .nm{font-size:16px}
  .brand .sub{font-size:9px}
  .wrap{padding:0 var(--s4)}
  .band,.band.tight{padding:var(--s7) 0}
  .herofoot{gap:var(--s5) var(--s6)}
  .herofoot .n{font-size:28px}
  .btn{padding:14px 20px; font-size:12.5px}
  .media .pd{font-size:12.5px}
  .media .spec-note{font-size:9.5px}
  .five{grid-template-columns:1fr 1fr}
  .artframe{min-height:240px}
  .artframe svg{width:150px!important; height:150px!important}
  .quote{font-size:21px}
}
@media(max-width:430px){
  .five{grid-template-columns:1fr}
  .btn{width:100%; justify-content:center}
  .btn-row{width:100%}
  .spec .r{padding:11px 0}
}



/* ════════ generated-site additions ════════ */
.skip{position:absolute; left:-9999px; top:0; background:var(--red); color:var(--ivory); padding:12px 18px; z-index:99; font-family:var(--f-body); font-weight:600; font-size:13px; letter-spacing:.06em; text-transform:uppercase}
.skip:focus{left:0}

nav.tabs a{text-decoration:none; font-family:var(--f-body); font-weight:600; font-size:12.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-2); padding:6px 0; border-bottom:2px solid transparent; transition:color .2s var(--settle), border-color .2s var(--settle)}
nav.tabs a:hover{color:var(--ink)}
nav.tabs a[aria-current="page"]{color:var(--red); border-bottom-color:var(--red)}
.subin a{flex:1 1 auto; white-space:nowrap; text-decoration:none; color:var(--ink-2); padding:14px var(--s5) 12px; display:flex; align-items:center; gap:10px; border-bottom:3px solid transparent; font-family:var(--f-body); font-weight:600; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; transition:color .2s var(--settle), background .2s var(--settle)}
.subin a:hover{color:var(--ink); background:var(--paper-3)}
.subin a[aria-current="page"]{color:var(--ink); background:var(--paper)}
.subin .dot{width:9px; height:9px; flex:none}
.subin .no{font-family:var(--f-mono); font-size:10px; color:var(--ink-3)}
.ixrow,.gitem,.brand{text-decoration:none; color:inherit}
.brand .nm,.brand .sub{display:block}
.brand > span{display:flex; flex-direction:column}
img.mk{width:40px; height:40px}
img.mkbig{width:120px; height:120px}

.d4{font-family:var(--f-display); font-weight:400; font-size:20px; line-height:1.2}
.lede.sm{font-size:15px}
.tbd{color:var(--red); font-weight:500}
.red{color:var(--red)}

/* FAQ */
.faq{border-top:1px solid var(--rule-strong); max-width:78ch}
.qa{border-bottom:1px solid var(--rule)}
.qa summary{list-style:none; cursor:pointer; display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s5); padding:var(--s5) 0; font-family:var(--f-display); font-size:clamp(18px,2.1vw,23px); line-height:1.3}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--red)}
.qa .mark{flex:none; width:16px; height:16px; position:relative; margin-top:6px}
.qa .mark::before,.qa .mark::after{content:""; position:absolute; background:var(--red); transition:transform .22s var(--settle)}
.qa .mark::before{top:7px; left:0; width:16px; height:2px}
.qa .mark::after{left:7px; top:0; width:2px; height:16px}
.qa[open] .mark::after{transform:scaleY(0)}
.qa > p{padding:0 0 var(--s5); color:var(--ink-2); font-size:15.5px; line-height:1.65; max-width:68ch}

.notyet{border:1px solid var(--rule-strong); background:var(--paper-2); padding:var(--s5); display:flex; flex-direction:column; gap:var(--s2)}
.notyet .d4{color:var(--red)}
.notyet .small{color:var(--ink-2); max-width:52ch}
.mapwrap{border:1px solid var(--rule-strong); overflow:hidden; aspect-ratio:16/7}
.mapwrap iframe{width:100%; height:100%; border:0; display:block}

/* photography */
.shot{margin:0; position:relative; overflow:hidden; border:1px solid var(--rule-strong); background:var(--paper-2)}
.shot img{width:100%; height:100%; object-fit:cover; display:block}
.shot.r169{aspect-ratio:16/9} .shot.r43{aspect-ratio:4/3} .shot.r11{aspect-ratio:1/1} .shot.r34{aspect-ratio:3/4}
.shot.r34 img,.shot.r11 img{object-position:center 22%}
.shot figcaption{position:absolute; left:0; bottom:0; right:0; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ivory); padding:22px var(--s4) 11px; background:linear-gradient(to top, rgba(26,16,14,.78), rgba(26,16,14,0))}
.shot.wide{grid-column:1/-1}
.mediagrid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.mediagrid:has(> :only-child){grid-template-columns:minmax(0,760px)}
.two:has(> :only-child),.two-e:has(> :only-child){grid-template-columns:minmax(0,1fr)}
.two:has(> :only-child) .lede{max-width:66ch}

/* full-bleed photography */
.bleed{margin:0; position:relative; width:100%; overflow:hidden; background:var(--ink)}
.bleed img{width:100%; height:clamp(320px,46vw,620px); object-fit:cover; display:block}
.bleed.tall img{height:clamp(380px,58vw,760px)}
.bleed figcaption{position:absolute; left:0; right:0; bottom:0; padding:var(--s8) 0 var(--s5); background:linear-gradient(to top, rgba(26,16,14,.72), rgba(26,16,14,0))}
.bleed figcaption .wrap{display:block; font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ivory)}
.band + .bleed,.bleed + .band{border-top:0}

/* dark band */
.band.dark{background:var(--ink); color:var(--paper)}
.band.dark h2,.band.dark h3{color:var(--paper)}
.band.dark .lede,.band.dark .small,.band.dark p{color:rgba(253,248,240,.74)}
.band.dark .eyebrow{color:rgba(253,248,240,.5)}
.band.dark .numlead{color:var(--red)}
.band.dark .pullrule{background:var(--red)}
.band.dark + .band{border-top:0}

/* selected work */
.worklist{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--s6)}
.workitem{display:flex; flex-direction:column}
.workitem .shot{aspect-ratio:auto; border-color:var(--rule-strong)}
.workitem .shot img{height:auto; object-fit:contain; background:var(--paper)}
.workitem .shot figcaption{position:static; background:none; color:var(--ink-3); padding:var(--s3) var(--s4) 0}
.workmeta{padding-top:var(--s4); border-top:2px solid var(--red); margin-top:var(--s4)}
.workmeta h3{font-family:var(--f-display); font-weight:400; font-size:clamp(20px,2.3vw,27px); line-height:1.1}
.workmeta p{margin-top:var(--s3); font-size:14.5px; color:var(--ink-2); line-height:1.6; max-width:46ch}

/* the founders' words */
.pullquote{margin:0; border-left:3px solid var(--red); padding-left:var(--s5)}
.quote-hi{font-family:"Tiro Devanagari Hindi", Georgia, serif; font-size:clamp(19px,2.3vw,27px); line-height:1.72; color:var(--ink)}
.quote-en{font-family:var(--f-display); font-style:italic; font-size:clamp(16px,1.8vw,21px); line-height:1.45; color:var(--ink-2); margin-top:var(--s4)}

/* timeline */
.timeline{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule-strong)}
.tl{display:grid; grid-template-columns:110px 1fr; gap:var(--s5); align-items:baseline; padding:var(--s5) 0; border-bottom:1px solid var(--rule)}
.tl-year{font-family:var(--f-display); font-size:clamp(21px,2.4vw,28px); line-height:1; color:var(--red)}
.tl-body{display:flex; flex-direction:column; gap:7px}
.tl-body strong{font-family:var(--f-display); font-weight:400; font-size:clamp(18px,2vw,22px); line-height:1.25}
.tl-body span{font-size:14.5px; color:var(--ink-2); line-height:1.6; max-width:64ch}

/* nav needs the scroll strip well before phone width */
@media(max-width:1040px){
  nav.tabs{gap:var(--s5); overflow-x:auto; flex-wrap:nowrap; width:100%; scrollbar-width:none; padding-bottom:3px;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 100%); mask-image:linear-gradient(90deg,#000 88%,transparent 100%)}
  nav.tabs::-webkit-scrollbar{display:none}
  nav.tabs a{white-space:nowrap}
  .topin{flex-wrap:wrap; row-gap:var(--s3)}
}
@media(max-width:900px){ .mediagrid{grid-template-columns:1fr 1fr} }
@media(max-width:820px){ .worklist{grid-template-columns:1fr} }
@media(max-width:700px){ .mediagrid{grid-template-columns:1fr} }
@media(max-width:640px){ .tl{grid-template-columns:1fr; gap:var(--s2)} }
@media(max-width:720px){
  img.mk{width:34px; height:34px}
  .bleed img{height:clamp(260px,58vw,420px)}
}
@media(max-width:900px){ img.mkbig{width:92px; height:92px} }

/* print: a clean one-page sheet */
@media print{
  @page{margin:16mm}
  html,body{background:#fff!important; color:#000!important}
  header.top,footer,.subnav,.btn,.btn-row,.crumb,.bleed,.shot,.mediagrid,.skip,nav{display:none!important}
  .band,.band.tight{padding:0!important; border:0!important}
  .band.tint,.band.dark{background:transparent!important; color:#000!important}
  .wrap{max-width:none; padding:0}
  .two,.three,.five{display:block!important}
  .d1,.d1.sm{font-size:26pt!important; line-height:1.1!important}
  .lede{font-size:10.5pt!important; color:#000!important; max-width:none}
  .spec .r{grid-template-columns:44mm 1fr; padding:2.4mm 0; border-bottom:.3pt solid #bbb; break-inside:avoid}
  .pullrule{background:#D91018!important; width:28mm}
}

/* ══════════════════════════════════════════════════════════════════
   MOTION — the chalk line.

   Before a lay is cut, a marker is chalked and a line snapped across
   the table. The hero enacts that once: lines of type lift clear of a
   clipped baseline, then a vermilion rule snaps across beneath them and
   the figures resolve as it passes. Everything else is feedback and
   continuity. Content is visible with JS off or failed.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --settle:cubic-bezier(.16,1,.3,1);   /* confident arrival  */
  --snap:cubic-bezier(.65,0,.35,1);    /* the chalk line     */
}

/* ── focal: the hero, once ─────────────────────────────────────── */
.lay{display:block}
.lay span{display:block; overflow:hidden}
.lay span i{display:block; font-style:inherit}
html.js .lay span i{transform:translateY(102%)}
html.js .hero-in .lay span i{
  transform:none;
  transition:transform .74s var(--settle);
}
html.js .hero-in .lay span:nth-child(2) i{transition-delay:.085s}
html.js .hero-in .lay span:nth-child(3) i{transition-delay:.17s}

html.js .lay-d,html.js .lay-d2{opacity:0}
html.js .hero-in .lay-d{opacity:1; transition:opacity .5s var(--settle) .30s}
html.js .hero-in .lay-d2{opacity:1; transition:opacity .5s var(--settle) .40s}

/* the chalk line snaps across, then the figures resolve behind it */
html.js .herofoot::before{transform:scaleX(0); transform-origin:left}
html.js .hero-in .herofoot::before{
  transform:scaleX(1);
  transition:transform .62s var(--snap) .46s;
}
html.js .herofoot div{opacity:0}
html.js .hero-in .herofoot div{opacity:1; transition:opacity .34s linear}
html.js .hero-in .herofoot div:nth-child(1){transition-delay:.60s}
html.js .hero-in .herofoot div:nth-child(2){transition-delay:.71s}
html.js .hero-in .herofoot div:nth-child(3){transition-delay:.82s}
html.js .hero-in .herofoot div:nth-child(4){transition-delay:.93s}

/* ── continuity: the header condenses once you leave the hero ──── */
header.top{transition:box-shadow .3s var(--settle), border-color .3s var(--settle)}
header.top .topin{transition:padding .34s var(--settle)}
header.top .brand .mk,header.top img.mk{transition:width .34s var(--settle), height .34s var(--settle)}
header.top.condensed{border-bottom-color:var(--rule-strong); box-shadow:0 1px 0 rgba(36,23,19,.04), 0 10px 24px -18px rgba(36,23,19,.5)}
header.top.condensed .topin{padding-top:10px; padding-bottom:10px}
header.top.condensed img.mk{width:30px; height:30px}
header.top.condensed .brand .sub{opacity:0; transition:opacity .2s linear}

/* ── continuity: the sector indicator slides between sectors ───── */
.subin{position:relative}
.subin .slider{
  position:absolute; bottom:0; height:3px; background:var(--red);
  transition:transform .42s var(--settle), width .42s var(--settle);
  pointer-events:none;
}
html.js .subin a[aria-current="page"]{border-bottom-color:transparent}

/* ── sequences that really are sequences ───────────────────────── */
html.js .reveal{opacity:0; transform:translateY(16px)}
html.js .reveal.in{opacity:1; transform:none; transition:opacity .6s var(--settle), transform .6s var(--settle)}
html.js .reveal.in:nth-child(2){transition-delay:.07s}
html.js .reveal.in:nth-child(3){transition-delay:.14s}
html.js .reveal.in:nth-child(4){transition-delay:.21s}

/* ── photographs settle rather than fade ───────────────────────── */
@supports (animation-timeline: view()){
  html.js .bleed img{
    animation:settle linear both;
    animation-timeline:view();
    animation-range:entry 0% entry 90%;
  }
  @keyframes settle{ from{transform:scale(1.07)} to{transform:none} }
}

/* ── feedback ──────────────────────────────────────────────────── */
.btn{transition:background .18s var(--settle), border-color .18s var(--settle), transform .14s var(--settle)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.985); transition-duration:90ms}
.ixrow .bar{transition:height .3s var(--settle), transform .3s var(--settle)}
.ixrow:hover .bar{height:72px}
.ixrow .go{transition:transform .26s var(--settle)}
.ixrow:hover .go{transform:translateX(6px)}
.shot img{transition:transform .5s var(--settle)}
.workitem:hover .shot img{transform:scale(1.02)}
.workmeta{transition:border-color .25s var(--settle)}
.tl:hover .tl-year{transform:translateX(3px)}
.tl-year{transition:transform .25s var(--settle)}

@media (prefers-reduced-motion:reduce){
  html.js .lay span i,html.js .lay-d,html.js .lay-d2,
  html.js .herofoot div,html.js .reveal{opacity:1!important; transform:none!important}
  html.js .herofoot::before{transform:scaleX(1)!important}
  html.js .bleed img{animation:none!important}
  *{transition-duration:1ms!important; animation-duration:1ms!important}
}

/* Four figures read better as two pairs than three-and-an-orphan. */
@media(max-width:520px){
  .herofoot{display:grid; grid-template-columns:1fr 1fr; gap:var(--s5) var(--s4)}
}

/* ── the long read: Since 1987 ─────────────────────────────────────────
   Chapters run down a year rail, the same 110px rail the timeline uses,
   so the two read as one spine rather than two unrelated components. */
.chapters{display:flex; flex-direction:column; gap:var(--s8)}
.chapter{display:grid; grid-template-columns:110px 1fr; gap:var(--s5)}
.ch-year{font-family:var(--f-display); font-size:clamp(21px,2.4vw,28px); line-height:1.1; color:var(--red)}
.ch-body{display:flex; flex-direction:column; gap:var(--s4); max-width:64ch}
.ch-body h2{margin-bottom:var(--s2)}
.ch-pull{margin:var(--s3) 0}
.ch-pull p{font-family:var(--f-display); font-style:italic; font-size:clamp(17px,1.9vw,22px); line-height:1.45; color:var(--ink); max-width:44ch}
.band.dark .ch-pull p{color:var(--paper)}
.band.dark .pullquote .quote-en{color:var(--paper)}
.band.dark .ch-body h2{color:var(--paper)}
.two > .chapters{gap:var(--s6)}
.two > .chapters .chapter{grid-template-columns:1fr; gap:var(--s3)}
@media(max-width:640px){ .chapter{grid-template-columns:1fr; gap:var(--s3)} .chapters{gap:var(--s7)} }

/* what changed, and what it changed into */
.fromto{list-style:none; margin:var(--s5) 0 0; padding:0; border-top:1px solid var(--rule-strong)}
.fromto li{display:grid; grid-template-columns:1fr auto 1fr; gap:var(--s4); align-items:baseline; padding:13px 0; border-bottom:1px solid var(--rule); font-size:14.5px; line-height:1.5}
.fromto li::before{content:"→"; grid-column:2; grid-row:1; color:var(--red); font-family:var(--f-mono); font-size:12px}
.ft-a{grid-column:1; color:var(--ink-3)}
.ft-b{grid-column:3; color:var(--ink)}
@media(max-width:560px){ .fromto li{grid-template-columns:1fr; gap:2px} .fromto li::before{grid-column:1; grid-row:auto} .ft-a,.ft-b{grid-column:1} }

/* four in the family row now, not three */
.people{grid-template-columns:repeat(4,1fr); gap:var(--s6)}
@media(max-width:1040px){ .people{grid-template-columns:1fr 1fr; gap:var(--s5)} }
@media(max-width:560px){ .people{grid-template-columns:1fr} }