/* WORK index + case studies (owner: WORK subagent). Tokens from base-home.css/home.css: --m, --g, --hdr, --hair, --out, --ease.
   Type: Bookish (display, body) + Haas Display (UI captions). Cream on the blue suede. No labels, no numbers, no tracked caps. */

/* ================================================================ WORK INDEX */
.wk{padding:calc(var(--hdr) + clamp(56px,9vh,112px)) 0 clamp(96px,14vh,168px)}
.wk__head{padding:0 var(--m);margin-bottom:clamp(40px,6vh,72px)}
.wk__h1{font:400 clamp(56px,7.4vw,128px)/.9 "Bookish",Georgia,serif;letter-spacing:-.015em}

.wk__list{
  /* geometry the script reads (px only): caption band, thin-strip window, foot padding */
  --cap:46px;--strip:64px;--pb:16px;
  --iw:min(46vw,720px);--tfs:min(13.5vw,232px);--ih:min(calc(var(--iw) * .7), calc(100svh - var(--hdr) - 300px));
  list-style:none;position:relative;margin:0 var(--m);border-bottom:1px solid var(--hair)}
@media (max-width:767px){.wk__list{--tfs:21vw;--cap:42px;--strip:52px;--pb:12px;--iw:76vw;--ih:min(calc(var(--iw) * 1.04), calc(100svh - var(--hdr) - 260px))}}

.wk__row{position:relative;display:block;color:inherit;outline:none;-webkit-touch-callout:none}
.wk__row::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--hair)}
.wk__cap{position:absolute;left:0;right:0;top:14px;display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  font:400 15px/1.2 "Haas Display",sans-serif;pointer-events:none}
.wk__name{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk__cat{min-width:0;text-align:right;opacity:.82;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk__cat-s{display:none}
@media (max-width:767px){.wk__cat-l{display:none}.wk__cat-s{display:inline}}
.wk__win{position:absolute;left:50%;top:var(--cap);width:var(--iw);height:var(--ih);margin-left:calc(var(--iw) / -2);overflow:hidden;
  background:rgba(0,16,70,.28)}
.wk__win img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;user-select:none;-webkit-user-drag:none}
.wk__scrim{position:absolute;inset:0;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,10,46,0) 12%,rgba(0,10,46,.42) 50%,rgba(0,10,46,0) 88%)}
.wk__list:not(.is-live) .wk__item:first-child .wk__scrim{opacity:1}
.wk__title{position:absolute;left:0;right:0;top:var(--cap);height:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;z-index:2;opacity:0}
.wk__title span{display:block;font:400 var(--fs,var(--tfs))/.84 "Bookish",Georgia,serif;letter-spacing:-.012em;text-transform:uppercase;
  text-align:center;padding-top:.08em;text-wrap:balance;max-width:100%;color:var(--cream);text-shadow:0 .02em .3em rgba(0,10,48,.4)}
.wk__row:focus-visible .wk__name{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}

/* static fallback (no script, or script failed): every row open, normal flow */
.wk__list:not(.is-live) .wk__item{height:calc(var(--cap) + var(--ih) + var(--pb))}
.wk__list:not(.is-live) .wk__item:first-child .wk__title{opacity:1}

/* live accordion: rows absolutely placed by work.js (translate3d), windows clipped around their centre */
.wk__list.is-live .wk__item{position:absolute;left:0;right:0;top:0;height:calc(var(--cap) + var(--ih) + var(--pb));will-change:transform}
.wk__list.is-live .wk__win{will-change:transform,clip-path}
.wk__list.is-live .wk__title{will-change:transform,opacity}
.wk__list.is-live .wk__row{height:100%}

/* ================================================================ CASE STUDY */
.cs{padding:calc(var(--hdr) + clamp(28px,4vh,48px)) 0 clamp(80px,12vh,140px)}
.cs__top{padding:0 var(--m)}
.cs__back,.cs__nb{color:inherit}
.cs__back{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:500 15px/1 "Haas Display",sans-serif;transition:opacity 180ms var(--ease)}
.cs__back svg{width:10px;height:10px;transform:rotate(-135deg)}
@media (hover:hover){.cs__back:hover{opacity:.62}}
.cs__back:active{transform:scale(.97)}

.cs__hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);padding:clamp(40px,8vh,104px) var(--m) clamp(28px,4vh,44px);align-items:end}
.cs__h1{grid-column:1 / span 8;font:400 clamp(56px,8.2vw,148px)/.92 "Bookish",Georgia,serif;letter-spacing:-.02em;text-wrap:balance}
.cs__meta{grid-column:9 / span 4;justify-self:end;text-align:right;font:400 17px/1.4 "Haas Display",sans-serif;opacity:.86;padding-bottom:.5em;text-wrap:balance}

