/* back-zone.com — brand book v4.0 (pastel). The product's own 22 tokens, same laws:
   no frames, no radius, no gradients, every wash wearing its ink at 1px, the 8-scale for
   spacing, and the mark in ink and paper. */
:root{
  --kami:#FAF8F3; --kinu:#F2EFE7; --kuro:#211E19; --sumi:#1B1915;
  --hai:#6F6C61;  --usui:#A9A59A;
  --m-tint:#EFEAFB; --m-25:#DCD2F8; --m-wash:#B7A3F1; --m-75:#8F76E6; --m-ink:#6F51D9;
  --m-dark:#C9BCF6;
  --k-ink:#8F7300; --k-wash:#ECDC93; --k-tint:#F8F2D9;
  --a-ink:#B4483C; --a-wash:#F0B4AB; --a-tint:#FAE6E1;
  --s1c:#D5C9F7; --s2c:#F2ADC6; --s3c:#CBA0DC; --s4c:#DAD3C4;

  --paper:var(--kami); --sunk:var(--kinu); --ink:var(--sumi);
  --soft:var(--hai);   --faint:var(--usui);
  --line:rgba(27,25,21,.16); --rule:rgba(27,25,21,.30);
  --lw:var(--sumi); --lk:var(--sumi); --lz:var(--kami);

  --sans:'IBM Plex Sans',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --g1:8px; --g2:16px; --g3:24px; --g4:40px; --g5:64px; --g6:104px;
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme=day]){
    --paper:var(--kuro); --sunk:var(--sumi); --ink:var(--kami);
    --soft:var(--usui); --faint:var(--hai);
    --k-ink:var(--k-wash); --a-ink:var(--a-wash); --m-ink:var(--m-dark);
    --line:rgba(250,248,243,.15); --rule:rgba(250,248,243,.28);
    --lw:var(--kami); --lk:var(--m-wash); --lz:var(--sumi);
  }
}

*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
a{color:var(--m-ink);text-decoration:none}
a:hover{box-shadow:inset 0 -1px var(--m-ink)}
/* "1px m-ink outline, 4px offset. The only rectangle we draw around anything." */
:focus-visible{outline:1px solid var(--m-ink);outline-offset:4px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Guide §5: max-width 1180, padding-inline 5.5vw, sections divided by one hairline and
   96–104px — never boxes. */
/* First tab stop, invisible until focused, then styled as any link (guide §5, A11Y). */
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:var(--g2);top:var(--g1);background:var(--paper);color:var(--m-ink);
  padding:var(--g1) var(--g2);z-index:50;font-family:var(--mono);font-size:12px;
  letter-spacing:.12em;text-transform:uppercase}

.wrap{width:100%;max-width:1180px;margin:0 auto;padding-inline:5.5vw}
@media (min-width:1300px){.wrap{padding-inline:var(--g5)}}

h1{font-weight:500;font-size:clamp(38px,7vw,74px);line-height:1.03;letter-spacing:-.025em}
h2{font-weight:500;font-size:clamp(22px,3vw,30px);line-height:1.2;letter-spacing:-.01em}
h3{font-weight:500;font-size:17px;line-height:1.35}
p{max-width:68ch}
.lb{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.mono{font-family:var(--mono);font-size:14px;letter-spacing:.02em}
code{font-family:var(--mono);font-size:14px;background:var(--sunk);padding:1px 4px;white-space:nowrap}

/* ---- top bar: lockup, links, live status ------------------------------- */
/* Guide §6.2 and the kit's TOP BAR: sticky, mono uppercase links, the status on the right.
   One hairline under it and nothing else — no bar fill, no shadow. */
.top{position:sticky;top:0;z-index:40;background:var(--paper);
  box-shadow:inset 0 -1px var(--line)}
.top .wrap{display:flex;align-items:center;gap:var(--g2) var(--g3);
  padding-block:var(--g2);flex-wrap:wrap}
.top nav{display:flex;gap:var(--g2) var(--g3);flex-wrap:wrap;margin-inline-start:auto;
  min-width:0;flex-shrink:1}
@media (min-width:1100px){
  .top .wrap{flex-wrap:nowrap}
  .top nav{gap:var(--g3)}
}
.top nav a{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--soft);padding-block:4px}
.top nav a:hover{color:var(--ink);box-shadow:none}
.top nav a[aria-current=page]{color:var(--ink);box-shadow:inset 0 -1px var(--sumi)}
.top .stat{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--m-ink);white-space:nowrap;flex:0 0 auto}
.top .stat::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;
  border:1px solid currentColor;background:var(--m-wash);vertical-align:0}
