@font-face{font-family:"Nodus Five";src:url(data:font/woff;base64,d09GRgABAAAAAAvwAAoAAAAAITwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABZAAAADcAAABgZvbriGNtYXAAAAHQAAAAXQAAAHxPej7AZ2x5ZgAAAwQAAAcXAAAY+G/vYWhoZWFkAAAA9AAAADYAAAA2LvpAtmhoZWEAAAEsAAAAHgAAACQE5AIoaG10eAAAAZwAAAAyAAAA1AcIBapsb2NhAAACMAAAANQAAADUSXZPjm1heHAAAAFMAAAAGAAAACAAdQAubmFtZQAAChwAAABaAAAAaeInJrpwb3N0AAAKeAAAAXUAAAQsracYWwABAAAAAQAAL5d+sl8PPPUAAwMgAAAAAObe/vEAAAAA5t7+8QAAAAACJgK8AAAAAwACAAAAAAAAeJxjYGRgYNrzfw6QjGBgYDBiUmMAiqAARgBWywMRAAB4nGNgZGBgyGTQYeBmAAEmBjQAABC9AKR4nGNgZopgnMDAysDCQAA0MDAwMzAowPn2QACkFFQXMO35P4eBgWkPQwpMjvELkAdWDAAbJgjKAHicY4pgMGJgYDjBkMIAAylgCGExILFQQQpOGdyimGrw6cZvRgrQzSBwAsM9KQCgCgq1AAB4nGNgYGBiYGBgBmIRIMkIplkYMoC0GIMAUISNIZ6hjmE7wzGG6wzPFCQVZBUUVBf8/w+UV2BIhItLKMhAxP8//P/g/4r/s/53/a954P3A84H7rRNgU7EAADExHrAAAAAAAAANAA0AHwAyAFwAjAC3APkBCgEsAUwBYgF2AYoBlwGjAcMB8QIHAjICXwKAAqQCzALsAxoDQQNSA2sDlgOpA9MD+QQhBD4EYASGBJ8EtgTKBO4FBQUbBTgFaAV3BZgFuQXYBfMGIQZKBm0GfgaYBrwG4AcYBzsHYgd0B5QHpgfHB9MH9AgPCC8ITAhsCIsIqwjHCOAJAAklCTkJWQl1CZQJrgnHCeIKBQomCkMKZwqKCsAK3Qr+Cx8LLAtLC20LeQuaC9AL/gwPDCAMPQxZDG4MfHicrVhLbttIEG3a4QhGHASEQAiDWQwIIePFaJMQgi/gQ/gAfQAdRcfIIXKAPoCPoq2FqfeqqtlNUXIWI4MWJTWrq169+nVowo8Q7v65+xXuQxi7ofvRnO5+vb/IlyGF0Oz4yyqE9dht+7Hfpiivu1/nxxixJjbH5liuwSUrEhe9Nbvzm6ySF8SGv8LfWNWP+xGyeG33vPYjro18F+sXJaWEfZO+Yef7SuZWpZpEk6oSca3kY0vd7Xl7E+UhPF7sGGCNyYdln8PXsA4b2St0IuebXN9FZl9cA+QnCKTgXUqidS02iJxlqbDgKfxLKyh5sPeVvI9yPZkFz3K1pgGsaHbFBvbh/CZ67GiY28kbg059VvhVd0p0awK2bZB/2auqZWjc5m7brU2rcneFUT0uQhZl+HOjcMTxi7UIPAwtGwEqClKvwGw99GDfsN92I63EqrtXvjW72dpx8j/9LY545Q0sB6PliTY8qDb77QY6JPOZcqvhqlNzBMu6oR+a0/lRPItfKEEiQ355Vh+kBMRcgyXEisv5IcoXLz7vvPjsTBOrh+8djekGsb8zJt/L91Fhji6PnwU/IgJtd+qNrDM8QXRE4LAfO6KjaEu4/6SkEP5Y4KdrUrBSrRkgaK+aqB5y+6hEKJhfSq0jaaCfhlb+bYwZ4PVIxJVLJuN8mEzMQUouu+Qu9EBc4doPyC8e+RkLT10HeE0/hU8XutHj+APmkz7ng+x/gJ21MoQwVB5cmY05toiVeBGRO8htYuQabBoybphkEFC10Atc/SL2ES9Fq7c4FJRUpVjkGsi7kb9KXw6z+7lStX4EDcot25pldcB/cMbXMmOiIEDomRxRKYssdohZ75HFyJXvGXVcASzyGo9eTXNcrDLV+uOl9fOY3OSMVGezKaMVPAbbkuSFk2rqPGG88bK94xXki73GmR7x1tbLcbm5EpfArojJWAZkumDqF40czTXMMwNjaGxLPkhJKYhAcw+AKxkqLu+r68QUI6K2HWVYzqbv339SzGtZw2eRR1TNx81R9/Xo07omf8qNdgGZwhp5Xu6/VZi4PEqi25ARKksgidow+4sppsXBGgakudfzIyuPW1Brr/niTZ57NH1DsfphWi2yba0aJv3Sp5lNM4tWopVEWGFRomq75PbQoDDTjp5Vp8TsD1j1/sIura4TSFdWKaaKS8Mj+V9nTV0vf/fGbTYgUXu2zJhY9VV1/wP9RshoZlz2aIlltTNei1JF5oyxwrhVm8FiOkGKXKW3Mo7dAna1+lrtlKwnwdMvwDXdloCK83QpQZx6gATVcO7dr1X0LeZhR/CxrHjMhAWLiljxvhZskjD5qBrYzk+G9Nb7y4lfCnBuK92dswqqueTPrBW7MNXM+1jVsPYlFY2qarqspWVMI2OzMoMjwx6ePcQpwxy8StVM0FxNfjanxBL0/pPVpN4HfKEf6YMKf6wHgZZ1y88BOeva/XlvyzEy0YWK2k0593JtrduPpQe0WYMq1v8hk1ydKPKsUurl04TPLHM99aUESqmcYHKnu6D3fJ9uwX6Xdj4UUry72Vz0N7nHnLocDeSLqWrKXKspc3EEs9CJVzr0blaRPc8UOebVKvBsj84zI4YtxDayYosVF7xdwDxbMJs/nbOBmWpvvUXMeYuZl73gWvtT1IFBMfMosLrD0D3FHKXzvDH2RXWLZYFlvkLcT5XIOp4qV62ruppjEHvq7nVF5a4NNcbVons9lsoqiDvvXxctZl/BTnrtWZIW2/YnhgilVbGd/fBdUzUSvc3r6gmflq1FLfF+8N21q90zBzWae6YuGZsb1Jx+L+qjV7e1Tb8WTylXMfrKJlTtW63PXeWJjdXUC7FZbR7SJ0xXzbcwM2ddK8a5HhP4Itceq3ps2vZTLS5rcM4SOkkZ6rGIkIdyzswqc8g8hYJT02STsXF8UjFCWvwnurpkRsa2v4KtTZGE9haXr9XdiczOZGPE1Otd1l0FBOP07JmaQyV/JMh1cPnAtn7JtlxLCst+t15SV8twF934epzCZZ2rUa4Fnik0AlOsY9ZZn/uiNtcaO6FC13vUerhswe9UVZFiJ04fy3my3mahqpoyB+YDr6mVlKqm+knF/IRuqqmxLqcxM6MuXouYQbbP0OKzio95dJ7Hwbo+T/HTmXyOwqOZyd1xOueb1auy//bpGKXU/W4tVrSJZjoj5umvdigvZV65Um99j9xjJJ2T2AK21aS9UEnbGR8N7GxgQj5KOOvTU7y1Vl1E5dQX6tzrZ8YYVtE5jJisjggyo5XNbzq1ogd6WOgl/g9+oNmY86NkdDErUSZO0eFxnnQBjXzObafljsWUltRxdkpy8yQ4wtKPz4o/sec5VtNMYfG3mY+UPbeefLYofdJTEccjt4+sM3E6z5xyVPKVUfvFvJKdPno286EM7v8BtrU+mQB4nC2IQQqAIAAERxOiDkHQA7r0hZ7g0YM/EJIQBMHQ96fRwC67AyhOBB3B/HVHMrY3INTUzMb6b8nCYdJVnl2H6q2/S3QZQ+Ki8LCjCVQ8tuVuLuLIL8D7DeIAAHicfc9XU1UxFEBhFqjYFXtHEHs79yQ7udcGt2HvvffCi2/+fx1Yz2Yms2Y/JF8yMTnx/7Xyb08xyRTrWM8GptnIJjazha1sYzs72MkMu9jNHvayj/0c4CCHOMwRjnKMWY4zxzwnWOAkpzjNGc5yjvNc4CKXuExDh5ZEJihUuvS4wlWucZ0bLLJEnwFDRoxZ5ia3uM0d7nKP+zzgIY94zBOe8oznvOAlr3jNG97yjvd84COf+MwXvvKN7/zgJ7+m//xeaZq2Y1ubbLZhi622a3u2bwd2aEd2bJfXmhqrn/STftJP+kk/6Sf9pJ/0k37ST/pJP+ln/ayf9bN+1s/6WT/rZ/2sn/WzftbP+lk/64d+6Id+6Id+6Id+6Id+6Id+6Id+6Id+6Bfdolt0i27RLbpFt+gW3aJbdItu0S26Rbf676pf9at+1a/6Vb/qV/2qX/WrftWv+lV/4Pmh942cx6tz23S6tmeHdrTWdvXdbfSbv+6w8e0AAAA=) format("woff");font-display:block}
:root{
  color-scheme:dark;
  --void:#0D0221;--ichor:#F22C70;--signal:#38D0DA;--grace:#D6F6FC;
  --px:"Nodus Five",ui-monospace,"Courier New",monospace;
  --bl:"Jacquarda Bastarda 9","UnifrakturMaguntia","Old English Text MT",serif;
  --fell:"IM Fell English","EB Garamond",Garamond,Georgia,serif;
  --fellsc:"IM Fell English SC","IM Fell English",Georgia,serif;
  --gut:16px;--max:1216px;--bar:52px;
  --d25s:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges' fill='%2338D0DA'%3E%3Crect x='0' y='0' width='2' height='2'/%3E%3Crect x='4' y='4' width='2' height='2'/%3E%3Crect x='4' y='0' width='2' height='2'/%3E%3Crect x='0' y='4' width='2' height='2'/%3E%3C/svg%3E");
  --d12s:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges' fill='%2338D0DA'%3E%3Crect x='0' y='0' width='2' height='2'/%3E%3Crect x='4' y='4' width='2' height='2'/%3E%3C/svg%3E");
  --d25v:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges' fill='%230D0221'%3E%3Crect x='0' y='0' width='2' height='2'/%3E%3Crect x='4' y='4' width='2' height='2'/%3E%3Crect x='4' y='0' width='2' height='2'/%3E%3Crect x='0' y='4' width='2' height='2'/%3E%3C/svg%3E");
  --d12v:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges' fill='%230D0221'%3E%3Crect x='0' y='0' width='2' height='2'/%3E%3Crect x='4' y='4' width='2' height='2'/%3E%3C/svg%3E");
  --d50g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges' fill='%23D6F6FC'%3E%3Crect x='0' y='0' width='2' height='2'/%3E%3Crect x='2' y='2' width='2' height='2'/%3E%3C/svg%3E");
  --d50s:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges' fill='%2338D0DA'%3E%3Crect x='0' y='0' width='2' height='2'/%3E%3Crect x='2' y='2' width='2' height='2'/%3E%3C/svg%3E");
  --d50v:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges' fill='%230D0221'%3E%3Crect x='0' y='0' width='2' height='2'/%3E%3Crect x='2' y='2' width='2' height='2'/%3E%3C/svg%3E");
  --d25i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges' fill='%23F22C70'%3E%3Crect x='0' y='0' width='2' height='2'/%3E%3Crect x='4' y='4' width='2' height='2'/%3E%3Crect x='4' y='0' width='2' height='2'/%3E%3Crect x='0' y='4' width='2' height='2'/%3E%3C/svg%3E");
  --d50i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges' fill='%23F22C70'%3E%3Crect x='0' y='0' width='2' height='2'/%3E%3Crect x='2' y='2' width='2' height='2'/%3E%3C/svg%3E");
  --dots-s:linear-gradient(90deg,var(--signal) 2px,transparent 2px);
}
@media (min-width:760px){:root{--gut:32px}}
html{background:var(--void);scroll-padding-top:calc(var(--bar) + 16px)}
body{background:var(--void);color:var(--grace);font-family:var(--fell);font-size:18px;line-height:1.62;margin:0;-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;min-height:100vh;display:flex;flex-direction:column}
body > main{flex:1 0 auto}
@media (min-width:760px){body{font-size:20px}}
::selection{background:var(--ichor);color:var(--void)}
a{color:var(--signal);text-decoration-thickness:2px;text-underline-offset:4px}
a:hover{color:var(--grace)}
:focus-visible{outline:2px solid var(--ichor);outline-offset:3px}
[hidden]{display:none!important}
img{max-width:100%}
img,canvas{image-rendering:pixelated;image-rendering:crisp-edges}
canvas{display:block}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{box-sizing:border-box;width:100%;max-width:calc(var(--max) + 2 * var(--gut));margin-inline:auto;padding-inline:var(--gut)}
.px{font-family:var(--px);font-size:16px;line-height:24px;letter-spacing:0;font-weight:400;-webkit-font-smoothing:none;font-synthesis:none}
.c-s{color:var(--signal)}.c-i{color:var(--ichor)}.c-g{color:var(--grace)}
.skip{position:absolute;left:8px;top:-80px;z-index:120;background:var(--ichor);color:var(--void);padding:6px 12px;text-decoration:none}
.skip:focus{top:8px;color:var(--void)}

/* ------------------------------------------------------------------ redaction */
.rd{cursor:default;-webkit-user-select:none;user-select:none;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.rd i{display:inline-block;vertical-align:-.08em;height:.8em;width:calc(var(--w) * .5em);background:var(--void) var(--d50s);background-size:4px 4px}
.px .rd i,.hudtxt .rd i,.mlab .rd i,.pin .rd i,.rd.pxr i{height:12px;width:calc(var(--w) * 10px);vertical-align:-1px}
.rdb{display:grid;gap:12px;margin:0 0 18px}
.rdb .rdp{margin:0}
.rdx.first::first-letter{all:unset}
.chap-title .rd i,.char-n .rd i,.fac-n .rd i,.corp-n .rd i,.pop-t .rd i,.ch-t .rd i,.chip .rd i,.pg .tt .rd i{height:.62em}
.bars{display:inline-flex;gap:.5em;vertical-align:-.08em}
.bars i{display:block;height:.8em;background:var(--void) var(--d50s);background-size:4px 4px}
.px .bars{gap:10px;vertical-align:-1px}.px .bars i{height:12px}

/* ------------------------------------------------------------------ bar */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:var(--void)}
.bar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--dots-s);background-size:4px 2px}
.bar-in{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);height:var(--bar);display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;white-space:nowrap;color:var(--signal)}
.brand svg{display:block;width:32px;height:32px;flex:none;shape-rendering:crispEdges}
.brand b{font-weight:400;color:var(--ichor)}
.brand:hover b{color:var(--grace)}
.links{display:flex;gap:4px;margin-left:auto}
.links a{color:var(--signal);text-decoration:none;padding:6px 10px;white-space:nowrap}
.links a:hover{color:var(--grace)}
.links a.on{color:var(--void);background:var(--signal)}
/* the theme's switch: a speaker in SIGNAL with its waves dotted out while the theme is off; ICHOR with its waves
   whole while it plays, and the waves blinking while it loads */
.thm{display:inline-flex;align-items:center;gap:8px;flex:none;margin:0;padding:6px 8px;border:0;background:none;color:var(--signal);cursor:pointer;white-space:nowrap}
.thm svg{display:block;width:24px;height:24px;flex:none;shape-rendering:crispEdges}
.thm .w,.thm[aria-pressed="true"] .wd{display:none}
.thm[aria-pressed="true"]{color:var(--ichor)}
.thm[aria-pressed="true"] .w{display:inline}
.thm.wait .w{animation:thm-wait .5s steps(1) infinite}
@media (hover:hover){.thm:hover{color:var(--grace)}}
@keyframes thm-wait{50%{visibility:hidden}}
.fnd{display:inline-flex;align-items:center;flex:none;margin:0 -12px 0 0;padding:6px 8px;border:0;background:none;color:var(--signal);cursor:pointer}
.fnd svg{display:block;width:24px;height:24px;flex:none;shape-rendering:crispEdges}
.fnd .gl{opacity:.6}
@media (hover:hover){.fnd:hover{color:var(--grace)}}
@media (prefers-reduced-motion:reduce){.thm.wait .w{animation:none}}
@media (max-width:759px){
  :root{--bar:48px}
  .brand{gap:0}
  .brand b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .bar-in{gap:10px}
  .links{flex:1;justify-content:space-between;margin-left:0;gap:0}
  .links a{padding:12px 6px}
  .thm{padding:12px 2px 12px 6px}
  .fnd{padding:12px 4px;margin:0 -6px 0 0}
}
@media (max-width:399px){.bar-in{gap:6px}.links a{padding:12px 4px}}
@media (max-width:359px){.bar-in{gap:4px;padding-inline:8px}.brand svg{width:20px;height:20px}.links a{padding:12px 3px}.thm{padding:12px 0 12px 2px}.thm svg{width:20px;height:20px}}

/* ------------------------------------------------------------------ page heads, breadcrumbs, pagers */
.ph{display:grid;gap:6px;padding-block:32px 26px}
.ph-k{margin:0;color:var(--signal)}
.ph-k a{color:var(--signal);text-decoration:none}
.ph-k a:hover{color:var(--grace);text-decoration:underline}
.ph-t{margin:0;font-family:var(--px);font-weight:400;font-size:32px;line-height:40px;color:var(--grace);-webkit-font-smoothing:none}
.ph-d{margin:6px 0 0;max-width:60ch;font-style:italic;font-size:1.06em;line-height:1.5}
@media (min-width:760px){.ph{padding-block:64px 44px}.ph-t{font-size:48px;line-height:56px}}
.ph.tight{padding-block:28px 18px}
@media (min-width:760px){.ph.tight{padding-block:36px 22px}}
.crumbs{margin:0;padding-block:28px 0;color:var(--signal)}
.crumbs a{color:var(--signal);text-decoration:none}
.crumbs a:hover{color:var(--grace);text-decoration:underline}
.pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:80px 0 0}
.pg{display:grid;align-content:start;gap:4px;padding:14px 16px 16px;border:2px solid var(--signal);text-decoration:none;color:var(--grace);min-width:0}
.pg .px{color:var(--signal)}
.pg .tt{font-family:var(--fellsc);font-size:21px;line-height:1.25;overflow-wrap:anywhere}
.pg.next{text-align:right}
.pg.none{visibility:hidden}
@media (hover:hover){.pg:hover{border-color:var(--grace);background:var(--void) var(--d12s);background-size:8px 8px}.pg:hover .tt{color:var(--grace)}}
@media (max-width:560px){.pager{grid-template-columns:1fr;margin-top:56px}.pg.next{text-align:left}.pg.none{display:none}}

/* buttons */
.btn{font-family:var(--px);font-size:16px;line-height:24px;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:2px solid var(--signal);color:var(--signal);background:var(--void);text-decoration:none;cursor:pointer;white-space:nowrap;-webkit-font-smoothing:none}
.btn:hover{background:var(--signal);color:var(--void)}
.btn.hot{border-color:var(--ichor);color:var(--ichor)}
.btn.hot:hover{background:var(--ichor);color:var(--void)}
.btn.grace{border-color:var(--grace);color:var(--grace)}
.btn.grace:hover{background:var(--grace);color:var(--void)}
.btn.on,.btn[aria-current]{background:var(--signal);color:var(--void)}
@media (pointer:coarse){.btn{padding:8px 14px}.mz{min-height:44px}}
.acts{display:flex;flex-wrap:wrap;gap:8px}

/* ------------------------------------------------------------------ hero */
.hero{position:relative;background:var(--void);overflow:hidden}
.hero canvas{position:absolute;left:0;top:0}

/* ------------------------------------------------------------------ mirrors */
/* the platforms: each one's name in the pixel face over a dithered glow, its record light set in the glow. Six across on a
   desktop, three on a tablet, two on a phone; the name steps down a size wherever the tile runs narrow */
.mirrors{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.mirror{box-sizing:border-box;display:flex;align-items:center;justify-content:center;height:80px;padding:0 8px 12px;border:2px solid var(--signal);text-decoration:none;color:var(--grace);background-color:var(--void);background-image:var(--d25s),var(--d12s);background-size:8px 8px,8px 8px;background-repeat:repeat-x,repeat-x;background-position:left bottom,left calc(100% - 8px);min-width:0;position:relative}
.mirror::after{content:"";position:absolute;right:8px;bottom:4px;width:8px;height:8px;background:var(--ichor)}
.mirror .m-n{font-family:var(--px);font-size:24px;line-height:32px;white-space:nowrap;-webkit-font-smoothing:none}
@media (hover:hover){.mirror:hover{background-color:var(--signal);background-image:var(--d25v),var(--d12v);color:var(--void)}.mirror:hover::after{background:var(--void);animation:blink 1s steps(1,end) infinite}}
.mirror:active{background-color:var(--signal);background-image:var(--d25v),var(--d12v);color:var(--void)}
@keyframes blink{50%{visibility:hidden}}
@media (max-width:1239px){.mirror .m-n{font-size:16px;line-height:24px}}
@media (max-width:939px){.mirrors{grid-template-columns:repeat(3,minmax(0,1fr))}.mirror{height:64px}.mirror .m-n{font-size:24px;line-height:32px}}
@media (max-width:600px){.mirrors{grid-template-columns:1fr 1fr;gap:10px}}
@media (max-width:429px){.mirror{height:56px}.mirror .m-n{font-size:16px;line-height:24px}}

/* ------------------------------------------------------------------ home */
.home-sec{padding-top:72px}
.home-sec.first{padding-top:44px}
@media (max-width:759px){.home-sec{padding-top:52px}.home-sec.first{padding-top:32px}}
.kick{margin:0 0 16px;color:var(--signal)}
.doors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;container-type:inline-size}
/* four doors of one size, each under its mark, one to each section of the bar: the files, the survey, the Record
   and the index. The doors of a row share its rows, so each title, line and count stands level with its neighbours' */
.door{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:8px;padding:18px 18px 16px;border:2px solid var(--signal);text-decoration:none;color:var(--grace);background:var(--void);min-width:0;position:relative}
@supports not (grid-template-rows:subgrid){.door{grid-row:auto;grid-template-rows:auto auto 1fr auto}}
.door::after{content:"";position:absolute;right:10px;top:10px;width:8px;height:8px;background:var(--signal)}
.door canvas.sigil{width:96px;height:96px;margin:0 0 6px}
.door-t{font-family:var(--bl);font-size:36px;font-size:min(36px,calc(3.8cqi - 7.5px));line-height:1.02;color:var(--grace);text-wrap:balance;align-self:end}
.door-d{font-size:17px;line-height:1.45}
.door-c{color:var(--ichor);margin-top:8px;align-self:end}
@media (hover:hover){.door:hover{border-color:var(--grace)}.door:hover::after{background:var(--ichor)}.door:hover .door-t{color:var(--signal)}}
@media (max-width:899px){.doors{grid-template-columns:repeat(2,minmax(0,1fr))}.door-t{font-size:min(36px,calc(7.6cqi - 7px))}}
/* on a phone each door is a row: its title, line and count, with its mark beside them on the right */
@media (max-width:560px){
  .doors{grid-template-columns:1fr;gap:10px}
  .door{--sig:72px;grid-row:auto;grid-template-rows:auto auto auto;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t s" "d s" "c s";column-gap:16px;row-gap:6px;padding:16px 16px 14px}
  .door canvas.sigil{grid-area:s;align-self:center;width:72px;height:72px;margin:8px 4px 0 0}
  .door-t{grid-area:t;align-self:start;font-size:32px}
  .door-d{grid-area:d}
  .door-c{grid-area:c;margin:2px 0 0}
}

/* ------------------------------------------------------------------ file cards */
.fgrid{display:grid;gap:28px}
@media (min-width:1100px){.fgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}}
.fcard{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto auto 1fr;grid-template-areas:"cv hd" "cv mt" "cv ig" "cv ac" "cv .";gap:0 28px;padding:20px;border:2px solid var(--signal);position:relative;min-width:0}
.fcard::before,.fcard::after{content:"";position:absolute;width:12px;height:12px;border:2px solid var(--grace)}
.fcard::before{left:-6px;top:-6px;border-right:0;border-bottom:0}
.fcard::after{right:-6px;bottom:-6px;border-left:0;border-top:0}
.fc-cover{grid-area:cv;display:block;align-self:start;background:var(--void);line-height:0;position:relative;--cw:180}
.fc-head{grid-area:hd;min-width:0;container-type:inline-size}
.fcard .meta{grid-area:mt}
.fcard .integ{grid-area:ig}
.fcard .acts{grid-area:ac;margin-top:22px}
/* a title sizes itself to its column, so its longest word stays inside the card */
.fcard .file-title{font-size:44px;font-size:min(44px,15.4cqi)}
.fcard .file-title a{color:inherit;text-decoration:none}
.fcard .file-title a:hover{color:var(--signal)}
@media (min-width:760px){.fcard .file-title{font-size:52px;font-size:min(52px,15.4cqi)}}
@media (max-width:640px){
  .fcard{grid-template-rows:auto;grid-template-areas:"cv hd" "mt mt" "ig ig" "ac ac";gap:0 16px;padding:16px}
  .fc-cover{--cw:120}
  .fcard .file-title{font-size:36px;font-size:min(36px,15.4cqi)}
  .fcard .file-line{font-size:1em;margin-top:8px}
}
.fcard.pending{border-style:dashed}
.fcard.pending::before,.fcard.pending::after{border-color:var(--signal)}
.fcard.pending .file-title{color:var(--signal)}
.dots::after{content:"";animation:dots 1.6s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.integ .bar2.busy i{right:2px;width:auto!important;background:var(--void) var(--d50s);background-size:4px 4px;animation:crawl 1s steps(4) infinite}
@keyframes crawl{from{background-position:0 0}to{background-position:4px 0}}

/* shared file header */
.file-top{display:grid;gap:24px;align-items:start}
@media (min-width:760px){.file-top{grid-template-columns:auto minmax(0,1fr);gap:44px}}
.cover{position:relative;display:inline-flex;justify-self:start;background:var(--void);border:2px solid var(--signal);padding:12px;text-decoration:none}
.cover::before,.cover::after{content:"";position:absolute;width:12px;height:12px;border:2px solid var(--grace)}
.cover::before{left:-6px;top:-6px;border-right:0;border-bottom:0}
.cover::after{right:-6px;bottom:-6px;border-left:0;border-top:0}
.cover .play{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);background:var(--ichor);color:var(--void);padding:2px 10px;white-space:nowrap}
.file-id{margin:0;color:var(--signal)}
.file-info{min-width:0;container-type:inline-size}
.file-title{margin:2px 0 0;font-family:var(--bl);font-weight:400;font-size:48px;font-size:min(48px,15.4cqi);line-height:1.02;color:var(--grace);text-wrap:balance}
@media (min-width:760px){.file-title{font-size:63px;font-size:min(63px,15.4cqi)}}
.file-line{margin:14px 0 0;font-style:italic;font-size:1.12em;line-height:1.45;max-width:36ch}
.meta{display:grid;grid-template-columns:auto 1fr;gap:0 16px;margin:20px 0 0}
.meta dt{color:var(--signal)}
.meta dd{margin:0;color:var(--grace)}
.integ{display:flex;align-items:center;gap:12px;margin-top:12px;max-width:440px}
.integ .bar2{flex:1;height:14px;border:2px solid var(--signal);position:relative}
.integ .bar2 i{position:absolute;left:2px;top:2px;bottom:2px;background:var(--ichor)}
.file-top .acts{margin-top:24px}
.btn.watch{font-size:24px;line-height:32px;padding:8px 22px;border-color:var(--ichor);color:var(--void);background:var(--ichor)}
.btn.watch:hover{background:var(--void);color:var(--ichor)}
.btn.big{font-size:24px;line-height:32px;padding:8px 18px}

