/* Hallmark · pre-emit critique: P5 H4 E5 S5 R5 V5
 * Hallmark · genre: editorial · macrostructure: Letter · theme: custom dossier · enrichment: E7 Abstract Background — subtle gradient + paper grain · nav: N6 Newspaper masthead · footer: Ft6 Letter close
 * H5 Letter knobs: salutation=place, body=2 paragraphs, signoff=typed · F3 Spec knobs: columns=3, rules=every row, numbers=tabular
 * motion: one complex hero foil animation, 18s, reduced-motion static · contrast: pass (46–50) · nav/footer/hero: pass (51–55) · honest/chrome/tokens/responsive/icons: pass (56–60) · mobile: pass at 320/375/414/768 (36, 59, 61–69)
 */
@import url("./home-hallmark-tokens.css");
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,300..800,0..100,0..1&family=IBM+Plex+Sans:wght@400;500;650;700&family=JetBrains+Mono:wght@500;700&display=swap");

* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; }
body {
  position: relative;
  min-width: 320px;
  margin: 0;
  color: var(--color-ink);
  background:
    radial-gradient(circle at 16% 8%, color-mix(in oklch, var(--color-accent) 10%, transparent) 0 11rem, transparent 28rem),
    radial-gradient(circle at 82% 18%, color-mix(in oklch, var(--color-accent-2) 7%, transparent) 0 9rem, transparent 26rem),
    linear-gradient(115deg, var(--color-paper), color-mix(in oklch, var(--color-paper) 92%, var(--color-mark) 8%) 45%, var(--color-paper-2));
  background-attachment: fixed;
  background-position: 0% 0%, 100% 0%, 50% 50%;
  background-size: 130% 130%, 140% 140%, 100% 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.58;
  overflow-x: clip;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(100deg, transparent 0 38%, color-mix(in oklch, var(--color-mark) 42%, transparent) 49%, transparent 60%),
    radial-gradient(circle at 1px 1px, color-mix(in oklch, var(--color-rule-strong) 36%, transparent) 0 0.6px, transparent 0.7px);
  background-size: 160% 100%, 18px 18px;
  background-position: 0 0, 0 0;
  mix-blend-mode: multiply;
  opacity: 0.18;
  z-index: 0;
}
body > * {
  position: relative;
  z-index: 1;
}
a { color: var(--color-accent-2); text-underline-offset: 0.18em; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
img, svg { max-width: 100%; height: auto; }

.nav-mast {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-lg) var(--page-gutter) 0;
  text-align: center;
}
.mast-line {
  margin: 0;
  color: var(--color-muted);
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mast-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 680;
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.mast-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs) var(--space-lg);
  padding: 0;
  margin: var(--space-xs) 0 0;
  list-style: none;
}
.mast-nav a, .text-link, .footer-links a {
  white-space: nowrap;
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 650;
  text-decoration-thickness: var(--rule-hair);
  transition: color var(--dur-short) var(--ease-out), text-decoration-color var(--dur-short) var(--ease-out);
}
.mast-nav a:hover, .text-link:hover, .footer-links a:hover { color: var(--color-accent); }
.mast-nav a:active, .text-link:active, .footer-links a:active { color: var(--color-accent); transform: translateY(0); }
.mast-nav a[aria-disabled="true"], .text-link[aria-disabled="true"], .footer-links a[aria-disabled="true"] {
  color: var(--color-muted);
  cursor: not-allowed;
  opacity: 0.55;
}
.mast-rule {
  width: min(100%, var(--max));
  height: 4px;
  margin: var(--space-sm) auto 0;
  border: 0;
  border-top: var(--rule-hair) solid var(--color-rule-strong);
  border-bottom: var(--rule-hair) solid var(--color-rule-strong);
}