@media (max-width:860px){
  .top nav{margin-inline-start:0;order:3;flex-basis:100%;gap:var(--g2) var(--g3)}
  .top .stat{margin-inline-start:auto}
}
.mark{width:118px;height:auto;display:block}
.mark .w{fill:var(--lw)} .mark .k{fill:var(--lk)} .mark .z{fill:var(--lz)}

.hero{padding:var(--g6) 0 var(--g5)}
.hero .btns{display:flex;gap:var(--g3);flex-wrap:wrap;align-items:center;margin-top:var(--g4)}
.hero h1{max-width:16ch}
.hero .stand{margin-top:var(--g3);font-size:clamp(18px,2vw,22px);line-height:1.45;max-width:46ch;color:var(--ink)}
.hero .kicker{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--m-ink);display:block;margin-bottom:var(--g2)}

section.band{padding:var(--g5) 0;box-shadow:inset 0 1px var(--line)}
section.band>.wrap>.lb{display:block;margin-bottom:var(--g2)}
section.band h2+p{margin-top:var(--g2)}

/* Four items on a 1080px measure gave three across and one orphan on a second row with a
   column and a half of nothing beside it. Two by two reads as a set. */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:var(--g4)}
.cols h3{margin-bottom:6px}
.cols p{color:var(--soft);max-width:38ch;font-size:16px}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(158px,100%),1fr));gap:var(--g3) var(--g4);margin-top:var(--g3)}
.facts div{padding-top:var(--g1);box-shadow:inset 0 1px var(--rule)}
.facts .v{font-family:var(--mono);font-size:30px;line-height:1;display:block;font-variant-numeric:tabular-nums}
.facts .k{font-size:14px;color:var(--soft);display:block;margin-top:4px}

/* A well, not a card: a tinted ground with one ink edge on its leading side. */
.well{background:var(--sunk);padding:var(--g3);max-width:74ch}
.well.warn{background:var(--k-tint);box-shadow:inset 2px 0 var(--k-ink)}
.well.acc{background:var(--m-tint);box-shadow:inset 2px 0 var(--m-ink)}
/* Guarded. `:root:not([data-theme=day])` matches when there is no attribute at all — which
   is every light-mode visitor — so this was overriding the kohaku and murasaki tints on the
   theme it was written to leave alone. The wash never rendered in light mode: the banner
   showed its ink hairline over bare paper. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme=day]) .well.warn,:root:not([data-theme=day]) .well.acc{background:var(--sunk)}
}
.well p{margin-bottom:var(--g1)}
.well p:last-child{margin-bottom:0}

/* The one solid button the book allows, and it is murasaki. */
/* An <a> and a <button> sharing this class came out two different heights, neither on the
   8-scale: the anchor inherited the body's line-height and the button did not. Both pinned. */
.btn{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:500;font-size:12.5px;line-height:1;
  letter-spacing:.14em;text-transform:uppercase;border:0;border-radius:0;cursor:pointer;
  background:var(--m-ink);color:var(--kami);padding:0 26px;height:48px;white-space:nowrap}
