/* =========================================================================
   Essential 25 — shared stylesheet  (canonical Design System v0.1)
   Used by: the-science.html, the-languages.html, the-test.html
   When index.html is migrated off Playfair/Hanken, it adopts this file too.
   ========================================================================= */

:root{
  /* dark surfaces */
  --navy:#0E1A2B;
  --navy-deep:#081222;
  --navy-raised:#1A2536;
  --navy-line:rgba(244,239,230,.08);
  /* accent */
  --amber:#D4A24C;
  --amber-deep:#B68838;
  --amber-soft:#E8C98833;
  --amber-ink:#3D2E12;
  /* text on dark */
  --ink:#F4EFE6;
  --ink-muted:rgba(244,239,230,.62);
  --ink-subtle:rgba(244,239,230,.38);
  /* mastery / status */
  --sage:#6B9B7E;
  --grey:#9BA3AE;
  /* mnemonic palette (used sparingly as accents) */
  --sun:#E8794A; --coral:#D8553F; --teal:#2F6F6A; --sky:#7BAEC6;
  --cream:#F0DDB6; --forest:#2A4434; --plum:#5E3852;
  /* type */
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'Geist','Geist Fallback',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* spacing */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s7:32px;--s8:40px;--s9:48px;--s10:64px;
  /* radii */
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:20px;--r-xxl:28px;--r-pill:9999px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--navy);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ---- ambient background glow ---- */
.bg-glow{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 50% at 78% -5%, rgba(212,162,76,.14), transparent 60%),
    radial-gradient(45% 40% at 0% 18%, rgba(212,162,76,.06), transparent 60%);
}

/* ---- layout ---- */
.wrap{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:0 28px;width:100%}
.narrow{max-width:760px}
section{position:relative;z-index:1}
a{color:inherit}

/* ---- header / nav ---- */
header{position:relative;z-index:3}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 0 18px;flex-wrap:wrap}
.brand{
  font-family:var(--serif);font-weight:400;font-size:1.6rem;letter-spacing:.005em;
  color:var(--ink);text-decoration:none;display:inline-flex;align-items:baseline;gap:.18em;
}
.brand b{color:var(--amber);font-weight:400}
.nav-links{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nav-links a{
  font-size:.86rem;font-weight:500;color:var(--ink-muted);text-decoration:none;
  padding:8px 12px;border-radius:var(--r-pill);transition:.2s;letter-spacing:.01em;
}
.nav-links a:hover{color:var(--ink);background:var(--navy-raised)}
.nav-links a.active{color:var(--amber)}
.nav-cta{
  font-weight:600!important;color:var(--amber-ink)!important;
  background:var(--amber);padding:9px 16px!important;
}
.nav-cta:hover{background:var(--amber-deep)!important;color:var(--amber-ink)!important}

/* ---- type ---- */
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.28em;
  text-transform:uppercase;color:var(--amber);margin-bottom:var(--s5);
}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--amber)}
h1{
  font-family:var(--serif);font-weight:400;line-height:1.04;letter-spacing:-.01em;
  font-size:clamp(2.7rem,6vw,4.6rem);margin-bottom:var(--s5);
}
h1 em{font-style:italic;color:var(--amber)}
h2{
  font-family:var(--serif);font-weight:400;line-height:1.08;
  font-size:clamp(2rem,4vw,3rem);margin-bottom:var(--s4);
}
h2 em{font-style:italic;color:var(--amber)}
h3{font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1.15;margin-bottom:var(--s3)}
p{color:var(--ink-muted);font-size:1.06rem}
p.lede{font-size:1.28rem;line-height:1.5;color:var(--ink);max-width:34em}
p + p{margin-top:var(--s4)}
strong{color:var(--ink);font-weight:600}
em.amber{font-style:normal;color:var(--amber)}
.serif-num{font-family:var(--serif);color:var(--amber)}

/* ---- hero block ---- */
.hero{padding:48px 0 56px}
.hero p.lede{margin-top:var(--s5)}

/* ---- generic section rhythm ---- */
.block{padding:56px 0;border-top:1px solid var(--navy-line)}
.block:first-of-type{border-top:none}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:.5em;cursor:pointer;text-decoration:none;
  font-family:var(--sans);font-weight:600;font-size:1rem;
  padding:14px 24px;border-radius:var(--r-pill);border:none;
  background:var(--amber);color:var(--amber-ink);transition:.2s;
}
.btn:hover{background:var(--amber-deep)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--navy-line)}
.btn-ghost:hover{background:var(--navy-raised)}

/* ---- cards / grids ---- */
.grid{display:grid;gap:var(--s5)}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:repeat(3,1fr)}
.card{
  background:var(--navy-raised);border:1px solid var(--navy-line);
  border-radius:var(--r-xl);padding:var(--s7);
}
.card h3{margin-bottom:var(--s2)}
.card p{font-size:.99rem}
.card .kicker{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);margin-bottom:var(--s3)}

/* ---- pull / stat ---- */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);margin:var(--s7) 0}
.stat{background:var(--navy-raised);border:1px solid var(--navy-line);border-radius:var(--r-lg);padding:var(--s6)}
.stat .big{font-family:var(--serif);font-size:3rem;line-height:1;color:var(--amber)}
.stat .cap{display:block;margin-top:var(--s2);font-size:.92rem;color:var(--ink-muted)}

