/* ══════════════════════════════════════════════════════════════════════════ NOCTURNE - the design system this site is drawn in. Tokens first, in one block, and every rule after this one takes its colour, type, spacing, radius and shadow from them. Retune the look HERE; nothing downstream is allowed a hex of its own. Nocturne is a DARK system, so the stylesheet no longer forks on `prefers-color-scheme`. The old light theme is gone rather than kept as a second skin: two themes is two designs to keep honest, and only one of them was ever designed. Rules that used to be dark-mode-only (the white plate under a transparent logo) are now simply rules. ═══════════════════════════════════════════════════════════════════════ */ /* Inter, self-hosted and subset to Latin. Deliberately NOT the design system's own `@import` from fonts.googleapis.com, for two reasons that both bite here: this site has to render opened straight off the Windows share with no internet, and - the stronger one - every page is already built so that READING it announces nothing to a third party. That is the entire point of the click-to-load facade in `EMBED_PROVIDERS`; a webfont fetched per page view from fonts.gstatic.com would undo it on every page at once, for a typeface. The files are committed under `scripts/site_fonts/`, so a build on a machine without Inter installed still produces the designed page. The `url()`s resolve against THIS FILE, not against the page, so one relative path serves every depth the site nests pages at. Japanese falls straight through the stack to the system's own CJK face: Inter has never carried those glyphs, and a catalogue of Japanese live discs asks for them on most pages. That is why the stack keeps a CJK name in it - losing it would leave half this catalogue to the browser's last-resort font. */ @font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap; src:url(fonts/inter-400.woff2) format("woff2")} @font-face{font-family:Inter;font-style:italic;font-weight:400;font-display:swap; src:url(fonts/inter-400i.woff2) format("woff2")} @font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap; src:url(fonts/inter-500.woff2) format("woff2")} @font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap; src:url(fonts/inter-600.woff2) format("woff2")} @font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap; src:url(fonts/inter-700.woff2) format("woff2")} /* Newsreader (Production Type, SIL OFL 1.1), the FRONT PAGE's face and nobody else's: the owner left the landing's type to me and judged it (2026-10-09), and a newspaper serif under a blackletter nameplate is the oldest masthead pairing in print, so the front door reads as the front page of an archive. The catalogue pages keep Inter. Two VARIABLE files (weight 200-800 and the `opsz` axis, which the browser drives from the font size by itself) rather than four static cuts, so the 34px tagline and the 12px pin labels each get the optical size drawn for them. Self-hosted for Inter's reasons above. */ @font-face{font-family:Newsreader;font-style:normal;font-weight:200 800;font-display:swap; src:url(fonts/newsreader-var.woff2) format("woff2")} @font-face{font-family:Newsreader;font-style:italic;font-weight:200 800;font-display:swap; src:url(fonts/newsreader-italic-var.woff2) format("woff2")} :root{ --color-bg:#161826; --color-surface:#232532; --color-text:#e9e9ed; --color-accent:#9184d9; --color-accent-2:#a7a1db; --color-divider:color-mix(in srgb, #e9e9ed 16%, transparent); /* Tonal ramps - generated in OKLCH on one shared lightness scale, so the same step of any role carries the same visual weight. On this dark ground the deep steps (700-900) are the tinted fills, 500 is the role's base, and the light steps (100-300) are text sitting on those fills. */ --color-neutral-100:#f3f5fe; --color-neutral-200:#e4e7f5; --color-neutral-300:#cfd3e5; --color-neutral-400:#b2b6ca; --color-neutral-500:#9397ab; --color-neutral-600:#75798c; --color-neutral-700:#595d6c; --color-neutral-800:#3f424d; --color-neutral-900:#292b31; --color-accent-100:#f5f4ff; --color-accent-200:#e7e5fe; --color-accent-300:#d2cefd; --color-accent-400:#b5abfc; --color-accent-500:#968ae0; --color-accent-600:#796cbf; --color-accent-700:#5d5294; --color-accent-800:#423a6a; --color-accent-900:#2b2741; --font-heading:Inter,system-ui,"Noto Sans JP","Hiragino Kaku Gothic ProN", "Yu Gothic",Meiryo,sans-serif; --font-heading-weight:500; --font-body:Inter,system-ui,"Noto Sans JP","Hiragino Kaku Gothic ProN", "Yu Gothic",Meiryo,sans-serif; --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* The landing's serif, falling through to the SAME CJK stack as Inter: a Japanese title in a pin label reaches Noto Sans JP exactly as it does on every other page. */ --font-landing:Newsreader,system-ui,"Noto Sans JP","Hiragino Kaku Gothic ProN", "Yu Gothic",Meiryo,sans-serif; /* Density 0.70x - this system is compact on purpose. */ --space-1:2.8px; --space-2:5.6px; --space-3:8.4px; --space-4:11.2px; --space-6:16.8px; --space-8:22.4px; /* The system's ONE saturated field - a deep indigo used as presence at section scale (the deck's dividers, the landing's stat band), never as an interface colour. Everywhere else the grounds stay desaturated. */ --color-section:#262a60; --color-section-glow:#353b80; --color-section-ghost:#4c5397; /* The reading measure. Nocturne is left-aligned and asymmetric - copy hugs the left edge and the air is left on the right - and this held prose to 58ch rather than running it to the column. `none` since 2026-10-01, at the owner's call, with the column itself going full width: a fandom wiki runs its page across the whole screen, and a 58ch paragraph inside a column that wide would only have moved the empty space he was asking to lose from the sides of the page into the middle of it. One token still; give it a length again to bring a measure back. */ --measure:none; --radius-sm:4px; --radius-md:8px; --radius-lg:14px; /* Elevation on a dark ground is a hairline EDGE plus ambient darkness, never a stack of soft drops - which is why the cards below carry no border of their own any more: the shadow token already draws it. */ --shadow-sm:0 0 0 1px #3f424d; --shadow-md:0 0 0 1px #595d6c,0 6px 18px rgba(0,0,0,.55); --shadow-lg:0 0 0 1px #9397ab,0 16px 40px rgba(0,0,0,.65); /* ── The names the rest of this stylesheet already speaks ──────────────── Mapped onto the tokens above rather than replaced throughout: every layout rule in this file was argued for and measured against a real page, and a rename would have meant touching all of them to change none of them. `--card` and `--mono` are NEW - `EDIT_CSS` has always asked for both and nothing ever defined them, so the editor's panels were drawing on an unset variable and its textareas were falling back to a bare `monospace`. */ --bg:var(--color-bg); --panel:var(--color-surface); --card:var(--color-surface); --ink:var(--color-text); --muted:color-mix(in srgb, var(--color-text) 55%, transparent); --line:var(--color-divider); --accent:var(--color-accent); --accent-soft:var(--color-accent-900); --edge:var(--color-neutral-700); --mono:var(--font-mono); --shadow:var(--shadow-sm); /* The graph's categorical colours. Regenerated in OKLCH onto ONE lightness (0.78) at a chroma below the accent's own 0.125, so the accent still leads any page they appear on and no kind shouts louder than another purely by being yellow. The HUES are the ones the catalogue has always taught - release lavender, band amber, person teal, venue blue, company rose - so a reader who has learned the legend has not had it moved. */ --k-release:#b8aded; --k-band:#ddad79; --k-person:#7fc9ad; --k-venue:#8cbcee; --k-company:#eaa1a0; /* A name with no page is RED - the wiki red link - at the owner's call (2026-10-01); it was a grey #686870. oklch(0.68 0.19 27): a true red at twice the company rose's chroma, so the two never read as one colour, and at the lavender link's own lightness, so a page-less name carries the same weight as a link that works. 6.4:1 on the plate, 4.8:1 on a card. */ --k-dead:#f75e54; /* The concerts graph's ground is a record on a turntable (owner, 2026-10-04): the vinyl and the platter under it. Near-black on purpose - every node colour above reads best on black - and tokens so the canvas reads them the way it reads everything else. The label takes `--accent-soft`. */ --vinyl:#0a0b0f; --platter:#14151b; /* The plate under the content column. The ground draws behind the WHOLE document, so on a text page the backline runs straight under the words; this darkens it there and nowhere else. One knob. THE VALUE IS HIGH ON PURPOSE, and a low one does nothing - which is not obvious. Black at alpha scales the line AND the ground beneath it by the same (1-alpha), so the Weber contrast between them is UNCHANGED: .42 made the whole column dimmer and left the drawing exactly as legible through the text. Measured on the venues table at .60/.75/.88, only the last actually put the kit behind the words. What does the work is absolute luminance - near the floor the eye stops resolving the step at all. .85 -> .76 at the owner's call: he wanted the ground to read through a little. That is a TASTE dial and this is the range it works in - .76 keeps the drawing as faint texture, .68 has it competing with a table again, and .60 may as well not be here. The test guards the floor, not the taste. */ --plate:rgba(0,0,0,.76); } /* Interaction states are THEMED, never the browser's. */ :focus{outline:none} :focus-visible{outline:2px solid var(--color-accent);outline-offset:2px} ::selection{background:color-mix(in srgb, var(--color-accent) 30%, transparent)} /* The image wrapper the system specifies for photographs. It is deliberately NOT applied to anything in the catalogue itself: `mix-blend-mode:lighten` drops everything darker than the page out of a picture, which is the effect Nocturne wants from a portrait shot on black - and is destructive on a disc sleeve, whose dark half would simply disappear. A catalogue whose whole job is showing the object cannot blend the object into the page. It stays available for a decorative photograph that was shot for it. */ .lighten{mix-blend-mode:lighten;background-color:transparent} .text-muted{color:var(--muted)} /* Every colour, face, radius and shadow this file spends is defined once in the NOCTURNE block above - including `--bg`/`--ink`/`--k-*` and the other names the rules below have always used. There is no light/dark fork any more. */ *,*::before,*::after{box-sizing:border-box} body{margin:0;color:var(--ink); background: radial-gradient(1200px 720px at 82% -160px, color-mix(in srgb, var(--color-accent-900) 75%, transparent), transparent 60%), radial-gradient(1100px 800px at -10% 100%, color-mix(in srgb, black 30%, transparent), transparent 55%), var(--bg); background-repeat:no-repeat; font-family:var(--font-body);font-size:15px;line-height:1.55;font-weight:400; -webkit-font-smoothing:antialiased; /* better breaks, no orphan left on a line of its own */ text-wrap:pretty} /* - THE GROUND - A backline: head and 4x12, guitars on their stands, wedges, kit, keys and a second stack, on a floor line that fades out at both ends. The three amps show a plain front and no speaker cones (owner, 2026-10-01): on a real cab the cones sit behind the grille cloth, and drawn they read as portholes. Fixed to the foot of the viewport and masked away toward the top, so it reads as the room the catalogue is about rather than as an illustration sitting on a page. It scrolls with nothing and catches no clicks. IT RIDES ONE DATA URI IN THIS STYLESHEET, not markup in every page. As markup it is 4.7KB x ~285 pages = 1.3MB of identical bytes, all of which would also have to ride every public publish. The cost of the URI is that a custom property cannot resolve inside it - a data URI is its own document - so the single colour it spends is inlined as `--color-neutral-800`'s value. There is no light fork for that to fall out of step with; if the token is ever retuned, retune it here in the same change. `z-index:-1` is what lets it sit under the whole document without any other element opting into a stacking context. The alternative - the mockup's - is wrapping every page's content in a positioned div, which is markup on every page again, and a `z-index:0` layer would paint OVER unpositioned text rather than behind it. */ body::before{content:"";position:fixed;left:0;right:0;bottom:0; height:min(42vh,380px);pointer-events:none;z-index:-1; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 360' preserveAspectRatio='xMidYMax meet'%3E%3Cdefs%3E%3ClinearGradient id='bl-floor' x1='0' x2='1' y1='0' y2='0'%3E%3Cstop offset='0' stop-color='%233f424d' stop-opacity='0'%3E%3C/stop%3E%3Cstop offset='0.12' stop-color='%233f424d'%3E%3C/stop%3E%3Cstop offset='0.88' stop-color='%233f424d'%3E%3C/stop%3E%3Cstop offset='1' stop-color='%233f424d' stop-opacity='0'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke='%233f424d' stroke-width='1.3' opacity='0.75' fill='none' stroke-linejoin='round' stroke-linecap='round'%3E%3Cline x1='20' y1='320' x2='1380' y2='320' stroke='url(%23bl-floor)'%3E%3C/line%3E%3Crect x='130' y='152' width='200' height='58' rx='3'%3E%3C/rect%3E%3Ccircle cx='165' cy='181' r='4'%3E%3C/circle%3E%3Ccircle cx='190' cy='181' r='4'%3E%3C/circle%3E%3Ccircle cx='215' cy='181' r='4'%3E%3C/circle%3E%3Ccircle cx='240' cy='181' r='4'%3E%3C/circle%3E%3Ccircle cx='265' cy='181' r='4'%3E%3C/circle%3E%3Ccircle cx='290' cy='181' r='4'%3E%3C/circle%3E%3Crect x='130' y='215' width='200' height='105' rx='3'%3E%3C/rect%3E%3Cpath d='M148 181 C 95 200 88 300 122 318 S 200 334 250 320'%3E%3C/path%3E%3Cpolygon points='250,320 330,320 318,290 268,290'%3E%3C/polygon%3E%3Ccircle cx='293' cy='305' r='8'%3E%3C/circle%3E%3Cline x1='430' y1='320' x2='430' y2='150'%3E%3C/line%3E%3Cpath d='M410 320 430 296 450 320'%3E%3C/path%3E%3Cline x1='430' y1='150' x2='500' y2='112'%3E%3C/line%3E%3Ccircle cx='506' cy='109' r='7'%3E%3C/circle%3E%3Cpolygon points='470,320 550,320 538,290 488,290'%3E%3C/polygon%3E%3Ccircle cx='513' cy='305' r='8'%3E%3C/circle%3E%3Cellipse cx='568' cy='168' rx='32' ry='4'%3E%3C/ellipse%3E%3Cellipse cx='568' cy='178' rx='32' ry='4'%3E%3C/ellipse%3E%3Cline x1='568' y1='182' x2='568' y2='320'%3E%3C/line%3E%3Cpath d='M550 320 568 298 586 320'%3E%3C/path%3E%3Crect x='585' y='232' width='66' height='36' rx='3'%3E%3C/rect%3E%3Cline x1='618' y1='268' x2='618' y2='320'%3E%3C/line%3E%3Cpath d='M600 320 618 298 636 320'%3E%3C/path%3E%3Crect x='655' y='185' width='58' height='48' rx='3'%3E%3C/rect%3E%3Crect x='722' y='185' width='58' height='48' rx='3'%3E%3C/rect%3E%3Ccircle cx='715' cy='268' r='52'%3E%3C/circle%3E%3Ccircle cx='715' cy='268' r='45'%3E%3C/circle%3E%3Ccircle cx='736' cy='286' r='7'%3E%3C/circle%3E%3Crect x='782' y='236' width='66' height='84' rx='3'%3E%3C/rect%3E%3Cellipse cx='800' cy='120' rx='40' ry='4'%3E%3C/ellipse%3E%3Cline x1='800' y1='124' x2='800' y2='236'%3E%3C/line%3E%3Cellipse cx='870' cy='150' rx='44' ry='4'%3E%3C/ellipse%3E%3Cline x1='870' y1='154' x2='870' y2='320'%3E%3C/line%3E%3Cpath d='M852 320 870 298 888 320'%3E%3C/path%3E%3Crect x='930' y='236' width='130' height='84' rx='3'%3E%3C/rect%3E%3Cline x1='930' y1='252' x2='1060' y2='252'%3E%3C/line%3E%3Ccircle cx='950' cy='244' r='3'%3E%3C/circle%3E%3Ccircle cx='968' cy='244' r='3'%3E%3C/circle%3E%3Ccircle cx='986' cy='244' r='3'%3E%3C/circle%3E%3Ccircle cx='1004' cy='244' r='3'%3E%3C/circle%3E%3Ccircle cx='1022' cy='244' r='3'%3E%3C/circle%3E%3Ccircle cx='1040' cy='244' r='3'%3E%3C/circle%3E%3Crect x='1110' y='118' width='190' height='50' rx='3'%3E%3C/rect%3E%3Ccircle cx='1135' cy='143' r='4'%3E%3C/circle%3E%3Ccircle cx='1155' cy='143' r='4'%3E%3C/circle%3E%3Ccircle cx='1175' cy='143' r='4'%3E%3C/circle%3E%3Ccircle cx='1195' cy='143' r='4'%3E%3C/circle%3E%3Ccircle cx='1215' cy='143' r='4'%3E%3C/circle%3E%3Ccircle cx='1235' cy='143' r='4'%3E%3C/circle%3E%3Ccircle cx='1255' cy='143' r='4'%3E%3C/circle%3E%3Ccircle cx='1275' cy='143' r='4'%3E%3C/circle%3E%3Crect x='1110' y='172' width='190' height='148' rx='3'%3E%3C/rect%3E%3C/g%3E%3C/svg%3E") center bottom/100% 100% no-repeat; -webkit-mask-image:linear-gradient(to top,#000 45%,transparent); mask-image:linear-gradient(to top,#000 45%,transparent)} /* The graph owns the viewport and paints its own ground; a stage drawing behind a node map is noise, not atmosphere. */ body.fullpage::before{display:none} a{color:var(--accent);text-decoration:none;text-underline-offset:3px} a:hover{text-decoration:underline} /* A link INSIDE running text is underlined, faintly, as well as coloured (WCAG 1.4.1, the 2026-10-08 accessibility pass): the accent against body text is 2.7:1 and against muted text 1.1:1, so colour alone did not mark it. Headers, menus, tiles, buttons and the on-this-page rail stay as they were; a hover makes the line solid. The whole rule has the specificity of a bare `a` (`:where`), so any rule that styles a link row of its own (the forum's lists, in ACCOUNT_CSS) simply wins. */ :where(main p,main li,main dd,main figcaption,.lead,footer) a:where(:not(.btn,.tile,.chip,.lb,nav *,.actions *,.catbar *,.pager *)){ text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em; text-decoration-color:color-mix(in srgb, currentColor 40%, transparent)} :where(main p,main li,main dd,main figcaption,.lead,footer) a:where(:not(.btn,.tile,.chip,.lb,nav *,.actions *,.catbar *,.pager *)):hover{ text-decoration-color:currentColor} /* Skip to the page's content, first in the tab order and shown only when focused. */ .skip{position:absolute;left:12px;top:-80px;z-index:200;padding:8px 14px;border-radius:var(--radius-md); background:var(--panel);color:var(--ink);border:2px solid var(--accent)} .skip:focus{top:10px} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} .tablewrap:focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* Nothing animates for a reader who has asked for less motion (the graph and the lightbox already honour it in their own code). */ @media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important; animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}} code{font:13px/1.4 var(--font-mono);background:var(--accent-soft); color:var(--color-accent-200);padding:1px 5px;border-radius:var(--radius-sm)} .topbar{position:sticky;top:0;z-index:20;display:flex;gap:18px;align-items:center;flex-wrap:wrap; padding:13px 22px;background:var(--panel);border-bottom:0} /* IN-PAGE LINKS LAND BELOW THE BAR. The bar is sticky, so a `#section` jump used to park the heading it was aiming at UNDERNEATH it (owner, 2026-10-01). `scroll-padding-top` on the root is the one rule every such jump honours - the rail's links, a hash arriving from another page, and `scrollIntoView`. The height is the bar's own, MEASURED by `BAR_JS`, because it wraps: measured 2026-10-04, once the ornament under the mark made it 18px taller, 80px on one row, 122px on two, 103px on a phone down to 320, and more where the private copy's Edit and Refresh buttons push it to a third. These per-width values are only the fallback for a page with no script. */ :root{--bar-h:80px} html{scroll-padding-top:calc(var(--bar-h) + 14px)} @media (max-width:1240px){:root{--bar-h:122px}} @media (max-width:640px){:root{--bar-h:103px}} .ico{width:15px;height:15px;flex:none;display:block} .searchwrap{position:relative;display:inline-flex;align-items:center} .searchwrap .ico{position:absolute;left:11px;color:var(--muted);pointer-events:none} .brand{font-family:var(--font-heading);font-weight:var(--font-heading-weight); font-size:18px;letter-spacing:-.015em;color:var(--ink)} /* The brand is the drawn mark now, so `.brand` only has to be a flex row that keeps the artwork and any tagline on one baseline. The type rules above still stand because `.brand span` - the tagline - inherits them. */ .brand{display:inline-flex;align-items:center;flex:none} /* The WORD is 34px - taller than the old Backline mark's 26px, because blackletter's x-height is under half its full height (the M's swash and the g's tail), so at 26px the lowercase was 11px. The mark is 54px because the ornament hangs under the word (`LOGO_VIEWBOX` is 1438 units tall to the word's 905): grow this and the banner's height by that ratio together, or the word changes size. */ .brand .logomark{height:54px} .logomark{width:auto;display:block;overflow:visible} .brand span{color:var(--muted);font-weight:400;margin-left:9px;font-size:10.5px; text-transform:uppercase;letter-spacing:.11em} .topbar nav{display:flex;gap:14px;font-size:14px;align-items:center} /* Two navs, one row on a wide screen. `browse` sits where the mockup draws it - straight after the brand - and `tools` is pushed to the far end by the auto margin rather than by an order rule, so the wide layout needs no reordering at all and is simply the document. THREE ROWS ARE MADE IMPOSSIBLE HERE, not by the breakpoint below. Measured, the bar wants 1170px to sit on one line; a breakpoint alone would mean any platform whose Inter metrics differ by a few percent silently wraps into a third row on some width nobody tested. So `browse` is the item that gives: `min-width:0` lets it shrink below its content and `overflow-x:auto` lets that content slide instead of pushing a sibling onto a new line, while `tools` never shrinks. The wrap can then only ever happen where the query below asks for it. */ .topbar .browse{flex:0 1 auto;min-width:0;overflow-x:auto;flex-wrap:nowrap; padding-bottom:2px;scrollbar-width:thin} /* Or the links compress into each other rather than overflowing, and the scroll never arrives. */ .topbar .browse a{flex:none} .topbar .browse a:focus-visible{outline-offset:-2px} .topbar .tools{flex:none;margin-left:auto} .topbar nav a{color:var(--ink);display:inline-flex;align-items:center;gap:6px} /* The glyph is quieter than its label: at full ink a 15px filled Phosphor mark out-weighs the 14px word beside it and the bar reads as a row of icons with captions. It comes UP to the label on hover and on the current page, which is also the only way the accent state reads as one thing rather than a coloured word beside an ink icon. */ .topbar nav a .ico{opacity:.62} .topbar nav a:hover .ico,.topbar nav a.on .ico{opacity:1} .topbar nav a:hover{color:var(--accent);text-decoration:none} .topbar nav a.on{color:var(--accent);font-weight:var(--font-heading-weight)} /* The design system's button, taken as-is. Outlined on nothing - the primary action is an accent LINE, never a fill. It sits on an here because the thing it does is navigate, and `.btn` was written to work on one. */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px; cursor:pointer;text-decoration:none;font-family:var(--font-heading); font-weight:var(--font-heading-weight);font-size:14px;line-height:1.2; color:var(--ink);background:transparent;border:1px solid transparent; padding:var(--space-2) calc(var(--space-3) * 1.2);border-radius:var(--radius-md); white-space:nowrap} .btn-primary{color:var(--accent);border-color:var(--accent)} .btn-primary:hover{background:color-mix(in srgb, var(--accent) 12%, transparent)} .btn-primary:active{background:color-mix(in srgb, var(--accent) 22%, transparent)} .btn-ghost{color:var(--accent);padding-inline:var(--space-1)} .btn-ghost:hover{background:color-mix(in srgb, var(--accent) 10%, transparent)} /* `.topbar nav a` is two classes deep and would otherwise out-specify `.btn-primary` and paint the button's own label back to ink. The bar's one action is WHITE on an accent outline, not accent-on-accent: it is the only control up there that does something rather than going somewhere, and the brighter label is what separates it from the five browse links beside it. The icon comes with it for free - every Phosphor glyph is inlined `fill="currentColor"`, so the label's colour is the icon's colour and the two cannot drift apart. `--color-neutral-100` and not a `#fff` of its own: the ramp's lightest step is what this system calls white, and the NOCTURNE block's rule is that nothing downstream gets a hex. Scoped to `.topbar` deliberately - `.btn-primary` is also the editor panel's save button, which is not this and should not move. */ .topbar nav a.btn-primary{color:var(--color-neutral-100)} .topbar nav a.btn-primary:hover{color:var(--color-neutral-100);text-decoration:none} /* Already there: the outline is the accent either way, so being ON that page is said with the pressed tint rather than by colouring what is coloured. */ .topbar nav a.btn-primary.on{background:color-mix(in srgb, var(--accent) 18%, transparent)} /* Hidden until the JS finds a server to talk to - see `REFRESH_JS`. `hidden` alone loses to `display:flex` on the bar, hence the explicit rule. */ #refreshsite[hidden],#editsite[hidden]{display:none} /* Outlined, never filled - the system's primary action is an accent line on nothing. The hover and pressed states are tints of the same accent rather than a second colour. */ #refreshsite{font:inherit;font-size:13.5px;padding:5px 11px;border:1px solid var(--accent); border-radius:var(--radius-md);background:transparent;color:var(--accent); cursor:pointer;white-space:nowrap} #refreshsite:hover{background:color-mix(in srgb, var(--accent) 12%, transparent)} #refreshsite:active{background:color-mix(in srgb, var(--accent) 22%, transparent)} #refreshsite:disabled{color:var(--muted);cursor:default;border-color:var(--line);background:transparent} /* `font:14px inherit` was an INVALID shorthand - `inherit` is not a family name, so the whole declaration was dropped and this box has been rendering in the browser's own UI font since the day it was written. Naming the face fixes it. */ .topbar input{font:14px/1.4 var(--font-body);padding:7px 11px 7px 32px; border:1px solid var(--color-neutral-600);border-radius:var(--radius-md);background:var(--bg); color:var(--ink);width:250px} .topbar input::placeholder{color:var(--muted)} /* - the browse menus - `position:fixed` so the strip's `overflow-x:auto` cannot clip them, placed from the trigger's rect by NAV_JS. Hidden until that script says otherwise, so a page with no script has no empty box in it. */ .navmenu{position:fixed;z-index:60;display:none; background:var(--panel);border-radius:var(--radius-md);padding:8px; box-shadow:var(--shadow-md);overflow-y:auto;overscroll-behavior:contain; max-width:min(92vw,680px)} .navmenu.on{display:block} .navmenu-rule{height:1px;margin:0 8px 8px; background:linear-gradient(to right,var(--kc),var(--color-neutral-900) 45%,transparent)} .navmenu-list{display:grid;gap:1px 6px} .navmenu[data-cols="2"] .navmenu-list{grid-template-columns:repeat(2,minmax(0,1fr))} .navmenu[data-cols="3"] .navmenu-list{grid-template-columns:repeat(3,minmax(0,1fr))} .navmenu a{display:flex;align-items:center;gap:8px;padding:5px 8px; border-radius:6px;color:var(--ink);font-size:13.5px;white-space:nowrap} .navmenu a:hover{background:var(--color-neutral-900);color:var(--accent); text-decoration:none} .navmenu a i{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none} /* `minmax(0,1fr)` lets the column be narrower than its content, so without this a long name simply overruns into the next one. */ .navmenu-name{min-width:0;overflow:hidden;text-overflow:ellipsis} .navmenu-type{margin-left:auto;padding-left:14px;font-size:12px;color:var(--muted)} /* THE PLATE FADES OUT at both ends over 48px - the treatment every freestanding rule on this site already uses - so the column reads as a lit surface rather than as a slab with two hard vertical edges cutting through the drawing. `footer` is a SIBLING of `.wrap`, not a child, so it carries the same plate or the column ends in a seam directly above the last paragraph. FULL WIDTH since 2026-10-01 (the owner, after a fandom wiki): the column used to stop at 1360px and leave the ground bare either side of it - 280px a side at 1920, 600 at 2560. It runs edge to edge now and the plate with it, so the 48px fade lands on the screen's own edges and reads as a soft frame. The gutter grows with the screen so that, from about 1600px up, the first word of every line sits on the full plate rather than inside that fade; on a phone it is the 22px it always was. THE SCATTER rides the plate as its top layer - see `_SCATTER` for the instruments and why each is tilted. Plated surfaces only, deliberately: the home page's masthead keeps the open ground, the footer stays a quiet strip under its hairline, and the graph page has no `.wrap` at all. It scrolls WITH the page, never `fixed`: a fixed background forces a repaint of the whole column on every frame of scrolling, and the backline below it is already the part of the room that stays put. */ :root{--gutter:clamp(22px,3vw,64px)} .wrap{padding:26px var(--gutter) 60px} .wrap.plated,.platedblock{ background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='720' viewBox='0 0 720 720'%3E%3Cg opacity='0.09'%3E%3Cg transform='translate(79 31) rotate(33) scale(-2.41667 2.41667) translate(-12 -12)' fill='none' stroke='%23cfd3e5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 2 8 8'/%3E%3Cpath d='m22 2-8 8'/%3E%3Cellipse cx='12' cy='9' rx='10' ry='5'/%3E%3Cpath d='M7 13.4v7.9'/%3E%3Cpath d='M12 14v8'/%3E%3Cpath d='M17 13.4v7.9'/%3E%3Cpath d='M2 9v8a10 5 0 0 0 20 0V9'/%3E%3C/g%3E%3Cg transform='translate(79 751) rotate(33) scale(-2.41667 2.41667) translate(-12 -12)' fill='none' stroke='%23cfd3e5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 2 8 8'/%3E%3Cpath d='m22 2-8 8'/%3E%3Cellipse cx='12' cy='9' rx='10' ry='5'/%3E%3Cpath d='M7 13.4v7.9'/%3E%3Cpath d='M12 14v8'/%3E%3Cpath d='M17 13.4v7.9'/%3E%3Cpath d='M2 9v8a10 5 0 0 0 20 0V9'/%3E%3C/g%3E%3Cg transform='translate(451 47) rotate(25) scale(0.210938 0.210938) translate(-128 -128)' fill='%23cfd3e5'%3E%3Cpath d='M212.92,17.69a8,8,0,0,0-6.86-1.45l-128,32A8,8,0,0,0,72,56V166.08A36,36,0,1,0,88,196V110.25l112-28v51.83A36,36,0,1,0,216,164V24A8,8,0,0,0,212.92,17.69ZM52,216a20,20,0,1,1,20-20A20,20,0,0,1,52,216ZM88,93.75V62.25l112-28v31.5ZM180,184a20,20,0,1,1,20-20A20,20,0,0,1,180,184Z'/%3E%3C/g%3E%3Cg transform='translate(451 767) rotate(25) scale(0.210938 0.210938) translate(-128 -128)' fill='%23cfd3e5'%3E%3Cpath d='M212.92,17.69a8,8,0,0,0-6.86-1.45l-128,32A8,8,0,0,0,72,56V166.08A36,36,0,1,0,88,196V110.25l112-28v51.83A36,36,0,1,0,216,164V24A8,8,0,0,0,212.92,17.69ZM52,216a20,20,0,1,1,20-20A20,20,0,0,1,52,216ZM88,93.75V62.25l112-28v31.5ZM180,184a20,20,0,1,1,20-20A20,20,0,0,1,180,184Z'/%3E%3C/g%3E%3Cg transform='translate(633 70) rotate(21) scale(-2.25 2.25) translate(-12 -12)' fill='none' stroke='%23cfd3e5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='M6 8h4'/%3E%3Cpath d='M14 8h.01'/%3E%3Cpath d='M18 8h.01'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M6 12v4'/%3E%3Cpath d='M10 12v4'/%3E%3Cpath d='M14 12v4'/%3E%3Cpath d='M18 12v4'/%3E%3C/g%3E%3Cg transform='translate(187 169) rotate(-38) scale(2.58333 2.58333) translate(-12 -12)' fill='none' stroke='%23cfd3e5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 12a4.16 4.16 0 0 1 -5.62 3.89a3.78 3.78 0 0 1 -2.38 -3.39a3.42 3.42 0 0 1 2.34 -3.38l3.79 -1.42a2.89 2.89 0 0 0 1.87 -2.7a2 2 0 1 0 -4 0v14a2 2 0 1 1 -4 0'/%3E%3C/g%3E%3Cg transform='translate(451 217) rotate(25) scale(-2.58333 2.58333) translate(-12 -12)' fill='none' stroke='%23cfd3e5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13v4'/%3E%3Cpath d='M14 13v4'/%3E%3Cpath d='M18 13v4'/%3E%3Cpath d='M2 13h20'/%3E%3Cpath d='M22 11.5A3.5 3.5 0 0018.5 8a3.52 3.52 0 01-3.173-2A7 7 0 002 9v10a2 2 0 002 2h16a2 2 0 002-2z'/%3E%3Cpath d='M6 13v4'/%3E%3C/g%3E%3Cg transform='translate(-3 339) rotate(80) scale(-0.210938 0.210938) translate(-128 -128)' fill='%23cfd3e5'%3E%3Cpath d='M249.66,46.34l-40-40a8,8,0,0,0-11.31,11.32L200.69,20,140.52,80.16C117.73,68.3,92.21,69.29,76.75,84.74a42.27,42.27,0,0,0-9.39,14.37A8.24,8.24,0,0,1,59.81,104c-14.59.49-27.26,5.72-36.65,15.11C11.08,131.22,6,148.6,8.74,168.07,11.4,186.7,21.07,205.15,36,220s33.34,24.56,52,27.22A71.13,71.13,0,0,0,98.1,248c15.32,0,28.83-5.23,38.76-15.16,9.39-9.39,14.62-22.06,15.11-36.65a8.24,8.24,0,0,1,4.92-7.55,42.12,42.12,0,0,0,14.37-9.39c15.45-15.46,16.44-41,4.58-63.77L236,55.31l2.34,2.34a8,8,0,1,0,11.32-11.31ZM160,167.93a26.12,26.12,0,0,1-8.95,5.83,24.24,24.24,0,0,0-15,21.89c-.36,10.46-4,19.41-10.43,25.88-8.44,8.43-21,11.95-35.36,9.89C75,229.25,59.73,221.19,47.27,208.73S26.75,181,24.58,165.81c-2-14.37,1.46-26.92,9.89-35.36C40.94,124,49.89,120.37,60.35,120h0a24.22,24.22,0,0,0,21.89-15,26.12,26.12,0,0,1,5.83-9c5.49-5.49,13-8.13,21.38-8.13a49.38,49.38,0,0,1,19.13,4.19L108.5,112.19a32,32,0,1,0,35.31,35.31l20.08-20.08C170.41,142.71,169.47,158.41,160,167.93Zm-10.4-61.48a72.9,72.9,0,0,1,5.93,6.75l-15.42,15.42a32.22,32.22,0,0,0-12.68-12.68l15.42-15.43A73,73,0,0,1,149.55,106.45ZM112,128a16,16,0,0,1,16,16h0a16,16,0,1,1-16-16Zm48.85-32.85a86.94,86.94,0,0,0-6.68-6L176,67.31,188.69,80l-21.83,21.82A86.94,86.94,0,0,0,160.86,95.14ZM200,68.68,187.32,56,212,31.31,224.69,44ZM93.66,194.33a8,8,0,0,1-11.31,11.32l-32-32a8,8,0,0,1,11.32-11.31Z'/%3E%3C/g%3E%3Cg transform='translate(717 339) rotate(80) scale(-0.210938 0.210938) translate(-128 -128)' fill='%23cfd3e5'%3E%3Cpath d='M249.66,46.34l-40-40a8,8,0,0,0-11.31,11.32L200.69,20,140.52,80.16C117.73,68.3,92.21,69.29,76.75,84.74a42.27,42.27,0,0,0-9.39,14.37A8.24,8.24,0,0,1,59.81,104c-14.59.49-27.26,5.72-36.65,15.11C11.08,131.22,6,148.6,8.74,168.07,11.4,186.7,21.07,205.15,36,220s33.34,24.56,52,27.22A71.13,71.13,0,0,0,98.1,248c15.32,0,28.83-5.23,38.76-15.16,9.39-9.39,14.62-22.06,15.11-36.65a8.24,8.24,0,0,1,4.92-7.55,42.12,42.12,0,0,0,14.37-9.39c15.45-15.46,16.44-41,4.58-63.77L236,55.31l2.34,2.34a8,8,0,1,0,11.32-11.31ZM160,167.93a26.12,26.12,0,0,1-8.95,5.83,24.24,24.24,0,0,0-15,21.89c-.36,10.46-4,19.41-10.43,25.88-8.44,8.43-21,11.95-35.36,9.89C75,229.25,59.73,221.19,47.27,208.73S26.75,181,24.58,165.81c-2-14.37,1.46-26.92,9.89-35.36C40.94,124,49.89,120.37,60.35,120h0a24.22,24.22,0,0,0,21.89-15,26.12,26.12,0,0,1,5.83-9c5.49-5.49,13-8.13,21.38-8.13a49.38,49.38,0,0,1,19.13,4.19L108.5,112.19a32,32,0,1,0,35.31,35.31l20.08-20.08C170.41,142.71,169.47,158.41,160,167.93Zm-10.4-61.48a72.9,72.9,0,0,1,5.93,6.75l-15.42,15.42a32.22,32.22,0,0,0-12.68-12.68l15.42-15.43A73,73,0,0,1,149.55,106.45ZM112,128a16,16,0,0,1,16,16h0a16,16,0,1,1-16-16Zm48.85-32.85a86.94,86.94,0,0,0-6.68-6L176,67.31,188.69,80l-21.83,21.82A86.94,86.94,0,0,0,160.86,95.14ZM200,68.68,187.32,56,212,31.31,224.69,44ZM93.66,194.33a8,8,0,0,1-11.31,11.32l-32-32a8,8,0,0,1,11.32-11.31Z'/%3E%3C/g%3E%3Cg transform='translate(331 374) rotate(-25) scale(0.210938 0.210938) translate(-128 -128)' fill='%23cfd3e5'%3E%3Cpath d='M212.92,17.69a8,8,0,0,0-6.86-1.45l-128,32A8,8,0,0,0,72,56V166.08A36,36,0,1,0,88,196V110.25l112-28v51.83A36,36,0,1,0,216,164V24A8,8,0,0,0,212.92,17.69ZM52,216a20,20,0,1,1,20-20A20,20,0,0,1,52,216ZM88,93.75V62.25l112-28v31.5ZM180,184a20,20,0,1,1,20-20A20,20,0,0,1,180,184Z'/%3E%3C/g%3E%3Cg transform='translate(171 392) rotate(22) scale(-0.242188 0.242188) translate(-128 -128)' fill='%23cfd3e5'%3E%3Cpath d='M168,16A72.07,72.07,0,0,0,96,88a73.29,73.29,0,0,0,.63,9.42L27.12,192.22A15.93,15.93,0,0,0,28.71,213L43,227.29a15.93,15.93,0,0,0,20.78,1.59l94.81-69.53A73.29,73.29,0,0,0,168,160a72,72,0,1,0,0-144Zm56,72a55.72,55.72,0,0,1-11.16,33.52L134.49,43.16A56,56,0,0,1,224,88ZM54.32,216,40,201.68,102.14,117A72.37,72.37,0,0,0,139,153.86ZM112,88a55.67,55.67,0,0,1,11.16-33.51l78.34,78.34A56,56,0,0,1,112,88Zm-2.35,58.34a8,8,0,0,1,0,11.31l-8,8a8,8,0,1,1-11.31-11.31l8-8A8,8,0,0,1,109.67,146.33Z'/%3E%3C/g%3E%3Cg transform='translate(546 426) rotate(-33) scale(-2.75 2.75) translate(-12 -12)' fill='none' stroke='%23cfd3e5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='M6 8h4'/%3E%3Cpath d='M14 8h.01'/%3E%3Cpath d='M18 8h.01'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M6 12v4'/%3E%3Cpath d='M10 12v4'/%3E%3Cpath d='M14 12v4'/%3E%3Cpath d='M18 12v4'/%3E%3C/g%3E%3Cg transform='translate(377 534) rotate(-23) scale(2.41667 2.41667) translate(-12 -12)' fill='none' stroke='%23cfd3e5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 2 8 8'/%3E%3Cpath d='m22 2-8 8'/%3E%3Cellipse cx='12' cy='9' rx='10' ry='5'/%3E%3Cpath d='M7 13.4v7.9'/%3E%3Cpath d='M12 14v8'/%3E%3Cpath d='M17 13.4v7.9'/%3E%3Cpath d='M2 9v8a10 5 0 0 0 20 0V9'/%3E%3C/g%3E%3Cg transform='translate(212 554) rotate(81) scale(0.210938 0.210938) translate(-128 -128)' fill='%23cfd3e5'%3E%3Cpath d='M249.66,46.34l-40-40a8,8,0,0,0-11.31,11.32L200.69,20,140.52,80.16C117.73,68.3,92.21,69.29,76.75,84.74a42.27,42.27,0,0,0-9.39,14.37A8.24,8.24,0,0,1,59.81,104c-14.59.49-27.26,5.72-36.65,15.11C11.08,131.22,6,148.6,8.74,168.07,11.4,186.7,21.07,205.15,36,220s33.34,24.56,52,27.22A71.13,71.13,0,0,0,98.1,248c15.32,0,28.83-5.23,38.76-15.16,9.39-9.39,14.62-22.06,15.11-36.65a8.24,8.24,0,0,1,4.92-7.55,42.12,42.12,0,0,0,14.37-9.39c15.45-15.46,16.44-41,4.58-63.77L236,55.31l2.34,2.34a8,8,0,1,0,11.32-11.31ZM160,167.93a26.12,26.12,0,0,1-8.95,5.83,24.24,24.24,0,0,0-15,21.89c-.36,10.46-4,19.41-10.43,25.88-8.44,8.43-21,11.95-35.36,9.89C75,229.25,59.73,221.19,47.27,208.73S26.75,181,24.58,165.81c-2-14.37,1.46-26.92,9.89-35.36C40.94,124,49.89,120.37,60.35,120h0a24.22,24.22,0,0,0,21.89-15,26.12,26.12,0,0,1,5.83-9c5.49-5.49,13-8.13,21.38-8.13a49.38,49.38,0,0,1,19.13,4.19L108.5,112.19a32,32,0,1,0,35.31,35.31l20.08-20.08C170.41,142.71,169.47,158.41,160,167.93Zm-10.4-61.48a72.9,72.9,0,0,1,5.93,6.75l-15.42,15.42a32.22,32.22,0,0,0-12.68-12.68l15.42-15.43A73,73,0,0,1,149.55,106.45ZM112,128a16,16,0,0,1,16,16h0a16,16,0,1,1-16-16Zm48.85-32.85a86.94,86.94,0,0,0-6.68-6L176,67.31,188.69,80l-21.83,21.82A86.94,86.94,0,0,0,160.86,95.14ZM200,68.68,187.32,56,212,31.31,224.69,44ZM93.66,194.33a8,8,0,0,1-11.31,11.32l-32-32a8,8,0,0,1,11.32-11.31Z'/%3E%3C/g%3E%3Cg transform='translate(537 602) rotate(-34) scale(2.58333 2.58333) translate(-12 -12)' fill='none' stroke='%23cfd3e5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 12a4.16 4.16 0 0 1 -5.62 3.89a3.78 3.78 0 0 1 -2.38 -3.39a3.42 3.42 0 0 1 2.34 -3.38l3.79 -1.42a2.89 2.89 0 0 0 1.87 -2.7a2 2 0 1 0 -4 0v14a2 2 0 1 1 -4 0'/%3E%3C/g%3E%3Cg transform='translate(9 603) rotate(28) scale(-2.58333 2.58333) translate(-12 -12)' fill='none' stroke='%23cfd3e5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13v4'/%3E%3Cpath d='M14 13v4'/%3E%3Cpath d='M18 13v4'/%3E%3Cpath d='M2 13h20'/%3E%3Cpath d='M22 11.5A3.5 3.5 0 0018.5 8a3.52 3.52 0 01-3.173-2A7 7 0 002 9v10a2 2 0 002 2h16a2 2 0 002-2z'/%3E%3Cpath d='M6 13v4'/%3E%3C/g%3E%3Cg transform='translate(729 603) rotate(28) scale(-2.58333 2.58333) translate(-12 -12)' fill='none' stroke='%23cfd3e5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13v4'/%3E%3Cpath d='M14 13v4'/%3E%3Cpath d='M18 13v4'/%3E%3Cpath d='M2 13h20'/%3E%3Cpath d='M22 11.5A3.5 3.5 0 0018.5 8a3.52 3.52 0 01-3.173-2A7 7 0 002 9v10a2 2 0 002 2h16a2 2 0 002-2z'/%3E%3Cpath d='M6 13v4'/%3E%3C/g%3E%3Cg transform='translate(313 -36) rotate(-11) scale(0.210938 0.210938) translate(-128 -128)' fill='%23cfd3e5'%3E%3Cpath d='M168,16A72.07,72.07,0,0,0,96,88a73.29,73.29,0,0,0,.63,9.42L27.12,192.22A15.93,15.93,0,0,0,28.71,213L43,227.29a15.93,15.93,0,0,0,20.78,1.59l94.81-69.53A73.29,73.29,0,0,0,168,160a72,72,0,1,0,0-144Zm56,72a55.72,55.72,0,0,1-11.16,33.52L134.49,43.16A56,56,0,0,1,224,88ZM54.32,216,40,201.68,102.14,117A72.37,72.37,0,0,0,139,153.86ZM112,88a55.67,55.67,0,0,1,11.16-33.51l78.34,78.34A56,56,0,0,1,112,88Zm-2.35,58.34a8,8,0,0,1,0,11.31l-8,8a8,8,0,1,1-11.31-11.31l8-8A8,8,0,0,1,109.67,146.33Z'/%3E%3C/g%3E%3Cg transform='translate(313 684) rotate(-11) scale(0.210938 0.210938) translate(-128 -128)' fill='%23cfd3e5'%3E%3Cpath d='M168,16A72.07,72.07,0,0,0,96,88a73.29,73.29,0,0,0,.63,9.42L27.12,192.22A15.93,15.93,0,0,0,28.71,213L43,227.29a15.93,15.93,0,0,0,20.78,1.59l94.81-69.53A73.29,73.29,0,0,0,168,160a72,72,0,1,0,0-144Zm56,72a55.72,55.72,0,0,1-11.16,33.52L134.49,43.16A56,56,0,0,1,224,88ZM54.32,216,40,201.68,102.14,117A72.37,72.37,0,0,0,139,153.86ZM112,88a55.67,55.67,0,0,1,11.16-33.51l78.34,78.34A56,56,0,0,1,112,88Zm-2.35,58.34a8,8,0,0,1,0,11.31l-8,8a8,8,0,1,1-11.31-11.31l8-8A8,8,0,0,1,109.67,146.33Z'/%3E%3C/g%3E%3Cg transform='translate(223 37) rotate(-27) scale(0.125 0.125) translate(-128 -128)' fill='%23cfd3e5'%3E%3Cpath d='M212.92,17.69a8,8,0,0,0-6.86-1.45l-128,32A8,8,0,0,0,72,56V166.08A36,36,0,1,0,88,196V110.25l112-28v51.83A36,36,0,1,0,216,164V24A8,8,0,0,0,212.92,17.69ZM52,216a20,20,0,1,1,20-20A20,20,0,0,1,52,216ZM88,93.75V62.25l112-28v31.5ZM180,184a20,20,0,1,1,20-20A20,20,0,0,1,180,184Z'/%3E%3C/g%3E%3Cg transform='translate(368 123) rotate(34) scale(0.125 0.125) translate(-128 -128)' fill='%23cfd3e5'%3E%3Cpath d='M212.92,17.69a8,8,0,0,0-6.86-1.45l-128,32A8,8,0,0,0,72,56V166.08A36,36,0,1,0,88,196V110.25l112-28v51.83A36,36,0,1,0,216,164V24A8,8,0,0,0,212.92,17.69ZM52,216a20,20,0,1,1,20-20A20,20,0,0,1,52,216ZM88,93.75V62.25l112-28v31.5ZM180,184a20,20,0,1,1,20-20A20,20,0,0,1,180,184Z'/%3E%3C/g%3E%3Cg transform='translate(578 173) rotate(-39) scale(0.125 0.125) translate(-128 -128)' fill='%23cfd3e5'%3E%3Cpath d='M212.92,17.69a8,8,0,0,0-6.86-1.45l-128,32A8,8,0,0,0,72,56V166.08A36,36,0,1,0,88,196V110.25l112-28v51.83A36,36,0,1,0,216,164V24A8,8,0,0,0,212.92,17.69ZM52,216a20,20,0,1,1,20-20A20,20,0,0,1,52,216ZM88,93.75V62.25l112-28v31.5ZM180,184a20,20,0,1,1,20-20A20,20,0,0,1,180,184Z'/%3E%3C/g%3E%3Cg transform='translate(354 248) rotate(-24) scale(-1.08333 1.08333) translate(-12 -12)' fill='none' stroke='%23cfd3e5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 18.5c2 -2.5 4 -6.5 4 -10.5c0 -2.946 -2.084 -4.157 -4.204 -4.654c-.864 -.23 -2.13 -.346 -3.796 -.346c-1.667 0 -2.932 .115 -3.796 .346c-2.12 .497 -4.204 1.708 -4.204 4.654c0 3.312 2 8 4 10.5c.297 .37 .618 .731 .963 1.081l.354 .347a3.9 3.9 0 0 0 5.364 0a14.05 14.05 0 0 0 1.319 -1.428'/%3E%3C/g%3E%3Cg transform='translate(128 292) rotate(99) scale(1.08333 1.08333) translate(-12 -12)' fill='none' stroke='%23cfd3e5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 18.5c2 -2.5 4 -6.5 4 -10.5c0 -2.946 -2.084 -4.157 -4.204 -4.654c-.864 -.23 -2.13 -.346 -3.796 -.346c-1.667 0 -2.932 .115 -3.796 .346c-2.12 .497 -4.204 1.708 -4.204 4.654c0 3.312 2 8 4 10.5c.297 .37 .618 .731 .963 1.081l.354 .347a3.9 3.9 0 0 0 5.364 0a14.05 14.05 0 0 0 1.319 -1.428'/%3E%3C/g%3E%3Cg transform='translate(653 433) rotate(-98) scale(-1.25 1.25) translate(-12 -12)' fill='none' stroke='%23cfd3e5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 18.5c2 -2.5 4 -6.5 4 -10.5c0 -2.946 -2.084 -4.157 -4.204 -4.654c-.864 -.23 -2.13 -.346 -3.796 -.346c-1.667 0 -2.932 .115 -3.796 .346c-2.12 .497 -4.204 1.708 -4.204 4.654c0 3.312 2 8 4 10.5c.297 .37 .618 .731 .963 1.081l.354 .347a3.9 3.9 0 0 0 5.364 0a14.05 14.05 0 0 0 1.319 -1.428'/%3E%3C/g%3E%3Cg transform='translate(253 450) rotate(99) scale(-1.16667 1.16667) translate(-12 -12)' fill='none' stroke='%23cfd3e5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 18.5c2 -2.5 4 -6.5 4 -10.5c0 -2.946 -2.084 -4.157 -4.204 -4.654c-.864 -.23 -2.13 -.346 -3.796 -.346c-1.667 0 -2.932 .115 -3.796 .346c-2.12 .497 -4.204 1.708 -4.204 4.654c0 3.312 2 8 4 10.5c.297 .37 .618 .731 .963 1.081l.354 .347a3.9 3.9 0 0 0 5.364 0a14.05 14.05 0 0 0 1.319 -1.428'/%3E%3C/g%3E%3Cg transform='translate(49 495) rotate(35) scale(0.125 0.125) translate(-128 -128)' fill='%23cfd3e5'%3E%3Cpath d='M212.92,17.69a8,8,0,0,0-6.86-1.45l-128,32A8,8,0,0,0,72,56V166.08A36,36,0,1,0,88,196V110.25l112-28v51.83A36,36,0,1,0,216,164V24A8,8,0,0,0,212.92,17.69ZM52,216a20,20,0,1,1,20-20A20,20,0,0,1,52,216ZM88,93.75V62.25l112-28v31.5ZM180,184a20,20,0,1,1,20-20A20,20,0,0,1,180,184Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0/720px 720px repeat, linear-gradient(to right,transparent,var(--plate) 48px,var(--plate) calc(100% - 48px),transparent)} /* The home page plates a BLOCK rather than the column, because its banner paints its own black ground and a plate under it would only show at the edges. The block bleeds back out through `.wrap`'s side padding so its plate is the same width as every other page's, and down through the bottom padding so it meets the footer's plate with no seam. `padding-top` is what stops the plate's top edge landing exactly on the heading's cap; the heading then drops its own collapsing top margin. */ .platedblock{margin:0 calc(-1 * var(--gutter)) -60px;padding:22px var(--gutter) 60px} .platedblock>h2:first-child{margin-top:0} /* Four children in ONE document order that is already correct on a phone - title, infobox, prose, the rest - and explicit grid placement that rebuilds the two-column desktop look on top of it. The order is the DOM's, deliberately: no `order`, no `display:contents`. An earlier cut reordered a collapsed grid with those two, which works but fails INVISIBLY on any browser that does not implement them - the aside quietly stays where it sits in the markup, which is last, which is the exact bug this is fixing. Placement can degrade; document order cannot. If every rule below is dropped on the floor, a phone still reads title -> photo -> article. `row-gap:0` because the cards and headings carry their own margins. GRID ROWS ARE SHARED ACROSS COLUMNS, and that is the whole difficulty. With `.infocol` sitting in row 1 by itself, row 1 became as TALL AS THE INFOBOX - and `article`, starting at row 2, began below it. Measured on a band page: a 602px infobox, a 70px title, and 532px of nothing under the heading before a word of prose. True from the day this grid was written, and only obvious once press shots made the infobox taller than a landscape Commons photo had. Two columns cannot flow independently while a grid decides their rows, so the right-hand one is ONE item: `