.btn:hover{background:var(--sumi);color:var(--kami);box-shadow:none}
.btn:disabled{background:var(--faint);cursor:not-allowed}
/* The dark block remaps --m-ink to the pale fuji so hairlines read on kuro. The button's
   fill followed and its label did not: kami on #C9BCF6 is 1.65:1 and the words were ghosts
   on both buttons. The book already answers this — "zone takes the highest-contrast neutral
   inside the fill" — and sumi on fuji is 10:1. Hover then has to invert the other way,
   because sumi on kuro is 1.06:1 and erased the button altogether. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme=day]) .btn{color:var(--sumi)}
  :root:not([data-theme=day]) .btn:hover{background:var(--kami);color:var(--sumi)}
  :root:not([data-theme=day]) :focus-visible{outline-color:var(--ink)}
}
.btn.sec{background:transparent;box-shadow:inset 0 -1px var(--sumi);color:var(--ink);padding:15px 2px}
.btn.sec:hover{color:var(--m-ink);box-shadow:inset 0 -1px var(--m-ink);background:transparent}

form.get{margin-top:var(--g3);display:flex;flex-wrap:wrap;gap:var(--g2);align-items:flex-end;max-width:640px}
form.get label{display:block;flex:1 1 280px}
form.get input{width:100%;font-family:var(--mono);font-size:16px;background:transparent;
  border:0;border-radius:0;box-shadow:inset 0 -1px var(--rule);color:var(--ink);padding:11px 2px}
/* usui is 2.3:1 on kami and this placeholder is the only format hint on the form. */
form.get input::placeholder{color:var(--soft)}
form.get input:focus{box-shadow:inset 0 -1px var(--m-ink);outline:none}
.msg{margin-top:var(--g2);max-width:68ch}
.msg .lb{display:block;margin-bottom:4px}
.msg.ok .lb{color:var(--m-ink)}
.msg.bad .lb{color:var(--a-ink)}
.msg[hidden]{display:none}

/* Guide §7.2: a table that will not fit gets its own scroll and a mono hint, so the page
   never scrolls sideways. The capability table's first column is nowrap by design — a
   capability name broken across two lines is harder to scan than a scroll. */
.tscroll{overflow-x:auto;max-width:100%;margin-top:var(--g2)}
.tscroll>table{margin-top:0}
.tscroll::after{content:"scroll →";display:none;font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--soft);padding-top:var(--g1)}
@media (max-width:700px){.tscroll::after{display:block}}
table{width:100%;border-collapse:collapse;margin-top:var(--g2);font-size:15px}
caption{text-align:left;padding-bottom:var(--g1)}
th{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;color:var(--soft);padding:0 var(--g3) var(--g1) 0;box-shadow:inset 0 -1px var(--rule)}
td{padding:11px var(--g3) 11px 0;box-shadow:inset 0 -1px var(--line);vertical-align:top}
td:first-child{font-family:var(--mono);font-size:14px;white-space:nowrap}
.st{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.st::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;
  border:1px solid currentColor;vertical-align:0}
.st.yes{color:var(--m-ink)}  .st.yes::before{background:var(--m-wash)}
.st.part{color:var(--k-ink)} .st.part::before{background:var(--k-wash)}
.st.no{color:var(--a-ink)}   .st.no::before{background:var(--a-wash)}

footer{padding:var(--g5) 0 var(--g6);box-shadow:inset 0 1px var(--line);margin-top:var(--g5)}
footer .row{display:flex;flex-wrap:wrap;gap:var(--g2) var(--g4);align-items:baseline}
footer .row .lb+.lb{margin-left:0}
footer nav{display:flex;gap:var(--g3);flex-wrap:wrap;margin-left:auto}