/* ------------------------------------------------------------------ notes */
.notes{margin-top:64px}
.notes-h{display:flex;align-items:center;gap:14px;margin:0;padding:12px 16px;border:2px solid var(--signal);background:var(--void) var(--d12s);background-size:8px 8px;font-weight:400}
.notes-h .sum-k{background:var(--signal);color:var(--void);padding:0 8px}
.notes-h .sum-t{background:var(--void);color:var(--signal);padding:0 8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:420px){.notes-h .sum-t{display:none}}
.note-body{padding-top:32px}
.note-grid{display:grid;gap:32px}
@media (min-width:1000px){.note-grid{grid-template-columns:auto minmax(0,1fr);gap:48px;align-items:start}}
.viewer{display:grid;gap:10px;justify-items:center;align-content:start}
@media (min-width:1000px){.viewer{position:sticky;top:calc(var(--bar) + 24px)}}
.viewer-box{position:relative;border:2px solid var(--signal);padding:10px;background:var(--void)}
.viewer-cap{margin:0;color:var(--signal);max-width:380px;text-align:center;min-height:48px}
.viewer-ctl{display:flex;gap:8px}
@media (max-width:999px){.viewer{display:none}}
.note-text{max-width:70ch;min-width:0}
.note-text h3{font-family:var(--fellsc);font-weight:400;font-size:26px;line-height:1.2;color:var(--grace);margin:44px 0 12px;text-wrap:balance}
.note-text h3 .px{color:var(--signal);display:block;margin-bottom:4px}
.note-text p{margin:0 0 18px}
.note-text .sig{color:var(--signal);margin-top:28px}
.lede{font-size:1.12em;line-height:1.55}
.tbl{overflow-x:auto;margin:18px 0 26px;border-top:2px solid var(--signal)}
table.beats{border-collapse:collapse;width:100%;min-width:560px;font-size:17px;line-height:1.5}
table.beats th{font-family:var(--px);font-weight:400;font-size:16px;color:var(--signal);text-align:left;padding:10px 12px 8px;border-bottom:2px solid var(--signal);-webkit-font-smoothing:none;white-space:nowrap}
table.beats td{padding:12px;vertical-align:top;background-image:var(--dots-s);background-size:4px 2px;background-repeat:repeat-x;background-position:0 100%}
table.beats td:first-child{white-space:nowrap}
table.beats tr.act td:first-child .tc{background:var(--ichor);color:var(--void);border-color:var(--ichor)}
.tc{font-family:var(--px);font-size:16px;line-height:24px;padding:2px 6px;background:var(--void);color:var(--signal);border:2px solid var(--signal);cursor:pointer;white-space:nowrap;-webkit-font-smoothing:none}
.tc:hover{background:var(--signal);color:var(--void)}
.hudtxt{font-family:var(--px);font-size:16px;line-height:24px;-webkit-font-smoothing:none;color:var(--grace);overflow-wrap:anywhere}
.hudtxt.s{color:var(--signal)}.hudtxt.i{color:var(--ichor)}
.endcard{margin:26px 0;padding:22px 20px;border:2px solid var(--ichor);display:grid;gap:6px;justify-items:start}
.endcard .big{font-family:var(--px);font-size:32px;line-height:40px;-webkit-font-smoothing:none}
@media (max-width:420px){.endcard .big{font-size:24px;line-height:32px}}
ul.details{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:10px}
ul.details li{padding-left:28px;position:relative}
ul.details li::before{content:"";position:absolute;left:4px;top:.62em;width:8px;height:8px;background:var(--ichor)}
.qa{border-top:2px solid var(--signal)}
.qa details{background-image:var(--dots-s);background-size:4px 2px;background-repeat:repeat-x;background-position:0 100%}
.qa summary{cursor:pointer;list-style:none;padding:14px 36px 14px 0;position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";position:absolute;right:4px;top:12px;font-family:var(--px);font-size:24px;color:var(--signal)}
.qa details[open] summary::after{content:"-"}
.qa details > p{margin:0 0 16px}
.qa summary:hover{color:var(--signal)}
.lb{position:fixed;inset:0;z-index:110;background:var(--void);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:calc(env(safe-area-inset-top,0px) + 16px) 16px calc(env(safe-area-inset-bottom,0px) + 16px)}
.lb .viewer-cap{min-height:0}
/* frame by frame: every frame of a file; the picture takes the room the controls leave, at a whole scale */
html.fv-open{overflow:hidden}
.lb.fv{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"top" "stage" "info";gap:10px;align-items:center;justify-items:stretch;overflow:hidden;overscroll-behavior:contain}
.fv-top{grid-area:top;display:flex;align-items:center;gap:8px;min-width:0;width:100%;max-width:520px;margin:0 auto}
.fv-k{display:none;margin:0;color:var(--signal)}
.fv-n{margin:0 auto 0 0;color:var(--grace);white-space:nowrap}
.fv-stage{grid-area:stage;min-height:0;min-width:0;height:100%;display:flex;align-items:center;justify-content:center}
.fv-box{position:relative;border:2px solid var(--signal);background:var(--void);touch-action:none;cursor:ew-resize;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.fv-box canvas{display:block}
.fv-wait{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--signal);background:var(--void);padding:4px 8px;border:2px solid var(--signal)}
.fv-info{grid-area:info;display:grid;gap:8px;justify-items:center;width:100%;max-width:520px;margin:0 auto}
.fv-src,.fv-clock,.fv-t{margin:0;min-height:24px;text-align:center;white-space:nowrap}
.fv-src,.fv-clock{color:var(--signal)}
.fv-t{display:none;color:var(--grace)}
.fv-scrub{position:relative;width:100%;height:32px}
.fv-marks{position:absolute;left:6px;right:6px;top:0;height:8px;pointer-events:none}
.fv-marks i{position:absolute;top:0;width:2px;height:8px;margin-left:-1px;background:var(--ichor)}
#fvR{-webkit-appearance:none;appearance:none;position:absolute;left:0;right:0;bottom:0;width:100%;height:24px;margin:0;background:transparent;cursor:pointer}
#fvR::-webkit-slider-runnable-track{height:4px;background:var(--signal)}
#fvR::-moz-range-track{height:4px;background:var(--signal)}
#fvR::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:20px;margin-top:-8px;background:var(--grace);border:2px solid var(--void);border-radius:0}
#fvR::-moz-range-thumb{width:12px;height:20px;box-sizing:border-box;background:var(--grace);border:2px solid var(--void);border-radius:0}
#fvR:focus-visible{outline:2px solid var(--grace);outline-offset:2px}
.fv-ctl{justify-content:center;flex-wrap:nowrap}
.fv-ctl .btn{justify-content:center;min-width:44px}
.fv-ctl .fv-play{min-width:96px}
@media (max-width:400px){.lb.fv{gap:8px}.fv-ctl{gap:6px}.fv-ctl .btn{padding-left:8px;padding-right:8px}.fv-ctl .fv-play{min-width:88px}}
/* the speed keeps one width through 1×, 1/2× and 1/4×, and a phone's bar keeps CLOSE on the screen */
#fvSpeed{min-width:48px;justify-content:center}
@media (max-width:479px){.fv-nk{display:none}.fv-top .btn{padding-left:6px;padding-right:6px}}
@media (max-width:399px){.fv-sp{display:none}}
@media (max-width:359px){.fv-nt{display:none}}
@media (orientation:landscape) and (min-width:600px){
  .lb.fv{grid-template-columns:minmax(0,1fr) var(--fvw,180px) minmax(280px,470px) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto minmax(0,1fr);grid-template-areas:". stage . ." ". stage top ." ". stage info ." ". stage . .";column-gap:24px;row-gap:16px}
  /* the file and CLOSE on the first line, the frame, the speed and the sound under them */
  .fv-top{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"k k x" "n s v";gap:10px 8px;max-width:none}
  .fv-k{display:block;grid-area:k;align-self:center}
  .fv-n{grid-area:n;margin:0}
  #fvSpeed{grid-area:s}
  #fvSound{grid-area:v}
  #lbClose{grid-area:x;justify-self:end}
  .fv-info{max-width:none}
  .fv-t{display:block}
}
/* ------------------------------------------------------------------ references in the prose */
a.ref{color:inherit;text-decoration:none;background:linear-gradient(90deg,var(--signal) 2px,transparent 2px) 0 100%/4px 2px repeat-x;padding-bottom:2px;cursor:pointer;-webkit-box-decoration-break:clone;box-decoration-break:clone}
a.ref:hover{color:var(--signal);background-image:linear-gradient(var(--signal),var(--signal))}

/* ------------------------------------------------------------------ popups */
html.modal-open{overflow:hidden}
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:calc(env(safe-area-inset-top,0px) + 24px) 16px calc(env(safe-area-inset-bottom,0px) + 24px)}
.modal-scrim{position:absolute;inset:0;background:var(--d50v);background-size:4px 4px}
.modal-card{position:relative;box-sizing:border-box;width:min(700px,100%);max-height:100%;overflow:auto;overscroll-behavior:contain;background:var(--void);border:2px solid var(--signal);outline:none;animation:crt .18s steps(4) both}
.modal-card.wide{width:min(860px,100%)}
@keyframes crt{0%{clip-path:inset(49% 0 49% 0)}35%{clip-path:inset(49% 0 49% 0)}100%{clip-path:inset(0 0 0 0)}}
.modal-bar{position:sticky;top:0;z-index:2;display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:10px 10px 10px 18px;background:var(--void);border-bottom:2px solid var(--signal)}
.modal-k{color:var(--signal);flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modal-x{margin-left:auto}
.modal-trail{flex:1 0 100%;display:flex;align-items:center;gap:10px;min-width:0;margin:2px 0 -2px;padding-top:8px;background:linear-gradient(90deg,var(--signal) 2px,transparent 2px) top/4px 2px repeat-x}
.modal-back{min-width:0;flex:0 1 auto;overflow:hidden}
.modal-back span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.modal-all{margin-left:auto;flex:0 0 auto}
.modal-n{color:var(--signal);flex:0 0 auto}
.modal-body{padding:24px 24px 28px}
@media (max-width:640px){
  .modal{place-items:end stretch;padding:calc(env(safe-area-inset-top,0px) + 40px) 0 0}
  .modal-card{width:100%;max-height:100%;border-width:2px 0 0;padding-bottom:env(safe-area-inset-bottom,0px);animation-name:sheet}
  .modal-body{padding:20px var(--gut) 28px}
}
@keyframes sheet{0%{transform:translateY(40%)}100%{transform:none}}
.pop-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center;margin-bottom:20px}
.pop-head.nv{grid-template-columns:minmax(0,1fr)}
.pop-vis{justify-self:start;border:2px solid var(--signal);padding:6px;background:var(--void);line-height:0}
.pop-vis.sig{border:0;padding:0}
.pop-vis .sigil.sealed{width:96px;height:96px}
.pop-k{margin:0;color:var(--signal)}
.pop-id{min-width:0;container-type:inline-size}
.pop-t{margin:4px 0 0;font-family:var(--bl);font-weight:400;font-size:46px;font-size:min(46px,13.6cqi);line-height:1.02;color:var(--grace);text-wrap:balance}
.pop-t.h{font-family:var(--px);font-size:32px;line-height:40px;color:var(--ichor);-webkit-font-smoothing:none}
.pop-t.sc{font-family:var(--fellsc);font-size:34px;line-height:1.12}
.pop-t.pt{font-family:var(--px);font-size:32px;line-height:40px;-webkit-font-smoothing:none}
.pop-s{margin:8px 0 0;color:var(--grace)}
.pop-b p{margin:0 0 14px}
.pop-b p:last-child{margin-bottom:0}
.pop-h{margin:18px 0 6px;color:var(--signal)}
.pop .acts{margin-top:22px}
.pop .dlist{margin-top:4px}
/* a company's dossier, between its head and its story */
.dossier{display:grid;gap:8px;margin:0 0 22px;padding:12px 0;border-top:2px solid var(--signal);border-bottom:2px solid var(--signal)}
.ds-r{display:grid;grid-template-columns:116px minmax(0,1fr);column-gap:16px;align-items:baseline}
.dossier dt{margin:0;color:var(--signal)}
.dossier dd{margin:0;color:var(--grace);font-size:17px;line-height:1.45}
@media (max-width:480px){.ds-r{grid-template-columns:minmax(0,1fr);row-gap:2px}}
@media (max-width:640px){.pop-head{grid-template-columns:minmax(0,1fr);gap:14px}.pop-t{font-size:38px}.pop-t.sc{font-size:30px}.pop-t.pt{font-size:24px;line-height:32px}}
/* an entry's popup, read in place when there is no script */
details.card > summary{list-style:none;cursor:pointer}
details.card > summary::-webkit-details-marker{display:none}
details.card > .pop{display:none}
details.card[open] > .pop{display:block;padding:16px 0 4px}
details.card > .pop .pop-head{display:none}

/* ------------------------------------------------------------------ map */
/* the survey and its tools; beside it on a wide screen the directory of places and each place's entry, under it
   on a phone the directory, with an entry rising over the foot of the map in a sheet */
.mapwrap{max-width:calc(1480px + 2 * var(--gut))}
.maph{padding-block:22px 14px}
@media (min-width:760px){.maph{padding-block:30px 18px}}
.map-shell{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
.map-shell > *{min-width:0}
@media (min-width:1000px){.map-shell:not(.full){grid-template-columns:minmax(0,1fr) 380px;align-items:start}}
@media (min-width:1400px){.map-shell:not(.full){grid-template-columns:minmax(0,1fr) 420px}}
.map-top{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:stretch;margin-bottom:10px}
.map-top .map-name{align-self:center}
.layer{display:flex}
.layer .btn + .btn{margin-left:-2px}
.layer .btn[aria-pressed="true"],#mapList[aria-pressed="true"]{background:var(--signal);color:var(--void)}
/* full screen is the foot of the zoom column: corners out to go in, corners in to come back */
.mz.fs{display:grid;place-items:center;padding:0}
.mz.fs svg{display:block;width:16px;height:16px;fill:currentColor;shape-rendering:crispEdges}
.mz.fs .fs-in,.mz.fs[aria-pressed="true"] .fs-out{display:none}
.mz.fs[aria-pressed="true"] .fs-in{display:block}
.mz.fs[aria-pressed="true"]{border-color:var(--ichor);color:var(--ichor)}
@media (hover:hover){.mz.fs[aria-pressed="true"]:hover{background:var(--ichor);color:var(--void)}}
@media (min-width:1000px){#mapList{display:none}}
@media (max-width:880px){.map-top .map-name{display:none}}
/* on a phone the tools stand in two rows of the frame's width, so none of them runs off the screen */
@media (max-width:640px){
  .map-top,.map-shell.full .map-top{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
  .map-top .layer{grid-column:span 4;display:grid;grid-template-columns:1fr 1fr}
  .map-top #lyCurfew{grid-column:span 2}
  .map-top #mapList,.map-top #mapKey{grid-column:span 3}
  .map-top .btn{padding:6px 4px;justify-content:center;text-align:center;min-width:0}
}
.map-frame{position:relative;scroll-margin-top:calc(var(--bar) + 8px)}
.map-stage{position:relative;border:2px solid var(--signal);background:var(--void);overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;outline-offset:3px}
.map-stage.zoomed{touch-action:none;cursor:grab}
.map-stage.dragging{cursor:grabbing}
.map-stage canvas{position:absolute;left:0;top:0;pointer-events:none}
#mapSvg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;pointer-events:none}
#mapLabels,#mapPins{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.map-ui{position:absolute;inset:0;z-index:6;pointer-events:none}
.map-ui > *{pointer-events:auto}
@media (max-width:560px){
  .map-shell:not(.full) .map-frame{margin-inline:calc(-1 * var(--gut))}
  .map-shell:not(.full) .map-stage{border-left:0;border-right:0}
}
/* zoom, the scale and north float over the map, and keep above the sheet */
.map-zoom{position:absolute;right:10px;bottom:calc(var(--sheet,0px) + 10px);z-index:3;display:flex;flex-direction:column}
.mz{font-family:var(--px);font-size:16px;line-height:24px;min-width:40px;min-height:40px;padding:0 8px;background:var(--void);color:var(--signal);border:2px solid var(--signal);cursor:pointer;-webkit-font-smoothing:none}
.map-zoom .mz + .mz{margin-top:-2px}
@media (hover:hover){.mz:hover{background:var(--signal);color:var(--void)}}
.mz:active{background:var(--signal);color:var(--void)}
.mz:disabled{color:var(--signal);background:var(--void);border-style:dashed;cursor:default}
@media (pointer:coarse){.map-zoom .mz{min-width:44px;min-height:44px}}
.map-scale{position:absolute;left:10px;bottom:calc(var(--sheet,0px) + 10px);display:flex;align-items:flex-end;gap:8px;color:var(--signal);background:var(--void);padding:4px 8px 4px 6px;pointer-events:none}
.map-scale i{display:block;box-sizing:border-box;height:8px;border:2px solid var(--signal);border-top:0;background:linear-gradient(90deg,var(--signal) 50%,transparent 50%) 0 100%/100% 4px no-repeat}
.map-north{position:absolute;right:10px;top:10px;display:grid;justify-items:center;color:var(--grace);background:var(--void);padding:4px 8px;pointer-events:none}
.map-north b{display:block;width:2px;height:10px;background:var(--grace);order:-1;margin-bottom:2px}
.map-hintbox{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);box-sizing:border-box;max-width:calc(100% - 48px);background:var(--void);border:2px solid var(--ichor);color:var(--ichor);padding:6px 12px;pointer-events:none;text-align:center;white-space:pre-line}
/* full screen: the map takes the whole window; a wide screen keeps the directory beside it */
html.map-open{overflow:hidden}
.map-shell.full{position:fixed;inset:0;z-index:95;background:var(--void);display:flex;flex-direction:column;gap:0;padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);max-width:none;margin:0}
.map-shell.full .map-main{flex:1;min-height:0;display:flex;flex-direction:column;padding:8px var(--gut)}
.map-shell.full .map-top{margin-bottom:8px;flex-wrap:nowrap}
.map-shell.full .map-frame{flex:1;min-height:0;display:flex}
.map-shell.full .map-stage{flex:1;min-height:0;height:auto!important}
@media (max-width:999px){.map-shell.full .map-panel{display:none}}
@media (min-width:1000px){.map-shell.full{display:grid;grid-template-columns:minmax(0,1fr) 420px}.map-shell.full .map-panel{height:100%;max-height:none;overflow:auto;border-width:0 0 0 2px}}
@media (max-width:560px){.map-shell.full .map-main{padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px))}}
/* labels: districts large, the rest quieter */
.mlab{position:absolute;left:0;top:0;transform-origin:0 0;font-family:var(--px);font-size:16px;line-height:18px;color:var(--grace);background:var(--void);padding:2px 5px;white-space:nowrap;pointer-events:none;-webkit-font-smoothing:none;text-align:center}
.mlab.dist{box-shadow:0 0 0 2px var(--void)}
.map-stage.wide .mlab.dist{font-size:24px;line-height:26px;padding:3px 7px}
.mlab.s{color:var(--signal)}
.mlab.dim{color:var(--signal);background:transparent;text-shadow:2px 0 0 var(--void),-2px 0 0 var(--void),0 2px 0 var(--void),0 -2px 0 var(--void),2px 2px 0 var(--void),-2px -2px 0 var(--void),2px -2px 0 var(--void),-2px 2px 0 var(--void)}
.mlab.off{visibility:hidden}
.mlab small{display:block;font-size:8px;line-height:10px;color:var(--signal)}
.mlab.hi{background:var(--grace);color:var(--void)}
/* markers: a square and a name, the name to the right of its square or, where the right is taken, to the left */
.pin{position:absolute;left:0;top:0;font-family:var(--px);font-size:16px;line-height:20px;padding:0 5px;cursor:pointer;-webkit-font-smoothing:none;white-space:nowrap;pointer-events:auto;border:0;background:none;color:inherit}
.pin.file{z-index:4;padding:2px 7px;background:var(--ichor);color:var(--void);box-shadow:0 0 0 2px var(--grace),0 0 0 4px var(--void)}
.pin.file::after{content:"";position:absolute;left:50%;top:100%;width:2px;height:var(--stem,14px);background:var(--grace);transform:translateX(-1px)}
.pin.file .ring{position:absolute;left:50%;top:calc(100% + var(--stem,14px));width:0;height:0}
.pin.file.below::after{top:auto;bottom:100%}
.pin.file.below .ring{top:auto;bottom:calc(100% + var(--stem,14px))}
.pin.file .ring::before,.pin.file .ring::after{content:"";position:absolute;left:-7px;top:-7px;width:10px;height:10px;border:2px solid var(--ichor);background:var(--void)}
.pin.file .ring::after{animation:beacon 1.8s steps(6) infinite;background:none}
@keyframes beacon{0%{transform:scale(1);opacity:1}100%{transform:scale(3.4);opacity:0}}
.pin.file:hover,.pin.file.on{background:var(--grace);color:var(--void)}
.pin.poi{z-index:2;padding:0 5px 0 16px;color:var(--grace);background:linear-gradient(var(--void),var(--void)) 12px 0/calc(100% - 12px) 100% no-repeat}
.pin.poi.lft{padding:0 16px 0 5px;background-position:0 0}
.pin.poi::before{content:"";position:absolute;left:0;top:6px;width:8px;height:8px;background:var(--grace);box-shadow:0 0 0 2px var(--void)}
.pin.poi.lft::before{left:auto;right:0}
.pin.poi.company::before{background:var(--signal)}
.pin.poi.station::before{background:var(--signal);border-radius:0}
.pin.poi.gate::before{background:var(--void);box-shadow:inset 0 0 0 2px var(--grace),0 0 0 2px var(--void)}
.pin.poi.sealed::before{background:var(--void) var(--d50s);background-size:4px 4px}
.pin.poi.dot{padding:0;width:8px;height:20px;background:none}
.pin.poi.dot .pl{display:none}
.pin.poi:hover .pl,.pin.poi.on .pl{background:var(--grace);color:var(--void)}
.pin.poi.on{z-index:5}
.pin.poi.on::before{background:var(--ichor)}
.pin.poi .pl{padding:0 4px}
.pin.poi.pan::before{background:var(--ichor)}
/* a name stood down to its square shows on a pointer's hover */
@media (hover:hover){.pin.poi.dot:hover,.pin.poi.dot:focus-visible{z-index:6}.pin.poi.dot:hover .pl,.pin.poi.dot:focus-visible .pl{display:block;position:absolute;left:12px;top:0;padding:0 4px;background:var(--grace);color:var(--void)}}
/* the chosen place calls out from its square */
.pin.poi .ring{display:none;position:absolute;left:4px;top:10px;width:0;height:0;pointer-events:none}
.pin.poi.lft .ring{left:auto;right:4px}
.pin.poi.on .ring{display:block}
.pin.poi .ring::after{content:"";position:absolute;left:-9px;top:-9px;width:14px;height:14px;border:2px solid var(--ichor);animation:beacon 1.8s steps(6) infinite}
/* a finger needs more than a square to land on */
@media (pointer:coarse){.pin.poi::after{content:"";position:absolute;left:-10px;right:-8px;top:-8px;bottom:-8px}}
/* the directory and the entries */
.map-panel{border:2px solid var(--signal);padding:16px 16px 20px;box-sizing:border-box;min-height:220px}
@media (min-width:1000px){.map-shell:not(.full) .map-panel{position:sticky;top:calc(var(--bar) + 12px);height:var(--map-h,auto);max-height:calc(100vh - var(--bar) - 24px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--signal) var(--void)}}
@media (max-width:999px){.map-shell:not(.full) .map-panel{max-width:760px}}
.map-panel h2,.mp-head h2{margin:2px 0 8px;font-family:var(--bl);font-weight:400;font-size:36px;line-height:1.05;color:var(--grace)}
.mp-k{margin:0;color:var(--signal)}
.mp-intro p{margin:0 0 10px;font-size:17px;line-height:1.55}
.map-panel p{font-size:17px;line-height:1.55}
.mp-sec{margin-top:6px;background:var(--dots-s) 0 0/4px 2px repeat-x}
.mp-sec > summary{list-style:none;cursor:pointer;position:relative;padding:10px 28px 8px 0;margin:0;color:var(--signal)}
.mp-sec > summary::-webkit-details-marker{display:none}
.mp-sec > summary::after{content:"+";position:absolute;right:2px;top:6px;font-family:var(--px);font-size:24px;line-height:32px;color:var(--signal);-webkit-font-smoothing:none}
.mp-sec[open] > summary::after{content:"-"}
.mp-sec .census > .pop-h{display:none}
.mp-sec .census > .pop-h.sub,.census .pop-h.sub{display:block;margin-top:20px}
@media (hover:hover){.mp-sec > summary:hover{color:var(--grace)}}
.mp-groups{display:grid}
.pgrp{background:var(--dots-s) 0 0/4px 2px repeat-x}
.pgrp > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:11px 4px 9px}
.pgrp > summary::-webkit-details-marker{display:none}
.pgrp > summary::before{content:"+";font-family:var(--px);font-size:16px;line-height:24px;color:var(--signal);width:12px;flex:none;-webkit-font-smoothing:none}
.pgrp[open] > summary::before{content:"-"}
.pgrp .g-n{flex:1;min-width:0;color:var(--grace)}
.pgrp .g-c{color:var(--signal)}
@media (hover:hover){.pgrp > summary:hover .g-n{color:var(--signal)}}
.g-rows{display:grid;gap:2px;padding:0 0 12px}
.prow{position:relative;display:grid;gap:1px;width:100%;box-sizing:border-box;margin:0;padding:7px 8px 7px 26px;text-align:left;font:inherit;color:var(--grace);background:none;border:0;cursor:pointer}
.prow::before{content:"";position:absolute;left:8px;top:15px;width:8px;height:8px;background:var(--grace)}
.prow.dist::before{background:var(--void);box-shadow:inset 0 0 0 2px var(--ichor)}
.prow .pn{color:var(--grace);overflow-wrap:anywhere}
.prow .pk{font-size:8px;line-height:12px;color:var(--signal);overflow-wrap:anywhere}
@media (hover:hover){.prow:hover{background:var(--signal)}.prow:hover .pn,.prow:hover .pk{color:var(--void)}.prow:hover::before{background:var(--void)}}
.prow[aria-current]{background:var(--grace)}
.prow[aria-current] .pn,.prow[aria-current] .pk{color:var(--void)}
.prow[aria-current]::before{background:var(--ichor);box-shadow:none}
.prow.was:not([aria-current]){background:var(--void) var(--d12s);background-size:8px 8px}
.prow.was:not([aria-current])::before{background:var(--ichor)}
/* an entry: back to the directory, the one before and after, the entry itself, and what is near it */
.enav{display:flex;align-items:center;gap:6px;margin:0 0 16px;padding-bottom:12px;background:var(--dots-s) 0 100%/4px 2px repeat-x}
.enav .btn{padding:6px 8px}
.enav .en-pos{flex:1;min-width:0;text-align:right;color:var(--signal);font-size:8px;line-height:12px;padding-right:6px}
.enav .mz + .mz{margin-left:-2px}
.mp-entry .pop-t{font-size:36px}
.mp-entry .pop-t.pt{font-size:24px;line-height:32px}
.mp-entry .pop-b p{font-size:18px;line-height:1.55}
.near{margin-top:24px}
.nlist{display:grid}
.nrow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;width:100%;box-sizing:border-box;margin:0;padding:8px 4px 7px;text-align:left;font:inherit;color:var(--grace);background:var(--dots-s) 0 100%/4px 2px repeat-x;border:0;cursor:pointer}
.nrow .pn{min-width:0;overflow-wrap:anywhere}
.nrow .nd{flex:none;color:var(--signal)}
@media (hover:hover){.nrow:hover{background-color:var(--signal)}.nrow:hover .pn,.nrow:hover .nd{color:var(--void)}}
.dlist{display:flex;flex-wrap:wrap;gap:6px}
.dlist button{font:inherit;font-size:16px;line-height:24px;padding:6px 10px;background:var(--void);color:var(--grace);border:2px solid var(--signal);cursor:pointer;-webkit-font-smoothing:none;text-align:left}
.dlist button:hover{background:var(--signal);color:var(--void)}
.legend{display:grid;gap:6px;margin:12px 0 0;padding:0;list-style:none}
.legend li{display:flex;gap:10px;align-items:center;color:var(--signal)}
.legend i{display:inline-block;flex:none}
/* the sheet over the foot of the map on a phone */
.msheet{position:absolute;left:0;right:0;bottom:0;z-index:8;display:flex;flex-direction:column;box-sizing:border-box;background:var(--void);border-top:2px solid var(--grace);animation:sheet .16s steps(4) both}
.map-shell:not(.full) .msheet{bottom:0}
@media (min-width:561px){.msheet{left:2px;right:2px;bottom:2px}}
.ms-grab{flex:none;position:relative;display:block;width:100%;height:16px;margin:0;padding:0;border:0;background:none;cursor:pointer}
.ms-grab::before{content:"";position:absolute;left:50%;top:6px;width:40px;height:4px;margin-left:-20px;background:var(--signal)}
.msheet.lst .ms-grab{display:none}
.ms-bar{flex:none;display:flex;align-items:center;gap:6px;padding:0 var(--gut) 8px;border-bottom:2px solid var(--signal)}
.msheet.lst .ms-bar{padding-top:8px}
.ms-bar .mz + .mz{margin-left:-2px}
.ms-bar .btn{padding:6px 10px}
.ms-pos{flex:1;min-width:0;padding-left:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--signal)}
.ms-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:14px var(--gut) 22px}
.msheet:not(.big) .ms-body{overflow:hidden}
.msheet.big{top:0;height:auto!important}
@media (min-width:561px){.msheet.big{top:2px}}
.msheet .enav{display:none}
.msheet .mp-list{padding-top:2px}
.msheet .mp-head{display:none}
.msheet .pop-head{grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;margin-bottom:14px}
.msheet .pop-head.nv{grid-template-columns:minmax(0,1fr)}
.msheet .pop-t{font-size:30px}
.msheet .pop-t.pt{font-size:24px;line-height:32px}
.msheet .pop-b p{font-size:18px;line-height:1.55}

/* ------------------------------------------------------------------ record */
.rec-land{display:grid;gap:48px}
.chlist{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr))}
.chcard{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr auto;grid-template-areas:"n sg" "t sg" "w sg";gap:2px 18px;align-items:center;box-sizing:border-box;height:100%;min-height:var(--chh,168px);padding:16px 16px 14px 18px;border:2px solid var(--signal);text-decoration:none;color:var(--grace);position:relative}
.chcard .ch-n{grid-area:n;color:var(--signal)}
.chcard .ch-t{grid-area:t;font-family:var(--bl);font-size:26px;line-height:1.08;color:var(--grace);text-wrap:balance}
.chcard .ch-w{grid-area:w;color:var(--ichor)}
.chcard .sigil{grid-area:sg;align-self:center}
.chcard .sigil.sealed{width:48px;height:48px;background:var(--void) var(--d50s);background-size:4px 4px}
.chcard.sealed{border-style:dashed}
@media (hover:hover){.chcard:hover{border-color:var(--grace)}.chcard:hover .ch-t{color:var(--signal)}.chcard.sealed:hover{border-color:var(--signal)}}
@media (max-width:1180px){.chcard{--chh:196px}}
@media (max-width:520px){.chcard{--chh:164px}.chcard .ch-t{font-size:24px}.chlist{gap:10px}}
.rec-grid{display:grid;gap:40px}
@media (min-width:1120px){.rec-grid{grid-template-columns:280px minmax(0,1fr);gap:52px;margin-top:14px}}
.toc{align-self:start}
@media (min-width:1120px){.toc{position:sticky;top:calc(var(--bar) + 20px);max-height:calc(100vh - var(--bar) - 40px);overflow:auto;scrollbar-width:thin}}
@media (max-width:1119px){.rec-grid > .toc{display:none}}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.toc a{display:grid;grid-template-columns:60px 1fr;gap:8px;text-decoration:none;color:var(--grace);padding:5px 6px;font-size:17px;line-height:1.3}
.toc a .px{color:var(--signal)}
.toc a:hover{background:var(--signal);color:var(--void)}
.toc a:hover .px{color:var(--void)}
.toc a[aria-current]{background:var(--grace);color:var(--void)}
.toc a[aria-current] .px{color:var(--void)}
.toc h2{margin:0 0 10px;color:var(--signal);font-weight:400}
.toc-btn{display:none}
@media (max-width:1119px){.toc-btn{display:inline-flex}}
.modal .toc a{font-size:19px;padding:8px 6px}
.toc-feat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0 0 20px}
.toc .toc-feat a,.modal .toc .toc-feat a{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;justify-items:start;gap:8px;margin:5px;padding:10px 10px 9px;border:2px solid var(--signal);outline:2px solid var(--signal);outline-offset:3px;background:var(--void);color:var(--grace);font-size:16px;line-height:1.25}
.toc-feat canvas.sigil{width:48px;height:48px}
.toc .toc-feat a:hover{background:var(--void);color:var(--signal);border-color:var(--grace);outline-color:var(--grace)}
.toc .toc-feat a:focus-visible{outline-color:var(--ichor)}
.rtext{max-width:68ch;min-width:0}
.chap{margin:0}
.chap-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 24px;align-items:end;margin-bottom:26px;padding-bottom:18px;position:relative;container-type:inline-size}
.chap-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--dots-s);background-size:4px 2px}
.chap-num{margin:0;color:var(--signal);grid-column:1}
/* beside a sigil of 96 and its gap of 24, the longest word of a chapter's title still fits */
.chap-title{margin:0;font-family:var(--bl);font-weight:400;font-size:44px;font-size:min(44px,calc((100cqi - 120px) / 5.55));line-height:1.04;color:var(--grace);grid-column:1;text-wrap:balance}
@media (min-width:760px){.chap-title{font-size:64px;font-size:min(64px,calc((100cqi - 120px) / 5.55))}}
.chap-when{margin:6px 0 0;color:var(--ichor);grid-column:1}
.chap .sigil{grid-column:2;grid-row:1 / span 3;align-self:center}
.chap .sigil.sealed{width:48px;height:48px;background:var(--void) var(--d50s);background-size:4px 4px}
@media (min-width:760px){.chap .sigil.sealed{width:96px;height:96px}}
.chap h2{font-family:var(--fellsc);font-weight:400;font-size:25px;line-height:1.25;margin:40px 0 12px;color:var(--grace);text-wrap:balance}
.chap h2::before{content:"";display:inline-block;width:10px;height:10px;background:var(--ichor);margin:0 14px 3px 0}
.chap p{margin:0 0 18px;hyphens:manual}
/* a numbered list in a chapter: the numbers hang in the pixel face, and each name is set in small capitals */
ol.dirs{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:8px;counter-reset:dir}
ol.dirs li{counter-increment:dir;padding-left:44px;text-indent:-44px}
ol.dirs li::before{content:counter(dir);display:inline-block;width:30px;margin-right:14px;text-align:right;text-indent:0;font-family:var(--px);font-size:16px;color:var(--signal);-webkit-font-smoothing:none}
ol.dirs .dn{font-family:var(--fellsc);color:var(--grace)}
.chap .first:not(.rdx)::first-letter{font-family:var(--px);float:left;font-size:72px;line-height:63px;padding:0 14px 0 0;margin-top:6px;color:var(--ichor);-webkit-font-smoothing:none}
@media (max-width:759px){.chap .first:not(.rdx)::first-letter{font-size:56px;line-height:49px;padding-right:10px}}
blockquote.scr{margin:22px 0 24px;padding:4px 0 4px 22px;position:relative;font-style:italic}
blockquote.scr::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--signal) 2px,transparent 2px);background-size:2px 4px}
blockquote.scr p{margin:0 0 8px}
blockquote.scr cite{font-style:normal;font-family:var(--px);font-size:16px;color:var(--signal);-webkit-font-smoothing:none}
.num{font-family:var(--px);font-size:16px;line-height:1;letter-spacing:0;font-style:normal;-webkit-font-smoothing:none;font-synthesis:none;padding-left:.12em}
.num.id{color:var(--signal)}
.doc{margin:30px 0 34px;border:2px solid var(--signal)}
.doc-h{padding:12px 16px;border-bottom:2px solid var(--signal)}
.doc-h pre{margin:0;font-family:var(--px);font-size:16px;line-height:24px;color:var(--signal);white-space:pre-wrap;-webkit-font-smoothing:none;overflow-wrap:anywhere}
.doc-b{padding:18px 18px 8px}
.doc-b p{margin:0 0 14px}
.doc.ds .doc-b{color:var(--signal)}
.doc.dt{border-color:var(--ichor)}
.doc.dt .doc-h{border-color:var(--ichor)}
.doc .bna{font-family:var(--px);font-size:16px;-webkit-font-smoothing:none}
.doc .lost{display:inline-block;font-family:var(--px);font-size:16px;line-height:22px;color:var(--void);background:var(--signal);padding:0 6px;-webkit-font-smoothing:none;font-style:normal}
.doc .hr{font-family:var(--px);font-size:16px;color:var(--signal);-webkit-font-smoothing:none}
.doc .n{font-family:var(--px);font-size:16px;color:var(--signal);margin-right:8px;-webkit-font-smoothing:none}
.doc .sig{font-family:var(--px);font-size:16px;-webkit-font-smoothing:none}
.log p{margin:0 0 8px}
.log .h{color:var(--signal);font-family:var(--px);font-size:16px;-webkit-font-smoothing:none;margin-right:10px}
.log .who-a{color:var(--grace)}
.log .who-t{color:var(--ichor)}
.stats{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:4px}
.stats li{display:flex;justify-content:space-between;gap:16px;font-family:var(--px);font-size:16px;line-height:24px;color:var(--grace);-webkit-font-smoothing:none;flex-wrap:wrap}
.stats li b{font-weight:400}
.stats li span{color:var(--signal)}
.tbl table.annals{border-collapse:collapse;width:100%;min-width:560px;font-size:17px;line-height:1.5}
table.annals th{font-family:var(--px);font-weight:400;font-size:16px;color:var(--signal);text-align:left;padding:10px 12px 8px;border-bottom:2px solid var(--signal);-webkit-font-smoothing:none}
table.annals td{padding:10px 12px;vertical-align:top;background-image:var(--dots-s);background-size:4px 2px;background-repeat:repeat-x;background-position:0 100%}
table.annals td:first-child{font-family:var(--px);font-size:16px;color:var(--ichor);white-space:nowrap;-webkit-font-smoothing:none}

