/* Hallmark · site additions over page.css (Wayfind): navigation, search, the index lists. Same tokens, same rules: 16px and up, square 2px ink borders, amber only on ink. */
/* Hallmark · dismissed 58 · on the generated pages the words counted are the index lists, every airport on the home page and every destination from an airport, one code and one city a row, scanned rather than read */
/* Hallmark · answered 77 · section count and mass follow each page's records: a route with two regular flights lists two, a small airport has fewer sections, and pages under the volume floor carry noindex, follow */
/* Hallmark · generated pages · finish-review: subagent · 8 findings · 6 resolved (no current service, thin hero, thin security sign and readout, airline lede, ties, titles and descriptions) · 2 partial at the owner's call (the route flight list stays, now in time order with cancellations under its own question; the A to Z index stays open on phones as the crawl path, with a letter strip) */
/* Hallmark · dismissed 58, 44b, 77 on /about/, /privacy/ and /contact/ · these are the method, policy and contact documents readers and AdSense review expect as plain reading; the text was written and approved for them, so there is no call to action to lift and no section to add */
/* Hallmark · answered F20 · the index lists are as long as the records make them (ORD has 165 destinations), so a last row of one stays as it falls */

/* masthead: the wordmark centred, the two ways out at its edges; it stays at the top while the long boards scroll under it */
.masthead { position: sticky; top: 0; z-index: 20; }
.masthead__row--nav { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-md); }
.masthead__link { justify-self: start; font: 500 var(--text-md)/1 var(--font-body); color: var(--color-ink); text-decoration: none; white-space: nowrap; transition: color var(--dur-micro) steps(1); }
.masthead__link--end { justify-self: end; }
/* a pictogram before each way out, as on an airport sign, so the two words read as links */
.masthead__link { display: inline-flex; align-items: center; gap: var(--space-xs); text-underline-offset: 4px; }
.masthead__icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; }
.wordmark { display: inline-flex; align-items: center; gap: 0.38em; }
.wordmark .mark { width: 1.2em; height: 1.2em; flex: none; }
/* the footer signs off with the mark standing over the name, the pair centred on each other; on a phone the pair sits mid-screen */
.footer .wordmark { align-self: start; justify-self: start; flex-direction: column; align-items: center; gap: var(--space-sm); font-size: var(--text-xl); }
.footer .wordmark .mark { width: 64px; height: 64px; }
@media (max-width: 60rem) { .footer .wordmark { justify-self: center; } .footer .wordmark .mark { width: 48px; height: 48px; } }
/* the 404 plate carries a faint dial behind its words, cut off at the plate's right edge */
.plate--nf { position: relative; overflow: hidden; }
.plate--nf > :not(.plate__watermark) { position: relative; }
.plate__watermark { position: absolute; right: -45%; top: 26%; width: 125%; height: auto; opacity: 0.08; pointer-events: none; }
@media (max-width: 60rem) { .plate__watermark { right: -42%; top: auto; bottom: -18%; width: 115%; } }
.masthead__link:hover { color: var(--color-accent); text-decoration: underline; }
.masthead__link:active { color: var(--color-ink-2); }

/* links on a board keep the board's colours */
.board__link { color: inherit; text-decoration: none; }
.board__link:hover { color: var(--color-accent-2); text-decoration: underline; }
.board__link:active { color: var(--color-paper); }

/* one or two airline cells */
.signboard--one { grid-template-columns: minmax(0, 1fr); }
.signboard--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.signboard--two .signboard__cell:nth-child(2n + 1), .signboard--one .signboard__cell { border-left: 0; padding-left: 0; }
.signboard--two .signboard__cell:nth-child(-n + 2), .signboard--one .signboard__cell { border-top: 0; }

/* the index lists: every route from an airport, every airport */
.qa--routes { padding-bottom: var(--section-gap); }
.routes-head { margin-bottom: var(--space-sm); }
.routes-note { margin-bottom: var(--space-lg); font: 400 var(--text-md)/1.5 var(--font-body); color: var(--color-ink-2); }
.route-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); column-gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; border-top: var(--rule-bar) solid var(--color-ink); }
.route-index li { border-bottom: var(--rule-hair) solid var(--color-rule); }
.route-index a { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); overflow-wrap: break-word; padding: var(--space-xs) 0; font: 400 var(--text-md)/1.4 var(--font-body); color: var(--color-ink); text-decoration: none; transition: color var(--dur-micro) steps(1); }
.route-index a:hover { color: var(--color-accent); text-decoration: underline; }
.route-index a:active { color: var(--color-ink-2); }
.route-index__code { font-weight: 800; }

