:root {
  --bg: #101722;
  --paper: #f2ede2;
  --ink: #15202c;
  --muted: #76808c;
  --accent: #dd7d54;
  --gold: #efb563;
  --line: rgba(21, 32, 44, .12);
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  font-family: "DM Sans", system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.birthday-banner {
  position: relative;
  z-index: 10;
  width: 100%;
  padding: 11px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  text-align: center;
  background: var(--gold);
  color: var(--ink);
  font-size: .86rem;
  letter-spacing: .015em;
}

.birthday-banner[hidden] { display: none; }

body.birthday .hero {
  background:
    radial-gradient(circle at 82% 17%, rgba(239,181,99,.25), transparent 24rem),
    radial-gradient(circle at 16% 88%, rgba(221,125,84,.15), transparent 24rem),
    var(--bg);
}

body.birthday .portrait-wrap {
  box-shadow: 0 24px 75px rgba(0,0,0,.24), 0 0 0 1px rgba(239,181,99,.24);
}

.hero {
  min-height: 100svh;
  background: radial-gradient(circle at 83% 18%, rgba(221,125,84,.18), transparent 28rem), var(--bg);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hero-inner {
  width: min(1180px, calc(100% - 48px));
  margin: auto;
  padding: 72px 0 54px;
  display: grid;
  grid-template-columns: minmax(280px,.8fr) minmax(420px,1.25fr);
  gap: clamp(44px,8vw,110px);
  align-items: center;
}

.portrait-wrap {
  width: min(100%,430px);
  aspect-ratio: 4/5;
  border-radius: 220px 220px 38px 38px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg,#26354a,#121a26);
  box-shadow: 0 24px 70px rgba(0,0,0,.22);
}

.portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}

.portrait-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 68% 26%,rgba(239,181,99,.28),transparent 32%),linear-gradient(160deg,#26364b,#141d2a 65%);
}

.portrait-fallback span {
  font-family: "Playfair Display",Georgia,serif;
  font-size: 8rem;
  font-style: italic;
  color: rgba(255,255,255,.18);
}

.eyebrow,.kicker {
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .76rem;
  font-weight: 700;
}

.eyebrow {
  color: var(--gold);
  margin: 0 0 18px;
}

.hero h1,.section h2 {
  font-family: "Playfair Display",Georgia,serif;
  letter-spacing: -.04em;
}

.hero h1 {
  margin: 0;
  font-size: clamp(3.4rem,7vw,7.1rem);
  line-height: .9;
}

.hero h1 em { color: var(--paper); }

.big-answer {
  margin-top: 48px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.big-answer > span:first-child {
  font-family: "DM Mono",monospace;
  font-size: clamp(5rem,10vw,9rem);
  line-height: .85;
  color: var(--gold);
  letter-spacing: -.07em;
}

.big-answer-unit {
  color: rgba(255,255,255,.72);
  font-size: 1.35rem;
}

.hero-fraction {
  margin: 22px 0 0;
  font-family: "DM Mono",monospace;
  color: var(--gold);
  font-size: clamp(1.35rem,2.6vw,2.15rem);
  font-weight: 500;
  letter-spacing: -.035em;
}

.hero-precise {
  margin: 8px 0 0;
  font-family: "DM Mono",monospace;
  color: rgba(255,255,255,.86);
  line-height: 1.65;
}

.ticker {
  border-top: 1px solid rgba(255,255,255,.11);
  padding: 18px max(24px,calc((100vw - 1180px)/2));
  display: flex;
  gap: 18px;
  align-items: center;
  font-family: "DM Mono",monospace;
}

.ticker-label {
  color: rgba(255,255,255,.55);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.ticker-number {
  margin-left: auto;
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #75d38b;
  box-shadow: 0 0 0 5px rgba(117,211,139,.11);
}

.section {
  width: min(1180px,calc(100% - 48px));
  margin: 0 auto;
  padding: 112px 0;
}

.section-heading {
  max-width: 760px;
  margin-bottom: 54px;
}

.section-heading.compact { margin-bottom: 38px; }

.kicker {
  color: var(--accent);
  margin: 0 0 12px;
}

.section h2 {
  margin: 0;
  font-size: clamp(2.5rem,5vw,4.7rem);
  line-height: .98;
}

.section-heading > p:last-child {
  color: #68727d;
  line-height: 1.65;
}

.fraction-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
}

.fraction-card {
  padding: 34px 28px 30px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--line);
}

