/* ── tokens ─────────────────────────────────────────────────────────────
   beh (به) — Persian: better; also, the quince.
   Light = quince flesh on paper. Dark = quince gold in warm ink.        */
:root{
  --bg:#EDE7D6; --bg-2:#E5DDC8; --bg-3:#DDD4BB;
  --fg:#17150E; --fg-dim:#4C4938; --micro:#65614B;
  --gold:#7A5B10; --gold-soft:#B08A25;
  --rose:#9F443C; --rose-soft:#C0665C;
  --rule:rgba(23,21,14,.16); --rule-soft:rgba(23,21,14,.08);
  --glow:rgba(138,103,18,.10); --sel:rgba(168,72,63,.18);
  --f-display:"Bricolage Grotesque","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-body:"Instrument Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-mono:"Fragment Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --brand-ink:#13120D; --brand-gold:#D9B23C; --brand-rose:#E29A93;
  --col:1180px; --gut:clamp(18px,4vw,44px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#13120D; --bg-2:#1A1913; --bg-3:#221F17;
    --fg:#F0EBDC; --fg-dim:#A8A491; --micro:#83806A;
    --gold:#D9B23C; --gold-soft:#9C8236;
    --rose:#E29A93; --rose-soft:#A9706C;
    --rule:rgba(240,235,220,.14); --rule-soft:rgba(240,235,220,.07);
    --glow:rgba(217,178,60,.10); --sel:rgba(226,154,147,.22);
  }
}
:root[data-theme="dark"]{
  --bg:#13120D; --bg-2:#1A1913; --bg-3:#221F17;
  --fg:#F0EBDC; --fg-dim:#A8A491; --micro:#83806A;
  --gold:#D9B23C; --gold-soft:#9C8236;
  --rose:#E29A93; --rose-soft:#A9706C;
  --rule:rgba(240,235,220,.14); --rule-soft:rgba(240,235,220,.07);
  --glow:rgba(217,178,60,.10); --sel:rgba(226,154,147,.22);
}
html{color-scheme:light dark}
*{box-sizing:border-box}
img{max-width:100%}
[hidden]{display:none!important}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--f-body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
::selection{background:var(--sel)}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:1px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── frame ────────────────────────────────────────────────────────────── */
.frame{max-width:var(--col); margin:0 auto; padding-inline:var(--gut);
  border-inline:1px solid var(--rule); position:relative}
@media (max-width:760px){.frame{border-inline:0}}

/* ── header ───────────────────────────────────────────────────────────── */
.top{position:sticky; top:0; z-index:40;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--rule)}
.top .frame{display:flex; align-items:center; gap:22px; height:58px}
.mark{font-family:var(--f-display); font-weight:700; font-size:16px;
  letter-spacing:-.035em; text-decoration:none; white-space:nowrap;
  display:inline-flex; align-items:center; gap:9px; line-height:1}
.mark b{color:var(--gold); font-weight:700}
/* The symbol keeps the brand colours of the favicon and share card in both
   themes: a dark tile that disappears on the dark page. Squares run clockwise
   from top left, which is the order bus.js lights them in. */
.mark .glyph{width:22px; height:22px; flex:none}
.mark .glyph .tile{fill:var(--brand-ink)}
.mark .glyph .sq{fill:var(--brand-gold)}
.mark .glyph circle{fill:var(--brand-rose)}
.mark .glyph rect,.mark .glyph circle{transform-box:fill-box; transform-origin:center}
.mark .glyph .sq rect:nth-child(1){--dx:-1; --dy:-1}
.mark .glyph .sq rect:nth-child(2){--dx:1; --dy:-1}
.mark .glyph .sq rect:nth-child(3){--dx:1; --dy:1}
.mark .glyph .sq rect:nth-child(4){--dx:-1; --dy:1}
@media (prefers-reduced-motion:no-preference){
  .mark .glyph .sq rect{transition:translate .25s ease}
  .mark:hover .glyph .sq rect{translate:calc(var(--dx)*-1.5px) calc(var(--dy)*-1.5px)}
  /* assemble once per visit; the inline script in <head> sets .seen after that */
  html:not(.seen) .mark .glyph .sq rect{animation:mark-in .6s cubic-bezier(.2,.7,.2,1) backwards}
  html:not(.seen) .mark .glyph circle{animation:mark-hub .4s .35s ease-out backwards}
}
@keyframes mark-in{from{translate:calc(var(--dx)*4px) calc(var(--dy)*4px); opacity:0}}
@keyframes mark-hub{from{scale:0}}
.nav{display:flex; gap:20px; margin-left:auto; align-items:center; flex-wrap:wrap}
.nav a{font-family:var(--f-mono); font-size:11px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--fg-dim); text-decoration:none;
  padding-block:6px; transition:color .18s}
