/* Round 27 case study page. Everything shared (tokens, header, diagrams, footer, quote, pill) comes from
   h27/home.css; this file only lays out the case page and its three client diagrams. */

/* ---------- hero ---------- */
.c-hero { padding: 28px 0 56px; }
.back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--mute); transition: color var(--t1) var(--ease); }
.back:hover { color: var(--ink); }
.back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.c-herogrid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: end; margin-top: 40px; }
.c-hero h1 { font-size: clamp(40px, 4.4vw, 60px); }
.c-what { margin: 18px 0 0; font-size: 19px; line-height: 1.45; color: var(--mute); max-width: 36ch; }
.c-meta { display: flex; gap: 40px; margin: 28px 0 0; }
.c-meta dt { font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-bottom: 6px; }
.c-meta dd { margin: 0; font-size: 16px; }
.c-shot { aspect-ratio: 16 / 10; }

/* Section headings: plain words, one size, on the left of each two-column section. */
.c-h { font-size: clamp(24px, 2.2vw, 30px); margin-bottom: 16px; }
.c-hero .rating { margin: 18px 0 0; }

/* ---------- two-column sections: label left, content right (the homepage's .head rhythm) ---------- */
.c-two { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: start; }
.c-quotes { list-style: none; margin: 0; padding: 0; }
.c-quotes li { padding: 16px 0; border-top: 1px solid var(--hair); display: grid; gap: 6px; }
.c-quotes li:last-child { border-bottom: 1px solid var(--hair); }
.c-quotes q { font-size: 21px; line-height: 1.35; letter-spacing: -.01em; font-weight: 450; }
.c-quotes span { font: 400 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.c-body { margin: 0; font-size: 17px; line-height: 1.55; color: var(--mute); max-width: 42ch; }
.c-built, .c-build { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
/* One row per build under the section heading; a hairline between builds. */
.c-build { padding: 28px 0; }
.c-build + .c-build { border-top: 1px solid var(--hair); }
.c-build h3 { margin: 0 0 10px; font-size: 20px; font-weight: 500; letter-spacing: -.015em; }
.c-meta a { border-bottom: 1px solid var(--hair-strong); }
.c-fig { display: grid; }
/* Multi-project case (Photo Booth): one article per project, a hairline between them. The mono label is the h2. */
.c-proj + .c-proj { border-top: 1px solid var(--hair); margin-top: 28px; padding-top: 28px; }
.c-label { font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin: 0 0 12px; }
.c-sub { margin: 20px 0 6px; font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.c-sub:first-child { margin-top: 0; }
.c-proj .c-quotes { margin-top: 12px; }
.c-proj .c-quotes li:last-child { border-bottom: 0; }
.c-proj .c-build { padding: 8px 0 0; align-items: start; }
.c-steps { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.c-steps li { counter-increment: s; display: grid; grid-template-columns: 36px minmax(0, 1fr); padding: 14px 0; border-top: 1px solid var(--hair); font-size: 17px; line-height: 1.45; }
.c-steps li:last-child { border-bottom: 1px solid var(--hair); }
.c-steps li::before { content: counter(s, decimal-leading-zero); font: 400 12px/1.9 var(--mono); color: var(--mute); }
.c-pending { margin: 0; font: 400 13px/1.5 var(--mono); color: var(--mute); }
.c-tools { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 36px; }
/* A tool with no mark we may use (Excel, plain email) is just its name, set a step quieter. */
.c-tools .no-mark { color: var(--mute); }

/* ---------- the band ---------- */
.c-bandin { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-top: 8px; padding-bottom: 8px; }
.c-band h2 { font-size: clamp(26px, 2.8vw, 38px); max-width: 26ch; }
.c-band .pill { flex: none; }

/* ---------- the quote (classes from home.css) ---------- */
.qgrid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: end; padding-top: 24px; padding-bottom: 8px; }
.q-before { margin: 0; color: var(--mute); font-size: 17px; line-height: 1.5; max-width: 32ch; }
.q-before span { display: block; margin-bottom: 10px; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.q-main { margin: 0; }
.q-main blockquote { margin: 0; }
.q-main blockquote p { margin: 0; font-weight: 450; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.1; letter-spacing: -.03em; font-variation-settings: "opsz" 80, "wdth" 94; text-wrap: balance; }
.q-main figcaption { margin-top: 22px; font-size: 15px; font-weight: 500; }

/* ---------- the three client diagrams (440 x 340 grid, see home.css) ---------- */
/* photobooth: a sorted inbox, a draft, the approval bar */
.tri { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: calc(10 * var(--u)); height: calc(34 * var(--u)); margin: 0;
  padding: 0 calc(14 * var(--u)); border-top: 1px solid var(--hair); font-size: calc(12 * var(--u)); }
.tri span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tri em { font: 400 calc(9.5 * var(--u))/1 var(--mono); font-style: normal; padding: calc(4 * var(--u)) calc(6 * var(--u)); border: 1px solid var(--hair-strong); border-radius: calc(4 * var(--u)); color: var(--mute); }
.tri em.hot { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.body1 { margin: 0; padding: calc(10 * var(--u)) calc(14 * var(--u)); border-top: 1px solid var(--hair); font-size: calc(12 * var(--u)); }

/* therabeat: one form, four destinations */
.form .card-h { height: calc(40 * var(--u)); }
.form .q { margin: 0; height: calc(36 * var(--u)); display: flex; align-items: center; padding: 0 calc(12 * var(--u)); border-top: 1px solid var(--hair); font-size: calc(11.5 * var(--u)); color: var(--mute); }
.dest { width: calc(212 * var(--u)); height: calc(52 * var(--u)); flex-direction: column; align-items: flex-start; justify-content: center; gap: calc(4 * var(--u)); }
.dest span { font: 400 calc(9.5 * var(--u))/1 var(--mono); color: var(--mute); }
.dest.dim { border-color: var(--hair); color: var(--mute); }

/* marks: a four-column job board */
.jb { height: calc(260 * var(--u)); display: flex; flex-direction: column; }
.jb .card-h { border-bottom: 1px solid var(--hair); }
.cols { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols > div { padding: calc(10 * var(--u)) calc(8 * var(--u)); border-left: 1px solid var(--hair); }
.cols > div:first-child { border-left: 0; }
.cols span { font: 400 calc(9.5 * var(--u))/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.jb .pc { margin-top: calc(10 * var(--u)); font-size: calc(11 * var(--u)); transition: opacity var(--t3) var(--ease) calc(var(--beat) * var(--i) * .6), transform var(--t3) var(--ease) calc(var(--beat) * var(--i) * .6); }
.jb .fu { color: var(--ink); margin-top: calc(2 * var(--u)); }
.js:not(.calm) .dg-board:not(.played) .pc,
.js:not(.calm) .dg-route:not(.played) .form { opacity: 0; transform: translateY(calc(var(--rise) * .6)); }
.dg-route .form { transition: opacity var(--t3) var(--ease), transform var(--t3) var(--ease); }

/* venturesatl: a voice note, its transcript, two results, done */
.voice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: calc(12 * var(--u)); height: calc(56 * var(--u)); margin: 0; padding: 0 calc(14 * var(--u)); }
.voice b { font-weight: 500; }
.voice time { font: 400 calc(10 * var(--u))/1 var(--mono); color: var(--mute); }
.wave { display: flex; align-items: center; gap: calc(3 * var(--u)); height: calc(22 * var(--u)); }
.wave i { width: calc(3 * var(--u)); height: calc(var(--h) * 100%); border-radius: 2px; background: var(--ink); }
.res { width: calc(196 * var(--u)); height: calc(52 * var(--u)); }
.res p { margin: 0; display: grid; gap: calc(3 * var(--u)); min-width: 0; }
.res b { font-weight: 500; font-size: calc(12 * var(--u)); white-space: nowrap; }
.res span { font: 400 calc(9.5 * var(--u))/1 var(--mono); color: var(--mute); }
.wait.done i { background: var(--ink); }

/* photobooth, Booth Prospector: one app panel. LEFT a block map shaded by walkable density, RIGHT the ranked list.
   Unlike the other diagrams this one is NOT pinned to a 440 x 340 canvas: it flows (grid), so it can stack on a phone.
   It still sizes in --u so type and spacing scale with the figure. */
.dg-rank .cv { aspect-ratio: auto; }
.dg-rank .pr { position: relative; left: auto; top: auto; width: 100%; }
.dg-rank .card-h { border-bottom: 1px solid var(--hair); }
/* The mode toggle (kept from the old diagram): a segmented control, "Walkable density" selected. */
.seg { display: inline-flex; border: 1px solid var(--hair-strong); border-radius: calc(5 * var(--u)); overflow: hidden; letter-spacing: .04em !important; }
.seg i { font-style: normal; padding: calc(4 * var(--u)) calc(7 * var(--u)); }
.seg i.on { background: var(--ink); color: var(--paper); }
.pr-body { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 12fr); gap: calc(18 * var(--u)); padding: calc(14 * var(--u)); align-items: center; }

/* The map: a 10 x 7 grid of square cells (aspect-ratio keeps them square). Four warm-grey steps are ink at
   rising opacity, so they always match the page ink. d0 is the quietest, d3 the densest. */
.pr-map { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: calc(2 * var(--u)); }
.pr-map .c { position: relative; aspect-ratio: 1; border-radius: calc(2 * var(--u)); }
.d0 { background: rgba(28, 23, 19, .04); }
.d1 { background: rgba(28, 23, 19, .10); }
.d2 { background: rgba(28, 23, 19, .19); }
.d3 { background: rgba(28, 23, 19, .32); }
/* A venue pin: a small ink dot with a paper edge so it reads on every shade. The best one is ringed (a still ring). */
.pr-map .pin { position: absolute; left: 50%; top: 50%; width: calc(8 * var(--u)); height: calc(8 * var(--u)); margin: calc(-4 * var(--u)) 0 0 calc(-4 * var(--u));
  border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 calc(1.5 * var(--u)) var(--paper); }
.pr-map .pin.best::after { content: ""; position: absolute; inset: calc(-6.5 * var(--u)); border-radius: 50%; border: calc(1.5 * var(--u)) solid var(--ink); }
.pr-key { margin: calc(8 * var(--u)) 0 0; display: flex; align-items: center; gap: calc(4 * var(--u)); }
.pr-key span { font: 400 calc(9.5 * var(--u))/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.pr-key span:first-child { margin-right: calc(2 * var(--u)); }
.pr-key span:last-child { margin-left: calc(2 * var(--u)); }
.pr-key i { width: calc(14 * var(--u)); height: calc(8 * var(--u)); border-radius: calc(2 * var(--u)); }

/* The ranked list: name and score on one line, a thin bar under it. */
.pr-h { margin: 0 0 calc(6 * var(--u)); display: flex; justify-content: space-between; align-items: center; gap: calc(8 * var(--u)); }
.pr-h b { font-weight: 500; font-size: calc(12.5 * var(--u)); }
.pr-rows { list-style: none; margin: 0; padding: 0; }
.pr-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: calc(8 * var(--u)); row-gap: calc(6 * var(--u));
  padding: calc(9 * var(--u)) 0; border-top: 1px solid var(--hair); }
.pr-rows .nm { font-size: calc(12 * var(--u)); color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-rows b { font: 500 calc(12.5 * var(--u))/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--mute); }
/* The bar: a faint track (the li's own ::after is not needed; the i has a track via background-image) with a fill
   whose width is the score. scaleX grows it from the left in the animation. */
.pr-rows .bar { grid-column: 1 / -1; display: block; height: calc(3 * var(--u)); border-radius: 2px; background: var(--hair); position: relative; overflow: hidden; }
.pr-rows .bar::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--s) * 1%); background: rgba(28, 23, 19, .42); border-radius: 2px;
  transform-origin: left; transition: transform var(--t3) var(--ease) calc(var(--beat) * 2.2 + var(--stagger) * var(--i)), background-color var(--t2) var(--ease) calc(var(--beat) * 5); }
/* The top row: ink text, ink bar, and the "Booth here" chip. */
.pr-rows .top .nm, .pr-rows .top b { color: var(--ink); }
.pr-rows .top .nm { font-weight: 500; }
.pr-rows .top .bar::after { background: var(--ink); }
.pr-rows .chip-top { grid-column: 2; grid-row: 1; font: 500 calc(9 * var(--u))/1 var(--mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase;
  padding: calc(3.5 * var(--u)) calc(5.5 * var(--u)); border-radius: calc(3 * var(--u)); background: var(--ink); color: var(--paper); white-space: nowrap; }
.pr-rows .top b { grid-column: 3; grid-row: 1; }
.pr-rows li:not(.top) b { grid-column: 3; }

/* The animation, played once (.played is added when the figure is half in view; shared.js). Order:
   1. the cells fade up in a diagonal stagger (--d is set per cell in case.js)   2. the pins appear
   3. the bars grow, one after another   4. the top row turns ink and its chip arrives. Then it holds still.
   Calm mode (still / reduced motion) skips every hidden state, so it shows the final picture. */
.js:not(.calm) .dg-rank .pr-map .c { transition: opacity var(--t2) var(--ease) calc(var(--d) * 28ms); }
.js:not(.calm) .dg-rank:not(.played) .pr-map .c { opacity: 0; }
.js:not(.calm) .dg-rank .pin { transition: opacity var(--t2) var(--ease) calc(var(--beat) * 2.2 + var(--k) * var(--stagger)); }
.js:not(.calm) .dg-rank:not(.played) .pin { opacity: 0; }
.js:not(.calm) .dg-rank:not(.played) .pr-rows .bar::after { transform: scaleX(0); }
.js:not(.calm) .dg-rank:not(.played) .pr-rows .top .bar::after { background: rgba(28, 23, 19, .42); }
.js:not(.calm) .dg-rank .pr-rows .chip-top { transition: opacity var(--t2) var(--ease) calc(var(--beat) * 5); }
.js:not(.calm) .dg-rank:not(.played) .pr-rows .chip-top { opacity: 0; }
.js:not(.calm) .dg-rank .pr-rows .top .nm, .js:not(.calm) .dg-rank .pr-rows .top b { transition: color var(--t2) var(--ease) calc(var(--beat) * 5); }
.js:not(.calm) .dg-rank:not(.played) .pr-rows .top .nm, .js:not(.calm) .dg-rank:not(.played) .pr-rows .top b { color: var(--mute); }

/* Narrow figure (a phone): stack the map above the list and scale the units up so the type stays readable. */
@container (max-width: 420px) {
  .dg-rank .cv { --u: calc(100cqw / 360); }
  .pr-body { grid-template-columns: minmax(0, 1fr); gap: calc(16 * var(--u)); }
  .pr-map .c { aspect-ratio: 1.6; }       /* a little flatter than square, so the stacked map is not too tall */
  .pr-map { gap: calc(2.5 * var(--u)); }
}

/* ---------- phone ---------- */
@media (max-width: 860px) {
  .c-herogrid, .c-two, .c-built, .qgrid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .c-hero h1 { font-size: 38px; }
  .c-quotes q { font-size: 18px; }
  .c-bandin { flex-direction: column; align-items: flex-start; gap: 24px; }
}

/* Calendly pop-up (h27/booking.js): no page scroll behind it, and its overlay sits above the sticky header. */
html.cal-open, html.cal-open body { overflow: hidden; }
.calendly-overlay { z-index: 1000 !important; }
/* On phones Calendly's pop-up stops at a fixed 700px, leaving a strip of page showing under it.
   Let it run from just under its close button to the bottom of the screen instead. */
@media (max-width: 649px) {
  html body .calendly-overlay .calendly-popup { top: 56px !important; bottom: 0 !important; height: auto !important; max-height: calc(100% - 56px) !important; }
}