.cs__cover{margin:0 var(--m)}
.cs__fig img,.cs__cover img{width:100%;height:auto;background:rgba(0,16,70,.28)}
.cs__fig figcaption,.cs__cover figcaption{margin-top:12px;font:400 15px/1.4 "Haas Display",sans-serif;opacity:.78}

.cs__lede{padding:clamp(72px,12vh,144px) var(--m) 0;font:400 clamp(34px,3.6vw,60px)/1.06 "Bookish",Georgia,serif;letter-spacing:-.012em;
  max-width:calc(18em + 2 * var(--m));text-wrap:balance}

.cs__body{padding:clamp(64px,10vh,120px) var(--m) 0}
.cs__sec{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);border-top:1px solid var(--hair);
  padding:24px 0 clamp(56px,8vh,96px)}
.cs__h2{grid-column:1 / span 4;font:400 clamp(28px,2.5vw,40px)/1.08 "Bookish",Georgia,serif;letter-spacing:-.01em}
.cs__txt{grid-column:6 / span 6;padding-top:.3em}
.cs__txt p{font:400 19px/1.55 "Bookish",Georgia,serif;max-width:60ch}
.cs__txt p+p{margin-top:1em}
.cs__stub{opacity:.7;font-style:italic}
.cs__list{list-style:none;margin-top:28px;border-top:1px solid var(--hair)}
.cs__list li{font:400 17px/1.4 "Haas Display",sans-serif;padding:12px 0;border-bottom:1px solid var(--hair)}

.cs__gallery{padding:0 var(--m);display:flex;flex-direction:column;gap:var(--g)}
.cs__g--row{display:flex;gap:var(--g);align-items:flex-start}
.cs__g--row .cs__fig{flex:var(--r) 1 0;min-width:0}
.cs__g--one{display:flex;justify-content:center}
.cs__g--one .cs__fig{width:min(100%,calc(86svh * var(--r)),calc(50% + var(--g)))}
.cs__g--wide .cs__fig{width:100%}

.cs__end{padding:clamp(96px,14vh,168px) var(--m) 0}
.cs__pn{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--g);border-top:1px solid var(--hair)}
.cs__nb{display:grid;grid-template-columns:clamp(96px,11vw,168px) minmax(0,1fr);column-gap:20px;align-items:center;padding:24px 0;min-height:44px}
.cs__nb--next{grid-template-columns:minmax(0,1fr) clamp(96px,11vw,168px);text-align:right;border-left:1px solid var(--hair);padding-left:var(--g)}
.cs__nb--next .cs__nb-img{order:2}
.cs__nb-img{display:block;aspect-ratio:4/3;overflow:hidden;background:rgba(0,16,70,.28)}
.cs__nb-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--out)}
.cs__nb-w{display:block;font:400 15px/1.3 "Haas Display",sans-serif;opacity:.78}
.cs__nb-t{display:block;margin-top:8px;font:400 clamp(26px,2.5vw,40px)/1.04 "Bookish",Georgia,serif;letter-spacing:-.01em;transition:opacity .3s var(--out)}
@media (hover:hover){.cs__nb:hover .cs__nb-img img{transform:scale(1.04)}.cs__nb:hover .cs__nb-t{opacity:.7}}
.cs__nb:active{transform:scale(.99)}
.cs__nb:focus-visible{outline:2px solid var(--cream);outline-offset:4px}
.cs__cta{display:flex;justify-content:center;padding-top:clamp(56px,8vh,88px)}

@media (max-width:767px){
  .cs__hero{display:block;padding:40px var(--m) 24px}
  .cs__h1{font-size:clamp(44px,13vw,64px)}
  .cs__meta{text-align:left;margin-top:16px;max-width:none}
  .cs__cover{margin:0}
  .cs__cover figcaption{padding:0 var(--m)}
  .cs__lede{font-size:30px;padding-top:64px}
  .cs__body{padding-top:56px}
  .cs__sec{display:block;padding:20px 0 48px}
  .cs__txt{padding-top:16px}
  .cs__txt p{font-size:17px}
  .cs__gallery{gap:var(--g)}
  .cs__g--row{flex-direction:column}
  .cs__g--row .cs__fig,.cs__g--one .cs__fig{width:100%;flex:none}
  .cs__pn{grid-template-columns:1fr}
  .cs__nb{grid-template-columns:96px minmax(0,1fr)}
  .cs__nb--next{grid-template-columns:96px minmax(0,1fr);text-align:left;border-left:0;padding-left:0;border-top:1px solid var(--hair)}
  .cs__nb--next .cs__nb-img{order:0}
  .cs__nb-t{font-size:28px}
}

