/* SELF-HOSTED-FONTS-START */
/* Self-hosted type. Latin subsets only, from Google Fonts' own woff2 builds of
   Adobe's variable faces. Both are SIL Open Font License 1.1; the licence texts
   sit beside the files in fonts/. Self-hosted so that opening a page makes no
   request to a third party. */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonts/source-sans-3-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonts/source-sans-3-latin-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Code Pro";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonts/source-code-pro-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
/* SELF-HOSTED-FONTS-END */

:root{
  --ground:#0C0D0E;
  --panel:#141516;
  --panel-2:#18191A;
  --rule:#2A2B2C;
  --rule-strong:#3A3B3C;
  --ink:#FFFFFF;
  --ink-2:#A3A0A0;
  --ink-3:#6E6C6C;
  --accent:#EF5F64;
  --accent-deep:#E25A5F;
  --accent-tint:rgba(239,95,100,0.10);

  --sans:"Source Sans 3","Source Sans Pro",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"Source Code Pro",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --t-display:clamp(2.6rem,6.2vw,4.75rem);
  --t-h2:clamp(1.7rem,3.2vw,2.6rem);
  --t-h3:1.3125rem;
  --t-lead:clamp(1.0625rem,1.6vw,1.25rem);
  --t-body:1rem;
  --t-small:0.875rem;
  --t-label:0.6875rem;

  --gap:clamp(3.5rem,7vw,6.5rem);
  --shell:76rem;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:1.5rem}
@media(min-width:48rem){.shell{padding-inline:2.5rem}}

h1,h2,h3{margin:0;font-weight:900;line-height:1.04;letter-spacing:-0.022em;text-wrap:balance}
h3{font-size:var(--t-h3);font-weight:700;letter-spacing:-0.01em;line-height:1.25}
p{margin:0}
a{color:inherit}

.label{
  font-family:var(--mono);
  font-size:var(--t-label);
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:600;
}
.muted{color:var(--ink-2)}

/* ---------- strata: the mark's own banding, used as a rule ---------- */
.strata{height:9px;display:block;width:100%;border:0}
.strata rect{fill:var(--accent)}

/* ---------- header ---------- */
header{border-bottom:1px solid var(--rule);position:sticky;top:0;background:rgba(12,13,14,0.88);backdrop-filter:blur(10px);z-index:20}
.bar{display:flex;align-items:center;gap:2rem;height:74px}
.brand{display:flex;align-items:center;gap:0.6rem;text-decoration:none;flex:none}
.brand span{font-size:1.375rem;font-weight:700;letter-spacing:-0.02em}
nav{display:none;gap:1.75rem;margin-left:auto;font-size:0.9375rem}
nav a{color:var(--ink-2);text-decoration:none;font-weight:400}
nav a:hover{color:var(--ink)}
@media(min-width:60rem){nav{display:flex}}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:0.9375rem;font-weight:600;
  padding:0.6875rem 1.3125rem;text-decoration:none;border:1px solid transparent;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.btn-primary{background:var(--accent);color:#12100F}
.btn-primary:hover{background:#F5757A}
.btn-ghost{border-color:var(--rule-strong);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink-2)}
.bar .btn{margin-left:auto;flex:none}
@media(min-width:60rem){.bar .btn{margin-left:0}}

/* ---------- hero ---------- */
.hero{padding-block:clamp(3.5rem,7vw,6rem) var(--gap)}
.hero-grid{display:grid;gap:clamp(2.75rem,5vw,4rem);align-items:start}
@media(min-width:64rem){.hero-grid{grid-template-columns:1.05fr 0.95fr;gap:4.5rem}}
h1{font-size:var(--t-display)}
.hero .lead{font-size:var(--t-lead);line-height:1.5;margin-top:1.75rem;max-width:34ch;color:var(--ink)}
.hero .sub{margin-top:1.125rem;max-width:44ch;color:var(--ink-2);line-height:1.6}
.actions{display:flex;flex-wrap:wrap;gap:0.75rem;margin-top:2.25rem}
.strip{display:flex;flex-wrap:wrap;gap:1rem 3rem;margin-top:2.75rem;padding-top:1.75rem;border-top:1px solid var(--rule)}
.strip div{display:flex;flex-direction:column;gap:0.25rem}
.strip b{font-size:1.5rem;font-weight:900;letter-spacing:-0.03em;color:var(--accent);font-variant-numeric:tabular-nums;line-height:1}
.strip span{font-size:var(--t-small);color:var(--ink-2)}

/* ---------- predicate ---------- */
.pred{background:var(--panel);border:1px solid var(--rule)}
.pred-head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:0.875rem 1.25rem;border-bottom:1px solid var(--rule);
}
.pred-head .name{font-family:var(--mono);font-size:0.8125rem;color:var(--ink-2)}
.pred-body{padding:1.5rem 1.25rem;overflow-x:auto}
.pred-body pre{
  margin:0;font-family:var(--mono);font-size:0.875rem;line-height:1.85;
  color:var(--ink);white-space:pre;
}
.op{color:var(--accent)}
.cm{color:var(--ink-3)}
.pred-foot{padding:0.9375rem 1.25rem;border-top:1px solid var(--rule);font-size:var(--t-small);color:var(--ink-2)}

