/* Hallmark · genre: modern-minimal · macrostructure: Split Studio · theme: custom · enrichment: none · nav: N5 · footer: Ft1
 * knobs: hero=H2 split diptych 7/5 with the release poster as proof · rows alternate text/proof (flip on 2 and 4) · F3 spec sheet · F4 steps · C1 outline pill + filled gold pill
 * theme: custom · vibe: "warm, clear, made by friends" · paper: oklch(96.8% 0.009 85) · accent: oklch(80% 0.13 72)
 * display: Geist 600 · body: Geist 400 · outlier: TeX Gyre Pagella Bold (the game's name + the vision quote) · axes: light / modern-sans / chromatic-amber ~72
 * studied: no · context: user-provided (audience: Claude for Startups reviewers, then press, partners, players · style: clean & light · colours: brand · team: no names · location: Canada) · Hallmark v1.1.0
 * pre-emit critique: P4 H5 E4 S4 R5 V5
 * contrast: pass (40–41) · nav: N5 · footer: Ft1 · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48)
 * responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57) · slop test 58 / 58 · fresh-eyes review: applied
 */

html { overflow-x: clip; scroll-behavior: smooth; }
body { overflow-x: clip; }

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
a { color: inherit; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
h1, h2, h3 { color: var(--color-ink); font-family: var(--font-display); font-weight: 600; }

/* states every interactive element shares: an instant focus ring and a three-channel disabled state */
:focus-visible {
  outline: var(--rule-focus) solid var(--color-focus);
  outline-offset: var(--rule-focus-offset);
}
a[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

.skip {
  position: absolute;
  left: var(--gutter);
  top: var(--space-xs);
  z-index: var(--z-skip);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-on-ink);
  transform: translateY(-300%);
}
.skip:focus-visible { transform: none; }
.skip:active { background: var(--color-ink-hover); }

/* ---------- N5 · floating pill nav ---------- */
.nav-wrap {
  position: fixed;
  inset: var(--space-md) 0 auto;
  z-index: var(--z-nav);
  display: flex;
  justify-content: center;
  padding-inline: var(--gutter);
  pointer-events: none;
}
.nav-pill {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  max-width: 100%;
  padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-sm);
  background: var(--color-glass);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-nav);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav-pill { background: var(--color-surface); }
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--hit-target);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  line-height: 1;
  letter-spacing: var(--tracking-heading);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark img { width: var(--logo-size); height: var(--logo-size); border-radius: var(--radius-logo); }
.wordmark:active { color: var(--color-ink-2); }
/* the name joins the logo once the pill has room for it next to the Play button */
.wordmark span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 22rem) { .wordmark span { position: static; width: auto; height: auto; overflow: visible; clip-path: none; } }

.nav-pill__links { display: flex; gap: var(--space-3xs); margin: 0; padding: 0; list-style: none; }
.nav-pill__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--hit-target);
  padding-inline: var(--space-sm);
  border-radius: var(--radius-pill);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.nav-pill__links a:active { background: var(--color-rule); color: var(--color-ink); }
@media (max-width: 47.99rem) { .nav-pill__links { display: none; } }

/* ---------- buttons: filled gold pill (primary), outline pill (C1), ink pill (nav) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: var(--hit-target);
  padding: 0 var(--space-lg);
  border: var(--rule-hair) solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn--gold { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn--gold:active { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.btn--ink { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-on-ink); }
.btn--ink:active { background: var(--color-ink-hover); border-color: var(--color-ink-hover); }
.btn--outline { background: transparent; border-color: var(--color-ink); color: var(--color-ink); }
.btn--outline:active { background: var(--color-ink); color: var(--color-on-ink); }
.btn--sm { padding-inline: var(--space-md); font-size: var(--text-sm); }
.btn[aria-disabled="true"] { transform: none; }

/* ---------- C3 · typographic link ---------- */
.link {
  color: var(--color-ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--color-accent-strong);
  text-decoration-thickness: var(--rule-link);
  text-underline-offset: var(--rule-link-offset);
  white-space: nowrap;
}
.link:active { color: var(--color-accent-strong); }
.link[aria-disabled="true"] { color: var(--color-muted); text-decoration: none; }
.link--quiet { color: var(--color-ink-2); font-weight: 400; }

@media (hover: hover) {
  .nav-pill__links a:hover { background: var(--color-paper-2); color: var(--color-ink); }
  .wordmark:hover { color: var(--color-ink-2); }
  .btn--gold:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
  .btn--ink:hover { background: var(--color-ink-hover); border-color: var(--color-ink-hover); }
  .btn--outline:hover { background: var(--color-ink); color: var(--color-on-ink); }
  .link:hover { text-decoration-thickness: var(--rule-link-hover); }
  a[aria-disabled="true"]:hover { background: none; text-decoration: none; }
}

