/* Page layout only. Every colour, size, space and radius comes from /tokens.css
   (site/design-system/tokens.css). Mobile first at 390; one breakpoint at 760.
   No shadows, no cards, radius 0 except stamps, tabular figures everywhere. */
*{box-sizing:border-box}
body{font-size:var(--gb-size-body);line-height:1.55}
a{text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
img{display:block}
.pad{padding-left:var(--gb-pad-mobile);padding-right:var(--gb-pad-mobile)}
main{display:flex;flex-direction:column;gap:var(--gb-space-6);padding-top:var(--gb-space-6);padding-bottom:var(--gb-space-6)}
.muted{color:var(--gb-muted)}
p{margin:0}
.body,.small,.deck{max-width:var(--gb-measure)}
.rule{border-top:var(--gb-rule-thin) solid var(--gb-hairline)}
.stack{display:flex;flex-direction:column;gap:var(--gb-space-4)}

/* masthead */
.mast{height:var(--gb-space-14);display:flex;align-items:center;justify-content:space-between;border-bottom:var(--gb-rule-thin) solid var(--gb-hairline)}
.mk{display:flex;align-items:center;gap:var(--gb-space-3);color:var(--gb-ink)}
.mk:hover{text-decoration:none}
.navwide{display:none}
.nav a{color:var(--gb-ink)}
.nav a:hover,.nav a[aria-current]{color:var(--gb-accent)}
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;color:var(--gb-ink)}
.menu summary::-webkit-details-marker{display:none}
.navlist{position:absolute;right:0;top:calc(100% + var(--gb-space-3));z-index:2;display:flex;flex-direction:column;gap:var(--gb-space-4);padding:var(--gb-space-4);min-width:200px;background:var(--gb-ground);border:var(--gb-rule-thin) solid var(--gb-hairline)}
.recline{padding-top:var(--gb-space-2);color:var(--gb-label)}
.record{color:var(--gb-label)}
.label{color:var(--gb-label)}
.watchpoint-id{color:var(--gb-ink)}

/* stamps: OPEN accent outline, REVISED ink outline, CLOSED ink fill */
.stamp{display:inline-block;padding:var(--gb-space-1) 7px;border:var(--gb-rule-stamp) solid;border-radius:var(--gb-radius-stamp);transform:rotate(-2deg);white-space:nowrap}
.stamp-open{color:var(--gb-accent);border-color:var(--gb-accent)}
.stamp-revised{color:var(--gb-ink);border-color:var(--gb-ink)}
.stamp-closed{color:var(--gb-ground);background:var(--gb-ink);border-color:var(--gb-ink)}

/* credibility strip */
.cred{display:grid;gap:var(--gb-space-4)}
.cred .label{color:var(--gb-accent);margin-bottom:6px}

/* watchpoint rows */
.board-head{margin-bottom:var(--gb-space-3)}
.wp{border-top:var(--gb-rule-strong) solid var(--gb-ink);border-bottom:var(--gb-rule-thin) solid var(--gb-hairline);padding:14px 0;display:flex;flex-direction:column;gap:var(--gb-space-2)}
.wp .t{display:flex;justify-content:space-between;align-items:center;gap:var(--gb-space-3)}

/* capture: inline, never a pop-up */
.capture{display:flex;flex-direction:column;gap:var(--gb-space-2)}
.cap{display:flex;gap:var(--gb-space-2)}
.cap input{height:44px;flex:1 1 auto;min-width:0;padding:0 var(--gb-space-3);border:var(--gb-rule-thin) solid var(--gb-field);border-radius:var(--gb-radius-0);background:var(--gb-paper);color:var(--gb-ink);font:inherit;font-size:var(--gb-size-small)}
.cap input:focus{outline:2px solid var(--gb-accent);outline-offset:0;border-color:var(--gb-accent)}
.button,.btn{display:inline-block;height:44px;line-height:44px;padding:0 var(--gb-space-4);border:0;border-radius:var(--gb-radius-0);background:var(--gb-ink);color:var(--gb-ground);cursor:pointer}
.btn:hover{text-decoration:none}
.cap button[disabled],.cap input[disabled]{cursor:not-allowed}

/* headings */
h1,h2{margin:0}
.section{margin:var(--gb-space-2) 0 0}