/* ------------------------------------------------------------------ index */
.ixtiles{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr}
@media (max-width:999px){.ixtiles{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ixtiles{grid-template-columns:1fr;gap:10px}}
.ixtile{container-type:inline-size;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto 1fr;grid-template-areas:"n sg" "t sg" "d sg";gap:6px 20px;padding:18px 18px 16px;border:2px solid var(--signal);text-decoration:none;color:var(--grace);min-width:0;position:relative;min-height:170px;box-sizing:border-box}
.ixtile .n{grid-area:n}.ixtile .t{grid-area:t}.ixtile .d{grid-area:d}
.ixtile canvas.sigil{grid-area:sg;align-self:center;width:96px;height:96px;margin:12px 8px 0 0}
.ixtile .n{color:var(--signal)}
.ixtile .t{font-family:var(--bl);font-size:44px;font-size:min(44px,calc((100cqi - 124px) / 6.7));line-height:1;color:var(--grace)}
.ixtile .d{font-size:17px;line-height:1.45}
.ixtile::after{content:"";position:absolute;right:10px;top:10px;width:8px;height:8px;background:var(--signal)}
@media (hover:hover){.ixtile:hover{border-color:var(--grace)}.ixtile:hover .t{color:var(--signal)}.ixtile:hover::after{background:var(--ichor)}}
@media (max-width:560px){.ixtile{--sig:72px;min-height:0;padding:14px 16px;column-gap:16px}.ixtile canvas.sigil{width:72px;height:72px;margin:10px 4px 0 0}.ixtile .t{font-size:36px;font-size:min(36px,calc((100cqi - 92px) / 6.7))}}
.subnav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 40px}
@media (max-width:759px){
  .subnav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:28px}
  .subnav .btn{justify-content:center;min-width:0;padding-inline:6px}
}
@media (max-width:559px){.subnav{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:359px){.subnav{grid-template-columns:1fr}}
.lede-ix{margin:0 0 32px;max-width:62ch;font-style:italic}
/* timeline */
.tl{list-style:none;margin:0;padding:0;position:relative;max-width:900px}
.tl::before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:2px;background:linear-gradient(var(--signal) 2px,transparent 2px);background-size:2px 4px}
.tl li{position:relative;padding:0 0 30px 44px;display:grid;gap:4px}
.tl li::before{content:"";position:absolute;left:0;top:4px;width:12px;height:12px;background:var(--void);border:2px solid var(--signal)}
.tl li.file::before{background:var(--ichor);border-color:var(--grace)}
.tl li.sealed::before{background:var(--void) var(--d50s);background-size:4px 4px}
.tl li.era{padding-bottom:18px}
.tl li.era::before{width:16px;height:4px;top:10px;left:0;border:0;background:var(--signal)}
.tl .era-t{color:var(--signal)}
.tl-when{color:var(--ichor)}
.tl-w{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px}
.tl-ch{color:var(--signal);text-decoration:none;border:2px solid var(--signal);padding:0 6px;line-height:20px}
.tl-ch:hover{background:var(--signal);color:var(--void)}
.tl-pager{margin-top:24px;max-width:900px}
.tl-text{margin:0;max-width:62ch}
.tl .btn{justify-self:start;margin-top:6px}
/* cards that open */
.cards{display:grid;gap:14px}
.card > summary{box-sizing:border-box;height:100%;border:2px solid var(--signal);background:var(--void);position:relative}
.card.sealed > summary{border-style:dashed}
@media (hover:hover){.card > summary:hover{border-color:var(--grace)}.card > summary:hover .char-n,.card > summary:hover .fac-n,.card > summary:hover .corp-n{color:var(--signal)}}
.card > summary::after{content:"+";position:absolute;right:10px;top:6px;font-family:var(--px);font-size:24px;line-height:32px;color:var(--signal);-webkit-font-smoothing:none}
/* factions */
.facs{grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr))}
.fac > summary{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 18px;align-items:center;padding:18px 40px 18px 18px}
.fac .sigil{grid-row:1 / span 2}
.fac .sigil.sealed{width:48px;height:48px;background:var(--void) var(--d50s);background-size:4px 4px}
.fac-k{margin:0;color:var(--signal);align-self:end}
.fac-n{margin:0;font-family:var(--bl);font-weight:400;font-size:36px;line-height:1.05;color:var(--grace);align-self:start}
/* characters */
.chars{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
@media (max-width:560px){.chars{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.char > summary{display:grid;gap:8px;align-content:start;padding:14px 14px 16px}
.por{justify-self:start;border:2px solid var(--signal);padding:6px;background:var(--void);line-height:0}
.char-n{margin:6px 0 0;font-family:var(--bl);font-weight:400;font-size:34px;line-height:1.05;color:var(--grace);overflow-wrap:anywhere}
.char-n.h{font-family:var(--px);font-size:32px;line-height:40px;color:var(--ichor);-webkit-font-smoothing:none}
.char-r{margin:0;color:var(--signal)}
@media (max-width:560px){.char > summary{padding:10px 10px 12px;gap:6px}.char-n{font-size:26px}.char-n.h{font-size:24px;line-height:32px}.char-r{font-size:8px;line-height:12px}.card.char > summary::after{top:0;right:6px}}
/* corporations */
.corps{grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr))}
.corp > summary{display:grid;gap:6px;align-content:start;padding:18px 40px 18px 18px}
.corp-n{margin:0;font-family:var(--fellsc);font-weight:400;font-size:25px;line-height:1.2;color:var(--grace)}
.corp-m{margin:0;color:var(--signal)}
/* terms */
.letters{display:grid;gap:26px}
.letter{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;align-items:start}
.letter > h2{margin:6px 0 0;font-family:var(--px);font-weight:400;font-size:32px;line-height:40px;color:var(--ichor);-webkit-font-smoothing:none}
.letter.sealed > h2{font-size:16px;line-height:24px;color:var(--signal);grid-column:1 / -1;margin:0}
.letter.sealed{grid-template-columns:minmax(0,1fr);gap:10px;margin-top:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.term > summary{display:inline-grid;gap:2px;padding:8px 14px 9px;height:auto}
.term > summary::after{content:none}
.chip-t{font-family:var(--fellsc);font-size:21px;line-height:1.2;color:var(--grace)}
.chip-w{font-family:var(--px);font-size:8px;line-height:12px;color:var(--signal);-webkit-font-smoothing:none}
@media (hover:hover){.term > summary:hover .chip-t{color:var(--signal)}}
.term[open]{flex-basis:100%}

/* ------------------------------------------------------------------ footer */
.foot{margin-top:96px;padding-block:20px 28px;position:relative}
.foot::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--dots-s);background-size:4px 2px}
.foot-l{margin:0;color:var(--signal)}
@media (max-width:759px){.foot{margin-top:72px;padding-block:16px 24px}}
.note-rec p{margin:0 0 10px}
.howto{margin:20px 0 0;max-width:62ch;border:2px solid var(--signal);background:var(--void)}
.howto summary{cursor:pointer;color:var(--signal);padding:8px 14px;list-style:none}
.howto summary::-webkit-details-marker{display:none}
.howto summary::before{content:"+";display:inline-block;width:20px}
.howto[open] summary::before{content:"-"}
.howto summary:hover{background:var(--signal);color:var(--void)}
.howto-l{margin:0;padding:10px 18px 6px 44px;font-size:18px;line-height:1.55;color:var(--grace)}
.howto-l li{margin:0 0 10px;padding-left:4px}
.howto-l li::marker{font-family:var(--px);font-size:16px;color:var(--signal)}
.note-rec .sig{margin:4px 0 0;font-family:var(--px);font-size:16px;line-height:24px;font-style:normal;color:var(--signal);-webkit-font-smoothing:none}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ------------------------------------------------------------------ additions for the pages */
.crumbs-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:28px}
.crumbs-row .crumbs{padding:0}
.fcard .rec-t{font-family:var(--px);font-size:32px;line-height:40px;color:var(--signal);margin-top:8px;-webkit-font-smoothing:none}
@media (max-width:640px){.fcard .rec-t{font-size:24px;line-height:32px}}
/* the pixel face steps down a whole 8 at a time to fit its column */
@container (max-width:315px){.fcard .rec-t{font-size:24px;line-height:32px}}
@container (max-width:235px){.fcard .rec-t{font-size:16px;line-height:24px}}
.logo{display:block;line-height:0}
.pop-vis.logo{border:0;padding:0}
.corp > summary{grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:16px}
.corp-id{display:grid;gap:6px;min-width:0}
.letter.kinds{grid-template-columns:minmax(0,1fr);gap:10px}
.letter.kinds > h2{font-size:16px;line-height:24px;color:var(--signal);margin:0}
.fpage .file-top{padding-top:20px}
/* the key: each mark on a piece of the survey cut from the sheets, the survey's own marks drawn over it */
/* the parts of the key follow the list as it scrolls, the part in view lit: a strip under the bar, and on a wide
   screen a column beside the list, the way the Record keeps its chapters */
.mk-jump{position:sticky;top:var(--mk-top,0px);z-index:1;display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;margin:0 -24px 14px;padding:10px 24px;background:var(--void);scrollbar-width:none;scroll-padding-inline:24px}
.mk-jump::-webkit-scrollbar{display:none}
.mk-jump.stuck{background:var(--void) var(--dots-s) 0 100%/4px 2px repeat-x}
.mk-jump .btn{flex:none;padding:4px 8px}
.mk-jump .mk-h{display:none}
@media (max-width:640px){.mk-jump{margin:0 calc(-1 * var(--gut)) 14px;padding:10px var(--gut);scroll-padding-inline:var(--gut)}}
@media (min-width:1120px){.modal-card.keyw{width:min(1160px,100%)}.pop-key{display:grid;grid-template-columns:220px minmax(0,1fr);column-gap:40px;align-items:start}.pop-key > .pop-head{grid-column:1 / -1}.mk-jump{top:calc(var(--mk-top,0px) + 16px);flex-direction:column;gap:2px;overflow:auto;max-height:calc(100vh - 150px);margin:0;padding:0;background:none;scrollbar-width:thin}.mk-jump .mk-h{display:block;margin:0 0 10px;color:var(--signal);font-weight:400;font-size:16px;line-height:24px}.mk-jump .btn{border:0;padding:5px 6px;white-space:normal;text-align:left;color:var(--grace);background:none}.mk-jump .btn:hover{background:var(--signal);color:var(--void)}.mk-jump .btn[aria-current]{background:var(--grace);color:var(--void)}}
.mapkey{display:grid;gap:28px}
.mapkey section{scroll-margin-top:var(--mk-off,60px)}
.mapkey h3{margin:0 0 14px;padding-bottom:8px;color:var(--signal);font-weight:400;background:var(--dots-s) 0 100%/4px 2px repeat-x}
.mapkey ul,.mapkey-l{list-style:none;margin:0;padding:0;display:grid;gap:16px 28px}
@media (min-width:760px){.pop-key .mapkey ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mapkey li,.mapkey-l li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start}
.sw{position:relative;display:block;box-sizing:content-box;width:var(--kw,96px);height:var(--kh,72px);border:2px solid var(--signal);padding:2px;background:var(--void);line-height:0;overflow:hidden}
.sw .spr{position:absolute;left:2px;top:2px;width:var(--kw,96px);height:var(--kh,72px);background-image:var(--ks);background-repeat:no-repeat;background-size:calc(var(--kw,96px) * var(--kc,10)) auto;background-position:calc(var(--kw,96px) * var(--sx,0) * -1) calc(var(--kh,72px) * var(--sy,0) * -1);image-rendering:pixelated}
.sw .km{position:absolute;left:2px;top:2px;width:var(--kw,96px);height:var(--kh,72px);overflow:hidden;pointer-events:none}
.km svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden}
.km-at{position:absolute;width:0;height:0}
.km-sq{position:absolute;left:-4px;top:-4px;width:8px;height:8px;background:var(--grace);box-shadow:0 0 0 2px var(--void)}
.km-sq.company,.km-sq.pan-company{background:var(--signal)}
.km-sq.gate{background:var(--void);box-shadow:inset 0 0 0 2px var(--grace),0 0 0 2px var(--void)}
.km-sq.station{background:var(--void);box-shadow:inset 0 0 0 2px var(--signal),0 0 0 2px var(--void)}
.km-sq.sealed,.km-sq.pan-sealed{background:var(--void) var(--d50s);background-size:4px 4px}
.km-sq.pan-place{background:var(--ichor)}
.km-lab{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:block;font-family:var(--px);font-size:16px;line-height:18px;white-space:nowrap;text-align:center;-webkit-font-smoothing:none;padding:2px 5px;background:var(--void);color:var(--grace)}
.km-lab.dist{box-shadow:0 0 0 2px var(--void)}
.km-lab.name{color:var(--signal)}
.km-lab.dim{color:var(--signal);background:transparent;text-shadow:2px 0 0 var(--void),-2px 0 0 var(--void),0 2px 0 var(--void),0 -2px 0 var(--void),2px 2px 0 var(--void),-2px -2px 0 var(--void),2px -2px 0 var(--void),-2px 2px 0 var(--void)}
.km-file{position:absolute;left:0;top:0}
.km-file::before{content:"";position:absolute;left:-1px;bottom:7px;width:2px;height:14px;background:var(--grace)}
.km-file::after{content:"";position:absolute;left:-7px;top:-7px;width:10px;height:10px;border:2px solid var(--ichor);background:var(--void)}
.km-file b{position:absolute;left:0;bottom:25px;transform:translateX(-50%);font-family:var(--px);font-weight:400;font-size:16px;line-height:20px;padding:2px 7px;background:var(--ichor);color:var(--void);box-shadow:0 0 0 2px var(--grace),0 0 0 4px var(--void);-webkit-font-smoothing:none}
.km-scale{position:absolute;left:6px;bottom:6px;display:flex;align-items:flex-end;gap:6px}
.km-bar i{display:block;width:28px;height:8px;border:2px solid var(--signal);border-top:0;background:linear-gradient(90deg,var(--signal) 50%,transparent 50%) 0 100%/100% 4px no-repeat}
.km-scale .km-lab{position:static;transform:none;padding:0;background:none;color:var(--signal)}
.km-north{position:absolute;right:8px;top:6px;display:grid;justify-items:center;font-family:var(--px);font-size:16px;line-height:18px;color:var(--grace);-webkit-font-smoothing:none}
.km-north b{display:block;width:2px;height:10px;background:var(--grace);order:-1;margin-bottom:2px}
.km-wheel .ring{transform-box:fill-box;transform-origin:center;animation:kspin 60s linear infinite}
.km-wheel .r1{animation-direction:reverse;animation-duration:44s}
.km-wheel .r2{animation-duration:30s}
@keyframes kspin{to{transform:rotate(360deg)}}
.kt{font-size:17px;line-height:1.45;min-width:0}
.kt b{display:block;font-family:var(--px);font-weight:400;font-size:16px;line-height:24px;color:var(--grace);-webkit-font-smoothing:none;margin-bottom:2px}
.kt > span{display:block}
.pkey{margin-top:20px}
.pkey > summary{list-style:none;cursor:pointer;color:var(--signal);padding:6px 0;background:var(--dots-s) 0 100%/4px 2px repeat-x}
.pkey > summary::-webkit-details-marker{display:none}
.pkey > summary::before{content:"+ "}
.pkey[open] > summary::before{content:"- "}
.pkey > summary:hover{color:var(--grace)}
.pkey .mapkey-l{margin-top:16px}
/* the census, in a district's popup and beside the map */
.census .pop-h{margin-bottom:8px}
.crows{display:grid;gap:2px}
.crow{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;min-width:0}
.crow .rd{max-width:100%;white-space:normal}
.crow .cl{color:var(--signal);white-space:nowrap}
.crow .cv{color:var(--grace);white-space:nowrap;margin-left:auto}
.crow .cd{flex:1 1 auto;min-width:12px;align-self:flex-end;height:2px;margin-bottom:7px;background:var(--dots-s);background-size:4px 2px}
.crow .cb{flex:1 1 auto;min-width:40px;border:2px solid var(--signal);padding:2px;line-height:0}
.crow .cb i{display:block;height:4px;background:var(--ichor)}
.crow.w{display:block;padding:2px 0}
.crow.w .cl,.crow.w .cv{display:block;white-space:normal}
.census-d{margin:10px 0 0;font-size:17px;line-height:1.5}
.map-panel .census-d{font-size:17px}
/* the pins below: a place in magenta, a station hollow in cyan, a company in cyan */
.pin.poi.pan.station::before{background:var(--void);box-shadow:inset 0 0 0 2px var(--signal),0 0 0 2px var(--void)}
.pin.poi.pan.company::before{background:var(--signal)}
.pin.poi.pan.sealed::before{background:var(--void) var(--d50s);background-size:4px 4px}
.pin.poi.pan.on::before{background:var(--grace);box-shadow:0 0 0 2px var(--void)}

/* the latest file on the front, with the first words of its notes */
.fcard.lead{grid-template-columns:auto minmax(0,1fr) minmax(0,1.15fr);grid-template-areas:"cv hd le" "cv mt le" "cv ig le" "cv ac le" "cv . le"}
.fc-lede{grid-area:le;align-self:start;margin:0;padding:6px 0 4px 24px;position:relative;font-size:18px;line-height:1.6}
.fc-lede::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--signal) 2px,transparent 2px);background-size:2px 4px}
.fc-lede p{margin:0 0 10px}
.fc-lede .sig{color:var(--signal)}
@media (max-width:1099px){.fcard.lead{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"cv hd" "cv mt" "cv ig" "cv ac" "le le"}.fc-lede{margin-top:24px}}
@media (max-width:640px){.fcard.lead{grid-template-areas:"cv hd" "mt mt" "ig ig" "ac ac" "le le"}}
/* room kept for a plate before it is drawn, so an undrawn canvas never takes its default 300 x 150 */
canvas.sigil,.logo canvas{width:48px;height:48px}
.chap canvas.sigil,.pop-vis canvas.sigil{width:96px;height:96px}
@media (max-width:759px){.chap canvas.sigil{width:48px;height:48px}}
.por canvas{width:160px;height:160px}
@media (max-width:560px){.por canvas{width:80px;height:80px}}
.pop-vis.por canvas{width:320px;height:320px;max-width:100%;height:auto;aspect-ratio:1}
.pop-vis.por.sm canvas{width:160px;height:160px}

/* on a phone each row of a reading table becomes a block: the time on top, then what is on screen, then the note */
@media (max-width:700px){
  .tbl{overflow:visible}
  table.beats,table.annals,.tbl table.annals{display:block;min-width:0;width:auto}
  table.beats thead,table.annals thead{display:none}
  table.beats tbody,table.annals tbody{display:block}
  table.beats tr,table.annals tr{display:block;padding:14px 0 16px;background-image:var(--dots-s);background-size:4px 2px;background-repeat:repeat-x;background-position:0 100%}
  table.beats td,table.annals td{display:block;padding:0;background:none}
  table.beats td:first-child,table.annals td:first-child{white-space:normal;margin-bottom:10px}
  table.beats td + td,table.annals td + td{margin-top:10px}
  table.beats td:empty,table.annals td:empty{display:none}
  table.beats td[data-l]::before,table.annals td[data-l]::before{content:attr(data-l);display:block;font-family:var(--px);font-size:16px;line-height:24px;font-style:normal;text-transform:uppercase;color:var(--signal);-webkit-font-smoothing:none;margin-bottom:2px}
  .tc{white-space:normal;text-align:left;overflow-wrap:anywhere}
}
/* a file's three buttons square up on phones: WATCH and ON THE MAP share a row, FRAME BY FRAME takes the next */
@media (max-width:640px){.file-info .acts{display:grid;grid-template-columns:auto 1fr}.file-info .acts .btn{justify-content:center}.file-info .acts .fbf{grid-column:1 / -1}}
@media (max-width:400px){.file-info .acts{grid-template-columns:1fr}}

/* ------------------------------------------------------------------ locations */
/* VII of the index: the districts in turn, each with its places; on a phone the parts of the city ride under the bar */
.loc-jump{display:flex;flex-wrap:wrap;gap:8px;margin:-8px 0 44px}
@media (max-width:759px){
  .loc-jump{position:sticky;top:var(--bar);z-index:20;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:-12px calc(-1 * var(--gut)) 28px;padding:8px var(--gut) 10px;scroll-padding-inline:var(--gut);background:var(--void) var(--dots-s) 0 100%/4px 2px repeat-x}
  .loc-jump::-webkit-scrollbar{display:none}
  .loc-jump .btn{flex:none;padding:4px 10px}
}
.locs{display:grid;gap:72px}
@media (max-width:759px){.locs{gap:56px}}
.lgrp{scroll-margin-top:calc(var(--bar) + 16px)}
@media (max-width:759px){.lgrp{scroll-margin-top:calc(var(--bar) + 68px)}}
.lg-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px 20px;align-items:center;padding-bottom:18px;margin-bottom:20px;background:var(--dots-s) 0 100%/4px 2px repeat-x}
.lg-head.nm{grid-template-columns:minmax(0,1fr) auto}
.lg-id{display:grid;gap:4px;min-width:0}
.lg-k{margin:0;color:var(--signal)}
.lg-t{margin:0;font-family:var(--bl);font-weight:400;font-size:44px;line-height:1.04;color:var(--grace);text-wrap:balance}
@media (min-width:760px){.lg-t{font-size:60px}}
@media (max-width:400px){.lg-t{font-size:36px}.lg-k{overflow-wrap:anywhere}}
.lg-map{justify-self:end}
@media (max-width:640px){.lg-head{grid-template-columns:auto minmax(0,1fr)}.lg-head.nm{grid-template-columns:minmax(0,1fr)}.lg-map{grid-column:1 / -1;justify-self:start}}
.lg-text{max-width:70ch;margin:0 0 28px}
.lg-text p{margin:0 0 14px}
.lg-text .census{max-width:560px;margin-top:18px}
.lcards{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr))}
.lcards.gates{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
@media (max-width:560px){.lcards,.lcards.gates{grid-template-columns:minmax(0,1fr);gap:10px}}
.loc{display:grid;grid-template-rows:1fr auto;min-width:0;border:2px solid var(--signal);background:var(--void)}
.loc > .card > summary{border:0;height:auto;display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;padding:14px 38px 10px 14px}
.loc-p{padding:4px;flex:none}
.loc-p canvas{width:80px;height:80px}
.loc-id{display:grid;gap:4px;flex:1 1 0;min-width:144px;align-content:start}
.loc-k{color:var(--signal);font-size:8px;line-height:12px;overflow-wrap:anywhere}
.loc-n{margin:0;font-weight:400;color:var(--grace);overflow-wrap:anywhere}
.loc-d{font-size:17px;line-height:1.45;color:var(--grace);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden}
.loc-acts{display:flex;flex-wrap:wrap;gap:8px;padding:0 14px 14px}
.loc-acts .btn{padding:4px 10px}
@media (hover:hover){.loc:hover{border-color:var(--grace)}.loc:hover .loc-n{color:var(--signal)}}

/* ------------------------------------------------------------------ the Restored Genesis */
.gb-main{padding-bottom:48px}
.gb-ctl{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:6px 0 18px}
.gb-modes{display:inline-flex;border:2px solid var(--signal)}
.gb-modes button{font-family:var(--px);font-size:16px;line-height:24px;padding:6px 12px;border:0;background:var(--void);color:var(--signal);cursor:pointer;white-space:nowrap;-webkit-font-smoothing:none}
.gb-modes button+button{border-left:2px solid var(--signal)}
.gb-modes button[aria-pressed="true"]{background:var(--signal);color:var(--void)}
.gb-modes button:focus-visible{outline:2px solid var(--ichor);outline-offset:-4px}
.gb-ctl-r{display:inline-flex;gap:8px}
.gb-ctl-r .btn{padding:6px 10px}
.gb-tocb{display:none}
.gb.on .gb-tocb{display:inline-flex}
.gb-nav{display:none}
.gb-paper,.gb-leaf,.gb-end{display:none}
/* the book as one page, which is how it reads without the script */
.gb-flow{max-width:760px;margin:0 auto}
.gb-sec{margin:0 0 56px;padding:0}
.gb-sec+.gb-sec{padding-top:40px;background:var(--dots-s) left top/4px 2px repeat-x}
.gb-sec>p,.gb-sec li,.gb-sec dd{font-size:var(--fs,18px)}
.gb-sig{display:block;width:96px;height:96px;image-rendering:pixelated;margin:0 0 14px}
.gb-sig.big{width:144px;height:144px;margin:0 auto 22px}
.gb-sig.star{width:96px;height:96px;margin:14px auto 0}
.gb-k{color:var(--signal);margin:0 0 6px}
.gb-h{font-family:var(--bl);font-weight:400;font-size:40px;line-height:1.05;color:var(--grace);margin:0 0 18px;break-after:avoid}
.gb-ch .gb-num{color:var(--ichor)}
.gb-lede{font-style:italic;color:var(--grace);margin:0 0 20px}
.gb-cover{text-align:center;padding-top:24px}
.gb-ck{color:var(--signal);margin:0 0 10px}
.gb-title{font-family:var(--bl);font-weight:400;font-size:64px;line-height:1;color:var(--grace);margin:0 0 20px;text-wrap:balance}
.gb-sub{font-style:italic;max-width:30em;margin:0 auto 22px}
.gb-ep{margin:24px auto;max-width:26em;padding:0;font-style:italic;font-size:20px;line-height:1.55;color:var(--grace)}
.gb-ep p{margin:0 0 14px}
.gb-att{font-style:normal;color:var(--signal);font-size:16px}
.gb-toc ol{list-style:none;margin:10px 0 0;padding:0}
.gb-toc li{margin:0}
.gb-toc .tg{color:var(--signal);font-size:16px;line-height:24px;margin:18px 0 2px;-webkit-font-smoothing:none}
.gb-toc .tg:first-child{margin-top:12px}
.gb-toc a{display:flex;align-items:baseline;gap:8px;padding:4px 0;color:var(--grace);text-decoration:none}
.gb-toc a .tt{flex:0 1 auto;min-width:0}
.gb-toc a .ld{flex:1 1 16px;min-width:16px;height:2px;background:var(--dots-s) left center/4px 2px repeat-x}
.gb-toc a:hover .tt{color:var(--signal);text-decoration:underline}
.gb-toc .pn{color:var(--signal);flex:none;min-width:2ch;text-align:right}
.gb:not(.on) .gb-toc a .ld,.gb:not(.on) .gb-toc .pn{display:none}
.gb-kinds{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0 0 16px}
.gb-kinds dt{color:var(--ichor);font-size:16px;line-height:26px}
.gb-kinds dd{margin:0}
.gb-verses{margin:0 0 26px}
.v{margin:0 0 12px;break-inside:avoid}
.v .vn{color:var(--signal);font-size:16px;margin-right:8px;-webkit-font-smoothing:none}
.v a.nv{text-decoration:underline dotted var(--signal);text-decoration-thickness:2px;text-underline-offset:4px}
@media (hover:hover){.v a.nv:hover{color:var(--grace)}.gb-notes a.nr:hover{color:var(--grace)}}
.gb-notes a.nr{text-decoration:none}
.gb .hl{animation:gbhl 1.6s steps(4,end) 1}
@keyframes gbhl{0%,60%{background:var(--d25s);background-size:8px 8px}100%{background:none}}
@media (prefers-reduced-motion:reduce){.gb .hl{animation:none}}
.v .vk{color:var(--ichor);font-size:8px;line-height:12px;margin-right:8px;vertical-align:3px;white-space:nowrap}
.v.logged .vk{color:var(--signal)}
.vt-f,.vt-b,.vt-r{display:none}
.gb[data-mode="first"] .vt-f,.gb[data-mode="both"] .vt-b,.gb[data-mode="received"] .vt-r{display:inline}
.gb[data-mode="first"] .v .vk{color:var(--signal)}
.rs,.dg,.lc,.fw{color:var(--ichor)}
.gb del.gh{color:var(--signal);text-decoration:line-through;text-decoration-color:var(--signal);text-decoration-thickness:2px}
.gb ins.fl{text-decoration:none}
.gb .sh{text-decoration:underline dotted var(--signal);text-decoration-thickness:2px;text-underline-offset:5px}
.gb-rh{color:var(--signal);margin:26px 0 10px;break-after:avoid}
.gb-notes{list-style:none;margin:0;padding:0}
.gb-notes li{margin:0 0 10px;font-size:16px;line-height:1.5}
.gb-notes .nr{color:var(--ichor);font-size:16px;margin-right:6px}
.gb-doc{margin:18px 0 20px}
.gb-doc .doc-b p{margin:0 0 12px}
.gb-doc .sig{color:var(--signal)}
.gb-doc .doc-h s{text-decoration:line-through;text-decoration-color:var(--ichor);text-decoration-thickness:2px}
.gb-doc .gb-pt{margin:18px 0 10px}
.gb-screen{border:2px solid var(--signal);padding:16px 14px 18px;margin:20px 0 6px;text-align:center;font-size:16px;line-height:24px;-webkit-font-smoothing:none;break-inside:avoid}
.gb-screen p{margin:0 0 8px}
.gb-screen .sc-coda{color:var(--grace)}
.gb-screen .sc-coda s{text-decoration:line-through;text-decoration-color:var(--ichor);text-decoration-thickness:2px}
.gb-screen .sc-count{color:var(--signal)}
.gb-screen .sc-offer{color:var(--ichor);margin-top:14px}
/* the book */
.gb.on .gb-flow{max-width:none}
.gb.on .gb-stage{display:flex;justify-content:center}
.gb.on .gb-view{position:relative;width:var(--vw);height:var(--vh);overflow:hidden;background:var(--void);touch-action:pan-y;outline:none;
  box-shadow:4px 4px 0 var(--void),6px 6px 0 var(--signal),10px 10px 0 var(--void),12px 12px 0 var(--signal)}
.gb.on .gb-view:focus-visible{outline:2px solid var(--ichor);outline-offset:4px}
.gb.on .gb-paper{display:block;position:absolute;top:0;height:100%;box-sizing:border-box;border:2px solid var(--signal);background:var(--void)}
.gb.on .gb-paper.l{left:0;width:var(--sx)}
.gb.on .gb-paper.r{left:var(--sx);right:0;border-left:0}
.gb.on.single .gb-paper.l{width:100%}
.gb.on.single .gb-paper.r{display:none}
.gb.on:not(.single) .gb-paper.l::after{content:"";position:absolute;top:0;bottom:0;right:0;width:12px;background:var(--d25s);background-size:8px 8px}
.gb.on:not(.single) .gb-paper.r::before{content:"";position:absolute;top:0;bottom:0;left:0;width:12px;background:var(--d12s);background-size:8px 8px}
.gb.on:not(.single) .gb-paper.r::after{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:linear-gradient(var(--signal) 2px,transparent 2px) 0 0/2px 4px}
.gb-run{position:absolute;top:15px;left:var(--m);right:var(--m);color:var(--signal);font-size:8px;line-height:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-font-smoothing:none}
.gb-paper.r .gb-run{text-align:right}
.gb-fol{position:absolute;bottom:12px;left:var(--m);color:var(--signal);font-size:16px;line-height:20px;-webkit-font-smoothing:none}
.gb-paper.r .gb-fol{left:auto;right:var(--m)}
.gb.on .gb-flow{position:absolute;left:var(--m);top:var(--t);width:var(--fw);height:var(--fh);margin:0;column-width:var(--pw);column-gap:var(--g);column-fill:auto;
  transform:translateX(var(--x,0px));font-size:var(--fs);line-height:1.5;orphans:2;widows:2;z-index:1}
.gb.on .gb-sec{margin:0;padding:0;background:none;break-before:column}
.gb.on .gb-sec>p,.gb.on .gb-sec li,.gb.on .gb-sec dd{font-size:inherit}
.gb.on .gb-end{display:block;height:var(--fh);margin:0;background:var(--d12s);background-size:8px 8px;break-after:column}
.gb.on.single .gb-end{display:none}
.gb.on .gb-cover{height:var(--fh);display:flex;flex-direction:column;justify-content:center;padding:0}
.gb.on .gb-epi{height:var(--fh);display:flex;align-items:center}
.gb.on .gb-h{font-size:calc(var(--fs) * 2.1)}
.gb.on .gb-title{font-size:calc(var(--fs) * 3.3)}
.gb.on .gb-sig{width:96px;height:96px;margin-bottom:10px}
.gb.on .gb-sig.big{width:144px;height:144px}
.gb.on .gb-doc{break-inside:auto}
.gb.on .gb-leaf{display:block;position:absolute;inset:0;pointer-events:none;z-index:3}
.gb-lf{position:absolute;inset:0;visibility:hidden}
.gb-lf.show{visibility:visible}
.gb-lf .gb-paper{display:block}
.gb-lf .gb-flow{max-width:none}
.gb-lf.shade::after{content:"";position:absolute;inset:0;background:var(--d50v);background-size:4px 4px;z-index:2}
.gb-lf.shade1::after{content:"";position:absolute;inset:0;background:var(--d25v);background-size:8px 8px;z-index:2}
.gb.on .gb-nav{display:flex;align-items:center;justify-content:center;gap:12px;margin:22px auto 0;max-width:640px}
.gb-at{color:var(--signal);min-width:11em;text-align:center;white-space:nowrap}
.gb-r{-webkit-appearance:none;appearance:none;flex:1 1 auto;min-width:80px;height:24px;margin:0;background:transparent;cursor:pointer}
.gb-r::-webkit-slider-runnable-track{height:4px;background:var(--signal)}
.gb-r::-moz-range-track{height:4px;background:var(--signal)}
.gb-r::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:20px;margin-top:-8px;background:var(--grace);border:2px solid var(--void);border-radius:0}
.gb-r::-moz-range-thumb{width:12px;height:20px;box-sizing:border-box;background:var(--grace);border:2px solid var(--void);border-radius:0}
.gb-r:focus-visible{outline:2px solid var(--grace);outline-offset:2px}
.gb.on .gb-sec:target{scroll-margin-top:80px}
@media (max-width:759px){
  .gb-ctl{margin-bottom:14px}
  .gb-modes button{padding:6px 8px}
  .gb-h{font-size:34px}
  .gb-title{font-size:48px}
  .gb.on .gb-nav{gap:8px;margin-top:18px}
  .gb-at{min-width:0;font-size:16px}
}
@media (max-width:399px){
  .gb-modes button{padding:6px 7px}
  .gb-w{display:none}
  .gb-ctl-r .btn{padding:6px 6px}
}
@media (prefers-reduced-motion:reduce){.gb-lf{display:none}}
/* the Record's landing: the Restored Genesis and the timeline side by side on every screen (Dylan, October 3),
   sharing their rows so the titles, lines and counts stand level, then the chapters */