main { padding: 0 var(--page-gutter); }
section, footer { max-width: var(--max); margin-inline: auto; }
.hero-letter {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 0.55fr);
  gap: clamp(var(--space-xl), 7vw, var(--space-4xl));
  align-items: end;
  padding: clamp(var(--space-xl), 6vw, var(--space-3xl)) 0 clamp(var(--space-3xl), 11vw, var(--space-4xl));
}
.hero-letter::before {
  content: "";
  position: absolute;
  inset: clamp(-0.5rem, -1vw, 0rem) max(-2.5rem, -4vw) clamp(0.25rem, 2vw, 2rem);
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(105deg, transparent 0 18%, color-mix(in oklch, var(--color-accent) 22%, transparent) 25%, transparent 35%, transparent 57%, color-mix(in oklch, var(--color-accent-2) 16%, transparent) 66%, transparent 78%),
    radial-gradient(ellipse at 24% 28%, color-mix(in oklch, var(--color-accent) 26%, transparent) 0 10rem, transparent 24rem),
    radial-gradient(ellipse at 76% 36%, color-mix(in oklch, var(--color-accent-2) 18%, transparent) 0 8rem, transparent 21rem),
    conic-gradient(from 118deg at 52% 44%, transparent 0 18%, color-mix(in oklch, var(--color-mark) 54%, transparent) 22%, transparent 31%, transparent 68%, color-mix(in oklch, var(--color-accent) 18%, transparent) 74%, transparent 84%);
  background-size: 170% 100%, 120% 120%, 120% 120%, 130% 130%;
  background-position: -18% 0, 8% 8%, 92% 18%, 50% 50%;
  border-block: var(--rule-hair) solid color-mix(in oklch, var(--color-accent) 35%, transparent);
  border-radius: 1.5rem;
  filter: saturate(1.08);
  opacity: 0.84;
  transform: translate3d(-0.75rem, -0.35rem, 0) scale(0.985) rotate(-0.4deg);
  animation: dossier-foil-field 18s var(--ease-in-out) infinite alternate;
}
@keyframes dossier-foil-field {
  0% {
    opacity: 0.58;
    background-position: -18% 0, 8% 8%, 92% 18%, 50% 50%;
    transform: translate3d(-0.75rem, -0.35rem, 0) scale(0.985) rotate(-0.4deg);
  }
  38% {
    opacity: 0.92;
    background-position: 38% 0, 18% 4%, 78% 30%, 57% 44%;
    transform: translate3d(0.85rem, 0.15rem, 0) scale(1.012) rotate(0.25deg);
  }
  67% {
    opacity: 0.72;
    background-position: 84% 0, 28% 18%, 62% 16%, 43% 56%;
    transform: translate3d(0.2rem, 0.75rem, 0) scale(1.028) rotate(-0.15deg);
  }
  100% {
    opacity: 0.88;
    background-position: 118% 0, 36% 12%, 52% 28%, 62% 42%;
    transform: translate3d(1.15rem, -0.1rem, 0) scale(1.018) rotate(0.35deg);
  }
}
.salutation {
  margin: 0 0 var(--space-md);
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.75rem);
  line-height: 1.12;
}
h1, h2, h3 { min-width: 0; overflow-wrap: anywhere; line-height: 1.1; letter-spacing: -0.025em; }
h1 {
  max-width: 11ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 720;
  letter-spacing: -0.045em;
}
.lede, .section-lede {
  max-width: 64ch;
  margin: var(--space-lg) 0 0;
  color: var(--color-ink-2);
  font-size: clamp(1.125rem, 1vw + 1rem, 1.375rem);
  line-height: 1.48;
}
.hero-note {
  margin: var(--space-xl) 0 0;
  max-width: 60ch;
  color: var(--color-ink-2);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}
.text-link {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  border-radius: var(--radius-link);
}
.text-link--primary,
.text-link--secondary {
  justify-content: center;
  padding: 0.78rem 1rem;
  line-height: 1;
  text-decoration: none;
}
.text-link--primary {
  border: var(--rule-hair) solid var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  box-shadow: 0 0.5rem 1.75rem color-mix(in oklch, var(--color-accent) 20%, transparent);
}
.text-link--secondary {
  border: var(--rule-hair) solid var(--color-rule-strong);
  background: color-mix(in oklch, var(--color-paper) 84%, white 16%);
  color: var(--color-ink);
}
.text-link--primary:hover,
.text-link--primary:active {
  color: var(--color-accent-ink);
  background: color-mix(in oklch, var(--color-accent) 86%, var(--color-ink) 14%);
}
.text-link--secondary:hover,
.text-link--secondary:active {
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.proof-card {
  border-top: var(--rule-hair) solid var(--color-rule-strong);
  border-bottom: var(--rule-hair) solid var(--color-rule-strong);
  padding: var(--space-lg) 0;
}
.proof-card h2 {
  margin: 0 0 var(--space-md);
  font-family: var(--font-display);
  font-size: var(--text-xl);
}
.proof-card dl { display: grid; gap: var(--space-sm); margin: 0; }
.proof-card div {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-sm);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.proof-card div:first-child { border-top: 0; }
dt {
  color: var(--color-muted);
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
dd { margin: 0; font-weight: 650; }

.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: var(--rule-hair) solid var(--color-rule-strong);
  margin: 0 auto var(--space-3xl);
}
.stat-strip div { padding: var(--space-lg); border-inline-end: var(--rule-hair) solid var(--color-rule); }
.stat-strip div:last-child { border-inline-end: 0; }
.stat-strip b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 3rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-strip span { display: block; margin-top: var(--space-xs); color: var(--color-ink-2); }

.section-block { padding: var(--space-3xl) 0; border-top: var(--rule-hair) solid var(--color-rule); }
.section-block.tight { padding-top: var(--space-2xl); }
.section-title {
  display: grid;
  grid-template-columns: minmax(0, 0.65fr) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
  margin-bottom: var(--space-2xl);
}
.section-title h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 4rem);
}
.section-title p { margin: 0; max-width: 54ch; color: var(--color-ink-2); font-size: var(--text-md); }

.spec-sheet { display: grid; border-top: var(--rule-hair) solid var(--color-rule-strong); }
.spec-row {
  display: grid;
  grid-template-columns: minmax(10rem, 0.34fr) minmax(0, 0.8fr) minmax(10rem, 0.38fr);
  gap: var(--space-lg);
  padding: var(--space-lg) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.spec-row h3 { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); }
