/* =====================================================================
   case.css: a case study's article. The sheets on the home page (index.html) and the case pages (case-studies/<slug>.html,
   written by case_pages.py) share these rules; the sheet's chrome and the image viewer stay in index.html.
   ===================================================================== */
.u{text-decoration:none;color:inherit;background-image:linear-gradient(currentColor,currentColor),linear-gradient(var(--line),var(--line));background-size:0% 1px,100% 1px;background-position:0 100%,0 100%;background-repeat:no-repeat;padding-bottom:2px;transition:background-size .45s var(--ease),color .25s}
.shot img.photo{border-radius:6px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.tags li{background:var(--surface-2);color:var(--text);font:500 .78rem/1 var(--body-font);padding:.62em 1em;border-radius:999px}
.feature{margin-top:clamp(56px,6vw,80px)}
.feature > p{margin-top:12px;max-width:62ch;color:var(--text-2)}
.feature > h3{margin-top:0}
.shot.cover{margin-top:32px}
.shot.cover img{width:auto;max-width:100%;max-height:min(520px,60vh)}
.shot figcaption.quote{display:block;margin-top:12px;text-align:center;font-size:.92rem;color:var(--muted);max-width:none}
.feature .shot + p{margin-top:28px}
.summary{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);font:500 1.08rem/1.6 var(--body-font);color:var(--text);max-width:58ch}
.case{padding:40px clamp(20px,6vw,56px) 64px}
.case h1,.case h2{font:800 clamp(2.2rem,4.4vw,3.4rem)/.95 var(--display-font);letter-spacing:-.02em;margin:0;color:var(--display)}
.case .lede{margin-top:20px;font-size:1.1rem;max-width:40em}
.case .lede b{color:var(--accent);font-weight:600}
.meta{display:flex;flex-wrap:wrap;gap:16px clamp(24px,4vw,48px);margin-top:24px}
.meta dt{font:600 1.05rem/1.1 var(--display-font);text-transform:uppercase;letter-spacing:.03em;color:var(--display)}
.meta dd{color:var(--muted);margin-top:5px;font-size:.92rem}
.shot{margin-top:36px}
.shot a{display:block;cursor:default;border-radius:10px;background:var(--card);padding:clamp(14px,2.4vw,24px);transition:background .3s var(--ease)}
.shot a:hover{background:var(--card-hover)}
.shot img{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100svh - 190px);margin-inline:auto;object-fit:contain}
.shot.sq img{max-width:500px}
.shot.tall img{max-width:460px}
.shot figcaption{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;margin-top:14px;color:var(--text-2);max-width:62ch}
.decisions.solo{margin-top:18px}
.case h3{margin-top:48px;font:700 clamp(1.3rem,1.7vw,1.6rem)/1.1 var(--display-font);text-transform:uppercase;letter-spacing:.01em;color:var(--display)}
.case h3 + *{margin-top:14px}
.case p{max-width:62ch}
.decisions{display:grid;gap:12px}
.decisions li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;color:var(--text-2);max-width:62ch}
.pill{display:inline-block;background:var(--surface-2);color:var(--text);font:500 .74rem/1 var(--body-font);padding:.6em 1em;border-radius:999px;white-space:nowrap}
.case-end{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center}
.next{font:600 .9rem/1.3 var(--display-font);text-transform:uppercase;letter-spacing:.05em}
.next .u{color:var(--accent)}
.case h1{text-transform:uppercase}
.bullets{list-style:disc;padding-inline-start:1.2em}
@media (max-width:560px){
  .decisions li{grid-template-columns:1fr;gap:6px}
  .decisions .pill{justify-self:start}
  .shot figcaption{grid-template-columns:1fr;gap:6px}
  .shot figcaption .pill{justify-self:start}
}

/* ---------- the case as its own page ---------- */
.case-pg .eyebrow a{color:inherit;text-decoration:none}
.case-pg .case{padding:0;margin-top:18px}
.case-pg .shot a{cursor:zoom-in}
.case-pg a.next{color:inherit;text-decoration:none}
.case-pg .post-back{display:inline-flex;margin-top:clamp(32px,5vh,48px)}

/* ---------- the case studies hub (case-studies/index.html): the homepage's work rows, as plain links ---------- */
.case-hub .rows{margin-top:clamp(32px,5vh,56px)}
.case-hub .rows > li{border-top:1px solid var(--line)}
.case-hub .rows > li:last-child{border-bottom:1px solid var(--line)}
.case-hub .row{width:100%;display:grid;grid-template-columns:9.5rem 1fr auto;gap:4px 20px;align-items:baseline;padding:15px 0;color:inherit;text-decoration:none}
.case-hub .row .name{font:600 1.15rem/1.3 var(--display-font);color:var(--display);justify-self:start}
.case-hub .row .what,.case-hub .row .when{color:var(--muted)}
.case-hub .row .when{font-size:.9rem;white-space:nowrap}
.case-hub .row:hover .name{color:var(--accent)}
.case-hub .row:hover .u,.case-hub .row:focus-visible .u{background-size:100% 1px,100% 1px}
@media (max-width:560px){.case-hub .row{grid-template-columns:1fr auto}.case-hub .row .what{grid-column:1/-1;grid-row:2}}