.banner{background:var(--k-tint);box-shadow:inset 0 -1px var(--k-ink);padding:var(--g2) 0}
@media (prefers-color-scheme: dark){
  :root:not([data-theme=day]) .banner{background:var(--sunk);box-shadow:inset 0 -1px var(--k-wash)}
}
.banner .wrap{display:flex;gap:var(--g2) var(--g3);flex-wrap:wrap;align-items:baseline}
/* k-ink on k-tint is 3.96:1, and this is the one word on the page carrying the warning.
   The tint stays; the word takes ink. */
.banner strong{font-weight:500;color:var(--sumi)}
.banner p{font-size:15px;max-width:none}

/* Guide §5.5: the demo block is the one dark moment on the page, previewing Night — kuro
   ground, fuji text, the pastel dark lockup. */
.dark{background:var(--kuro);color:var(--kami);box-shadow:none}
.dark h2,.dark p{color:var(--kami)}
.dark .lb{color:var(--usui)}
.dark a:not(.btn){color:var(--m-dark)}
.dark .btn{background:var(--m-dark);color:var(--sumi)}
.dark .btn:hover{background:var(--kami);color:var(--sumi)}

/* Guide §5.1: the restore timeline, drawn. Squares and stairs, 1px inks, no slanted wire. */
.schema{width:100%;max-width:820px;height:auto;display:block;margin:var(--g4) 0 0}
.schema .rail{stroke:var(--line);stroke-width:1;fill:none}
.schema .tick{stroke:var(--faint);stroke-width:1}
.schema .snap{fill:var(--m-tint);stroke:var(--m-ink);stroke-width:1}
.schema .held{fill:var(--m-wash);stroke:var(--m-ink);stroke-width:1}
.schema .bad{fill:var(--a-wash);stroke:var(--a-ink);stroke-width:1}
.schema .step{stroke:var(--m-ink);stroke-width:1;fill:none}
.schema text{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;fill:var(--soft)}
.schema .now{fill:var(--ink)}
.schema .warn{fill:var(--a-ink)}

/* A chip always carries a word (guide §5.4). BY DESIGN is a principle, not a gap. */
.st.design{color:var(--m-ink)} .st.design::before{background:var(--m-tint)}

/* The four headline numbers under the hero. Same component as the stat row, larger. */
.big{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));
  gap:var(--g3) var(--g4);margin-top:var(--g5)}
.big div{padding-top:var(--g1);box-shadow:inset 0 1px var(--rule)}
.big .v{font-family:var(--sans);font-weight:500;font-size:44px;line-height:1;letter-spacing:-.02em;display:block}
.big .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--soft);display:block;margin-top:var(--g1)}
.big .v.acc{color:var(--m-ink)}

/* A definition rail: mono key, prose value, one hairline each (guide §6.4 kv-rail). */
.rail{display:grid;grid-template-columns:minmax(min(210px,100%),1fr) 2.4fr;gap:0;margin-top:var(--g3)}
.rail dt{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--soft);padding:var(--g2) var(--g3) var(--g2) 0;box-shadow:inset 0 -1px var(--line)}
.rail dd{margin:0;padding:var(--g2) 0;box-shadow:inset 0 -1px var(--line);max-width:74ch}
@media (max-width:700px){
  .rail{grid-template-columns:1fr}
  .rail dt{padding-bottom:2px;box-shadow:none}
  .rail dd{padding-top:0}
}

/* The design-boundaries pattern: what the product will not do, in its own words. */
.edges{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:var(--g4);margin-top:var(--g3)}
.edges h3{display:flex;gap:var(--g1);align-items:baseline}
.edges h3::before{content:"";display:inline-block;width:8px;height:8px;flex:0 0 8px;
  border:1px solid var(--m-ink);background:var(--m-tint)}
.edges p{color:var(--soft);font-size:16px;max-width:44ch;margin-top:4px}

.terms{display:flex;flex-wrap:wrap;gap:var(--g1) var(--g2);margin-top:var(--g3)}
.terms span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--soft)}
.terms span::before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;
  border:1px solid var(--m-ink);background:var(--m-tint);vertical-align:1px}