/* The home page: the hero, the story with its sticky drawing, and the
   sections under it. Tokens and shared parts are in site.css. */

/* ---------- hero ---------- */

.hero { padding: clamp(32px, 3.6vw, 56px) 0 clamp(12px, 1.6vw, 24px); }
.hero .wrap { display: grid; grid-template-columns: 1fr; grid-template-areas: "claim" "words" "go"; gap: 22px; }
.hero .claim { grid-area: claim; }
.hero .words { grid-area: words; }
.hero .go { grid-area: go; }
.hero .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
/* "Lead." stands out because the word over it is faded and struck out,
   and the promise stands out by size and place, not by orange or another
   bold. A screen reader hears "Don't manage. Lead." */
.hero .claim .then { color: var(--ink-3); text-decoration-line: line-through; text-decoration-thickness: 0.07em; }
.hero .promise { margin-bottom: 14px; font-size: clamp(21px, 1.9vw, 26px); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); max-width: 22em; text-wrap: balance; }
.hero .fine { margin-top: 14px; font-size: var(--t-small); color: var(--ink-2); }

/* Side by side, the claim and the words beside it stand the same height,
   and the buttons sit under the words. Everything is sized off the row's
   width, so the two heights keep in step as the screen grows: each line
   of the claim stays whole, and the words spread to the claim's top and
   bottom. */
@media (min-width: 1200px) {
  .hero .wrap {
    container-type: inline-size;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-areas: "claim words" ". go";
    gap: 26px 5.4%; align-items: end;
  }
  .hero .claim { font-size: 7.55cqi; white-space: nowrap; }
  .hero .words { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; }
  .hero .promise { font-size: 1.75cqi; }
  .hero .deck { font-size: 1.45cqi; }
}

/* ---------- the story ----------
   Below 1200 by 760 it reads as steps, each led by its figure in the
   product's list form. Above it, one sticky stage carries the drawing and
   then the Focus list, and the steps scroll under it. The stage and the
   band of words under it split the screen below the bar in half. */

.story { --band: calc((100svh - var(--bar)) / 2); position: relative; }
.stage { display: none; }
.step { padding: 56px 0 8px; }
.step + .step { border-top: 1px solid var(--hair); margin-top: 48px; }
.step .wrap { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
.step .wrap > div { display: flex; flex-direction: column; }
.step .h2 { max-width: 11em; }
.step .ev { margin-top: 18px; font-family: var(--mono); font-size: var(--t-small); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.fig { display: block; margin: 0 0 22px; order: -1; }
.figcap { margin-top: 10px; font-size: var(--t-small); color: var(--ink-2); }
.fig-focus { margin-top: 22px; }
@media (min-width: 900px) {
  .step .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--split-gap); }
}

@media (min-width: 1200px) and (min-height: 760px) {
  .stage {
    position: sticky; top: var(--bar); z-index: 5;
    height: calc(100svh - var(--bar) - var(--band));
    display: flex; flex-direction: column;
    background: var(--paper);
    border-bottom: 1px solid var(--hair);
  }
  .fig, .fig-focus, .step [data-said-slot], #date-s3 { display: none; }
  .step, .step + .step { min-height: calc(var(--band) + 34svh); padding: 30px 0 48px; border-top: 0; margin-top: 0; }
  .step:last-child { min-height: calc(var(--band) + 12svh); }
  /* the heading stays in view while its words are read */
  .step .h2 { position: sticky; top: calc(100svh - var(--band) + 30px); }
  /* a control the reader tabs to clears the stage */
  .step :is(a, button) { scroll-margin-top: calc(100svh - var(--band) + 16px); scroll-margin-bottom: 24px; }
}
@media (scripting: none) { .stage { display: none !important; } .fig { display: block !important; } }

.stage .wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.receipt {
  min-height: 44px; display: flex; align-items: center; gap: 4px 14px; flex-wrap: wrap;
  font-size: var(--t-body); color: var(--ink);
  border-bottom: 1px solid transparent;
}
.receipt:not(:empty) { border-bottom-color: var(--hair); }
.story:not([data-stage="overview"]):not([data-stage="focus"]) .receipt { visibility: hidden; }
.canvas { position: relative; flex: 1; min-height: 0; }
.canvas > svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 220ms linear; }
.focus-slot {
  position: absolute; inset: 0; display: flex; align-items: center;
  opacity: 0; visibility: hidden; transition: opacity 220ms linear, visibility 0s linear 220ms;
}
.story[data-stage="focus"] .canvas > svg { opacity: 0; }
.story[data-stage="focus"] .focus-slot { opacity: 1; visibility: visible; transition: opacity 220ms linear 120ms, visibility 0s; }
.stage .cap { padding: 6px 0 10px; font-size: var(--t-small); color: var(--ink-2); }