/* ---------- generic band ---------- */
.band{border-top:1px solid var(--rule);padding-block:var(--gap)}
.band-fill{background:var(--panel-2)}
.head{max-width:46ch}
.head h2{font-size:var(--t-h2);margin-top:0.875rem}
.head p{margin-top:1.125rem;color:var(--ink-2);max-width:60ch}

/* ---------- properties: strata rows, not cards ---------- */
.props{margin-top:3.25rem;display:grid;gap:0}
.prop{
  display:grid;gap:0.5rem 2.5rem;padding-block:1.75rem;
  border-top:1px solid var(--rule);align-items:start;
}
.prop:last-child{border-bottom:1px solid var(--rule)}
@media(min-width:56rem){.prop{grid-template-columns:1.5rem 20rem 1fr;gap:0 2.5rem;padding-block:2rem}}
.prop .tick{font-family:var(--mono);font-size:0.8125rem;color:var(--accent);padding-top:0.25rem}
.prop p{color:var(--ink-2);max-width:56ch}

/* ---------- numbers ---------- */
.figs{display:grid;gap:2.5rem;margin-top:2.75rem}
@media(min-width:44rem){.figs{grid-template-columns:1fr 1fr;gap:3rem}}
.fig .n{font-size:clamp(2.75rem,5.5vw,3.75rem);font-weight:900;letter-spacing:-0.035em;line-height:1;font-variant-numeric:tabular-nums}
.fig .n em{font-style:normal;color:var(--accent)}
.fig p{margin-top:0.875rem;color:var(--ink-2);max-width:38ch}

.tablewrap{margin-top:3rem;overflow-x:auto;border:1px solid var(--rule)}
table{border-collapse:collapse;width:100%;min-width:38rem;font-size:var(--t-small)}
thead th{
  text-align:left;font-family:var(--mono);font-size:var(--t-label);letter-spacing:0.14em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600;
  padding:0.875rem 1.125rem;border-bottom:1px solid var(--rule);background:var(--panel);
}
tbody td{padding:0.8125rem 1.125rem;border-bottom:1px solid var(--rule);color:var(--ink-2);font-variant-numeric:tabular-nums}
tbody tr:last-child td{border-bottom:0}
tbody tr.ours td{color:var(--ink);background:var(--accent-tint);font-weight:600}
tbody tr.ours td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
td.sys{color:var(--ink);font-weight:600}
tbody tr.ours td.sys{color:var(--ink)}
.context{margin-top:1.25rem;font-size:var(--t-small);color:var(--ink-3);max-width:70ch}

.uses{display:grid;gap:0;margin-top:3rem}
@media(min-width:56rem){.uses{grid-template-columns:repeat(3,1fr);gap:0 2.5rem}}
.uses div{padding-block:1.5rem;border-top:1px solid var(--rule)}
.uses h3{font-size:1.0625rem;line-height:1.35}
.uses p{margin-top:0.5rem;font-size:var(--t-small);color:var(--ink-2)}

.demo{margin-top:3.5rem;border-left:3px solid var(--accent);padding:0.25rem 0 0.25rem 1.75rem}
.demo-line{font-size:clamp(1.1875rem,2.3vw,1.625rem);font-weight:400;line-height:1.4;margin-top:0.875rem;max-width:44ch;letter-spacing:-0.015em}
.demo-line b{font-weight:900;color:var(--accent)}
.demo-note{margin-top:1rem;color:var(--ink-2);max-width:52ch;font-size:var(--t-small)}

