/* ============================================================
   Long-form: case studies and posts.
   Extends site.css, same two colours, same typeface, same rail.
   ============================================================ */

.hero,
section{
  padding-left:clamp(20px,3.2vw,40px);
  padding-right:clamp(20px,3.2vw,40px);
}
.hero{padding-top:118px;padding-bottom:clamp(48px,8vh,80px)}
section{padding-top:clamp(44px,7vh,72px);padding-bottom:clamp(44px,7vh,72px)}
/* phones don't need the desktop-scale hero exhale */
@media (max-width:720px){
  .hero{padding-top:96px;padding-bottom:34px}
  .hero + section{padding-top:26px}
}
section + section{border-top:1px solid var(--hair)}

/* one column, indented like the homepage hero. Wide things use it all,
   text stays at a readable measure inside it. */
/* subtract the indent, or the column's right edge slips past narrow viewports */
.col{max-width:min(880px,calc(100% - var(--indent)));margin-left:var(--indent)}
.col > p,
.col > h2,
.col > h3,
.col > ul,
.col > ol,
.solution > p,
.solution > h3{max-width:min(560px,100%)}

/* the chrome already carries a back link */
.back{display:none}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;letter-spacing:.02em;
  color:var(--ink-2);margin-bottom:14px}
.eyebrow::before{content:'';width:16px;height:2px;background:var(--leaf)}

/* At 72px the display face needs a touch more leading than 0.95, or two-line
   headlines close up and read as one block. */
h1{
  font-weight:500;font-size:min(72px,8.2vw);line-height:1.02;letter-spacing:-.032em;
  text-transform:lowercase;max-width:min(18ch,100%);text-wrap:balance}
.lead{
  margin-top:24px;font-size:16px;line-height:1.65;letter-spacing:-.12px;
  max-width:min(48ch,100%);color:var(--ink-2)}

.hero-img{
  display:block;width:100%;height:auto;margin-top:clamp(36px,6vh,56px)}
.art-credit{
  margin-top:10px;font-family:var(--mono);font-size:10px;letter-spacing:.02em;
  color:var(--ink-2)}

h2{
  font-weight:500;font-size:clamp(22px,3vw,30px);line-height:1.2;letter-spacing:-.028em;
  text-transform:lowercase;margin-bottom:18px;max-width:min(22ch,100%);text-wrap:balance}
h3{font-weight:500;font-size:15px;line-height:1.4;letter-spacing:-.1px}

p{font-size:14px;line-height:1.75;letter-spacing:-.1px}
p + p{margin-top:15px}

/* ============================================================
   Article flow.

   One scale, derived from the body line (14px x 1.75 = 24.5px), applied to
   .piece so long-form bodies get a rhythm instead of per-pair patches.

   Two rules govern it:
     1. A heading takes roughly three times more space above than below, so it
        binds downward to the text it introduces.
     2. A block (list, table, figure) takes more space after than before, so
        the paragraph that follows reads as new prose, not as a caption.
   ============================================================ */
.piece{
  --flow-xs:16px;   /* inside one thought: paragraph to paragraph */
  --flow-sm:24px;   /* prose into a block it introduces */
  --flow-md:34px;   /* block back out into prose */
  --flow-lg:46px;   /* before a subheading */
  --flow-xl:clamp(52px,7vh,78px); /* before a section heading */
}

/* default: anything following anything gets the prose gap */
.piece > * + *{margin-top:var(--flow-xs)}

/* headings open a new movement */
.piece > * + h2{margin-top:var(--flow-xl)}
.piece > * + h3{margin-top:var(--flow-lg)}
.piece > h2 + *,.piece > h3 + *{margin-top:0}

/* prose into a block, then a wider gap coming back out */
.piece > * + ul,.piece > * + ol,.piece > * + .table-wrap{margin-top:var(--flow-sm)}
.piece > ul + *,.piece > ol + *,.piece > .table-wrap + *{margin-top:var(--flow-md)}
/* a heading after a block still wants its full opening gap */
.piece > ul + h2,.piece > ol + h2,.piece > .table-wrap + h2{margin-top:var(--flow-xl)}
.piece > ul + h3,.piece > ol + h3,.piece > .table-wrap + h3{margin-top:var(--flow-lg)}

