@import url("./palette.css");

@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("./assets/fonts/schibsted-grotesk-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Junicode";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("./assets/fonts/junicode-roman.woff2") format("woff2");
}

@font-face {
  font-family: Meddon;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/meddon-latin.woff2") format("woff2");
}

@font-face {
  font-family: Silkscreen;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/silkscreen-latin.woff2") format("woff2");
}

:root {
  /* Brand colors and shared app roles are defined in palette.css. */
  --paper: var(--light);
  --dark: var(--black);

  /* Artwork compositing remains independent of the shared brand palette. */
  --cloud-opacity: 0.3;
  --cloud-filter: invert(0);
  --cloud-blend: screen;
  --art-paper: var(--blend-white);
  --art-blend: multiply;
  --theme-icon: url("./sun.svg");
  color-scheme: light;

  /* Shared roles and tones derived from the palette above. */
  --on-dark: var(--paper);
  --art-ink: var(--dark);
  --ink-soft: color-mix(in srgb, var(--ink) 72%, transparent);
  --surface-muted: color-mix(in srgb, var(--paper) 91%, var(--dark));
  --surface-subtle: color-mix(in srgb, var(--paper) 95.3%, var(--dark));
  --inverse-muted: color-mix(in srgb, var(--on-dark) 69%, var(--dark));
  --inverse-soft: color-mix(in srgb, var(--on-dark) 78%, transparent);
  --inverse-border: color-mix(in srgb, var(--on-dark) 16%, transparent);
  --ticker-text: color-mix(in srgb, var(--on-dark) 81.57%, var(--dark));
  --control-title: color-mix(in srgb, var(--on-dark) 84.71%, var(--dark));
  --control-title-dim: color-mix(in srgb, var(--on-dark) 54.12%, var(--dark));
  --footer-surface: color-mix(in srgb, var(--paper) 3.921569%, var(--dark));
  --footer-grain: color-mix(in srgb, var(--paper) 13.06%, var(--footer-surface));
  --section-grain: color-mix(in srgb, var(--dark) 13.06%, var(--paper));
  --footer-art: color-mix(in srgb, var(--on-dark) 50%, var(--footer-surface));
  --footer-overlay: color-mix(in srgb, var(--footer-surface) 88%, transparent);

  /* Rendering neutrals: keep white for difference/screen/multiply blending.
     These are compositing inputs, not the visible theme's paper/ink colors. */
  --blend-white: #ffffff;
  --blend-black: #000000;
  --mask-opaque: #000000;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --heading: "Junicode", Georgia, serif;
  --wordmark-tracking: -0.025em;
  --wordmark-offset-x: 4px;
  --wordmark-offset-y: 3px;
  /* Junicode 700 æ for the wordmark's Cella tile, in font units so it matches
     the text size and baseline (viewBox spans the lime square). */
  --wordmark-ae-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-88 -597 780 780'%3E%3Cpath fill-rule='evenodd' d='M143 11Q190 11 219.5 -9.5Q242.98 -25.82 265.52 -62.1Q267.69 -58.18 270 -54.5Q311 11 398 11Q450 11 493.5 -10.5Q537 -32 574 -75Q577 -79 571.5 -86Q566 -93 558 -97.5Q550 -102 545 -97Q529 -81 507 -73Q485 -65 456 -65Q420 -65 392.5 -85.5Q365 -106 350 -142.5Q335 -179 335 -228Q335 -233.02 335.13 -237.92L544 -325Q572 -337 572 -350Q572 -355 568 -363Q564 -371 553 -381Q532 -404 503.5 -414.5Q475 -425 434 -425Q390 -425 360 -412.5Q332.84 -401.18 312.24 -377.17Q295.25 -399.37 271 -411.5Q244 -425 208 -425Q180 -425 151 -415.5Q122 -406 96 -391Q70 -376 49.5 -346Q29 -316 29 -287Q29 -248 69 -248Q91 -248 103 -258.5Q115 -269 120 -286Q125 -303 124.5 -321.5Q124 -340 127 -355Q150 -385 181 -385Q229 -385 229 -331V-259Q229 -247.61 229.28 -236.72L153 -205Q105 -185 79 -167.5Q53 -150 43 -130Q33 -110 33 -79Q33 -37 63 -13Q93 11 143 11ZM231.51 -194.72Q236.1 -140.07 249.08 -100.46Q239.25 -76.08 226 -62Q210 -45 189 -45Q170 -45 157.5 -59Q145 -73 145 -96Q145 -127 162.5 -150.5Q180 -174 213 -187L231.51 -194.72ZM339.34 -282.49Q341.91 -297.29 346 -310.5Q357 -346 377 -365.5Q397 -385 423 -385Q446 -385 461 -374.5Q476 -364 476 -348Q476 -344 474 -341Q472 -338 468 -336L339.34 -282.49Z'/%3E%3C/svg%3E");
  --serif: Meddon, "Segoe Script", cursive;
  --pixel: "Silkscreen", "Press Start 2P", ui-monospace, monospace;
}

