/* Hallmark · shape: Index-First (swapped from draw's Stat-Led: no real figures) · genre: editorial · theme: Almanac (deal 1/3 picked 2/3, seed small-austere-developer-studio-abc4·7878d65f·2026-11-01·r0) · job: hire · draw: 59eb56
 * hero: Index · nav: floating pill · footer: statement · imagery: screenshots 2 (the apps' own, from their sites) · signature: the two apps set as an index on the printed sheet
 * axes: mid/grotesk-sans/chromatic-magenta · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V4 · weakest: S, a studio page could be anyone's; carried by the apps' own names, icons, terms and screens instead of studio adjectives */
@import url("./tokens.css");
@import url("./base.css");

/* Nav: a floating pill */
.nav-wrap { position: sticky; top: 0; z-index: var(--z-sticky-nav); padding-block: var(--space-md); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); max-width: calc(var(--container) - 2 * var(--gutter)); margin-inline: auto; width: calc(100% - 2 * var(--gutter)); min-height: 56px; padding-inline: var(--space-lg); background: var(--color-sheet); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); }
.wordmark { font: 600 var(--text-lg)/1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.nav-link { font: 500 var(--text-sm)/1 var(--font-display); color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.2em; white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; }
.wordmark:hover, .nav-link:hover { text-decoration-thickness: 2px; }
.wordmark:focus-visible, .nav-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }

/* Hero: the index is the visual */
.hero { min-height: calc(100dvh - 88px); display: flex; align-items: center; padding-block: var(--space-2xl) var(--space-3xl); }
.opening-grid { display: grid; gap: var(--space-2xl); }
.opening { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-md); align-items: end; }
.opening h1 { grid-column: 1 / span 8; font-size: var(--text-display-s); letter-spacing: -0.035em; line-height: 0.98; max-width: 16ch; }
.opening .lead { grid-column: 1 / span 6; color: var(--color-ink-2); }

.sheet { background: var(--color-sheet); border-top: var(--rule-bar) solid var(--color-ink); }
.index { padding-inline: var(--space-xl); }
.index-head, .index-row { display: grid; grid-template-columns: 64px minmax(max-content, 3fr) minmax(0, 4fr) minmax(0, 2fr); column-gap: var(--gap-columns); align-items: center; }
.index-head { padding-block: var(--space-md) var(--space-sm); border-bottom: var(--rule-bar) solid var(--color-rule-2); font: 500 var(--text-sm)/1.3 var(--font-body); color: var(--color-muted); }
.index-head span:first-child { grid-column: 1 / span 2; }
.index-row { padding-block: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.index-head + .index-row { border-top: 0; }
.mark { width: 64px; height: 64px; flex-shrink: 0; outline: var(--rule-hair) solid var(--color-rule); outline-offset: -1px; }
.index-name { font: var(--display-weight) var(--text-section)/1 var(--font-display); letter-spacing: var(--tracking-display); white-space: nowrap; }
.index-name a { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.index-name a:hover { text-decoration-thickness: 4px; }
.index-what { font-size: var(--text-lead); line-height: 1.4; color: var(--color-ink-2); max-width: 40ch; }
.index-get { font: 500 var(--text-lead)/1.3 var(--font-body); color: var(--color-ink); }
.index-get a { white-space: nowrap; color: var(--color-ink); text-decoration-color: var(--color-accent); text-underline-offset: 0.15em; display: inline-flex; min-height: 44px; align-items: center; }
.index-get a:hover { text-decoration-thickness: 2px; }
.index-name a:active, .index-get a:active { color: var(--color-ink-2); }

.wordmark:active, .nav-link:active { color: var(--color-ink-2); }

/* The two apps: splits, mirrored once, ratios changed */
.app { padding-block: var(--section-gap-s) 0; }
.app--pulse { padding-block: var(--section-gap) 0; }
.app-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--space-3xl); align-items: center; }
.app--pulse .app-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.app-text { display: grid; gap: var(--space-lg); justify-items: start; align-content: center; }
.app-text .lead { color: var(--color-ink-2); }
.facts { margin: 0; padding: 0; list-style: none; border-top: var(--rule-bar) solid var(--color-rule-2); width: 100%; }
.facts li { padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); max-width: 52ch; }
.note { font-size: var(--text-sm); color: var(--color-muted); max-width: 48ch; }