/* search on the home plate */
.search { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
.search label { font: 500 var(--text-md)/1.3 var(--font-body); color: var(--color-ink-2); }
.search__row { display: flex; gap: var(--space-xs); }
.search input { flex: 1; width: 100%; min-width: 0; min-height: 48px; padding: 0 var(--space-md); border: var(--rule-bar) solid var(--color-ink); border-radius: 0; background: var(--color-paper); color: var(--color-ink); font: 500 var(--text-md)/1 var(--font-body); outline: 2px solid transparent; outline-offset: -4px; }
.search input::placeholder { color: var(--color-muted); }
.search input:focus-visible { outline-color: var(--color-focus); }
html:not(.js) .search { display: none; }
.search__results { margin: 0; padding: 0; list-style: none; }
.search__results a { display: block; padding: var(--space-xs) 0; border-bottom: var(--rule-hair) solid var(--color-rule); font: 500 var(--text-md)/1.4 var(--font-body); color: var(--color-ink); text-decoration: none; }
.search__results a:hover, .search__results a:focus-visible { color: var(--color-accent); text-decoration: underline; }
.search__none { font: 400 var(--text-md)/1.4 var(--font-body); color: var(--color-ink-2); }

@media (max-width: 40rem) {
  .masthead__row--nav { grid-template-columns: auto auto; justify-content: space-between; row-gap: var(--space-xs); padding-block: var(--space-sm); }  /* 12 above the wordmark, 8 to the links, 12 below them */
  .masthead__row--nav .wordmark { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .route-index { grid-template-columns: minmax(0, 1fr); }
}

/* a link on an ink board keeps the board's paper colour (page.css paints links in .qa with ink) */
.ink-panel .board__link, .poster .board__link { color: var(--color-paper); }
.ink-panel .board__link:hover, .poster .board__link:hover { color: var(--color-accent-2); }

/* the A to Z strip: one letter a cell, read like a platform board's index */
.az { display: flex; flex-wrap: wrap; margin: 0 0 var(--space-lg); border-top: var(--rule-bar) solid var(--color-ink); border-left: var(--rule-hair) solid var(--color-rule); }
.az a { display: grid; place-items: center; min-width: 48px; min-height: 48px; border-right: var(--rule-hair) solid var(--color-rule); border-bottom: var(--rule-hair) solid var(--color-rule); font: 800 var(--text-md)/1 var(--font-body); color: var(--color-ink); text-decoration: none; transition: background-color var(--dur-micro) steps(1), color var(--dur-micro) steps(1); }
.az a:hover { background: var(--color-ink); color: var(--color-paper); }
.az a:active { background: var(--color-ink-2); color: var(--color-paper); }
.az a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -4px; }
.route-index li[id] { scroll-margin-top: var(--space-md); }

/* the narrowest phones: a two-word column head may take two lines rather than push the board off the screen */
@media (max-width: 22.5rem) {
  .board thead th, .bars thead th, .board thead th.num, .bars thead th.num { white-space: normal; }
  .board .num, .bars .num { padding-left: var(--space-xs); }
}

/* above a phone, a long city name on a board wraps under itself, not under its code */
@media (min-width: 40.0625rem) {
  .board__link { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); }
}

/* one sign alone on the poster takes the answer's size, so the ink band holds a figure, not a footnote */
.poster__board .signboard--one .signboard__figure--large { font-size: var(--text-display); }

/* about, privacy and contact: one readable column on paper, the same faces and rules as the boards */
.doc { max-width: 44rem; padding-block: var(--space-2xl) var(--section-gap); }
.doc__title { margin-bottom: var(--space-lg); font-size: var(--text-section); line-height: 1.05; letter-spacing: -0.02em; }
.doc__meta { margin-bottom: var(--space-md); font: 500 var(--text-md)/1.4 var(--font-body); color: var(--color-ink-2); }
.doc p.doc__lead { font-size: var(--text-lg); line-height: 1.5; }
.doc h2 { max-width: none; margin: var(--space-xl) 0 var(--space-sm); padding-top: var(--space-md); border-top: var(--rule-bar) solid var(--color-ink); font-size: var(--text-xl); line-height: 1.2; }
.doc p, .doc li { font: 400 var(--text-md)/1.65 var(--font-body); color: var(--color-ink); }
.doc p + p, .doc p + ul, .doc ul + p { margin-top: var(--space-sm); }
.doc ul { margin: var(--space-sm) 0 0; padding-left: 1.25rem; }
.doc li + li { margin-top: var(--space-2xs); }
.doc strong { font-weight: 800; }
.doc a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 0.15em; transition: color var(--dur-micro) steps(1); }
.doc a:hover { color: var(--color-accent); }
.doc a:active { color: var(--color-ink-2); }