:root[data-theme="dark"] {
  --paper: var(--black);
  --dark: var(--light);
  --cloud-opacity: 0.9;
  --cloud-filter: brightness(0.48);
  --cloud-blend: screen;
  --art-ink: color-mix(in srgb, var(--light) 80%, var(--black));
  --art-paper: var(--blend-black);
  --art-blend: screen;
  --theme-icon: url("./moon.svg");
  color-scheme: dark;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
}

html,
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select {
  font-family: inherit;
}

.pixel {
  font-family: var(--pixel);
  letter-spacing: 0.02em;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0;
  border-left: 1px solid var(--ink);
}

.cell {
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  min-width: 0;
  position: relative;
}

.span-12 { grid-column: span 12; }
.span-6 { grid-column: span 6; }
.span-4 { grid-column: span 4; }
.span-3 { grid-column: span 3; }

.pad-lg {
  padding: 56px 48px 64px;
}

.pad-xl {
  padding: 88px 64px 72px;
}

.section-heading {
  isolation: isolate;
}

.section-field {
  z-index: -1;
  pointer-events: none;
}

.paper {
  background: transparent;
}

.body-frame {
  position: relative;
}

.frame-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: calc(100vh / var(--z));
  z-index: 1;
  pointer-events: none;
  display: block;
}

.body-well {
  position: relative;
  z-index: 4;
  margin: 0 clamp(96px, calc(13vw / var(--z)), 176px);
  background: var(--paper);
}

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 180px 1fr auto auto;
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
  font-family: var(--pixel);
  font-size: 12px;
}

.nav > * {
  border-right: 1px solid var(--ink);
  display: flex;
  align-items: center;
  padding: 0 20px;
  min-height: 52px;
}

.nav > *:last-child {
  border-right: 0;
}

.nav > .theme-toggle {
  justify-content: center;
  border: 0;
  border-right: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.theme-icon {
  display: block;
  width: 24px;
  height: 24px;
  background: currentColor;
  mask: var(--theme-icon) center / contain no-repeat;
}

.theme-toggle.is-previewing {
  --theme-icon: url("./moon.svg");
}

:root[data-theme="dark"] .theme-toggle.is-previewing {
  --theme-icon: url("./sun.svg");
}

.theme-icon.is-ready {
  background: none;
  mask: none;
}

.theme-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.theme-toggle:focus-visible {
  outline-offset: -5px;
}

.brand {
  min-width: 0;
  background: var(--dark);
  color: var(--on-dark);
  font: 700 32px/1 var(--heading);
  letter-spacing: var(--wordmark-tracking);
  text-transform: lowercase;
}

.footer-wordmark {
  display: inline-block;
  font-family: var(--heading);
  font-size: calc(clamp(44px, calc(6vw / var(--z)), 80px) + 2px);
  font-weight: 700;
  letter-spacing: var(--wordmark-tracking);
  line-height: 1.5;
  text-transform: lowercase;
}

.footer-wordmark .wordmark-symbol {
  display: inline-block;
  margin: 16px 0 0 5px;
  font-size: 14px;
  letter-spacing: 0;
  vertical-align: top;
}

/* The wordmark's "ae" is the Cella tile: a black æ on a lime square, matching
   the favicon. The hidden letters keep the name readable to assistive
   technology, search and copying. */
.wordmark-ae {
  position: relative;
  display: inline-block;
  width: 0.78em;
  height: 0.78em;
  margin-right: 0.06em;
  vertical-align: -0.183em;
  background: var(--action);
}

.wordmark-ae::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--on-action);
  -webkit-mask: var(--wordmark-ae-glyph) center / 100% 100% no-repeat;
  mask: var(--wordmark-ae-glyph) center / 100% 100% no-repeat;
}