/* rise on scroll: only once work.js has armed it (so a failed script never hides content) */
.rv-armed .rv:not(.is-in){opacity:0;transform:translate3d(0,20px,0)}
.rv-armed .rv{transition:opacity .9s var(--out),transform .9s var(--out)}

@media (prefers-reduced-motion:reduce){
  .rv-armed .rv:not(.is-in){opacity:1;transform:none}
  .rv-armed .rv,.cs__nb-img img,.cs__nb-t{transition:none}
}

/* ================================================================ v2 (27 Oct): paged, locked index; no title overlay; rounded cards
   The page does not scroll. The stage is the viewport below the heading; work.js keeps the focused card at its centre. */
.wk__title,.wk__scrim{display:none!important}
.wk__list{--rad:10px}
.wk__win{border-radius:var(--rad)}
.cs__fig img,.cs__cover img{border-radius:10px}
html.wk-paged,html.wk-paged body{height:100%;overflow:hidden;overscroll-behavior:none}
html.wk-paged .foot{display:none}
html.wk-paged main{height:100svh;overflow:hidden}
html.wk-paged .wk{height:100svh;display:flex;flex-direction:column;padding:calc(var(--hdr) + 4px) 0 0}
html.wk-paged .wk__head{margin-bottom:0;flex:none}
html.wk-paged .wk__h1{font-size:clamp(48px,5.6vw,88px)}
.wk__stage{position:relative;overflow:hidden}
html.wk-paged .wk__stage{flex:1;min-height:0;touch-action:none;-webkit-user-select:none;user-select:none}
.wk__list{--ih:min(calc(var(--iw) * .7), calc(100svh - var(--hdr) - 380px))}
html.wk-paged .wk__list{border-bottom:0;margin:0 var(--m)}
@media (max-width:767px){
  .wk__list{--ih:min(calc(var(--iw) * 1.04), calc(100svh - var(--hdr) - 330px))}
  html.wk-paged .wk__h1{font-size:44px}
}
@media (hover:hover){.wk__row{cursor:default}.wk__row[aria-current="false"]{cursor:pointer}}
html.wk-paged .wk__head{margin-bottom:clamp(16px,3vh,28px)}
html.wk-paged .wk__stage{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%)}

/* ================================================================ v3 (27 Oct): depth
   card wrapper carries the shadow (the clip on .wk__win would cut a shadow off); cards recede with distance from focus;
   the suede gets a vignette; hover on the focused card blurs the image and shows VIEW PROJECT. */
.wk__card{position:absolute;left:50%;top:var(--cap);width:var(--iw);height:var(--ih);margin-left:calc(var(--iw) / -2);--sh:1;
  transform-origin:50% 50%}
.wk__win{left:0;top:0;margin:0;width:100%;height:100%}
.wk__list.is-live .wk__card{will-change:transform,opacity}
.wk__view{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;
  background:rgba(0,12,56,.28);transition:opacity 420ms var(--out)}
.wk__view span{font:500 17px/1 "Haas Display",sans-serif;letter-spacing:.06em;color:var(--cream);padding:0 0 2px;
  transform:translate3d(0,8px,0);transition:transform 520ms var(--out)}
.wk__win img{transition:filter 520ms var(--out),transform 700ms var(--out)}
@media (hover:hover) and (pointer:fine){
  .wk__row[aria-current="true"].is-hot .wk__win img,.wk__row[aria-current="true"]:focus-visible .wk__win img{filter:blur(16px);transform:scale(1.08)}
  .wk__row[aria-current="true"].is-hot .wk__view,.wk__row[aria-current="true"]:focus-visible .wk__view{opacity:1}
  .wk__row[aria-current="true"].is-hot .wk__view span,.wk__row[aria-current="true"]:focus-visible .wk__view span{transform:none}
}
@media (prefers-reduced-motion:reduce){.wk__win img,.wk__view,.wk__view span{transition:none}}
/* vignette: edges fall into shadow so the lit centre reads as the stage */
.pg-work::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 46%,rgba(0,20,110,0) 38%,rgba(0,6,40,.42) 100%)}
.pg-work main,.pg-work .hdr{position:relative}
.pg-work .hdr{position:fixed}
@media (prefers-reduced-motion:no-preference){.wk__card{transition:none}}
/* shadow plate: a separate, unclipped box that follows the visible window by scaleY only (composited, so the blur is rasterised once) */
.wk__plate{position:absolute;inset:0;border-radius:var(--rad);box-shadow:0 34px 44px -6px rgba(0,6,36,.5),0 10px 16px rgba(0,6,36,.38),0 0 0 1px rgba(0,6,36,.18);will-change:transform,opacity}
.wk__head{text-align:center}.wk__h1{text-align:center}