/* the trail to this page as the footer's first line, a hairline below it */
.footer__crumbs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-xl); padding-bottom: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); font: 500 var(--text-md)/1.4 var(--font-body); color: var(--color-ink-2); }
.footer__crumbs span[aria-hidden] { color: var(--color-muted); }
.footer__crumbs [aria-current] { font-weight: 800; color: var(--color-ink); }
/* home is the mark alone, as the first step of the trail; it takes the link colour on hover like the words after it */
.footer__crumbs-home { display: inline-flex; align-items: center; color: var(--color-ink); }
.footer__crumbs-home .mark { width: 20px; height: 20px; }
.footer__crumbs-home:hover { color: var(--color-accent); }

/* footer links in a row; Privacy settings is a button that reads as one of them */
.footer__links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); }
.footer__consent { padding: 0; border: 0; background: none; font: inherit; color: var(--color-ink); text-decoration: underline; cursor: pointer; transition: color var(--dur-micro) steps(1); }
.footer__consent:hover { color: var(--color-accent); }
.footer__consent[hidden] { display: none; }

/* home: the US board as the first screen, then on time by hour and weekday, then the rankings.
   The watermark dial drifts behind the first screen and its hand turns as the page scrolls. */
.home { --link-on-ink: oklch(74% 0.13 264); --on-ink-2: color-mix(in oklab, var(--color-paper) 78%, var(--color-ink)); --ink-line: color-mix(in oklab, var(--color-paper) 14%, var(--color-ink)); }
.home-hero { position: relative; overflow: hidden; background: var(--color-ink); color: var(--color-paper); }
.home-hero__watermark { position: absolute; left: -6%; top: -12%; width: min(70vw, 760px); height: auto; opacity: 0.2; pointer-events: none; }
.home-hero__watermark .hand, .home-hero__mark .hand { transform-origin: 16px 16px; transform-box: view-box; }
.home-hero__in { position: relative; display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-2xl); align-items: center; padding-block: var(--space-2xl); }
.home-hero__mark { display: block; width: 96px; height: 96px; margin-bottom: var(--space-lg); }
.home-hero h1 { margin: 0 0 var(--space-md); font: 800 clamp(2.25rem, 4.6vw, 3.6rem)/1.02 var(--font-display); letter-spacing: -0.02em; color: var(--color-paper); }
.home-hero h1 em { font-style: normal; color: var(--color-accent-2); }
.home-hero .lead { margin-bottom: var(--space-lg); color: var(--on-ink-2); }
.home-hero .search label { color: var(--color-paper); }
/* results on the dark first screen: paper type on ink rules; hover turns the link blue a step lighter, so it holds 4.5:1 on ink, and underlines */
.home-hero .search__results a { border-bottom-color: var(--ink-line); color: var(--color-paper); }
.home-hero .search__results a:hover, .home-hero .search__results a:focus-visible { color: var(--link-on-ink); text-decoration: underline; text-underline-offset: 4px; }
.home-hero .search__none { color: var(--on-ink-2); }
.home-hero__cap { margin: 0 0 var(--space-sm); font: 800 var(--text-md)/1.4 var(--font-body); color: var(--color-paper); }
.home-hero .cell { height: 32px; }
.home-hero .heat thead th:first-child, .home-hero .heat tbody th { background: transparent; }  /* the board never scrolls sideways here, so the sticky day column needs no fill over the watermark */
.home-hero .heat-legend { color: var(--on-ink-2); }
.home-hero__note { margin-top: var(--space-sm); font: 500 var(--text-md)/1.4 var(--font-body); color: var(--on-ink-2); }
.now { position: relative; display: grid; grid-template-columns: 1fr auto; gap: var(--space-md); align-items: center; margin-top: var(--space-md); padding: var(--space-md) var(--space-lg); border: var(--rule-hair) solid var(--ink-line); background: color-mix(in oklab, var(--color-paper) 4%, var(--color-ink)); }
.now p { margin: 0; }
.now__label { font: 800 var(--text-md)/1.3 var(--font-body); color: var(--on-ink-2); }
.now__when { margin-top: var(--space-2xs) !important; font: 800 var(--text-xl)/1.15 var(--font-display); color: var(--color-accent-2); }
.now__text { margin-top: var(--space-xs) !important; font: 500 var(--text-md)/1.45 var(--font-body); color: var(--color-paper); }
.now__delta { position: absolute; right: 136px; top: var(--space-lg); font: 800 var(--text-md)/1 var(--font-body); color: var(--color-accent-2); opacity: 0; pointer-events: none; }
.now__delta.is-on { animation: now-delta 1.8s var(--ease-out); }
@keyframes now-delta { 0% { opacity: 0; transform: translateY(8px); } 15%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.nums { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); margin-top: var(--space-md); }
.nums > div { padding: var(--space-md) var(--space-lg); border: var(--rule-hair) solid var(--ink-line); }
.nums b { display: block; font: 800 var(--text-3xl)/1 var(--font-display); color: var(--color-accent-2); text-transform: uppercase; }
.nums b span { display: inline-block; min-width: 0.62em; text-align: center; }
.nums > div > span { display: block; margin-top: var(--space-xs); font: 500 var(--text-md)/1.4 var(--font-body); color: var(--on-ink-2); }