/* Fund names read the same everywhere, on the landing and in the app: the
   sans display face, semibold, tightly tracked and never uppercased. Sizes
   follow their context. (:root lifts this above the app's heading rules.) */
:root .fund-name {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.04em;
  text-transform: none;
}

.wordmark-ae > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 650px) {
  .footer-wordmark { font-size: 60px; }
}

.nav-links {
  display: flex;
  padding: 0;
}

.nav-links a {
  display: flex;
  align-items: center;
  padding: 0 22px;
  height: 100%;
  border-right: 1px solid var(--ink);
}

.nav-links a:last-child {
  border-right: 0;
}

.nav-links a.is-reached,
.nav-links a:hover,
.nav > a:hover {
  background: var(--dark);
  color: var(--on-dark);
}

.nav :is(a, button).has-melt {
  position: relative;
  isolation: isolate;
  background: var(--paper);
  color: var(--blend-white);
}

.nav-melt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.nav-label {
  position: relative;
  mix-blend-mode: difference;
  pointer-events: none;
}

/* Optical centering moves the wordmark label, not its cell or melt canvas.
   The brand cell is always fully melted, so its label needs no difference
   blend; normal blending keeps the lime wordmark tile lime in both themes. */
.nav .brand > .nav-label {
  transform: translate(var(--wordmark-offset-x), var(--wordmark-offset-y));
  mix-blend-mode: normal;
  color: var(--on-dark);
}

.pill {
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: 0;
  padding: 0 22px;
  min-height: 52px;
  font-family: var(--pixel);
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pill:hover {
  background: var(--dark);
}

.hero-screen {
  position: relative;
  overflow: hidden;
  height: calc(100dvh / var(--z));
  min-height: 640px;
  margin-top: -52px;
  background: var(--paper);
}

.hero-field,
.hero-sky,
.hero-clouds,
.frame-sky,
.frame-clouds {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  display: block;
}

.hero-sky,
.frame-sky {
  left: auto;
  width: auto;
  max-width: 100%;
  aspect-ratio: 1;
  z-index: 0;
  isolation: isolate;
  background: linear-gradient(var(--cloud-deep), var(--cloud-mid) 65%, var(--cloud-light));
  opacity: var(--cloud-opacity);
}

.hero-sky {
  mask-image: linear-gradient(to right, transparent, var(--mask-opaque) 65%);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}

.frame-sky {
  height: calc(100vh / var(--z));
}

.hero-clouds,
.frame-clouds {
  z-index: 0;
  object-fit: contain;
  object-position: right center;
  /* Dim the uninverted night clip, preserving pale clouds over the blue sky. */
  background: var(--blend-white);
  filter: var(--cloud-filter);
  mix-blend-mode: var(--cloud-blend);
}

.hero-field,
.frame-field {
  mix-blend-mode: var(--art-blend);
}

.hero-type {
  position: absolute;
  top: 0;
  bottom: 0;
  left: max(10px, calc(calc(8vw / var(--z)) + var(--hero-shift, -48px)));
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: max(calc(33.333vw / var(--z)), min(calc(50vw / var(--z)), calc(calc(100vw / var(--z)) - 20px)));
  max-width: calc(calc(100vw / var(--z)) - 20px);
  padding: 0;
  text-align: left;
  color: var(--blend-white);
  pointer-events: none;
  will-change: left;
}

/* Blend each white text block with the scene; keep the accents separate.
   The wrapper must not create a stacking context that isolates the backdrop. */
.hero-type > p:not(.hero-cta),
.hero-type .hero-cta > a,
.hero-type h1 .line {
  position: relative;
  z-index: var(--hero-text-layer, 4);
}

.hero-type > p:not(.hero-cta),
.hero-type h1 .line:first-child {
  mix-blend-mode: difference;
}

.hero-type a {
  pointer-events: auto;
}

.hero-type .hero-kicker,
.hero-type .lede {
  color: inherit;
}

.hero-type .pill,
.nav > a.pill {
  background: var(--action);
  color: var(--on-action);
}

.hero-kicker {
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink);
  width: fit-content;
}