/* the divider is a beat of its own and sets its own space */
.piece > .divider,.piece > * + .divider{margin:var(--flow-lg) 0}
.piece > .divider + *{margin-top:0}

/* the hero already carries generous padding below it, so the first section
   after it should not add a second full gap on top */
.hero + section{padding-top:clamp(26px,4vh,44px)}
a{border-bottom:1px solid var(--hair)}
a:hover{border-color:currentColor}
.back,.chrome a,.foot-note a,.post-end a{border-bottom:0}
strong{font-weight:500}

/* label / value pairs: role, duration, platform, users */
.grid-2{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:0 var(--gap);margin-top:34px;max-width:min(620px,100%)}
.grid-2 > div{padding:14px 0;border-top:1px solid var(--hair-soft)}
.grid-2 .label{
  font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--ink-2);
  margin-bottom:5px}
.grid-2 .value{font-size:14px;line-height:1.5}
@media (max-width:560px){.grid-2{grid-template-columns:1fr}}

/* the things users said */
.card-stack{margin-top:30px;display:grid;gap:2px;background:transparent;
  max-width:min(620px,100%)}
.card{background:var(--surface);padding:22px 24px}
.card h3{font-size:15px;margin-bottom:7px}
.card p{color:var(--ink-2)}

/* placeholders for imagery that isn't in the repo */
.frame{
  margin-top:26px;background:var(--surface);border:1px solid var(--hair);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;color:var(--ink-2)}
.frame > *{display:block;padding:26px 20px}
.frame.pair{display:grid;grid-template-columns:1fr 1fr}
.frame.pair > div + div{border-left:1px solid var(--hair)}
.frame.screenshot > *,.frame.video > *{padding:52px 20px}
@media (max-width:640px){
  .frame.pair{grid-template-columns:1fr}
  .frame.pair > div + div{border-left:0;border-top:1px solid var(--hair)}
}

/* solutions */
.solution{margin-top:44px}
.solution:first-of-type{margin-top:30px}
.solution h3{margin-bottom:9px}

/* outcome numbers */
.outcome-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:1px;
  background:var(--paper);margin-top:30px;border-top:2px solid var(--leaf)}
.outcome-card{background:var(--ink);color:var(--paper);padding:26px 22px 28px}
.outcome-card .num{
  font-weight:500;font-size:clamp(34px,5vw,52px);line-height:1;letter-spacing:-.045em}
.outcome-card .desc{margin-top:12px;font-size:12.5px;line-height:1.55;opacity:.72}
@media (max-width:820px){.outcome-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.outcome-grid{grid-template-columns:1fr}}

/* timeline; order carries real information here */
.tl-bar{display:flex;flex-wrap:wrap;gap:2px;margin-top:34px}
.tl-seg{flex:1 1 110px;background:var(--surface);padding:14px 16px 16px;
  border-top:2px solid var(--leaf)}
.tl-date{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--ink-2)}
.tl-label{margin-top:4px;font-size:13px;letter-spacing:-.06px}

/* chips and commands; leaf marks the machine-readable things */
.chip{
  display:inline-block;padding:5px 10px;margin:0 6px 6px 0;
  background:var(--surface);border:1px solid var(--hair);
  font-family:var(--mono);font-size:11px;letter-spacing:.02em}
.chip.hi{box-shadow:inset 0 -2px 0 var(--leaf)}

.cmd-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:transparent;margin-top:30px}
.cmd-card{background:var(--surface);padding:24px 22px}
.cmd{display:inline-block;margin-bottom:11px;font-family:var(--mono);font-size:11px;
  letter-spacing:.02em;background:var(--surface-2);padding:5px 10px 5px 9px;
  border-left:3px solid var(--leaf)}
