/* ---- tokens: complete light palette on bare :root ---- */
:root{
  --bg:#ECEEE8;
  --surface:#F8F9F5;
  --surface-2:#E3E6DE;
  --text:#14161B;
  --text-soft:#4D5561;
  --text-faint:#78818E;
  --line:#D2D6CB;
  --line-strong:#B6BCAE;
  --prop:#9D6D16;
  --prop-soft:rgba(157,109,22,.13);
  --opp:#245F66;
  --opp-soft:rgba(36,95,102,.13);
  --shadow:0 1px 0 rgba(20,22,27,.03), 0 14px 34px -18px rgba(20,22,27,.28);

  /* speaker ramp — amber/teal-led, no red, no party blue. never used for exactly two. */
  --s1:#9D6D16;
  --s2:#245F66;
  --s3:#B08D3E;
  --s4:#3C7A6E;
  --s5:#8A7A3E;
  --s6:#4F7A8C;
  --s7:#C79A4B;

  --font-display:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua","URW Palladio L",Georgia,serif;
  --font-body:ui-sans-serif,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  --measure:64ch;
  --pad:clamp(1.15rem,4vw,2.75rem);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#101216;
    --surface:#171A20;
    --surface-2:#1E222A;
    --text:#E7E9E3;
    --text-soft:#A3ABB6;
    --text-faint:#7A8391;
    --line:#2A2F38;
    --line-strong:#3A414C;
    --prop:#D9A445;
    --prop-soft:rgba(217,164,69,.15);
    --opp:#5AA3AB;
    --opp-soft:rgba(90,163,171,.15);
    --shadow:0 1px 0 rgba(0,0,0,.3), 0 14px 34px -18px rgba(0,0,0,.7);
    --s1:#D9A445; --s2:#5AA3AB; --s3:#D9C07A; --s4:#6FB3A3; --s5:#C7B36B; --s6:#8FB8C9; --s7:#E8C878;
  }
}
:root[data-theme="dark"]{
  --bg:#101216;
  --surface:#171A20;
  --surface-2:#1E222A;
  --text:#E7E9E3;
  --text-soft:#A3ABB6;
  --text-faint:#7A8391;
  --line:#2A2F38;
  --line-strong:#3A414C;
  --prop:#D9A445;
  --prop-soft:rgba(217,164,69,.15);
  --opp:#5AA3AB;
  --opp-soft:rgba(90,163,171,.15);
  --shadow:0 1px 0 rgba(0,0,0,.3), 0 14px 34px -18px rgba(0,0,0,.7);
  --s1:#D9A445; --s2:#5AA3AB; --s3:#D9C07A; --s4:#6FB3A3; --s5:#C7B36B; --s6:#8FB8C9; --s7:#E8C878;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:clamp(15px,.55vw + 13.6px,16.5px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
.wrap{width:min(1140px,100% - var(--pad)*2);margin-inline:auto}

a{color:inherit}
:focus-visible{outline:2px solid var(--prop);outline-offset:3px;border-radius:2px}

.label{
  font-family:var(--font-body);
  font-size:.665rem;
  font-weight:650;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--text-faint);
}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ---------- header ---------- */
.masthead{border-bottom:1px solid var(--line);background:var(--bg)}
.masthead-in{display:flex;align-items:center;gap:1.5rem;padding-block:1.05rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-family:var(--font-display);font-size:1.3rem;letter-spacing:.055em}
.brand svg{display:block;flex:none}
.nav{margin-left:auto;display:flex;align-items:center;gap:1.5rem}
.nav a{text-decoration:none;color:var(--text-soft);font-size:.88rem}
.nav a:hover{color:var(--text)}
.nav a.current{color:var(--text)}
@media (max-width:860px){.nav .nav-link{display:none}}

