:root{
    --ink:#0E1519;
    --bone:#E9E9E3;
    --bone-2:#DEDFD7;
    --slate:#55636B;
    --band:#9DBFBA;
    --signal:#1E3FCC;
    --rule:rgba(14,21,25,.14);

    --display:"Archivo",system-ui,sans-serif;
    --body:"Faustina",Georgia,serif;
    --mono:"Azeret Mono",ui-monospace,monospace;

    --gut:clamp(20px,5vw,64px);
    --wrap-max:1240px;
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;background:var(--bone);color:var(--ink);
    font-family:var(--body);font-size:clamp(16.5px,1.1vw,18.5px);line-height:1.62;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit}

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

  .eyebrow{
    font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--slate);margin:0 0 18px;
  }

  /* ---------- header ---------- */
  .masthead{border-bottom:1px solid var(--rule)}
  .masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:20px}
  .wordmark{
    font-family:var(--display);font-variation-settings:"wdth" 118,"wght" 800;
    font-size:15px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  }
  .wordmark span{color:var(--signal)}
  .masthead nav{display:flex;gap:26px;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em}
  .masthead nav a{text-decoration:none;color:var(--slate);padding-block:4px}
  .masthead nav a:hover{color:var(--ink)}
  @media(max-width:720px){.masthead nav a:not(.nav-contact){display:none}}

  /* ---------- hero ---------- */
  .hero{
    padding-block:clamp(48px,7vw,92px) clamp(28px,4vw,44px);
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:clamp(28px,5vw,88px);align-items:center;
  }
  .hero-mark{width:clamp(240px,26vw,430px);height:auto;justify-self:end}
  @media(max-width:900px){
    .hero{grid-template-columns:1fr}
    .hero-mark{display:none}
  }
  h1{
    font-family:var(--display);font-variation-settings:"wdth" 108,"wght" 760;
    font-size:clamp(36px,5.9vw,74px);line-height:.98;letter-spacing:-.022em;
    margin:0 0 26px;max-width:17ch;text-wrap:balance;
  }
  h1 em{font-style:normal;color:var(--signal)}
  .lede{font-size:clamp(19px,1.7vw,24px);line-height:1.5;max-width:56ch;color:#22303a;margin:0}

  /* ---------- signature chart ---------- */
  .plot{margin-top:clamp(36px,5vw,60px)}
  .plot-intro{
    font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--slate);margin:0 0 14px;
  }
  .plot-head{
    display:block;border-top:1px solid var(--ink);padding-top:12px;margin-bottom:16px;
  }
  .plot-head .plot-sub{margin-left:0;margin-top:4px}
  .plot-label{font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase}
  .plot-label b{font-weight:500;color:var(--signal)}
  .plot-sub{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--slate);margin-left:auto}
  .plot-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4vw,60px);align-items:start;margin-top:18px}
  @media(max-width:900px){.plot-grid{grid-template-columns:1fr;gap:22px}}
  .plot-map{max-width:600px}
  .chart{display:block;width:100%;height:auto}
  .st,.cd{transition:fill 1275ms ease, opacity 1050ms ease}
  .st{stroke:var(--bone);stroke-width:6}
  .cd{stroke:var(--bone);stroke-width:.7}
  .cdg{opacity:0;transform:scale(.9);transition:opacity 930ms ease, transform 1140ms cubic-bezier(.2,.7,.25,1)}
  .is-cd .st{opacity:0}
  .is-cd .cdg{opacity:1;transform:scale(1)}
  .caption{
    font-family:var(--mono);font-size:12.5px;color:var(--slate);
    margin:16px 0 0;line-height:1.78;letter-spacing:.01em;
  }
  .caption b{color:var(--ink);font-weight:500}
  .fig-q{
    font-family:var(--display);font-variation-settings:"wdth" 102,"wght" 600;
    font-size:15.5px;line-height:1.35;margin:0 0 16px;max-width:34ch;letter-spacing:-.004em;
    border-bottom:0;
  }
    .fig-note{
    font-family:var(--mono);font-size:10.5px;line-height:1.9;color:var(--slate);
    margin:26px 0 0;max-width:46ch;letter-spacing:.02em;
  }
  .fig-btn{
    font:inherit;color:var(--ink);background:none;border:0;border-bottom:1px solid var(--signal);
    padding:0;cursor:pointer;
  }
  .fig-btn:hover{color:var(--signal)}
  .legend{margin-top:28px;max-width:250px}
  .legend-bar{position:relative;height:9px;border-radius:1px;background:linear-gradient(90deg,#D4DDD6 0%,#6E9892 55%,#0E2D30 100%)}
  .legend-mark{position:absolute;top:-3px;bottom:-3px;left:47.1%;width:1px;background:var(--ink)}
  .legend-mid{color:var(--ink)}
  .legend-ticks{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--slate);margin-top:6px}

  /* ---------- research index ---------- */
  .idx{border-top:1px solid var(--rule)}
  .post{
    display:grid;grid-template-columns:minmax(0,8.5rem) minmax(0,1fr) minmax(0,9rem);
    gap:clamp(14px,3vw,40px);padding-block:30px;border-bottom:1px solid var(--rule);
    text-decoration:none;color:inherit;transition:background 160ms ease;
  }
  .post:hover{background:rgba(14,21,25,.035)}
  .post-meta{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--slate);line-height:1.9}
  .post-meta b{display:block;color:var(--signal);font-weight:500;text-transform:uppercase;letter-spacing:.11em;font-size:10.5px}
  .post h3{
    font-family:var(--display);font-variation-settings:"wdth" 104,"wght" 680;
    font-size:clamp(19px,1.85vw,23px);line-height:1.16;letter-spacing:-.012em;margin:0 0 9px;max-width:34ch;
  }
  .post p{margin:0;color:#26343d;max-width:56ch;font-size:.97em}
  .post-files{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--slate);line-height:2}
  .post-files span{display:block}
  .post:hover h3{color:var(--signal)}
  @media(max-width:820px){
    .post{grid-template-columns:1fr;gap:10px;padding-block:24px}
    .post-files{display:flex;gap:18px}
    .post-files span{display:inline}
  }
  .idx-more{
    display:inline-block;margin-top:28px;
    font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;
    text-decoration:none;border-bottom:1px solid var(--signal);padding-bottom:2px;
  }
  .idx-more:hover{color:var(--signal)}
  .idx-note{
    font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--slate);
    margin:26px 0 0;line-height:1.9;max-width:74ch;
  }

  /* ---------- generic section ---------- */
  section{padding-block:clamp(56px,7vw,104px)}
  /* Rules between light sections: a hairline with a short signal tick at the
     content edge — same idea as the single plotted point on the logo.
     The dark band separates itself. */
  #results,#work,.contact{position:relative;border-top:1px solid var(--rule)}
  #results::before,#work::before,.contact::before{
    content:"";position:absolute;top:-1px;height:3px;width:56px;
    background:var(--signal);
    left:max(var(--gut),calc(50% - (var(--wrap-max) / 2) + var(--gut)));
  }
  .band{background:var(--ink);color:var(--bone)}
  .band .eyebrow{color:var(--band)}
  h2{
    font-family:var(--display);font-variation-settings:"wdth" 106,"wght" 720;
    font-size:clamp(27px,3.4vw,44px);line-height:1.06;letter-spacing:-.015em;
    margin:0 0 34px;max-width:24ch;text-wrap:balance;
  }

  /* ---------- capabilities ---------- */
  .caps{display:grid;gap:0;border-top:1px solid var(--rule)}
  .cap{
    display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);
    gap:clamp(14px,3vw,48px);padding-block:26px;border-bottom:1px solid var(--rule);
  }
  .cap h3{
    font-family:var(--display);font-variation-settings:"wdth" 100,"wght" 660;
    font-size:16px;letter-spacing:.01em;margin:0;line-height:1.3;
  }
  .cap p{margin:0;color:#26343d;max-width:62ch}
  @media(max-width:640px){.cap{grid-template-columns:1fr;gap:8px}}
  .cap--demo{grid-template-columns:1fr;padding-top:6px}
  .cap--demo .plot{margin-top:0}

  /* ---------- three reasons ---------- */
  .reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.4vw,52px)}
  @media(max-width:820px){.reasons{grid-template-columns:1fr;gap:32px}}
  .reason{border-top:2px solid var(--band);padding-top:16px}
  .reason h3{
    font-family:var(--display);font-variation-settings:"wdth" 104,"wght" 700;
    font-size:clamp(19px,1.9vw,23px);line-height:1.15;margin:0 0 10px;letter-spacing:-.008em;
  }
  .reason p{margin:0;color:#C3CDCF;font-size:17px;line-height:1.55}

  /* ---------- contact ---------- */
  .contact{border-top:1px solid var(--rule)}
  .contact h2{margin-bottom:22px}
  .mail{
    font-family:var(--display);font-variation-settings:"wdth" 100,"wght" 700;
    font-size:clamp(23px,4.6vw,58px);letter-spacing:-.02em;text-decoration:none;
    display:inline-block;line-height:1.1;border-bottom:3px solid var(--signal);
    padding-bottom:4px;word-break:break-word;
  }
  .mail:hover{color:var(--signal)}
  .contact p{max-width:52ch;color:#26343d;margin:26px 0 0}

  .bio{max-width:52ch;color:#26343d;margin:18px 0 0}
  footer{border-top:1px solid var(--rule);padding-block:30px 46px}
  footer a{text-decoration:none}
  footer .wrap{display:flex;flex-wrap:wrap;gap:10px 32px;justify-content:flex-start}
  footer p{font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--slate);margin:0}

  /* ---------- release pages (/research/…/) ---------- */
  .release{padding-block:clamp(44px,6vw,80px) clamp(56px,7vw,104px)}
  .release-head .eyebrow{margin-bottom:22px}
  .release-head .eyebrow b{color:var(--signal);font-weight:500;letter-spacing:.14em}
  .release-head h1{font-size:clamp(30px,4.4vw,54px);max-width:24ch}
  .release-head .lede{font-size:clamp(18px,1.5vw,22px);max-width:58ch}

  .facts{
    display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(20px,3vw,48px);
    border-top:1px solid var(--ink);margin:clamp(32px,4.5vw,48px) 0 0;
  }
  .facts>div{border-bottom:1px solid var(--rule);padding-block:13px}
  .facts dt{
    font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--slate);
  }
  .facts dd{margin:5px 0 0;font-family:var(--mono);font-size:13px;letter-spacing:.02em;line-height:1.6}
  @media(max-width:720px){.facts{grid-template-columns:repeat(2,1fr)}}

  .files-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
  .file{
    font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;text-decoration:none;
    border:1px solid var(--ink);padding:11px 18px;
    display:inline-flex;gap:12px;align-items:baseline;
    transition:background 140ms ease,color 140ms ease;
  }
  .file span{color:var(--slate);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
  .file:hover{background:var(--ink);color:var(--bone)}
  .file:hover span{color:var(--band)}

  .release .idx{margin-top:clamp(36px,5vw,56px)}
  .release-body{max-width:920px;margin-top:clamp(44px,6vw,72px)}
  .release-body p{margin:0 0 19px;color:#22303a;max-width:62ch}
  .release-body h2{
    font-size:clamp(21px,2.2vw,27px);margin:46px 0 18px;max-width:36ch;
  }
  .release-body figure{margin:36px 0}
  .release-body figure img{display:block;width:100%;height:auto}
  .release-body figcaption{
    font-family:var(--mono);font-size:11.5px;color:var(--slate);
    margin-top:12px;line-height:1.8;letter-spacing:.02em;max-width:74ch;
  }
  .release-body figcaption b{color:var(--ink);font-weight:500}

  .release-body table{width:100%;border-collapse:collapse;margin:36px 0}
  .release-body caption{
    font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
    color:var(--slate);text-align:left;padding-bottom:12px;
  }
  .release-body th{
    font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
    color:var(--slate);font-weight:500;text-align:left;
    border-bottom:1px solid var(--ink);padding:0 14px 9px 0;
  }
  .release-body td{
    padding:10px 14px 10px 0;border-bottom:1px solid var(--rule);font-size:16px;
  }
  .release-body th.num,.release-body td.num{
    text-align:right;font-family:var(--mono);padding-right:0;padding-left:14px;
  }
  .release-body td.num{font-size:13.5px;letter-spacing:.02em}

  .cite{border-top:1px solid var(--rule);margin-top:clamp(44px,6vw,72px);padding-top:26px}
  .cite .eyebrow{margin-bottom:10px}
  .cite p:not(.eyebrow){
    font-family:var(--mono);font-size:12.5px;line-height:1.9;letter-spacing:.02em;
    margin:0;max-width:74ch;
  }

  :focus-visible{outline:2px solid var(--signal);outline-offset:3px}
  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .is-live .bar{transition:none}
  }