/* ============================================================
   The Hundred — stylesheet
   Kept byte-identical (minus the gate block, fenced below) with
   the inline <style> in preview/index.html.
   ============================================================ */

:root{
  /* ---- palette · light ---- */
  --paper:#ffffff; --paper-alt:#f4f2ee; --ink:#16181d; --ink-soft:#5b6672;
  --rule:#d9d5cd; --hair:#e7e3dc;
  --accent:#1a5f7a; --accent-soft:#e3eef3; --on-accent:#ffffff;
  --strike:#a03d2f; --on-strike:#ffffff;
  /* the inverted block */
  --flip-bg:#16181d; --flip-ink:#ffffff; --flip-soft:#c9ced5; --flip-accent:#7fc3de;
  /* depth */
  --shade:rgba(22,24,29,.13); --shade-soft:rgba(22,24,29,.05); --sheen:rgba(255,255,255,.7);

  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* ---- type scale. 18px floor on everything that is read ---- */
  --step--1:clamp(1.125rem,1.09rem + .16vw,1.2rem);   /* 18 → 19.2 secondary body */
  --step-0 :clamp(1.125rem,1.05rem + .4vw,1.3rem);    /* 18 → 20.8 body */
  --step-1 :clamp(1.35rem,1.15rem + 1vw,1.85rem);     /* step headings */
  --step-2 :clamp(1.9rem,1.4rem + 2.4vw,3rem);        /* section headings */
  --step-3 :clamp(3rem,1.8rem + 6vw,6.5rem);          /* the wordmark */
  --step-4 :clamp(4rem,2.4rem + 8vw,8rem);            /* big-number interstitials */
  --label:.875rem;                                     /* tracked uppercase eyebrows */
  --measure:34rem;                                    /* reading measure */
  --column:52rem;                                     /* the page's single content column */

  /* ---- layout rhythm ---- */
  --banner:0rem;                                      /* draft strip, preview only */
  --pin-h:calc(56vh - var(--banner) - var(--nav));    /* pinned graphic, mobile */
  --pin-top:0rem;
  --nav:3rem;                                          /* the sticky section nav */
  --pad-section:clamp(3.5rem,8vw,6.5rem);
  --pad-exhale:clamp(5.5rem,13vw,9rem);
}
:root:has(.draft){--banner:1.9rem}
@media (max-width:640px){:root:has(.draft){--banner:3.7rem}}

@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --paper:#101317; --paper-alt:#1a1e24; --ink:#eceae6; --ink-soft:#9aa5b1;
    --rule:#2c333b; --hair:#222831;
    --accent:#6fb3d0; --accent-soft:#17313d; --on-accent:#08110a;
    --strike:#dd8574; --on-strike:#1b0d09;
    --flip-bg:#05070a; --flip-ink:#f6f4f0; --flip-soft:#b9c3cd; --flip-accent:#7fc3de;
    --shade:rgba(0,0,0,.55); --shade-soft:rgba(0,0,0,.3); --sheen:rgba(255,255,255,.045);
  }
}
:root[data-theme=dark]{
  --paper:#101317; --paper-alt:#1a1e24; --ink:#eceae6; --ink-soft:#9aa5b1;
  --rule:#2c333b; --hair:#222831;
  --accent:#6fb3d0; --accent-soft:#17313d; --on-accent:#08110a;
  --strike:#dd8574; --on-strike:#1b0d09;
  --flip-bg:#05070a; --flip-ink:#f6f4f0; --flip-soft:#b9c3cd; --flip-accent:#7fc3de;
  --shade:rgba(0,0,0,.55); --shade-soft:rgba(0,0,0,.3); --sheen:rgba(255,255,255,.045);
}

*{box-sizing:border-box}
figure{margin:0}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font); font-size:var(--step-0); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3{line-height:1.12; margin:0 0 .5em; text-wrap:balance}
h1{font-size:var(--step-3); font-weight:800; letter-spacing:-.035em}
h2{font-size:var(--step-2); font-weight:800; letter-spacing:-.025em; max-width:22ch}
h3{font-size:var(--step-1); font-weight:700; letter-spacing:-.012em; max-width:30ch}
p{margin:0 0 1.15em; max-width:var(--measure)}
strong{font-weight:700}
/* weight carries emphasis, never italics — 08-visual-design §6 */
em{font-style:normal; font-weight:700}
a{color:var(--accent)}
.mt{margin-top:2.75rem}
/* available to assistive technology, absent from the page */
.vh{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0}
.pull{border-left:3px solid var(--accent); padding-left:1.15rem; font-weight:700; margin-top:1.75rem}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px}

/* skip link */
.skip{
  position:absolute; left:.75rem; top:-6rem; z-index:120;
  background:var(--accent); color:var(--on-accent); font-weight:700;
  padding:.7rem 1.1rem; border-radius:2px; text-decoration:none;
  font-size:var(--step--1); transition:top .15s;
}
.skip:focus{top:calc(var(--banner) + .5rem)}

.draft{
  position:sticky; z-index:99; top:0;
  display:block; min-height:var(--banner);
  background:var(--strike); color:var(--on-strike);
  font-size:.75rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; text-align:center;
  padding:.35rem 1rem; line-height:1.3;
}


/* ============================================================
   GATE-START — public/styles.css only; not in the preview build
   ============================================================ */
.gate{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem 1.5rem}
.gate > div{max-width:26rem; width:100%}
.gate .kicker{font-size:var(--label); letter-spacing:.2em; text-transform:uppercase; color:var(--accent); font-weight:800; margin-bottom:.9rem}
.gate h1{font-size:var(--step-2); margin-bottom:.35em; letter-spacing:-.025em}
.gate .lede{font-size:var(--step--1); color:var(--ink-soft); margin-bottom:1.8rem}
.gate form{margin:0}
.gate label{display:block; font-weight:700; font-size:var(--step--1); margin-bottom:.35rem}
.gate input,.gate select{margin-bottom:1rem}
.gate button{width:100%}
.gate .err{color:var(--strike); font-weight:700; font-size:var(--step--1); margin:.8rem 0 0}
.opt-lab{font-weight:400; color:var(--ink-soft)}

.or{display:flex; align-items:center; gap:.9rem; margin:1.8rem 0; color:var(--ink-soft); font-size:var(--label); text-transform:uppercase; letter-spacing:.14em}
.or::before,.or::after{content:""; flex:1; height:1px; background:var(--rule)}

.sso{display:grid; gap:.6rem}
.btn-alt{display:block; text-align:center; padding:.9rem 1rem; border:1px solid var(--rule);
  border-radius:2px; text-decoration:none; color:var(--ink); font-weight:600; font-size:var(--step--1);
  background:var(--paper)}
.btn-alt:hover{border-color:var(--accent); color:var(--accent)}

.reqbox{margin-top:1.8rem; border-top:1px solid var(--rule); border-bottom:none; padding:1.2rem 0 0}
.reqbox summary{font-size:var(--step--1)}
.reqbox .lede{margin:.9rem 0 1.2rem; font-size:var(--step--1)}
.reqbox form{margin-top:0}

.gate .fine{margin-top:2rem; font-size:var(--step--1); color:var(--ink-soft); line-height:1.5}
.gate .ok{border:1px solid var(--accent); background:var(--accent-soft); color:var(--accent);
  padding:1rem 1.1rem; border-radius:2px; font-size:var(--step--1); font-weight:600; margin-bottom:1.6rem}
/* ============================================================
   GATE-END
   ============================================================ */