/* Home page rules, from the 9 October prototype. Loads after book.css and
   site.css; site.css owns the shared header, footer, wrap, and buttons. */

/* Layout: the public home page as a ruled 1B5 page on a 32px baseline grid.
   One dark band is a whiteboard with chalk rules. Single committed look. */
:root {
  --chalk:     #f2efe6;
  --chalk-rule:rgba(243,247,251,0.14);
  --wrap:      1120px;
}
h1 { font-size: 64px; line-height: 64px; font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; }
h2 { font-size: 36px; line-height: 64px; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
h3 { font-size: 20px; line-height: 32px; font-weight: 700; }
.lede { font-size: 19px; color: var(--ink-2); max-width: 60ch; }
.note { font-family: var(--font-note); font-size: 24px; line-height: 32px; color: var(--sky-deep); font-weight: 700; }
.note-ink { color: var(--ink-3); }
/* REQ-132. The opening stanza, under the hero title. Ink rather than
   `--ink-2`, because it carries the product's one claim and should read
   stronger than the lede below it. 32px line height keeps it on the page's
   baseline rhythm, and the measure is short so the four lines stay a stanza
   rather than becoming a paragraph.

   It borrows `settle`, the keyframe the dialogue boxes already use, and takes
   it **once on the block**. A delay per line would rebuild the sequence
   Patrick rejected on 14 October 2026. Motion is opt-in here, as everywhere
   in this stylesheet, so the resting state is the stanza in place. */
.hero-open { font-size: 22px; line-height: 32px; font-weight: 700; color: var(--ink); max-width: 34ch; }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-anim="0"]) .hero-open { animation: settle 500ms var(--ease) both; }
}

.h2-gap { margin-bottom: 32px; }
.p-gap { margin-top: 32px; }
@media (max-width: 640px) { h1 { font-size: 44px; line-height: 48px; } h2 { font-size: 30px; line-height: 32px; padding-block: 16px; } }

section { padding-block: 64px; }
.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 32px; } }
.stack > * + * { margin-top: 32px; }

.btn-row { min-height: 64px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
main .btn { padding: 0 22px; font-size: 17px; }
.btn-yellow { background: var(--yellow); }
.btn-chalk { border-color: var(--chalk); color: var(--chalk); }
.btn-chalk:hover { background: rgba(242,239,230,.12); }
.btn-chalk:focus-visible { outline-color: var(--chalk); }

.hl { padding: 0 0.2em; margin: 0 -0.2em; border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; background-repeat: no-repeat; background-size: 100% 100%; background-position: 0 0; }
.hl-q { background-image: linear-gradient(color-mix(in srgb, var(--yellow) 85%, transparent), color-mix(in srgb, var(--yellow) 85%, transparent)); }
.hl-a { background-image: linear-gradient(color-mix(in srgb, var(--mint) 55%, transparent), color-mix(in srgb, var(--mint) 55%, transparent)); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hl { animation: sweep linear both; animation-timeline: view(); animation-range: entry 20% entry 90%; }
  }
}
@keyframes sweep { from { background-size: 0% 100%; } }

/* The example exchange in the hero */
.dialogue-fig { margin: 0; }
.dialogue { display: flex; flex-direction: column; gap: 32px; padding-top: 32px; }
.box { position: relative; padding: 6px 18px; margin-block: -8px; border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); max-width: 88%; }
.box.student { align-self: flex-end; box-shadow: var(--shadow); }
.box .who { position: absolute; top: -24px; left: 0; font-family: var(--font-note); font-size: 22px; line-height: 32px; color: var(--ink-3); white-space: nowrap; }
.box.student .who { left: auto; right: 0; }
.box .tag { position: absolute; right: -8px; bottom: -24px; font-family: var(--font-note); font-size: 22px; line-height: 32px; font-weight: 700; }
.tag-q { color: var(--yellow-ink); } .tag-a { color: var(--mint-ink); }
@media (prefers-reduced-motion: no-preference) {
  .box { animation: settle 500ms var(--ease) both; }
  .box:nth-child(2) { animation-delay: 120ms; } .box:nth-child(3) { animation-delay: 240ms; }
}
@keyframes settle { from { opacity: 0; transform: translateY(8px); } }

