/* case.css: shared case-study chrome (six projects). Load last in <body>. */

/* tokens — one pad/gap scale for every case */
html:root{
  --pad:20px;
  --gap:20px;
  --on-paper-2:#6f6d68;
  --hair:rgba(14,14,14,.16);
  --rule-p:rgba(14,14,14,.85);
}
@media(min-width:900px){
  html:root{--pad:28px;--gap:28px}
}

/* statement / close — shared size, paper tokens (dark-mode safe) */
main .statement,main .close,main .stack>.statement{
  aspect-ratio:auto!important;min-height:0!important;margin:0!important;
  padding-top:104px!important;padding-bottom:104px!important;
  display:grid!important;place-items:center start!important;text-align:left!important;
  position:relative!important;top:auto!important;box-shadow:none!important;box-sizing:border-box!important;
  padding-left:max(var(--pad),env(safe-area-inset-left,0px))!important;
  padding-right:max(var(--pad),env(safe-area-inset-right,0px))!important;
  transition:background-color .6s ease,color .6s ease!important;
  background:var(--paper,#f3f2ee)!important;color:var(--on-paper,#0e0e0e)!important;
}
main .statement.inv,main .close.inv,main .stack>.statement.inv{
  background:var(--ink,#0e0e0e)!important;color:var(--on-ink,#f3f2ee)!important;
}
html[data-theme="dark"] main .statement:not(.inv),
html[data-theme="dark"] main .close:not(.inv),
html[data-theme="dark"] main .stack>.statement:not(.inv){
  background:var(--paper,#111110)!important;color:var(--on-paper,#efeee9)!important;
}
html[data-theme="dark"] main .statement.inv,
html[data-theme="dark"] main .close.inv,
html[data-theme="dark"] main .stack>.statement.inv{
  background:#efeee9!important;color:#111110!important;
}
main .statement p,main .close p,main .stack>.statement p,
main .statement .tw,main .close .tw,main .stack>.statement .tw{
  margin:0!important;font-size:clamp(30px,4.2vw,60px)!important;line-height:1.05!important;
  letter-spacing:-.03em!important;max-width:22ch!important;text-align:left!important;
  font-family:var(--head,var(--font))!important;font-weight:500!important;
  color:inherit!important;
}
@media(max-width:700px){
  main .statement,main .close,main .stack>.statement{padding-top:64px!important;padding-bottom:64px!important}
  main .statement p,main .close p,main .stack>.statement p{font-size:clamp(28px,8.4vw,40px)!important;max-width:15ch!important}
}
@media(prefers-reduced-motion:reduce){main .statement,main .close{transition:none!important}}

/* dark-mode artwork / sponsor marks: light backing or invert black marks */
html[data-theme="dark"] .sp-logos li,
html[data-theme="dark"] .sponsors.sp-logos li,
html[data-theme="dark"] ul.sponsors li,
html[data-theme="dark"] .meta .press a{
  background:#efeee9!important;border-radius:2px;
}
html[data-theme="dark"] .sp-logos img,
html[data-theme="dark"] .sponsors img,
html[data-theme="dark"] .meta .press img{
  filter:none;
}
html[data-theme="dark"] .b-logo img[src*="black"],
html[data-theme="dark"] img[src*="wordmark-alt-black"],
html[data-theme="dark"] img[src*="lk-seal-black"]{
  filter:invert(1);
}
/* Force readable statement/close glyphs even while typewriter runs */
html[data-theme="dark"] main .statement .tw > span[aria-hidden],
html[data-theme="dark"] main .close .tw > span[aria-hidden]{
  color:#efeee9!important;
}
html[data-theme="dark"] main .statement.inv .tw > span[aria-hidden],
html[data-theme="dark"] main .close.inv .tw > span[aria-hidden]{
  color:#111110!important;
}

/* body + rows */
html body{font-weight:400;font-size:15px;line-height:1.5}
main .row{padding-top:24px!important;padding-bottom:40px!important}
.body>.dots:first-child,.body>ul:first-child{margin-top:0!important}
.body .dots{margin-top:8px}
.body .dots li{margin:0 0 8px!important}
.body .dots li:last-child{margin-bottom:0!important}
.body p,.body li{text-align:start;text-justify:inter-word;hyphens:manual;-webkit-hyphens:manual;hyphenate-limit-chars:6 3 3}
.body p.meta-note{text-align:left}
@media(max-width:700px){.body,.body p,.body li{font-size:17px!important;line-height:1.55!important}}

/* section labels — one language */
html body .label,main .label{
  font-size:11px!important;letter-spacing:.12em!important;text-transform:uppercase;
  font-weight:500!important;border-top:1px solid var(--rule-p,rgba(14,14,14,.85));
  padding-top:12px;margin-bottom:28px;font-family:var(--head,var(--font))!important;
}

/* footer / prev-next / drop-me-a-line */
footer:has(>.credits:first-child),footer:has(>style+.credits),footer:has(>.pn:not(.nb)){border-top:0!important}
.dml{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid currentColor;font-size:11px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:inherit;white-space:nowrap}
.dml:hover{background:var(--on-paper,#0e0e0e);color:var(--paper,#f3f2ee)!important;border-color:var(--on-paper,#0e0e0e)}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap,24px);align-items:start}
.pn .next{margin-top:0}
.pn .next:not(.prev){text-align:right}
.pn.nb .next{border-top:0}
@media(max-width:640px){
  html body .pn{grid-template-columns:1fr 1fr!important;gap:var(--gap,16px)!important}
  html body .pn .next:not(.prev){text-align:right!important}
  html body .pn .prev{margin-bottom:0!important}
}

/* sticky opaque paper header — never sits over scrolling text/imagery */
html:root{--hdr-h:52px}
header.top{
  position:sticky!important;top:0!important;z-index:50;
  mix-blend-mode:normal!important;color:var(--on-paper,#0e0e0e)!important;
  background:var(--paper,#f3f2ee)!important;border-bottom:1px solid var(--hair,rgba(14,14,14,.16))!important;
  display:grid!important;grid-template-columns:1fr auto auto 1fr;align-items:center;
  padding-top:calc(14px + env(safe-area-inset-top,0px))!important;padding-bottom:14px!important;
  font-size:11px!important;letter-spacing:.12em;text-transform:uppercase;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
header.top a,header.top button,header.top span{color:inherit!important}
header.top .nav{justify-self:end;display:flex;gap:18px;align-items:center;grid-column:4;flex-wrap:nowrap}
header.top .who{justify-self:center;grid-column:2}
header.top #pjBtn,header.top .pj-btn{justify-self:center;grid-column:3;margin-left:18px}
header.top > a:first-child{justify-self:start;grid-column:1}
/* Clearance under sticky header for page sticky bands (Fresh filters, etc.) */
main .types,main .fp-tags,.types.sticky{top:var(--hdr-h,52px)!important}
@media(max-width:700px){
  html:root{--hdr-h:48px}
  /* Work | Projects | Prev/Next — no centered name on narrow screens */
  header.top{grid-template-columns:auto 1fr auto!important;gap:10px!important}
  header.top .who{display:none!important}
  header.top #pjBtn,header.top .pj-btn{grid-column:2;justify-self:end;margin-left:0}
  header.top .nav{grid-column:3;gap:12px!important}
  header.top .s-l{display:none}header.top .s-s{display:inline}
  header.top .gm-pm{display:none} /* motion lives in footer prefs on phone */
}
@media(max-width:420px){
  header.top{gap:8px!important;font-size:10px!important;grid-template-columns:auto auto!important}
  header.top .nav{gap:10px!important;grid-column:2!important}
  /* Drop Projects control at phone width — Work + Prev/Next only (no overlap) */
  header.top #pjBtn,header.top .pj-btn{display:none!important}
}
.top .s-l{display:inline}.top .s-s{display:none}

.pj-btn{font:inherit;letter-spacing:inherit;text-transform:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;color:inherit}
.pj-btn[aria-expanded="true"]{text-decoration:underline;text-underline-offset:3px}
.pj{position:fixed;z-index:70;left:var(--pjx,50%);top:var(--pjy,50px);transform:translateX(-50%);min-width:260px;max-width:calc(100vw - 32px);background:var(--paper,#f3f2ee);color:var(--on-paper,#0e0e0e);border:1px solid rgba(14,14,14,.18);box-shadow:0 14px 30px rgba(0,0,0,.12)}
.pj[hidden]{display:none}
.pj-list{list-style:none;margin:0;padding:0}
.pj-list a{display:grid;grid-template-columns:24px minmax(0,1fr);gap:8px;padding:9px 14px;border-bottom:1px solid rgba(14,14,14,.1);font-size:12px;letter-spacing:.02em;line-height:1.35;color:inherit;text-decoration:none;text-transform:none}
.pj-list li:last-child a{border-bottom:0}
.pj-list .n{opacity:.5}
.pj .pj-about a{border-top:1px solid rgba(14,14,14,.18)}
.pj-list a:hover,.pj-list a:focus-visible{background:var(--on-paper,#0e0e0e);color:var(--paper,#f3f2ee)}
@media(max-width:700px){.pj{left:auto;right:16px;transform:none}}

/* premise / meta */
#premise{padding-bottom:clamp(48px,6vw,80px)!important}
#premise .label{margin-bottom:8px!important}
#premise .row{padding-top:10px!important;padding-bottom:14px!important;row-gap:6px!important}
#premise .row h3{padding-top:.35em}
.meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);font-size:12px;line-height:1.3}
.meta>div{display:grid;gap:var(--s2,16px);align-content:start}
.meta>div>dl{margin:0;display:grid;gap:2px}
.meta dt{color:var(--on-paper-2);font-weight:500;text-transform:none}
.meta dd{margin:0;font-weight:500}
@media(max-width:700px){.meta{grid-template-columns:1fr 1fr}}

/* credits — 3-col rhythm */
.credits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);font-size:12px;padding:28px 0;border-top:1px solid var(--rule-p)}
.credits dt{color:var(--on-paper-2);font-weight:500;margin:0 0 4px}
.credits dd{margin:0}
@media(max-width:700px){.credits{grid-template-columns:1fr 1fr}}

/* titles — shared display step (Freaney/VH/TDC parity) */
main h1{
  font-family:var(--head,var(--font))!important;font-weight:500!important;
  font-size:clamp(72px,12.5vw,210px)!important;line-height:.84!important;letter-spacing:-.055em!important;
  text-wrap:balance;text-align:center;margin-left:auto;margin-right:auto;
}
@media(max-width:700px){
  main h1{font-size:clamp(50px,14.5vw,92px)!important;line-height:.88!important}
}
.tlw{display:inline-block;white-space:nowrap}
.tl{opacity:0;display:inline-block}
.tl.on{opacity:1}
.tw span{opacity:0}.tw span.on{opacity:1}
@media(prefers-reduced-motion:reduce){.tl,.tw span{opacity:1}}

/* audit-legibility */
.label,.row h3,.next span,.tag,.steps .n,.talk .n,.mini,.bh{font-size:11px!important}

/* lightbox — one system */
#zm{position:fixed;inset:0;z-index:100;background:rgba(10,10,10,.94);display:none;align-items:center;justify-content:center;padding:56px 64px;touch-action:none;overscroll-behavior:contain}
#zm.on{display:flex}
#zm .zm-stage{position:relative;max-width:100%;max-height:100%;display:grid;place-items:center;overflow:hidden;cursor:zoom-in}
#zm.zoomed .zm-stage{cursor:grab}
#zm.zoomed.dragging .zm-stage{cursor:grabbing}
#zmI,#zmV{max-width:min(100%,calc(100vw - 128px));max-height:min(100%,calc(100dvh - 112px));width:auto;height:auto;object-fit:contain;transform-origin:center center;will-change:transform;user-select:none;-webkit-user-drag:none;box-shadow:0 20px 60px rgba(0,0,0,.5)}
#zmV[hidden]{display:none!important}
#zm button{position:absolute;background:none;border:1px solid rgba(255,255,255,.4);color:#fff;font:inherit;font-family:var(--font);font-size:14px;min-width:44px;min-height:44px;cursor:pointer;z-index:2}
#zm .x{top:12px;right:12px}#zm .p{left:12px;top:50%;transform:translateY(-50%)}#zm .n{right:12px;top:50%;transform:translateY(-50%)}
#zm .c{position:absolute;left:0;right:0;bottom:16px;text-align:center;color:#ddd;font-size:12px;font-family:var(--font);pointer-events:none;z-index:2}
#zm .zm-state{position:absolute;top:14px;left:14px;z-index:2;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#fff;border:1px solid rgba(255,255,255,.55);padding:6px 10px;opacity:0;pointer-events:none;transition:opacity .2s;font-family:var(--font)}
#zm.zm-vid-playing .zm-state{opacity:1}
#zm.zm-vid-playing .zm-state::before{content:"Playing"}
@media(max-width:640px){#zm{padding:52px 12px 64px}#zmI,#zmV{max-width:calc(100vw - 24px);max-height:calc(100dvh - 140px)}#zm .p,#zm .n{top:auto;bottom:10px;transform:none}}
@media(prefers-reduced-motion:reduce){#zm .zm-state{transition:none}}

.scr:has(>video.is-playing)::after,.scr:has(>ul video.is-playing)::after{content:"Playing";position:absolute;top:10px;right:10px;z-index:6;font:500 10px/1.2 var(--font,inherit);letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.45);padding:5px 8px;pointer-events:none}

/* logo picker (TDC) opens into #zm; keep grid shell only */
.lbx{position:fixed;inset:0;z-index:90;background:rgba(10,10,10,.94);color:#fff;display:none;overflow:auto;padding:48px var(--pad)}
.lbx.on{display:block}
.lbx .big{overflow:hidden;touch-action:none}
.lbx .big img{transform-origin:center center;will-change:transform;user-select:none;-webkit-user-drag:none;cursor:zoom-in}
.lbx .big.zoomed img{cursor:grab}
.lbx .big.zoomed.dragging img{cursor:grabbing}

/* TDC 60-second mode (chrome present; markup opts in) */
.gm-60b{font:inherit;font-size:11px;letter-spacing:.12em;text-transform:uppercase;background:none;border:1px solid var(--hair,#e4e2dc);color:var(--on-paper,#0e0e0e);padding:8px 12px;cursor:pointer;min-height:36px}
.gm-60b:focus-visible{outline:2px solid var(--on-paper,#0e0e0e);outline-offset:2px}
.gm-60b[aria-pressed="true"]{background:var(--on-paper,#0e0e0e);color:var(--paper,#f3f2ee);border-color:var(--on-paper,#0e0e0e)}
body.gm-60-on main>.block,body.gm-60-on main>.stack,body.gm-60-on main>.close{display:none!important}
#gm60{display:none;margin:0 auto;padding:0 max(var(--pad,24px),env(safe-area-inset-left,0px)) clamp(48px,8vw,96px);max-width:720px}
body.gm-60-on #gm60{display:block}
#gm60 h2{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;margin:0 0 28px;color:var(--on-paper-2,#666)}
#gm60 dl{margin:0;display:grid;gap:28px}
#gm60 dt{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;margin:0 0 8px;color:var(--on-paper-2,#666)}
#gm60 dd{margin:0;font-size:clamp(17px,1.6vw,20px);line-height:1.45;color:var(--on-paper,#0e0e0e);max-width:42ch}
.head .gm-60-row{margin-top:18px;display:flex;justify-content:flex-start}

/* gallery hover language shared */
.pt{cursor:zoom-in}
.pt img{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.pt:hover img,.pt:focus-visible img{transform:scale(1.06);box-shadow:0 24px 48px rgba(0,0,0,.28)}
@media(hover:none){.pt:hover img{transform:none}}
@media(prefers-reduced-motion:reduce){.pt img{transition:none}.pt:hover img,.pt:focus-visible img{transform:none}}