/* Hallmark · macrostructure: Split Studio · tone: professional and reassuring · anchor hue: cyan · nav: N9 · footer: Ft2 · contrast: pass (46-50) · slop: pass (51-55) · honest: pass (56) · chrome: pass (57) · tokens: pass (58) · responsive: pass (59) · icons: pass (60) · mobile: pass (36, 59, 61-69) */
/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4 */
@font-face { font-family: 'Geist'; src: url('fonts/geist-latin.woff2') format('woff2'); font-style: normal; font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('fonts/playfair-display-latin.woff2') format('woff2'); font-style: normal; font-weight: 700; font-display: swap; }

:root {
  --color-paper: oklch(17% 0.03 250);
  --color-paper-2: oklch(21% 0.035 250);
  --color-rule: oklch(31% 0.03 250);
  --color-rule-strong: oklch(40% 0.04 250);
  --color-neutral: oklch(84% 0.018 238);
  --color-muted: oklch(72% 0.025 238);
  --color-ink: oklch(97% 0.01 238);
  --color-accent: oklch(69% 0.125 217);
  --color-focus: oklch(80% 0.13 217);
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Geist', 'Segoe UI', Arial, sans-serif;
  --font-label: 'Geist', 'Segoe UI', Arial, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-2xl: 2.4414rem;
  --text-display: clamp(2.8rem, 5vw + 0.5rem, 5.25rem);
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --page-gutter: clamp(1.25rem, 5vw, 5rem);
  --dur-micro: 120ms;
  --dur-long: 420ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html { min-width: 20rem; overflow-x: clip; background: var(--color-paper); }
body { min-height: 100dvh; margin: 0; overflow-x: clip; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-base); font-weight: 400; line-height: 1.6; text-rendering: optimizeLegibility; }
a { color: inherit; }
.site-shell { display: grid; min-height: 100dvh; grid-template-rows: auto 1fr auto; padding-inline: var(--page-gutter); }
.site-header { display: flex; align-items: center; justify-content: space-between; min-height: 6.25rem; border-bottom: 1px solid var(--color-rule); }
.brand { display: inline-flex; align-items: center; transition: opacity var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.brand:hover { opacity: 0.84; }
.brand:focus-visible { border-radius: 0.2rem; outline: 3px solid var(--color-focus); outline-offset: 0.35rem; }
.brand:active { transform: translateY(1px); }
.brand[aria-disabled='true'] { cursor: not-allowed; opacity: 0.55; pointer-events: none; }
.brand img { display: block; width: 9.375rem; height: auto; }
.header-note { display: flex; align-items: center; gap: var(--space-sm); margin: 0; color: var(--color-muted); font-family: var(--font-label); font-size: var(--text-sm); letter-spacing: 0.08em; text-transform: uppercase; }
.header-note span { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-accent); }
.portal-intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(19rem, 5fr); align-items: center; gap: var(--space-3xl); width: min(100%, 78rem); margin-inline: auto; padding-block: var(--space-2xl) var(--space-3xl); }
.intro-copy { max-width: 45rem; padding-bottom: var(--space-xl); }
.kicker, .preview-label, .preview-head p, .preview-head span, .preview-foot { font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: 0.13em; text-transform: uppercase; }
.kicker { display: flex; align-items: center; gap: var(--space-md); margin: 0 0 var(--space-xl); color: var(--color-accent); }
.kicker::before { width: 2rem; height: 1px; background: var(--color-accent); content: ''; }
h1 { min-width: 0; max-width: 12ch; margin: 0; font-family: var(--font-display); font-size: var(--text-display); font-weight: 700; letter-spacing: -0.035em; line-height: 1.04; text-wrap: balance; overflow-wrap: anywhere; }
.lede { max-width: 58ch; margin: var(--space-xl) 0; color: var(--color-muted); font-size: var(--text-md); }
.text-link { display: inline-flex; align-items: center; gap: var(--space-sm); padding-block: var(--space-xs); border-bottom: 1px solid var(--color-accent); color: var(--color-ink); font-weight: 650; text-decoration: none; white-space: nowrap; transition: color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.text-link:hover { color: var(--color-accent); transform: translateY(-1px); }
.text-link:focus-visible { border-radius: 0.2rem; outline: 3px solid var(--color-focus); outline-offset: 0.35rem; }
.text-link:active { transform: translateY(1px); }
.text-link[aria-disabled='true'] { cursor: not-allowed; opacity: 0.55; pointer-events: none; }
.portal-preview { position: relative; border: 1px solid var(--color-rule-strong); background: var(--color-paper-2); }
.portal-preview::before { position: absolute; top: -1px; left: -1px; width: 3.75rem; height: 0.25rem; background: var(--color-accent); content: ''; }
.preview-head { display: flex; justify-content: space-between; gap: var(--space-lg); padding: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.preview-head p, .preview-head span, .preview-foot { margin: 0; }
.preview-head p { color: var(--color-ink); }
.preview-head span, .preview-label, .preview-foot { color: var(--color-muted); }
.preview-body { padding: var(--space-2xl) var(--space-xl) var(--space-xl); }
.preview-label { margin: 0 0 var(--space-md); }
.preview-title { margin: 0 0 var(--space-2xl); font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
.preview-body ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.preview-body li { display: flex; align-items: baseline; gap: var(--space-lg); padding-block: var(--space-md); border-top: 1px solid var(--color-rule); color: var(--color-neutral); font-size: var(--text-md); }
.preview-body li span { color: var(--color-accent); font-family: var(--font-label); font-size: var(--text-xs); font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }
.preview-foot { padding: var(--space-md) var(--space-xl); border-top: 1px solid var(--color-rule); }
.site-footer { padding-block: var(--space-lg); border-top: 1px solid var(--color-rule); }
.site-footer p { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }
.reveal { opacity: 0; transform: translateY(8px); animation: reveal var(--dur-long) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes reveal { to { opacity: 1; transform: none; } }
@media (max-width: 56rem) { .portal-intro { grid-template-columns: 1fr; gap: var(--space-2xl); padding-block: var(--space-xl) var(--space-2xl); } .intro-copy { padding-bottom: 0; } h1 { max-width: 14ch; } .portal-preview { max-width: 38rem; } }
@media (max-width: 35rem) { .site-header { min-height: 5.25rem; } .header-note { font-size: 0; } .header-note::after { color: var(--color-muted); font-size: var(--text-xs); content: 'In progress'; } .preview-head, .preview-body, .preview-foot { padding-inline: var(--space-lg); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 150ms !important; animation-iteration-count: 1 !important; transition-duration: 150ms !important; } .reveal { transform: none; } }