/* piece: record line that expands to the full disclosure */
.disclose{border:var(--gb-rule-thin) solid var(--gb-hairline)}
.disclose summary{display:flex;justify-content:space-between;gap:var(--gb-space-3);padding:var(--gb-space-2) 10px;cursor:pointer;list-style:none}
.disclose summary::-webkit-details-marker{display:none}
.disclose summary .how{color:var(--gb-accent);white-space:nowrap}
.disclose[open] summary .how::after{content:" \25B4"}
.disclose:not([open]) summary .how::after{content:" \25BE"}
.disclose .full{padding:0 10px var(--gb-space-3);display:flex;flex-direction:column;gap:var(--gb-space-1)}
.frame-close{border-top:var(--gb-rule-strong) solid var(--gb-ink);padding-top:var(--gb-space-3)}
.close45{border-top:var(--gb-rule-thin) solid var(--gb-hairline);padding-top:var(--gb-space-4);display:flex;flex-direction:column;gap:var(--gb-space-3);align-items:flex-start}
blockquote{margin:0;padding:var(--gb-space-3) var(--gb-space-4);border-left:3px solid var(--gb-accent);background:var(--gb-accent-tint)}

/* chrome (house view, essays) */
.chrome{margin:0;border-top:var(--gb-rule-thin) solid var(--gb-hairline)}
.chrome div{display:flex;gap:var(--gb-space-3);padding:7px 0;border-bottom:var(--gb-rule-thin) solid var(--gb-hairline)}
.chrome dt{flex:0 0 108px;padding-top:4px}
.chrome dd{margin:0;flex:1}

/* history / changelog lists */
.hist{display:flex;flex-direction:column}
.hist div{display:flex;gap:var(--gb-space-3);padding:var(--gb-space-2) 0;border-bottom:var(--gb-rule-thin) solid var(--gb-hairline)}
.hist div > span:first-child{flex:0 0 88px}
.hist .txt{color:var(--gb-ink)}

/* footer */
.foot{padding-top:var(--gb-space-6);padding-bottom:var(--gb-space-6)}
.footrow{display:flex;flex-direction:column;gap:var(--gb-space-2);padding-top:var(--gb-space-3)}
.footrow a{color:var(--gb-label)}

@media (min-width:760px){
  .pad{padding-left:var(--gb-space-16);padding-right:var(--gb-space-16)}
  .navwide{display:flex;gap:var(--gb-space-6)}
  .menu{display:none}
  .body{font-size:var(--gb-size-body-l)}
  .cred{grid-template-columns:repeat(3,1fr);gap:var(--gb-space-10)}
  .home-grid{display:grid;grid-template-columns:440px 1fr;gap:var(--gb-space-16);align-items:start}
  .footrow{flex-direction:row;justify-content:space-between}
  .display-l{font-size:var(--gb-size-display-xl)}
}

/* home: at 390 the board follows the frame; at 760+ it takes the right column */
.home{display:flex;flex-direction:column;gap:var(--gb-space-6)}
@media (min-width:760px){
  .home{display:grid;grid-template-columns:440px 1fr;grid-template-areas:"frame board" "capture board" "piece board";column-gap:var(--gb-space-16);row-gap:var(--gb-space-6);align-items:start}
  .h-frame{grid-area:frame}.h-board{grid-area:board}.h-capture{grid-area:capture}.h-piece{grid-area:piece}
}
/* chrome 2026-10-11: byline under the title; Record block at the bottom */
.byline{color:var(--gb-muted)}
.byline a{color:var(--gb-accent)}
.recordblock{margin-top:var(--gb-space-8);padding-top:var(--gb-space-6);border-top:var(--gb-rule-strong) solid var(--gb-ink)}
.recordblock em{color:var(--gb-ink)}
.gbchart{margin:0;display:flex;flex-direction:column;gap:var(--gb-space-2);border-top:var(--gb-rule-thin) solid var(--gb-hairline);padding-top:var(--gb-space-3)}
.gbchart svg{width:100%;height:auto;font-family:var(--gb-font-mono);font-size:10px}
.gbchart .lab{fill:var(--gb-label)}
.gbchart .tip{visibility:hidden}.gbchart .tip text{fill:var(--gb-ink);font-size:10px}
.gbchart .pt:hover .tip,.gbchart .pt:focus .tip{visibility:visible}.gbchart .pt{outline:none;cursor:default}
.gbchart .lg{margin-right:var(--gb-space-3);white-space:nowrap}.gbchart .sw{display:inline-block;width:10px;height:2px;margin-right:6px;vertical-align:middle}

