/* Hallmark · shape: Conversational FAQ (swapped in from the Almanac draw 5fec6a at the user's pick; the draw dealt Split Studio) · genre: modern-minimal · theme: Wayfind (deal 3/3, seed free-reference-travelers-which-dba6·5c049e50·2026-11-07·r0) · job: visit (closest anatomy; the job is check before you fly) · draw: b5ef3d
 * hero: Poster (the canvas is the week's security board; no Atlanta photograph in the library, so no stand-in from another airport) · nav: masthead · footer: colophon block · imagery: none, the records set as boards, plates and rows · signature: a week of security traffic set as a departure board, the busiest hour lit amber · wayfind: platform
 * axes: light/mono/cool · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V3 · weakest: V, the question-and-answer order repeats the Almanac build at the user's pick; the boards, signs and amber figures carry the difference */
/* Hallmark · waive 64 · Chivo Mono sets every line of the page, labels included · Wayfind's material is the departure board's mono face, and the boards here are the airport's own records */
/* Hallmark · answered F4 · the ink fill on .cell-btn marks the chosen cell of a choice set, Wayfind's square-cell picker, not a second primary button */
/* Hallmark · dismissed 58 · on the route page two of the three airline flight lists sit hidden behind the square cells, and every security board ships twice (wide for desktop, tall for a phone) with one hidden, so the visible page reads near 400 words; each h1 is the searched question on its ink strip over a five-word answer, and the answer is the head a visitor reads */
/* Hallmark · hero-review: not run · finish-review: subagent · 8 findings · 6 resolved (copy against its rows, phone panel width, phone route table, hero button labels, ad units and the close, the lit board) · 2 kept at the user's call (amber dates, one split per section) */
/* Hallmark · dismissed 46a · every figure on these pages is computed from BTS on-time records and TSA throughput files; the flagged one is the last airline share in the ranked list, set beside the note on smaller carriers */
/* Hallmark · waive 8 · the shape repeats the Almanac build logged just before this one · the user compared all three directions and asked for Almanac's question-and-answer order in Wayfind's boards and plates */
@import url("./tokens.css");
@import url("./base.css");

:root {
  /* the board climbs through greys, then warms: the top step is amber, the one below it a dimmed amber, so the rush reads without a cliff */
  --heat-0: color-mix(in oklab, var(--color-paper) 6%, var(--color-ink));
  --heat-1: color-mix(in oklab, var(--color-paper) 14%, var(--color-ink));
  --heat-2: color-mix(in oklab, var(--color-paper) 24%, var(--color-ink));
  --heat-3: color-mix(in oklab, var(--color-paper) 36%, var(--color-ink));
  --heat-4: color-mix(in oklab, var(--color-accent-2) 55%, var(--color-ink));
  --heat-5: var(--color-accent-2);
  --masthead-height: 72px;
}

body { font-variant-numeric: tabular-nums; color: var(--color-ink-2); }
h1, h2, h3 { color: var(--color-ink); line-height: 0.98; }
h1 { font-size: min(var(--text-display), 4.75rem); }
h2 { font-size: min(var(--text-section), 3rem); }
.figure { font-weight: 800; color: var(--color-ink); }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

/* controls */
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-bar) solid var(--color-ink); background: transparent; color: var(--color-ink); font: 800 var(--text-md)/1 var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-micro) steps(1), color var(--dur-micro) steps(1); }
.btn:hover { background: var(--color-ink); color: var(--color-paper); }
.btn:active { background: var(--color-ink-2); color: var(--color-paper); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }

/* masthead */
.masthead { border-bottom: var(--rule-bar) solid var(--color-ink); background: var(--color-paper); }
.masthead__row { display: flex; justify-content: center; align-items: center; min-height: var(--masthead-height); }
.wordmark { margin: 0; font: 800 var(--text-xl)/1 var(--font-display); letter-spacing: -0.03em; color: var(--color-ink); text-decoration: none; white-space: nowrap; }

/* poster: the canvas is the board, the type sits on a plate */
.poster { background: var(--color-ink); color: var(--color-paper); }
.poster__inner { min-height: calc(100dvh - var(--masthead-height)); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-content: center; align-items: stretch; padding-block: var(--space-xl); }
/* how fresh the records are, stated before anything else on the board */
.poster__status { grid-column: 1 / -1; margin-bottom: var(--space-md); padding-bottom: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-ink-rule); font: 500 var(--text-md)/1.4 var(--font-body); color: var(--color-paper); }
.poster__status time { font-weight: 800; font-size: var(--text-lg); color: var(--color-accent-2); }

