/* Layout: full-viewport stage. Layers, back to front: blue ground + grain, grid lines,
   blurred name, small mono copy, ticker, then the animated portrait (its blue backdrop is keyed
   out so everything above sits "behind" her and the leaves), then the nav on top. */
:root {
  --ground: #1242a0;      /* matches the portrait backdrop */
  --ink: #f3f6ff;         /* text on blue */
  --ink-dim: rgba(243, 246, 255, .62);
  --line: rgba(190, 210, 255, .16);
  --pill: #f6f8ff;
  --pill-ink: #0c2a6e;
  --display: "Instrument Serif", "Times New Roman", Georgia, serif;
  --mono: "Sometype Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden;
  background: var(--ground); color: var(--ink);
  font-family: var(--mono); font-size: 12.5px; line-height: 1.5;
  text-transform: uppercase; letter-spacing: .02em;
}
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }

.stage { position: fixed; inset: 0; overflow: hidden; }
.grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .16; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1.1 -.1'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* thin construction lines */
.grid i { position: absolute; background: var(--line); }
.grid .v { top: 0; bottom: 0; width: 1px; }
.grid .h { left: 0; right: 0; height: 1px; }
.v1 { left: 4.5%; } .v2 { left: 34.5%; } .v3 { left: 75.5%; } .v4 { left: 96%; }
.h1 { display: none; }

/* sparkles */
.spark { position: absolute; width: 13px; height: 13px; color: var(--ink); opacity: .85; animation: tw 5s ease-in-out infinite; }
.spark svg { display: block; width: 100%; height: 100%; }
@keyframes tw { 0%, 100% { opacity: .85; transform: scale(1); } 50% { opacity: .35; transform: scale(.82); } }

/* the name, dissolved into dust behind her */
.name {
  position: absolute; left: 0; right: 0; top: 17vh; margin: 0; text-align: center;
  font-family: var(--display); font-weight: 400; text-transform: none; letter-spacing: -.02em;
  font-size: min(36vh, 24vw); line-height: .9; color: #fff;
  filter: url(#dust); pointer-events: none; user-select: none; white-space: nowrap;
}

/* small copy blocks */
.copy { position: absolute; margin: 0; max-width: 21em; color: var(--ink); }
.c1 { left: 14.5%; top: 12vh; }
.c2 { left: 4.5%; top: 47vh; max-width: 17em; padding-left: 0; }
.c3 { right: 7%; top: 14vh; max-width: 11em; }
.c4 { left: 76.5%; top: 47vh; right: 3%; max-width: 20em; }
.copy b { font-weight: 500; }

/* bottom ticker */
.ticker { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: 54px; overflow: hidden; display: flex; align-items: center; border-top: 1px solid var(--line); background: linear-gradient(to top, rgba(10, 44, 120, .78), rgba(10, 44, 120, .35)); }
.track { display: flex; flex: none; gap: 56px; padding-right: 56px; animation: slide 46s linear infinite; }
.track span { display: inline-flex; gap: 10px; align-items: center; white-space: nowrap; font-size: 11.5px; }
.track svg { width: 14px; height: 14px; flex: none; }
@keyframes slide { to { transform: translateX(-50%); } }

/* animated portrait */
#c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; opacity: 0; transition: opacity .9s ease; }
#c.on { opacity: 1; }

/* navigation (above the portrait) */
nav {
  position: absolute; z-index: 5; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px clamp(16px, 4.5%, 64px);
}
.logo { font-family: var(--display); font-size: 28px; line-height: 1; text-transform: none; letter-spacing: 0; }
.links { display: flex; gap: 14px; list-style: none; margin: 0 auto 0 28px; padding: 0; align-items: center; }
.links li + li::before { content: "\00b7"; margin-right: 14px; color: var(--ink-dim); }
.links a { padding: 6px 0; }
.links a:hover { color: #fff; text-shadow: 0 0 12px rgba(255,255,255,.7); }
.right { display: flex; align-items: center; gap: 22px; }
.pill {
  display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 20px;
  background: var(--pill); color: var(--pill-ink); border-radius: 999px; font-weight: 500;
  transition: transform .25s ease, box-shadow .25s ease;
}
.pill:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(5, 20, 70, .45); }
.pill svg { width: 16px; height: 16px; }

.fallback { position: absolute; inset: 0; display: none; place-items: center; text-align: center; padding: 24px; z-index: 4; }
.fallback.show { display: grid; }

@media (max-width: 860px) {
  body { font-size: 11.5px; }
  .links { display: none; }
  .v2, .v3, .c2, .c4 { display: none; }
  .name { top: 21vh; font-size: min(15vh, 25vw); }
  .c1 { left: 16px; right: 16px; top: 80px; max-width: none; }
  .c3 { top: 80px; right: 16px; display: none; }
  .logo { font-size: 24px; }
  .right { gap: 14px; }
  .pill { height: 36px; padding: 0 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .track, .spark { animation: none; }
  #c { transition: none; }
}