@font-face { font-family: "Poppins"; src: url("fonts/poppins-400.woff") format("woff"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/poppins-500.woff") format("woff"); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: "Lora"; src: url("fonts/lora-var.woff") format("woff"); font-style: normal; font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Lora"; src: url("fonts/lora-italic-var.woff") format("woff"); font-style: italic; font-weight: 400 700; font-display: swap; }

:root {
  --nt-ink: #251c12;
  --nt-ink-deep: #17110c;
  --nt-gold: #cb8927;
  --nt-gold-hover: #d99a3d;
  --nt-ivory: #f1ede4;
  --nt-cream: #c4b19f;
  --nt-muted: #9f8e7d;
  --nt-line: rgba(241, 237, 228, .16);
  --nt-focus: #e4aa50;
  --font-display: "Lora", Georgia, serif;
  --font-body: "Poppins", system-ui, sans-serif;
  --content-max: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; background: var(--nt-ink-deep); }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: radial-gradient(circle at 50% 32%, rgba(203,137,39,.12) 0, rgba(203,137,39,.035) 28%, transparent 58%), var(--nt-ink-deep);
  color: var(--nt-ivory);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.page-shell { display: grid; grid-template-rows: auto 1fr auto; min-height: 100svh; }
.skip { position: fixed; left: -9999px; top: .75rem; z-index: 20; padding: .75rem 1rem; background: var(--nt-gold); color: var(--nt-ink-deep); font-weight: 500; }
.skip:focus { left: .75rem; }
:focus-visible { outline: 2px solid var(--nt-focus); outline-offset: 4px; }

.site-head {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 5.5rem;
  padding: 1.35rem 2rem .65rem;
  opacity: 0;
  animation: reveal .4s ease-out .05s forwards;
}
.site-head img,
.site-head .brand-logo { display: block; width: clamp(7.5rem, 10vw, 9rem); height: auto; }
.signal { display: grid; place-items: center; width: 100%; }
.hero { width: min(var(--content-max), calc(100% - 4rem)); margin: 0 auto; padding: clamp(2.25rem, 5vh, 4.5rem) 0 clamp(3rem, 7vh, 5rem); text-align: center; }
h1, h2 { font-family: var(--font-display); font-weight: 500; }
.launch-marker {
  margin: 0 0 .65rem;
  color: var(--nt-cream);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.positioning { margin: 0; color: var(--nt-cream); font-family: var(--font-display); font-size: clamp(1.45rem, 2.7vw, 2.15rem); }
.positioning em { color: var(--nt-ivory); }
.declaration-bridge { margin: clamp(1.8rem, 4vh, 3rem) 0 .8rem; color: var(--nt-gold); font-size: .75rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
h1 {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: .04em;
  margin: 0;
  color: var(--nt-ivory);
  font-size: clamp(6rem, 15vw, 13rem);
  line-height: .84;
  letter-spacing: -.055em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(.5rem);
  animation: signal-in .65s cubic-bezier(.22,.65,.34,1) .12s forwards;
}
h1 .one { color: var(--nt-gold); font-family: var(--font-display); font-weight: 500; }
h1 b { margin: 0 .025em; color: var(--nt-ivory); font-size: .694em; font-weight: 400; line-height: 1; transform: translateY(-.271em); }
h1 .year { color: var(--nt-ivory); }
.governance-day-label { margin: 1rem 0 0; color: var(--nt-ivory); font-family: var(--font-display); font-size: clamp(1.45rem, 2.8vw, 2.1rem); font-weight: 500; letter-spacing: .015em; }

.countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(57.5rem, 100%); margin: clamp(2.75rem, 6vh, 4.5rem) auto 0; opacity: 0; animation: reveal .55s ease-out .28s forwards; }
.time-unit { position: relative; min-width: 0; padding: .4rem clamp(.65rem, 2.4vw, 1.75rem); }
.time-unit + .time-unit::before { position: absolute; left: 0; top: 8%; height: 68%; width: 1px; content: ""; background: linear-gradient(transparent, var(--nt-gold), transparent); opacity: .55; }
.time-unit strong { display: block; min-width: 2ch; font-family: var(--font-body); font-size: clamp(3rem, 6vw, 5.125rem); font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.time-unit .digit-one { display: inline; margin: 0; color: var(--nt-gold); font-family: var(--font-display); font-size: 1em; font-weight: 500; line-height: inherit; letter-spacing: inherit; text-transform: none; }
.brand-one { color: var(--nt-gold); font-family: var(--font-display); font-weight: 500; }
.time-unit > span { display: block; margin-top: .8rem; color: var(--nt-muted); font-size: .75rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }

.governance-check { width: min(48rem, 100%); margin: clamp(2.6rem, 5.5vh, 4rem) auto 0; padding: clamp(1.75rem, 3.5vh, 2.5rem) clamp(1rem, 3vw, 2.5rem); border-top: 1px solid var(--nt-line); border-bottom: 1px solid var(--nt-line); }
.governance-kicker { margin: 0 0 .65rem; color: var(--nt-gold); font-size: .75rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.governance-check h2 { margin: 0; color: var(--nt-ivory); font-size: clamp(1.75rem, 3.6vw, 2.65rem); line-height: 1.15; }
.governance-check > p:not(.governance-kicker, .governance-question) { margin: .8rem 0 0; color: var(--nt-cream); font-size: .95rem; }
.governance-question { max-width: 42rem; margin: .65rem auto 0; color: var(--nt-ivory); font-family: var(--font-display); font-size: clamp(1.05rem, 1.8vw, 1.3rem); font-style: italic; line-height: 1.6; }

.doctrine { margin: clamp(2.25rem, 4.5vh, 3.25rem) auto 0; }
.doctrine-mark { margin: 0; color: var(--nt-ivory); font-family: var(--font-display); font-size: clamp(1.7rem, 3.5vw, 2.5rem); letter-spacing: -.02em; }
.doctrine-mark span { color: var(--nt-gold); font-family: var(--font-display); font-weight: 500; }
.doctrine > p:last-child { margin: .45rem 0 0; color: var(--nt-cream); font-size: .9rem; letter-spacing: .025em; }

footer { display: flex; justify-content: center; flex-wrap: wrap; gap: .3rem 1.25rem; width: min(var(--content-max), calc(100% - 4rem)); margin: 0 auto; padding: 1.5rem 0 2rem; border-top: 1px solid var(--nt-line); color: var(--nt-muted); font-size: .75rem; text-align: center; }
footer p { margin: 0; }
@keyframes reveal { to { opacity: 1; } }
@keyframes signal-in { to { opacity: 1; transform: translateY(0); } }

@media (max-width: 680px) {
  .site-head { min-height: 4.5rem; padding: 1rem 1.25rem .4rem; }
  .site-head img,
  .site-head .brand-logo { width: 7rem; }
  .hero { width: min(100% - 2.5rem, var(--content-max)); padding: 2.5rem 0 3rem; }
  h1 { font-size: clamp(3.75rem, 22vw, 6.25rem); }
  h1 b { margin-inline: .015em; }
  .countdown { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .time-unit { min-height: 6.5rem; padding: 1rem .6rem; border: 1px solid var(--nt-line); }
  .time-unit + .time-unit::before { display: none; }
  .time-unit strong { font-size: clamp(2.75rem, 13vw, 4rem); }
  .governance-check { padding-inline: .25rem; }
  footer { width: calc(100% - 2.5rem); flex-direction: column; }
}
@media (max-width: 359px) { h1 { font-size: 3.375rem; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  .site-head, h1, .countdown { opacity: 1; transform: none; }
}