/* the period each piece of evidence covers: the first line inside its board, the date lit amber like a figure; on paper, plain ink */
.period { margin-bottom: var(--space-md); font: 500 var(--text-md)/1.4 var(--font-body); color: var(--color-ink-2); }
.period time { font-weight: 800; color: var(--color-ink); }
.ink-panel .period { padding-bottom: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-ink-rule); color: var(--color-paper); }
.ink-panel .period time { color: var(--color-accent-2); }
.plate { margin: 0; border: var(--rule-bar) solid var(--color-ink); }
.plate--hero { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: var(--space-lg); padding: var(--space-xl); background: var(--color-paper-3); color: var(--color-ink-2); border-color: var(--color-paper-3); }
.plate--hero .actions { margin-top: auto; }
.plate--hero .lead { color: var(--color-ink-2); }
/* the board fills the plate's height: same top edge, same bottom edge */
.poster__board { grid-column: 6 / -1; margin: 0; min-width: 0; display: flex; flex-direction: column; color: var(--color-paper); }
.poster__board > .board-wrap, .poster__board > .board--hero { flex: 1 1 auto; }
.poster__board .heat, .poster__board > .board--hero { height: 100%; }
.poster__board .heat td { height: 1px; }
.poster__board .cell { height: 100%; min-height: 36px; }
.poster__board .board--hero thead th { vertical-align: top; }
.poster__caption { margin-top: var(--space-md); font: 500 var(--text-md)/1.5 var(--font-body); color: var(--color-paper); }
.poster__caption .figure { color: var(--color-accent-2); }

/* the week as a board */
.board-wrap { min-width: 0; }
.board-wrap--tall { display: none; }
.heat { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
.heat thead th { height: 1.75rem; padding: 0; font: 500 var(--text-md)/1 var(--font-body); color: var(--color-paper); text-align: left; vertical-align: top; }
.heat thead th:first-child, .heat tbody th { width: 3.5rem; }
.heat tbody th { padding-right: var(--space-xs); font: 800 var(--text-md)/1 var(--font-body); color: var(--color-paper); text-align: left; }
.heat thead th:first-child, .heat tbody th { position: sticky; left: 0; z-index: var(--z-raised); background: var(--color-ink); }
.heat td { padding: 0; }
.cell { display: block; width: 100%; height: 48px; padding: 0; border: 0; border-radius: 0; background: var(--heat-0); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cell.l1 { background: var(--heat-1); } .cell.l2 { background: var(--heat-2); } .cell.l3 { background: var(--heat-3); } .cell.l4 { background: var(--heat-4); } .cell.l5 { background: var(--heat-5); }
.cell.is-peak { background: var(--color-accent-2); }
.cell:hover { outline: 1px solid var(--color-paper); outline-offset: -1px; }
.cell:active { outline: 2px solid var(--color-paper); outline-offset: -4px; }
.cell[aria-pressed="true"] { outline: var(--rule-bar) solid var(--color-paper); outline-offset: -2px; }
.cell:focus-visible { position: relative; z-index: var(--z-raised); outline: 3px solid var(--color-paper); outline-offset: 1px; }
.cell:disabled { opacity: 0.55; cursor: not-allowed; }

/* the readout: a figure as a sign, changed by the cell you choose */
.readout { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-md); row-gap: var(--space-2xs); margin-top: var(--space-md); padding-top: var(--space-sm); border-top: var(--rule-bar) solid var(--color-paper); }
.readout__when { font: 800 var(--text-md)/1.2 var(--font-body); color: var(--color-paper); }
.readout__figure { font: 800 var(--text-2xl)/1 var(--font-display); letter-spacing: -0.03em; color: var(--color-accent-2); }
.readout__note { flex-basis: 100%; font: 400 var(--text-md)/1.45 var(--font-body); color: var(--color-paper); }

/* question and answer: the question set small, the answer as the sign, the proof keeps the right */
.qa { padding-top: var(--section-gap); }
#departures, #hours { padding-top: var(--section-gap-l); }
main > .qa:last-child { padding-bottom: var(--section-gap); }
.qa__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); align-items: start; }
.qa__text { grid-column: 1 / span 5; display: grid; gap: var(--space-lg); position: sticky; top: var(--space-xl); }
.qa__proof { grid-column: 7 / -1; min-width: 0; }
.qa--lead .qa__text { grid-column: 1 / span 4; }
.qa--lead .qa__proof { grid-column: 5 / -1; }
/* the question rides on an ink strip, the way a sign's header does; the answer is the sign */
.qa h2, .plate--hero h1 { display: grid; justify-items: start; gap: var(--space-md); max-width: none; }
.q { display: block; padding: var(--space-xs) var(--space-sm); background: var(--color-ink); color: var(--color-paper); font-size: var(--text-lg); line-height: 1.3; letter-spacing: -0.01em; }
.sign { display: block; max-width: 16ch; }