/* min-height, so the row grows when the labels wrap on a phone. */
.strip { min-height: 64px; padding-block: 16px; display: flex; align-items: center; gap: 0 28px; flex-wrap: wrap; font-family: var(--font-note); font-size: 22px; line-height: 32px; color: var(--ink-3); }
.strip b { color: var(--ink); font-weight: 700; }

/* Whiteboard band: full-bleed ink with chalk rules */
.board { position: relative; padding: 64px 0; background-color: var(--ink);
  background-image: repeating-linear-gradient(to bottom, transparent 0 26px, var(--chalk-rule) 26px 28px, transparent 28px var(--line)); color: var(--chalk); }
.board, .board h2, .board li, .board .lede-chalk, .board a, .board a:hover { color: var(--chalk); }
.board .note { color: var(--sky); }
.board .who { color: #aab1b8; }
.board :focus-visible { outline-color: var(--chalk); }
.lede-chalk { font-size: 19px; color: #d9d6cc; max-width: 60ch; }
.chalkbox { position: relative; padding: 6px 18px; margin-block: -8px; border: 2px solid var(--chalk); border-radius: var(--radius); background: #253544; color: var(--chalk); max-width: 88%; box-shadow: 0 10px 24px -14px rgba(0,0,0,.6); }
.chalkbox.student { align-self: flex-end; background: #2b4a5e; }
.chalkbox .who { position: absolute; top: -24px; left: 0; font-family: var(--font-note); font-size: 22px; line-height: 32px; color: #aab1b8; white-space: nowrap; }
.chalkbox.student .who { left: auto; right: 0; }
.refused { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0; }
.refused li { min-height: 64px; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.refused s { text-decoration-color: var(--red); text-decoration-thickness: 3px; font-weight: 700; }
.chip { height: 32px; padding: 0 12px; border-radius: 4px; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; border: 2px solid; white-space: nowrap; }
.chip-down { background: #b04a43; border-color: #8f3a33; color: #ffffff; }
.chip-up { background: var(--mint); border-color: var(--mint-ink); color: var(--ink); }
.chip-flat { background: var(--yellow); border-color: var(--yellow-ink); color: var(--ink); }

/* Steps: a real sequence, so numbers carry meaning */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; gap: 64px; } }
.step { padding: 30px 22px; border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); background: var(--card); position: relative; }
.step .n { position: absolute; top: -32px; left: 16px; font-family: var(--font-note); font-size: 28px; line-height: 32px; color: var(--sky-deep); font-weight: 700; }
.step p { color: var(--ink-2); }

/* Subject blocks */
.subjects { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 16px; }
@media (max-width: 860px) { .subjects { grid-template-columns: repeat(2, 1fr); } }
.subj { height: 128px; padding: 16px 20px; display: flex; align-items: flex-end; font-weight: 700; font-size: 22px; line-height: 32px; border: 2px solid var(--ink); border-radius: var(--radius); text-decoration: none; color: var(--ink); transition: transform 150ms var(--ease), box-shadow 150ms var(--ease); }
a.subj:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow); }
.subj:focus-visible { outline: 3px solid var(--sky-deep); outline-offset: 3px; }
.s-sky { background: var(--sky); } .s-mint { background: var(--mint); } .s-yellow { background: var(--yellow); }
.s-ink { background: var(--ink); color: #fff; } .s-deep { background: var(--sky-deep); color: #fff; } .s-paper { background: #fff; }
/* The one closed area: pencilled in, dashed, and plainly labelled. */
.s-closed { background: transparent; border-style: dashed; border-color: var(--ink-3); color: var(--ink-3); font-weight: 400; font-size: 15px; line-height: 24px; display: block; padding-top: 12px; }
.s-closed b { display: block; font-size: 20px; line-height: 32px; color: var(--ink-2); }

/* Parent teaser chart */
.chart-card { margin: 0; padding: 30px 22px; border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); background: var(--card); overflow-x: auto; }
.chart-head { display: flex; justify-content: space-between; gap: 0 16px; flex-wrap: wrap; min-height: 64px; align-items: center; }
.legend { display: flex; gap: 20px; list-style: none; padding: 0; margin: 0; font-size: 15px; font-weight: 700; color: var(--ink-2); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 14px; height: 14px; border-radius: 3px; border: 2px solid; display: inline-block; }
.sw-up { background: var(--mint); border-color: var(--mint-ink); } .sw-flat { background: var(--yellow); border-color: var(--yellow-ink); } .sw-down { background: var(--red); border-color: var(--red-ink); }
.chart { height: 320px; min-width: 420px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; align-items: end; padding: 32px 0 0 36px; position: relative; }
.chart .grid { position: absolute; inset: 32px 0 64px 36px; pointer-events: none; }
.chart .grid i { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--rule); }
.chart .grid i::after { content: attr(data-v); position: absolute; left: -36px; width: 28px; text-align: right; top: -12px; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.col { display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.bar { width: min(56px, 100%); border: 2px solid; border-radius: 4px 4px 0 0; transform-origin: bottom; position: relative; background-clip: padding-box; }
.bar:focus-visible { outline: 3px solid var(--sky-deep); outline-offset: 2px; }
.bar.up { background: var(--mint); border-color: var(--mint-ink); } .bar.flat { background: var(--yellow); border-color: var(--yellow-ink); } .bar.down { background: var(--red); border-color: var(--red-ink); }
.val { height: 32px; display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.val.up { color: var(--mint-ink); } .val.flat { color: var(--yellow-ink); } .val.down { color: var(--red-ink); }
.lbl { height: 32px; font-size: 14px; color: var(--ink-3); display: flex; align-items: center; }
.bar .tip { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); background: var(--ink); color: #fff; font-size: 13px; line-height: 20px; padding: 4px 10px; border-radius: var(--radius); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 150ms var(--ease); }
.bar:hover .tip, .bar:focus-visible .tip { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .bar { animation: grow 700ms var(--ease) both; }
  .col:nth-child(3) .bar { animation-delay: 80ms; } .col:nth-child(4) .bar { animation-delay: 160ms; } .col:nth-child(5) .bar { animation-delay: 240ms; } .col:nth-child(6) .bar { animation-delay: 320ms; } .col:nth-child(7) .bar { animation-delay: 400ms; }
  @supports (animation-timeline: view()) { .bar { animation: grow linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; animation-delay: 0s; } }
}
@keyframes grow { from { transform: scaleY(0); } }
.chart-caption { min-height: 64px; display: flex; align-items: center; }
.topics { list-style: none; padding: 0; }
.topics li { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; min-height: 64px; }

/* CTA band */
.cta { padding: 64px 0; background: var(--yellow); background-image: repeating-linear-gradient(to bottom, transparent 0 26px, rgba(12,24,36,0.12) 26px 28px, transparent 28px var(--line)); }
.cta .lede { color: var(--ink); }
.cta :focus-visible { outline-color: var(--ink); }

/* The footer follows the yellow band directly. */
.site-footer { margin-top: 0; }


/* ---- chart geometry, one class per value, so the page carries no style attribute ---- */
.u-b0 { bottom: 0; }
.u-b100 { bottom: 100%; }
.u-b50 { bottom: 50%; }
.bar-h38 { height: calc(38 * 2.24px); }
.bar-h44 { height: calc(44 * 2.24px); }
.bar-h46 { height: calc(46 * 2.24px); }
.bar-h58 { height: calc(58 * 2.24px); }
.bar-h63 { height: calc(63 * 2.24px); }
.bar-h71 { height: calc(71 * 2.24px); }
/* On a wide page the card need not scroll; a scrollbar would add 15px and push the text off the rules. */
@media (min-width: 760px) { .chart-card { overflow: visible; } }