/* ecocodes.online — "the opening monograph": paper, ink, scarlet; Cardo for the book voice, Lato for the apparatus */
@font-face{font-family:Cardo;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/cardo-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Cardo;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/cardo-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Cardo;font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/cardo-latin-400-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Cardo;font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/cardo-latin-ext-400-italic.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Cardo;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/cardo-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Cardo;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/cardo-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Lato;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/lato-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Lato;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/lato-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Lato;font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/lato-latin-400-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Lato;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/lato-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Lato;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/lato-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --paper:#faf7f0; --paper-2:#f2ece0; --card:#fffdf8;
  --ink:#1d1a16; --ink-2:#433d36; --ink-3:#655e55; --rule:#ddd4c3; --rule-2:#c9bea9;
  --red:#a8321e; --red-ink:#8e2817; --red-soft:#f5e3dc;
  --b1:#ece4d4; --b2:#d9cbb0; --b3:#b7a37f; --b4:#7f6c4f; --b5:#3b3125;
  --serif:Cardo,"Iowan Old Style",Georgia,serif; --sans:Lato,"Segoe UI",Helvetica,Arial,sans-serif;
  --gut:24px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--sans);overflow-wrap:break-word}
a{color:var(--red-ink);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:8px 12px;z-index:9}
.skip:focus{left:8px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--gut)}
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.15;margin:0 0 16px;letter-spacing:-.005em}
h2{font-size:28px}
h3{font-size:20px}
p{margin:0 0 16px}
b{font-weight:700}

/* masthead */
.mast{border-bottom:1px solid var(--rule);background:var(--paper)}
.mast-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:700 24px/1 var(--serif);min-height:44px}
.brand .mark{width:28px;height:28px;flex:none}
.nav{display:flex;align-items:center;gap:4px 20px;flex-wrap:wrap;font-size:16px}
.nav a{color:var(--ink);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.nav a:hover{color:var(--red-ink);text-decoration:underline}
.vols{display:inline-flex;align-items:center;gap:2px}
.vols-l{color:var(--ink-3);margin-right:6px;font-size:15px}
.vols a{width:34px;justify-content:center;font:700 18px/1 var(--serif);border-radius:3px}
.vols a:hover{background:var(--paper-2);text-decoration:none}

.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px;padding:0;margin:16px 0 0;font-size:14px;color:var(--ink-3)}
.crumbs li+li::before{content:"/";margin:0 6px 0 2px;color:var(--rule-2)}
.crumbs a{color:var(--ink-3)}

/* running head of a code page: like the top line of a book page */
.runhead{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:15px;color:var(--ink-3);border-bottom:1px solid var(--rule);padding:12px 0 8px;margin-top:8px}
.runhead a{color:var(--ink-3);text-decoration:none;min-height:40px;display:inline-flex;align-items:center}
.runhead a:hover{color:var(--red-ink)}
.runhead .pn{display:flex;gap:16px;font:700 17px var(--serif);flex:none}
.runhead .pn a{white-space:nowrap}

/* plate: board + heading */
.plate{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:48px;align-items:start;padding:32px 0 40px}
.plate-board,.hub-board{margin:0}
svg.diagram{display:block;width:100%;height:auto}
svg.diagram .co{font:3.3px var(--serif);fill:var(--ink-3);text-anchor:middle}
figcaption{font-size:15px;color:var(--ink-3);margin-top:8px}
.plate-board figcaption{text-align:center}
.plate-text h1{margin-bottom:12px}
h1 .num{display:block;font-size:96px;line-height:.9;color:var(--red);letter-spacing:-.02em;margin-bottom:12px}
h1 .nm{display:block;font-size:34px;line-height:1.15}
.also{font-size:15px;color:var(--ink-3);margin-bottom:16px}
.lede{font:400 21px/1.5 var(--serif);color:var(--ink);max-width:40em}
.lede a{color:var(--red-ink)}

/* score sheet */
.sheet{border-collapse:collapse;font:400 19px/1.3 var(--serif);margin:8px 0 0;min-width:240px}
.sheet thead th{font:700 13px var(--sans);color:var(--ink-3);text-align:left;padding:0 16px 6px 0;border-bottom:1px solid var(--ink)}
.sheet tbody th{font:400 15px var(--sans);color:var(--ink-3);text-align:right;padding:5px 12px 5px 0;width:2.2em}
.sheet td{padding:5px 24px 5px 0;border-bottom:1px solid var(--rule);min-width:4.5em}
.sheet td.mk{color:var(--red);font-weight:700}
.sheet.two tbody{columns:2}