/* one signboard, cut into cells by hairlines, instead of a field of separate boxes */
.signboard { display: grid; margin: 0; padding: 0; list-style: none; }
.signboard--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.signboard--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.signboard__cell { display: grid; gap: var(--space-2xs); align-content: start; padding: var(--space-md) var(--space-md) var(--space-lg); border-left: var(--rule-hair) solid var(--color-ink-rule); border-top: var(--rule-hair) solid var(--color-ink-rule); }
.signboard--four .signboard__cell:nth-child(4n + 1), .signboard--three .signboard__cell:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
.signboard--four .signboard__cell:nth-child(-n + 4), .signboard--three .signboard__cell:nth-child(-n + 3) { border-top: 0; }
.signboard__cell--tall { min-height: 15rem; }
.signboard__name { font: 800 var(--text-md)/1.2 var(--font-body); color: var(--color-paper); }
.signboard__figure { margin: var(--space-sm) 0 var(--space-2xs); font: 800 var(--text-2xl)/1 var(--font-display); letter-spacing: -0.03em; color: var(--color-accent-2); }
.signboard__figure--large { margin-top: var(--space-lg); font-size: var(--text-display-s); }
.signboard__meta { font: 400 var(--text-md)/1.4 var(--font-body); color: var(--color-paper); }
.signboard__meta .figure { color: var(--color-paper); }

/* boards on ink */
.ink-panel { margin: 0; padding: var(--space-lg); border: var(--rule-bar) solid var(--color-ink); background: var(--color-ink); color: var(--color-paper); }
.bars, .board { width: 100%; border-collapse: collapse; }
.bars thead th, .board thead th { padding: 0 0 var(--space-xs); border-bottom: var(--rule-bar) solid var(--color-paper); font: 500 var(--text-md)/1.3 var(--font-body); color: var(--color-paper); text-align: left; white-space: nowrap; }
.bars tbody th, .bars td, .board tbody th, .board td { padding: var(--space-xs) 0; border-bottom: var(--rule-hair) solid var(--color-ink-rule); font: 500 var(--text-md)/1.35 var(--font-body); color: var(--color-paper); text-align: left; }
.bars tbody th { width: 5.5rem; white-space: nowrap; }
.bars .num, .board .num { padding-left: var(--space-md); text-align: right; white-space: nowrap; }
.bars td.num { width: 4.5rem; font-weight: 800; color: var(--color-accent-2); }
.bars__track { padding-inline: var(--space-md); }
.bars__fill { display: block; height: 12px; background: var(--color-accent-2); }
.board tbody th { font-weight: 400; }
.board__code { display: inline-block; min-width: 3.5rem; font-weight: 800; }
.board td.board__figure { font-weight: 800; font-size: var(--text-lg); color: var(--color-accent-2); }
.board--checkpoints tbody th, .board--checkpoints td { padding-block: var(--space-sm); }
.board--checkpoints .board__group th { padding: var(--space-lg) 0 var(--space-xs); border-bottom: var(--rule-bar) solid var(--color-ink-rule); font-weight: 800; color: var(--color-accent-2); }
.board--checkpoints tbody:first-of-type .board__group th { padding-top: var(--space-md); }
.board--hero tbody th, .board--hero td { padding-block: var(--space-2xs); font-size: var(--text-lg); }
.board--hero td.board__figure { font-size: var(--text-2xl); }
.ink-panel .cell { height: 30px; }
.ink-panel .poster__caption { margin-bottom: 0; }

/* status rows */
.status { margin: 0; padding: 0; list-style: none; border-top: var(--rule-bar) solid var(--color-ink); }
.status__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name figure" "meta figure"; column-gap: var(--space-lg); align-items: center; padding: var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.status__name { grid-area: name; font: 800 var(--text-lg)/1.2 var(--font-body); color: var(--color-ink); }
.status__meta { grid-area: meta; font: 400 var(--text-md)/1.4 var(--font-body); color: var(--color-ink-2); }
.status__meta .figure { font-weight: 500; color: var(--color-ink-2); }
.status__figure { grid-area: figure; font: 800 var(--text-2xl)/1 var(--font-display); letter-spacing: -0.03em; color: var(--color-ink); }
.status__aside { margin-top: var(--space-md); max-width: 60ch; font: 400 var(--text-md)/1.5 var(--font-body); color: var(--color-ink-2); }
.status__aside .figure { font-weight: 500; color: var(--color-ink-2); }

/* a choice set of square cells */
.cells { display: flex; margin-bottom: var(--space-md); }
html:not(.js) .cells { display: none; }
.cell-btn { min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-bar) solid var(--color-ink); background: var(--color-paper-3); color: var(--color-ink); font: 500 var(--text-md)/1 var(--font-body); white-space: nowrap; cursor: pointer; transition: background-color var(--dur-micro) steps(1); }
.cell-btn + .cell-btn { border-left: 0; }
.cell-btn:hover { background: var(--color-paper-2); }
.cell-btn:active { background: var(--color-rule); }
.cell-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; position: relative; }
.cell-btn[aria-selected="true"] { background: var(--color-ink); color: var(--color-paper); }
.cell-btn:disabled { opacity: 0.55; cursor: not-allowed; }
html:not(.js) [role="tabpanel"] + [role="tabpanel"] { margin-top: var(--space-xl); }

