:root{color-scheme:dark;--paper:#13110f;--ink:#cec5b2;--quiet:#a39988;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-synthesis:none}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink)}
body{background-image:radial-gradient(ellipse at 50% 38%,#30271c24,transparent 72%)}
.landing{min-height:100svh;max-width:1160px;margin:auto;display:flex;flex-direction:column;justify-content:center;padding:48px 48px 58px}
h1{font:400 clamp(12px,1.45vw,16px)/1.7 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.01em;text-align:center;margin:0 0 35px}
/* Eight to a row, in half columns, so that the second row of seven is centred. */
.signs{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:18px 8px;max-width:1040px;width:100%;margin:0 auto}
.sign{grid-column:span 2;min-width:0;min-height:145px;padding:13px 12px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px;color:var(--ink);text-decoration:none;touch-action:manipulation;-webkit-tap-highlight-color:#cec5b222}
.sign svg{display:block;width:92px;height:92px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.sign span{font-size:10px;letter-spacing:.06em;color:var(--quiet);line-height:1.5}
.sign:focus-visible{outline:1px dashed var(--ink);outline-offset:4px}
.sign:focus-visible span,.sign:hover span{color:var(--ink)}
.sign:hover svg{stroke-width:1.8}
.sign:nth-child(9){grid-column:2 / span 2}
.here8 svg{transform:rotate(-2deg);stroke-width:2.2}
/* a seven-segment eight, drawn as its seven strokes */
.selling svg{transform:rotate(-3deg)}
.among svg{transform:rotate(2deg)}
/* the poem's staircase of lines, and the first tied to the last */
.superscript svg{transform:rotate(-2deg)}
/* a line cut in two, and the mark that sends you to its footnote */
.hangle svg{transform:rotate(-4deg)}
/* hangle's sign is its own mirror across; turned over, it becomes elgnah's. */
.elgnah svg{transform:rotate(4deg)}
.book svg{transform:rotate(-3deg)}
.mark svg{stroke-width:3.2;transform:rotate(3deg);width:86px}
.days svg{transform:rotate(2deg);width:83px}
.molt svg{transform:rotate(-5deg)}
.braid svg{transform:rotate(4deg)}
.mycel svg{transform:rotate(-4deg)}
.begin svg{transform:rotate(5deg)}
.yield svg{transform:rotate(-3deg)}
.mix svg{stroke-width:5.5}
.chamber-link{align-self:center;margin-top:22px;font-size:10px;letter-spacing:.04em;color:var(--quiet);text-underline-offset:5px;min-height:30px;padding:6px}
.chamber-link:focus-visible{outline:1px dashed var(--ink);outline-offset:3px}
@media(min-width:1000px) and (min-height:780px){.signs{gap:22px 10px;max-width:1120px}.sign{min-height:158px}.sign svg{width:100px;height:100px}.sign span{font-size:11px}h1{margin-bottom:36px}}
@media(max-width:860px) and (min-width:601px){.signs{gap:12px 3px}.sign{padding:10px 2px}.sign svg{width:70px;height:70px}.mark svg,.days svg{width:66px}}
@media(max-width:600px){.landing{padding:36px 16px 40px}h1{margin-bottom:24px}.signs{grid-template-columns:repeat(8,minmax(0,1fr));gap:9px 5px}.sign:nth-child(9){grid-column:auto / span 2}.sign:nth-last-child(3){grid-column:2 / span 2}.sign{min-height:124px;padding:10px 2px;gap:9px}.sign svg{width:70px;height:70px}.sign span{font-size:9px;letter-spacing:.015em}.mark svg{width:66px}.days svg{width:64px}}
@media(max-width:350px){.landing{padding:22px 12px 24px}.signs{gap:6px 2px}.sign{min-height:100px;padding:4px 3px;gap:6px}.sign svg{width:62px;height:62px}.mark svg,.days svg{width:60px}.sign span{font-size:8px}h1{font-size:11px;margin-bottom:14px}.chamber-link{margin-top:14px}}
@media(max-height:580px) and (min-width:601px){.landing{padding-top:22px;padding-bottom:22px}h1{margin-bottom:12px}.signs{gap:3px 12px}.sign{min-height:115px;padding:5px}.sign svg{width:72px;height:72px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.landing-after{display:flex;justify-content:center;gap:10px}