/* sections */
.sec{padding:40px 0 8px;border-top:1px solid var(--rule)}
.sec>p{max-width:46em}
.code-page .sec h2{font-size:28px}
.lines-sec{border-top:2px solid var(--ink)}

/* the road: ply strip */
.road{list-style:none;padding:0;margin:16px 0 24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0;border-left:1px solid var(--rule)}
.road li{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);border-top:1px solid var(--rule);margin-top:-1px;padding:10px 12px;min-height:72px;background:var(--card)}
.road .pm{display:block;font:700 19px var(--serif)}
.road li.mk .pm{color:var(--red)}
.road .stop{display:block;font-size:14px;line-height:1.35;margin-top:4px;color:var(--ink-2)}
.road .stop a{display:block;color:var(--ink-2);text-decoration:none}
.road .stop a:hover{color:var(--red-ink);text-decoration:underline}
.road .stop b{color:var(--ink);font-family:var(--serif);font-size:15px}
.road .stop.here b{color:var(--red)}
.road em.tr{display:block;font-style:italic;color:var(--ink-3)}
.road li.early .stop a{display:inline;color:var(--red-ink);text-decoration:underline}
.road li.named{background:var(--paper-2)}

/* tables */
table{border-collapse:collapse;width:100%;font-size:16px}
.lines,.codes,.sibs,.fm{margin:16px 0 24px}
.lines th,.codes th,.sibs th,.fm th{text-align:left;font:700 14px var(--sans);color:var(--ink-3);padding:8px 12px 8px 0;border-bottom:1px solid var(--ink)}
.lines td,.codes td,.sibs td,.fm td{padding:10px 12px 10px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.mvs{font-family:var(--serif);font-size:17px}
.fam{color:var(--ink-3)}
td.len{white-space:nowrap;font-variant-numeric:tabular-nums;min-width:120px}
.bar{display:inline-block;height:8px;width:calc(var(--w) * .7);max-width:70%;background:var(--ink);vertical-align:middle;margin-right:8px;border-radius:1px}
.sibs tr.cur td{background:var(--red-soft)}
.sibs tr.cur b{color:var(--red)}

/* position ledger */
.pos-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:40px;align-items:start}
.pos-text p{font:400 19px/1.55 var(--serif)}
.ledger{font-size:16px}
.ledger th,.ledger td{padding:9px 10px;border-bottom:1px solid var(--rule);text-align:left}
.ledger thead th{font:700 14px var(--sans);color:var(--ink-3);border-bottom:1px solid var(--ink)}
.ledger tbody th{font-weight:400;color:var(--ink-2)}
.ledger td{font:700 18px var(--serif);font-variant-numeric:tabular-nums}