.rec-feat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;container-type:inline-size}
.rec-gb{display:grid;grid-row:span 3;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t s" "d s" "c s";row-gap:8px;column-gap:32px;align-items:start;padding:24px 28px 22px 24px;border:2px solid var(--signal);outline:2px solid var(--signal);outline-offset:4px;margin:6px;text-decoration:none;color:var(--grace);background:var(--void);min-width:0}
@supports not (grid-template-rows:subgrid){.rec-gb{grid-row:auto;grid-template-rows:auto 1fr auto}}
.rg-t{grid-area:t;align-self:end;font-family:var(--bl);font-size:40px;font-size:clamp(30px,calc(4.63cqi - 18.7px),40px);line-height:1.02;color:var(--grace);text-wrap:balance}
.rg-d{grid-area:d;font-size:17px;line-height:1.45;max-width:46em}
.rg-short{display:none}
.rg-c{grid-area:c;align-self:end;color:var(--ichor);margin-top:4px}
.rec-gb .sigil{grid-area:s;align-self:center}
.rec-gb canvas.sigil{width:96px;height:96px}
@media (hover:hover){.rec-gb:hover{border-color:var(--grace);outline-color:var(--grace)}.rec-gb:hover .rg-t{color:var(--signal)}}
.rec-gb:focus-visible{outline-color:var(--ichor)}
/* narrower, each stands as a tile: its mark over its title, its shorter line and its count */
@media (max-width:999px){
  .rec-gb{grid-row:span 4;grid-template-columns:minmax(0,1fr);grid-template-areas:"s" "t" "d" "c";row-gap:10px;padding:18px 20px 16px}
  @supports not (grid-template-rows:subgrid){.rec-gb{grid-row:auto;grid-template-rows:auto auto 1fr auto}}
  .rec-gb .sigil{justify-self:start;align-self:end}
  .rg-t{font-size:min(36px,calc(7.58cqi - 9.4px))}
  .rg-long{display:none}
  .rg-short{display:block}
}
@media (max-width:560px){
  .rec-feat{column-gap:6px}
  .rec-gb{--sig:72px;row-gap:8px;padding:12px 12px 10px;margin:5px;outline-offset:3px}
  .rec-gb canvas.sigil{width:72px;height:72px}
  .rg-t{font-size:calc(7.58cqi - 6.2px)}
  .rg-d{font-size:15px;line-height:1.4}
  .rg-c{margin-top:2px}
}

.gb-ch .gb-num{font-family:var(--fellsc);font-size:.84em;letter-spacing:.04em;vertical-align:.04em}
.gb.on .gb-sec.gb-cont{break-before:auto;margin-top:30px;padding-top:26px;background:var(--dots-s) left top/4px 2px repeat-x}
.gb-head{break-inside:avoid;break-after:avoid}
.gb-rh+.gb-verses,.gb-rh+.gb-notes{break-before:avoid}
@media (max-width:759px){.gb.on .gb-nav{flex-wrap:wrap;row-gap:10px}.gb-r{order:3;flex:1 1 100%}.gb-at{flex:1 1 auto}}
.gb:not(.on) .gb-ctl{position:sticky;top:calc(var(--bar) + env(safe-area-inset-top,0px));z-index:5;background:var(--void);margin:0 0 18px;padding:10px 0;box-shadow:0 2px 0 var(--void)}
@media (max-width:359px){.gb-w{display:none}.gb-modes button{padding:6px 8px;font-size:16px}}
.gb-link{margin:18px 0 28px}
.gb-link .btn{white-space:normal;max-width:100%;text-align:left;justify-content:flex-start;line-height:22px}

/* ------------------------------------------------------------------ the laws: the charter, the Covenant, the Concord */
.rec-group{display:grid;gap:14px}
.rec-h{margin:0;color:var(--signal);font-weight:400}
/* the Record in three parts (Dylan, October 3): Before the Charter, the Charter Years, After the Parousia */
.rec-part{display:grid;gap:10px;margin:0 0 26px}
.rec-part:last-child{margin-bottom:0}
.rp-h{margin:0;color:var(--grace);font-weight:400}
.rp-h .rp-n{color:var(--signal)}
.rp-d{margin:0 0 6px;max-width:68ch}
.toc .toc-pt{margin:18px 0 6px;color:var(--grace);font-weight:400}
.toc h2 + .toc-pt{margin-top:0}
.tl .era-d{display:block;max-width:60ch;margin-top:2px;color:var(--grace)}
/* of this Record: where its accounts come from */
.preface{max-width:72ch}
.pre-h{margin:0 0 10px;color:var(--signal);font-weight:400}
.preface p{margin:0}
/* the accounts differ: where the city's accounts part, the Record sets them side by side and leaves them standing */
.acc{margin:32px 5px 36px;padding:14px 18px 6px;border:2px solid var(--signal);outline:2px solid var(--signal);outline-offset:3px}
.acc-h{margin:0 0 14px;color:var(--ichor)}
.acc dl{margin:0;display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:12px 20px;align-items:baseline}
.acc dt{margin:0;color:var(--signal)}
.acc dd{margin:0 0 8px}
@media (max-width:640px){.acc{padding:12px 14px 4px}.acc dl{grid-template-columns:minmax(0,1fr);gap:0}.acc dd{margin:0 0 14px}}
.lawcard{outline:2px solid var(--signal);outline-offset:4px;margin:6px;height:calc(100% - 12px)}
@media (hover:hover){.lawcard:hover{outline-color:var(--grace)}}
.lawcard:focus-visible{outline-color:var(--ichor)}
.law{max-width:860px}
.law-ph{display:grid;gap:10px;margin:0 0 26px}
.law-head{display:flex;align-items:center;gap:20px}
.law-head canvas.sigil{width:96px;height:96px;flex:none}
.law-head .px{margin:0;color:var(--ichor)}
.law-t{margin:2px 0 0;font-family:var(--bl);font-weight:400;font-size:52px;line-height:1.02;color:var(--grace)}
.law-ph .ph-d{margin:0}
@media (max-width:560px){.law-t{font-size:40px}}
.law-note p{margin:0 0 16px;max-width:66ch}
.law-toc{margin:30px 0 6px}
.law-toc h2{margin:0 0 10px;color:var(--signal);font-weight:400}
.law-toc ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));gap:2px 18px}
.law-toc a{display:grid;grid-template-columns:36px minmax(0,1fr);gap:8px;align-items:baseline;text-decoration:none;color:var(--grace);padding:5px 6px;font-size:18px;line-height:1.3}
.law-toc a .px{color:var(--signal)}
.law-toc a:hover{background:var(--signal);color:var(--void)}
.law-toc a:hover .px{color:var(--void)}
.law-doc .doc{scroll-margin-top:calc(var(--bar) + 20px)}
.law .pager{margin-top:64px}
.doc .art{margin:26px 0 8px;font-family:var(--px);font-size:16px;line-height:24px;color:var(--signal);-webkit-font-smoothing:none}
.doc .art:first-child{margin-top:0}
.doc .art .n{color:inherit}
.doc .sl{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;margin:0 0 10px;padding:4px 0 10px;background:var(--dots-s) left bottom/4px 2px repeat-x}
.doc .sl .px{color:var(--signal);min-width:19ch}
.doc .sgn{font-family:var(--bl);font-size:28px;line-height:1.15;color:var(--grace)}
.doc.dk .sig{color:var(--signal)}
.doc.dh{border-color:var(--grace)}
.doc.dh .doc-h{border-color:var(--grace)}
.doc.dh .doc-h pre,.doc.dh .hr,.doc.dh .n{color:var(--grace)}
.doc.dc{border-color:var(--ichor)}
.doc.dc .doc-h{border-color:var(--ichor)}
.doc.dc .doc-h pre,.doc.dc .art,.doc.dc .hr,.doc.dc .n,.doc.dc .sl .px,.doc.dc .sgn{color:var(--ichor)}
.doc.dc .sl{background-image:linear-gradient(90deg,var(--ichor) 2px,transparent 2px)}
.pop-act{margin:16px 0 4px}
.pop-act .btn{white-space:normal;max-width:100%;text-align:left;justify-content:flex-start;line-height:22px}
@media (max-width:560px){
  .law-head{--sig:72px;gap:14px}
  .law-head canvas.sigil{width:72px;height:72px}
  .doc .sl .px{min-width:0;flex:1 1 100%}
  .doc .sgn{font-size:24px}
}
.toc h2.toc-laws{margin-top:22px}

/* ------------------------------------------------------------------ now: what is in play in P+14, and what is gone */
/* a lamp beside an entry, lit ICHOR and glowing for what is still in play, a dead SIGNAL ring for what is gone, as
   NOD burns on the charter's sign and US is dead; what is gone keeps its words and dims its name and its picture */
:root{
  --lamp-lit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%23F22C70' d='M1 0h1v1h-1zM3 0h1v1h-1zM5 0h1v1h-1zM0 1h1v1h-1zM2 1h1v1h-1zM4 1h1v1h-1zM6 1h1v1h-1zM1 2h1v1h-1zM5 2h1v1h-1zM7 2h1v1h-1zM0 3h1v1h-1zM6 3h1v1h-1zM1 4h1v1h-1zM7 4h1v1h-1zM0 5h1v1h-1zM2 5h1v1h-1zM6 5h1v1h-1zM1 6h1v1h-1zM3 6h1v1h-1zM5 6h1v1h-1zM7 6h1v1h-1zM2 7h1v1h-1zM4 7h1v1h-1zM6 7h1v1h-1z'/%3E%3Cpath fill='%23F22C70' d='M3 2h1v1h-1zM4 2h1v1h-1zM2 3h1v1h-1zM3 3h1v1h-1zM4 3h1v1h-1zM5 3h1v1h-1zM2 4h1v1h-1zM3 4h1v1h-1zM4 4h1v1h-1zM5 4h1v1h-1zM3 5h1v1h-1zM4 5h1v1h-1z'/%3E%3C/svg%3E");
  --lamp-dead:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%2338D0DA' d='M2 1h1v1h-1zM3 1h1v1h-1zM4 1h1v1h-1zM5 1h1v1h-1zM1 2h1v1h-1zM6 2h1v1h-1zM1 3h1v1h-1zM6 3h1v1h-1zM1 4h1v1h-1zM6 4h1v1h-1zM1 5h1v1h-1zM6 5h1v1h-1zM2 6h1v1h-1zM3 6h1v1h-1zM4 6h1v1h-1zM5 6h1v1h-1z'/%3E%3C/svg%3E");
  --led-lit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 4 4' shape-rendering='crispEdges'%3E%3Cpath fill='%23F22C70' d='M1 0h1v1h-1zM2 0h1v1h-1zM0 1h1v1h-1zM1 1h1v1h-1zM2 1h1v1h-1zM3 1h1v1h-1zM0 2h1v1h-1zM1 2h1v1h-1zM2 2h1v1h-1zM3 2h1v1h-1zM1 3h1v1h-1zM2 3h1v1h-1z'/%3E%3C/svg%3E");
  --led-dead:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 4 4' shape-rendering='crispEdges'%3E%3Cpath fill='%2338D0DA' d='M1 0h1v1h-1zM2 0h1v1h-1zM0 1h1v1h-1zM3 1h1v1h-1zM0 2h1v1h-1zM3 2h1v1h-1zM1 3h1v1h-1zM2 3h1v1h-1z'/%3E%3C/svg%3E");
}
.now{display:flex;align-items:center;gap:0;width:16px;height:24px;margin:8px 0 0;color:var(--ichor);font-family:var(--px);font-size:16px;line-height:24px;font-weight:400;-webkit-font-smoothing:none}
.now::before{content:"";flex:none;width:16px;height:16px;margin-left:-2px;background:var(--lamp-lit) 0 0/16px 16px no-repeat}
.now.dead{color:var(--signal)}
.now.dead::before{background-image:var(--lamp-dead)}
.pop-id .now{margin-top:10px}
/* the faces of the cards */
.fac > summary{grid-template-rows:auto auto auto}
.fac .fsig{grid-row:1 / -1;line-height:0;position:relative;align-self:center}
.fac .now,.corp .now{margin-top:4px}
.fac .now{grid-column:2;align-self:start}
.card.dead .fac-n,.card.dead .corp-n,.card.dead .chip-t{color:var(--signal)}
.card.dead .logo,.card.dead .fsig{position:relative}
.card.dead .logo::after,.card.dead .fsig::after{content:"";position:absolute;inset:0;background:var(--d25v);background-size:8px 8px;pointer-events:none}
.loc-acts{align-items:center}
/* a place drawn as it stands now, with its picture as it was: two buttons under it choose between them */
.pop-vis.was canvas[hidden]{display:none}
.was-t{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;line-height:24px}
.was-t button{margin:0;padding:1px 9px;font-family:var(--px);font-size:16px;line-height:20px;color:var(--signal);background:var(--void);border:2px solid var(--signal);cursor:pointer;-webkit-font-smoothing:none}
.was-t button[aria-pressed="true"]{color:var(--grace);border-color:var(--grace);cursor:default}
@media (hover:hover){.was-t button[aria-pressed="false"]:hover{border-color:var(--grace)}}
/* the key to the lamps, which also sorts what it keys */
.nowkey{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 26px}
.nowkey .nk-h{margin:0 6px 0 0;color:var(--signal)}
.nk{display:inline-flex;align-items:center;gap:6px;margin:0 8px 0 0;font-family:var(--px);font-size:16px;line-height:24px;color:var(--ichor)}
.nk::before{content:"";flex:none;width:16px;height:16px;background:var(--lamp-lit) 0 0/16px 16px no-repeat}
.nk.dead{color:var(--signal)}
.nk.dead::before{background-image:var(--lamp-dead)}
.nk b{font-weight:400;color:var(--grace)}
/* the laws */
.lawcard{grid-template-areas:"n sg" "t sg" "w sg" "s s"}
.lawcard.dead .ch-t{color:var(--signal)}
.lawcard .now{grid-area:s;margin:2px 0 0}
.law-ph .now{margin:0}
/* the lamp stands beside its name, on the name's line (Dylan, October 3) */
.pop-t .now,.fac-n .now,.corp-n .now,.law-t .now,.lawcard .ch-t .now{display:inline-block;vertical-align:middle;width:16px;height:16px;margin:0 0 0 .4em;grid-area:auto;grid-column:auto;position:relative;top:-.08em}
.pop-t .now::before,.fac-n .now::before,.corp-n .now::before,.law-t .now::before,.lawcard .ch-t .now::before{display:block;margin:0}
.lamp-nw{white-space:nowrap}
@media (max-width:560px){.nowkey .nk-h{flex-basis:100%}}
/* the index's groups of factions and companies, and the street's price table */
.fgrp + .fgrp{margin-top:34px}
.fgrp-h{margin:0 0 14px;font-family:var(--px);font-weight:400;font-size:16px;line-height:24px;color:var(--signal);-webkit-font-smoothing:none;padding-bottom:6px;border-bottom:2px solid var(--signal)}
table.ptab{border-collapse:collapse;width:100%;margin:14px 0;font-size:16px;line-height:1.45}
table.ptab td{padding:7px 10px 7px 0;vertical-align:top;background-image:var(--dots-s);background-size:4px 2px;background-repeat:repeat-x;background-position:0 100%}
table.ptab td + td{text-align:right;font-family:var(--px);font-size:14px;color:var(--ichor);white-space:nowrap;-webkit-font-smoothing:none;padding-right:0}
/* the city's people: each with a portrait drawn as the cast's are, five to a row on a desk (Dylan, October 4) */
.chars.city{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.chars.city .char-n{font-size:28px}
@media (max-width:560px){.chars.city{grid-template-columns:repeat(2,minmax(0,1fr))}.chars.city .char-n{font-size:22px}}

/* ------------------------------------------------------------------ the City (October 4): the Hours, the paper, the station, the screens */
a.chip{font-family:var(--px);font-size:16px;line-height:24px;padding:4px 10px;border:2px solid var(--signal);color:var(--signal);text-decoration:none;white-space:normal;overflow-wrap:anywhere;max-width:100%;box-sizing:border-box;-webkit-font-smoothing:none}
a.chip:hover{background:var(--signal);color:var(--void)}
.csec{margin:0 0 64px}
.csec-d{margin:-6px 0 22px;max-width:64ch}
.csec.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:899px){.csec.two{grid-template-columns:minmax(0,1fr)}}
.cdoor{display:grid;grid-template-columns:minmax(0,1fr);min-width:0;gap:12px;align-content:start;padding:20px;border:2px solid var(--signal);text-decoration:none;color:var(--grace);background:var(--void)}
.cdoor .btn{justify-self:start}
.cdoor-d{font-size:17px;line-height:1.5}
@media (hover:hover){.cdoor:hover{border-color:var(--grace)}}
.radio-door{border-color:var(--ichor)}
.rd-title{margin:0;font-family:var(--bl);font-size:40px;line-height:1;color:var(--grace)}
.rd-peek{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.rd-peek li{display:flex;gap:12px}

/* the Hours */
.hours{border:2px solid var(--signal)}
.hr-now{padding:8px 14px;background:var(--ichor);color:var(--void)}
.hr-tabs{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));border-bottom:2px solid var(--signal)}
.hr-b{appearance:none;background:var(--void);color:var(--signal);border:0;border-right:2px solid var(--signal);padding:10px 4px;display:grid;gap:2px;justify-items:center;align-content:start;cursor:pointer;font-family:var(--px);font-size:16px;line-height:24px;-webkit-font-smoothing:none}
.hr-b:last-child{border-right:0}
.hr-b .hr-c{font-size:8px;line-height:12px;color:var(--grace)}
.hr-b[aria-selected="true"]{background:var(--signal);color:var(--void)}
.hr-b[aria-selected="true"] .hr-c{color:var(--void)}
.hr-b.is-now::after{content:"NOW";font-size:8px;line-height:12px;color:var(--ichor)}
.hr-b.is-now[aria-selected="true"]::after{color:var(--void)}
@media (hover:hover){.hr-b:hover{color:var(--grace)}}
.hr-p{padding:20px 20px 24px}
.hr-p + .hr-p{border-top:2px dashed var(--signal)}
.hours.js .hr-p + .hr-p{border-top:0}
.hr-head{display:flex;gap:20px;align-items:flex-start;margin-bottom:12px}
.hr-pic{width:160px;height:160px;flex:none;border:2px solid var(--signal)}
.hr-k{margin:0}
.hr-t{margin:2px 0 4px;font-size:32px;line-height:40px;color:var(--grace)}
.hr-l{margin:0;font-style:italic;max-width:52ch}
.hr-pillar{margin:10px 0 0;color:var(--ichor)}
.hr-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.hr-cols p{margin:0 0 6px}
.hr-cols .px{margin-bottom:4px}
.hr-more{margin:18px 0 8px;color:var(--signal)}
@media (max-width:899px){.hr-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}.hr-b:nth-child(4){border-right:0}.hr-b:nth-child(-n+4){border-bottom:2px solid var(--signal)}.hr-cols{grid-template-columns:1fr;gap:14px}}
@media (max-width:560px){.hr-head{flex-direction:column}.hr-pic{width:128px;height:128px}}

/* the curfew map, as the Tide Table prints it */
svg.curfew{display:block;width:100%;height:auto;shape-rendering:crispEdges;border:2px solid var(--signal);background:var(--void)}
svg.curfew text{font-family:var(--px)}
svg.curfew .cf-l{font-size:7px;fill:var(--signal);letter-spacing:.5px;paint-order:stroke;stroke:var(--void);stroke-width:2.5px;stroke-linejoin:round}
svg.curfew .cf-n{font-size:6.5px;fill:var(--ichor)}
svg.curfew .cf-g{font-size:7px;fill:var(--void)}
@media (prefers-reduced-motion:no-preference){svg.curfew .cf-round{animation:cf-march 1.6s steps(7) infinite}}
@keyframes cf-march{to{stroke-dashoffset:-14}}
.cf-wrap{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:24px;align-items:start}
.cf-map{min-width:0}
.cf-side{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;justify-items:start}
.cf-side .tt-tab{justify-self:stretch}
@media (max-width:899px){.cf-wrap{grid-template-columns:minmax(0,1fr)}}


/* the Tide Table */
.tt-mast{display:grid;justify-items:center;text-align:center;gap:4px;padding:22px 16px 18px;border-bottom:6px double var(--signal)}
.tt-mast.sm{padding:10px 8px 12px;border-bottom-width:4px}
.tt-no,.tt-where{margin:0;color:var(--signal)}
.tt-where{font-size:8px;line-height:12px}
.tt-title{margin:0;font-family:var(--bl);font-size:72px;line-height:1;color:var(--grace)}
.tt-mast.sm .tt-title{font-size:44px}
@media (max-width:560px){.tt-title{font-size:48px}.tt-mast.sm .tt-title{font-size:36px}}
.tt-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"tides round" "rates round" "map map" "dead terms" "week week" "notices notices";gap:0}
.tt-box{padding:16px 18px 18px;border-top:2px solid var(--signal);min-width:0}
.tt-box.tides{grid-area:tides}.tt-box.round{grid-area:round;border-left:2px solid var(--signal)}
.tt-box.rates{grid-area:rates}.tt-box.map{grid-area:map}
.tt-box.dead{grid-area:dead}.tt-box.terms{grid-area:terms;border-left:2px solid var(--signal)}
.tt-box.week{grid-area:week}.tt-box.notices{grid-area:notices}
.tt-mapin{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:20px;align-items:start}
@media (max-width:899px){.tt-grid{grid-template-columns:1fr;grid-template-areas:"tides" "round" "rates" "map" "dead" "terms" "week" "notices"}.tt-box{border-left:0!important}.tt-mapin{grid-template-columns:1fr}}
.tt-h{margin:0 0 8px;color:var(--ichor)}
.tt-small{margin:0 0 10px;font-size:16px;line-height:1.45;font-style:italic}
.tt-scroll{overflow-x:auto}
.tt-tab{border-collapse:collapse;width:100%;font-size:17px}
.tt-tab th{font-family:var(--px);font-weight:400;font-size:8px;line-height:12px;color:var(--signal);text-align:left;padding:4px 8px 4px 0;border-bottom:2px solid var(--signal)}
.tt-tab td{padding:5px 10px 5px 0;border-bottom:1px dotted var(--signal);vertical-align:top}
.tt-tab td.px{white-space:nowrap}
.tt-tab .cf-gn{color:var(--void);background:var(--grace);text-align:center;padding:5px 6px}
.tt-tab.gates{margin-top:12px}
.tt-list{list-style:none;margin:0 0 14px;padding:0}
.tt-list li{display:flex;justify-content:space-between;gap:12px;padding:4px 0;border-bottom:1px dotted var(--signal);font-size:17px}
.tt-list b{font-weight:400;color:var(--ichor);text-align:right}
.tt-dead,.tt-terms,.tt-week{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:17px}
.tt-dead p{margin:0}
.tt-mark{color:var(--ichor);font-size:8px!important;line-height:12px!important}
.tt-week li::before,.tt-terms li::before{content:"// ";font-family:var(--px);color:var(--signal)}
.tt-ads{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:10px}
.tt-ad{border:2px solid var(--signal);padding:10px 12px}
.tt-ad .px{margin:0 0 4px;color:var(--grace);background:var(--signal);color:var(--void);display:inline-block;padding:0 6px}
.tt-ad p:last-child{margin:0;font-size:16px;line-height:1.45}
.tt-box.map svg.curfew{margin:6px 0 10px}

/* the station */
.rd-air{display:flex;gap:10px;align-items:center;margin:-12px 0 28px;color:var(--signal)}
.rd-dot{width:12px;height:12px;background:var(--signal);flex:none}
.rd-air.on{color:var(--ichor)}
.rd-air.on .rd-dot{background:var(--ichor)}
@media (prefers-reduced-motion:no-preference){.rd-air.on .rd-dot{animation:thm-wait 1s steps(1) infinite}}
.rd-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}
@media (max-width:899px){.rd-grid{grid-template-columns:1fr;gap:0}}
.rd-sched,.rd-songs,.rd-deds{list-style:none;margin:0 0 32px;padding:0;display:grid;gap:12px}
.rd-slot{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;padding:12px 14px;border:2px solid var(--signal)}
.rd-slot p{margin:0}
.rd-slot.on{border-color:var(--ichor);box-shadow:inset 6px 0 0 var(--ichor)}
.rd-n{margin:0;color:var(--grace)}
.rd-songs li,.rd-deds li{padding:0 0 10px;border-bottom:1px dotted var(--signal)}
.rd-songs p,.rd-deds p{margin:0}

/* finding on a page of the index, and the way back up */
.totop{position:fixed;right:16px;bottom:16px;z-index:55}
.cf-list{margin:6px 0 16px;padding-left:22px;display:grid;gap:6px;font-size:16px;line-height:1.4}
.cf-list li::marker{font-family:var(--px);color:var(--ichor)}
#lyCurfew[aria-pressed="true"]{background:var(--ichor);color:var(--void)}
.cf-box{position:absolute;left:10px;top:10px;z-index:6;width:min(280px,calc(100% - 80px));max-height:calc(100% - 20px);overflow:auto;padding:10px 12px 12px;background:var(--void);border:2px solid var(--ichor)}
.cf-box p{margin:0 0 6px}
.cf-say{font-size:15px;line-height:1.4}
.cf-round-l{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:2px;font-size:15px;line-height:1.35}
@media (max-width:759px){.cf-box .cf-round-l{display:none}}
.tt-line{margin:0 0 12px;padding:8px 10px;border:2px solid var(--ichor);font-size:16px;line-height:1.45}
.tt-line .px{margin-right:8px}
@media (max-width:440px){.links a{padding:12px 2px}.brand svg{width:22px;height:22px}.bar-in{gap:4px;padding-inline:8px}.thm{padding:12px 0 12px 2px}.thm svg{width:20px;height:20px}.fnd{padding:12px 2px;margin:0}.fnd svg{width:20px;height:20px}}
@media (max-width:359px){.links a{padding:12px 1px}}
@media (max-width:559px){.subnav .btn{white-space:normal;text-align:center;line-height:20px}}
@media (max-width:560px){.hr-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.hr-b{border-bottom:2px solid var(--signal)}.hr-b:nth-child(2n){border-right:0}.hr-b:nth-child(4){border-right:0}.hr-b:nth-child(n+7){border-bottom:0}
  .tt-tab.round thead{display:none}.tt-tab.round tr{display:grid;grid-template-columns:30px 64px minmax(0,1fr);border-bottom:1px dotted var(--signal);padding:4px 0}.tt-tab.round td{border:0;padding:2px 6px 2px 0}.tt-tab.round td:last-child{grid-column:2 / -1;font-size:16px}}
@media (max-width:560px){
  .tides-t thead{display:none}
  .tides-t tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));row-gap:4px;border-bottom:1px dotted var(--signal);padding:6px 0}
  .tides-t td{border:0;padding:0 4px 0 0}
  .tides-t td:first-child{grid-column:1 / -1;margin-bottom:2px}
  .tides-t td[data-l]::before{content:attr(data-l);display:block;font-size:8px;line-height:12px;color:var(--signal)}
}

/* ------------------------------------------------------------------ the search */
.modal-card.find{height:min(760px,100%)}
@media (max-width:640px){.modal-card.find{height:100%}}
.srch .s-q{position:sticky;top:var(--mbh,50px);z-index:1;display:grid;gap:8px;margin:-24px -24px 0;padding:20px 24px 14px;background:var(--void);border-bottom:2px solid transparent;background-image:linear-gradient(90deg,var(--signal) 2px,transparent 2px);background-size:4px 2px;background-repeat:repeat-x;background-position:0 100%}
.srch input{box-sizing:border-box;width:100%;margin:0;padding:10px 12px;font-family:var(--px);font-size:16px;line-height:24px;color:var(--grace);background:var(--void);border:2px solid var(--signal);border-radius:0;-webkit-appearance:none;appearance:none;-webkit-font-smoothing:none}
.srch input::placeholder{color:var(--signal);opacity:.75}
.srch input:focus{outline:2px solid var(--ichor);outline-offset:2px}
.srch input::-webkit-search-cancel-button{-webkit-appearance:none}
.s-n{margin:0;color:var(--signal);font-size:16px;line-height:24px}
.s-res{list-style:none;margin:0;padding:8px 0 0}
.s-res li{margin:0}
.srch a.s-a{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;align-items:start;padding:12px 8px 12px 0;color:var(--grace);text-decoration:none;background:var(--dots-s) 0 100%/4px 2px repeat-x}
.srch a.s-a:focus{outline:2px solid var(--ichor);outline-offset:-2px}
.srch a.s-a:hover{color:var(--grace);background:var(--dots-s) 0 100%/4px 2px repeat-x}
@media (hover:hover){.srch a.s-a:hover .s-t{color:var(--signal)}}
.s-m{width:48px;height:48px;display:grid;place-items:center;line-height:0}
.s-m canvas{display:block}
.s-id{display:grid;gap:3px;min-width:0}
.s-k{color:var(--signal);font-size:16px;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s-t{font-size:19px;line-height:25px;color:var(--grace);overflow-wrap:anywhere}
.s-d{font-size:15px;line-height:21px;color:var(--grace);opacity:.8;overflow-wrap:anywhere}
.s-res mark{background:none;color:var(--ichor)}
.s-t mark{color:var(--ichor)}
.s-more{padding:18px 0 4px;text-align:center}
@media (max-width:640px){
  .srch .s-q{margin:-20px calc(-1 * var(--gut)) 0;padding:16px var(--gut) 12px}
  .srch a.s-a{grid-template-columns:40px minmax(0,1fr);gap:12px}
  .s-m{width:40px;height:48px}
  .s-t{font-size:18px;line-height:24px}
}
/* a heading, a date or an Hour the search lands on */
.chap h2[id],.tl li[id],.csec h2[id]{scroll-margin-top:calc(var(--bar) + 20px)}
.tl li:target{outline:2px solid var(--ichor);outline-offset:6px}
.chap h2:target{color:var(--ichor)}

/* the ads dealt across the site: a band between sections, two to a row, one on a phone */
.tt-box.bypage .tt-mark{margin-top:6px}

/* the map at the head of the City */
.cm-frame{position:relative;max-width:960px;margin:0 auto;border:2px solid var(--signal);line-height:0;background:var(--void);overflow:hidden}
.cm-img{display:block}
.cm-img img{display:block;width:100%;height:auto;image-rendering:pixelated;image-rendering:crisp-edges}
.cm-names{position:absolute;inset:0;pointer-events:none}
.cm-d{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;padding:3px 6px;font-size:16px;line-height:18px;text-align:center;color:var(--signal);background:var(--void);border:2px solid var(--signal);text-decoration:none;white-space:nowrap}
.cm-short{display:none}
@media (hover:hover){.cm-d:hover{color:var(--void);background:var(--signal)}}
.cm-d:focus-visible{outline:2px solid var(--ichor);outline-offset:2px}
.cm-acts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:960px;margin:14px auto 0}
@media (max-width:759px){.cm-d{font-size:8px;line-height:12px;padding:2px 4px;border-width:1px}.cm-long{display:none}.cm-short{display:inline}}

/* the Pillar's round under the curfew map, a stop to a card */
.cf-rk{margin:28px 0 12px}
.stops{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:8px}
.stops li{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"n t" "n w" "n d";column-gap:12px;row-gap:2px;padding:10px 12px;border:2px solid var(--signal)}
.stops li.st-end{border-style:dotted}
.st-n{grid-area:n;font-size:16px;line-height:24px;min-width:1.5em}
.st-t{grid-area:t;font-size:16px;line-height:20px}
.st-w{grid-area:w;font-size:8px;line-height:12px}
.st-d{grid-area:d;font-size:16px;line-height:1.35}
@media (max-width:640px){
  .stops{gap:0;border-top:2px solid var(--signal)}
  .stops li{border:0;border-bottom:1px dotted var(--signal);padding:8px 0;column-gap:10px}
  .stops li.st-end{border-bottom:2px solid var(--signal)}
  .st-d{font-size:15px}
  .cm-acts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .cm-acts .btn{justify-content:center;text-align:center;padding-inline:4px}
}

/* ------------------------------------------------------------------ the ads
   The houses' ads, which the archive carries as a sourcebook carries its advertisers' (Dylan, October 4: a place
   they have paid to advertise on, seamless through the site, a high density, each one a link like an ad on the web,
   and each a design of its own, made to catch the eye). Every part of an ad keeps a place of its own in the ad's
   grid, so nothing lies over anything else, and on a narrow column each design stacks into one column. */
.adband{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:36px 0;align-items:stretch}
.adband.wide{grid-template-columns:minmax(0,1fr)}
@media (max-width:759px){.adband{grid-template-columns:minmax(0,1fr);margin:28px 0}.adband > .ad-a:nth-child(n+2){display:none}}
.rtext .adband{margin:40px 0}
.tl li.tl-ads{padding:0 0 30px;display:block}
.tl li.tl-ads::before{display:none}
.tl li.tl-ads .adband{margin:0}
.home-sec .adband{margin:8px 0 0}
.lcards > .ad-a.in-grid{min-height:100%}
a.ad-a{display:block;min-width:0;container-type:inline-size;color:var(--grace);text-decoration:none;background:none;padding:0;cursor:pointer}
a.ad-a:hover{background:none;color:var(--grace)}
a.ad-a:focus-visible{outline:2px solid var(--ichor);outline-offset:4px}
@media (hover:hover){a.ad-a:hover > .ad{outline:2px solid var(--ichor);outline-offset:3px}}
a.ad-a > .ad{height:100%}
.ad{position:relative;box-sizing:border-box;display:grid;align-content:stretch;margin:0;color:var(--grace);background:var(--void);overflow:hidden;line-height:1.4;min-width:0}
.ad > *{min-width:0}
.ad p{margin:0}
.ad-tag{grid-area:tag;justify-self:end;font-size:8px;line-height:12px;-webkit-font-smoothing:none}
.ad-art{grid-area:art;display:grid;place-items:center;line-height:0}
.ad-brand{grid-area:brand;font-family:var(--px);font-size:16px;line-height:24px;-webkit-font-smoothing:none;overflow-wrap:anywhere}
.ad-head{grid-area:head;font-family:var(--px);font-size:24px;line-height:28px;-webkit-font-smoothing:none}
.ad-body{grid-area:body;font-size:16px;line-height:1.4}
.ad-fine{grid-area:fine;font-size:8px;line-height:12px}
@container (min-width:420px){.ad-head{font-size:32px;line-height:36px}}
@container (min-width:620px){.ad-head{font-size:40px;line-height:44px}}