/* dials: a ring whose yellow arc runs to the share */
.dial { margin: 0; text-align: center; }
.dial__ring { position: relative; width: 100%; max-width: 220px; aspect-ratio: 1 / 1; margin: 0 auto; }
.dial__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dial__track { fill: none; stroke: var(--color-paper-2); stroke-width: 10; }
.dial__value { fill: none; stroke: var(--color-accent-2); stroke-width: 10; stroke-dasharray: 251.33; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 1.1s var(--ease-out); }
.dial__figure { position: absolute; inset: 0; display: grid; place-items: center; font: 800 clamp(1.75rem, 4vw, 2.75rem)/1 var(--font-display); color: var(--color-ink); }
.dial figcaption { margin-top: var(--space-sm); font: 500 var(--text-md)/1.4 var(--font-body); color: var(--color-ink-2); }
.dial__feel { margin: var(--space-2xs) 0 0; font: 800 var(--text-lg)/1.25 var(--font-display); color: var(--color-ink); }
.dial--now { width: 104px; }
.dial--now .dial__ring { max-width: 104px; }
.dial--now .dial__track { stroke: var(--ink-line); }
.dial--now .dial__figure { font-size: var(--text-xl); color: var(--color-paper); }
.dial--now figcaption { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--on-ink-2); }
.dials { display: grid; grid-template-columns: repeat(3, 1fr); margin: var(--space-xl) 0 var(--space-lg); }
.dials > .dial { padding-inline: var(--space-md); }
.dials > .dial + .dial { border-left: var(--rule-hair) solid var(--color-rule); }

/* on time by the hour, one column each; the three best in yellow */
.home-sec__head { margin: var(--space-xl) 0 0; font: 800 var(--text-md)/1.4 var(--font-body); color: var(--color-ink); }
.hourcols { display: grid; grid-template-columns: repeat(var(--n, 19), 1fr); gap: var(--space-2xs); align-items: end; height: 240px; margin-top: var(--space-xl); padding-bottom: var(--space-lg); }
.hourcols__col { position: relative; height: var(--h); background: var(--color-ink-2); }
.hourcols__col.is-best { background: var(--color-accent-2); }
.hourcols__col b { position: absolute; left: 0; right: 0; top: calc(-1 * var(--space-lg)); font: 800 var(--text-sm)/1 var(--font-body); color: var(--color-ink); text-align: center; }
.hourcols__col span { position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--space-lg)); font: 500 var(--text-sm)/1 var(--font-body); color: var(--color-ink-2); text-align: center; }

/* weekdays: people a day as a bar, on time as the figure; the two best days framed */
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-sm); margin-top: var(--space-lg); }
.week__day { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); padding: var(--space-md) var(--space-2xs); border: var(--rule-hair) solid var(--color-rule); }
.week__day.is-best { border: var(--rule-bar) solid var(--color-ink); }
.week__name { font: 800 var(--text-lg)/1 var(--font-body); color: var(--color-ink); }
.week__bar { display: flex; align-items: flex-end; width: 44%; height: 120px; background: var(--color-paper-2); }
.week__bar i { display: block; width: 100%; background: var(--color-ink-2); }
.week__day.is-best .week__bar i { background: var(--color-ink); }
.week__ppl { font: 500 var(--text-md)/1 var(--font-body); color: var(--color-ink-2); }
.week__ot { font: 800 var(--text-xl)/1 var(--font-display); color: var(--color-ink); }
.week__day.is-best .week__ot { padding: 0 var(--space-2xs); background: var(--color-accent-2); }