.balance-fig{margin:0}
svg.balance{width:100%;max-width:460px;height:auto;display:block}
svg.balance .bh{font:700 17px var(--sans);fill:var(--ink)}
svg.balance .bl{font:15px var(--sans);fill:var(--ink-2);paint-order:stroke;stroke:var(--paper);stroke-width:5px;stroke-linejoin:round}
svg.balance .bv{font:700 17px var(--serif);fill:var(--ink)}
svg.balance .bc{font:15px var(--sans);fill:var(--ink-2)}
svg.balance .bw{fill:#fffdf8;stroke:var(--ink);stroke-width:1.2}
svg.balance .bb{fill:var(--ink)}
svg.balance .ax0{stroke:var(--red);stroke-width:1.5}

/* volume maps */
.maps{display:flex;flex-wrap:wrap;gap:24px;margin:16px 0}
.vmap-box{flex:0 0 auto}
.vmap-cap{font:700 15px var(--serif);margin:0 0 6px}
.vmap-cap a{color:var(--ink);text-decoration:none}
.vmap-cap a:hover{color:var(--red-ink);text-decoration:underline}
.vmap{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(10,18px);gap:2px}
.vmap li a{display:block;width:18px;height:18px;border-radius:2px;text-decoration:none;font-size:0;color:transparent}
.vmap .b1 a{background:var(--b1)} .vmap .b2 a{background:var(--b2)} .vmap .b3 a{background:var(--b3)} .vmap .b4 a{background:var(--b4)} .vmap .b5 a{background:var(--b5)}
.vmap li.mk a{box-shadow:inset 0 0 0 3px var(--red)}
.vmap li.cur a{background:var(--red)}
.vmap li a:hover{outline:2px solid var(--ink);outline-offset:0}
.vmap.big{grid-template-columns:repeat(10,minmax(0,1fr));gap:3px;max-width:1100px}
.vmap.big li a{width:auto;height:auto;min-height:64px;padding:6px 7px;font-size:13px;line-height:1.2;color:var(--ink);display:flex;flex-direction:column;justify-content:space-between}
.vmap.big .n{font:700 16px var(--serif)}
.vmap.big .t{font-size:12px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.vmap.big .b4 a,.vmap.big .b5 a{color:#fbf7ee}
.legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:14px;color:var(--ink-3);margin:0 0 12px}
.legend span{margin-right:4px}
.legend i{display:inline-block;width:14px;height:14px;border-radius:2px;vertical-align:middle;margin-left:6px}
.legend .b1{background:var(--b1)}.legend .b2{background:var(--b2)}.legend .b3{background:var(--b3)}.legend .b4{background:var(--b4)}.legend .b5{background:var(--b5)}

.notes{list-style:none;padding:0;margin:8px 0 24px;max-width:52em;columns:2 340px;column-gap:48px}
.notes li{break-inside:avoid;padding:8px 0;border-bottom:1px solid var(--rule);font:400 18px/1.45 var(--serif)}
.notes b{display:inline-block;min-width:4.6em;color:var(--red)}

/* transpositions, endnav */
.tlist{padding-left:20px;max-width:52em}
.tlist li{margin-bottom:10px}
.endnav{display:flex;justify-content:space-between;gap:16px;border-top:2px solid var(--ink);margin-top:40px;padding-top:16px;font:700 18px var(--serif)}
.endnav a{text-decoration:none;color:var(--ink);min-height:44px;display:inline-flex;align-items:center}
.endnav a:last-child{text-align:right;margin-left:auto}
.endnav a:hover{color:var(--red-ink)}
.tools{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;margin:24px 0 56px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;background:var(--ink);color:var(--paper);border:0;border-radius:3px;font:700 16px var(--sans);text-decoration:none;cursor:pointer}
.btn:hover{background:var(--red);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule-2)}
.btn.ghost:hover{background:var(--paper-2);color:var(--ink)}

/* hubs */
.hub-head{padding:32px 0 24px}
.hub-head h1{font-size:44px}
.hub-head h1 .num{display:inline;font-size:44px;margin:0 12px 0 0}
.hub-head h1 .nm{display:inline;font-size:44px}
.fam-grid{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:48px;align-items:start}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px}
.index{list-style:none;padding:0;margin:8px 0 16px}
.index li{display:flex;align-items:baseline;gap:8px;padding:6px 0;font:400 18px var(--serif)}
.index .dots{flex:1;border-bottom:1px dotted var(--rule-2);transform:translateY(-4px);min-width:16px}
.index .ix{font:700 16px var(--sans);font-variant-numeric:tabular-nums;color:var(--ink-2)}
.index.cols3{columns:3 280px;column-gap:48px}
.index.cols3 li{break-inside:avoid}
.tree{list-style:none;padding:0;margin:16px 0 24px;max-width:760px}
.tree li{display:grid;grid-template-columns:7.5em minmax(0,1fr) 3em;align-items:center;gap:12px;padding:6px 0;border-bottom:1px solid var(--rule)}
.tree>li>.mv{font:700 19px var(--serif)}
.tree .mv{font-family:var(--serif)}
.tree .bar{width:var(--w);max-width:100%;height:10px}
.tree .c{text-align:right;font-variant-numeric:tabular-nums}
.tree ol{grid-column:1/-1;list-style:none;padding:0 0 4px 1.5em;margin:0}
.tree ol li{border:0;padding:2px 0;font-size:15px}
.tree ol .bar{background:var(--b3);height:6px}