.fraction-card:last-child { border-right: 0; }

.fraction-card-special {
  background: var(--ink);
  color: #fff;
}

.fraction-label {
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: .58;
}

.fraction-card strong,.stat-card strong,.countdown,.planet-card strong {
  font-family: "DM Mono",monospace;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.fraction-card strong {
  font-size: clamp(2.15rem,3.6vw,3.55rem);
  letter-spacing: -.055em;
  white-space: nowrap;
}

.fraction-card small,.stat-card small,.planet-card em { color: var(--muted); }
.fraction-card-special small { color: rgba(255,255,255,.55); }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 12px;
}

.stat-card {
  min-height: 162px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.stat-card.featured {
  grid-column: span 2;
  background: #e8e0d1;
}

.stat-card.code-stat {
  background: rgba(21,32,44,.035);
}

.stat-card span {
  color: #6d7680;
  font-size: .82rem;
  font-weight: 600;
}

.stat-card strong {
  font-size: clamp(1.45rem,3vw,2.45rem);
  letter-spacing: -.04em;
  white-space: nowrap;
}

.stat-card.code-stat strong {
  font-size: clamp(1.3rem,2.3vw,2rem);
  letter-spacing: -.045em;
}

.stat-card.featured strong { font-size: clamp(2rem,5vw,4.2rem); }

.milestone-section {
  width: 100%;
  max-width: none;
  background: var(--bg);
  color: #fff;
  padding: 82px max(24px,calc((100vw - 1180px)/2));
}

.milestone-card {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 70px;
  align-items: end;
}

.countdown {
  font-size: clamp(1.7rem,4vw,3.7rem);
  color: var(--gold);
  text-align: right;
}

.milestone-date { color: rgba(255,255,255,.56); }

.planet-grid {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 12px;
}

.planet-card {
  min-height: 210px;
  border-radius: 999px 999px 28px 28px;
  border: 1px solid var(--line);
  padding: 27px 16px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.planet-card > span {
  font-size: 2rem;
  opacity: .55;
}

.planet-card small {
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

.planet-card strong { font-size: clamp(1.5rem,2.8vw,2.5rem); }
.planet-card em { font-style: normal; }

.facts-section { padding-top: 20px; }
.facts-card { border-top: 1px solid var(--line); padding-top: 46px; }

.facts-card dl > div {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 30px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.facts-card dt { color: var(--muted); }
.facts-card dd { margin: 0; font-weight: 600; }

footer {
  border-top: 1px solid var(--line);
  width: min(1180px,calc(100% - 48px));
  margin: auto;
  padding: 34px 0 50px;
  color: #5f6974;
  display: flex;
  justify-content: space-between;
  gap: 30px;
}

.footer-small { font-size: .8rem; }

code {
  font-family: "DM Mono",monospace;
  background: rgba(21,32,44,.06);
  padding: .15em .35em;
  border-radius: 4px;
}

@media (max-width: 900px) {
  .hero { min-height: auto; }
  .hero-inner { grid-template-columns: 1fr; padding: 40px 0 56px; }
  .portrait-wrap { width: min(72vw,340px); }
  .fraction-grid { grid-template-columns: 1fr 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .stat-card.featured { grid-column: 1/-1; }
  .planet-grid { grid-template-columns: repeat(3,1fr); }
  .milestone-card { grid-template-columns: 1fr; }
  .countdown { text-align: left; }
}

@media (max-width: 600px) {
  .birthday-banner { padding-inline: 14px; font-size: .78rem; gap: 8px; }
  .hero-inner,.section,footer { width: calc(100% - 32px); }
  .hero-inner { padding-top: 30px; }
  .portrait-wrap { width: min(78vw,310px); }
  .section { padding: 76px 0; }
  .fraction-grid,.stat-grid { grid-template-columns: 1fr; }
  .fraction-card { border-right: 0; border-bottom: 1px solid var(--line); min-height: 178px; }
  .fraction-card:last-child { border-bottom: 0; }
  .stat-card.featured { grid-column: auto; }
  .stat-card.code-stat strong { font-size: clamp(1.25rem,6vw,1.8rem); }
  .planet-grid { grid-template-columns: 1fr 1fr; }
  .facts-card dl > div { grid-template-columns: 1fr; gap: 6px; }
  footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; }
}