.cmd-card h3{margin-bottom:7px}
.cmd-card p{color:var(--ink-2);font-size:13px}
@media (max-width:700px){.cmd-grid{grid-template-columns:1fr}}

/* architecture layers */
.arch{margin-top:30px;border-top:1px solid var(--hair)}
.arch-layer{
  display:grid;grid-template-columns:minmax(0,150px) 1fr;gap:var(--gap);
  padding:18px 0;border-bottom:1px solid var(--hair-soft);align-items:start}
.arch-label{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--ink-2);padding-top:4px}
.arch-items{display:flex;flex-wrap:wrap}
@media (max-width:700px){.arch-layer{grid-template-columns:1fr;gap:8px}}

/* before / after */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:transparent;margin-top:26px}
.ba-col{background:var(--surface);padding:22px}
.before,.after{font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;
  color:var(--ink-2);margin-bottom:9px}
@media (max-width:640px){.ba-grid{grid-template-columns:1fr}}

.divider{margin:40px 0;color:var(--ink-2);letter-spacing:.5em;font-size:12px}
.date{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--ink-2)}

/* where a piece first appeared, when it wasn't here */
.origin{
  margin-top:28px;padding-top:16px;border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:11px;line-height:1.6;letter-spacing:.02em;
  color:var(--ink-2);max-width:min(46ch,100%)}

/* Lists. The global reset strips markers, so put them back. Markers hang in
   their own gutter and the text edge lines up with the prose above it, so the
   left margin of the column stays true all the way down. */
.piece > ol,.piece > ul{
  padding-left:0;display:grid;gap:11px;max-width:min(560px,100%);
  list-style:none;counter-reset:item}
.piece > ol > li,.piece > ul > li{
  position:relative;padding-left:30px;
  font-size:14px;line-height:1.75;letter-spacing:-.1px}
.piece > ul > li::before{
  content:'';position:absolute;left:9px;top:.62em;
  width:5px;height:5px;background:var(--leaf)}
.piece > ol > li{counter-increment:item}
.piece > ol > li::before{
  content:counter(item);position:absolute;left:0;top:.08em;
  font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--leaf)}

/* Results tables. Wider than the text measure on purpose, with a rule above to
   mark it as a deliberate escape from the column rather than an overflow.
   Scrolls inside its own box so the page itself never does. */
.table-wrap{
  overflow-x:auto;max-width:min(640px,100%);
  padding-top:4px;border-top:1px solid var(--hair)}
.data{width:100%;min-width:460px;border-collapse:collapse;font-size:13px}
.data th,.data td{
  padding:12px 0;border-bottom:1px solid var(--hair-soft);letter-spacing:-.06px;
  vertical-align:baseline}
.data th:first-child,.data td:first-child{padding-right:24px;text-align:left}
.data th:not(:first-child),.data td:not(:first-child){
  text-align:right;padding-left:18px}
.data thead th{
  font-family:var(--mono);font-size:10px;font-weight:400;line-height:1.5;
  letter-spacing:.02em;color:var(--ink-2);
  padding-top:14px;border-bottom:1px solid var(--hair);vertical-align:bottom}
.data tbody td{font-variant-numeric:tabular-nums}
.data tbody td:first-child{font-weight:500}
/* the row that won, marked rather than merely shaded */
.data tbody tr:first-child td{
  background:var(--wash);box-shadow:inset 0 -2px 0 var(--leaf)}

/* closing block */
.post-end{border-top:1px solid var(--hair);
  padding-top:26px;padding-bottom:104px}
/* the eyebrow is inline-flex; left alone it shares a line with the .big link */
.post-end .eyebrow{display:flex}
.post-end .big{
  display:inline-block;font-weight:500;font-size:min(48px,6.6vw);line-height:1;
  letter-spacing:-.03em;text-transform:lowercase;margin-top:12px}
.post-end .big:hover{opacity:.6}
.post-end .links{display:flex;gap:20px;margin-top:36px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.02em}
.post-end .links a:hover{opacity:.6}