:root{
    /* Palette — ink-led foundation, bronze human accent, one restrained cool signal */
    --ink:        #0C1216;   /* deep, cool-undertone near-black — authority */
    --ink-2:      #121E25;   /* raised dark surface */
    --ink-3:      #1B2A32;   /* hairlines / borders on dark */
    --limestone:  #E7E2D6;   /* warm neutral light surface */
    --bone:       #F2EFE8;   /* lightest paper */
    --bronze:     #C0894A;   /* human/warm accent */
    --bronze-lo:  #A5712C;   /* accent for text on light surfaces (contrast) */
    --bronze-hi:  #D7A867;   /* small highlights on dark */
    --signal:     #6FA39B;   /* muted verdigris — data / learning loop ONLY */
    --ink-70:     rgba(231,226,214,.70);
    --ink-45:     rgba(231,226,214,.45);
    --paper-70:   rgba(12,18,22,.68);
    --paper-45:   rgba(12,18,22,.48);

    --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
    --sans:  "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

    --edge: clamp(1.25rem, 5vw, 6rem);   /* page gutter */
    --maxw: 1320px;
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

  body{
    margin:0;
    background:var(--ink);
    color:var(--limestone);
    font-family:var(--sans);
    font-size:1.0625rem;
    line-height:1.62;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  a{ color:inherit; text-decoration:none; }
  h1,h2,h3{ margin:0; font-weight:500; line-height:1.04; letter-spacing:-0.015em; }
  p{ margin:0; }
  img{ max-width:100%; display:block; }

  .wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--edge); }

  /* ---- shared type devices ---- */
  .kicker{
    font-family:var(--mono);
    font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
    font-weight:500; color:var(--bronze);
    display:inline-flex; align-items:center; gap:.6rem;
  }
  .kicker::before{ content:""; width:1.6rem; height:1px; background:var(--bronze); opacity:.7; }
  .kicker--dark{ color:var(--bronze-lo); }
  .kicker--dark::before{ background:var(--bronze-lo); }

  .display{ font-family:var(--serif); font-weight:400; }
  .tm{ font-size:.62em; vertical-align:.55em; font-family:var(--sans); font-weight:600; letter-spacing:0; }

  .btn{
    display:inline-flex; align-items:center; gap:.55rem;
    font-family:var(--sans); font-weight:600; font-size:.95rem; letter-spacing:.01em;
    padding:.85rem 1.35rem; border-radius:2px; border:1px solid transparent;
    cursor:pointer; transition:background .25s ease, color .25s ease, transform .25s ease, border-color .25s ease;
  }
  .btn .arw{ transition:transform .25s ease; }
  .btn:hover .arw{ transform:translateX(4px); }
  .btn--primary{ background:var(--bronze); color:var(--ink); }
  .btn--primary:hover{ background:var(--bronze-hi); }
  .btn--ghost{ background:transparent; color:var(--limestone); border-color:var(--ink-3); }
  .btn--ghost:hover{ border-color:var(--bronze); color:var(--bronze-hi); }
  .btn--onlight{ background:var(--ink); color:var(--bone); }
  .btn--onlight:hover{ background:#1a2830; }

  :where(a,button,input,textarea,select,[tabindex]):focus-visible{
    outline:2px solid var(--bronze-hi); outline-offset:3px; border-radius:2px;
  }

  /* ---- sections base ---- */
  .sec{ padding-block:clamp(3.5rem, 6.5vw, 6rem); position:relative; }
  .sec--light{ background:var(--limestone); color:var(--ink); }
  .sec--bone{ background:var(--bone); color:var(--ink); }
  .sec--light .paper-muted, .sec--bone .paper-muted{ color:var(--paper-70); }
  .lede{ font-size:clamp(1.05rem,1.6vw,1.3rem); line-height:1.55; max-width:46ch; }

  /* ============ HEADER ============ */
  header.site{
    position:sticky; top:0; z-index:80;
    background:color-mix(in srgb, var(--bone) 90%, transparent);
    backdrop-filter:saturate(140%) blur(10px);
    border-bottom:1px solid rgba(12,18,22,.08);
    transition:border-color .3s ease, box-shadow .3s ease, background .3s ease;
  }
  header.site.scrolled{ border-bottom-color:rgba(12,18,22,.12); box-shadow:0 8px 28px -20px rgba(12,18,22,.45); }
  .nav{ display:flex; align-items:center; gap:2rem; height:74px; }
  .brand{ font-family:var(--serif); font-weight:500; font-size:1.4rem; letter-spacing:-.02em; color:var(--ink); white-space:nowrap; }
  .brand b{ color:var(--bronze-lo); font-weight:500; }
  .nav-links{ display:flex; align-items:center; gap:1.75rem; margin-left:auto; }
  .nav-links a, .nav-links button.navitem{
    font-size:.92rem; font-weight:500; color:var(--paper-70);
    background:none; border:0; font-family:var(--sans); cursor:pointer; padding:0;
    display:inline-flex; align-items:center; gap:.35rem; transition:color .2s ease;
  }
  .nav-links a:hover, .nav-links button.navitem:hover{ color:var(--ink); }