.hero-type h1 {
  margin: 0;
  font-family: var(--heading);
  font-weight: 700;
  font-size: clamp(40px, calc(6.2vw / var(--z)), 88px);
  line-height: 0.86;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  width: fit-content;
}

.hero-type h1 .line {
  display: block;
  width: fit-content;
}

.ser {
  display: block;
  width: fit-content;
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ascent);
  line-height: 1;
}

.hero-type .ser {
  font-size: 0.92em;
}

.lede {
  margin: 18px 0 0;
  font-size: 18px;
  max-width: 32ch;
  line-height: 1.45;
  font-weight: 500;
  color: var(--ink);
  width: fit-content;
}

.hero-cta {
  margin: 26px 0 0;
  width: fit-content;
}

.hero-cta .pill {
  white-space: nowrap;
  min-height: 44px;
  padding: 0 24px;
}

.ticker {
  overflow: hidden;
  border-top: 1px solid var(--ink);
  background: var(--ink);
  color: var(--ticker-text);
  font-family: var(--pixel);
  font-size: 12px;
  line-height: 36px;
  white-space: nowrap;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
}

.ticker-track {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 28s linear infinite;
}

@keyframes marquee {
  to { transform: translateX(-100%); }
}

.display {
  margin: 8px 0 0;
  font-family: var(--heading);
  font-weight: 700;
  font-size: clamp(32px, calc(4.6vw / var(--z)), 64px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  max-width: 18ch;
  text-transform: uppercase;
}

.display .ser {
  font-size: 0.86em;
}

h3 {
  margin: 0 0 14px;
  font-family: var(--pixel);
  font-size: 12px;
  font-weight: 400;
}

.copy {
  margin: 12px 0 0;
  max-width: 36ch;
  color: var(--ink-soft);
}

.stat {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
}

.stat.big {
  font-size: clamp(36px, calc(4vw / var(--z)), 52px);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.note {
  margin: 10px 0 0;
  font-family: var(--pixel);
  font-size: 11px;
  line-height: 1.6;
}

.pad-xl .note {
  margin: 0;
}

.win {
  background: var(--paper);
  border: 1px solid var(--ink);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}

.win-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--ink);
  color: var(--control-title);
  font-family: var(--pixel);
  font-size: 11px;
  padding: 8px 10px;
}

.win-title.live {
  animation: title-flicker 5s steps(2, jump-none) infinite;
}

@keyframes title-flicker {
  0%, 92%, 100% { color: var(--control-title); }
  93% { color: var(--paper); }
  95% { color: var(--control-title-dim); }
}

.win-btns {
  display: flex;
  gap: 3px;
}

.win-btns i {
  width: 12px;
  height: 12px;
  background: var(--paper);
  border: 1px solid var(--ink);
  font-style: normal;
  font-size: 9px;
  line-height: 10px;
  text-align: center;
  color: var(--ink);
}

form.old {
  display: grid;
}

.field {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  border-bottom: 1px solid var(--ink);
}

.field label {
  background: var(--surface-muted);
  border-right: 1px solid var(--ink);
  padding: 16px;
  font-family: var(--pixel);
  font-size: 12px;
}

.field input,
.field select {
  border: 0;
  background: var(--paper);
  color: var(--ink);
  padding: 16px;
  font-size: 16px;
  font-family: var(--display);
  min-width: 0;
  width: 100%;
}