.nav a:hover{color:var(--gold)}
@media (max-width:820px){.nav a.hide-s{display:none}}

/* ── sections ─────────────────────────────────────────────────────────── */
.sec{border-bottom:1px solid var(--rule)}
.sec .frame{display:grid; grid-template-columns:8.5rem 1fr;
  gap:0 clamp(20px,4vw,52px); padding-block:clamp(52px,8vw,92px)}
/* A grid item will not shrink below its content by default, so a wide table
   widened the whole column and the page with it. With this, the table scrolls
   inside .tw instead. */
.sec .frame > *{min-width:0}
.code{font-family:var(--f-mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--micro); line-height:1.7;
  position:sticky; top:78px; align-self:start}
.code span{display:block; color:var(--gold)}
@media (max-width:860px){
  .sec .frame{grid-template-columns:1fr; gap:22px}
  .code{position:static; padding-bottom:4px; border-bottom:1px solid var(--rule-soft)}
  .code span{display:inline; margin-right:8px}
}

/* ── type ─────────────────────────────────────────────────────────────── */
h1,h2,h3{font-family:var(--f-display); font-weight:600; letter-spacing:-.035em;
  text-wrap:balance; margin:0}
h1{font-size:clamp(40px,7vw,80px); line-height:.97; letter-spacing:-.045em}
h2{font-size:clamp(26px,4.2vw,44px); line-height:1.04}
h3{font-size:18px; line-height:1.3; letter-spacing:-.02em}
p{margin:0}
.lead{font-size:clamp(16px,1.6vw,18.5px); line-height:1.5; color:var(--fg-dim); max-width:56ch}
.body{font-size:15.5px; color:var(--fg-dim); max-width:64ch}
.body + .body{margin-top:14px}
.eyebrow{font-family:var(--f-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--micro)}
.eyebrow em{font-style:normal; color:var(--gold)}
.mt20{margin-top:20px} .mt28{margin-top:28px} .mt34{margin-top:34px}

/* pull quote — the charter speaking in its own voice */
.quote{border-left:2px solid var(--gold); padding:4px 0 4px 20px; margin-top:26px;
  font-family:var(--f-display); font-weight:400; font-size:clamp(17px,2.2vw,22px);
  line-height:1.38; letter-spacing:-.02em; max-width:52ch; text-wrap:pretty}
.quote cite{display:block; margin-top:12px; font-family:var(--f-mono);
  font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--micro); font-style:normal}

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero{border-bottom:1px solid var(--rule); overflow:hidden}
.hero .frame{display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(26px,5vw,60px); padding-block:clamp(44px,6.5vw,80px); align-items:center}
@media (max-width:920px){.hero .frame{grid-template-columns:1fr; gap:36px}}
.hero h1{margin:20px 0 22px}
.hero h1 i{font-style:normal; color:var(--gold)}
.status{margin-top:26px; display:flex; flex-wrap:wrap; gap:8px 18px;
  font-family:var(--f-mono); font-size:11px; color:var(--micro);
  border-top:1px solid var(--rule); padding-top:14px}
.status b{color:var(--fg-dim); font-weight:400}

/* ── instrument ───────────────────────────────────────────────────────── */
.inst{border:1px solid var(--rule); background:var(--bg-2); min-width:0}
.inst-bar{display:flex; align-items:center; gap:10px; padding:8px 11px;
  border-bottom:1px solid var(--rule); font-family:var(--f-mono);
  font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--micro)}
