/* ---------- tokens: light (bare :root defines everything) ---------- */
  :root{
    --ground:#eceef3;
    --surface:#fbfcfe;
    --ink:#11141b;
    --ink-soft:#555e70;
    --ink-faint:#858ea1;
    --rule:#d5dae4;
    --rule-soft:#e2e6ee;
    --accent:#4a51c4;
    --accent-quiet:#e6e7f8;
    --live:#1f7a52;
    --live-bg:#dcefe5;
    --planned:#6b6273;
    --planned-bg:#e8e5ec;
    --focus:#4a51c4;

    --display:"Bricolage Grotesque","Helvetica Neue",Helvetica,Arial,sans-serif;
    --body:"Source Serif 4",Georgia,"Times New Roman",serif;
    --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --ground:#0d1017;
      --surface:#141822;
      --ink:#e9ecf4;
      --ink-soft:#a0a9bd;
      --ink-faint:#737d92;
      --rule:#242b39;
      --rule-soft:#1c222d;
      --accent:#98a0f5;
      --accent-quiet:#1e2340;
      --live:#5fd6a0;
      --live-bg:#12301f;
      --planned:#b0a5bc;
      --planned-bg:#262231;
      --focus:#98a0f5;
    }
  }
  :root[data-theme="dark"]{
    --ground:#0d1017;
    --surface:#141822;
    --ink:#e9ecf4;
    --ink-soft:#a0a9bd;
    --ink-faint:#737d92;
    --rule:#242b39;
    --rule-soft:#1c222d;
    --accent:#98a0f5;
    --accent-quiet:#1e2340;
    --live:#5fd6a0;
    --live-bg:#12301f;
    --planned:#b0a5bc;
    --planned-bg:#262231;
    --focus:#98a0f5;
  }

  /* ---------- base ---------- */
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0;
    background:var(--ground);
    color:var(--ink);
    font-family:var(--body);
    font-size:17px;
    line-height:1.62;
    -webkit-font-smoothing:antialiased;
  }
  .sheet{
    max-width:60rem;
    margin:0 auto;
    padding-inline:20px;
    padding-block:clamp(2.5rem,7vw,5rem) clamp(2rem,5vw,3rem);
  }

  /* ---------- masthead ---------- */
  .masthead{
    display:flex;
    align-items:center;
    gap:12px;
    padding-bottom:clamp(2.5rem,7vw,4.5rem);
  }
  .masthead svg{flex:none;display:block}
  .wordmark{
    font-family:var(--mono);
    font-size:.7rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--ink-soft);
  }

  h1{
    margin:0 0 1.5rem;
    font-family:var(--display);
    font-weight:700;
    font-size:clamp(2.25rem,6.5vw,4rem);
    line-height:1.04;
    letter-spacing:-.022em;
    text-wrap:balance;
    max-width:16ch;
  }
  .lede{
    margin:0;
    max-width:44ch;
    font-size:clamp(1.08rem,2.6vw,1.24rem);
    line-height:1.55;
    color:var(--ink-soft);
  }
  .lede em{color:var(--ink);font-style:normal;font-weight:600}

  /* ---------- the register: rail + body rows ---------- */
  .row{
    display:grid;
    grid-template-columns:9.5rem 1fr;
    gap:0 2.5rem;
    border-top:1px solid var(--rule);
    padding-block:clamp(1.75rem,4vw,2.5rem);
  }
  .row:first-of-type{margin-top:clamp(3rem,8vw,5rem)}
  .rail{
    font-family:var(--mono);
    font-size:.68rem;
    font-weight:500;
    letter-spacing:.13em;
    text-transform:uppercase;
    color:var(--ink-faint);
    padding-top:.4rem;
  }
  .row > .col > p{margin:0 0 1rem;max-width:62ch;color:var(--ink-soft)}
  .row > .col > p:last-child{margin-bottom:0}

  /* ---------- operations ---------- */
  .ops{list-style:none;margin:0;padding:0;display:grid;gap:1.75rem}
  .op{display:grid;gap:.45rem}
  .op-head{display:flex;flex-wrap:wrap;align-items:center;gap:.65rem}
  .op h2{
    margin:0;
    font-family:var(--display);
    font-size:1.18rem;
    font-weight:700;
    letter-spacing:-.012em;
  }
  .status{
    font-family:var(--mono);
    font-size:.6rem;
    font-weight:500;
    letter-spacing:.11em;
    text-transform:uppercase;
    padding:.25rem .5rem;
    border-radius:3px;
    white-space:nowrap;
  }
  .status.is-active{color:var(--live);background:var(--live-bg)}
  .status.is-planned{color:var(--planned);background:var(--planned-bg)}
  .op p{margin:0;max-width:60ch;color:var(--ink-soft);font-size:1rem}

  /* ---------- contact ---------- */
  a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
  a:hover{color:var(--ink)}
  a:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
  .email{
    font-family:var(--display);
    font-size:clamp(1.15rem,3.6vw,1.6rem);
    font-weight:700;
    letter-spacing:-.015em;
    word-break:break-word;
    text-decoration:none;
    border-bottom:2px solid var(--accent-quiet);
    padding-bottom:2px;
  }
  .email:hover{border-bottom-color:var(--accent)}

  /* ---------- footer ---------- */
  footer{
    border-top:1px solid var(--rule);
    margin-top:clamp(1rem,3vw,2rem);
    padding-top:1.75rem;
    font-family:var(--mono);
    font-size:.68rem;
    letter-spacing:.06em;
    color:var(--ink-faint);
  }
  footer p{margin:0}

  /* ---------- narrow ---------- */
  @media (max-width:680px){
    .row{grid-template-columns:1fr;gap:.9rem}
    .rail{padding-top:0}
  }
  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
  }
  /* ---------- prose pages (privacy, legal) ---------- */
  .prose{max-width:64ch}
  .prose h2{
    margin:2.5rem 0 .85rem;
    font-family:var(--display);
    font-size:1.25rem;
    font-weight:700;
    letter-spacing:-.012em;
    text-wrap:balance;
  }
  .prose h2:first-of-type{margin-top:1.5rem}
  .prose p{margin:0 0 1rem;color:var(--ink-soft)}
  .prose ul{margin:0 0 1rem;padding-left:1.15rem;color:var(--ink-soft)}
  .prose li{margin-bottom:.45rem}
  .prose strong{color:var(--ink);font-weight:600}
  .prose .lead{
    font-size:1.12rem;
    color:var(--ink);
    border-left:3px solid var(--accent);
    padding-left:1rem;
    margin-bottom:2rem;
  }
  .meta{
    font-family:var(--mono);
    font-size:.68rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--ink-faint);
    margin-bottom:2rem;
  }
  .backlink{
    font-family:var(--mono);
    font-size:.68rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    text-decoration:none;
  }
  footer nav{margin-top:.5rem;display:flex;gap:1.25rem;flex-wrap:wrap}
  footer nav a{text-decoration:none}