/* the key under the Overview step */
.key { list-style: none; margin-top: 18px; display: grid; gap: 8px; font-size: var(--t-small); color: var(--ink-2); }
.key li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; }
.key svg { width: 44px; height: 14px; overflow: visible; }
.key .dlab-k { stroke: var(--ink-2); stroke-width: 1.5; fill: none; }

/* ---------- Nib's note, and what a move said ---------- */

.nib { display: grid; grid-template-columns: 48px 1fr; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--hair); }
.nib .who { display: flex; flex-direction: column; gap: 6px; color: var(--ink-2); }
.nib .who svg { width: 16px; height: 16px; }
.nib .who .label { font-size: 11px; }
.nib p { font-size: var(--t-body); line-height: 1.55; color: var(--ink-2); max-width: 34em; text-wrap: pretty; }
.nib p .d { color: var(--ink); }
.nib .choices { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 6px; }
.stubbed .nib .choices { display: none; }
.said { margin-top: 12px; font-size: var(--t-body); color: var(--ink); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.said:empty { display: none; }
.said .tb, .receipt .tb { font-size: 16px; }

/* ---------- the drawing ---------- */

#drawing text { font-family: var(--sans); }
#drawing .bx { opacity: 0; }
#drawing.live .bx { transition: transform 420ms var(--ease), opacity 220ms linear; }
.bx .blk { fill: var(--raised); stroke: var(--ink-3); stroke-width: 1.2; }
.bx .pc { fill: none; stroke: var(--ink-3); stroke-width: 1.2; }
.bx .nm { font-size: 18px; font-weight: 600; fill: var(--ink); }
.bx .lg { font-size: 15px; fill: var(--ink-2); }
.bx .lg .who { font-weight: 600; fill: var(--ink); }
.bx .lg .m { font-family: var(--mono); font-weight: 500; }
.bx.taken .blk { fill: var(--paper); stroke: var(--ink-2); }
.bx.taken .pc { fill: var(--ink); stroke: none; transform: translate(5px, -5px); }
.bx.out .blk { stroke: var(--ink); stroke-width: 1.4; }
.bx.out .pc { display: none; }
.bx.done .blk { fill: var(--paper); stroke: var(--hair); stroke-width: 1.4; }
.bx.done .pc { fill: var(--hair); stroke: none; }
.bx.done .nm { fill: var(--ink-2); font-weight: 500; }
.bx.done .lg .who { fill: var(--ink-2); font-weight: 500; }
.bx.cp .blk { stroke: var(--ink); stroke-width: 2.6; }
.bx.cp .nm { font-weight: 700; }
.bx.ms .blk, .bx.ms .pc { fill: var(--ink); stroke: none; }
.bx.ms .seam { fill: none; stroke: var(--paper); stroke-width: 1.5; }
.bx.ms .nm { fill: var(--invert-ink); font-weight: 700; }
.bx.ms .lg .m { fill: var(--invert-ink); }

.plates { transition: opacity 220ms linear; }
.plates.off { opacity: 0; }
.pblk { fill: var(--raised); stroke: var(--ink); stroke-width: 1.6; }
#drawing.live .pblk { transition: d 420ms var(--ease); }
#drawing.live .ld-plates { transition: opacity 120ms linear, transform 420ms var(--ease); }
.pname { font-size: 28px; font-weight: 700; letter-spacing: -0.015em; fill: var(--ink); }
.ptarget { font-family: var(--mono) !important; font-size: 17px; font-weight: 500; fill: var(--ink-2); }
.pempty { font-size: 17px; fill: var(--ink-2); transition: opacity 160ms linear; }
.pmore { font-family: var(--mono) !important; font-size: 16px; fill: var(--ink-2); opacity: 0; transition: opacity 160ms linear 300ms; }
.plates.filled .pempty { opacity: 0; }
.plates.filled .pmore { opacity: 1; }

.ldr { fill: none; stroke: var(--ink-3); stroke-width: 1.3; }
.ldr.cp { stroke: var(--signal); stroke-width: 3; }
.ldr.dashed { stroke-dasharray: 7 5; }
.arrow { fill: var(--ink-3); }
.arrow.cp { fill: var(--signal); }
.ld { opacity: 0; transition: opacity 120ms linear; }
.ld.on { opacity: 1; transition: opacity 160ms linear 600ms; }
.assume { font-family: var(--mono) !important; font-size: 14px; font-weight: 500; fill: var(--signal); }
.ground { fill: var(--paper); }

.fade { opacity: 0; transition: opacity 160ms linear; }
.fade.on { opacity: 1; transition: opacity 200ms linear 480ms; }
.dname { font-size: 13px; font-weight: 700; letter-spacing: 0.13em; fill: var(--ink-2); }
.dmono { font-family: var(--mono) !important; font-size: 15px; font-weight: 500; fill: var(--ink-2); }
.drule { stroke: var(--hair); stroke-width: 1; }
.drule.now { stroke: var(--ink); stroke-width: 1.5; }
.rdy { fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 12 3 3 3; }
.readyname { font-size: 13px; font-weight: 700; letter-spacing: 0.13em; fill: var(--ink); }
.cpname { font-size: 13px; font-weight: 700; letter-spacing: 0.13em; fill: var(--signal); }
.measure { font-family: var(--mono) !important; font-size: 40px; font-weight: 700; letter-spacing: -0.025em; fill: var(--signal); }
.measure.spare { fill: var(--ink); }
.mnote { font-family: var(--mono) !important; font-size: 15px; font-weight: 500; fill: var(--ink-2); }
.landed { fill: var(--hair); opacity: 0; transition: opacity 480ms ease-out 200ms; }
.landed.on { opacity: 0.8; }

.dline { fill: none; stroke: var(--ink-2); stroke-width: 1.5; }
.dlab { font-family: var(--mono) !important; font-size: 16px; font-weight: 500; fill: var(--ink-2); }
.dlab .b { fill: var(--ink); font-weight: 700; }
.dimset { opacity: 0; transition: opacity 220ms linear, transform 420ms var(--ease); }
.dimset.on { opacity: 1; }

/* ---------- figures for narrow screens: the product's list form ---------- */

.nplates { list-style: none; display: grid; gap: 14px; }
.nplate {
  position: relative; background: var(--raised); border: 1.6px solid var(--ink); border-radius: 3px;
  padding: 14px 40px 14px 16px;
}
.nplate::after {
  content: ""; position: absolute; top: -1.6px; right: -1.6px; width: 24px; height: 24px;
  background: var(--paper); border-left: 1.6px solid var(--ink); border-bottom: 1.6px solid var(--ink);
  border-bottom-left-radius: 24px;
}
.nplate .pn { display: block; font-size: 20px; font-weight: 700; letter-spacing: -0.012em; }
.nplate .pt { display: block; font-family: var(--mono); font-size: 14px; color: var(--ink-2); }
.nplate .pe { display: block; margin-top: 6px; font-size: 14.5px; color: var(--ink-2); }
.nplate ul { list-style: none; margin-top: 10px; border-top: 1px solid var(--hair); }
.nplate li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--hair); font-size: 15px; }
.nplate li:last-child { border-bottom: 0; }
.nplate li .w { margin-left: auto; font-size: 13px; color: var(--ink-2); }

