/* Case-page layout, shared by the prose case studies.
   Extracted from careeros.html, which was the tightest of the six and
   therefore the one worth making canonical. Tokens live in site.css. */

.eyebrow{font-family:var(--sans);font-size:var(--t-label);font-weight:600;letter-spacing:.02em;color:var(--ink-faint);margin:0}

header.hero{padding:clamp(34px,6vw,76px) 0 clamp(34px,5vw,60px);border-bottom:1px solid var(--rule)}
.lede{max-width:56ch;font-size:var(--t-body);line-height:1.6;color:var(--ink-soft);margin:24px 0 0}
.cta{display:flex;flex-wrap:wrap;gap:10px 12px;margin:32px 0 0}
.cta a{font-family:var(--sans);font-size:var(--t-label);text-decoration:none;border:1px solid var(--rule);padding:11px 16px;color:var(--ink-soft)}
.cta a:hover{color:var(--ink);border-color:var(--ink-faint)}
.cta a.primary{border-color:var(--red);color:var(--red)}
.hero-note{margin:22px 0 0;font-family:var(--mono);font-size:var(--t-stamp);color:var(--ink-faint)}
.head{font-family:var(--serif);font-size:var(--t-head);font-weight:600;letter-spacing:-.018em;margin:0 0 18px;max-width:26ch;text-wrap:balance}
.sub{max-width:58ch;color:var(--ink-soft);margin:0 0 30px;font-size:var(--t-body)}
section > p{max-width:66ch;margin:18px 0 0;color:var(--ink-soft)}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:var(--rule-soft);border-block:1px solid var(--rule)}
.fact{background:var(--paper);padding:24px 22px 26px}
.fact b{display:block;font-family:var(--mono);font-weight:600;font-size:var(--t-figure);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.fact span{display:block;margin-top:8px;font-family:var(--sans);font-size:var(--t-label);line-height:1.45;color:var(--ink-soft)}
.fact cite{display:block;margin-top:6px;font-family:var(--mono);font-style:normal;font-size:var(--t-stamp);color:var(--ink-faint)}

.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--rule-soft);border:1px solid var(--rule)}
.col{background:var(--paper);padding:26px 24px}
.col h3{font-family:var(--sans);font-size:var(--t-label);font-weight:600;letter-spacing:.02em;margin:0 0 14px}
.col.is h3{color:var(--green)}
.col.isnt h3{color:var(--red)}
.col ul{margin:0;padding-left:1.1em;color:var(--ink-soft);font-size:17px;line-height:1.6}
.col li{margin:0 0 9px}

.steps{display:grid;gap:clamp(24px,3vw,38px);margin-top:8px}
.step{display:grid;grid-template-columns:clamp(96px,12vw,150px) 1fr;gap:clamp(18px,3vw,36px);align-items:start}
.step .num{font-family:var(--mono);font-size:var(--t-stamp);color:var(--ink-faint);padding-top:8px;font-variant-numeric:tabular-nums}
.step h3{font-family:var(--serif);font-size:23px;font-weight:600;letter-spacing:-.015em;margin:0 0 10px}
.step p{margin:0 0 12px;color:var(--ink-soft);max-width:56ch;font-size:17px}
@media (max-width:640px){.step{grid-template-columns:1fr;gap:8px}}

pre{margin:0;padding:20px 22px;background:var(--term-bg);color:var(--term-ink);overflow-x:auto;font-family:var(--mono);font-size:13px;line-height:1.65}
pre .c{color:var(--term-faint)}
pre .g{color:#4FBE8B}
pre .r{color:#FF5232}
pre .a{color:#E0A93B}
pre b{color:#FFFFFF;font-weight:600}

/* --------------------------------------------------------------- demos */
.demos{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;background:var(--rule-soft);border:1px solid var(--rule);margin-top:8px}
.demo{background:var(--paper);padding:26px 24px 28px;display:flex;flex-direction:column}
.demo b{display:block;font-family:var(--mono);font-weight:600;font-size:var(--t-figure);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.demo h3{font-family:var(--serif);font-size:21px;font-weight:600;letter-spacing:-.015em;margin:14px 0 10px}
.demo p{margin:0 0 18px;color:var(--ink-soft);font-size:17px;line-height:1.55;flex:1}
.demo a{align-self:flex-start;font-family:var(--sans);font-size:var(--t-label);font-weight:600;color:var(--red);text-decoration:none;border-bottom:1px solid var(--red);padding-bottom:3px}
.demo a:hover{color:var(--ink);border-color:var(--ink)}

/* ------------------------------------------------------------- sources */
.srcs{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.src{font-family:var(--mono);font-size:var(--t-stamp);border:1px solid var(--rule);padding:7px 11px;color:var(--ink-soft)}
.src.no{border-style:dashed;color:var(--ink-faint);text-decoration:line-through}
.backlink{font-family:var(--sans);font-size:var(--t-label);text-decoration:none;color:var(--ink-faint)}
.backlink:hover{color:var(--ink)}