html { scroll-behavior: smooth; }
/* The page sits on its opposite (Joe, 2026-09-29): black around a light page, white around a
   dark one. --ink inverts with the theme, so this holds for both. */
body { margin: 0; padding: var(--space-6); background: var(--ink); }
/* The frame's rules are ink, not crimson, on this page (Joe, 2026-09-29). */
.am-mat--crimson { box-shadow: inset 0 0 0 4px var(--ink); }
.hang { max-width: 1136px; margin: 0 auto; }
.wrap { border: var(--border-hairline) solid var(--trim); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-5) var(--space-7); }
.mark { font-family: var(--font-display); font-size: 30px; line-height: 32px; }
.nav .mark { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-3); }
.nav-icon { flex: none; }
.nav ul { display: flex; flex-wrap: wrap; gap: var(--space-6); list-style: none; margin: 0; padding: 0; align-items: center; }
.nav a { color: var(--ink); text-decoration: none; }
.nav a:hover, .foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.navrule { margin: 0 var(--space-7); }
.hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-7); padding: var(--space-8) var(--space-7) var(--space-9); align-items: center; }
.hero .am-label { color: var(--ink-muted); display: block; margin-bottom: var(--space-4); }
.hero .hero-tag { margin: var(--space-6) 0 0; }
/* The headline runs across the whole page, above both columns (Joe, 2026-09-29). */
/* Abril Fatface for the headline (Joe, 2026-09-29, picked over Playfair Display), a size down from
   the 112px trial. */
/* One line across the top (Joe, 2026-09-29): the headline measures 12.73em in Abril Fatface, so
   8.12% of the hero's width spans the page's text column edge to edge (measured off Joe's screenshot: 12.28em wide in the browser), at every window size. */
.hero { container-type: inline-size; }
.hero-headline { grid-column: 1 / -1; font-family: "Abril Fatface", Georgia, serif; font-weight: 400; font-size: 8.12cqi; line-height: 1.05; white-space: nowrap; margin-bottom: var(--space-4); }
/* The question card sits lower so the headline owns the top (Joe, 2026-09-29). */
.hero .sample { align-self: start; margin-top: var(--space-8); }
.hero .am-body-lg { margin-top: var(--space-5); color: var(--ink-muted); max-width: 520px; }
.ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.frame { box-shadow: none; }
.frame .q { margin: var(--space-2) 0 var(--space-4); }
.frame .src { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.frame .meta { margin-top: var(--space-4); padding-top: var(--space-3); border-top: var(--border-hairline) solid var(--line); }
.sample-caption { margin: var(--space-2) 0 0; }
.signup { margin-top: var(--space-6); scroll-margin-top: var(--space-5); }
.signup .am-label { margin-bottom: var(--space-2); }
.signup-row { display: flex; gap: var(--space-2); }
.signup-row .am-input { flex: 1; min-width: 0; }
.signup-status { min-height: 20px; margin: var(--space-2) 0 0; }
.signup-privacy { margin: var(--space-2) 0 0; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.band { display: grid; grid-template-columns: 24px 8px 1fr 8px 24px; }
.band .drape { background: var(--crimson); }
.band .gap { background: var(--paper); }
/* The field and its cards (Joe, 2026-09-29). The canvas fills the zone below the paisley band;
   every text block sits on it as a paper card with a thin ink border, so the animation shows only
   in the gaps and at the edges. */
.field-zone { position: relative; isolation: isolate; }
.field-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block;
  color: var(--ink); font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace; }
.card { background: var(--paper); border: var(--border-hairline) solid var(--ink); padding: var(--space-5); }
.card > :first-child { margin-top: 0; }
.status-section .card .am-heading { margin-top: 0; }
.pull-card { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-7); align-items: start; padding: var(--space-6); }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-7); padding: var(--space-9) var(--space-7); scroll-margin-top: var(--space-5); }
.features .num { font-family: var(--font-display); font-size: 38px; line-height: 44px; color: var(--crimson-text); margin-top: var(--space-4); }
.features .am-title { margin: var(--space-3) 0 var(--space-2); }
.features .am-body { color: var(--ink-muted); }
.wall { grid-template-columns: 176px 16px 1fr 120px 16px 240px; align-items: end; padding: 0 var(--space-7); height: 176px; margin-top: var(--space-8); }
.wall .am-b-boteh { height: 176px; }
.wall .am-b-crimson.drape { height: 176px; }
.wall .band-cell { align-self: end; }
.wall .am-b-taupe { height: 64px; }
.wall .am-b-crimson:not(.drape) { height: 128px; }
.wall-rule { height: 8px; background: var(--trim); margin: var(--space-2) var(--space-7) 0; }
.pull { padding: var(--space-8) var(--space-7); }
.pull .am-body-lg { margin: 0; }
.status-section { padding: 0 var(--space-7) var(--space-9); scroll-margin-top: var(--space-5); }
.status-section .am-heading { margin: var(--space-5) 0 var(--space-3); }
.status-section p + p { margin-top: var(--space-4); }
.foot { background: var(--chrome); color: var(--on-chrome); border-top: var(--border-hairline) solid var(--trim); padding: var(--space-6) var(--space-7) var(--space-7); display: flex; flex-direction: column; gap: var(--space-6); }
/* The sibling-site row every EosGrove footer carries, in this page's two inks. */
/* Four marks spread evenly edge to edge: Arcmage flush left, Legend flush right (Joe, 2026-09-29). */
.foot-marks { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-6); }
.foot .lockup { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-sans); font-size: 15px; }
/* Every name in the row at one size (Joe, 2026-09-29): the icons matched and the words did not,
   because `.mark` elsewhere on the page is 30px. */