.inst-bar b{color:var(--fg); font-weight:400; letter-spacing:.06em}
.inst-bar .r{margin-left:auto; color:var(--gold)}
/* a control that can make an instrument go red */
.inst-bar .tgl{margin-left:auto; font:inherit; letter-spacing:inherit; text-transform:inherit;
  color:var(--gold); background:none; border:1px solid var(--rule); padding:3px 9px;
  cursor:pointer; transition:border-color .18s, color .18s}
.inst-bar .tgl:hover{border-color:var(--gold)}
.inst-bar .tgl[aria-pressed="true"]{color:var(--rose); border-color:var(--rose-soft)}
.stage{position:relative; aspect-ratio:1/.8; max-width:100%}
.stage canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.read{display:grid; grid-template-columns:1.6fr 1fr 1fr; border-top:1px solid var(--rule)}
.read div{padding:9px 11px; border-left:1px solid var(--rule-soft); min-width:0}
.read div:first-child{border-left:0}
.read dt{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--micro); margin:0 0 2px}
.read dd{margin:0; font-family:var(--f-mono); font-size:12px; color:var(--fg);
  font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.read dd.bad{color:var(--rose)}

/* ── four-part thesis ─────────────────────────────────────────────────── */
.four{margin-top:34px; border-top:1px solid var(--rule)}
.four > div{display:grid; grid-template-columns:11rem 1fr; gap:0 clamp(16px,3vw,34px);
  padding-block:20px; border-bottom:1px solid var(--rule)}
.four dt{font-family:var(--f-mono); font-size:13px; color:var(--gold)}
.four dd{margin:0; font-size:15.5px; color:var(--fg-dim); max-width:60ch}
@media (max-width:640px){.four > div{grid-template-columns:1fr; gap:8px}}

/* ── tables ───────────────────────────────────────────────────────────── */
.tw{margin-top:30px; overflow-x:auto}
table.t{width:100%; border-collapse:collapse; font-size:14.5px; min-width:560px}
table.t th{text-align:left; font-family:var(--f-mono); font-weight:400; font-size:9.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--micro);
  padding:0 16px 8px 0; border-bottom:1px solid var(--rule); white-space:nowrap}
table.t td{padding:12px 16px 12px 0; border-bottom:1px solid var(--rule-soft);
  vertical-align:top; color:var(--fg-dim)}
table.t tr:last-child td{border-bottom:0}
table.t td.k{font-family:var(--f-mono); font-size:13px; color:var(--gold); white-space:nowrap}
table.t td.n{font-family:var(--f-mono); font-size:11px; color:var(--micro); white-space:nowrap}
table.t td strong{color:var(--fg); font-weight:500}
tr.hi td{background:var(--bg-2)}
tr.hi td.k{color:var(--rose)}
tr.hi td strong{color:var(--fg)}

/* classification chips */
.cls{font-family:var(--f-mono); font-size:12px; white-space:nowrap}
.cls.no{color:var(--rose)}
.cls.yes{color:var(--gold)}

/* how far a component is: designed, built, verified */
.tag{font-family:var(--f-mono); font-size:10px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--micro); white-space:nowrap; line-height:1.9}
.tag.b{color:var(--fg-dim)}
.tag.v{color:var(--gold)}

/* ── code block ───────────────────────────────────────────────────────── */
.pre{margin-top:26px; border:1px solid var(--rule); background:var(--bg-2);
  overflow-x:auto; font-family:var(--f-mono); font-size:12.5px; line-height:1.72}
.pre .hd{padding:7px 12px; border-bottom:1px solid var(--rule); font-size:9.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--micro); white-space:nowrap}
.pre pre{margin:0; padding:14px 16px; color:var(--fg-dim); white-space:pre}
.pre .y{color:var(--gold)}
.pre .r{color:var(--rose)}
.pre .c{color:var(--micro)}

