/* By the Carload · styles only its pages use, loaded after /shared/deep-dive.css */

/* the certificate (2 · Par value $25): a reconstruction of the typed legend Bill W. described on
   Hank P.'s stationery-store stock certificates, set as a bordered card, with the caption saying it
   is a reconstruction. Colors come from the page tokens, so it follows dark mode. */
.cert{margin:6px 0 0;display:flex;flex-direction:column;gap:12px}
.cert-card{width:100%;max-width:440px;margin-inline:auto;padding:10px;background:var(--mat);border:1px solid var(--line-2);box-shadow:4px 5px 0 var(--ph);transform:rotate(-.5deg)}
.cert-in{padding:20px 18px 18px;border:3px double var(--gold);display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.cert .cert-co{margin:0;font:700 15px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.cert .cert-par{margin:0;font:400 15px/1.3 var(--mono)}
.cert .cert-seal{width:44px;height:44px;border:2px solid var(--gold);border-radius:50%}
.cert .cert-sig{margin:6px 0 0;align-self:stretch;display:flex;justify-content:center;gap:6px;font:400 14px/1.3 var(--mono)}
.cert .cert-sig .blank{flex:0 1 120px;border-bottom:1px solid var(--ink)}
.cert figcaption{font:400 13px/1.5 var(--sans);color:var(--ink-2)}
@media (min-width:900px){.cert-card{margin-inline:0}}

/* the share split (2 · Par value $25): one bar for the 600 shares Hank's prospectus proposed, a
   third for cash and two-thirds for Hank and Bill, with what became of each part beneath. */
.split{margin-top:28px;display:flex;flex-direction:column;gap:12px}
.split .split-k{margin:0;font:700 12px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.split-bar{display:flex;height:22px;border-radius:4px;overflow:hidden;border:1px solid var(--line-2)}
.split-bar .cash{flex:1;background:var(--gold)}
.split-bar .work{flex:2;background:var(--track)}
.split-key{margin:0;padding:0;list-style:none;display:grid;gap:14px}
.split-key li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:10px;align-items:start}
.split-key .sw{width:14px;height:14px;margin-top:5px;border-radius:3px;border:1px solid var(--line-2)}
.split-key .sw.cash{background:var(--gold)}
.split-key .sw.work{background:var(--track)}
.split-key .n{display:block;font:700 15px/1.4 var(--sans)}
.split-key .d{display:block;font-size:17px;line-height:1.5}
@media (min-width:900px){.split-key{grid-template-columns:1fr 1fr;gap:24px}}

/* the contents with bylines (3 · To Wives): the book's chapters in order, each with who wrote it as
   far as the histories say, and a note. The chapter the section is about is marked .here. Phones
   stack each row; from 900px the number, title, writer and note sit in columns. */
.byline{margin:24px 0 0;padding:0;list-style:none;border-top:2px solid var(--ink)}
.byline li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:12px;row-gap:4px;padding:16px 0;border-bottom:1px solid var(--line-2)}
.byline .num{grid-row:span 3;font:700 15px/1.6 var(--mono);color:var(--ink-2)}
.byline .ttl{font:400 22px/1.2 var(--display)}
.byline .by{font:600 14px/1.4 var(--sans);color:var(--accent)}
.byline .nt{font-size:16px;line-height:1.5;color:var(--ink-2)}
.byline .nt a{color:inherit}
.byline li.here{background:var(--card);margin-inline:-12px;padding-inline:12px;border-left:3px solid var(--accent)}
@media (min-width:900px){
  .byline li{grid-template-columns:56px minmax(0,4fr) minmax(0,3fr) minmax(0,5fr);column-gap:24px;align-items:baseline}
  .byline .num{grid-row:auto}
}

/* the stock (2 · Par value $25): the certificate and the share split side by side from 900px. */
.stock{display:grid;gap:8px}
.stock .split-note{margin:4px 0 0;font-size:17px;line-height:1.55}
@media (min-width:900px){.stock{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px;align-items:start}.stock .split{margin-top:6px}}

/* the funnel (7 · Twelve postcards): three counts in order, each step much smaller than the last.
   Phones stack the steps as rows; from 700px they sit side by side. The last step is the dark one,
   like .stay.last. */
.funnel{margin:24px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.funnel li{display:flex;align-items:baseline;gap:14px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.funnel .n{font:700 34px/1 var(--mono);white-space:nowrap}
.funnel .k{font:600 14px/1.4 var(--sans);color:var(--ink-2)}
.funnel li.last{background:var(--night);color:var(--night-ink);border-color:var(--night-edge)}
.funnel li.last .k{color:var(--night-2)}
@media (min-width:700px){.funnel{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.funnel li{flex-direction:column;gap:8px;padding:20px}.funnel .n{font-size:48px}}

/* the shares (Legacy): the 600 shares of Works Publishing as Hank's 1938 prospectus split them,
   three labeled thirds, then a small bar on each buyback card showing how much the Alcoholic
   Foundation held after that step. Gold is the Foundation's. On the dark last card the empty
   thirds use the night line color. */
.own{margin-top:24px;display:flex;flex-direction:column;gap:10px}
.own .own-k{margin:0;font:700 12px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.own-plan{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.own-plan li{padding:10px 10px 12px;background:var(--track);border:1px solid var(--line-2);border-radius:4px;font:600 13px/1.35 var(--sans)}
.own-plan .n{display:block;margin-bottom:4px;font:700 22px/1.1 var(--mono)}
.own-bar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;height:14px}
.own-bar span{border-radius:2px;background:var(--track);border:1px solid var(--line-2)}
.own-bar .f{background:var(--gold);border-color:var(--gold)}
.stay.last .own-bar span{background:var(--night-line);border-color:var(--night-line)}
.stay.last .own-bar .f{background:var(--gold);border-color:var(--gold)}
@media (min-width:900px){.own-plan li{padding:12px 14px 14px;font-size:14px}.own-plan .n{font-size:26px}}