.foot .lockup span { font-size: 18px; line-height: 1; }
/* Caslon Display's lowercase is much shorter than Franklin's, so Arcmage needs ~1.3x the size to read the same. */
.foot .lockup .mark { font-family: var(--font-display); font-size: 24px; line-height: 1; }
.foot .sib { flex: none; }
/* Legend's uppercase wordmark (Joe, 2026-09-30), sized to the lowercase "Legend" it replaced. */
.foot .lockup .word { display: block; height: 13px; width: auto; fill: currentColor; }
/* Privacy and Contact sit at the top of the footer, right-aligned, above the marks. */
.foot ul { order: -1; align-self: flex-end; list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-5); font-family: var(--font-sans); font-size: 14px; }
.foot a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.simple-page { padding: var(--space-8) var(--space-7) var(--space-9); max-width: 740px; }
.simple-page h1 { margin-bottom: var(--space-5); }
.simple-page p { margin: 0 0 var(--space-4); }
.privacy-updated { color: var(--ink-muted); margin: var(--space-2) 0 var(--space-4); }
.privacy-block { margin-top: var(--space-6); }
.privacy-block .am-heading { margin: 0 0 var(--space-2); }
@media (max-width: 900px) {
  body { padding: var(--space-4); }
  .am-ornate { border-width: 40px; }
  .am-mat--crimson { padding: var(--space-4); }
  .nav, .hero, .features, .pull, .foot, .simple-page { padding-left: var(--space-5); padding-right: var(--space-5); }
  .navrule { margin-left: var(--space-5); margin-right: var(--space-5); }
  .hero { grid-template-columns: 1fr; padding-top: var(--space-7); padding-bottom: var(--space-8); }
  .features { gap: var(--space-5); }
  .wall { grid-template-columns: 1fr 12px 2fr 1fr; padding: 0 var(--space-5); }
  .wall > :nth-child(n+5) { display: none; }
  .wall-rule { margin-left: var(--space-5); margin-right: var(--space-5); }
  .status-section { padding-left: var(--space-5); padding-right: var(--space-5); }
}
@media (max-width: 620px) {
  body { padding: 0; }
  .am-ornate { border-width: 20px; }
  .am-mat--crimson { padding: 10px; }
  .nav { display: block; }
  .nav ul { margin-top: var(--space-4); gap: var(--space-4); }
  .features { grid-template-columns: 1fr; padding-top: var(--space-8); padding-bottom: var(--space-8); }
  .wall { grid-template-columns: 1fr 8px 2fr; }
  .wall > :nth-child(n+4) { display: none; }
  .pull { padding-top: var(--space-7); padding-bottom: var(--space-7); }
  .pull-card { grid-template-columns: 1fr; gap: var(--space-4); }
  .foot-marks { justify-content: flex-start; }
  .foot ul { align-self: flex-start; }
  .signup-row { flex-wrap: wrap; }
}