/* I4 frame diagram */
.fgrid{display:grid;grid-template-columns:1fr;gap:var(--gb-space-3)}
.fcol{display:flex;flex-direction:column;gap:var(--gb-space-2)}
.fh{border-bottom:var(--gb-rule-strong) solid var(--gb-ink);padding-bottom:var(--gb-space-1)}
.fnode{display:block;border-top:var(--gb-rule-thin) solid var(--gb-hairline);padding-top:var(--gb-space-2);color:inherit;text-decoration:none}
.fnode p{margin:var(--gb-space-1) 0}
.fhere .label{color:var(--gb-accent)}
a.fwp:hover .watchpoint-id{color:var(--gb-accent)}
.fwp .t{display:flex;justify-content:space-between;align-items:center}
.farrow{display:none;color:var(--gb-rule);align-self:center}
@media (min-width:1100px){.fgrid{grid-template-columns:1fr auto 1fr auto 1fr auto 1.1fr auto 1.2fr;gap:var(--gb-space-2)}.farrow{display:block}}
/* X1 figures as citations: span + tooltip, Plex Mono, hairline rule, no card */
.fig{position:relative;border-bottom:var(--gb-rule-thin) dotted var(--gb-accent);cursor:help;outline:none}
.figtip{display:none;position:absolute;left:0;top:1.6em;z-index:5;min-width:16rem;max-width:26rem;padding:var(--gb-space-2) var(--gb-space-3);background:var(--gb-ground);border-top:var(--gb-rule-thin) solid var(--gb-hairline);border-bottom:var(--gb-rule-thin) solid var(--gb-hairline);font-family:var(--gb-font-mono);font-size:var(--gb-size-record);line-height:1.5;color:var(--gb-muted);font-weight:400}
.fig:hover .figtip,.fig:focus .figtip,.fig:focus-within .figtip{display:block}
.gloss{position:relative;border-bottom:var(--gb-rule-thin) dotted var(--gb-rule);cursor:help;outline:none}
.gloss:hover .figtip,.gloss:focus .figtip{display:block}
/* X6 piece chart (draft route chart.svg) and body lists */
figure.chart{margin:0;border-top:var(--gb-rule-thin) solid var(--gb-hairline);padding-top:var(--gb-space-3)}
figure.chart svg{width:100%;height:auto;display:block}
ul.body,ol.body{margin:0;padding-left:1.25em;display:flex;flex-direction:column;gap:var(--gb-space-2)}
/* A3 reader default: plain text. The switch (#srcsw) turns figure marks,
   citation markers and glossary terms on; off again on reload. */
.srcsw{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.srctoggle{color:var(--gb-accent);cursor:pointer;font-family:var(--gb-font-mono);font-size:var(--gb-size-record)}
.srctoggle .on,.srcsw:checked~* .srctoggle .off{display:none}
.srcsw:checked~* .srctoggle .on{display:inline}
.srcsw:focus-visible~* .srctoggle{outline:var(--gb-rule-thin) solid var(--gb-accent)}
.srcsw:not(:checked)~* .fig,.srcsw:not(:checked)~* .gloss{border-bottom:0;cursor:auto}
.srcsw:not(:checked)~* .figtip{display:none!important}
.srcsw:not(:checked)~* sup.cite{display:none}
.srcsw:checked~* .fig{border-bottom:var(--gb-rule-thin) solid var(--gb-accent)}
details.srcs>summary,details.closed>summary{cursor:pointer;list-style:none}
details.srcs>summary::before,details.closed>summary::before{content:"+ ";font-family:var(--gb-font-mono)}
details.srcs[open]>summary::before,details.closed[open]>summary::before{content:"− "}
details.closed>summary h2{display:inline}
.srcsw:not(:checked)~* .srcnote{display:none}
.madeline{margin-top:calc(-1 * var(--gb-space-2))}

/* V6 (2026-10-14): one-liners after a first mention; the short version under
   the standfirst; House View v3.0 sub-heads, What's new, the June record */
.oneliner{margin-top:calc(-1 * var(--gb-space-1));color:var(--gb-muted)}
.oneliner a{color:var(--gb-accent)}
.short{color:var(--gb-ink)}
h3.subsection{margin:var(--gb-space-2) 0 0;font-family:var(--gb-font-display);font-size:var(--gb-size-deck);font-weight:600;line-height:1.3}
.whatsnew{border-left:3px solid var(--gb-accent);padding-left:var(--gb-space-4)}
details.june ul{margin:var(--gb-space-2) 0 0;padding-left:1.25em;display:flex;flex-direction:column;gap:var(--gb-space-2);max-width:var(--gb-measure)}