/* ---------- cta ---------- */
.cta{border-top:1px solid var(--rule);background:var(--panel-2);padding-block:clamp(3rem,6vw,4.5rem)}
.cta-in{display:grid;gap:2rem;align-items:center}
@media(min-width:52rem){.cta-in{grid-template-columns:1fr auto;gap:3rem}}
.cta h2{font-size:clamp(1.5rem,2.8vw,2.125rem);max-width:24ch}
.cta p{margin-top:0.875rem;color:var(--ink-2);max-width:52ch}
form{display:flex;flex-wrap:wrap;gap:0.625rem;position:relative;max-width:26rem}
input[type=email]{
  font-family:var(--sans);font-size:0.9375rem;padding:0.6875rem 0.9375rem;
  background:var(--ground);border:1px solid var(--rule-strong);color:var(--ink);min-width:16rem;flex:1;
}
input[type=email]::placeholder{color:var(--ink-3)}
input[type=email]:focus{outline:2px solid var(--accent);outline-offset:2px;border-color:transparent}
input[type=email]:disabled{opacity:0.6}
.cta .btn{white-space:nowrap;cursor:pointer}
.cta .btn:disabled{opacity:0.55;cursor:not-allowed}
.cta .btn:active:not(:disabled){transform:translateY(1px)}
.hp{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.form-status{
  flex:1 0 100%;
  margin:0;
  font-size:var(--t-small);
  color:var(--ink-2);
}
.form-status[hidden]{display:none}
.form-status.is-error{color:var(--accent)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--rule);padding-block:2.75rem}
.foot{display:flex;flex-wrap:wrap;gap:1.5rem 2rem;align-items:center;justify-content:space-between}
.foot p{font-size:var(--t-small);color:var(--ink-3)}
.foot nav{display:flex;margin-left:0;gap:1.5rem;font-size:var(--t-small)}
.foot nav a{color:var(--ink-3)}
.foot nav a:hover{color:var(--ink-2)}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:#12100F}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- interior pages ---------- */
.phero{padding-block:clamp(3rem,6vw,5rem) clamp(2.5rem,5vw,4rem)}
.phero h1{font-size:clamp(2.25rem,5vw,3.75rem);max-width:18ch}
.phero .lead{font-size:var(--t-lead);line-height:1.5;margin-top:1.5rem;max-width:52ch;color:var(--ink)}

/* numbered triptych: statement / witness / proof */
.trio{display:grid;gap:0;margin-top:3rem}
@media(min-width:56rem){.trio{grid-template-columns:repeat(3,1fr);gap:0 2.5rem}}
.trio > div{border-top:2px solid var(--accent);padding-block:1.5rem}
.trio h3{font-size:1.125rem}
.trio p{margin-top:0.625rem;font-size:var(--t-small);color:var(--ink-2)}

/* what stops existing */
.gone{margin-top:2.75rem;display:grid;gap:0}
.gone div{display:grid;gap:0.375rem 2rem;padding-block:1.25rem;border-top:1px solid var(--rule)}
.gone div:last-child{border-bottom:1px solid var(--rule)}
@media(min-width:52rem){.gone div{grid-template-columns:16rem 1fr;gap:0 2.5rem;align-items:baseline}}
.gone b{font-weight:700;font-size:1rem}
.gone span{color:var(--ink-2);font-size:var(--t-small)}

/* citation cards */
.cites{display:grid;gap:1.25rem;margin-top:3rem}
.cite{border:1px solid var(--rule);background:var(--panel);padding:1.5rem 1.5rem 1.625rem}
.cite .ref{font-family:var(--mono);font-size:var(--t-small);color:var(--accent);word-break:break-word}
.cite h3{margin-top:0.75rem;font-size:1.1875rem;max-width:40ch}
.cite .who{margin-top:0.5rem;font-size:var(--t-small);color:var(--ink-3)}
.cite p{margin-top:1rem;color:var(--ink-2);max-width:66ch}
.cite a{color:var(--accent);text-underline-offset:3px}

/* mapping table, logic to polynomial */
.map{margin-top:2rem;border:1px solid var(--rule);max-width:34rem}
.map table{min-width:0}

.note{margin-top:2rem;font-size:var(--t-small);color:var(--ink-3);max-width:64ch}
.note a{color:var(--ink-2)}

nav a[aria-current="page"]{color:var(--ink)}