:root{
  --paper:#FAF9F7; --ink:#12100E; --muted:#6B665F; --rule:#DFDAD2; --card:#FFFFFF;
  --red:#D70000; --blue:#375DAD; --teal:#00A99F; --orange:#F99317;
  --serif: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{ --paper:#101010; --ink:#F2EFEA; --muted:#9C958A; --rule:#2C2926; --card:#171614; --red:#FF4136; }
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.wrap{ width:100%; max-width:940px; margin:0 auto; padding:0 24px; }
a{ color:inherit; }

/* ---------- brand square motif ---------- */
.squares{ display:flex; gap:5px; }
.squares i{ width:11px; height:11px; display:block; }
.squares i:nth-child(1){ background:var(--blue); }
.squares i:nth-child(2){ background:var(--teal); }
.squares i:nth-child(3){ background:var(--orange); }
.squares i:nth-child(4){ background:var(--red); }

/* ---------- header ---------- */
header{ padding:34px 0 0; }
.logo{ display:block; width:190px; max-width:52vw; height:auto; }
@media (prefers-color-scheme: dark){
  .logo{ background:#fff; padding:6px 8px; border-radius:10px; }
}

/* ---------- hero ---------- */
.hero{ padding:56px 0; border-bottom:1px solid var(--rule); }
.eyebrow{
  font-family:var(--sans); font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); margin:0 0 22px; display:flex; align-items:center; gap:14px;
}
h1{
  font-family:var(--serif); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(2.1rem, 6.2vw, 3.6rem); line-height:1.1; margin:0 0 26px; max-width:17ch;
}
.lead{ font-size:clamp(1.02rem,2.4vw,1.2rem); color:var(--muted); max-width:60ch; margin:0; }
.lead strong{ color:var(--ink); font-weight:600; }

/* ---------- sections ---------- */
section{ padding:56px 0; border-bottom:1px solid var(--rule); }
h2{
  font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted); margin:0 0 32px;
}

/* ---------- credentials ---------- */
.creds{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); }
@media (max-width:600px){ .creds{ grid-template-columns:1fr; } }
.cred{ background:var(--card); padding:26px 24px; }
.cred .yr{ font-family:var(--sans); font-size:12px; letter-spacing:.14em; color:var(--muted); margin:0 0 10px; }
.cred .t{ font-family:var(--serif); font-size:1.16rem; line-height:1.35; margin:0 0 6px; font-weight:600; }
.cred .d{ font-size:.9rem; color:var(--muted); margin:0; }
.cred .bar{ width:26px; height:3px; margin:0 0 16px; }

/* ---------- figures ---------- */
.figs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:32px 24px; }
.fig .n{ font-family:var(--serif); font-size:clamp(1.9rem,5vw,2.6rem); line-height:1; letter-spacing:-.02em; margin:0 0 8px; }
.fig .l{ font-size:.88rem; color:var(--muted); margin:0; }
.note{ font-size:.84rem; color:var(--muted); margin:28px 0 0; font-style:italic; }

/* ---------- timeline ---------- */
ol.tl{ list-style:none; margin:0; padding:0; }
ol.tl li{ display:grid; grid-template-columns:104px 1fr; gap:20px; padding:18px 0; border-top:1px solid var(--rule); align-items:baseline; }
ol.tl li:first-child{ border-top:0; }
ol.tl .y{ font-family:var(--serif); font-size:1.15rem; font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums; }
ol.tl .e{ margin:0; }
ol.tl .e b{ font-weight:600; }
@media (max-width:560px){
  ol.tl li{ grid-template-columns:1fr; gap:4px; }
}

/* ---------- character ---------- */
ul.pts{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px 34px; }
ul.pts li{ position:relative; padding-left:20px; color:var(--muted); }
ul.pts li::before{ content:""; position:absolute; left:0; top:.62em; width:8px; height:8px; background:var(--red); }

/* ---------- tease ---------- */
/* Sits at the TOP of the page (moved 2026-07-26) — so it needs a closing rule
   beneath it, not the open bottom it had when it ended the page. */
.tease{ padding:52px 0 58px; border-bottom:1px solid var(--rule); text-align:center; }
.tease .squares{ justify-content:center; margin:0 0 26px; }
.tease p.k{
  font-family:var(--serif); font-size:clamp(1.4rem,4.2vw,2.1rem); line-height:1.35;
  margin:0 auto 18px; max-width:22ch; font-weight:600; letter-spacing:-.01em;
}
.tease p.s{ color:var(--muted); margin:0; font-size:1rem; }
.soon{
  display:inline-block; margin-top:26px; font-family:var(--sans); font-size:11px;
  letter-spacing:.26em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--rule); padding:9px 18px; border-radius:999px;
}

/* ---------- footer ---------- */
footer{ padding:36px 0 56px; color:var(--muted); font-size:.84rem; display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center; justify-content:space-between; }
footer p{ margin:0; }

/* Progressive enhancement: content is visible by default. The fade-in is applied
   ONLY when JS is running (html.js), so a JS failure can never blank the page. */
@media (prefers-reduced-motion: no-preference){
  html.js .reveal{ opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease; }
  html.js .reveal.in{ opacity:1; transform:none; }
}

/* ---------- language toggle (added 2026-07-26) ---------- */
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.lang{
  font-family:var(--sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); text-decoration:none; border:1px solid var(--rule);
  padding:8px 16px; border-radius:999px; white-space:nowrap; transition:color .2s, border-color .2s;
}
.lang:hover, .lang:focus-visible{ color:var(--ink); border-color:var(--muted); }