.btn{
  display:inline-block;border:1px solid transparent;border-radius:3px;
  padding:.56rem 1.05rem;font-size:.875rem;font-weight:600;
  text-decoration:none;cursor:pointer;font-family:inherit;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.btn-primary{background:var(--text);color:var(--bg)}
.btn-primary:hover{background:var(--prop);color:var(--bg)}
.btn-quiet{border-color:var(--line-strong);color:var(--text)}
.btn-quiet:hover{border-color:var(--text);background:var(--surface)}

/* ---------- hero ---------- */
.hero{padding-block:clamp(3rem,7vw,5.5rem) clamp(2.5rem,5vw,4rem)}

.eyebrow{display:flex;align-items:center;gap:.7rem;margin-bottom:1.5rem}
.eyebrow::after{content:"";height:1px;flex:1;background:var(--line)}

h1{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(2.35rem,5.4vw,3.9rem);
  line-height:1.06;
  letter-spacing:-.012em;
  text-wrap:balance;
  margin:0 0 1.3rem;
}
h1 em{font-style:italic;color:var(--prop)}
.lede{font-size:1.075rem;color:var(--text-soft);max-width:var(--measure);margin:0 0 2rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}

.creds{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
@media (max-width:700px){.creds{grid-template-columns:1fr}}
.creds dt{margin-bottom:.3rem}
.creds dd{margin:0;font-size:.895rem;color:var(--text-soft);line-height:1.45}

/* ---------- status chips ---------- */
.chip{
  font-size:.66rem;font-weight:650;letter-spacing:.1em;text-transform:uppercase;
  padding:.2rem .48rem;border-radius:2px;border:1px solid var(--line-strong);color:var(--text-faint);white-space:nowrap;
}
.chip-live{border-color:var(--opp);color:var(--opp)}
.chip-rough{border-color:var(--opp);color:var(--opp);border-style:dashed}
.chip-partial{border-color:var(--text-faint);color:var(--text-soft)}
.chip-specd{border-color:var(--prop);color:var(--prop);border-style:dashed}
.chip-vision{border-style:dashed;color:var(--text-faint)}
.chip-warn{border-color:var(--prop);color:var(--prop)}
.row h3 .chip{margin-left:.55rem;vertical-align:2px}

/* ---------- generic section ---------- */
.section{padding-block:clamp(2.75rem,5.5vw,4.5rem);border-top:1px solid var(--line)}
.section-head{margin-bottom:2rem;max-width:var(--measure)}
h2{font-family:var(--font-display);font-weight:400;font-size:clamp(1.6rem,3vw,2.15rem);line-height:1.14;letter-spacing:-.008em;text-wrap:balance;margin:.85rem 0 .7rem}
.section-head p{margin:0;color:var(--text-soft)}
.section-head .chip{margin-bottom:.9rem;display:inline-block}

/* ruled rows */
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:minmax(0,16rem) minmax(0,1fr);gap:clamp(.6rem,3vw,2.5rem);padding-block:1.25rem;border-bottom:1px solid var(--line)}
@media (max-width:700px){.row{grid-template-columns:1fr;gap:.4rem}}
.row h3{margin:0;font-size:1rem;font-weight:600;font-family:var(--font-body);letter-spacing:.002em}
.row p{margin:.25rem 0 0;color:var(--text-soft);font-size:.945rem;max-width:58ch}
.row .rule{font-family:var(--font-mono);font-size:.79rem;color:var(--text-faint);margin-top:.5rem}

/* ---------- tables (build status: pillars) ---------- */
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:4px;background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:520px}
caption{text-align:left;padding:.9rem 1.1rem;border-bottom:1px solid var(--line);color:var(--text-faint);font-size:.8rem}
th,td{padding:.66rem 1.1rem;text-align:left;border-bottom:1px solid var(--line);font-size:.9rem}
thead th{font-size:.665rem;font-weight:650;letter-spacing:.13em;text-transform:uppercase;color:var(--text-faint)}
tbody tr:last-child td{border-bottom:0}

/* ---------- the non-negotiable principle ---------- */
.principle{background:var(--surface);border:1px solid var(--line);border-radius:4px;box-shadow:var(--shadow);padding:clamp(1.6rem,4vw,2.4rem)}
.principle blockquote{margin:0 0 1.3rem;font-family:var(--font-display);font-size:clamp(1.25rem,2.6vw,1.6rem);line-height:1.28;font-style:italic}
.principle ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.55rem}
.principle li{font-family:var(--font-mono);font-size:.84rem;color:var(--text-soft);padding-left:1.15rem;position:relative}
.principle li::before{content:"\2014";position:absolute;left:0;color:var(--text-faint)}