.field input:focus,
.field select:focus {
  background: var(--surface-subtle);
}

.form-row {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  border-top: 1px solid var(--ink);
}

.form-row .hint {
  font-family: var(--pixel);
  font-size: 11px;
  opacity: 0.75;
  padding: 16px 20px;
}

.form-row .pill {
  min-height: 56px;
}

.epoch-stack {
  margin-top: 28px;
  border: 1px solid var(--ink);
}

.stat-block {
  padding: 20px 24px;
  border-bottom: 1px solid var(--ink);
  font-size: 12px;
  line-height: 1.6;
}

.stat-block:last-child {
  border-bottom: 0;
}

.faq details {
  margin: 0;
}

.faq summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 22px;
  list-style: none;
}

.faq summary::-webkit-details-marker,
.faq summary::marker {
  display: none;
  content: "";
}

.faq details p {
  margin: 16px 0 0;
  max-width: 48ch;
  color: var(--ink-soft);
  font-size: 16px;
}

.site-footer {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 64px;
  padding: 120px 8% 56px;
  min-height: max(calc(100svh / var(--z)), 760px);
  overflow: hidden;
  background: var(--footer-surface);
  color: var(--on-dark);
  pointer-events: auto;
}

.section-field,
.footer-field {
  /* Keep a faint source pattern beneath the scattering pixels. */
  --scatter-retention: 0.35;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.footer-field {
  pointer-events: auto;
}

.final-copy {
  position: absolute;
  z-index: 3;
  left: 8%;
  right: auto;
  top: 34%;
  width: min(calc(46vw / var(--z)), 720px);
  transform: translateY(-50%);
  text-align: left;
  pointer-events: auto;
}

.final-copy h2 {
  margin: 0;
  font: inherit;
}

.final-copy .hero-kicker {
  color: var(--inverse-muted);
  font-size: 10px;
}

.final-copy .footer-message {
  margin: 24px 0 0;
  font-family: var(--display);
  font-size: clamp(22px, calc(2.4vw / var(--z)), 34px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.035em;
}

.footer-message .ser {
  margin-top: 12px;
  font-size: 1.05em;
  line-height: 1.45;
}

.footer-links {
  position: absolute;
  z-index: 4;
  left: 8%;
  right: auto;
  bottom: 7%;
  width: min(calc(46vw / var(--z)), 720px);
  pointer-events: auto;
}

/* Let the disclaimer wrap without colliding with the wordmark or links. */
.site-footer .final-copy,
.site-footer .footer-links {
  position: relative;
  inset: auto;
  transform: none;
}

.footer-caution {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--inverse-border);
  color: var(--inverse-soft);
  font: 12px/1.7 var(--display);
}

.footer-caution p { margin: 0; }
.footer-caution .pixel { margin-bottom: 10px; font-size: 10px; color: var(--on-dark); }

.footer-manifesto {
  margin: 0 0 28px;
  font-size: clamp(22px, calc(2vw / var(--z)), 32px);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.footer-navigation {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 24px;
}

.footer-links nav {
  display: grid;
  gap: 8px;
}

.footer-links nav .pixel {
  margin: 0 0 8px;
  font-size: 11px;
  color: var(--inverse-muted);
}

.footer-links nav a {
  width: max-content;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  font-size: 15px;
}

.footer-links nav a:hover {
  border-color: var(--sky-deep);
}

@media (max-width: 640px) {
  .footer-navigation {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.footer-bottom {
  margin-top: 36px;
  padding-top: 14px;
  border-top: 1px solid var(--inverse-border);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
}

.footer-bottom .pixel {
  font-size: 11px;
  opacity: 0.7;
}

@media (max-width: 900px) {
  .site-footer { padding: 90px 20px 24px; }
  .site-footer .final-copy,
  .site-footer .footer-links { width: 100%; }
  .nav {
    grid-template-columns: 1fr auto auto;
  }

  .nav-links,
  .nav > a:not(.brand):not(.pill) {
    display: none;
  }

  .span-6,
  .span-4,
  .span-3 {
    grid-column: span 12;
  }

  .pad-lg {
    padding: 40px 28px 48px;
  }

  .pad-xl {
    padding: 56px 28px 48px;
  }

  .hero-screen {
    margin-top: -52px;
  }

  .hero-type {
    left: 10px;
    width: calc(100% - 20px);
    max-width: calc(calc(100vw / var(--z)) - 20px);
    padding: 0;
  }

  .body-well {
    margin: 0 20px;
  }

  .hero-type h1 {
    font-size: clamp(42px, calc(13vw / var(--z)), 64px);
  }

  .final-copy {
    left: 20px;
    right: 20px;
    top: 28%;
    width: auto;
  }

  .footer-links {
    left: 20px;
    right: auto;
    width: calc(100% - 40px);
    bottom: 24px;
  }

  .colophon-bust {
    width: 120px;
  }

  .colophon-meta {
    text-align: left;
  }

  .colophon {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 32px 24px;
  }

  .colophon-bust {
    width: 120px;
  }

  .colophon-meta {
    text-align: left;
  }
}

.field input:focus-visible,
.field select:focus-visible,
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
}

.faq summary::after {
  content: "+";
  font-family: var(--pixel);
  color: var(--action-text);
}

.faq details[open] summary::after {
  content: "−";
}


@media (max-width: 600px) {
  .pad-lg {
    padding: 32px 20px 40px;
  }

  .pad-xl {
    padding: 48px 20px;
  }

  .field {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .field label,
  .field input,
  .field select {
    padding: 13px 10px;
  }

  .field label {
    font-size: 10px;
  }

  .field input,
  .field select {
    font-size: 14px;
  }

  .form-row .hint {
    padding: 12px 10px;
    font-size: 9px;
  }

  .form-row .pill {
    padding: 0 14px;
    font-size: 10px;
  }

  .final-copy {
    top: 90px;
    transform: none;
  }

  .footer-links {
    padding-top: 20px;
    background: linear-gradient(transparent, var(--footer-overlay));
  }

  .footer-bottom {
    flex-wrap: wrap;
    margin-top: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .intro-field {
    display: none !important;
  }
}

/* Master's document flow and full-detail canvases, with an independent mask
   for the opening and the two black split/merge transitions. */
.hero-stage {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--paper);
}

.art-ready .hero-stage::before {
  display: none;
}

/* The first handoff's paper curtain covers the hero: its art and sky stop
   painting so they cannot flash through at the seam (landing-journey.js). */
.is-hero-covered :is(.hero-field, .hero-sky) {
  visibility: hidden;
}

.hero-field[hidden],
.frame-field[hidden],
.footer-field[hidden] {
  display: none;
}

.body-frame {
  overflow: clip;
}

.journey-field,
.intro-field,
.theme-field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: calc(100dvh / var(--z));
  pointer-events: none;
  display: none;
}

.journey-field {
  z-index: 3;
}

.transitions-ready .journey-field {
  display: block;
}

.intro-field {
  z-index: 100;
  background: var(--dark);
}

/* Cover every section and the header while revealing the new palette. */
.theme-field:not([hidden]) {
  z-index: 200;
  display: block;
}

.is-loading .intro-field {
  display: block;
}

/* Keep the lettering above the opening veil so it inverts as the pixels melt. */
.is-loading .hero-type {
  --hero-text-layer: 101;
}

.nav {
  transition: opacity 500ms ease;
}

.is-loading .nav,
.is-loading .ticker {
  opacity: 0;
}

.ticker {
  opacity: var(--hero-departure, 1);
}

.final-copy,
.footer-links {
  opacity: var(--footer-arrival, 1);
}

.reveal-head .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.72em);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
  transition-delay: var(--word-delay, 0ms);
}

/* The handwritten word always starts a new line, including during reveals. */
.reveal-head .ser.w {
  display: block;
}

/* Accents that write themselves in (handwriting.js) stay hidden until their
   pen starts, then their mask uncovers them in place of the rise. */
.ser[data-hand="wait"] {
  -webkit-mask-image: linear-gradient(transparent, transparent);
  mask-image: linear-gradient(transparent, transparent);
}

.reveal-head .ser.w[data-hand] {
  opacity: 1;
  transform: none;
  transition: none;
}

.reveal-head.is-on .w {
  opacity: 1;
  transform: none;
}

.reveal-copy {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}

.reveal-copy.is-on {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .journey-field,
  .theme-field {
    display: none !important;
  }

  .reveal-head .w,
  .reveal-copy {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* The product narrative shares the existing art, scroll and theme system. */
.hero-cta { display:flex; flex-wrap:wrap; align-items:center; gap:24px; }
.hero-secondary { font-size:10px; text-decoration:underline; text-underline-offset:5px; }
.hero-status { position:absolute; top:80px; right:clamp(20px,calc(3vw / var(--z)),48px); z-index:4; display:inline-flex; align-items:center; gap:10px; max-width:calc(100% - 40px); padding:10px 14px; border:1px solid var(--ink); background:var(--paper); color:var(--ink); font-size:10px; text-transform:uppercase; opacity:var(--hero-departure,1); transition:opacity 500ms var(--ease); }
.hero-status::before { content:""; width:6px; height:6px; flex-shrink:0; background:var(--ascent); }
.is-loading .hero-status { opacity:0; }
.landing-actions { display:flex; flex-wrap:wrap; gap:22px; align-items:center; margin-top:28px; }
.landing-funds { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:20px; }
.funds-message { grid-column:1/-1; margin:0; max-width:60ch; color:var(--ink-soft); }
.funds-caption { margin:24px 0 0; max-width:60ch; font-size:13px; color:var(--ink-soft); }
.landing-fund { display:block; border:1px solid var(--ink); padding:24px; }
.landing-fund h3 { font-family:var(--display); font-weight:700; font-size:24px; letter-spacing:-.8px; margin:24px 0 15px; }
.landing-fund p { font-size:12px; color:var(--ink-soft); }
.landing-fund .pixel { font-size:10px; }
.fee-table { width:100%; border-collapse:collapse; font-size:13px; }
.fee-table td,.fee-table th { padding:18px 10px; border-bottom:1px solid var(--ink-soft); text-align:left; vertical-align:top; }
.fee-table th { width:35%; font-weight:600; }
@media(max-width:900px) { .landing-funds { grid-template-columns:1fr; } }
@media(max-width:600px) { .hero-cta { gap:18px; }.hero-status { top:72px; font-size:8px; }.fee-table{font-size:12px}.fee-table td,.fee-table th{padding:14px 7px} }
.hero-type .hero-secondary { color:var(--blend-white); mix-blend-mode:difference; }
.landing-fund { overflow-wrap:anywhere; }

.section-heading > .copy { max-width:52ch; margin-top:28px; }
.risk-copy > .text-link { display:inline-block; margin-top:24px; }
.release-links { display:flex; flex-wrap:wrap; gap:12px 20px; font-size:10px; }
.release-links:has(a:not([hidden])) { margin-top:20px; }
.fund-snapshot-meta { display:flex; flex-wrap:wrap; gap:8px 24px; align-items:baseline; padding:24px 48px; border-bottom:1px solid var(--ink); }
.fund-snapshot-meta p { margin:0; font-size:12px; }
.fund-snapshot-meta .fund-snapshot-status { margin-left:auto; color:var(--ink-soft); }
.fund-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.fund-metric { padding:32px 24px 40px; min-width:0; border-right:1px solid var(--ink); }
.fund-metric:last-child { border-right:0; }
.fund-metric .stat { font-size:clamp(28px,calc(3vw / var(--z)),44px); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.fund-metric .note { color:var(--ink-soft); font-size:10px; }
@media(max-width:900px) {
  .fund-snapshot-meta { padding:24px 28px; }
  .fund-snapshot-meta .fund-snapshot-status { flex-basis:100%; margin-left:0; }
  .fund-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fund-metric:nth-child(2n) { border-right:0; }
  .fund-metric:nth-child(-n+2) { border-bottom:1px solid var(--ink); }
  .fund-metric { padding:28px 20px; }
}