/* ── principles ───────────────────────────────────────────────────────── */
.prin{margin-top:32px; display:grid; gap:0; border-top:1px solid var(--rule)}
.prin > div{display:grid; grid-template-columns:2.6rem 1fr; gap:0 18px;
  padding-block:18px; border-bottom:1px solid var(--rule-soft)}
.prin .n{font-family:var(--f-mono); font-size:11px; color:var(--micro)}
.prin h3{margin-bottom:5px}
.prin p{font-size:15px; color:var(--fg-dim); max-width:58ch}

/* ── gateway diagram (no canvas — plain boxes, theme-safe) ───────────── */
.gate{margin-top:30px; border:1px solid var(--rule); background:var(--bg-2); padding:20px 18px}
.gate-row{display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:center}
@media (max-width:720px){.gate-row{grid-template-columns:1fr; gap:10px}}
.box{border:1px solid var(--rule); padding:10px 12px; background:var(--bg);
  font-family:var(--f-mono); font-size:11.5px; color:var(--fg-dim); line-height:1.5}
.box b{display:block; color:var(--fg); font-weight:400; margin-bottom:3px}
.box.door{border-color:var(--gold); color:var(--gold)}
.box.door b{color:var(--gold)}
.arrow{font-family:var(--f-mono); color:var(--micro); text-align:center; font-size:13px}
.backends{display:grid; gap:8px}
.gate-note{margin-top:16px; font-family:var(--f-mono); font-size:11px;
  color:var(--micro); line-height:1.7; border-top:1px solid var(--rule-soft); padding-top:14px}
.gate-note em{font-style:normal; color:var(--rose)}

/* ── milestones ───────────────────────────────────────────────────────── */
.miles{margin-top:30px; border-top:1px solid var(--rule)}
.miles > div{display:grid; grid-template-columns:3.2rem 1fr 7.5rem; gap:0 18px;
  padding-block:16px; border-bottom:1px solid var(--rule-soft); align-items:baseline}
.miles .n{font-family:var(--f-mono); font-size:12px; color:var(--gold)}
.miles p{font-size:15px; color:var(--fg-dim); max-width:56ch}
.miles .st{font-family:var(--f-mono); font-size:10px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--micro); text-align:right}
.miles .st.now{color:var(--rose)}
.miles .st.part{color:var(--gold)}
@media (max-width:700px){
  .miles > div{grid-template-columns:3.2rem 1fr; gap:4px 18px}
  .miles .st{grid-column:2; text-align:left}
}

/* ── foot ─────────────────────────────────────────────────────────────── */
.foot .frame{padding-block:36px 44px; display:flex; flex-wrap:wrap; gap:18px 34px; align-items:flex-end}
.foot .m{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.06em;
  color:var(--micro); line-height:1.9}
.foot .m a{color:var(--fg-dim); text-decoration:none; border-bottom:1px solid var(--rule)}
.foot .m a:hover{color:var(--gold); border-color:var(--gold)}
.foot .sig{margin-left:auto; text-align:right}
@media (max-width:640px){.foot .sig{margin-left:0; text-align:left}}
.etym{font-family:var(--f-mono); font-size:10.5px; color:var(--micro);
  border-left:1px solid var(--gold); padding-left:12px; line-height:1.8}
.etym i{font-style:normal; color:var(--gold)}

/* ── buttons (landing) ────────────────────────────────────────────────── */
.cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:30px}
.btn{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.08em;
  text-transform:uppercase; text-decoration:none; padding:11px 17px;
  border:1px solid var(--rule); display:inline-flex; align-items:center; gap:8px;
  transition:.18s; color:var(--fg)}
.btn:hover{border-color:var(--gold); color:var(--gold)}
.btn.solid{background:var(--gold); border-color:var(--gold); color:var(--bg)}
.btn.solid:hover{background:var(--gold-soft); border-color:var(--gold-soft); color:var(--bg)}

/* ── product panel (landing) ──────────────────────────────────────────── */
.product{background:var(--bg-2); border-bottom:1px solid var(--rule)}
.product .frame{display:grid; grid-template-columns:8.5rem 1fr;
  gap:0 clamp(20px,4vw,52px); padding-block:clamp(52px,8vw,92px)}
