@import url('./landing.css');
@import url('./engine-story.css');

/* How the engine works (September 28, 2026): the first screen, the listening block, the
   notes on the example and the page's own floors. The four steps themselves are in
   engine-story.css, which the home page loads too. */

/* The first screen: short, and on the same left edge as everything under it, so a window
   800 pixels tall holds the story's whole first picture and the key under it. The glow
   and the grain fade out before the band ends, so no seam shows where the story begins. */
.engine-hero { padding:calc(104px + env(safe-area-inset-top)) max(24px,calc((100% - 1120px) / 2)) 32px; text-align:left; }
.engine-hero::before,.engine-hero::after { -webkit-mask-image:linear-gradient(#000 45%,transparent); mask-image:linear-gradient(#000 45%,transparent); }
.engine-hero .hero-eyebrow,.engine-hero #hero-title,.engine-hero .hero-lede { margin-inline:0; padding-inline:0; }
.engine-hero #hero-title { max-width:none; font-size:clamp(44px,5.6vw,72px); }
.engine-hero .hero-lede { max-width:40em; }

/* Hear it: the versions at one loudness, then this example's scores. */
.listen { display:grid; gap:24px; margin-top:96px; padding:40px 40px 32px; border-radius:24px; background:#0e0f12; box-shadow:inset 0 0 0 1px #ffffff12; }
.listen-head p { margin:8px 0 0; color:var(--snow-2); font-size:17px; }
.site .listen-title { margin:0; font-family:var(--serif); font-size:clamp(28px,3vw,36px); line-height:1.1; font-weight:500; font-variation-settings:'opsz' 48; }
.listen-players { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:16px; }
.listen-native { margin:0; }
.listen-native figcaption { margin-bottom:8px; color:var(--snow); font-weight:600; }
.listen-native audio { width:100%; }
.listen-live { display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; }
.listen-live[hidden] { display:none; }
.listen-play { min-width:112px; min-height:48px; padding:0 24px; border:0; border-radius:999px; background:var(--accent); color:var(--coal); font:600 17px/1 var(--sans); }
.listen-play:hover { background:var(--accent-hover); }
.listen-play:active { background:var(--accent-press); transform:scale(.97); }
.listen-switch { display:flex; flex-wrap:wrap; gap:4px; padding:4px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--hair-dark); }
.listen-switch button { min-height:44px; padding:0 16px; border:0; border-radius:999px; background:transparent; color:var(--snow-2); font:500 15px/1 var(--sans); }
.listen-switch button[aria-pressed="true"] { background:#ffffff1f; color:var(--snow); }
.listen-status { flex-basis:100%; min-height:24px; margin:0; color:var(--snow-2); font-size:15px; }
/* The numbers are set in the headline face, right-aligned, like the home page's figures. */
.scores { width:100%; border-collapse:collapse; font-size:16px; }
.scores caption { padding-bottom:12px; color:var(--snow-2); font-size:15px; text-align:left; caption-side:top; }
.scores th,.scores td { padding:12px 16px 12px 0; border-top:1px solid var(--hair-dark); text-align:left; vertical-align:top; }
.scores th:last-child,.scores td:last-child { padding-right:0; }
.scores th:first-child { width:46%; }
.scores thead th { color:var(--snow-3); font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
.scores thead th:not(:first-child) { text-align:right; }
.scores tbody th { color:var(--snow); font-weight:500; }
.scores tbody th span { display:block; color:var(--snow-3); font-size:13px; font-weight:450; }
.scores td { color:var(--snow); font:500 20px/1.2 var(--serif); font-variation-settings:'opsz' 72; font-variant-numeric:lining-nums tabular-nums; text-align:right; }

/* About this example: plain rows with hairlines, like the questions on the home page. */
.engine-narrow { max-width:820px; }
.engine-about .lede { margin-top:24px; }
.about-list { margin:40px 0 0; border-top:1px solid var(--hair); }
.about-list > div { display:grid; grid-template-columns:minmax(0,.32fr) minmax(0,1fr); gap:8px 32px; padding:20px 0; border-bottom:1px solid var(--hair); }
.about-list dt { color:var(--coal); font-weight:600; }
.about-list dd { margin:0; color:var(--coal-2); line-height:1.55; }
.about-list dd p { margin:12px 0 0; }
.about-list a { color:var(--accent-ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; overflow-wrap:anywhere; }
.chain { margin:0; padding-left:1.3em; }
.chain li + li { margin-top:4px; }
.chain strong { color:var(--coal); font-weight:600; }
.engine-wide { margin:40px 0 0; padding:24px; border-radius:20px; background:var(--card); box-shadow:inset 0 0 0 1px var(--hair); color:var(--coal); font-size:16px; line-height:1.55; }
.engine .closing-action .more-link { color:var(--snow); }

/* The shared navigation and footer, held to this page's floors: nothing under 12 pixels,
   and every footer link at least 44 pixels wide as well as tall. */
.engine .brand-alpha { font-size:12px; }
.engine .footer-brand .trademark { font-size:12px; }
.engine .footer-links a { min-width:44px; }

/* A phone (the story's own phone rules are in engine-story.css). */
@media (max-width:700px) {
  .engine-hero { padding:calc(88px + env(safe-area-inset-top)) 16px 28px; }
  .engine-hero::before { top:-26svh; height:calc(100% + 26svh); }
  .listen { margin-top:72px; padding:24px 20px; }
  .listen-play { flex:1 1 100%; }
  .listen-switch { flex:1 1 100%; }
  .about-list > div { grid-template-columns:minmax(0,1fr); }
}
/* A narrow phone: each measure becomes a block with its values labelled, and the three
   versions share one row, so nothing pushes the page sideways. The column heads stay for
   screen readers. */
@media (max-width:560px) {
  .listen { padding:24px 16px 20px; }
  .listen-switch { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-radius:16px; }
  .listen-switch button { padding:4px 8px; border-radius:12px; font-size:14px; line-height:1.15; }
  .scores thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .scores,.scores caption,.scores tbody,.scores tr,.scores th,.scores td { display:block; }
  .scores th:first-child { width:auto; }
  .scores tbody tr { padding:16px 0; border-top:1px solid var(--hair-dark); }
  .scores tbody th,.scores td { padding:0; border:0; }
  .scores td { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-top:8px; font-size:18px; }
  .scores td::before { content:attr(data-label); color:var(--snow-2); font:400 15px/1.5 var(--sans); }
  .engine-wide { padding:20px; }
}