.nlist { border-top: 2px solid var(--ink); }
.nlist h3 { font-size: 12px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-2); padding: 12px 0 6px; }
.nlist h3.or { color: var(--signal); }
.nlist ol { list-style: none; }
.nlist li { display: grid; grid-template-columns: 22px 1fr; gap: 4px 12px; padding: 10px 0 10px 12px; border-top: 1px solid var(--hair); }
.nlist li.cp { box-shadow: inset 3px 0 0 var(--signal); }
.nlist li .n { font-size: 15.5px; font-weight: 500; }
.nlist li.cp .n { font-weight: 700; }
.nlist li .meta { grid-column: 2; font-size: 13px; color: var(--ink-2); }
.nlist li .glyph { font-size: 20px; margin-top: 1px; }
.ndate { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ink-2); font-size: 15px; color: var(--ink-2); }
.ndate b { color: var(--ink); }
.ndate .cost { font-family: var(--mono); font-weight: 700; color: var(--signal); }
.ndate .spare { font-family: var(--mono); font-weight: 700; color: var(--ink); }

/* ---------- the Focus list: Sam's plate, with working moves ---------- */

.fpanel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; width: 100%; }
.ftable h3 { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; padding: 12px 0 8px; border-bottom: 1px solid var(--ink-3); }
.ftable h3 .label { color: var(--ink); }
.ftable h3 .note { font-size: 13px; font-weight: 400; color: var(--ink-2); }
.ftable h3.rdyh { margin-top: 18px; border-top: 2px solid var(--ink); }
.ftable ol { list-style: none; }
.ftable li {
  display: grid; grid-template-columns: 22px 56px minmax(0, 1fr) auto; column-gap: 12px; align-items: center;
  min-height: 58px; padding: 6px 0; border-bottom: 1px solid var(--hair);
}
.ftable li .glyph { grid-row: 1 / span 2; font-size: 20px; }
.ftable li .ref { grid-row: 1 / span 2; font-family: var(--mono); font-size: 13px; color: var(--ink-2); }
.ftable li .nm { grid-column: 3; font-size: 16px; font-weight: 500; }
.ftable li.mine .nm { font-weight: 700; }
.ftable li .when { grid-column: 3; font-family: var(--mono); font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ftable li .acts { grid-column: 4; grid-row: 1 / span 2; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ftable .empty { padding: 14px 0; font-size: 15px; color: var(--ink-2); }
.ftable .empty .tb { margin-left: 6px; }
.mv {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 44px; min-width: 44px; padding: 0 10px; border: 0; border-radius: 2px; cursor: pointer;
  background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--hair);
}
.mv:hover:not(:disabled) { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-3); }
.mv:disabled { opacity: 0.35; cursor: default; }
.mv svg { width: 12px; height: 12px; }
.p { font-family: var(--mono); font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.p.or { color: var(--signal); font-weight: 600; }
/* on a narrow screen the date leads, so it stays in view beside the move */
.fdate { order: -1; border-bottom: 1px solid var(--ink-2); padding-bottom: 14px; }
.fdate .big { font-family: var(--mono); font-weight: 700; font-size: clamp(32px, 3.2vw, 46px); letter-spacing: -0.03em; line-height: 1.05; margin-top: 6px; }
.fdate .meas { font-family: var(--mono); font-weight: 700; font-size: 18px; margin-top: 6px; }
.fdate .meas.or { color: var(--signal); }
.fdate .meas span { font-weight: 500; font-size: 14px; color: var(--ink-2); margin-left: 6px; }
.fdate .rng { font-family: var(--mono); font-size: 14px; color: var(--ink-2); margin-top: 4px; }
.fdate .said { font-size: 15px; }
@media (min-width: 1200px) and (min-height: 760px) {
  .fpanel { grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: clamp(32px, 4vw, 72px); align-items: center; }
  .fdate { order: 0; border-bottom: 0; border-left: 1px solid var(--hair); padding: 8px 0 8px clamp(24px, 3vw, 40px); }
  .fdate .said { display: none; }
}
@media (max-width: 560px) {
  .ftable li { grid-template-columns: 22px minmax(0, 1fr); padding: 10px 0; }
  .ftable li .ref { display: none; }
  .ftable li .nm, .ftable li .when { grid-column: 2; }
  .ftable li .acts { grid-column: 2; grid-row: auto; justify-content: flex-start; margin-top: 8px; }
  .ftable li .acts:empty { display: none; }
}

/* ---------- the two seats ---------- */

.seats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--split-gap); }
.seats .h3 { padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.seats ul { list-style: none; }
.seats li { display: block; padding: 16px 0; border-bottom: 1px solid var(--hair); color: var(--ink-2); }
.seats li b { color: var(--ink); font-weight: 500; }
@media (max-width: 820px) { .seats { grid-template-columns: 1fr; } }

/* ---------- what we won't build ---------- */

.never { list-style: none; border-top: 1px solid var(--hair); }
.never li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px var(--split-gap); align-items: baseline; padding: clamp(18px, 2vw, 26px) 0; border-bottom: 1px solid var(--hair); }
.never s {
  font-size: var(--t-list); font-weight: 800; font-stretch: 112%; letter-spacing: -0.02em; line-height: 1.05;
  text-decoration-line: line-through; text-decoration-thickness: 0.07em; text-decoration-color: var(--ink);
}
.never p { color: var(--ink-2); max-width: 30em; }
@media (max-width: 760px) { .never li { grid-template-columns: 1fr; } }

/* ---------- pricing, in one line ---------- */

.price-line { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--split-gap); align-items: end; }
.price-line .tb { margin-top: 14px; }
@media (max-width: 900px) { .price-line { grid-template-columns: 1fr; } }