/* kaseyschram.com: case-study components (loaded by work/ case pages only)
   Extends site.css. Values come from tokens.css; see the note there. */

/* Deliberate case-study overrides of the shared system. These are real
   differences, not accidents: a case study opens tighter than a page. */
header{padding:clamp(30px,7vw,64px) 0 0}
.lbl{margin-bottom:var(--space-4)}
footer{align-items:center}

/* ---- the label voice, case-study vocabulary --------------------------
   Same three sizes as site.css. Colour is set per component below.    */
.meta .k,.pillar .t,.item .t,.rule .rk,.demo .dt,.status .rk,.numbers .l,
.status .h,.say .k,figure.fig figcaption,.scrollfig figcaption,
.closer .tag,.demo .open{font-family:var(--font-mono);text-transform:uppercase}
.meta .k,.pillar .t,.item .t,.rule .rk,.demo .dt,.status .rk,.numbers .l{font-size:var(--label-sm)}
.status .h,.say .k,figure.fig figcaption,.scrollfig figcaption{font-size:var(--label-md)}
.closer .tag,.demo .open{font-size:var(--label-lg)}
.meta .k,.pillar .t,.item .t,.rule .rk,.demo .dt,.say .k,.closer .tag{letter-spacing:var(--track-label)}
.status .h{letter-spacing:var(--track-wide)}
.status .rk,.numbers .l,.demo .open,figure.fig figcaption,.scrollfig figcaption{letter-spacing:var(--track-tight)}
figure.fig figcaption,.scrollfig figcaption,.demo .open{text-transform:none}

/* ---- title block ---- */
h1.title{font-family:var(--font-display);font-weight:400;font-size:var(--display-6);
  text-transform:uppercase;letter-spacing:-.6px;line-height:1.18;margin:var(--space-4) 0 0;max-width:none}
h1.title.lower{text-transform:none}
.premise{font-size:var(--display-1);line-height:1.34;color:var(--color-ink);font-weight:500;margin:var(--space-5) 0 0;max-width:30ch}
.meta{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-8);margin:30px 0 0;padding-bottom:6px}
.meta .k{color:var(--color-faint)}
.meta .v{font-weight:600;font-size:var(--text-xs);margin-top:5px;max-width:26ch}
.lead{font-size:var(--text-xl);color:var(--color-ink);font-weight:500;line-height:1.45}
h2{font-weight:800;font-size:var(--display-2);line-height:1.16;letter-spacing:-.4px;margin:0 0 var(--space-4);max-width:28ch}

/* ---- pull quote ---- */
.pull{border-left:3px solid var(--color-accent);padding:2px 0 2px 22px;margin:var(--space-2) 0}
.pull p{font-weight:700;font-size:var(--display-2);line-height:var(--leading-tight);letter-spacing:-.3px;margin:0}
.pull .sub{font-weight:400;font-size:var(--text-md);color:var(--color-soft);margin-top:14px;line-height:var(--leading-copy)}
.pull .sub b{color:var(--color-ink);font-weight:700}

/* ---- pillar / item list ---- */
.pillars{margin-top:var(--space-2)}
.pillar,.item{padding:var(--space-5) 0;border-top:1px solid var(--color-line)}
.pillar:last-child,.item:last-child{border-bottom:1px solid var(--color-line)}
.pillar .t,.item .t{color:var(--color-accent)}
.pillar h3,.item h3{font-weight:800;font-size:var(--text-lg);margin:7px 0 6px;letter-spacing:-.2px}
.pillar p,.item p{margin:0;color:var(--color-soft);font-size:var(--text-sm)}

/* ---- rule cards ---- */
.rules{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin-top:var(--space-2)}
@media(max-width:560px){.rules{grid-template-columns:1fr}}
.rule{border:1px solid var(--color-line);border-radius:var(--radius-4);padding:var(--space-4) 18px;background:var(--color-paper-2)}
.rule .rk{color:var(--color-accent)}
.rule p{margin:6px 0 0;font-size:var(--text-sm);color:var(--color-soft)}
.rule b{color:var(--color-ink)}

/* ---- demo card: the site's press-in signature, at card scale ---- */
.demo{display:block;border:2px solid var(--color-ink);border-radius:var(--radius-4);padding:var(--space-5) 22px;
  margin-bottom:var(--space-4);text-decoration:none;color:inherit;background:var(--color-paper-2);
  box-shadow:var(--press) var(--color-ink);transition:transform .14s ease,box-shadow .14s ease}