/* home */
.home-top{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:56px;padding:40px 0 32px;align-items:start}
.home-intro h1{font-size:46px;line-height:1.08}
.home-form{margin-top:24px}
.f-form label{display:block;font-weight:700;margin-bottom:8px}
.home-form .row{display:flex;gap:8px}
.home-form input{flex:1;min-width:0;min-height:48px;padding:0 14px;border:1px solid var(--ink-3);border-radius:3px;background:var(--card);font:400 18px var(--serif);color:var(--ink)}
.eg{font-size:15px;color:var(--ink-3);margin-top:10px}
.wall h2{font-size:22px;margin-bottom:8px}
.walls{display:flex;flex-wrap:wrap;gap:20px 16px}
.walls .vmap{grid-template-columns:repeat(10,20px)}
.walls .vmap li a{width:20px;height:20px}
.wall-note{font-size:15px;color:var(--ink-3);margin-top:12px}
.recs{list-style:none;padding:0;margin:16px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:32px 40px}
.rec{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;align-items:start}
.rec figure{margin:0}
.rec figcaption{font-size:14px}
.rec h3{margin-bottom:6px}
.rec p{font-size:16px;margin:0}
.study-list{padding-left:24px}
.study-list li{margin-bottom:8px;font:400 19px var(--serif)}
.study-list.big{list-style:none;padding:0;max-width:760px}
.study-list.big li{padding:16px 0;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:4px}
.study-list.big b{font-size:22px}
.study-list.big span{font:400 16px var(--sans);color:var(--ink-3)}