@media (max-width:860px){.product .frame{grid-template-columns:1fr; gap:22px}}
.product h2 i{font-style:normal; color:var(--rose)}
.product .code span{color:var(--rose)}
.link-out{display:inline-flex; align-items:baseline; gap:9px; margin-top:26px;
  font-family:var(--f-mono); font-size:14px; color:var(--rose);
  text-decoration:none; border-bottom:1px solid var(--rose-soft);
  padding-bottom:3px; transition:.18s}
.link-out:hover{color:var(--fg); border-color:var(--fg)}

/* ── three light pillars (landing) ────────────────────────────────────── */
.pillars{margin-top:34px; border-top:1px solid var(--rule)}
.pillars > div{display:grid; grid-template-columns:13rem 1fr;
  gap:0 clamp(16px,3vw,36px); padding-block:22px; border-bottom:1px solid var(--rule)}
.pillars dt{font-family:var(--f-mono); font-size:13px; color:var(--gold)}
.pillars dd{margin:0; font-size:15.5px; color:var(--fg-dim); max-width:60ch}
@media (max-width:640px){.pillars > div{grid-template-columns:1fr; gap:8px}}

/* ── impressum ────────────────────────────────────────────────────────── */
.legal{margin-top:8px; max-width:64ch}
.legal > div{display:grid; grid-template-columns:13rem 1fr;
  gap:0 clamp(16px,3vw,32px); padding-block:18px; border-bottom:1px solid var(--rule-soft)}
.legal dt{font-family:var(--f-mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--micro); padding-top:3px}
.legal dd{margin:0; font-size:15.5px; color:var(--fg); line-height:1.65}
.legal dd a{color:var(--gold); text-decoration:none; border-bottom:1px solid var(--rule)}
.legal dd a:hover{border-color:var(--gold)}
.legal dd .sub{display:block; font-size:13.5px; color:var(--fg-dim); margin-top:3px}
@media (max-width:640px){.legal > div{grid-template-columns:1fr; gap:6px}}
.note{margin-top:30px; border-left:1px solid var(--rule); padding-left:16px;
  font-size:14px; color:var(--fg-dim); max-width:60ch}

/* unresolved legal detail — must be filled in before this page goes live */
.todo{color:var(--rose); border-bottom:1px dotted var(--rose); font-style:normal}

/* ── privacy summary box ──────────────────────────────────────────────── */
.sum{margin-top:28px; border:1px solid var(--rule); background:var(--bg-2); padding:18px 20px}
.sum p{font-family:var(--f-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--micro); margin-bottom:12px}
.sum ul{margin:0; padding:0; list-style:none; display:grid; gap:7px}
.sum li{font-family:var(--f-mono); font-size:13px; color:var(--fg-dim);
  display:grid; grid-template-columns:1.5rem 1fr; gap:8px}
.sum li b{color:var(--gold); font-weight:400}

/* ── text beside an instrument ────────────────────────────────────────── */
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(24px,4vw,44px); align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr; gap:32px}}

/* ── twin panels: same seed, same run ─────────────────────────────────── */
.twin{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--rule)}
.twin .stage{background:var(--bg-2); aspect-ratio:1/0.9}
@media (max-width:560px){.twin{grid-template-columns:1fr}}

/* ── a line of the product's own material ─────────────────────────────── */
.fa-panel{padding:26px 22px 22px; display:grid; gap:14px}
.fa{margin:0; direction:rtl; text-align:right; font-size:clamp(21px,3vw,28px);
  line-height:1.75; color:var(--fg); letter-spacing:0;
  font-family:"SF Arabic","Geeza Pro","Noto Naskh Arabic","Iranian Sans",Tahoma,sans-serif}
.fa-en{margin:0; font-size:15px; color:var(--fg-dim); font-style:italic}
.fa-note{margin:0; padding-top:13px; border-top:1px solid var(--rule-soft);
  font-size:14px; color:var(--fg-dim); line-height:1.6}