.demo:hover{transform:translate(2px,2px);box-shadow:var(--press-sm) var(--color-ink)}
.demo .dt{color:var(--color-accent)}
.demo h3{font-weight:800;font-size:var(--text-lg);margin:var(--space-2) 0 6px;letter-spacing:-.2px}
.demo p{margin:0 0 var(--space-3);color:var(--color-soft);font-size:var(--text-sm)}
.demo .open{color:var(--color-accent)}

/* ---- honest status ---- */
.status{border:1px solid var(--color-line);border-radius:var(--radius-5);padding:clamp(20px,4vw,28px);background:var(--color-paper-2)}
.status .h{color:var(--color-accent);margin-bottom:var(--space-2)}
.status .r{display:grid;grid-template-columns:96px 1fr;gap:14px;padding:13px 0;border-top:1px solid var(--color-line)}
.status .r:first-of-type{border-top:none}
.status .rk{color:var(--color-faint);padding-top:2px}
.status .rv{color:var(--color-soft);font-size:var(--text-sm)}
.status .rv b,.status b{color:var(--color-ink);font-weight:700}
.status p{margin:0 0 var(--space-3);color:var(--color-soft);font-size:var(--text-sm)}
.status p:last-child{margin:0}

/* ---- stat row ---- */
.numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5);margin-top:var(--space-2);
  border-top:1px solid var(--color-line);border-bottom:1px solid var(--color-line);padding:var(--space-6) 0}
@media(max-width:560px){.numbers{grid-template-columns:1fr 1fr;gap:var(--space-6) var(--space-4)}}
.numbers .n{font-family:var(--font-display);font-weight:400;font-size:var(--display-3);line-height:1;color:var(--color-accent)}
.numbers .l{color:var(--color-faint);margin-top:9px}

/* ---- figures ---- */
figure.fig{margin:var(--space-2) 0 0}
.mat{background:var(--color-paper-2);border:1px solid var(--color-line);border-radius:var(--radius-5);padding:clamp(16px,3vw,26px)}
.mat img{display:block;width:100%;height:auto;border-radius:var(--radius-1)}
.mat.center{display:grid;place-items:center}
.mat.center img{max-width:420px}
figure.fig figcaption{color:var(--color-faint);margin-top:var(--space-3)}
.adframe{max-width:520px;margin:var(--space-2) auto 0}
.scrollfig{border:1px solid var(--color-line);border-radius:var(--radius-5);overflow:hidden;background:var(--color-paper-2);margin-top:var(--space-2)}
.scrollfig .scroll{overflow-x:auto;max-height:360px;overflow-y:hidden}
.scrollfig .scroll img{display:block;height:340px;width:auto;max-width:none}
.scrollfig figcaption{color:var(--color-faint);padding:var(--space-3) var(--space-4);border-top:1px solid var(--color-line)}
.app{display:grid;grid-template-columns:200px 1fr;gap:var(--space-6);align-items:center;margin-top:var(--space-2)}
@media(max-width:560px){.app{grid-template-columns:1fr}}
.phone{background:var(--color-ink);border-radius:var(--radius-7);padding:var(--space-3);display:grid;place-items:center}
.phone img{width:100%;max-width:180px;height:auto;border-radius:var(--radius-3);display:block}

/* ---- cascade + say ---- */
.cascade{margin-top:var(--space-2);font-family:var(--font-mono);font-size:var(--text-xs);line-height:1.9;color:var(--color-ink)}
.cascade .a{color:var(--color-accent);margin:0 var(--space-2)}
.say{margin:6px 0 var(--space-1)}
.say .k{color:var(--color-accent);margin-bottom:var(--space-2)}
.say p{font-weight:800;font-size:var(--display-5);letter-spacing:-.6px;line-height:1.05;margin:0}

/* ---- closer ---- */
.closer{margin-top:var(--space-section);border-top:1px solid var(--color-line);padding-top:30px}
.closer .big{font-weight:800;font-size:var(--display-3);letter-spacing:-.5px;line-height:var(--leading-tight);max-width:24ch}
.closer .tag{color:var(--color-faint);margin-top:14px}
.closer .note{font-size:var(--text-xs);color:var(--color-faint);font-style:italic;margin-top:var(--space-2)}