/* 1. a screen that glows: the mark in an ICHOR haze, the name on an ICHOR bar, the line big */
.look-glow{border:2px solid var(--ichor);grid-template-columns:minmax(0,1fr);grid-template-areas:"tag" "art" "brand" "head" "body" "fine";grid-template-rows:auto auto auto auto 1fr auto}
.look-glow .ad-tag{justify-self:stretch;text-align:right;background:var(--ichor);color:var(--void);padding:2px 8px}
.look-glow .ad-art{padding:22px 16px;background:var(--void) var(--d25i);background-size:8px 8px;border-bottom:2px solid var(--ichor)}
.look-glow .ad-art canvas{outline:2px solid var(--void);outline-offset:6px;background:var(--void)}
.look-glow .ad-brand{background:var(--ichor);color:var(--void);padding:4px 16px;letter-spacing:2px}
.look-glow .ad-head{padding:14px 16px 8px}
.look-glow .ad-body{padding:0 16px 12px}
.look-glow .ad-fine{padding:8px 16px 10px;color:var(--ichor);border-top:2px dashed var(--ichor)}
@container (min-width:700px){.look-glow{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"tag tag" "art brand" "art head" "art body" "art fine";grid-template-rows:auto auto auto 1fr auto}.look-glow .ad-art{border-bottom:0;border-right:2px solid var(--ichor);padding:22px 48px}}
@media (prefers-reduced-motion:no-preference){.look-glow .ad-head{animation:ad-flick 9s steps(1) infinite}}
@keyframes ad-flick{0%,96%,100%{visibility:visible}97%,99%{visibility:hidden}}