.screen { margin: 0; justify-self: center; display: grid; gap: var(--space-sm); }
.screen img { width: min(100%, 400px); height: auto; outline: var(--rule-hair) solid var(--color-rule-2); outline-offset: -1px; }
.screen figcaption { font-size: var(--text-sm); color: var(--color-muted); }

.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font: 500 var(--text-md)/1 var(--font-display); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-paper-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); }

/* Terms: the comparison table on the sheet */
.terms { padding-block: var(--section-gap) var(--section-gap-s); }
.terms h2 { margin-bottom: var(--space-2xl); }
.table-wrap { overflow-x: auto; padding: var(--space-md) var(--space-xl) var(--space-lg); }
table { width: 100%; border-collapse: collapse; font-size: var(--text-lead); }
thead th { font: 600 var(--text-title)/1.2 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); text-align: left; padding-block: var(--space-md); border-bottom: var(--rule-bar) solid var(--color-rule-2); }
thead th:first-child { font: 500 var(--text-sm)/1.3 var(--font-body); letter-spacing: 0; color: var(--color-muted); }
tbody th { font: 600 var(--text-title)/1.25 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); text-align: left; width: 24%; }
tbody th, tbody td { padding-block: var(--space-lg); padding-right: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); vertical-align: top; }
tbody tr:first-child th, tbody tr:first-child td { border-top: 0; }
td { color: var(--color-ink-2); width: 38%; }
@media (max-width: 40rem) {
  .table-wrap { overflow-x: visible; }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  tbody tr, tbody th, tbody td { display: block; width: auto; }
  tbody tr { padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
  tbody tr:first-child { border-top: 0; }
  tbody th, tbody td { border-top: 0; padding-block: var(--space-2xs); padding-right: 0; }
  tbody td::before { content: attr(data-label); display: block; font: 500 var(--text-sm)/1.3 var(--font-body); color: var(--color-muted); margin-top: var(--space-xs); }
}

/* Footer: a statement on the ink band */
.footer { background: var(--color-ink); color: var(--color-sheet); padding-block: var(--section-gap-s) var(--space-2xl); }
.footer-statement { font: 600 var(--text-section)/1.1 var(--font-display); letter-spacing: var(--tracking-display); max-width: 22ch; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
.footer a { color: var(--color-sheet); text-decoration-color: var(--color-accent-ink); text-underline-offset: 0.15em; }
.footer-statement a { text-decoration-thickness: 2px; }
.footer a:hover { text-decoration-thickness: 3px; }
.footer a:active { color: var(--color-paper-2); }
.footer a:focus-visible { outline: 2px solid var(--color-sheet); outline-offset: 3px; }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-xl); margin: var(--space-2xl) 0 0; padding: var(--space-lg) 0 0; list-style: none; border-top: var(--rule-hair) solid var(--color-rule-2); }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.legal { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-rule); }

@media (max-width: 60rem) {
  .app-grid, .app--pulse .app-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); }
  .app--pulse .screen { order: 2; }
  .table-wrap { padding-inline: var(--space-md); }
  table { font-size: var(--text-md); }
  .hero { min-height: 0; }
  .opening h1, .opening .lead { grid-column: 1 / -1; }
  .index { padding-inline: var(--space-lg); }
  .index-head { display: none; }
  .index-row { grid-template-columns: 48px minmax(0, 1fr); row-gap: var(--space-sm); align-items: start; }
  .index-row .mark { width: 48px; height: 48px; }
  .index-what, .index-get { grid-column: 2; }
  .index-head + .index-row { border-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .index-row { transition: none; } }