/* a partner offer where an answer turns into an action: a bordered plate on paper, the link a blank until a partner is chosen */
.partner { padding-top: var(--space-3xl); }
.partner__plate { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md) var(--space-xl); padding: var(--space-lg); border: var(--rule-bar) solid var(--color-ink); background: var(--color-paper-3); }
.partner__line { font: 800 var(--text-lg)/1.3 var(--font-body); color: var(--color-ink); }
.partner__link { font: 500 var(--text-md)/1.4 var(--font-body); }
.fill { padding: 0 0.25em; border: 1px dashed color-mix(in oklch, var(--color-muted) 70%, transparent); border-radius: 3px; color: var(--color-muted); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* an ad between sections: labelled, its height held so nothing jumps when it loads */
.ad { padding-top: var(--space-3xl); }
.ad__label { margin-bottom: var(--space-2xs); font: 500 var(--text-sm)/1.3 var(--font-body); color: var(--color-muted); }
/* held at the unit it will carry: a 970 x 250 billboard on a desktop, a 300 x 250 rectangle on a phone */
.ad__label, .ad__space { max-width: 970px; }
.ad__space { min-height: 250px; border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); }

/* footer: a colophon block */
.footer { border-top: var(--rule-bar) solid var(--color-ink); }
.footer__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); padding-block: var(--space-2xl) var(--space-3xl); }
.footer .wordmark { grid-column: 1 / span 4; font-size: var(--text-lg); }
.footer__colophon { grid-column: 5 / span 7; display: grid; gap: var(--space-sm); }
.footer__colophon p { font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-2); }
.footer a, .qa a { color: var(--color-ink); transition: color var(--dur-micro) steps(1); }
.footer a:hover, .qa a:hover { color: var(--color-accent); }

@media (max-width: 60rem) {
  .poster__inner, .qa__row, .footer__inner { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-lg); }
  .plate--hero, .poster__board, .qa__text, .qa__proof, .qa--lead .qa__text, .qa--lead .qa__proof, .footer .wordmark, .footer__colophon { grid-column: 1 / -1; }
  .qa__text { position: static; }
  .signboard--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .signboard--four .signboard__cell { border-left: var(--rule-hair) solid var(--color-ink-rule); border-top: var(--rule-hair) solid var(--color-ink-rule); padding-left: var(--space-md); }
  .signboard--four .signboard__cell:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
  .signboard--four .signboard__cell:nth-child(-n + 2) { border-top: 0; }
  .signboard__cell--tall { min-height: 0; }
  .signboard__figure--large { font-size: var(--text-2xl); }
}
@media (max-width: 40rem) {
  .plate--hero { padding: var(--space-lg); }
  /* on a phone the week turns on its side: hours down, days across, all of it in view */
  .board-wrap--wide { display: none; }
  .board-wrap--tall { display: block; }
  .heat--tall thead th { height: auto; padding-bottom: var(--space-xs); text-align: center; }
  .heat--tall thead th:first-child, .heat--tall tbody th { width: 2.75rem; }
  .heat--tall tbody th { font-weight: 500; font-size: var(--text-md); }
  .heat--tall td, .poster__board .heat--tall td { height: auto; }
  .heat--tall .cell, .poster__board .heat--tall .cell, .ink-panel .heat--tall .cell { height: 22px; min-height: 0; }
  .bars tbody th { width: 4.5rem; }
  /* code over city on every row, so the column keeps one edge */
  .board__code { display: block; }
  .board__city { display: block; font-size: var(--text-md); font-weight: 400; }
  .ad__label, .ad__space { max-width: 300px; }
  .heat-legend i { width: 18px; }
  .heat-legend span:last-child { white-space: nowrap; }
}

/* the legend under a board: what one step of colour is worth */
.heat-legend { display: flex; align-items: center; gap: var(--space-2xs); margin-top: var(--space-sm); font: 500 var(--text-md)/1 var(--font-body); color: var(--color-paper); }
.heat-legend span:first-child { margin-right: var(--space-2xs); }
.heat-legend span:last-child { margin-left: var(--space-2xs); }
.heat-legend i { display: block; width: 32px; height: 14px; }
.heat-legend .l0 { background: var(--heat-0); } .heat-legend .l1 { background: var(--heat-1); } .heat-legend .l2 { background: var(--heat-2); }
.heat-legend .l3 { background: var(--heat-3); } .heat-legend .l4 { background: var(--heat-4); } .heat-legend .l5 { background: var(--heat-5); }