.spec-row p { margin: 0; color: var(--color-ink-2); }
.spec-row small { color: var(--color-muted); font-size: var(--text-sm); }
.record-link { align-self: start; justify-self: start; }

.thesis-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--space-2xl);
  align-items: start;
}
.thesis-flow blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 4.5rem);
  font-weight: 640;
  line-height: 1.05;
  letter-spacing: -0.04em;
}
.thesis-list { display: grid; gap: var(--space-lg); }
.thesis-item { border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-lg); }
.thesis-item h3 { margin: 0 0 var(--space-xs); font-size: var(--text-lg); }
.thesis-item p { margin: 0; color: var(--color-ink-2); }

.pathways {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}
.pathway {
  min-width: 0;
  border-top: var(--rule-hair) solid var(--color-rule-strong);
  padding-top: var(--space-md);
}
.pathway h3 { margin: 0 0 var(--space-sm); font-family: var(--font-display); font-size: var(--text-lg); }
.pathway p { margin: 0 0 var(--space-md); color: var(--color-ink-2); }

.foot-letter { padding: var(--space-3xl) var(--page-gutter) var(--space-2xl); }
.foot-letter__close {
  max-width: 44ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 3.25rem);
  font-style: italic;
  line-height: 1.18;
}
.foot-letter__sign { display: block; margin-top: var(--space-md); font-style: normal; }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  margin-top: var(--space-xl);
  color: var(--color-muted);
}

@media (hover: hover) and (pointer: fine) {
  .text-link:hover { transform: translateY(-1px); }
}
@media (max-width: 60rem) {
  body { background-attachment: scroll; }
  .hero-letter, .section-title, .thesis-flow { grid-template-columns: 1fr; }
  .proof-card { max-width: 42rem; }
  .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-strip div:nth-child(2) { border-inline-end: 0; }
  .stat-strip div:nth-child(-n + 2) { border-bottom: var(--rule-hair) solid var(--color-rule); }
  .spec-row { grid-template-columns: 1fr; gap: var(--space-sm); }
  .pathways { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) {
  .nav-mast { gap: var(--space-2xs); padding-top: var(--space-md); text-align: left; }
  .mast-line { max-width: 38ch; font-size: 0.68rem; line-height: 1.25; }
  .mast-nav { max-width: calc(100vw - (var(--page-gutter) * 2)); }
  .mast-nav ul { flex-wrap: wrap; justify-content: flex-start; gap: var(--space-xs) 0.4rem; padding-bottom: var(--space-xs); }
  .mast-nav a { font-size: 0.72rem; }
  .mast-name { font-size: clamp(2.1rem, 14vw, 3.35rem); line-height: 1.08; }
  main { padding-inline: clamp(1rem, 4vw, 1.25rem); }
  .hero-letter { gap: var(--space-xl); padding-top: var(--space-xl); padding-bottom: var(--space-2xl); }
  .salutation { margin-bottom: var(--space-sm); font-size: clamp(1.2rem, 6vw, 1.75rem); }
  h1 { max-width: 12ch; font-size: clamp(2.65rem, 15vw, 3.8rem); line-height: 0.97; }
  .lede { margin-top: var(--space-md); font-size: clamp(1.02rem, 2vw + 0.8rem, 1.18rem); line-height: 1.42; }
  .hero-note { margin-top: var(--space-md); font-size: var(--text-sm); line-height: 1.5; }
  .hero-actions { display: grid; gap: var(--space-sm); justify-items: stretch; margin-top: var(--space-lg); }
  .text-link--primary, .text-link--secondary { width: 100%; min-height: 48px; padding-inline: 0.85rem; }
  .proof-card { padding: var(--space-md) 0; }
  .proof-card h2 { font-size: var(--text-lg); }
  .proof-card div { grid-template-columns: 1fr; gap: var(--space-2xs); }
  .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--space-2xl); }
  .stat-strip div { padding: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
  .stat-strip div:nth-child(odd) { border-inline-end: var(--rule-hair) solid var(--color-rule); }
  .stat-strip div:nth-child(even) { border-inline-end: 0; }
  .stat-strip div:nth-last-child(-n + 2) { border-bottom: 0; }
  .stat-strip b { font-size: clamp(1.3rem, 7vw, 1.75rem); overflow-wrap: anywhere; }
  .stat-strip span { font-size: var(--text-sm); line-height: 1.35; }
  .section-block { padding: var(--space-2xl) 0; }
  .section-title { gap: var(--space-md); margin-bottom: var(--space-xl); }
  .section-title h2, .thesis-flow blockquote { font-size: clamp(2rem, 11vw, 3.1rem); }
  .spec-row { padding: var(--space-md) 0; }
  .foot-letter { padding: var(--space-2xl) clamp(1rem, 4vw, 1.25rem); }
  .footer-links { display: grid; gap: var(--space-xs); justify-items: start; }
}
@media (max-width: 22rem) {
  .mast-name { font-size: clamp(2rem, 13vw, 2.8rem); }
  h1 { font-size: clamp(2.45rem, 14vw, 3.25rem); }
  .mast-nav a, .text-link, .footer-links a { font-size: 0.78rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}