/* a faint dial behind each section below the first screen, hanging off alternate edges; it crosses the
   section as the section crosses the screen, left to right then right to left, its hand turning as it goes */
.home-sec { position: relative; overflow: hidden; }
.home-sec > .container { position: relative; }
.home-sec__watermark { position: absolute; top: 50%; width: min(56vw, 620px); height: auto; margin-top: max(-28vw, -310px); opacity: 0.06; pointer-events: none; }
.home-sec--wm-left .home-sec__watermark { left: 0; transform: translateX(-80%); }
.home-sec--wm-right .home-sec__watermark { right: 0; transform: translateX(80%); }
.home-sec__watermark .hand { transform-origin: 16px 16px; transform-box: view-box; }

/* rankings two by two */
.home-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: start; }
.rank { width: 100%; margin-top: var(--space-md); border-collapse: collapse; font: 500 var(--text-md)/1.3 var(--font-body); color: var(--color-ink-2); }
.rank th, .rank td { padding: var(--space-sm) var(--space-2xs); border-bottom: var(--rule-hair) solid var(--color-rule); text-align: left; }
.rank thead th { font-weight: 800; color: var(--color-muted); }
.rank tbody th { font-weight: 800; color: var(--color-ink); white-space: nowrap; }
.rank .num { text-align: right; white-space: nowrap; }
.rank__big { font: 800 var(--text-xl)/1 var(--font-display); color: var(--color-ink); }
.home-sec .lead { margin-top: var(--space-sm); }

/* the yellow line under the masthead fills as the page scrolls */
.home .masthead { position: sticky; }
.home-progress { position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--rule-bar)); height: var(--rule-bar); background: var(--color-accent-2); transform: scaleX(0); transform-origin: left; pointer-events: none; }

/* motion only when the reader allows it, and only once the script is there to finish it */
@media (prefers-reduced-motion: no-preference) {
  html.js .home .cell { opacity: 0; transform: scaleY(0.2); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
  html.js .home .heat.in .cell { opacity: 1; transform: none; }
  html.js .home .hourcols__col, html.js .home .week__bar i { transform: scaleY(0); transform-origin: bottom; transition: transform 0.7s var(--ease-out); }
  html.js .home .hourcols.in .hourcols__col, html.js .home .week.in .week__bar i { transform: none; }
  html.js .home .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
  html.js .home .reveal.in { opacity: 1; transform: none; }
  html.js .home .rank tbody tr { opacity: 0; transform: translateX(-12px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
  html.js .home .rank.in tbody tr { opacity: 1; transform: none; }
  .home .cell.is-now { animation: now-breathe 2.4s ease-in-out infinite; }
}
.home .cell.is-now { outline: 3px solid var(--color-paper); outline-offset: -3px; position: relative; z-index: var(--z-raised); }
@keyframes now-breathe { 50% { outline-color: color-mix(in oklab, var(--color-paper) 25%, transparent); } }

@media (max-width: 60rem) {
  .home-hero__in, .home-two { grid-template-columns: minmax(0, 1fr); }
  /* on a phone the dials grow past the screen so they read as background, not as one more ring among the figures:
     the first screen's hangs off the right beside the headline, clear of the small mark and the board; the sections' sit behind their heading */
  .home-hero__watermark { left: auto; right: -50vw; top: 2%; width: 110vw; }
  .home-sec__watermark { top: var(--space-lg); width: 110vw; margin-top: 0; }
  .now { grid-template-columns: minmax(0, 1fr); }
  .now__delta { right: var(--space-lg); }
  .dials { gap: var(--space-xs); }
  .dials > .dial { padding-inline: var(--space-2xs); }
  .dial__feel { font-size: var(--text-md); }
  .hourcols__col b { display: none; }
  .hourcols__col span { font-size: 0.625rem; }
  .week { gap: var(--space-2xs); }
  .week__day { padding: var(--space-sm) 0; }
  .week__name { font-size: var(--text-md); }
  .week__ppl { font-size: var(--text-xs); }
  .week__ot { font-size: var(--text-md); }
  .week__bar { width: 60%; height: 90px; }
  .rank .rank__city { display: none; }
  .nums b { font-size: var(--text-2xl); }
}