/* ---------- sections + Split Studio rows ---------- */
.section { padding: var(--space-3xl) var(--gutter); scroll-margin-top: var(--nav-clear); }
main { padding-top: var(--nav-clear); }
.section--hero { padding-top: var(--space-xl); }
.section--band { background: var(--color-paper-2); }
.section--contact { padding-bottom: var(--space-2xl); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--split-gap);
  align-items: center;
  max-width: var(--container);
  margin-inline: auto;
}
.split--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.split--flip .split__proof { order: -1; }
.split--wide-proof { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.split--top { align-items: start; }

.split__text > * + * { margin-top: var(--space-lg); }
.split__text p { max-width: var(--measure); text-wrap: pretty; }

h1 {
  font-size: var(--text-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  overflow-wrap: anywhere;
  min-width: 0;
  text-wrap: balance;
}
h2 {
  font-size: var(--text-xl);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  overflow-wrap: anywhere;
  min-width: 0;
  text-wrap: balance;
}
h3 { font-size: var(--text-md); line-height: var(--lh-heading); letter-spacing: var(--tracking-heading); }
.lede { font-size: var(--text-md); line-height: var(--lh-snug); color: var(--color-ink-2); }
strong { color: var(--color-ink); font-weight: 600; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.split__text > .actions { margin-top: var(--space-xl); }

/* proof column: real pictures in soft frames */
.media img { width: 100%; border-radius: var(--radius-media); box-shadow: var(--shadow-media); }
.media figcaption { margin-top: var(--space-sm); font-size: var(--text-xs); color: var(--color-muted); }

/* ---------- Bloomguard: product title + F3 spec sheet ---------- */
.product-title { display: grid; gap: var(--space-2xs); }
.product-title__name {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: var(--text-brand);
  line-height: 1;
  letter-spacing: var(--tracking-brand);
  color: var(--color-ink);
}
.product-title__sub { font-size: var(--text-md); font-weight: 500; letter-spacing: 0; color: var(--color-muted); }

.spec { margin: var(--space-xl) 0 0; border-top: var(--rule-hair) solid var(--color-rule); }
.spec__row {
  display: grid;
  grid-template-columns: minmax(0, 7rem) minmax(0, 12.5rem) minmax(0, 1fr);
  gap: var(--space-2xs) var(--space-md);
  align-items: baseline;
  padding-block: var(--space-sm);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.spec dt { font-size: var(--text-sm); color: var(--color-muted); }
.spec dd { margin: 0; color: var(--color-ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.spec .spec__note { font-size: var(--text-sm); font-weight: 400; color: var(--color-muted); }

/* ---------- F4 · steps ---------- */
.steps { display: grid; gap: var(--space-lg); margin: var(--space-xl) 0 0; padding: 0; list-style: none; }
.steps h3 { display: flex; align-items: baseline; gap: var(--space-sm); }
.steps__n { color: var(--color-accent-strong); font-variant-numeric: tabular-nums; }
.steps p { margin-top: var(--space-2xs); max-width: var(--measure); }

/* ---------- studio: values + the vision quote ---------- */
.values__title { margin-top: var(--space-xl); }
.split__text > .values__title { margin-top: var(--space-xl); }
.values { display: grid; gap: var(--space-md); margin: var(--space-md) 0 0; }
.values div { display: grid; gap: var(--space-3xs); max-width: var(--measure); }
.values dt { color: var(--color-ink); font-weight: 600; }
.values dd { margin: 0; }

.vision { padding-top: var(--space-xs); }
.vision p {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: var(--text-quote);
  line-height: var(--lh-snug);
  color: var(--color-ink);
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.vision figcaption { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- contact ---------- */
.contact-email { font-size: var(--text-email); font-weight: 600; line-height: var(--lh-heading); letter-spacing: var(--tracking-heading); }
.contact-email .link { font-weight: 600; }
.press { display: grid; gap: var(--space-2xs); justify-items: start; }
.press__note { font-size: var(--text-sm); color: var(--color-muted); }

.elsewhere ul { margin: var(--space-md) 0 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-rule); }
.elsewhere li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0 var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.elsewhere li span { font-size: var(--text-sm); color: var(--color-muted); }

/* standalone text links get a 44px touch target; the underline stays on the words */
.elsewhere .link,
.press .link,
.foot-mast__links .link { display: inline-flex; align-items: center; min-height: var(--hit-target); }

/* ---------- Ft1 · mast-headed footer on the logo's ink ---------- */
.foot-mast { padding: var(--space-2xl) var(--gutter) var(--space-xl); background: var(--color-ink); color: var(--color-on-ink-muted); }
.foot-mast__inner { display: grid; gap: var(--space-lg); max-width: var(--container); margin-inline: auto; }
.foot-mast__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-xl); }
.wordmark--on-ink { color: var(--color-on-ink); }
.wordmark--on-ink:active { color: var(--color-on-ink-muted); }
.foot-mast__tagline { color: var(--color-on-ink); }
.foot-mast__links { display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); margin: 0 0 0 auto; padding: 0; list-style: none; }
.foot-mast .link { color: var(--color-on-ink); text-decoration-color: var(--color-accent); }
.foot-mast .link:active { color: var(--color-accent); }
.foot-mast :focus-visible { outline-color: var(--color-accent); }
.foot-mast__legal { display: grid; gap: var(--space-2xs); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule-on-ink); font-size: var(--text-xs); }
.foot-mast__legal p { max-width: var(--measure); }
@media (hover: hover) { .wordmark--on-ink:hover { color: var(--color-on-ink-muted); } }

/* the vision quote stays in view beside the values; it docks under the floating nav */
@media (min-width: 60rem) {
  .split--top .vision { position: sticky; top: calc(var(--nav-clear) + var(--space-lg)); }
}

/* ---------- below 60rem: one column, text first, proof after ---------- */
@media (max-width: 59.99rem) {
  .split, .split--flip, .split--wide-proof, .split--even { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .split--flip .split__proof { order: 0; }
  .media { max-width: 34rem; }
  .foot-mast__links { margin-left: 0; }
}

/* ---------- below 40rem: the spec sheet folds its notes under the values ---------- */
@media (max-width: 39.99rem) {
  .section { padding-block: var(--space-2xl); }
  .section--hero { padding-top: var(--space-md); }
  .spec__row { grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr); }
  .spec .spec__note { grid-column: 2; }
  .actions { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .btn:active { transform: none; }
}