/* finder */
.tool-head{padding:32px 0 8px}
.tool-head h1{font-size:44px}
.finder{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:48px;align-items:start;padding:16px 0 40px}
.f-board{position:sticky;top:12px}
.f-ctrl{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.f-form textarea{width:100%;min-height:96px;padding:12px 14px;border:1px solid var(--ink-3);border-radius:3px;background:var(--card);font:400 19px/1.4 var(--serif);color:var(--ink);resize:vertical}
.f-form .btn{margin-top:10px}
.f-result{margin-top:28px;border-top:2px solid var(--ink);padding-top:20px}
.f-h{font-size:26px}
.f-name{font:700 28px/1.2 var(--serif);margin:0 0 8px}
.f-name .num{color:var(--red);margin-right:10px}
.f-moves{font:400 19px/1.7 var(--serif)}
.f-moves .ok{color:var(--ink)} .f-moves .named{color:var(--red);font-weight:700} .f-moves .bad{color:#fff;background:var(--red);padding:0 4px;border-radius:2px} .f-moves .out{color:var(--ink-3)}
.next{list-style:none;padding:0;margin:8px 0;display:flex;flex-wrap:wrap;gap:8px}
.mvbtn{min-height:40px;min-width:56px;padding:4px 12px;background:var(--card);border:1px solid var(--rule-2);border-radius:3px;font:700 17px var(--serif);color:var(--ink);cursor:pointer;text-align:left}
.mvbtn small{display:block;font:400 13px var(--sans);color:var(--ink-3)}
.mvbtn:hover{border-color:var(--ink)}
svg.live .sq{cursor:pointer}
svg.live .sel{fill:#a8321e;fill-opacity:.35}
svg.live .dot{fill:#1d1a16;fill-opacity:.35;pointer-events:none}
.how .cols{columns:3 300px;column-gap:40px}
.how .cols p{break-inside:avoid}

/* guides & prose */
.g-head{max-width:760px;padding:40px 0 16px}
.g-head h1{font-size:46px}
.dek{font:400 22px/1.45 var(--serif);color:var(--ink-2)}
.byline{font-size:15px;color:var(--ink-3)}
.prose{max-width:720px;font-size:18px;line-height:1.65;padding-bottom:56px}
.prose h2{font-size:28px;margin-top:40px}
.prose .answer{font:400 22px/1.5 var(--serif)}
.prose ul{padding-left:22px}
.prose li{margin-bottom:8px}
.prose table{font-size:16px}
.prose td:last-child{white-space:nowrap}
.prose .src{font-size:16px;color:var(--ink-2)}
.hbars{margin:24px 0}
.hbars ol{list-style:none;padding:0;margin:0}
.hbars li{display:grid;grid-template-columns:minmax(0,13em) minmax(0,1fr) 4.5em;gap:4px 12px;align-items:center;padding:5px 0;border-bottom:1px solid var(--rule);font-size:16px}
.hb-l{font-family:var(--serif);font-size:17px}
.hb-b .bar{width:var(--w);max-width:100%;margin:0;height:12px}
.hb-v{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.hb-n{grid-column:1/-1;font-size:14px;color:var(--ink-3)}
.chart{margin:24px 0}
svg.hist{width:100%;height:auto;display:block}
svg.hist .hb{fill:var(--ink)}
svg.hist .grid{stroke:var(--rule);stroke-width:1}
svg.hist .ax{font:13px var(--sans);fill:var(--ink-3)}

/* colophon */
.colophon{border-top:1px solid var(--ink);margin-top:24px;padding:24px 0 40px;font-size:15px;color:var(--ink-2)}
.colophon p{margin:0 0 10px;max-width:60em}
.col-nav{display:flex;flex-wrap:wrap;gap:4px 20px}
.col-nav a{color:var(--ink);min-height:40px;display:inline-flex;align-items:center}
.col-by{color:var(--ink-3)}

/* ----- tablet & phone ----- */
@media (max-width:1024px){
  .plate,.finder{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px}
  .home-top{grid-template-columns:minmax(0,1fr)}
  .pos-grid{grid-template-columns:minmax(0,1fr)}
  .vmap.big .t{display:none}
  .vmap.big li a{min-height:48px}
}
@media (max-width:760px){
  :root{--gut:16px}
  body{font-size:17px}
  .mast-in{min-height:56px;gap:0 12px}
  .nav{gap:0 18px;font-size:15px;width:100%}
  .vols{order:2;width:100%;border-top:1px solid var(--rule)}
  .vols-l{display:inline;font-size:14px}
  .vols a{width:40px}
  .plate,.finder,.fam-grid,.split{grid-template-columns:minmax(0,1fr);gap:24px}
  .plate{padding-top:16px}
  .plate{display:flex;flex-direction:column;gap:16px}
  .plate-text{display:contents}
  .plate-text h1{order:1;margin:0}
  .plate-text .also{order:2;margin:0}
  .plate-board{order:3;max-width:420px;width:100%;margin:0 auto}
  .plate-text .lede{order:4;margin:0}
  .plate-text .sheet{order:5}
  h1 .num{font-size:64px}
  h1 .nm{font-size:27px}
  .lede{font-size:19px}
  .hub-head h1,.hub-head h1 .num,.hub-head h1 .nm,.tool-head h1,.g-head h1,.home-intro h1{font-size:34px}
  .runhead{font-size:14px}
  .road{grid-template-columns:minmax(0,1fr);border-left:0}
  .road li{border-left:1px solid var(--rule);display:grid;grid-template-columns:6.5em minmax(0,1fr);gap:12px;min-height:0;padding:8px 12px}
  .road .stop{margin-top:0}
  /* tables become labelled rows */
  .lines thead,.codes thead,.sibs thead,.fm thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .lines tr,.codes tr,.sibs tr,.fm tr{display:block;border-bottom:1px solid var(--rule);padding:10px 0}
  .lines td,.codes td,.sibs td,.fm td{display:grid;grid-template-columns:8.5em minmax(0,1fr);gap:12px;border:0;padding:3px 0}
  .lines td::before,.codes td::before,.sibs td::before,.fm td::before{content:attr(data-l);font:700 13px var(--sans);color:var(--ink-3);padding-top:3px}
  td.len{min-width:0}
  .lines td.nmc{display:block;font-weight:700;padding-bottom:4px}
  .lines td.nmc::before{display:none}
  .lines td.empty{display:none}
  .lines td.len .bar{display:none}
  .road .pm{white-space:nowrap;font-size:17px}
  .lines tr{padding:12px 0}
  .ledger td,.ledger th{padding:8px 6px}
  .sheet.two tbody{columns:1}
  .vmap{grid-template-columns:repeat(10,minmax(0,1fr));width:100%}
  .vmap li a{width:auto;height:auto;aspect-ratio:1}
  .vmap-box{flex:1 1 100%}
  .walls{gap:16px}
  .walls .vmap{grid-template-columns:repeat(10,minmax(0,1fr))}
  .walls .vmap li a{width:auto;height:auto}
  .walls .vmap-box{flex:0 1 calc(50% - 8px);min-width:0}
  .vmap:not(.big) li a{pointer-events:none}
  .vmap-cap a{display:inline-flex;min-height:40px;align-items:center}
  .vmap.big{grid-template-columns:repeat(5,minmax(0,1fr))}
  .vmap.big li a{min-height:48px;aspect-ratio:auto;padding:4px 6px}
  .vmap.big .n{font-size:15px}
  .recs{grid-template-columns:minmax(0,1fr)}
  .rec{grid-template-columns:110px minmax(0,1fr)}
  .tree li{grid-template-columns:6.5em minmax(0,1fr) 2.5em;gap:8px}
  .hbars li{grid-template-columns:minmax(0,1fr) 4em}
  .hb-b{grid-column:1/-1;grid-row:2}
  .f-board{position:static}
  .f-ctrl .btn{padding:0 12px;font-size:15px}
  .prose{font-size:17px}
  .prose .answer{font-size:20px}
  .endnav{flex-direction:column;gap:4px}
  .endnav a:last-child{margin-left:0;text-align:left}
}