.pullquote{
  font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.3;
  color:var(--ink);border-left:2px solid var(--amber);padding:var(--s2) 0 var(--s2) var(--s6);
  margin:var(--s8) 0;max-width:24em;
}

/* ---- list with amber ticks ---- */
.ticks{list-style:none;display:grid;gap:var(--s4);margin-top:var(--s5)}
.ticks li{position:relative;padding-left:var(--s6);font-size:1.04rem;color:var(--ink-muted)}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--amber)}
.ticks li b{color:var(--ink);font-weight:600}

/* ---- references ---- */
.refs{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--navy-line);
  font-size:.9rem;color:var(--ink-subtle)}
.refs ol{margin-top:var(--s3);padding-left:1.3em;display:grid;gap:var(--s2)}
.refs li{color:var(--ink-muted)}
.refs cite{font-style:italic;color:var(--ink)}

/* =======================  THE LANGUAGES  ======================= */
.lang-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4);margin-top:var(--s6)}
.lang{
  display:flex;align-items:center;gap:var(--s4);
  background:var(--navy-raised);border:1px solid var(--navy-line);
  border-radius:var(--r-lg);padding:var(--s5) var(--s6);
}
.lang .flag{font-size:1.7rem;line-height:1;flex:none}
.lang .meta{flex:1}
.lang .name{font-weight:600;color:var(--ink)}
.lang .sub{font-size:.85rem;color:var(--ink-subtle)}
.pill{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 11px;border-radius:var(--r-pill);white-space:nowrap;flex:none;
}
.pill.live{background:rgba(107,155,126,.16);color:var(--sage)}
.pill.testing{background:var(--amber-soft);color:var(--amber)}
.pill.soon{background:rgba(155,163,174,.14);color:var(--grey)}

/* =======================  THE TEST  ======================= */
.leg{
  display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;
  border:1px solid var(--navy-line);border-radius:var(--r-xl);overflow:hidden;
  margin-bottom:var(--s6);background:var(--navy-raised);
}
.leg:nth-child(even){direction:rtl}
.leg:nth-child(even) .leg-body{direction:ltr}
.leg-photo{position:relative;min-height:320px;background:var(--navy-deep)}
.leg-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.leg-photo .num{
  position:absolute;top:var(--s4);left:var(--s4);direction:ltr;
  font-family:var(--serif);font-size:1.5rem;color:var(--ink);
  background:rgba(8,18,34,.7);backdrop-filter:blur(4px);
  width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
}
.leg-body{direction:ltr;padding:var(--s8) var(--s7)}
.leg-body .where{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);margin-bottom:var(--s3)}
.leg-body h3{font-size:1.7rem;margin-bottom:var(--s3)}
.leg-body p{font-size:1rem}
.leg-body .phrase{
  margin-top:var(--s5);font-family:var(--serif);font-style:italic;font-size:1.25rem;color:var(--ink);
}
.leg-body .phrase span{display:block;font-family:var(--mono);font-style:normal;font-size:.8rem;color:var(--ink-subtle);letter-spacing:.04em;margin-top:4px}

.test-hero{
  position:relative;border-radius:var(--r-xxl);overflow:hidden;margin-top:var(--s7);
  border:1px solid var(--navy-line);min-height:340px;display:flex;align-items:flex-end;
}
.test-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.test-hero .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,18,34,.15),rgba(8,18,34,.88))}
.test-hero .cap{position:relative;z-index:2;padding:var(--s7);font-size:.9rem;color:var(--ink-muted)}

.route{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s6);font-family:var(--mono);font-size:.82rem;color:var(--ink-muted)}
.route span{background:var(--navy-raised);border:1px solid var(--navy-line);padding:6px 12px;border-radius:var(--r-pill)}
.route .arrow{background:none;border:none;color:var(--amber);padding:6px 0}

.note{font-size:.85rem;color:var(--ink-subtle);font-style:italic;margin-top:var(--s5)}

/* =======================  CTA band  ======================= */
.cta-band{
  margin:var(--s9) 0 0;padding:var(--s9) var(--s7);border-radius:var(--r-xxl);
  background:linear-gradient(160deg,var(--navy-raised),var(--navy-deep));
  border:1px solid var(--navy-line);text-align:center;
}
.cta-band h2{margin-bottom:var(--s4)}
.cta-band p{max-width:32em;margin:0 auto var(--s6)}

/* ---- footer ---- */
footer{position:relative;z-index:1;border-top:1px solid var(--navy-line);margin-top:var(--s10);padding:var(--s8) 0}
.foot{display:flex;justify-content:space-between;align-items:center;gap:var(--s5);flex-wrap:wrap}
.foot-links{display:flex;gap:var(--s5);flex-wrap:wrap}
.foot-links a{color:var(--ink-muted);text-decoration:none;font-size:.9rem;transition:.2s}
.foot-links a:hover{color:var(--amber)}
.foot .copy{font-size:.82rem;color:var(--ink-subtle)}

/* ---- responsive ---- */
@media(max-width:820px){
  .grid-2,.grid-3,.stat-row,.lang-grid{grid-template-columns:1fr}
  .leg{grid-template-columns:1fr}
  .leg:nth-child(even){direction:ltr}
  .leg-photo{min-height:240px}
  .leg-body{padding:var(--s7) var(--s6)}
}
@media(max-width:520px){
  .wrap{padding:0 20px}
  .nav{gap:12px}
  .nav-links{gap:2px}
  .nav-links a{padding:7px 9px;font-size:.8rem}
  h1{font-size:2.4rem}
}