/* ---------- the three ideas ---------- */
.ideas{display:flex;flex-direction:column;gap:1.75rem}
.idea{border:1px solid var(--line);border-radius:4px;background:var(--surface);box-shadow:var(--shadow);padding:clamp(1.4rem,4vw,2rem)}
.idea-head{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;margin-bottom:.7rem}
.idea-head h3{margin:0;font-family:var(--font-display);font-weight:400;font-size:1.4rem}
.idea p{margin:0 0 1.1rem;color:var(--text-soft);max-width:66ch}
.idea p:last-of-type{margin-bottom:0}
.idea-visual{margin-top:1.3rem}
.idea-visual .cap{font-family:var(--font-mono);font-size:.72rem;color:var(--text-faint);margin-top:.7rem}

/* scatter: performance vs support */
.scatter{position:relative;aspect-ratio:16/9;max-height:280px;background:var(--surface-2);border:1px solid var(--line);border-radius:4px;padding:1.6rem 1.5rem 2.2rem 2.3rem}
.scatter .plot{position:absolute;inset:1.6rem 1.5rem 2.2rem 2.3rem;border-left:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.scatter .dot{position:absolute;width:12px;height:12px;border-radius:50%;transform:translate(-50%,50%);box-shadow:0 0 0 3px var(--surface-2)}
.scatter .axis-x{position:absolute;bottom:.4rem;left:50%;transform:translateX(-50%);color:var(--text-faint);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;font-weight:650}
.scatter .axis-y{position:absolute;left:.3rem;top:50%;transform:translateY(-50%) rotate(-90deg);transform-origin:left center;color:var(--text-faint);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;font-weight:650}

/* confidence veil */
.veil-demo{position:relative;background:var(--surface-2);border:1px solid var(--line);border-radius:4px;padding:1.5rem 1.6rem;overflow:hidden}
.veil-demo .hatch{
  position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(135deg, var(--text-faint) 0, var(--text-faint) 1px, transparent 1px, transparent 11px);
  opacity:.28;
}
.veil-rows{display:flex;flex-direction:column;gap:.75rem;position:relative}
.veil-idx{display:flex;align-items:center;gap:.9rem;font-size:.85rem}
.veil-idx .name{width:9.5rem;flex:none;color:var(--text-soft)}
.veil-idx .track{flex:1;height:7px;background:var(--surface);border-radius:2px;overflow:hidden}
.veil-idx .track span{display:block;height:100%;background:var(--text-faint);border-radius:2px}
.veil-caption{font-family:var(--font-mono);font-size:.78rem;color:var(--text-faint);margin-top:1.1rem;text-align:center;position:relative}

/* ---------- room: 5-7 speakers, never a duel ---------- */
.room{display:flex;flex-direction:column;gap:.6rem}
.room-row{display:grid;grid-template-columns:9.5rem 1fr auto;gap:.7rem;align-items:center;font-size:.82rem}
@media (max-width:560px){.room-row{grid-template-columns:6.5rem 1fr auto}}
.room-row .who{color:var(--text-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.room-bar{height:8px;border-radius:2px;background:var(--surface-2);overflow:hidden}
.room-bar span{display:block;height:100%;border-radius:2px}
.room-row .pct{font-family:var(--font-mono);color:var(--text-faint);font-size:.78rem;text-align:right;white-space:nowrap}

/* ---------- close ---------- */
.close{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:center;padding:clamp(1.6rem,4vw,2.4rem);background:var(--surface);border:1px solid var(--line);border-radius:4px}
@media (max-width:760px){.close{grid-template-columns:1fr}}
.close h2{margin-top:0}
.close p{margin:0;color:var(--text-soft);max-width:52ch}

/* ---------- interest signup ---------- */
.signup{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,22rem);gap:clamp(1.6rem,4vw,3rem);
  align-items:start;padding:clamp(1.6rem,4vw,2.4rem);background:var(--surface);
  border:1px solid var(--line);border-radius:4px;box-shadow:var(--shadow)}
@media (max-width:820px){.signup{grid-template-columns:1fr}}
.signup h2{margin-top:.7rem}
.signup-copy p{margin:0;color:var(--text-soft);max-width:48ch}
.signup-copy .fine{margin-top:.9rem;font-size:.85rem;color:var(--text-faint)}

.signup-form{display:flex;flex-direction:column;gap:.9rem}
.field{display:flex;flex-direction:column;gap:.35rem}
.field label{font-size:.665rem;font-weight:650;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-faint)}
.field input{
  font:inherit;font-size:.94rem;padding:.55rem .7rem;color:var(--text);
  background:var(--bg);border:1px solid var(--line-strong);border-radius:3px;
  transition:border-color .16s ease;width:100%;
}
.field input:hover{border-color:var(--text-faint)}
.field input:focus{outline:2px solid var(--prop);outline-offset:1px;border-color:var(--prop)}
.field input[aria-invalid="true"]{border-color:var(--prop)}
.field .err{margin:0;font-size:.82rem;color:var(--prop);min-height:0}
.field .err:empty{display:none}

/* Honeypot. Kept out of view without display:none — some bots skip hidden
   fields, and this stays in the DOM and in the form payload. Also removed from
   the tab order and from the accessibility tree so no real person meets it. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.signup-form .btn{align-self:flex-start;min-width:11rem;text-align:center;position:relative}
.signup-form .btn[disabled]{opacity:.6;cursor:not-allowed}
.signup-form .btn .spin{
  display:none;width:.85em;height:.85em;margin-right:.5em;vertical-align:-.08em;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  animation:spin .6s linear infinite;
}
.signup-form.is-busy .btn .spin{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.signup-form .btn .spin{animation-duration:2s}}

.form-status{margin:0;font-size:.88rem;min-height:1.2em}
.form-status:empty{min-height:0}
.form-status.ok{color:var(--opp)}
.form-status.bad{color:var(--prop)}

/* Success replaces the form outright — leaving a filled-in form next to a
   "thanks" message invites a second submission. */
.signup-done{display:none;border:1px solid var(--opp);border-radius:4px;
  padding:1.2rem 1.3rem;background:var(--opp-soft)}
.signup-form.is-done{display:none}
.signup-form.is-done + .signup-done{display:block}
.signup-done h3{margin:0 0 .4rem;font-family:var(--font-display);font-weight:400;font-size:1.25rem}
.signup-done p{margin:0;color:var(--text-soft);font-size:.9rem}

footer{border-top:1px solid var(--line);padding-block:1.9rem;margin-top:clamp(2.5rem,6vw,4rem)}
.foot-in{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;color:var(--text-faint);font-size:.85rem}
.foot-in nav{margin-left:auto;display:flex;gap:1.3rem;flex-wrap:wrap}
.foot-in a{text-decoration:none}
.foot-in a:hover{color:var(--text)}

/* ---------- raw notes (temporary) ---------- */
.raw-notes{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:1.5rem 1.6rem;box-shadow:var(--shadow)}
.raw-notes .tag{margin-bottom:1.1rem;display:flex;align-items:center;gap:.6rem}
.raw-notes .terms{font-size:.86rem;font-style:italic;color:var(--text-soft);border-left:2px solid var(--line-strong);padding-left:.9rem;margin:0 0 1.6rem}
.raw-notes .terms strong{font-style:normal}
.raw-notes h4{margin:1.5rem 0 .4rem;font-family:var(--font-body);font-size:.85rem;font-weight:650;color:var(--text)}
.raw-notes .entry-date + h4{margin-top:.2rem}
.raw-notes p{margin:0 0 1.1rem;color:var(--text-soft);font-size:.9rem;line-height:1.65}
.raw-notes p:last-child{margin-bottom:0}
.raw-notes ul{margin:.3rem 0 1.1rem;padding-left:1.15rem;color:var(--text-soft);font-size:.9rem;line-height:1.6}
.raw-notes li{margin-bottom:.3rem}
.raw-notes .entry-date{margin:1.8rem 0 .5rem}
.raw-notes .entry-date:first-child{margin-top:0}

/* ---------- work-in-progress / not-yet placeholder ---------- */
.wip{background:var(--surface);border:1px dashed var(--line-strong);border-radius:4px;padding:clamp(1.4rem,4vw,2rem);text-align:center}
.wip .chip{display:inline-block;margin-bottom:.9rem}
.wip p{margin:0 auto;max-width:52ch;color:var(--text-soft);font-size:.92rem}

/* ---------- tag legend (build status) ---------- */
.tag-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.9rem 1.4rem;margin-top:1.6rem}
.tag-legend div{display:flex;align-items:baseline;gap:.6rem}
.tag-legend .chip{flex:none}
.tag-legend span.desc{color:var(--text-soft);font-size:.85rem}

/* ---------- limits callout ---------- */
.limits{border-top:1px solid var(--line)}
.limits .row p{max-width:64ch}