/* 2. a screen run in reverse: SIGNAL ground, VOID ink */
.look-invert{background:var(--signal);color:var(--void);padding:10px 16px 16px;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tag tag" "brand art" "head art" "body body" "fine fine";grid-template-rows:auto auto auto 1fr auto;column-gap:14px;row-gap:8px}
.look-invert .ad-tag{color:var(--void)}
.look-invert .ad-brand{align-self:end;justify-self:start;color:var(--signal);background:var(--void);padding:0 8px}
.look-invert .ad-head{color:var(--void);align-self:start}
.look-invert .ad-art{align-self:start}
.look-invert .ad-art canvas{border:4px solid var(--void);background:var(--void)}
.look-invert .ad-body{color:var(--void)}
.look-invert .ad-fine{color:var(--void);border-top:2px solid var(--void);padding-top:6px}

/* 3. a screen with a crawl along its foot */
.look-ticker{border:2px solid var(--signal);border-top-width:6px;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"tag tag" "art brand" "art head" "body body" "fine fine" "crawl crawl";grid-template-rows:auto auto auto 1fr auto auto;column-gap:14px}
.look-ticker .ad-tag{color:var(--signal);padding:4px 10px 0}
.look-ticker .ad-art{padding:4px 0 0 14px;align-self:start}
.look-ticker .ad-art canvas{border:2px solid var(--signal)}
.look-ticker .ad-brand{color:var(--signal);padding:4px 14px 0 0;align-self:end}
.look-ticker .ad-head{padding:2px 14px 8px 0}
.look-ticker .ad-body{padding:8px 14px}
.look-ticker .ad-fine{padding:0 14px 10px;color:var(--signal)}
.ad-crawl{grid-area:crawl;overflow:hidden;white-space:nowrap;background:var(--ichor);color:var(--void);font-size:16px;line-height:24px}
.ad-crawl span{display:inline-block;padding-left:100%}
@media (prefers-reduced-motion:no-preference){.ad-crawl span{animation:ad-crawl 40s steps(400) infinite}}
@keyframes ad-crawl{to{transform:translateX(-100%)}}

/* 4. a web banner: the mark in its box over a dotted ground, the line big, the button to press */
.look-banner{border:2px solid var(--signal);padding:10px 16px 16px;background:var(--void) var(--d12s);background-size:8px 8px;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"tag tag" "art brand" "art head" "body body" "fine cta";grid-template-rows:auto auto auto 1fr auto;column-gap:16px;row-gap:6px}
.look-banner .ad-tag{color:var(--signal);background:var(--void);padding:0 4px}
.look-banner .ad-art{align-self:start;background:var(--void);border:2px solid var(--signal);padding:6px}
.look-banner .ad-brand{color:var(--ichor);align-self:end;justify-self:start;background:var(--void);padding:0 4px}
.look-banner .ad-head{justify-self:start;background:var(--void);padding:0 4px}
.look-banner .ad-body{background:var(--void);padding:6px 8px;margin-top:4px}
.look-banner .ad-fine{align-self:center;justify-self:start;color:var(--signal);background:var(--void);padding:0 4px}
.ad-cta{grid-area:cta;align-self:center;justify-self:end;background:var(--ichor);color:var(--void);font-size:16px;line-height:24px;padding:4px 12px;margin:0 4px 4px 0;box-shadow:4px 4px 0 var(--signal);max-width:100%;text-align:center}

/* 5. a billboard under its lamps, in a heavy frame */
.look-billboard{border:6px solid var(--signal);box-shadow:inset 0 0 0 2px var(--void),inset 0 0 0 4px var(--ichor);padding:28px 18px 14px;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand art" "head art" "body body" "fine tag";grid-template-rows:auto auto 1fr auto;column-gap:14px;row-gap:8px}
.ad-lamps{position:absolute;top:10px;left:14px;right:14px;height:4px;background:linear-gradient(90deg,var(--ichor) 0 4px,transparent 4px) 0 0/20px 4px repeat-x}
.look-billboard .ad-tag{align-self:end;color:var(--signal)}
.look-billboard .ad-brand{color:var(--signal);letter-spacing:3px}
.look-billboard .ad-head{color:var(--ichor);font-size:32px;line-height:34px}
@container (min-width:420px){.look-billboard .ad-head{font-size:40px;line-height:42px}}
@container (min-width:620px){.look-billboard .ad-head{font-size:48px;line-height:50px}}
.look-billboard .ad-art{align-self:center}
.look-billboard .ad-fine{color:var(--signal);align-self:end}

/* 6. a warning between hazard bands, its line stencilled big */
.look-stencil{border:2px solid var(--ichor);padding:0 16px;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"band band" "tag tag" "brand art" "head head" "body body" "fine fine" "band2 band2";grid-template-rows:auto auto auto auto 1fr auto auto;column-gap:12px;row-gap:8px}
.look-stencil::before,.look-stencil::after{content:"";height:16px;margin:0 -16px;background:repeating-linear-gradient(45deg,var(--ichor) 0 10px,var(--void) 10px 20px)}
.look-stencil::before{grid-area:band}
.look-stencil::after{grid-area:band2;margin-top:4px}
.look-stencil .ad-tag{color:var(--ichor)}
.look-stencil .ad-brand{align-self:end;justify-self:start;color:var(--void);background:var(--signal);padding:0 8px}
.look-stencil .ad-head{color:var(--ichor);font-size:32px;line-height:34px;letter-spacing:1px}
@container (min-width:420px){.look-stencil .ad-head{font-size:40px;line-height:42px}}
.look-stencil .ad-art{align-self:end}
.look-stencil .ad-fine{color:var(--signal)}

/* 7. a terminal typing itself out on the Mesh */
.look-terminal{border:2px solid var(--signal);grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"bar bar" "tag tag" "line art" "head art" "body body" "fine fine";grid-template-rows:auto auto auto auto 1fr auto;column-gap:14px;row-gap:6px;padding-bottom:12px}
.ad-bar{grid-area:bar;display:flex;align-items:center;gap:6px;background:var(--signal);color:var(--void);padding:4px 8px;font-size:8px;line-height:12px}
.ad-bar i{width:8px;height:8px;background:var(--void)}
.ad-bar i:first-child{background:var(--ichor)}
.ad-bar span{margin-left:6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.look-terminal .ad-tag{color:var(--signal);padding:0 10px}
.ad-line{grid-area:line;color:var(--signal);font-size:16px;line-height:24px;padding:0 14px;overflow-wrap:anywhere}
.look-terminal .ad-head{padding:0 14px}
.ad-cur{display:inline-block;width:.55em;height:.85em;background:var(--ichor);vertical-align:-.08em;margin-left:6px}
@media (prefers-reduced-motion:no-preference){.ad-cur{animation:ad-blink 1s steps(1) infinite}}
@keyframes ad-blink{50%{visibility:hidden}}
.look-terminal .ad-art{align-self:start;padding-right:14px}
.look-terminal .ad-art canvas{border:2px dashed var(--signal);padding:4px}
.look-terminal .ad-body{padding:4px 14px 0;font-family:var(--px);font-size:16px;line-height:24px;color:var(--signal);-webkit-font-smoothing:none}
.look-terminal .ad-fine{color:var(--ichor);padding:4px 14px 0}

/* 8. a neon sign on a dark wall, its name outlined in ICHOR tube and its line in SIGNAL */
.look-neon{border:2px solid var(--void);outline:2px solid var(--signal);outline-offset:-8px;padding:22px 22px 20px;background:var(--void) var(--d12s);background-size:8px 8px;text-align:center;justify-items:center;grid-template-columns:minmax(0,1fr);grid-template-areas:"tag" "art" "brand" "head" "body" "fine";grid-template-rows:auto auto auto auto 1fr auto;row-gap:10px}
.look-neon .ad-tag{justify-self:end;color:var(--signal);background:var(--void);padding:0 4px}
.look-neon .ad-art canvas{background:var(--void);border:2px solid var(--ichor)}
.look-neon .ad-brand{font-size:24px;line-height:32px;color:var(--void);letter-spacing:3px;padding:2px 10px;text-shadow:2px 0 0 var(--ichor),-2px 0 0 var(--ichor),0 2px 0 var(--ichor),0 -2px 0 var(--ichor),2px 2px 0 var(--ichor),-2px -2px 0 var(--ichor),2px -2px 0 var(--ichor),-2px 2px 0 var(--ichor)}
@container (min-width:420px){.look-neon .ad-brand{font-size:32px;line-height:40px}}
@container (min-width:620px){.look-neon .ad-brand{font-size:40px;line-height:48px}}
.look-neon .ad-head{color:var(--signal);background:var(--void);padding:4px 10px}
.look-neon .ad-body{background:var(--void);padding:8px 12px;max-width:min(40ch,100%);font-style:italic}
.look-neon .ad-fine{color:var(--ichor);background:var(--void);padding:0 6px}
@media (prefers-reduced-motion:no-preference){.look-neon .ad-brand{animation:ad-neon 6s steps(1) infinite}}
@keyframes ad-neon{0%,88%,100%{color:var(--void)}89%,91%{color:var(--ichor)}}

/* 9. a price as big as the column allows, on ICHOR */
.look-price{background:var(--ichor);color:var(--void);padding:10px 16px 16px;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tag tag" "brand art" "big art" "what what" "head head" "body body" "fine fine";grid-template-rows:auto auto auto auto auto 1fr auto;row-gap:6px;column-gap:12px}
.look-price .ad-tag{color:var(--void)}
.look-price .ad-brand{background:var(--void);color:var(--ichor);justify-self:start;align-self:start;padding:0 8px}
.ad-big{grid-area:big;display:flex;flex-wrap:wrap;align-items:flex-end;column-gap:10px;font-family:var(--px);-webkit-font-smoothing:none}
.ad-big b{font-weight:400;font-size:80px;line-height:72px}
.ad-big span{font-size:16px;line-height:24px;padding-bottom:4px}
.ad-what{grid-area:what;font-size:16px;line-height:24px;border-bottom:4px solid var(--void);padding-bottom:8px}
.look-price .ad-head{color:var(--void);padding-top:4px}
.look-price .ad-art{align-self:start}
.look-price .ad-art canvas{background:var(--void);border:4px solid var(--void)}
.look-price .ad-body{color:var(--void)}
.look-price .ad-fine{color:var(--void)}

/* 10. a stock running out, the count big and the meter nearly empty */
.look-stock{border:2px solid var(--ichor);padding:10px 16px 16px;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"tag tag" "art brand" "art head" "stock stock" "body body" "fine fine";grid-template-rows:auto auto auto auto 1fr auto;column-gap:14px;row-gap:8px}
.look-stock .ad-tag{color:var(--ichor)}
.look-stock .ad-art{align-self:start}
.look-stock .ad-art canvas{border:2px solid var(--ichor)}
.look-stock .ad-brand{color:var(--void);background:var(--ichor);justify-self:start;align-self:end;padding:0 8px}
.ad-stock{grid-area:stock;border:2px solid var(--signal);padding:10px 12px 12px}
.ad-stock .ad-big b{font-size:64px;line-height:56px;color:var(--ichor)}
.ad-stock .ad-big span{color:var(--signal)}
.ad-meter{display:block;height:12px;border:2px solid var(--signal);margin-top:10px}
.ad-meter i{display:block;width:8%;height:100%;background:var(--ichor)}
@media (prefers-reduced-motion:no-preference){.ad-meter i{animation:ad-blink 1.4s steps(1) infinite}}
.look-stock .ad-fine{color:var(--signal)}

/* 11. a clock counting down to the next Lauds, by the reader's own clock */
.look-countdown{border:2px solid var(--signal);padding:10px 16px 16px;text-align:center;justify-items:center;grid-template-columns:minmax(0,1fr);grid-template-areas:"tag" "art" "brand" "head" "count" "body" "fine";grid-template-rows:auto auto auto auto auto 1fr auto;row-gap:8px;background:var(--void) var(--d12s);background-size:8px 8px}
.look-countdown .ad-tag{color:var(--signal);background:var(--void);padding:0 4px}
.look-countdown .ad-art canvas{background:var(--void);border:2px solid var(--signal)}
.look-countdown .ad-brand{color:var(--signal);background:var(--void);padding:0 8px;letter-spacing:4px}
.look-countdown .ad-head{background:var(--void);padding:2px 10px}
.ad-count{grid-area:count;background:var(--ichor);color:var(--void);padding:6px 16px 8px;font-size:8px;line-height:12px;box-shadow:4px 4px 0 var(--void)}
.ad-count b{display:block;font-weight:400;font-size:32px;line-height:36px;letter-spacing:2px}
.look-countdown .ad-body{background:var(--void);padding:6px 10px;max-width:min(42ch,100%)}
.look-countdown .ad-fine{color:var(--signal);background:var(--void);padding:0 6px}

/* 12. a menu of what the house sells, each in its box */
.look-menu{border:6px double var(--signal);padding:12px 16px 16px;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tag tag" "brand art" "head art" "items items" "body body" "fine fine";grid-template-rows:auto auto auto auto 1fr auto;row-gap:8px;column-gap:12px}
.look-menu .ad-tag{color:var(--signal)}
.look-menu .ad-brand{color:var(--ichor);letter-spacing:2px;align-self:end}
.look-menu .ad-art{align-self:start}
.ad-items{grid-area:items;list-style:none;margin:4px 0;padding:0}
.look-menu .ad-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.look-menu .ad-items li{border:2px solid var(--ichor);color:var(--ichor);text-align:center;padding:10px 2px;font-size:8px;line-height:12px;overflow-wrap:anywhere}
@container (min-width:380px){.look-menu .ad-items li{font-size:16px;line-height:20px}}
.look-menu .ad-items li:nth-child(2){background:var(--ichor);color:var(--void)}
.look-menu .ad-fine{color:var(--signal)}

/* 13. the mark as large as the ad allows on an ICHOR panel, the words beside it */
.look-hero{border:2px solid var(--signal);grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tag art" "brand art" "head art" "body art" "fine art";grid-template-rows:auto auto auto 1fr auto}
.look-hero .ad-tag{justify-self:start;color:var(--signal);padding:8px 16px 0}
.look-hero .ad-art{background:var(--ichor);padding:18px;border-left:2px solid var(--signal)}
.look-hero .ad-art canvas{background:var(--void);border:4px solid var(--void)}
.look-hero .ad-brand{justify-self:start;background:var(--signal);color:var(--void);padding:0 8px;margin:6px 16px 0}
.look-hero .ad-head{padding:8px 16px 0}
.look-hero .ad-body{padding:8px 16px}
.look-hero .ad-fine{color:var(--signal);padding:0 16px 12px}

/* 14. a Locket's screen, the house's line come up on it */
.look-phone{border:2px solid var(--signal);padding:10px 16px 16px;background:var(--void) var(--d12s);background-size:8px 8px;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"tag tag" "phone brand" "phone head" "phone body" "phone fine";grid-template-rows:auto auto auto 1fr auto;column-gap:20px;row-gap:8px}
.look-phone .ad-tag{color:var(--signal);background:var(--void);padding:0 4px}
.ad-phone{grid-area:phone;align-self:start;display:grid;justify-items:center;gap:10px;width:132px;box-sizing:border-box;padding:12px 10px 18px;border:4px solid var(--signal);background:var(--void);box-shadow:6px 6px 0 var(--ichor)}
.ad-phone .ad-art,.ad-plan .ad-art,.ad-card .ad-art,.ad-tk .ad-art,.ad-tk .ad-brand,.ad-tk .ad-head{grid-area:auto}
.ad-notch{width:36px;height:6px;background:var(--signal)}
.ad-note{display:grid;gap:2px;width:100%;box-sizing:border-box;background:var(--ichor);color:var(--void);padding:6px;font-size:8px;line-height:12px}
.ad-note b{font-weight:400}
.look-phone .ad-brand{color:var(--signal);background:var(--void);justify-self:start;align-self:end;padding:0 4px}
.look-phone .ad-head{background:var(--void);justify-self:start;padding:0 4px}
.look-phone .ad-body{background:var(--void);padding:6px 8px}
.look-phone .ad-fine{color:var(--ichor);background:var(--void);justify-self:start;padding:0 4px}

/* 15. three figures, each on its own bar */
.look-stats{border:2px solid var(--ichor);border-left-width:14px;padding:10px 16px 16px;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tag tag" "brand art" "head art" "items items" "body body" "fine fine";grid-template-rows:auto auto auto auto 1fr auto;column-gap:12px;row-gap:8px}
.look-stats .ad-tag{color:var(--ichor)}
.look-stats .ad-brand{color:var(--ichor);letter-spacing:2px;align-self:end}
.look-stats .ad-art{align-self:start}
.look-stats .ad-items{display:grid;gap:6px;justify-items:start}
.look-stats .ad-items li{font-size:16px;line-height:24px;color:var(--void);background:var(--signal);padding:4px 10px}
.look-stats .ad-items li:nth-child(2){background:var(--ichor)}
.look-stats .ad-items li:nth-child(3){background:var(--void);color:var(--signal);box-shadow:inset 0 0 0 2px var(--signal)}
.look-stats .ad-fine{color:var(--signal)}

/* 16. a house's particulars, under the house's bar */
.look-checklist{border:2px solid var(--signal);padding:0 16px 16px;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"tag tag" "art brand" "art head" "items items" "body body" "fine fine";grid-template-rows:auto auto auto auto 1fr auto;column-gap:14px;row-gap:8px}
.look-checklist .ad-tag{justify-self:stretch;margin:0 -16px 6px;padding:4px 16px;background:var(--signal);color:var(--void);text-align:right}
.look-checklist .ad-art{align-self:start}
.look-checklist .ad-art canvas{border:2px solid var(--signal)}
.look-checklist .ad-brand{color:var(--signal);align-self:end}
.look-checklist .ad-items li{font-size:16px;line-height:24px;color:var(--grace);border-bottom:2px dashed var(--signal);padding:6px 0;overflow-wrap:anywhere}
.look-checklist .ad-items li::before{content:"[+] ";color:var(--ichor)}
.look-checklist .ad-fine{color:var(--signal)}

/* 17. a drawing on the board, the works laid out on squared paper */
.look-blueprint{border:2px solid var(--signal);padding:10px 16px 16px;background-color:var(--void);background-image:linear-gradient(var(--signal) 1px,transparent 1px),linear-gradient(90deg,var(--signal) 1px,transparent 1px);background-size:24px 24px;grid-template-columns:minmax(0,1fr);grid-template-areas:"tag" "brand" "head" "plan" "body" "fine";grid-template-rows:auto auto auto auto 1fr auto;row-gap:8px}
.look-blueprint .ad-tag{background:var(--void);color:var(--signal);padding:0 4px}
.look-blueprint .ad-brand{justify-self:start;background:var(--void);color:var(--signal);padding:0 6px;letter-spacing:3px}
.look-blueprint .ad-head{justify-self:start;background:var(--void);padding:2px 6px}
.ad-plan{grid-area:plan;display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;background:var(--void);border:2px dashed var(--signal);padding:12px}
.ad-plan .ad-items{grid-area:auto;margin:0;display:grid;gap:8px}
.ad-plan li{font-size:16px;line-height:20px;color:var(--grace);border-left:4px solid var(--ichor);padding-left:8px}
.look-blueprint .ad-body{background:var(--void);padding:6px 8px}
.look-blueprint .ad-fine{justify-self:start;background:var(--void);color:var(--signal);padding:0 4px}

/* 18. a subscriber's card, a household's number left to fill in */
.look-card{border:2px solid var(--ichor);padding:10px 16px 16px;grid-template-columns:minmax(0,1fr);grid-template-areas:"tag" "card" "head" "body" "fine";grid-template-rows:auto auto auto 1fr auto;row-gap:12px}
.look-card .ad-tag{color:var(--ichor)}
.ad-card{grid-area:card;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"chip brand art" "l1 l1 art" "l2 l2 art";column-gap:12px;row-gap:8px;align-items:center;background:var(--ichor);color:var(--void);padding:14px 16px;box-shadow:6px 6px 0 var(--signal);max-width:420px;margin-right:6px}
.ad-chip{grid-area:chip;width:28px;height:20px;background:var(--void) var(--d50s);background-size:4px 4px;border:2px solid var(--void)}
.ad-card .ad-brand{grid-area:brand;color:var(--void);letter-spacing:3px}
.ad-card .ad-art{grid-area:art}
.ad-card .ad-art canvas{background:var(--void);border:2px solid var(--void)}
.ad-cl{font-size:8px;line-height:12px}
.ad-card .ad-cl:nth-of-type(2){grid-area:l1}
.ad-card .ad-cl:nth-of-type(3){grid-area:l2}
.ad-blank{display:inline-block;width:64px;height:8px;border-bottom:2px solid var(--void)}
.look-card .ad-head{color:var(--ichor)}
.look-card .ad-fine{color:var(--signal)}

/* 19. a passage ticket with its stub */
.look-ticket{border:2px solid var(--signal);padding:10px 16px 16px;grid-template-columns:minmax(0,1fr);grid-template-areas:"tag" "tk" "body" "fine";grid-template-rows:auto auto 1fr auto;row-gap:10px}
.look-ticket .ad-tag{color:var(--signal)}
.ad-tk{grid-area:tk;display:grid;grid-template-columns:minmax(0,1fr) auto;background:var(--signal);color:var(--void)}
.ad-tk-main{display:grid;gap:6px;padding:12px 14px;border-right:2px dashed var(--void);min-width:0}
.ad-tk .ad-brand{color:var(--void);letter-spacing:2px}
.ad-route{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-size:16px;line-height:20px}
.ad-route b{font-weight:400;color:var(--ichor)}
.ad-tk .ad-head{color:var(--void);font-size:24px;line-height:28px}
.ad-tk-stub{display:grid;justify-items:center;align-content:center;gap:8px;padding:12px;width:104px;box-sizing:border-box;font-size:8px;line-height:12px;text-align:center}
.ad-tk-stub canvas{background:var(--void)}
.ad-code{display:block;width:72px;height:28px;background:repeating-linear-gradient(90deg,var(--void) 0 2px,transparent 2px 4px,var(--void) 4px 8px,transparent 8px 10px)}
.look-ticket .ad-fine{color:var(--signal)}

/* 20. an old printed notice between two rules */
.look-print{border:2px solid var(--signal);outline:2px solid var(--signal);outline-offset:-8px;padding:20px 22px 22px;text-align:center;justify-items:center;grid-template-columns:minmax(0,1fr);row-gap:10px}
.look-print > *{grid-area:auto;max-width:100%}
.look-print .ad-tag{justify-self:end;color:var(--signal)}
.ad-rule{width:70%;height:6px;box-sizing:border-box;border-block:2px solid var(--signal)}
.look-print .ad-brand{font-family:var(--fellsc);font-size:28px;line-height:1.1;letter-spacing:6px;color:var(--ichor)}
.look-print .ad-head{font-family:var(--fell);font-style:italic;font-size:28px;line-height:1.15;letter-spacing:1px}
@container (min-width:420px){.look-print .ad-head{font-size:34px}}
.look-print .ad-body{font-style:italic;max-width:min(36ch,100%)}
.look-print .ad-fine{color:var(--signal)}

/* 21. a page of the press, set and inked */
.look-press{border:2px solid var(--signal);padding:10px 16px 16px;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tag tag" "brand page" "head page" "art page" "body body" "fine fine";grid-template-rows:auto auto auto 1fr auto auto;column-gap:16px;row-gap:8px}
.look-press .ad-tag{color:var(--signal)}
.look-press .ad-brand{color:var(--ichor);letter-spacing:2px}
.look-press .ad-art{justify-self:start;align-self:start}
.ad-page{grid-area:page;align-self:start;width:150px;box-sizing:border-box;background:var(--signal);padding:8px;box-shadow:-6px 6px 0 var(--ichor)}
.ad-mast{margin:0 0 6px;font-family:var(--bl);font-size:22px;line-height:1;color:var(--void);text-align:center;border-bottom:4px double var(--void);padding-bottom:4px}
.ad-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.ad-cols span{display:grid;gap:4px}
.ad-cols i{display:block;height:3px;background:var(--void)}
.ad-cols i:nth-child(3n){width:70%}
.look-press .ad-fine{color:var(--signal)}

/* not every ad is a box (Dylan, October 4): a neon sign and a Locket hang on the page with no frame, a ticket and a
   card float with their stubs and chips, the price is cut as a tag with its hole, the loaf's clock rises in a dome,
   the notice has its corners bitten out and the warning is chamfered, every cut stepped on the pixel grid */
.look-neon{border:0;outline:0;background:none;padding-top:26px}
.look-neon::before,.look-neon::after{content:"";position:absolute;top:0;width:2px;height:22px;background:var(--signal)}
.look-neon::before{left:30%}
.look-neon::after{right:30%}
.look-neon .ad-tag{justify-self:center;background:none}
.look-phone{border:0;background:none;padding:6px 0 0}
.look-phone .ad-tag{background:none}
.look-ticket,.look-card{border:0;padding:6px 6px 0 0}
.ad-tk{clip-path:polygon(0 0,calc(100% - 100px) 0,calc(100% - 100px) 8px,calc(100% - 92px) 8px,calc(100% - 92px) 0,100% 0,100% 100%,calc(100% - 92px) 100%,calc(100% - 92px) calc(100% - 8px),calc(100% - 100px) calc(100% - 8px),calc(100% - 100px) 100%,0 100%)}
.look-price{clip-path:polygon(28px 0,100% 0,100% 100%,28px 100%,28px calc(50% + 28px),28px calc(50% + 24px),24px calc(50% + 24px),24px calc(50% + 20px),20px calc(50% + 20px),20px calc(50% + 16px),16px calc(50% + 16px),16px calc(50% + 12px),12px calc(50% + 12px),12px calc(50% + 8px),8px calc(50% + 8px),8px calc(50% + 4px),4px calc(50% + 4px),4px calc(50% + 0px),0px calc(50% + 0px),0px calc(50% - 4px),4px calc(50% - 4px),4px calc(50% - 8px),8px calc(50% - 8px),8px calc(50% - 12px),12px calc(50% - 12px),12px calc(50% - 16px),16px calc(50% - 16px),16px calc(50% - 20px),20px calc(50% - 20px),20px calc(50% - 24px),24px calc(50% - 24px),24px calc(50% - 28px),28px calc(50% - 28px),28px calc(50% - 28px));padding-left:48px}
.look-price::after{content:"";position:absolute;left:12px;top:calc(50% - 4px);width:8px;height:8px;background:var(--void)}
.look-countdown{clip-path:polygon(0 100%,100% 100%,100% 40px,100.00% 34px,99.38% 34px,99.38% 28px,97.55% 28px,97.55% 22px,94.55% 22px,94.55% 16px,90.45% 16px,90.45% 12px,85.36% 12px,85.36% 8px,79.39% 8px,79.39% 4px,72.70% 4px,72.70% 2px,65.45% 2px,65.45% 0px,57.82% 0px,57.82% 0px,50.00% 0px,50.00% 0px,42.18% 0px,42.18% 0px,42.18% 0px,34.55% 0px,34.55% 2px,34.55% 2px,27.30% 2px,27.30% 4px,27.30% 4px,20.61% 4px,20.61% 8px,20.61% 8px,14.64% 8px,14.64% 12px,14.64% 12px,9.55% 12px,9.55% 16px,9.55% 16px,5.45% 16px,5.45% 22px,5.45% 22px,2.45% 22px,2.45% 28px,2.45% 28px,0.62% 28px,0.62% 34px,0.62% 34px,0.00% 34px,0.00% 40px,0 40px);border:0;padding-top:48px}
.look-countdown .ad-tag{justify-self:center}
.look-print{clip-path:polygon(12px 0,calc(100% - 12px) 0,calc(100% - 12px) 6px,calc(100% - 6px) 6px,calc(100% - 6px) 12px,100% 12px,100% calc(100% - 12px),calc(100% - 6px) calc(100% - 12px),calc(100% - 6px) calc(100% - 6px),calc(100% - 12px) calc(100% - 6px),calc(100% - 12px) 100%,12px 100%,12px calc(100% - 6px),6px calc(100% - 6px),6px calc(100% - 12px),0 calc(100% - 12px),0 12px,6px 12px,6px 6px,12px 6px);border:0;box-shadow:inset 0 0 0 6px var(--signal);outline-offset:-12px}
.look-stencil{clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 4px) calc(100% - 20px),calc(100% - 4px) calc(100% - 16px),calc(100% - 8px) calc(100% - 16px),calc(100% - 8px) calc(100% - 12px),calc(100% - 12px) calc(100% - 12px),calc(100% - 12px) calc(100% - 8px),calc(100% - 16px) calc(100% - 8px),calc(100% - 16px) calc(100% - 4px),calc(100% - 20px) calc(100% - 4px),calc(100% - 20px) calc(100% - 0px),calc(100% - 20px) 100%,0 100%,0 20px,0px 16px,4px 16px,4px 12px,8px 12px,8px 8px,12px 8px,12px 4px,16px 4px,16px 0px,20px 0px)}
@media (hover:hover){a.ad-a:hover > .look-neon,a.ad-a:hover > .look-phone,a.ad-a:hover > .look-ticket,a.ad-a:hover > .look-card{outline:0}}
@media (hover:hover){a.ad-a:hover > .look-neon .ad-brand,a.ad-a:hover > .look-phone .ad-head,a.ad-a:hover > .look-ticket .ad-head,a.ad-a:hover > .look-card .ad-head{color:var(--ichor)}}
@container (max-width:419px){.ad-tk{clip-path:none}.look-price{padding-left:44px}}

/* on a narrow column every design stacks into one column, its mark first */
@container (max-width:419px){
  .look-invert{grid-template-columns:minmax(0,1fr);grid-template-areas:"tag" "art" "brand" "head" "body" "fine";grid-template-rows:auto auto auto auto 1fr auto}
  .look-invert .ad-art{justify-self:start}
  .look-ticker{grid-template-columns:minmax(0,1fr);grid-template-areas:"tag" "art" "brand" "head" "body" "fine" "crawl";grid-template-rows:auto auto auto auto 1fr auto auto}
  .look-ticker .ad-art{justify-self:start;padding:4px 14px 0}
  .look-ticker .ad-brand,.look-ticker .ad-head{padding-left:14px}
  .look-banner{grid-template-columns:minmax(0,1fr);grid-template-areas:"tag" "art" "brand" "head" "body" "fine" "cta";grid-template-rows:auto auto auto auto 1fr auto auto}
  .look-banner .ad-art{justify-self:start}
  .look-banner .ad-cta{justify-self:start;margin-top:6px}
  .look-billboard{grid-template-columns:minmax(0,1fr);grid-template-areas:"art" "brand" "head" "body" "fine" "tag";grid-template-rows:auto auto auto 1fr auto auto}
  .look-billboard .ad-art{justify-self:start}
  .look-terminal{grid-template-columns:minmax(0,1fr);grid-template-areas:"bar" "tag" "line" "art" "head" "body" "fine";grid-template-rows:auto auto auto auto auto 1fr auto}
  .look-terminal .ad-art{justify-self:start;padding:0 14px}
  .look-price{grid-template-columns:minmax(0,1fr);grid-template-areas:"tag" "brand" "art" "big" "what" "head" "body" "fine";grid-template-rows:auto auto auto auto auto auto 1fr auto}
  .look-price .ad-art{justify-self:start}
  .look-stock{grid-template-columns:minmax(0,1fr);grid-template-areas:"tag" "art" "brand" "head" "stock" "body" "fine";grid-template-rows:auto auto auto auto auto 1fr auto}
  .look-stock .ad-art{justify-self:start}
  .look-menu{grid-template-columns:minmax(0,1fr);grid-template-areas:"tag" "art" "brand" "head" "items" "body" "fine";grid-template-rows:auto auto auto auto auto 1fr auto}
  .look-menu .ad-art{justify-self:start}
  .look-hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"art" "tag" "brand" "head" "body" "fine";grid-template-rows:auto auto auto auto 1fr auto}
  .look-hero .ad-art{border-left:0;border-bottom:2px solid var(--signal)}
  .look-phone{grid-template-columns:minmax(0,1fr);grid-template-areas:"tag" "phone" "brand" "head" "body" "fine";grid-template-rows:auto auto auto auto 1fr auto}
  .look-phone .ad-phone{justify-self:center}
  .look-stats{grid-template-columns:minmax(0,1fr);grid-template-areas:"tag" "art" "brand" "head" "items" "body" "fine";grid-template-rows:auto auto auto auto auto 1fr auto}
  .look-stats .ad-art{justify-self:start}
  .look-checklist{grid-template-columns:minmax(0,1fr);grid-template-areas:"tag" "art" "brand" "head" "items" "body" "fine";grid-template-rows:auto auto auto auto auto 1fr auto}
  .look-checklist .ad-art{justify-self:start}
  .ad-plan{grid-template-columns:minmax(0,1fr)}
  .ad-tk{grid-template-columns:minmax(0,1fr)}
  .ad-tk-main{border-right:0;border-bottom:2px dashed var(--void)}
  .ad-tk-stub{width:auto;grid-auto-flow:column;justify-content:start}
  .look-press{grid-template-columns:minmax(0,1fr);grid-template-areas:"tag" "brand" "head" "page" "art" "body" "fine";grid-template-rows:auto auto auto auto auto 1fr auto}
}
.cf-side .tt-tab.gates{table-layout:fixed}
.cf-side .tt-tab.gates th:first-child{width:3.6em}
.cf-side .tt-tab.gates th:last-child{width:3.6em}
.cf-side .tt-tab.gates td:nth-child(2){overflow-wrap:anywhere}
@media (max-width:640px){.cm-acts{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.cm-acts .btn{white-space:normal;line-height:1.2}}
.cf-side .btn,.cm-acts .btn{max-width:100%;box-sizing:border-box;white-space:normal;text-align:center}
@media (max-width:359px){.bar-in{gap:2px;padding-inline:6px}.links a{padding:12px 1px}.fnd,.thm{padding:12px 1px;margin:0}.fnd svg,.thm svg{width:16px;height:16px}.brand svg{width:18px;height:18px}}
/* the mark is the way home: on a phone it keeps its full 32 pixels and a tap target the height of the bar */
@media (max-width:759px){.brand{align-self:stretch;padding:0 6px 0 2px;margin-left:-2px}.brand svg{width:32px;height:32px}}
/* on a narrow phone the bar takes two rows: the mark, the search and the music above, the four sections below, each
   with room to be tapped */
@media (max-width:419px){
  :root{--bar:96px}
  .bar-in{flex-wrap:wrap;height:auto;min-height:var(--bar);align-content:stretch;gap:0;padding-inline:var(--gut)}
  .brand{order:0;height:48px;padding:0 10px 0 0;margin-right:auto}
  .brand svg{width:32px;height:32px}
  .fnd{order:1;padding:12px 10px;margin:0}
  .thm{order:2;padding:12px 0 12px 10px}
  .fnd svg,.thm svg{width:24px;height:24px}
  .links{order:3;flex:1 0 100%;height:48px;justify-content:space-between;border-top:2px dotted var(--signal)}
  .links a{padding:12px 6px;display:flex;align-items:center}
}
@media (max-width:359px){.tt-mast.sm .tt-title{font-size:30px}.tt-title{font-size:40px}.rd-title{font-size:32px}}

/* ------------------------------------------------------------------ the marks in the section buttons
   Seven pixels tall, the height of a capital, two screen pixels to the cell at the buttons' sixteen, after the words */
.ico{display:block;flex:none;height:.875em;shape-rendering:crispEdges;overflow:visible}
.ico .ia{fill:var(--ichor)}
.btn .ico{margin-top:-2px}
.subnav .btn{gap:10px}
@media (max-width:559px){.subnav .btn{justify-content:center}}

/* ------------------------------------------------------------------ the ads, the second pass (October 4, night)
   Every ad on the site is drawn once. The designs below join the first twenty-one: a battery, a departure board, a
   round stamp, a split panel, a rubber stamp, a chalk board, a bottle, a wanted poster, an arrow, a drop, a sign
   hung on end, a speech bubble, a shield, a window on a screen, an eye chart, a form to sign, a film with its play
   button, a till receipt, a tally on a wall, a line with its stops, a cinema's marquee and a meter that sings */
.lcards > .ad-a.in-grid{min-height:0;align-self:center;justify-self:center;width:100%;max-width:240px}
.ad-art.pic canvas{background:var(--void)}
.ad-cta{grid-area:cta}

/* a battery: the charge in ten cells, the case cut with its nub */
.look-gauge{border:4px solid var(--signal);margin-right:14px;overflow:visible;padding:10px 16px 16px;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tag tag" "brand art" "head art" "batt batt" "body body" "fine fine";grid-template-rows:auto auto auto auto 1fr auto;column-gap:12px;row-gap:8px}
.look-gauge::after{content:"";position:absolute;right:-18px;top:calc(50% - 20px);width:10px;height:40px;background:var(--signal)}
.look-gauge .ad-tag{color:var(--signal)}
.look-gauge .ad-brand{color:var(--ichor);letter-spacing:2px;align-self:end}
.ad-batt{grid-area:batt;display:grid;gap:8px}
.ad-cells{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px;height:28px}
.ad-cells i{border:2px solid var(--signal)}
.ad-cells i.on{background:var(--ichor);border-color:var(--ichor)}
@media (prefers-reduced-motion:no-preference){.ad-cells i.on:last-of-type{animation:ad-blink 1.2s steps(1) infinite}}
.ad-batt .ad-big b{font-size:48px;line-height:48px;color:var(--grace)}
.ad-batt .ad-big span{color:var(--signal)}
.look-gauge .ad-fine{color:var(--signal)}

/* a departure board, white on the dark, each word on its own flap */
.look-timetable{background:var(--void);border:2px solid var(--signal);border-top:12px solid var(--signal);padding:10px 14px 14px;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tag tag" "brand art" "head art" "board board" "body body" "fine fine";grid-template-rows:auto auto auto auto 1fr auto;column-gap:12px;row-gap:8px}
.look-timetable .ad-tag{color:var(--signal)}
.look-timetable .ad-brand{color:var(--ichor);align-self:end}
.ad-board{grid-area:board;width:100%;border-collapse:separate;border-spacing:0 4px;font-size:8px;line-height:12px;table-layout:fixed}
.ad-board th{text-align:left;color:var(--signal);padding:0 6px}
.ad-board td{background:#0D0221;color:#D6F6FC;padding:6px;border-top:2px solid var(--signal);border-bottom:2px solid var(--signal);overflow-wrap:anywhere;vertical-align:top}
.ad-board td:first-child{border-left:2px solid var(--signal);color:#F22C70}
.ad-board td:last-child{border-right:2px solid var(--signal);color:#38D0DA}
@container (min-width:420px){.ad-board{font-size:16px;line-height:20px}}
@media (prefers-reduced-motion:no-preference){.ad-board tr:first-child td:last-child{animation:ad-blink 1.6s steps(1) infinite}}
.look-timetable .ad-fine{color:var(--signal)}

/* a round stamp, the ring stepped on the grid */
.look-seal{aspect-ratio:1;width:100%;clip-path:polygon(100.0% 50.0%,99.69% 50.0%,99.69% 55.6%,98.75% 55.6%,98.75% 61.13%,97.19% 61.13%,97.19% 66.51%,95.05% 66.51%,95.05% 71.69%,92.34% 71.69%,92.34% 76.6%,89.09% 76.6%,89.09% 81.17%,85.36% 81.17%,85.36% 85.36%,81.17% 85.36%,81.17% 89.09%,76.6% 89.09%,76.6% 92.34%,71.69% 92.34%,71.69% 95.05%,66.51% 95.05%,66.51% 97.19%,61.13% 97.19%,61.13% 98.75%,55.6% 98.75%,55.6% 99.69%,50.0% 99.69%,50.0% 100.0%,44.4% 100.0%,44.4% 99.69%,38.87% 99.69%,38.87% 98.75%,33.49% 98.75%,33.49% 97.19%,28.31% 97.19%,28.31% 95.05%,23.4% 95.05%,23.4% 92.34%,18.83% 92.34%,18.83% 89.09%,14.64% 89.09%,14.64% 85.36%,10.91% 85.36%,10.91% 81.17%,7.66% 81.17%,7.66% 76.6%,4.95% 76.6%,4.95% 71.69%,2.81% 71.69%,2.81% 66.51%,1.25% 66.51%,1.25% 61.13%,0.31% 61.13%,0.31% 55.6%,0.0% 55.6%,0.0% 50.0%,0.31% 50.0%,0.31% 44.4%,1.25% 44.4%,1.25% 38.87%,2.81% 38.87%,2.81% 33.49%,4.95% 33.49%,4.95% 28.31%,7.66% 28.31%,7.66% 23.4%,10.91% 23.4%,10.91% 18.83%,14.64% 18.83%,14.64% 14.64%,18.83% 14.64%,18.83% 10.91%,23.4% 10.91%,23.4% 7.66%,28.31% 7.66%,28.31% 4.95%,33.49% 4.95%,33.49% 2.81%,38.87% 2.81%,38.87% 1.25%,44.4% 1.25%,44.4% 0.31%,50.0% 0.31%,50.0% 0.0%,55.6% 0.0%,55.6% 0.31%,61.13% 0.31%,61.13% 1.25%,66.51% 1.25%,66.51% 2.81%,71.69% 2.81%,71.69% 4.95%,76.6% 4.95%,76.6% 7.66%,81.17% 7.66%,81.17% 10.91%,85.36% 10.91%,85.36% 14.64%,89.09% 14.64%,89.09% 18.83%,92.34% 18.83%,92.34% 23.4%,95.05% 23.4%,95.05% 28.31%,97.19% 28.31%,97.19% 33.49%,98.75% 33.49%,98.75% 38.87%,99.69% 38.87%,99.69% 44.4%,100.0% 44.4%);background:var(--ichor);color:var(--void);text-align:center;justify-items:center;align-content:center;grid-template-columns:minmax(0,1fr);row-gap:4px;padding:16% 14%}
.look-seal > *{grid-area:auto}
.ad-ring{position:absolute;inset:7%;clip-path:polygon(100.0% 50.0%,99.69% 50.0%,99.69% 55.6%,98.75% 55.6%,98.75% 61.13%,97.19% 61.13%,97.19% 66.51%,95.05% 66.51%,95.05% 71.69%,92.34% 71.69%,92.34% 76.6%,89.09% 76.6%,89.09% 81.17%,85.36% 81.17%,85.36% 85.36%,81.17% 85.36%,81.17% 89.09%,76.6% 89.09%,76.6% 92.34%,71.69% 92.34%,71.69% 95.05%,66.51% 95.05%,66.51% 97.19%,61.13% 97.19%,61.13% 98.75%,55.6% 98.75%,55.6% 99.69%,50.0% 99.69%,50.0% 100.0%,44.4% 100.0%,44.4% 99.69%,38.87% 99.69%,38.87% 98.75%,33.49% 98.75%,33.49% 97.19%,28.31% 97.19%,28.31% 95.05%,23.4% 95.05%,23.4% 92.34%,18.83% 92.34%,18.83% 89.09%,14.64% 89.09%,14.64% 85.36%,10.91% 85.36%,10.91% 81.17%,7.66% 81.17%,7.66% 76.6%,4.95% 76.6%,4.95% 71.69%,2.81% 71.69%,2.81% 66.51%,1.25% 66.51%,1.25% 61.13%,0.31% 61.13%,0.31% 55.6%,0.0% 55.6%,0.0% 50.0%,0.31% 50.0%,0.31% 44.4%,1.25% 44.4%,1.25% 38.87%,2.81% 38.87%,2.81% 33.49%,4.95% 33.49%,4.95% 28.31%,7.66% 28.31%,7.66% 23.4%,10.91% 23.4%,10.91% 18.83%,14.64% 18.83%,14.64% 14.64%,18.83% 14.64%,18.83% 10.91%,23.4% 10.91%,23.4% 7.66%,28.31% 7.66%,28.31% 4.95%,33.49% 4.95%,33.49% 2.81%,38.87% 2.81%,38.87% 1.25%,44.4% 1.25%,44.4% 0.31%,50.0% 0.31%,50.0% 0.0%,55.6% 0.0%,55.6% 0.31%,61.13% 0.31%,61.13% 1.25%,66.51% 1.25%,66.51% 2.81%,71.69% 2.81%,71.69% 4.95%,76.6% 4.95%,76.6% 7.66%,81.17% 7.66%,81.17% 10.91%,85.36% 10.91%,85.36% 14.64%,89.09% 14.64%,89.09% 18.83%,92.34% 18.83%,92.34% 23.4%,95.05% 23.4%,95.05% 28.31%,97.19% 28.31%,97.19% 33.49%,98.75% 33.49%,98.75% 38.87%,99.69% 38.87%,99.69% 44.4%,100.0% 44.4%);background:var(--void);pointer-events:none}
.ad-ring::after{content:"";position:absolute;inset:4px;clip-path:polygon(100.0% 50.0%,99.69% 50.0%,99.69% 55.6%,98.75% 55.6%,98.75% 61.13%,97.19% 61.13%,97.19% 66.51%,95.05% 66.51%,95.05% 71.69%,92.34% 71.69%,92.34% 76.6%,89.09% 76.6%,89.09% 81.17%,85.36% 81.17%,85.36% 85.36%,81.17% 85.36%,81.17% 89.09%,76.6% 89.09%,76.6% 92.34%,71.69% 92.34%,71.69% 95.05%,66.51% 95.05%,66.51% 97.19%,61.13% 97.19%,61.13% 98.75%,55.6% 98.75%,55.6% 99.69%,50.0% 99.69%,50.0% 100.0%,44.4% 100.0%,44.4% 99.69%,38.87% 99.69%,38.87% 98.75%,33.49% 98.75%,33.49% 97.19%,28.31% 97.19%,28.31% 95.05%,23.4% 95.05%,23.4% 92.34%,18.83% 92.34%,18.83% 89.09%,14.64% 89.09%,14.64% 85.36%,10.91% 85.36%,10.91% 81.17%,7.66% 81.17%,7.66% 76.6%,4.95% 76.6%,4.95% 71.69%,2.81% 71.69%,2.81% 66.51%,1.25% 66.51%,1.25% 61.13%,0.31% 61.13%,0.31% 55.6%,0.0% 55.6%,0.0% 50.0%,0.31% 50.0%,0.31% 44.4%,1.25% 44.4%,1.25% 38.87%,2.81% 38.87%,2.81% 33.49%,4.95% 33.49%,4.95% 28.31%,7.66% 28.31%,7.66% 23.4%,10.91% 23.4%,10.91% 18.83%,14.64% 18.83%,14.64% 14.64%,18.83% 14.64%,18.83% 10.91%,23.4% 10.91%,23.4% 7.66%,28.31% 7.66%,28.31% 4.95%,33.49% 4.95%,33.49% 2.81%,38.87% 2.81%,38.87% 1.25%,44.4% 1.25%,44.4% 0.31%,50.0% 0.31%,50.0% 0.0%,55.6% 0.0%,55.6% 0.31%,61.13% 0.31%,61.13% 1.25%,66.51% 1.25%,66.51% 2.81%,71.69% 2.81%,71.69% 4.95%,76.6% 4.95%,76.6% 7.66%,81.17% 7.66%,81.17% 10.91%,85.36% 10.91%,85.36% 14.64%,89.09% 14.64%,89.09% 18.83%,92.34% 18.83%,92.34% 23.4%,95.05% 23.4%,95.05% 28.31%,97.19% 28.31%,97.19% 33.49%,98.75% 33.49%,98.75% 38.87%,99.69% 38.87%,99.69% 44.4%,100.0% 44.4%);background:var(--ichor)}
.look-seal > :not(.ad-ring){position:relative}
.look-seal .ad-art canvas{background:var(--void);border:2px solid var(--void)}
.look-seal .ad-brand{font-size:8px;line-height:12px;letter-spacing:2px;color:var(--void)}
.look-seal .ad-head{font-size:24px;line-height:24px;color:var(--void)}
@container (min-width:300px){.look-seal .ad-head{font-size:32px;line-height:34px}}
.look-seal .ad-body{font-size:15px;line-height:1.25;color:var(--void);max-width:20ch}
.look-seal .ad-fine{color:var(--void)}
.look-seal .ad-tag{color:var(--void);justify-self:center}

/* a panel split down the middle, each half a word */
.look-split{border:2px solid var(--ichor);padding:10px 16px 16px;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tag tag" "brand brand" "split split" "head art" "body art" "fine fine";grid-template-rows:auto auto auto auto 1fr auto;column-gap:12px;row-gap:8px}
.look-split .ad-tag{color:var(--ichor)}
.look-split .ad-brand{color:var(--signal);letter-spacing:3px}
.ad-split{grid-area:split;display:grid;grid-template-columns:1fr 1fr}
.ad-split p{margin:0;display:grid;gap:4px;padding:14px 12px 16px;min-width:0}
.ad-split p:first-child{background:var(--void);border:2px solid var(--signal);color:var(--signal)}
.ad-split p:last-child{background:var(--ichor);color:var(--void)}
.ad-split span{font-size:8px;line-height:12px}
.ad-split b{font-weight:400;font-size:32px;line-height:32px;overflow-wrap:anywhere}
@container (min-width:520px){.ad-split b{font-size:48px;line-height:48px}}
.look-split .ad-art{align-self:start}
.look-split .ad-fine{color:var(--signal)}

/* a rubber stamp in ICHOR, its name boxed twice, the ink dropping out */
.look-stamp{border:4px solid var(--ichor);outline:2px solid var(--ichor);outline-offset:-10px;padding:18px 20px 20px;text-align:center;justify-items:center;grid-template-columns:minmax(0,1fr);row-gap:10px;background:var(--void)}
.look-stamp > *{grid-area:auto;max-width:100%}
.look-stamp .ad-tag{justify-self:end;color:var(--ichor)}
.ad-stampbox{border:4px double var(--ichor);padding:8px 14px;background:var(--void)}
.look-stamp .ad-brand{font-size:24px;line-height:28px;color:var(--ichor);letter-spacing:4px}
@container (min-width:420px){.look-stamp .ad-brand{font-size:32px;line-height:36px}}
.look-stamp .ad-head{color:var(--ichor)}
.look-stamp .ad-body{max-width:min(40ch,100%)}
.look-stamp .ad-fine{color:var(--signal)}
.look-stamp{clip-path:polygon(0 8px,8px 8px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 8px),0 calc(100% - 8px))}

/* a chalk board in its frame, the prices run out along dotted leaders */
.look-chalk{border:8px solid var(--signal);box-shadow:inset 0 0 0 2px var(--void),inset 0 0 0 4px var(--signal);padding:16px 18px 18px;background:var(--void) var(--d12s);background-size:12px 12px;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tag tag" "brand art" "head art" "chalk chalk" "body body" "fine fine";grid-template-rows:auto auto auto auto 1fr auto;column-gap:12px;row-gap:8px}
.look-chalk > *{background:var(--void)}
.look-chalk .ad-tag{color:var(--signal);padding:0 4px}
.look-chalk .ad-brand{color:var(--grace);justify-self:start;padding:0 4px}
.look-chalk .ad-head{justify-self:start;padding:0 4px;color:var(--ichor)}
.look-chalk .ad-art{align-self:start;background:none}
.ad-chalk{grid-area:chalk;list-style:none;margin:4px 0;padding:8px 10px;display:grid;gap:6px;font-size:16px;line-height:20px}
.ad-chalk li{display:grid;grid-template-columns:auto minmax(12px,1fr) auto;gap:6px;align-items:end;min-width:0}
.ad-chalk li span{overflow-wrap:anywhere;min-width:0}
.ad-chalk li i{height:2px;margin-bottom:5px;background:linear-gradient(90deg,var(--signal) 2px,transparent 2px) 0 0/6px 2px repeat-x}
.ad-chalk li b{font-weight:400;color:var(--signal);text-align:right}
@container (max-width:419px){.ad-chalk{font-size:8px;line-height:12px}.ad-chalk li i{margin-bottom:3px}}
.look-chalk .ad-body{padding:4px 6px}
.look-chalk .ad-fine{color:var(--signal);padding:2px 4px;justify-self:start}

/* a bottle and its label: the shoulder and the neck stepped in, the label a panel across the glass */
.look-label{background:var(--signal);color:var(--void);padding:56px 18px 22px;text-align:center;justify-items:center;grid-template-columns:minmax(0,1fr);row-gap:8px;
  clip-path:polygon(38% 0,62% 0,62% 24px,66% 24px,66% 32px,74% 32px,74% 38px,86% 38px,86% 44px,100% 44px,100% 100%,0 100%,0 44px,14% 44px,14% 38px,26% 38px,26% 32px,34% 32px,34% 24px,38% 24px)}
.look-label > *{grid-area:auto;max-width:100%}
.ad-neck{position:absolute;top:0;left:38%;right:38%;height:10px;background:var(--ichor)}
.look-label .ad-tag{color:var(--void)}
.ad-lab{display:grid;gap:2px;justify-items:center;background:var(--void);color:var(--grace);border:4px double var(--ichor);padding:10px 16px;width:100%;box-sizing:border-box}
.ad-lab .ad-brand{color:var(--ichor);letter-spacing:3px}
.ad-lab p.px{margin:0;font-size:8px;line-height:12px;color:var(--signal)}
.ad-lab p.px:first-of-type{font-size:16px;line-height:24px;color:var(--grace)}
.look-label .ad-head{color:var(--void)}
.look-label .ad-body{color:var(--void);max-width:min(38ch,100%)}
.look-label .ad-fine{color:var(--void)}
.look-label .ad-art canvas{background:var(--void);border:2px solid var(--void)}
.in-grid .look-label{padding-top:52px}

/* a wanted poster, its foot torn on the grid */
.look-wanted{background:var(--signal);color:var(--void);padding:14px 18px 34px;text-align:center;justify-items:center;grid-template-columns:minmax(0,1fr);row-gap:8px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),95% calc(100% - 12px),95% calc(100% - 4px),88% calc(100% - 4px),88% calc(100% - 16px),80% calc(100% - 16px),80% calc(100% - 6px),71% calc(100% - 6px),71% 100%,63% 100%,63% calc(100% - 10px),54% calc(100% - 10px),54% calc(100% - 2px),45% calc(100% - 2px),45% calc(100% - 14px),36% calc(100% - 14px),36% calc(100% - 6px),27% calc(100% - 6px),27% 100%,18% 100%,18% calc(100% - 12px),9% calc(100% - 12px),9% calc(100% - 4px),0 calc(100% - 4px))}
.look-wanted > *{grid-area:auto;max-width:100%}
.look-wanted .ad-tag{justify-self:end;color:var(--void)}
.ad-wanted{margin:0;font-size:48px;line-height:48px;letter-spacing:6px;color:var(--ichor);background:var(--void);padding:6px 14px 4px;width:100%;box-sizing:border-box}
@container (min-width:420px){.ad-wanted{font-size:64px;line-height:64px}}
.look-wanted .ad-brand{letter-spacing:3px;color:var(--void)}
.look-wanted .ad-head{color:var(--void)}
.look-wanted .ad-items{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.look-wanted .ad-items li{font-size:16px;line-height:20px;background:var(--void);color:var(--signal);padding:4px 8px}
.look-wanted .ad-body{color:var(--void);max-width:min(40ch,100%)}
.look-wanted .ad-fine{color:var(--void)}
.look-wanted .ad-art canvas{background:var(--void);border:4px solid var(--void)}

/* an arrow, cut on the grid, pointing the way */
.look-arrow{background:var(--ichor);color:var(--void);padding:16px 56px 18px 18px;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"tag tag" "art brand" "art head" "body body" "fine cta";grid-template-rows:auto auto auto 1fr auto;column-gap:12px;row-gap:6px;
  clip-path:polygon(0 0,calc(100% - 44px) 0,calc(100% - 44px) 8px,calc(100% - 36px) 8px,calc(100% - 36px) 16px,calc(100% - 28px) 16px,calc(100% - 28px) 24px,calc(100% - 20px) 24px,calc(100% - 20px) 32px,calc(100% - 12px) 32px,calc(100% - 12px) 40px,calc(100% - 4px) 40px,calc(100% - 4px) calc(50% - 4px),100% calc(50% - 4px),100% calc(50% + 4px),calc(100% - 4px) calc(50% + 4px),calc(100% - 4px) calc(100% - 40px),calc(100% - 12px) calc(100% - 40px),calc(100% - 12px) calc(100% - 32px),calc(100% - 20px) calc(100% - 32px),calc(100% - 20px) calc(100% - 24px),calc(100% - 28px) calc(100% - 24px),calc(100% - 28px) calc(100% - 16px),calc(100% - 36px) calc(100% - 16px),calc(100% - 36px) calc(100% - 8px),calc(100% - 44px) calc(100% - 8px),calc(100% - 44px) 100%,0 100%)}
.look-arrow .ad-tag{justify-self:start;color:var(--void)}
.look-arrow .ad-art canvas{background:var(--void);border:2px solid var(--void)}
.look-arrow .ad-brand{color:var(--void);letter-spacing:2px;align-self:end}
.look-arrow .ad-head{color:var(--void)}
.look-arrow .ad-body{color:var(--void)}
.look-arrow .ad-fine{color:var(--void);align-self:center}
.look-arrow .ad-cta{justify-self:end;background:var(--void);color:var(--ichor);padding:2px 10px;font-size:16px;line-height:24px}
.in-grid .look-arrow{grid-template-columns:minmax(0,1fr);grid-template-areas:"tag" "art" "brand" "head" "body" "fine" "cta";padding-right:52px}
.in-grid .look-arrow .ad-cta{justify-self:start}

/* a drop of water, its point stepped up to the top */
.look-drop{aspect-ratio:4/5;width:100%;background:var(--signal);color:var(--void);text-align:center;justify-items:center;align-content:end;grid-template-columns:minmax(0,1fr);row-gap:4px;padding:0 16% 14%;
  clip-path:polygon(50% 0,54% 0,54% 6%,58% 6%,58% 12%,63% 12%,63% 19%,68% 19%,68% 26%,74% 26%,74% 33%,80% 33%,80% 40%,86% 40%,86% 48%,91% 48%,91% 57%,95% 57%,95% 67%,97% 67%,97% 79%,95% 79%,95% 86%,91% 86%,91% 91%,85% 91%,85% 95%,77% 95%,77% 98%,68% 98%,68% 100%,32% 100%,32% 98%,23% 98%,23% 95%,15% 95%,15% 91%,9% 91%,9% 86%,5% 86%,5% 79%,3% 79%,3% 67%,5% 67%,5% 57%,9% 57%,9% 48%,14% 48%,14% 40%,20% 40%,20% 33%,26% 33%,26% 26%,32% 26%,32% 19%,37% 19%,37% 12%,42% 12%,42% 6%,46% 6%,46% 0)}
.look-drop > *{grid-area:auto;max-width:100%}
.look-drop .ad-art canvas{background:var(--void);border:2px solid var(--void)}
.look-drop .ad-brand{font-size:8px;line-height:12px;letter-spacing:2px;color:var(--void)}
.look-drop .ad-head{font-size:24px;line-height:26px;color:var(--void)}
.look-drop .ad-body{font-size:15px;line-height:1.25;color:var(--void)}
.look-drop .ad-fine,.look-drop .ad-tag{color:var(--void)}

/* a sign hung on end beside its door, its word read downward */
.look-vertical{border:2px solid var(--signal);padding:12px 16px 16px 0;grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"vert tag tag" "vert art brand" "vert art head" "vert body body" "vert fine fine";grid-template-rows:auto auto auto 1fr auto;column-gap:16px;row-gap:8px}
.ad-vert{grid-area:vert;margin:-12px 0 -16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:var(--ichor);color:var(--void);padding:12px 10px;font-size:32px;line-height:34px}
@media (prefers-reduced-motion:no-preference){.ad-vert span:nth-child(3){animation:ad-neon 7s steps(1) infinite}}
.look-vertical .ad-tag{color:var(--signal)}
.look-vertical .ad-art{align-self:start}
.look-vertical .ad-brand{color:var(--ichor);align-self:end}
.look-vertical .ad-fine{color:var(--signal)}
@container (max-width:419px){.look-vertical{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"vert tag" "vert art" "vert brand" "vert head" "vert body" "vert fine";grid-template-rows:auto auto auto auto 1fr auto}.look-vertical .ad-art{justify-self:start}.ad-vert{font-size:24px;line-height:26px;padding:12px 6px}}

/* a speech bubble with its tail */
.look-speech{background:var(--signal);color:var(--void);padding:18px 18px 40px;grid-template-columns:minmax(0,1fr);row-gap:6px;
  clip-path:polygon(0 8px,8px 8px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 8px,100% 8px,100% calc(100% - 32px),calc(100% - 8px) calc(100% - 32px),calc(100% - 8px) calc(100% - 24px),48px calc(100% - 24px),48px calc(100% - 16px),40px calc(100% - 16px),40px calc(100% - 8px),32px calc(100% - 8px),32px 100%,24px 100%,24px calc(100% - 24px),8px calc(100% - 24px),8px calc(100% - 32px),0 calc(100% - 32px))}
.look-speech > *{grid-area:auto}
.look-speech .ad-brand{font-size:8px;line-height:12px;letter-spacing:2px;color:var(--void)}
.look-speech .ad-head{font-size:32px;line-height:34px;color:var(--ichor);background:var(--void);justify-self:start;padding:2px 8px}
.look-speech .ad-body{color:var(--void)}
.look-speech .ad-fine,.look-speech .ad-tag{color:var(--void)}
.look-speech .ad-tag{justify-self:end}

/* a shield, its point stepped down */
.look-shield{background:var(--void);border:0;box-shadow:inset 0 0 0 4px var(--signal),inset 0 0 0 8px var(--void),inset 0 0 0 10px var(--ichor);padding:20px 22% 64px;text-align:center;justify-items:center;grid-template-columns:minmax(0,1fr);row-gap:8px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 96px),96% calc(100% - 96px),96% calc(100% - 72px),90% calc(100% - 72px),90% calc(100% - 52px),82% calc(100% - 52px),82% calc(100% - 34px),72% calc(100% - 34px),72% calc(100% - 18px),60% calc(100% - 18px),60% calc(100% - 6px),54% calc(100% - 6px),54% 100%,46% 100%,46% calc(100% - 6px),40% calc(100% - 6px),40% calc(100% - 18px),28% calc(100% - 18px),28% calc(100% - 34px),18% calc(100% - 34px),18% calc(100% - 52px),10% calc(100% - 52px),10% calc(100% - 72px),4% calc(100% - 72px),4% calc(100% - 96px),0 calc(100% - 96px))}
.look-shield > *{grid-area:auto;max-width:100%}
.look-shield .ad-tag{color:var(--signal)}
.look-shield .ad-brand{color:var(--void);background:var(--signal);padding:0 10px;letter-spacing:3px}
.look-shield .ad-head{color:var(--ichor)}
.look-shield .ad-fine{color:var(--signal)}
@container (max-width:419px){.look-shield{padding:18px 18px 72px}}

/* a window on a screen, its bar and its buttons */
.look-popup{border:2px solid var(--signal);margin:0 8px 8px 0;box-shadow:8px 8px 0 var(--ichor);overflow:visible;background:var(--void);padding:0 0 14px;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"win win" "tag tag" "brand art" "head art" "body body" "fine fine" "btns btns";grid-template-rows:auto auto auto auto 1fr auto auto;column-gap:12px;row-gap:6px}
.ad-win{grid-area:win;display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--signal);color:var(--void);padding:4px 4px 4px 10px;font-size:8px;line-height:12px}
.ad-win span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ad-win i{font-style:normal;background:var(--void);color:var(--signal);width:18px;height:16px;display:grid;place-items:center;font-size:8px;flex:none}
.look-popup .ad-tag{color:var(--signal);padding:0 14px}
.look-popup .ad-art{align-self:start;padding-right:14px}
.look-popup .ad-brand{color:var(--ichor);padding-left:14px;align-self:end}
.look-popup .ad-head,.look-popup .ad-body,.look-popup .ad-fine{padding:0 14px}
.look-popup .ad-fine{color:var(--signal)}
.ad-btns{grid-area:btns;display:flex;gap:10px;justify-content:flex-end;padding:6px 14px 0;font-size:16px;line-height:24px}
.ad-btns span{padding:2px 14px;border:2px solid var(--signal);color:var(--signal)}
.ad-btns span:first-child{background:var(--ichor);border-color:var(--ichor);color:var(--void);box-shadow:inset -2px -2px 0 var(--void)}

/* an eye chart, the letters falling away line by line */
.look-eyechart{border:2px solid var(--signal);padding:12px 16px 16px;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"tag tag" "chart art" "chart brand" "chart head" "body body" "fine fine";grid-template-rows:auto auto auto 1fr auto auto;column-gap:18px;row-gap:8px}
.look-eyechart .ad-tag{color:var(--signal)}
.ad-chart{grid-area:chart;background:var(--signal);color:var(--void);text-align:center;padding:10px 14px;display:grid;gap:4px;align-content:start;min-width:120px}
.ad-chart p{margin:0;letter-spacing:4px;white-space:nowrap}
.ad-eye0{font-size:48px;line-height:48px}.ad-eye1{font-size:32px;line-height:32px}.ad-eye2{font-size:24px;line-height:24px}
.ad-eye3{font-size:16px;line-height:16px}.ad-eye4{font-size:8px;line-height:10px;color:var(--ichor)}
.look-eyechart .ad-art{justify-self:start}
.look-eyechart .ad-brand{color:var(--ichor)}
.look-eyechart .ad-fine{color:var(--signal)}
@container (max-width:419px){.look-eyechart{grid-template-columns:minmax(0,1fr);grid-template-areas:"tag" "chart" "art" "brand" "head" "body" "fine";grid-template-rows:auto auto auto auto auto 1fr auto}.ad-chart{justify-self:start}}

/* a form to fill in and sign last */
.look-form{border:2px dashed var(--signal);padding:12px 16px 16px;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tag tag" "brand art" "head art" "form form" "sign sign" "body body" "fine fine";grid-template-rows:auto auto auto auto auto 1fr auto;column-gap:12px;row-gap:8px;background:var(--void) var(--d12s);background-size:16px 16px}
.look-form > *{background:var(--void)}
.look-form .ad-art{background:none;align-self:start}
.look-form .ad-tag{color:var(--signal);justify-self:end;padding:0 4px}
.look-form .ad-brand{color:var(--ichor);justify-self:start;padding:0 4px;letter-spacing:2px}
.look-form .ad-head{justify-self:start;padding:0 4px}
.ad-form{grid-area:form;list-style:none;margin:0;padding:8px 10px;display:grid;gap:8px;font-size:16px;line-height:20px;border:2px solid var(--signal)}
.ad-form li{display:flex;gap:10px;align-items:center}
.ad-form i{width:12px;height:12px;border:2px solid var(--signal);flex:none}
.ad-form li:first-child i{background:var(--ichor);border-color:var(--ichor)}
.ad-sign{grid-area:sign;margin:0;display:flex;gap:10px;align-items:end;font-size:8px;line-height:12px;color:var(--ichor);padding:4px 10px}
.ad-sign span{flex:1;height:2px;background:var(--ichor);margin-bottom:2px}
.look-form .ad-body{padding:4px 6px}
.look-form .ad-fine{color:var(--signal);justify-self:start;padding:0 4px}

/* a film with its play button and its progress */
.look-scan{border:2px solid var(--ichor);padding:0 0 14px;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"screen screen" "tag tag" "brand cta" "head cta" "body body" "fine fine";grid-template-rows:auto auto auto auto 1fr auto;column-gap:12px;row-gap:6px}
.ad-screen{grid-area:screen;position:relative;display:grid;place-items:center;background:var(--void) var(--d25i);background-size:8px 8px;padding:18px 0 26px;border-bottom:2px solid var(--ichor)}
.ad-screen::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 2px,var(--void) 2px 4px);pointer-events:none;opacity:.55}
.ad-screen .ad-art{grid-area:auto;position:relative}
.ad-screen .ad-art canvas{background:var(--void)}
.ad-play{position:absolute;left:50%;top:calc(50% - 4px);width:56px;height:56px;margin:-28px 0 0 -28px;background:var(--ichor);clip-path:polygon(0 0,16px 0,16px 8px,24px 8px,24px 16px,32px 16px,32px 24px,40px 24px,40px 32px,32px 32px,32px 40px,24px 40px,24px 48px,16px 48px,16px 56px,0 56px)}
@media (hover:hover){a.ad-a:hover .ad-play{background:var(--signal)}}
.ad-prog{position:absolute;left:14px;right:14px;bottom:8px;height:6px;border:2px solid var(--ichor);box-sizing:border-box}
.ad-prog i{display:block;width:38%;height:100%;background:var(--ichor)}
.look-scan .ad-tag{color:var(--ichor);padding:4px 14px 0}
.look-scan .ad-brand{color:var(--signal);padding:0 14px;align-self:end}
.look-scan .ad-head,.look-scan .ad-body,.look-scan .ad-fine{padding:0 14px}
.look-scan .ad-fine{color:var(--signal)}
.look-scan .ad-cta{align-self:center;justify-self:end;margin-right:14px;background:var(--ichor);color:var(--void);padding:4px 12px;font-size:16px;line-height:24px}
@container (max-width:419px){.look-scan{grid-template-columns:minmax(0,1fr);grid-template-areas:"screen" "tag" "brand" "head" "body" "fine" "cta";grid-template-rows:auto auto auto auto 1fr auto auto}.look-scan .ad-cta{justify-self:start;margin-left:14px}}

/* a till receipt, a narrow strip with its foot torn */
.look-receipt{background:var(--signal);color:var(--void);max-width:340px;justify-self:center;margin:0 auto;padding:16px 18px 30px;grid-template-columns:minmax(0,1fr);row-gap:6px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),95% 100%,90% calc(100% - 8px),85% 100%,80% calc(100% - 8px),75% 100%,70% calc(100% - 8px),65% 100%,60% calc(100% - 8px),55% 100%,50% calc(100% - 8px),45% 100%,40% calc(100% - 8px),35% 100%,30% calc(100% - 8px),25% 100%,20% calc(100% - 8px),15% 100%,10% calc(100% - 8px),5% 100%,0 calc(100% - 8px))}
.look-receipt > *{grid-area:auto}
.adband .ad-a:has(.look-receipt),.adband.wide .ad-a:has(.look-receipt){display:grid}
.look-receipt .ad-tag{color:var(--void);justify-self:center}
.look-receipt .ad-art{justify-self:center}
.look-receipt .ad-art canvas{background:var(--void);border:2px solid var(--void)}
.look-receipt .ad-brand{text-align:center;color:var(--void);letter-spacing:3px}
.ad-rc{margin:0;font-size:8px;line-height:12px;text-align:center;overflow:hidden;white-space:nowrap}
.look-receipt .ad-head{font-size:24px;line-height:26px;text-align:center;color:var(--void)}
.ad-rcpt{list-style:none;margin:4px 0;padding:6px 0;border-block:2px dashed var(--void);display:grid;gap:4px;font-size:8px;line-height:12px}
.ad-rcpt li{display:flex;justify-content:space-between;gap:8px}
.ad-rcpt b{font-weight:400;text-align:right}
.look-receipt .ad-body{color:var(--void);font-size:16px}
.look-receipt .ad-fine{color:var(--void);text-align:center}

/* a tally chalked on a wall, five to a gate */
.look-tally{border:2px solid var(--signal);border-bottom-width:10px;padding:12px 16px 16px;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tag tag" "tally tally" "brand art" "head art" "body body" "fine fine";grid-template-rows:auto auto auto auto 1fr auto;column-gap:12px;row-gap:8px;background:var(--void) var(--d12s);background-size:8px 8px}
.look-tally > *{background:var(--void)}
.look-tally .ad-art{background:none}
.look-tally .ad-tag{color:var(--signal);justify-self:end;padding:0 4px}
.ad-tally{grid-area:tally;display:flex;flex-wrap:wrap;gap:10px 16px;padding:10px 12px;border:2px solid var(--signal)}
.ad-tally span{position:relative;display:flex;gap:6px;height:36px}
.ad-tally i{display:block;width:4px;height:100%;background:var(--signal)}
.ad-tally b{position:absolute;left:-4px;right:-4px;top:50%;height:4px;background:var(--ichor);transform:skewY(-22deg)}
.look-tally .ad-brand{color:var(--ichor);justify-self:start;padding:0 4px;letter-spacing:2px}
.look-tally .ad-head{justify-self:start;padding:0 4px}
.look-tally .ad-body{padding:4px 6px}
.look-tally .ad-fine{color:var(--signal);justify-self:start;padding:0 4px}

/* a line and its stops, the way a route is drawn */
.look-map{border:2px solid var(--signal);padding:12px 16px 16px;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tag tag" "brand art" "head art" "line line" "body body" "fine fine";grid-template-rows:auto auto auto auto 1fr auto;column-gap:12px;row-gap:8px}
.look-map .ad-tag{color:var(--signal)}
.look-map .ad-brand{color:var(--ichor);letter-spacing:2px;align-self:end}
.ad-line-map{grid-area:line;list-style:none;margin:6px 0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);position:relative}
.ad-line-map::before{content:"";position:absolute;left:8px;right:8px;top:7px;height:4px;background:var(--ichor)}
.ad-line-map li{position:relative;display:grid;justify-items:start;gap:6px;min-width:0}
.ad-line-map i{width:10px;height:10px;border:4px solid var(--ichor);background:var(--void)}
.ad-line-map li:first-child i,.ad-line-map li:last-child i{background:var(--ichor)}
.ad-line-map span{font-size:8px;line-height:12px;overflow-wrap:anywhere;padding-right:4px}
@container (max-width:419px){.ad-line-map{grid-auto-flow:row;grid-auto-columns:auto;gap:8px}.ad-line-map::before{left:7px;right:auto;top:8px;bottom:8px;width:4px;height:auto}.ad-line-map li{grid-template-columns:auto 1fr;align-items:center;gap:10px}}
.look-map .ad-fine{color:var(--signal)}

/* a cinema's marquee, a letter to a tile, under its bulbs */
.look-marquee{border:6px solid var(--ichor);padding:22px 16px 16px;background:var(--void);grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tag tag" "marq marq" "brand art" "head art" "body body" "fine fine";grid-template-rows:auto auto auto auto 1fr auto;column-gap:12px;row-gap:8px}
.look-marquee::before{content:"";position:absolute;inset:6px;border:4px dotted var(--signal);pointer-events:none}
@media (prefers-reduced-motion:no-preference){.look-marquee::before{animation:ad-bulbs 1.2s steps(1) infinite}}
@keyframes ad-bulbs{50%{border-color:var(--ichor)}}
.look-marquee .ad-tag{color:var(--ichor)}
.ad-marq{grid-area:marq;display:grid;gap:4px;justify-items:center;padding:8px 0}
.ad-marq p{margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:2px}
.ad-marq span{display:grid;place-items:center;width:16px;height:22px;background:var(--signal);color:var(--void);font-size:16px;line-height:16px}
.ad-marq span.sp{background:none;width:8px}
@container (max-width:419px){.ad-marq span{width:10px;height:14px;font-size:8px;line-height:8px}.ad-marq span.sp{width:5px}}
.look-marquee .ad-brand{color:var(--ichor);letter-spacing:3px;align-self:end}
.look-marquee .ad-fine{color:var(--signal)}

/* a meter that sings, its bars rising and falling */
.look-wave{border:2px solid var(--ichor);border-radius:0;padding:12px 16px 16px;background:var(--void);grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tag tag" "brand art" "head art" "eq eq" "body body" "fine fine";grid-template-rows:auto auto auto auto 1fr auto;column-gap:12px;row-gap:8px}
.look-wave .ad-tag{color:var(--ichor)}
.look-wave .ad-brand{color:var(--signal);letter-spacing:3px;align-self:end}
.ad-eq{grid-area:eq;display:flex;align-items:flex-end;gap:4px;height:56px;padding:6px 0;border-bottom:2px solid var(--signal)}
.ad-eq i{flex:1;height:calc(var(--h) * 4px);background:var(--ichor)}
.ad-eq i:nth-child(3n){background:var(--signal)}
@media (prefers-reduced-motion:no-preference){.ad-eq i{animation:ad-eq 1.6s steps(4) infinite alternate}.ad-eq i:nth-child(2n){animation-duration:1.1s}.ad-eq i:nth-child(3n){animation-duration:2.1s}}
@keyframes ad-eq{to{height:8px}}
.look-wave .ad-fine{color:var(--signal)}

/* the loaf's dial: the dome kept, its time printed, no clock behind it */
.look-dial{clip-path:polygon(0 100%,100% 100%,100% 40px,100% 34px,99.38% 34px,99.38% 28px,97.55% 28px,97.55% 22px,94.55% 22px,94.55% 16px,90.45% 16px,90.45% 12px,85.36% 12px,85.36% 8px,79.39% 8px,79.39% 4px,72.7% 4px,72.7% 2px,65.45% 2px,65.45% 0,34.55% 0,34.55% 2px,27.3% 2px,27.3% 4px,20.61% 4px,20.61% 8px,14.64% 8px,14.64% 12px,9.55% 12px,9.55% 16px,5.45% 16px,5.45% 22px,2.45% 22px,2.45% 28px,.62% 28px,.62% 34px,0 34px);padding:48px 16px 16px;text-align:center;justify-items:center;grid-template-columns:minmax(0,1fr);row-gap:8px;background:var(--signal);color:var(--void)}
.look-dial > *{grid-area:auto;max-width:100%}
.look-dial .ad-tag{color:var(--void);justify-self:center}
.look-dial .ad-art canvas{background:var(--void);border:2px solid var(--void)}
.look-dial .ad-brand{color:var(--void);letter-spacing:4px}
.look-dial .ad-head{color:var(--void)}
.look-dial .ad-count{background:var(--void);color:var(--ichor);padding:6px 16px 8px;font-size:8px;line-height:12px;box-shadow:4px 4px 0 var(--ichor);margin:0}
.look-dial .ad-count b{display:block;font-weight:400;font-size:32px;line-height:36px;letter-spacing:2px;color:var(--signal)}
.look-dial .ad-body{color:var(--void);max-width:min(42ch,100%)}
.look-dial .ad-fine{color:var(--void)}
.look-dial .ad-cta{background:var(--ichor);color:var(--void);padding:4px 12px;font-size:16px;line-height:24px}

/* the checklist and the press carry their button where the house gave one */
.look-checklist .ad-cta,.look-press .ad-cta{justify-self:start;background:var(--ichor);color:var(--void);padding:4px 12px;font-size:16px;line-height:24px;margin-top:4px;grid-area:auto;grid-column:1/-1}

/* ------------------------------------------------------------------ the ads in a grid of cards
   A tile sits in the cell of a card at a card's size, cut to its shape, and never stretches the row */
.in-grid > .ad{max-height:300px}
.lcards > .ad-a.in-grid > .look-seal{max-width:220px;margin:0 auto}
.lcards > .ad-a.in-grid > .look-drop{max-width:200px;margin:0 auto}
.lcards > .ad-a.in-grid > .look-speech,.lcards > .ad-a.in-grid > .look-arrow,.lcards > .ad-a.in-grid > .look-label{max-width:260px;margin:0 auto}

/* ------------------------------------------------------------------ the City (the third pass, October 4, night) */
.city .csec{margin:0 0 8px}
.census-city .kick{margin-bottom:14px}
.cz-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0;border:2px solid var(--signal)}
.cz-grid > div{padding:18px 20px;min-width:0;box-sizing:border-box}
.cz-big{grid-column:span 5;border-right:2px solid var(--signal);border-bottom:2px solid var(--signal);display:grid;align-content:center;gap:6px}
.cz-part{grid-column:span 7;border-bottom:2px solid var(--signal)}
.cz-part + .cz-part{grid-column:span 7}
.cz-big + .cz-part{grid-row:span 1}
.cz-grid{grid-template-areas:"big big big big big mark mark mark mark mark mark mark" "big big big big big light light light light light light light" "then then then then old old old old old old old old"}
.cz-big{grid-area:big}.cz-part:nth-of-type(2){grid-area:mark}.cz-part:nth-of-type(3){grid-area:light}.cz-then{grid-area:then}.cz-old{grid-area:old}
.cz-y{margin:0;color:var(--signal);font-size:8px;line-height:12px}
.cz-n{margin:0;font-size:64px;line-height:64px;color:var(--grace)}
.cz-u{margin:0;color:var(--ichor)}
.cz-h{margin:0 0 10px;color:var(--grace)}
.cz-bar{display:flex;height:24px;border:2px solid var(--signal);gap:2px;padding:2px;background:var(--void)}
.cz-bar i{display:block;min-width:4px}
.cz-sealed{background:var(--void) var(--d50g);background-size:4px 4px}
.cz-keyed,.cz-lines{background:var(--signal)}
.cz-neither{background:var(--ichor)}
.cz-dark{background:var(--void);box-shadow:inset 0 0 0 2px var(--signal)}
.cz-batt{background:var(--ichor)}
.cz-key{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:4px}
.cz-key li{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:10px;align-items:center}
.cz-key li > i{width:16px;height:16px;box-sizing:border-box;border:2px solid var(--signal)}
.cz-key b{font-weight:400;color:var(--signal)}
.cz-then{border-right:2px solid var(--signal);display:grid;align-content:start;gap:6px}
.cz-n2{margin:0;font-size:40px;line-height:40px;color:var(--ichor)}
.cz-rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:2px 18px;margin-top:8px}
.cz-was{display:flex;justify-content:space-between;gap:10px;border-bottom:2px dotted var(--signal);padding:4px 0}
.cz-was b{font-weight:400;color:var(--grace)}
.cz-was span{color:var(--signal)}
@media (max-width:860px){
  .cz-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"big" "mark" "light" "then" "old"}
  .cz-big,.cz-then{border-right:0}
  .cz-then{border-bottom:2px solid var(--signal)}
  .cz-n{font-size:48px;line-height:48px}
}
.hr-b.is-now::after{display:none}

/* ------------------------------------------------------------------ the Tide Table as a newspaper page */
.paper .np{margin:0 auto 40px;max-width:1120px;border:2px solid var(--signal);padding:22px 26px 18px;background:var(--void);font-family:var(--fell);color:var(--grace)}
.np-mast{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:6px 18px;border-bottom:8px double var(--signal);padding-bottom:10px}
.np-title{margin:0;font-family:var(--bl);font-size:112px;line-height:.9;text-align:center;color:var(--grace);white-space:nowrap}
.np-ear{margin:0;font-size:8px;line-height:12px;color:var(--signal);border:2px solid var(--signal);padding:6px 8px;justify-self:start}
.np-ear.r{justify-self:end;text-align:right}
.np-date{grid-column:1/-1;margin:6px 0 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:2px 16px;font-size:8px;line-height:12px;border-top:2px solid var(--signal);padding-top:6px;color:var(--grace)}
.np-page{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:0;padding-top:14px;position:relative}
.np-page > *{min-width:0;padding:0 16px;box-sizing:border-box}
.np-page.p2{border-top:8px double var(--signal);margin-top:20px}
.np-kick{margin:0 0 4px;font-size:8px;line-height:12px;color:var(--ichor);letter-spacing:2px}
.np-hl{margin:0;font-family:var(--fellsc);font-weight:400;font-size:44px;line-height:1.02;letter-spacing:.5px;color:var(--grace)}
.np-hl.sm{font-size:26px;line-height:1.08}
.np-h{margin:0;font-family:var(--fellsc);font-weight:400;font-size:24px;line-height:1.08;color:var(--grace)}
.np-dek{margin:6px 0 8px;font-style:italic;font-size:17px;line-height:1.3;color:var(--signal)}
.np-p{margin:0 0 10px;font-size:17px;line-height:1.48;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.np-p.first::first-letter{font-family:var(--bl);float:left;font-size:72px;line-height:.8;padding:6px 8px 0 0;color:var(--ichor)}
.np-story{padding-bottom:14px;margin-bottom:14px;border-bottom:2px solid var(--signal)}
.np-story:last-child{border-bottom:0}
.np-lead{grid-column:1/5;border-right:2px solid var(--signal);padding-left:0}
.np-side{grid-column:5/7;padding-right:0}
.np-row{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:4px double var(--signal);margin-top:6px;padding:14px 0 0}
.np-row > *{padding:0 16px;border-right:2px solid var(--signal);border-bottom:0;margin:0}
.np-row > :first-child{padding-left:0}
.np-row > :last-child{border-right:0;padding-right:0}
.np-tides{overflow-x:auto;margin:6px 0 10px}
.np-tab{width:100%;border-collapse:collapse;font-family:var(--px);font-size:16px;line-height:22px;-webkit-font-smoothing:none}
.np-tab th,.np-tab td{padding:3px 6px;text-align:right;border-bottom:2px dotted var(--signal);white-space:nowrap}
.np-tab th:first-child,.np-tab tbody th{text-align:left;font-weight:400}
.np-tab thead th{color:var(--signal);font-size:8px;line-height:12px;border-bottom:2px solid var(--signal)}
.np-line{margin:0;font-size:17px;line-height:1.45;border:2px solid var(--ichor);padding:8px 10px}
.np-line .px{color:var(--ichor);margin-right:6px}
.np-round{grid-column:1/-1;border-top:4px double var(--signal);margin-top:14px;padding:14px 0 0}
.np-roundgrid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,3fr);gap:18px;align-items:start}
.np-roundgrid .tt-tab{width:100%}
.np-fig{margin:0}
.np-fig svg{display:block;width:100%;height:auto;border:2px solid var(--signal)}
.np-fig figcaption{font-style:italic;font-size:15px;line-height:1.4;margin-top:6px;color:var(--signal)}
.np-folio{grid-column:1/-1;display:flex;justify-content:space-between;margin:14px 0 0;padding-top:6px !important;border-top:2px solid var(--signal);font-size:8px;line-height:12px;color:var(--signal)}
.np-market{grid-column:1/3;border-right:2px solid var(--signal);padding-left:0}
.np-dead{grid-column:3/5;border-right:2px solid var(--signal)}
.np-col3{grid-column:5/7;padding-right:0}
.np-terms{grid-column:1/4;border-top:4px double var(--signal);margin-top:14px;padding-top:12px;padding-left:0;border-right:2px solid var(--signal)}
.np-week{grid-column:4/7;border-top:4px double var(--signal);margin-top:14px;padding-top:12px;padding-right:0}
.np-adrow{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:14px;padding:16px 0 !important;border-top:4px double var(--signal);margin-top:14px}
.np-notices{grid-column:1/-1;border-top:4px double var(--signal);padding:12px 0 0 !important}
.np-cls{columns:4 220px;column-gap:24px;column-rule:2px dotted var(--signal)}
.np-cl{margin:0 0 10px;font-size:15px;line-height:1.38;break-inside:avoid;text-align:justify;hyphens:auto}
.np-cl b{font-weight:400;color:var(--ichor);font-size:8px;line-height:12px;margin-right:4px}
.np-prices{list-style:none;margin:6px 0 12px;padding:0;display:grid;gap:4px}
.np-prices li{display:grid;grid-template-columns:auto minmax(12px,1fr) auto;gap:6px;align-items:end;font-size:16px;line-height:1.3}
.np-prices li i{height:2px;margin-bottom:5px;background:linear-gradient(90deg,var(--signal) 2px,transparent 2px) 0 0/6px 2px repeat-x}
.np-prices li b{font-weight:400;color:var(--signal);text-align:right;font-size:8px;line-height:12px;max-width:16ch}
.np-sub{margin:10px 0 4px;font-family:var(--fellsc);font-weight:400;font-size:20px;color:var(--grace)}
.np-obits,.np-list{list-style:none;margin:8px 0 0;padding:0}
.np-obits li{margin:0 0 10px;padding-bottom:10px;border-bottom:2px dotted var(--signal);font-size:16px;line-height:1.42;text-align:justify;hyphens:auto}
.np-obits li p{margin:0}
.np-sc{font-family:var(--fellsc);font-weight:400}
.np-mk{font-size:8px;line-height:12px;color:var(--ichor);white-space:nowrap}
.np-list li{margin:0 0 8px;font-size:16px;line-height:1.42;text-align:justify;hyphens:auto}
.np .tt-tab{font-size:15px}
.np .tt-small{font-style:italic;font-size:15px;color:var(--signal)}
/* the paper's own ads: set in its type, ruled into its columns */
.ad-a.in-paper{container-type:inline-size;margin:0 0 14px}
.np-adrow .ad-a.in-paper{margin:0}
.look-pd-box,.look-pd-rev,.look-pd-tall,.look-pd-cut{font-family:var(--fell);text-align:center;justify-items:center;grid-template-columns:minmax(0,1fr);row-gap:6px;padding:14px 16px 16px}
.look-pd-box > *,.look-pd-rev > *,.look-pd-tall > *,.look-pd-cut > *{grid-area:auto;max-width:100%}
.look-pd-box{border:4px solid var(--signal);outline:2px solid var(--signal);outline-offset:-10px}
.look-pd-rev{background:var(--signal);color:var(--void)}
.look-pd-tall{border-top:8px solid var(--ichor);border-bottom:8px solid var(--ichor);padding-block:20px}
.look-pd-cut{border:2px dashed var(--signal)}
.pd-rule{margin:0;width:50%;height:6px;box-sizing:border-box;border-block:2px solid currentColor;color:var(--signal)}
.look-pd-rev .pd-rule{color:var(--void)}
[class*="look-pd"] .ad-brand{font-family:var(--fellsc);font-size:22px;line-height:1.1;letter-spacing:3px;color:var(--ichor);-webkit-font-smoothing:auto}
.look-pd-rev .ad-brand{color:var(--void)}
[class*="look-pd"] .ad-head{font-family:var(--fell);font-style:italic;font-size:24px;line-height:1.15;-webkit-font-smoothing:auto}
.look-pd-rev .ad-head,.look-pd-rev .ad-body,.look-pd-rev .ad-fine{color:var(--void)}
[class*="look-pd"] .ad-body{font-size:16px;line-height:1.4}
[class*="look-pd"] .ad-fine{color:var(--signal);letter-spacing:1px}
[class*="look-pd"] .ad-art canvas{background:var(--void)}
@media (max-width:959px){
  .np-title{font-size:72px}
  .np-page{grid-template-columns:minmax(0,1fr)}
  .np-page > *{padding:0 !important;border-right:0 !important;grid-column:1/-1 !important}
  .np-lead,.np-market,.np-dead,.np-side{padding-bottom:14px !important;margin-bottom:14px;border-bottom:4px double var(--signal)}
  .np-row{grid-template-columns:minmax(0,1fr);border-top:0;margin-top:0;padding-top:0}
  .np-row > *{padding:0 0 14px !important;border-right:0;border-bottom:2px solid var(--signal);margin-bottom:14px}
  .np-roundgrid{grid-template-columns:minmax(0,1fr)}
  .np-terms,.np-week{border-top:4px double var(--signal)}
}
@media (max-width:560px){
  .paper .np{padding:14px 12px 12px;margin-inline:calc(-1 * var(--gut) + 4px)}
  .np-mast{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"t t" "a b" "d d"}
  .np-title{grid-area:t;font-size:52px;white-space:normal}
  .np-ear{grid-area:a}.np-ear.r{grid-area:b}.np-date{grid-area:d}
  .np-hl{font-size:34px}
  .np-p{text-align:left}
}
@media (max-width:359px){.np-title{font-size:42px}}

/* ------------------------------------------------------------------ Radio Pandaemonium, the station's own page */
.rst{border:2px solid var(--ichor);background:var(--void);margin:0 0 40px}
.rs-top{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"mark word" "nav nav";align-items:center;gap:0 18px;padding:18px 20px 0;background:var(--void) var(--d25i);background-size:8px 8px;border-bottom:4px solid var(--ichor)}
.rs-mark{grid-area:mark;background:var(--void);border:4px solid var(--void);outline:2px solid var(--ichor)}
.rs-word{grid-area:word;background:var(--void);padding:8px 12px;justify-self:start;max-width:100%;box-sizing:border-box}
.rs-name{margin:0;font-family:var(--bl);font-size:72px;line-height:.95;color:var(--ichor);overflow-wrap:anywhere}
.rs-freq{margin:4px 0 0;font-size:8px;line-height:12px;color:var(--signal);letter-spacing:1px}
.rs-nav{grid-area:nav;display:flex;flex-wrap:wrap;margin:16px -20px 0;background:var(--ichor)}
.rs-nav a{color:var(--void);text-decoration:none;padding:8px 14px;border-right:2px solid var(--void)}
.rs-nav a:hover{background:var(--void);color:var(--ichor)}
.rs-player{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,220px);align-items:center;gap:18px;padding:16px 20px;border-bottom:2px solid var(--ichor)}
.rs-play{width:48px;height:48px;background:var(--ichor);clip-path:polygon(0 0,12px 0,12px 6px,18px 6px,18px 12px,24px 12px,24px 18px,30px 18px,30px 24px,36px 24px,36px 30px,30px 30px,30px 36px,24px 36px,24px 42px,18px 42px,18px 48px,0 48px)}
.rs-now p{margin:0}
.rs-on b{font-weight:400;background:var(--ichor);color:var(--void);padding:0 6px;margin-right:8px}
@media (prefers-reduced-motion:no-preference){.rs-on b{animation:ad-blink 1.4s steps(1) infinite}}
.rs-need{font-size:8px;line-height:12px;color:var(--signal);margin-top:4px !important}
.rs-eq{display:flex;align-items:flex-end;gap:3px;height:48px}
.rs-eq i{flex:1;height:calc(var(--h) * 4px);background:var(--ichor)}
.rs-eq i:nth-child(4n){background:var(--signal)}
@media (prefers-reduced-motion:no-preference){.rs-eq i{animation:ad-eq 1.3s steps(4) infinite alternate}.rs-eq i:nth-child(2n){animation-duration:.9s}.rs-eq i:nth-child(3n){animation-duration:1.7s}}
.rst > .ad-a.on-air{margin:16px 20px}
.rs-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:0;border-top:2px solid var(--ichor)}
.rs-main{padding:18px 20px;border-right:2px solid var(--ichor);min-width:0}
.rs-side{padding:18px 20px;display:grid;gap:18px;align-content:start;min-width:0}
.rs-sec{margin:0 0 26px}
.rs-h{margin:0 0 12px;color:var(--void);background:var(--ichor);padding:2px 10px;display:inline-block}
.rs-sched{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:2px solid var(--signal)}
.rs-slot{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:2px solid var(--signal)}
.rs-t{color:var(--ichor)}
.rs-n{margin:0;color:var(--grace)}
.rs-by{margin:1px 0 0;color:var(--ichor);font-size:13px;letter-spacing:.06em}
.rs-by::before{content:'PLAYED BY ';color:var(--signal)}
.rs-d{margin:2px 0 0;font-size:17px;line-height:1.45}
.rs-chart{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rs-chart li{display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-areas:"pos text" "pos heat";gap:6px 14px;padding:10px 12px;border:2px solid var(--signal)}
.rs-chart li:first-child{border-color:var(--ichor);box-shadow:6px 6px 0 var(--ichor)}
.rs-pos{grid-area:pos;font-size:32px;line-height:32px;color:var(--ichor)}
.rs-chart li > div{grid-area:text}
.rs-heat{grid-area:heat;display:block;height:6px;border:2px solid var(--signal)}
.rs-heat i{display:block;height:100%;background:var(--ichor)}
.rs-deds{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:10px}
.rs-deds li{padding:12px 14px;border-left:6px solid var(--ichor);background:var(--void) var(--d12s);background-size:8px 8px}
.rs-deds li p{margin:0;background:var(--void);padding:2px 4px}
.rs-to{color:var(--signal)}
.rs-from{font-style:italic;font-size:17px;line-height:1.4}
.rs-rule{border:4px double var(--ichor);padding:14px;text-align:center}
.rs-rule p{margin:0}
.rs-k{font-size:8px;line-height:12px;color:var(--signal)}
.rs-q{font-family:var(--fell);font-style:italic;font-size:22px;line-height:1.3;margin:8px 0 !important;color:var(--grace)}
.rs-about p{font-size:17px;line-height:1.5;margin:0}
.ad-a.on-air{container-type:inline-size}
.look-leader{border:2px solid var(--ichor);padding:10px 14px;background:var(--void) var(--d12s);background-size:8px 8px;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"art tag tag" "art brand cta" "art head cta" "art body cta" "art fine cta";grid-template-rows:auto auto auto 1fr auto;column-gap:14px;row-gap:2px}
.look-leader > *{background:var(--void)}
.look-leader .ad-art{background:none;align-self:center}
.look-leader .ad-tag{color:var(--ichor);justify-self:end;padding:0 4px}
.look-leader .ad-brand{color:var(--signal);justify-self:start;padding:0 4px}
.look-leader .ad-head{justify-self:start;padding:0 4px;font-size:24px;line-height:28px}
.look-leader .ad-body{justify-self:start;padding:0 4px;font-size:16px}
.look-leader .ad-fine{color:var(--signal);justify-self:start;padding:0 4px}
.look-leader .ad-cta,.look-square .ad-cta,.look-sky .ad-cta{align-self:center;background:var(--ichor);color:var(--void);padding:6px 14px;font-size:16px;line-height:24px;box-shadow:4px 4px 0 var(--signal)}
@container (max-width:520px){.look-leader{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"tag tag" "art brand" "art head" "body body" "fine fine" "cta cta";grid-template-rows:auto auto auto 1fr auto auto}.look-leader .ad-cta{justify-self:start;margin-top:6px}}
.look-square{aspect-ratio:6/5;border:4px solid var(--signal);padding:12px 14px;background:var(--ichor);color:var(--void);grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tag tag" "brand art" "head art" "body body" "fine cta";grid-template-rows:auto auto auto 1fr auto;column-gap:10px;row-gap:6px}
.look-square .ad-tag,.look-square .ad-brand,.look-square .ad-head,.look-square .ad-body,.look-square .ad-fine{color:var(--void)}
.look-square .ad-art canvas{background:var(--void);border:2px solid var(--void)}
.look-square .ad-cta{background:var(--void);color:var(--ichor);box-shadow:none;justify-self:end}
.look-sky{border:2px solid var(--signal);padding:14px;text-align:center;justify-items:center;grid-template-columns:minmax(0,1fr);row-gap:10px;background:var(--void) var(--d25s);background-size:8px 8px;min-height:420px}
.look-sky > *{grid-area:auto;background:var(--void);padding:2px 6px;max-width:100%}
.look-sky .ad-art{background:none}
.look-sky .ad-tag{color:var(--signal)}
.look-sky .ad-brand{color:var(--ichor);letter-spacing:3px}
.look-sky .ad-head{font-size:32px;line-height:34px}
.look-sky .ad-fine{color:var(--signal)}
@media (max-width:900px){.rs-grid{grid-template-columns:minmax(0,1fr)}.rs-main{border-right:0;border-bottom:2px solid var(--ichor)}.look-sky{min-height:0}}
@media (max-width:560px){
  .rs-top{grid-template-columns:minmax(0,1fr);grid-template-areas:"mark" "word" "nav";justify-items:start;padding:14px 12px 0;row-gap:10px}
  .rs-name{font-size:48px}
  .rs-nav{margin:14px -12px 0}
  .rs-nav a{padding:8px 10px}
  .rs-player{grid-template-columns:auto minmax(0,1fr);padding:14px 12px}
  .rs-eq{grid-column:1/-1}
  .rs-main,.rs-side{padding:14px 12px}
  .rst > .ad-a.on-air{margin:12px}
  .rs-slot{grid-template-columns:64px minmax(0,1fr);gap:10px}
}
@media (max-width:359px){.rs-name{font-size:38px}}

/* the third pass's corrections */
.np-p.first::first-letter{font-family:var(--fell);font-size:76px;line-height:.78;padding:4px 10px 0 0;color:var(--ichor)}
.np-roundgrid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"fig gates" "stops stops";gap:18px 26px}
.np-fig{grid-area:fig}.np-gates{grid-area:gates}
.np-stops{grid-area:stops;list-style:none;margin:0;padding:12px 0 0;border-top:2px solid var(--signal);columns:3 260px;column-gap:26px;column-rule:2px dotted var(--signal)}
.np-stops li{break-inside:avoid;margin:0 0 6px;font-size:16px;line-height:1.38}
.np-stops b{font-weight:400;display:inline-block;min-width:1.4em}
@media (max-width:959px){.np-roundgrid{grid-template-columns:minmax(0,1fr);grid-template-areas:"fig" "gates" "stops"}}
.cz-rows{grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr))}
.subnav{gap:6px}
.subnav .btn{padding-inline:10px;gap:8px}
/* the station's squares: the picture over the words, at the width of the side */
.look-square{aspect-ratio:auto;grid-template-columns:minmax(0,1fr);grid-template-areas:"tag" "art" "brand" "head" "body" "fine" "cta";grid-template-rows:auto auto auto auto 1fr auto auto;text-align:center;justify-items:center}
.look-square .ad-art{justify-self:center}
.look-square .ad-cta{justify-self:center}
/* tiles: a card's height at most, the words kept short */
.lcards > .ad-a.in-grid > .ad{max-height:none}
.in-grid .ad-body{font-size:14px;line-height:1.25}
.in-grid .look-label{padding:44px 12px 14px;row-gap:4px}
.in-grid .look-label .ad-lab{padding:6px 8px;border-width:2px}
.in-grid .look-label .ad-lab .ad-brand{font-size:8px;line-height:12px;letter-spacing:1px}
.in-grid .look-label .ad-head{font-size:16px;line-height:20px}
.in-grid .look-label .ad-art{display:none}
.look-drop{padding:30% 14% 12%;align-content:center}
.look-drop .ad-head{font-size:16px;line-height:18px}
.in-grid .look-seal .ad-head{font-size:20px;line-height:22px}
.in-grid .look-speech .ad-head{font-size:24px;line-height:26px}
.in-grid .look-arrow{padding:12px 48px 12px 14px;row-gap:4px}
.in-grid .look-arrow .ad-head{font-size:20px;line-height:22px}

/* ------------------------------------------------------------------ the houses' wordmarks
   A corporation's or a faction's name stands in its own lettering; the name itself stays in the heading, unseen */
.wm-t{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wmt .wm{display:block;max-width:100%}
.pop-t.wmt{line-height:0;margin:2px 0 4px}
.pop-t.wmt .wm{--wmh:64px}
.fac-n.wmt,.corp-n.wmt,.fac-n:has(.wm),.corp-n:has(.wm){line-height:0}
.fac-n .wm,.corp-n .wm{--wmh:36px}
.ad-brand.wmb{line-height:0;background:none !important;padding-block:0 !important;letter-spacing:0}
.ad-brand.wmb .wm{--wmh:40px}
.in-paper .ad-brand.wmb .wm{--wmh:40px}
.look-billboard .ad-brand.wmb .wm,.look-marquee .ad-brand.wmb .wm,.look-scan .ad-brand.wmb .wm{--wmh:40px}
.ad-brand.wmb .wm{display:inline-block;vertical-align:bottom}
/* the second look at the new designs: one column on a narrow ad, the picture first */
@container (max-width:419px){
  .look-gauge{grid-template-columns:minmax(0,1fr);grid-template-areas:"tag" "art" "brand" "head" "batt" "body" "fine";grid-template-rows:auto auto auto auto auto 1fr auto}
  .look-timetable{grid-template-columns:minmax(0,1fr);grid-template-areas:"tag" "art" "brand" "head" "board" "body" "fine";grid-template-rows:auto auto auto auto auto 1fr auto}
  .look-chalk{grid-template-columns:minmax(0,1fr);grid-template-areas:"tag" "art" "brand" "head" "chalk" "body" "fine";grid-template-rows:auto auto auto auto auto 1fr auto}
  .look-marquee{grid-template-columns:minmax(0,1fr);grid-template-areas:"tag" "marq" "art" "brand" "head" "body" "fine";grid-template-rows:auto auto auto auto auto 1fr auto}
  .look-wave{grid-template-columns:minmax(0,1fr);grid-template-areas:"tag" "art" "brand" "head" "eq" "body" "fine";grid-template-rows:auto auto auto auto auto 1fr auto}
  .look-map{grid-template-columns:minmax(0,1fr);grid-template-areas:"tag" "art" "brand" "head" "line" "body" "fine";grid-template-rows:auto auto auto auto auto 1fr auto}
  .look-tally{grid-template-columns:minmax(0,1fr);grid-template-areas:"tag" "tally" "art" "brand" "head" "body" "fine";grid-template-rows:auto auto auto auto auto 1fr auto}
  .look-popup{grid-template-columns:minmax(0,1fr);grid-template-areas:"win" "tag" "art" "brand" "head" "body" "fine" "btns";grid-template-rows:auto auto auto auto auto 1fr auto auto}
  .look-popup .ad-art{padding:0 14px}
  .look-form{grid-template-columns:minmax(0,1fr);grid-template-areas:"tag" "art" "brand" "head" "form" "sign" "body" "fine";grid-template-rows:auto auto auto auto auto auto 1fr auto}
  .look-split{grid-template-columns:minmax(0,1fr);grid-template-areas:"tag" "brand" "split" "art" "head" "body" "fine";grid-template-rows:auto auto auto auto auto 1fr auto}
  .ad-split b{font-size:24px;line-height:26px}
  .look-arrow{grid-template-columns:minmax(0,1fr);grid-template-areas:"tag" "art" "brand" "head" "body" "fine" "cta";grid-template-rows:auto auto auto auto 1fr auto auto}
  .look-arrow .ad-cta{justify-self:start}
  [class*="look-"] .ad-art{justify-self:start}
  .look-label .ad-art,.look-seal .ad-art,.look-drop .ad-art,.look-stamp .ad-art,.look-dial .ad-art,.look-receipt .ad-art,.look-shield .ad-art,.look-wanted .ad-art,.look-sky .ad-art,.look-square .ad-art,[class*="look-pd"] .ad-art,.look-print .ad-art,.look-neon .ad-art{justify-self:center}
}
.ad-marq p{gap:2px 8px}
.ad-marq .mw{display:inline-flex;gap:2px;font-style:normal}
.ad-marq span.sp{display:none}
.look-wave .ad-brand{letter-spacing:1px}
.ad-brand.wmb{padding-block:0 !important}
.look-popup .ad-brand.wmb{padding-inline:14px !important}
/* the shield, solid so its cut reads */
.look-shield{background:var(--signal);color:var(--void);box-shadow:none}
.look-shield .ad-tag,.look-shield .ad-head,.look-shield .ad-body,.look-shield .ad-fine{color:var(--void)}
.look-shield .ad-brand{background:var(--void);color:var(--signal)}
.look-shield .ad-art canvas{background:var(--void);border:4px solid var(--void)}
/* the type pass (October 4): a story is titled in blackletter as the archive titles its documents and its people,
   an article of the Street in small capitals as the index names its words and its machines, a place in the
   survey's own pixel capitals */
.loc-n.bl{font-family:var(--bl);font-size:28px;line-height:1.05}
.loc-n.sc{font-family:var(--fellsc);font-size:22px;line-height:1.15}
.fac-n .wm,.corp-n .wm{--wmh:44px}
.pop-t.wmt .wm{--wmh:72px}
.subnav{gap:4px}
.subnav .btn{padding-inline:8px;gap:6px}
@media (max-width:560px){.np-tab{font-size:8px;line-height:14px}.np-tab th,.np-tab td{padding:3px 4px}.rs-name{font-size:36px}}
@media (max-width:359px){.rs-name{font-size:30px}}
@container (max-width:520px){.look-leader{grid-template-columns:minmax(0,1fr);grid-template-areas:"tag" "art" "brand" "head" "body" "fine" "cta";grid-template-rows:auto auto auto auto 1fr auto auto}.look-leader .ad-art{justify-self:start}}
.np-stops b{min-width:1.8em}
canvas.wm{max-width:100%;height:auto}
.ad-lab p.px:first-of-type{overflow-wrap:anywhere}
@container (max-width:419px){.ad-wanted{font-size:32px;line-height:36px;letter-spacing:3px}.ad-lab p.px:first-of-type{font-size:8px;line-height:12px}}
@media (max-width:400px){.cz-n{font-size:40px;line-height:40px}.cz-n2{font-size:32px;line-height:32px}.cz-grid > div{padding:14px}}
/* ---- grid tiles: an ad in a grid of cards takes the card's own box (Dylan, October 4, late) */
.lcards > .ad-a.in-grid.at{display:block;position:relative;min-width:0;min-height:0;max-width:none;width:auto;margin:0;align-self:stretch;justify-self:stretch;border:2px solid var(--signal);background:var(--void);color:var(--grace);text-decoration:none;overflow:hidden}
.at .at-in{display:flex;gap:14px;align-items:flex-start;padding:14px 38px 14px 14px}
.at .at-p{flex:none;width:92px;height:92px;box-sizing:border-box;padding:0;display:grid;place-items:center;border:2px solid var(--signal);background:var(--void)}
.at .at-p canvas{display:block}
.at .at-p canvas.at-por{width:80px;height:80px}
.at .loc-id{display:grid;gap:4px;align-content:start;min-width:0;flex:1 1 0}
.at .at-brand{display:block;font-size:8px;line-height:12px;letter-spacing:.5px;color:var(--signal);overflow-wrap:anywhere}
.at .at-brand.wmb{line-height:0;--wmh:24px}
.at .at-brand canvas.wm{max-width:100%;height:auto}
.at .at-head{display:block;font-size:20px;line-height:22px;color:var(--ichor);overflow-wrap:anywhere}
.at .at-body{font-size:17px;line-height:1.4;-webkit-line-clamp:3;line-clamp:3;color:var(--grace)}
.at .at-fine{display:block;font-size:8px;line-height:12px;color:var(--signal);overflow-wrap:anywhere}
.at .at-tag{position:absolute;top:10px;right:10px;font-size:8px;line-height:12px;padding:0 3px;background:var(--signal);color:var(--void)}
.at:hover .at-head,.at:focus-visible .at-head{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
/* the six treatments, each inside the same box and border */
.at-ichor{background:var(--ichor) !important}
.at-ichor .at-head,.at-ichor .at-body,.at-ichor .at-brand,.at-ichor .at-fine{color:var(--void)}
.at-ichor .at-p{border-color:var(--void)}
.at-ichor .at-tag{background:var(--void);color:var(--ichor)}
.at-signal{background:var(--signal) !important}
.at-signal .at-head,.at-signal .at-body,.at-signal .at-brand,.at-signal .at-fine{color:var(--void)}
.at-signal .at-p{border-color:var(--void)}
.at-signal .at-tag{background:var(--void);color:var(--signal)}
.at-dots{background:var(--void) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' shape-rendering='crispEdges'%3E%3Crect width='2' height='2' fill='%23F22C70'/%3E%3C/svg%3E") 0 0/6px 6px !important}
.at-dots .loc-id > *{background:var(--void);justify-self:start;padding:0 4px}
.at-dots .at-head{color:var(--grace)}
.at-scan{box-shadow:inset 0 0 0 4px var(--void),inset 0 0 0 6px var(--ichor)}
.at-scan .at-head{color:var(--signal)}
.at-scan .at-tag{background:var(--ichor)}
.at-rule .at-in{padding-left:30px}
.at-rule::before{content:"";position:absolute;left:0;top:0;bottom:0;width:12px;background:repeating-linear-gradient(180deg,var(--ichor) 0 8px,var(--void) 8px 12px)}
.at-rule .at-head{color:var(--grace)}
.at-rule .at-p{border-color:var(--ichor)}
.at-grid{background:var(--void) linear-gradient(var(--signal) 1px,transparent 1px) 0 0/100% 12px !important}
.at-grid .loc-id > *{background:var(--void);justify-self:start;padding:0 4px}
.at-grid .at-head{color:var(--ichor)}
@media (max-width:420px){.at .at-in{gap:10px;padding:12px 34px 12px 12px}.at .at-p{width:72px;height:72px}.at .at-p canvas.at-por{width:64px;height:64px}.at .at-head{font-size:16px;line-height:20px}}
/* a band of two sets its ads side by side at their own heights, each centered on the other, so neither is stretched
   past its design; the round and dropped designs keep a size of their own */
.adband{align-items:center}
.adband > .ad-a{align-self:center}
.adband .look-seal{max-width:360px;margin:0 auto}
.adband .look-drop{max-width:320px;margin:0 auto}
.adband .look-shield{max-width:440px;margin:0 auto}
@media (max-width:759px){.adband.thin{display:none}.adband > .ad-a:nth-child(n+2),.adband > .ad-a:nth-child(n+2):has(.look-receipt){display:none}}
/* the Tide Table set as a newspaper sets type: each page one flow of columns, balanced to end level, a story running
   on from the foot of one column to the head of the next (Dylan, October 4, late: no empty space on a newspaper) */
.np-page{display:block}
.np-page > *{padding:0}
.np-leadhead{padding:0 0 10px;border-bottom:2px solid var(--signal);margin-bottom:12px}
.np-flow{columns:3 280px;column-gap:32px;column-rule:2px solid var(--signal);column-fill:balance}
.np-flow > *{margin-top:0}
.np-flow .np-h,.np-flow .np-hl,.np-flow .np-kick,.np-flow .np-dek,.np-flow .np-sub{break-after:avoid}
.np-flow .ad-a.in-paper,.np-flow .np-tides,.np-flow .np-fig,.np-flow .np-line,.np-flow .np-cl,.np-flow .np-obits li,.np-flow .np-prices li{break-inside:avoid}
.np-flow .ad-a.in-paper{display:block;margin:0 0 16px}
.np-flow .np-story{border-bottom:2px solid var(--signal);padding-bottom:12px;margin-bottom:14px}
.np-flow > section{margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid var(--signal)}
.np-flow > :last-child{margin-bottom:0;border-bottom:0;padding-bottom:0}
.np-flow .np-line{margin-bottom:14px}
.np-flow .np-tides{margin:4px 0 12px;overflow:visible}
.np-flow .np-tab{font-size:14px;line-height:20px}
.np-flow .np-tab th,.np-flow .np-tab td{padding:3px 3px}
.np-round{border-top:4px double var(--signal);margin-top:16px;padding:14px 0 0}
.np-round > .np-flow{margin-top:10px}
.np-round .np-fig{margin:0 0 12px}
.np-round .np-gates{margin:0 0 12px}
.np-flow .np-stops{margin:0}
.np-page.p2 > .np-flow{padding-top:14px}
@media (max-width:959px){.np-title{font-size:72px}.np-flow{columns:2 260px}}
@media (max-width:620px){.np-flow{columns:1;column-rule:0}}
/* the station's player: PLAY a stepped triangle, STOP two bars; the meter stands still until the song plays */
button.rs-play{appearance:none;border:0;padding:0;margin:0;cursor:pointer;display:block;flex:none}
button.rs-play:focus-visible{outline:2px solid var(--signal);outline-offset:4px}
.rs-player.playing button.rs-play{clip-path:none;background:linear-gradient(90deg,var(--signal) 0 16px,transparent 16px 32px,var(--signal) 32px 48px)}
.rs-player.playing button.rs-play:hover{background:linear-gradient(90deg,var(--ichor) 0 16px,transparent 16px 32px,var(--ichor) 32px 48px)}
button.rs-play:hover{background:var(--signal)}
.rs-eq i{animation:none !important;transition:height .06s steps(1)}
.rs-player:not(.playing) .rs-eq i{height:4px}
.rs-player.playing .rs-on b{animation:none}
.rs-top{grid-template-areas:"mark word";padding-bottom:18px}
@media (max-width:560px){.rs-top{grid-template-areas:"mark" "word";padding-bottom:14px}}
@media (max-width:759px){.lcards > a.ad-a.in-grid.at.thin{display:none}}
.np-flow .np-tides{overflow-x:auto}
.np-flow .np-tab{table-layout:auto;width:100%}
.np-flow .np-tab th,.np-flow .np-tab td{padding:3px 2px}
/* ---- the model: a person with the thing, the pitch beside them, as a print ad sets its model (Dylan, October 4, late) */
.ad-a:has(.look-model){container-type:inline-size;display:block}
.look-model{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"pic copy";padding:0;border:2px solid var(--signal);align-items:stretch}
.look-model > .am-pic{grid-area:pic;align-self:stretch;display:grid;place-items:center;background:var(--void);border-right:2px solid var(--signal)}
.look-model > .am-pic canvas{display:block;image-rendering:pixelated}
.look-model .am-copy{grid-area:copy;display:grid;align-content:center;justify-items:start;gap:8px;padding:18px 20px 18px}
.look-model .ad-tag{justify-self:end;margin:-6px -8px 0 0;grid-area:auto;color:var(--signal)}
.look-model .ad-brand{grid-area:auto;color:var(--signal);font-size:8px;line-height:12px;letter-spacing:2px}
.look-model .ad-brand.wmb{line-height:0;--wmh:40px}
.look-model .ad-head{grid-area:auto;font-size:32px;line-height:34px;color:var(--ichor)}
.look-model .ad-body{grid-area:auto;font-size:17px;line-height:1.45;max-width:46ch}
.look-model .ad-fine{grid-area:auto;color:var(--signal)}
.look-model .ad-cta{grid-area:auto;justify-self:start;margin-top:4px}
/* the second: the person on the right, the pitch on a field of ICHOR */
.look-model.mv1{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"copy pic";background:var(--ichor)}
.look-model.mv1 > .am-pic{border-right:0;border-left:2px solid var(--signal)}
.look-model.mv1 .am-copy *{color:var(--void)}
.look-model.mv1 .ad-cta{background:var(--void);color:var(--ichor);box-shadow:4px 4px 0 var(--signal)}
.look-model.mv1 .ad-tag{color:var(--void)}
/* the third: the pitch on SIGNAL, its line cut out of a bar of the dark */
.look-model.mv2{background:var(--signal)}
.look-model.mv2 .am-copy *{color:var(--void)}
.look-model.mv2 .ad-head{background:var(--void);color:var(--signal);padding:2px 8px}
.look-model.mv2 .ad-cta{background:var(--ichor);color:var(--void);box-shadow:4px 4px 0 var(--void)}
@container (max-width:560px){
  .look-model,.look-model.mv1{grid-template-columns:minmax(0,1fr);grid-template-areas:"pic" "copy"}
  .look-model > .am-pic,.look-model.mv1 > .am-pic{border:0;border-bottom:2px solid var(--signal)}
  .look-model .ad-head{font-size:24px;line-height:28px}
  .look-model .am-copy{padding:14px 14px 16px}
}
.at-ichor .at-brand.wmb,.at-signal .at-brand.wmb{background:var(--void);justify-self:start;padding:3px 5px}
.look-model.mv1 .ad-brand.wmb,.look-model.mv2 .ad-brand.wmb{background:var(--void);padding:4px 6px}
.look-model > .am-pic{justify-items:center}
@container (max-width:560px){.look-model > .am-pic{justify-self:stretch}}
@container (min-width:900px){.look-model .ad-head{font-size:40px;line-height:42px}}
button.rs-play.wait{animation:ad-blink .7s steps(1) infinite}
.rs-main > .ad-a{display:block;margin:4px 0 22px}
@media (min-width:600px){.rs-deds > li:last-child:nth-child(3n+2){grid-column:span 2}.rs-deds > li:last-child:nth-child(3n+1){grid-column:1 / -1}}
.rec-t{overflow:hidden;max-width:100%}
/* ---- every ad its own: the palettes and the frames dealt within a design (adsite.VARIANT) */
.ad.pv1{--ichor:#38D0DA;--signal:#F22C70}
.ad.pv2{--void:#F22C70;--ichor:#0D0221;--grace:#0D0221}
.ad.pv3{--void:#38D0DA;--signal:#0D0221;--grace:#0D0221}
.ad.pv4{--void:#38D0DA;--signal:#F22C70;--ichor:#0D0221;--grace:#0D0221}
.ad .ad-brand.wmb{background:#0D0221 !important;padding:3px 5px !important}
.look-model .ad-brand.wmb,.ad.pv2 .ad-brand.wmb,.ad.pv3 .ad-brand.wmb,.ad.pv4 .ad-brand.wmb{justify-self:start}
.ad.fv1{outline:2px solid var(--signal);outline-offset:4px}
.ad.fv2{box-shadow:8px 8px 0 #F22C70}
.ad.fv3{outline:6px double #38D0DA;outline-offset:3px}
.ad.fv4{outline:2px dashed #F22C70;outline-offset:5px}
.lcards > .ad-a.in-grid.at{border-color:#38D0DA}
.ad.look-pd-rev .ad-fine{color:var(--void)}
.ad.look-neon.pv3 .ad-tag{color:var(--ichor)}
.at-band::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:var(--ichor)}
.at-band .at-in{padding-top:22px}
.at-band .at-head{color:var(--grace)}
.at-sdots{background:var(--void) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Crect width='2' height='2' fill='%2338D0DA'/%3E%3C/svg%3E") 0 0/8px 8px !important}
.at-sdots .loc-id > *{background:var(--void);justify-self:start;padding:0 4px}
.at-sdots .at-head{color:var(--ichor)}
.at-diag::before{content:"";position:absolute;left:0;top:0;bottom:0;width:113px;background:repeating-linear-gradient(135deg,var(--ichor) 0 4px,var(--void) 4px 10px)}
.at-diag .at-p{position:relative;border-color:var(--ichor)}
.at-diag .at-head{color:var(--signal)}
.at-dash{box-shadow:inset 0 0 0 6px var(--void),inset 0 0 0 8px var(--signal)}
.at-dash::after{content:"";position:absolute;inset:6px;border:2px dashed var(--ichor);pointer-events:none}
.at-dash .at-head{color:var(--grace)}
.at-well .at-p{background:var(--ichor);border-color:var(--ichor)}
.at-well .at-head{color:var(--grace);background:var(--ichor);justify-self:start;padding:0 6px}
.at-bar{padding-bottom:22px}
.at-bar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;background:repeating-linear-gradient(90deg,var(--signal) 0 2px,var(--void) 2px 4px,var(--signal) 4px 8px,var(--void) 8px 10px)}
.at-bar .at-head{color:var(--signal)}
.at-check .at-p{background:var(--void) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Crect width='4' height='4' fill='%23F22C70'/%3E%3Crect x='4' y='4' width='4' height='4' fill='%23F22C70'/%3E%3C/svg%3E") 0 0/8px 8px}
.at-check .at-head{color:var(--ichor)}
.at-check .at-tag{background:var(--ichor)}
.np-flow .ad-a.in-paper{max-width:100%;overflow:hidden}
.np-flow .ad-a.in-paper *{overflow-wrap:anywhere}
.np-fig svg{max-width:100%;box-sizing:border-box}
@media (max-width:420px){.np-flow .np-tab{font-size:12px;line-height:18px}.np-flow .np-tab th,.np-flow .np-tab td{padding:2px 1px}}
.nw{white-space:nowrap}
/* the tide table fits the column it lands in: the pixel face drops to its small size in a narrow column */
.np-flow .np-tides{container-type:inline-size;max-width:100%}
@container (max-width:400px){.np-flow .np-tab{font-size:8px;line-height:14px}.np-flow .np-tab th,.np-flow .np-tab td{padding:3px 2px}}
/* the masthead stacks its ears under the title until the title has the room between them */
@media (max-width:980px){
  .np-mast{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"t t" "a b" "d d"}
  .np-title{grid-area:t;font-size:clamp(52px,11vw,96px);white-space:normal}
  .np-ear{grid-area:a}.np-ear.r{grid-area:b}.np-date{grid-area:d}
}
@media (max-width:560px){.np-title{font-size:52px}}
/* the section buttons on a phone: each as wide as its own name, the rows filled out, no name cut */
@media (max-width:759px){.subnav{display:flex;flex-wrap:wrap}.subnav .btn{flex:1 1 auto;white-space:nowrap}}
@media (max-width:759px){.np-flow > .ad-a.in-paper.thin{display:none}}
/* a tile's words always lie over its treatment, and the diagonal panel ends where the picture's column ends */
.at .at-in{position:relative;z-index:1}
@media (max-width:420px){.at-diag::before{width:86px}}

/* the ads are dealt again as each page loads, each slot from the ads of its own size (Dylan, October 5); until then they
   hold their place unseen */
html.adrot a.ad-a[data-adc]:not([data-adx]){visibility:hidden}

/* the Pyre Library: its own site in its reading rooms in Pan, the papers of Nodus that burned (October 9) */
.pl{border:2px solid var(--signal);outline:2px solid var(--signal);outline-offset:4px;margin:10px 6px 44px;background:var(--void)}
.pl-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px 22px;padding:22px 22px 18px;border-bottom:6px double var(--signal)}
.pl-mark{width:96px;height:96px;border:2px solid var(--ichor);padding:4px;background:var(--void)}
.pl-name{margin:0;font-family:var(--bl);font-size:64px;line-height:.95;color:var(--grace);overflow-wrap:anywhere}
.pl-tag{margin:8px 0 0;color:var(--signal);font-size:8px;line-height:12px;letter-spacing:1px;-webkit-font-smoothing:none}
.pl-motto{margin:0;font-style:italic;color:var(--ichor);font-size:20px;max-width:12em;text-align:right}
.pl-nav{display:flex;flex-wrap:wrap;gap:0;border-bottom:2px solid var(--signal)}
.pl-nav a{padding:8px 16px;color:var(--signal);text-decoration:none;border-right:2px solid var(--signal);font-size:16px;line-height:24px;-webkit-font-smoothing:none}
@media (hover:hover){.pl-nav a:hover{background:var(--signal);color:var(--void)}}
.pl-notice{margin:0;padding:10px 22px;border-bottom:2px solid var(--signal)}
.pl-notice .px{display:inline-block;background:var(--ichor);color:var(--void);padding:0 8px;margin-right:12px;font-size:16px;line-height:24px;-webkit-font-smoothing:none}
.pl-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px}
.pl-main{padding:22px;min-width:0;border-right:2px solid var(--signal)}
.pl-side{padding:22px 20px;display:grid;gap:22px;align-content:start;min-width:0}
.pl-sec{margin:0 0 34px;scroll-margin-top:calc(var(--bar, 56px) + 16px)}
.pl-h{margin:0 0 14px;color:var(--void);background:var(--signal);padding:2px 10px;display:inline-block;font-size:16px;line-height:24px;-webkit-font-smoothing:none}
.pl-search{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 16px;padding:10px 12px;border:2px solid var(--signal)}
.pl-search label{color:var(--signal);font-size:8px;line-height:12px;-webkit-font-smoothing:none}
.pl-search input{flex:1 1 200px;min-width:0;font:inherit;font-size:17px;color:var(--grace);background:var(--void);border:0;border-bottom:2px dotted var(--signal);padding:4px 2px;outline:none}
.pl-search input:focus-visible{border-bottom-color:var(--ichor)}
.pl-search input::placeholder{color:var(--signal);opacity:.7;font-style:italic}
.pl-count{color:var(--ichor);font-size:8px;line-height:12px;-webkit-font-smoothing:none}
.pl-recs{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.pl-rec details{border:2px solid var(--signal)}
.pl-rec summary{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"call call" "t t" "f f" "a a" "r r";gap:6px 14px;padding:14px 16px 12px;cursor:pointer;list-style:none;background:var(--void) linear-gradient(90deg,var(--ichor) 4px,transparent 4px)}
.pl-rec summary::-webkit-details-marker{display:none}
.pl-call{grid-area:call;color:var(--ichor);font-size:8px;line-height:12px;-webkit-font-smoothing:none}
.pl-rt{grid-area:t;font-family:var(--bl);font-size:34px;line-height:1.05;color:var(--grace)}
.pl-f{grid-area:f;display:grid;grid-template-columns:11ch minmax(0,1fr);gap:2px 10px;margin:4px 0 0;font-size:16px;line-height:22px;-webkit-font-smoothing:none}
.pl-f dt{color:var(--signal)}
.pl-f dd{margin:0;color:var(--grace)}
.pl-abs{grid-area:a;font-style:italic;max-width:62ch}
.pl-req{grid-area:r;justify-self:start;margin-top:4px;padding:4px 12px;border:2px solid var(--signal);color:var(--signal);font-size:16px;line-height:24px;-webkit-font-smoothing:none}
.pl-req .c,.pl-rec details[open] .pl-req .o{display:none}
.pl-rec details[open] .pl-req .c{display:inline}
.pl-rec details[open] .pl-req{background:var(--signal);color:var(--void)}
@media (hover:hover){.pl-rec summary:hover .pl-rt{color:var(--signal)}.pl-rec summary:hover .pl-req{border-color:var(--grace);color:var(--grace)}}
.pl-rec summary:focus-visible{outline:2px solid var(--ichor);outline-offset:-6px}
.pl-rec .lib-doc{margin:0 16px 16px}
.pl-none{color:var(--ichor);margin:14px 0 0}
.pl-list{list-style:none;margin:0;padding:0}
.pl-list li{display:grid;grid-template-columns:minmax(0,15em) minmax(0,1fr);gap:4px 16px;padding:8px 0;background:var(--dots-s) left bottom/4px 2px repeat-x}
.pl-list .px{color:var(--signal);font-size:8px;line-height:12px;padding-top:6px;-webkit-font-smoothing:none}
.pl-box{border:2px solid var(--signal);padding:14px 14px 12px}
.pl-rules{margin:0;padding:0 0 0 3.2ch;display:grid;gap:8px}
.pl-rules li::marker{color:var(--ichor);font-family:var(--px)}
.pl-give p{margin:0 0 14px}
.pl-foot{padding:10px 22px;border-top:6px double var(--signal);color:var(--signal);font-size:8px;line-height:12px;text-align:center;-webkit-font-smoothing:none}
.lib-plate{margin:0;border:2px solid var(--ichor);padding:14px 12px 12px;text-align:center}
.lib-plate blockquote{margin:0 0 10px;color:var(--grace);font-size:16px;line-height:24px;-webkit-font-smoothing:none}
.lib-plate figcaption{color:var(--ichor);font-size:8px;line-height:14px;-webkit-font-smoothing:none}
@media (max-width:899px){.pl-grid{grid-template-columns:minmax(0,1fr)}.pl-main{border-right:0;border-bottom:2px solid var(--signal)}.pl-motto{display:none}.pl-top{grid-template-columns:auto minmax(0,1fr)}}
@media (max-width:560px){.pl{margin:6px 4px 32px}.pl-top{grid-template-columns:minmax(0,1fr);padding:16px 14px 14px}.pl-mark{width:72px;height:72px}.pl-name{font-size:44px}
  .pl-main{padding:16px 12px}.pl-side{padding:16px 12px}.pl-notice{padding:10px 12px}.pl-nav a{padding:6px 10px;flex:1 1 auto;text-align:center;border-bottom:2px solid var(--signal)}
  .pl-rt{font-size:28px}.pl-f{grid-template-columns:minmax(0,1fr)}.pl-f dd{margin-bottom:4px}.pl-list li{grid-template-columns:minmax(0,1fr)}.pl-rec .lib-doc{margin:0 8px 8px}}
.lib-doc{margin-top:18px}
.doc .rb{font-style:italic}
.doc .vr{display:grid;grid-template-columns:13ch minmax(0,1fr);gap:0 12px;margin:0 0 6px}
.doc .vr .who{color:var(--signal);font-size:16px;line-height:inherit;-webkit-font-smoothing:none}
.doc .mg{font-style:italic;color:var(--signal);border-left:2px solid var(--signal);padding:2px 0 2px 12px;margin:0 0 14px 2ch}
.doc .mg .px{display:block;font-style:normal;font-size:8px;line-height:12px;margin:0 0 4px;-webkit-font-smoothing:none}
.doc .mg .px:empty{display:none}
.doc .q{display:grid;grid-template-columns:3ch minmax(0,1fr);gap:2px 10px;margin:0 0 12px}
.doc .q .n{grid-row:span 2;margin:0}
.doc .q .qq{color:var(--grace)}
.doc .q .qa{font-style:italic}
.doc .n.gr{margin:0 0 0 12px}
.lib-doc.dt .doc-b p{font-family:var(--px);font-size:16px;line-height:24px;-webkit-font-smoothing:none}
.lib-doc.dt .doc-b{color:var(--grace)}
@media (max-width:480px){.doc .vr{grid-template-columns:minmax(0,1fr)}.doc .mg{margin-left:0}}