/* =================================================================== MANON'S BATTLE ATLAS — PROTOTYPE One stylesheet for every page. This is the file that becomes the real one, so the rules live here rather than in the markup: TYPE page H1 = Booton 800 · item/list headers = 600 short names + numerals = 800 · reading = Bureau Serif 300 one pull quote per article = Booton 200 every label = Bureau Semi Mono, uppercase, tracked Walkout is never set — it only arrives on rollover COLOUR ground is paper, bone or a pillar tint. Blue is a fact plate. Lilac is a sheet you opened, and the Register's ground. Pink is contested. Orange is the ask. Neon marks today, behind a few words, never as a field. RADIUS 4px on tiles, cards and picture blocks · pills on every control · 26px on a raised sheet =================================================================== */ @font-face{font-family:"Booton";src:url("/total-battle/fonts/web/BootonUprightsVF.woff2") format("woff2-variations");font-weight:100 900;font-style:normal;font-display:swap} @font-face{font-family:"Booton";src:url("/total-battle/fonts/web/BootonItalicsVF.woff2") format("woff2-variations");font-weight:100 900;font-style:italic;font-display:swap} @font-face{font-family:"BureauSerif";src:url("/total-battle/fonts/web/STKBureauSerifVariableComplete.woff2") format("woff2-variations");font-weight:150 700;font-style:normal;font-display:swap} @font-face{font-family:"BureauMono";src:url("/total-battle/fonts/web/BureauSemiMono-Medium.woff2") format("woff2");font-weight:500;font-display:swap} @font-face{font-family:"BureauMono";src:url("/total-battle/fonts/web/BureauSemiMono-Book.woff2") format("woff2");font-weight:400;font-display:swap} @font-face{font-family:"Walkout";src:url("/total-battle/fonts/web/TAYWalkout.woff2") format("woff2");font-weight:400;font-display:swap} :root{ --ink:#111110; --ink-2:#2e2e2a; --grey:#6b6b62; --grey-2:#9d9d93; --paper:#fff; --bone:#f4f1e9; --sand:#e6e0d3; --rule:#dedacf; --charcoal:#1c1c1a; --blue:#1b23ff; --acid:#e6ff2e; --lilac:#cec5ff; --pink:#ffbcec; --flare:#ff4a17; --neon:#47ffb6; /* Target met. Sits with lilac and pink as a soft tone rather than competing with acid, which is the loud one. Far enough round the wheel from acid's yellow-green (hue 67 against 129) that the two never read as the same signal, even though both are green-ish. */ --jade:#82f894; --r:4px; --r-pill:999px; --r-sheet:26px; --ph-line:rgba(17,17,16,.28); --sans:"Booton",-apple-system,Helvetica,Arial,sans-serif; --mono:"BureauMono",ui-monospace,Menlo,monospace; --serif:"BureauSerif",Georgia,serif; --script:"Walkout","Booton",sans-serif; --nav-h:66px; /* The footer rides the bottom of the window, so the window is not the space a sticky pane actually has. Everything that sizes itself to the viewport subtracts this too, or its last rows sit under the footer for the whole of the scroll. Measured at 49px (16px padding, 10px mono line, 1.4px rule) and re-measured in proto.js, since the copy wraps to two lines on a narrow window. */ --foot-h:49px; /* The kingdom band, where there is one. Zero everywhere else, so the offsets below are the same arithmetic on every page. Measured in proto.js, because the band wraps to two lines on a phone. */ --kband-h:0px; /* The bottom edge of whatever is pinned to the top of the window. Everything that sticks hangs off this rather than off --nav-h, or it slides under the band on the kingdom pages. */ --top-h:calc(var(--nav-h) + var(--kband-h)); /* The measure a long read is set to. Past this the column stops growing and the extra width goes to the sources rail instead. */ --read-max:960px; --view-h:calc(100dvh - var(--top-h) - var(--foot-h)); /* motion — one soft curve, one with a little overshoot, and two speeds */ --ease:cubic-bezier(.22,.8,.24,1); --ease-spring:cubic-bezier(.22,1.15,.36,1); --dur:.42s; --dur-slow:.62s; --dur-fast:.22s; } *{box-sizing:border-box} html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth; /* an anchor jump lands clear of both bars, not tucked under them */ scroll-padding-top:var(--top-h);scroll-padding-bottom:var(--foot-h)} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.5} a{color:inherit;text-decoration:none} /* ---------- type ---------- */ .h1{font-size:clamp(38px,4.6vw,58px);font-weight:800;letter-spacing:-.036em;line-height:1.02;margin:0} .h2{font-size:clamp(24px,2.4vw,32px);font-weight:600;letter-spacing:-.024em;line-height:1.12;margin:0} .h3{font-size:21px;font-weight:600;letter-spacing:-.02em;line-height:1.18;margin:0} .lede{font-family:var(--serif);font-weight:300;font-size:clamp(17px,1.5vw,21px);line-height:1.45;margin:0} .body{font-family:var(--serif);font-weight:300;font-size:17px;line-height:1.55;margin:0} .quote{font-size:clamp(30px,3.4vw,42px);font-weight:200;letter-spacing:-.024em;line-height:1.16;margin:0} .mono{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.15em;text-transform:uppercase} /* The Atlas never sets the serif in capitals. .mono carries both the face and the capitals, but at one class it loses the face to any container that styles its own paragraphs — ".entry-body p" is two classes and was winning, which left "Written up in" as uppercase serif. The guard is a real selector rather than !important: :root costs a class, so this lands at two and holds the face wherever a label is dropped into body copy. */ :root p.mono,:root li.mono,:root span.mono,:root div.mono {font-family:var(--mono);font-size:10px;letter-spacing:.15em} :root p.mono-s,:root span.mono-s,:root div.mono-s {font-family:var(--mono);font-size:9px;letter-spacing:.13em} .mono-s{font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.13em;text-transform:uppercase} .num{font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1} .grey{color:var(--grey)} .mk{background:var(--acid);box-decoration-break:clone;padding:0 3px} /* ---------- chrome ---------- */ .nav{position:sticky;top:0;z-index:50;background:var(--charcoal);color:var(--bone);display:flex;align-items:center;gap:26px;padding:0 clamp(16px,3vw,40px);height:var(--nav-h)} /* The wordmark is a block, not a line of text: full bar height, and it runs out to the left edge of the window. That block is the zone the drawing answers to, so it wants a real area rather than the exact outline of the letters. */ .nav .mark{font-family:var(--script);font-size:30px;letter-spacing:.02em; white-space:nowrap;line-height:1; display:inline-flex;align-items:center;height:100%; margin-left:calc(-1 * clamp(16px,3vw,40px)); padding-left:clamp(16px,3vw,40px);padding-right:24px} .nav-links{position:relative;display:flex;gap:6px;font-family:var(--mono);font-size:11px;font-weight:500; letter-spacing:.13em;text-transform:uppercase;color:rgba(244,241,233,.6);margin-left:auto} .nav-links a{position:relative;z-index:1;display:inline-flex;align-items:center;line-height:1; padding:8px 11px 8px;border-radius:var(--r-pill)} .nav-links a:hover{color:var(--ink)} /* whatever the pill is sitting under takes ink, always — the pill and the colour are set together so the label can never be light-on-acid */ .nav-links a.lit{color:var(--ink)} .nav-pill{position:absolute;top:50%;left:0;height:26px;margin-top:-13px;border-radius:var(--r-pill); background:var(--acid);z-index:0;opacity:0; transition:transform .42s cubic-bezier(.34,1.42,.5,1),width .42s cubic-bezier(.34,1.42,.5,1),opacity .2s var(--ease)} .nav-pill.ready{opacity:1} @media (prefers-reduced-motion:reduce){.nav-pill{transition:opacity .2s linear}} .nav-search{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;border:1px solid rgba(244,241,233,.45);border-radius:var(--r-pill);padding:9px 16px;color:var(--bone);white-space:nowrap;cursor:pointer;transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)} .nav-search:hover{border-color:var(--acid);color:var(--acid)} /* The glyph carried the whole control at 11px and read as punctuation. A drawn magnifier at 15px reads as a button. */ .nav-search svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round} /* Sign in sits at the end of the bar, quieter than the search beside it — it is the thing you need once, not constantly. */ /* The bar is a fixed set of things in a shrinking space, and between the desktop layout and the 900px burger it simply ran out — at 1280px it wanted 1536px, so the search control was clipped mid-word and Sign in was pushed off the edge entirely. The widths below are measured, not guessed. Whole bar: 1510px. Without "the Atlas": 1433px. Icon only, with the gaps and link padding tightened: about 1250px. Each rule starts just above the width its own layout needs. The search gives way first, because it is the one control whose meaning survives being shortened — a magnifier says what it does on its own. The links are the last thing to go, at 900px, to the burger. */ @media(max-width:1520px){ .nav-search .ns-more{display:none} } @media(max-width:1440px){ .nav{gap:18px} .nav-search .ns-word{display:none} .nav-search{padding:9px 11px;gap:0} .nav-links{gap:2px} .nav-links a{padding-left:8px;padding-right:8px} } @media(max-width:1120px){ .nav{gap:14px} .nav .mark{font-size:24px} .nav-links{font-size:9.5px;letter-spacing:.07em} .nav-links a{padding-left:5px;padding-right:5px} } /* The last stretch before the burger. Nine links at 9.5px will not compress further and stay tappable, so the wordmark gives way instead — which is what the 900px rule below already says the mark is for. */ @media(max-width:1010px){ .nav{gap:10px} .nav .mark{font-size:20px} } .nav-who{flex:none;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:rgba(244,241,233,.62);white-space:nowrap;transition:color var(--dur-fast) var(--ease)} .nav-who:hover{color:var(--acid)} .nav-burger{display:none;margin-left:auto;width:34px;height:34px;border:1px solid rgba(244,241,233,.45);border-radius:50%;place-items:center} .strip{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:12px clamp(16px,3vw,40px);border-bottom:1px solid var(--rule);flex-wrap:wrap} .foot{border-top:1px solid var(--rule);padding:16px clamp(16px,3vw,40px);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--grey-2)} /* page shells */ .page{min-height:100dvh;display:flex;flex-direction:column} /* The desk is a fixed frame rather than a scrolling document: the masthead column and the rail each own their scroll, so a wheel over the rail moves the rail and nothing else. Every other page scrolls normally. */ .page--frame{height:100dvh;overflow:hidden} .page--frame .cols{flex:1;min-height:0} .page--frame .cols > *{min-height:0} .page--frame .deskmain{overflow-y:auto;display:flex;flex-direction:column} .page--frame .rail-scroll{position:static;height:100%;max-height:none} /* the divider is painted on the grid, not the rail, so it runs the full height of the window even when the rail is short or sticky */ .cols{flex:1;display:grid;grid-template-columns:300px minmax(0,1fr) 340px; min-height:calc(100dvh - var(--nav-h)); background-image:linear-gradient(var(--rule),var(--rule)); background-size:1px 100%;background-position:300px 0;background-repeat:no-repeat} .cols--2{grid-template-columns:300px minmax(0,1fr);background-position:300px 0} /* the rail-right layouts draw their own edge on the aside, so the grid divider is switched off for them */ .cols--rail{grid-template-columns:minmax(0,1fr) 420px;background-image:none} /* What you have and what you are hitting are both questions you answer, so they sit together; the stack is the answer and gets the room. Input on one side, output on the other, rather than the answer wedged between them. */ /* Both figures are the same measurement, so it is stated once — they drifted apart the last time one of them changed and the divider stopped landing on the column edge. */ :root{--sb-inputs-w:620px} .cols--inputs{grid-template-columns:minmax(0,var(--sb-inputs-w)) minmax(0,1fr); background-image:linear-gradient(var(--rule),var(--rule)); background-size:1px 100%;background-position:var(--sb-inputs-w) 0;background-repeat:no-repeat} .sb-inputs{display:grid;grid-template-columns:1fr 1fr; background-image:linear-gradient(var(--rule),var(--rule)); background-size:1px 100%;background-position:50% 0;background-repeat:no-repeat} /* Each rail scrolls on its own. The left one runs to twenty-six troop lines plus monsters, mercenaries, the dragon and the command, which is far longer than the stack beside it — tying them together meant scrolling past the whole army to reach the answer. This was tried before and reverted, because a scroller clips an absolutely positioned dropdown the moment it opens. The menus are pinned to the viewport now instead of to their wrapper, so there is nothing left to clip. */ .sb-rail,.sb-side{padding:24px 24px;min-width:0;display:flex;flex-direction:column;gap:10px; position:sticky;top:var(--top-h);max-height:var(--view-h);overflow-y:auto; overscroll-behavior:contain;scrollbar-width:thin} @media(max-width:1080px){ .sb-rail,.sb-side{position:static;max-height:none;overflow:visible} } @media(max-width:1080px){ .cols--inputs{grid-template-columns:1fr;background-image:none} .sb-inputs{border-bottom:1px solid var(--rule)} } @media(max-width:680px){ .sb-inputs{grid-template-columns:1fr;background-image:none} .sb-rail{border-bottom:1px solid var(--rule)} } /* The rail opens on the same line as the column beside it. .main sets 30px and the rail set 26, which read as the outline sagging under the page. */ .rail-l{padding:30px 24px 26px;display:flex;flex-direction:column;gap:11px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)} .rail-l b{color:var(--ink);font-weight:500} /* Nothing bold in a left rail goes past 500. Heavier reads as a second headline competing with the page's own. Said once here, covering every element that could carry bold, rather than left to each page to remember. Lighter text is not touched. */ .rail-l b,.rail-l strong,.rail-l h1,.rail-l h2,.rail-l h3,.rail-l h4, .rail-l .idx-view,.rail-l a.on,.rail-l a.here,.rail-l .sub.here{font-weight:500} .rail-l a{display:flex;justify-content:space-between;gap:10px} .rail-l a:hover{color:var(--ink)} .rail-l a.on{color:var(--ink);border-left:3px solid var(--ink);padding-left:10px} .main{min-width:0;padding:30px clamp(16px,3vw,44px) 44px} .side{border-left:1px solid var(--rule);padding:26px 24px} /* ---------- controls ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; color:var(--paper);border-radius:var(--r-pill);padding:13px 20px; font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;cursor:pointer; /* the wipe is a background layer, so it can never paint over the label */ background-color:var(--ink); background-image:linear-gradient(var(--blue),var(--blue)); background-repeat:no-repeat;background-position:left center;background-size:0% 100%; transition:background-size .46s cubic-bezier(.34,1.4,.5,1),color .18s var(--ease),border-color .18s var(--ease)} .btn:hover{background-size:100% 100%;color:#fff} .btn--ghost{background-color:transparent;color:var(--ink);border:1px solid currentColor} .btn--ghost:hover{color:#fff;border-color:var(--blue)} @media (prefers-reduced-motion:reduce){.btn{transition:color .18s linear}.btn:hover{background-size:100% 100%}} .pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;padding:7px 12px;border-radius:var(--r-pill);border:1px solid var(--rule);color:var(--grey);white-space:nowrap} .pill--on{background:var(--ink);color:var(--paper);border-color:var(--ink)} .pill--pink{background:var(--pink);border-color:var(--pink);color:var(--ink)} .glyph{width:32px;height:32px;border-radius:50%;border:1.1px solid currentColor;display:grid;place-items:center;font-size:13px;flex:none} /* ---------- plates, sheets, tiles ---------- */ .plate-blue{background:var(--blue);color:#fff;padding:20px 22px 22px;border-radius:var(--r)} .plate-blue .num{font-size:clamp(44px,5vw,62px);margin:8px 0 0} .ask{background:var(--flare);color:#fff;padding:16px 18px;border-radius:var(--r)} .tile{position:relative;border-radius:var(--r);padding:20px 22px 22px;background:var(--tile,var(--paper));display:flex;flex-direction:column;overflow:hidden;transition:transform .4s cubic-bezier(.2,.75,.2,1),box-shadow .4s cubic-bezier(.2,.75,.2,1);will-change:transform} .tile:hover{box-shadow:0 16px 30px -22px rgba(0,0,0,.5)} .tile .eyebrow{font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:rgba(17,17,16,.6);margin:0} .tile h3{margin:12px 0 0;font-size:24px;font-weight:800;letter-spacing:-.03em;line-height:1.06} .tile p{margin:11px 0 0;font-size:14px;line-height:1.5;color:rgba(17,17,16,.78)} /* a tile filled with the same colour as the surface under it needs an edge, or it reads as a hole rather than an object */ .tile--outline{border:1px solid var(--rule)} .tile .cta{align-self:flex-start;margin-top:16px;border-radius:var(--r-pill);padding:9px 14px;font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;background:var(--tile-cta,var(--paper))} .ev{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:transparent;margin-top:22px} .ev > div{background:transparent;padding:0 14px 0 0} .ev > div + div{border-left:1px solid rgba(17,17,16,.2);padding-left:16px} .ev b{display:block;font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1} .ev span{display:block;font-family:var(--mono);font-size:8.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;opacity:.62;margin-top:7px} /* ---------- placeholders ---------- */ .ph{position:relative;background:var(--paper);overflow:hidden;border-radius:var(--r)} .ph::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,var(--ph-line) 0 1.5px,transparent 1.5px 10px)} .ph--dot::before{background-image:radial-gradient(var(--ph-line) 1.3px,transparent 1.4px);background-size:11px 11px} .ph--coarse::before{background-image:repeating-linear-gradient(45deg,var(--ph-line) 0 3px,transparent 3px 22px)} /* ---------- list rows ---------- */ .rows{border-top:1.4px solid var(--ink)} .row{display:grid;grid-template-columns:1fr 66px;gap:18px;align-items:center;padding:16px clamp(16px,2vw,26px);border-bottom:1px solid var(--rule)} .row:hover{background:rgba(17,17,16,.035)} .row h3{margin:0;font-size:clamp(20px,2vw,24px);font-weight:600;letter-spacing:-.024em;line-height:1.1} .row .meta{display:flex;justify-content:space-between;gap:12px;margin-top:8px;font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)} .row .ph{width:66px;height:66px} .row--on{background:rgba(255,255,255,.5)} /* status + category marks */ .dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none;background:var(--ink)} .st{font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--grey-2);white-space:nowrap} .st--cont{color:var(--ink);background:var(--pink);padding:3px 8px;border-radius:var(--r-pill)} /* the category key — brighter, and still distinct at 9px on white */ .cat-mechanic{background:#111110} /* ink stays the anchor */ .cat-gem{background:#7b5cff} /* violet */ .cat-captain{background:#ff4fa3} /* hot pink */ .cat-troop{background:#ff8a00} /* amber-orange, clear of the flare */ .cat-building{background:#00c07a} /* green */ .cat-event{background:var(--acid)} /* the neon we already use */ .cat-resource{background:var(--blue)} /* the blue we already use */ .cat-hero{background:#f2b705} /* gold — one hero, one gold */ .cat-monster{background:#b0431f} /* rust, clear of the conflict red */ .cat-equipment{background:#0f8a8a} /* teal */ .cat-material{background:#8a6a3d} /* bronze — the raw stuff */ .cat-enchantment{background:#b45cff} /* violet's lighter sibling: gems enchant */ .cat-other{background:#b6b6ab} /* Each category has a ground as well as a mark. The ground is the dot's hue pulled back to the lilac's weight, so a panel never shouts; the dot stays saturated and does the identifying. */ :root{ --tint-mechanic:#e8e6e0; --tint-gem:#d0c5ff; --tint-captain:#ffc5e1; --tint-troop:#ffe4c5; --tint-building:#c5ffea; --tint-event:#f8ffc5; --tint-resource:#c5e0ff; --tint-hero:#fef0c6; --tint-monster:#f6d8ce; --tint-equipment:#cbf9f9; --tint-material:#ede4d7; --tint-enchantment:#e4c5ff; --tint-other:#efeee9; } .tint-mechanic{background:var(--tint-mechanic)} .tint-gem{background:var(--tint-gem)} .tint-captain{background:var(--tint-captain)} .tint-troop{background:var(--tint-troop)} .tint-building{background:var(--tint-building)} .tint-event{background:var(--tint-event)} .tint-resource{background:var(--tint-resource)} .tint-hero{background:var(--tint-hero)} .tint-monster{background:var(--tint-monster)} .tint-equipment{background:var(--tint-equipment)} .tint-material{background:var(--tint-material)} .tint-enchantment{background:var(--tint-enchantment)} .tint-other{background:var(--tint-other)} /* ---------- the Walkout rollover ---------- */ .morph{position:relative;display:inline-block;white-space:nowrap} .morph > span{display:block} /* The wipe runs first word to last on the way in and unwinds last to first on the way out, so a headline reads as one movement across the line rather than eight separate flips. The article headlines were already set this way; this is the same timing for the rest. */ .morph .m-sans{transition:clip-path .34s cubic-bezier(.66,0,.2,1) calc((var(--n,1) - 1 - var(--i,0)) * .16s)} .morph .m-walk{position:absolute;left:0;top:0;width:max-content;font-family:var(--script);text-transform:uppercase;font-weight:400;letter-spacing:.005em;transform-origin:left center;clip-path:inset(0 100% 0 0);transition:clip-path .34s cubic-bezier(.66,0,.2,1) calc((var(--n,1) - 1 - var(--i,0)) * .16s)} .morph::after{content:"";position:absolute;top:-.06em;bottom:-.06em;left:0;width:2px;background:var(--blue);transform:scaleY(0);transform-origin:bottom;transition:transform .2s ease,left .55s cubic-bezier(.66,0,.2,1)} .morph-group:hover .m-sans,.morph-group:hover .m-walk, .morph.is-on .m-sans,.morph.is-on .m-walk{ transition-delay:calc(var(--i,0) * .16s)} .morph-group:hover .m-sans,.morph.is-on .m-sans{clip-path:inset(0 0 0 100%)} .morph-group:hover .m-walk,.morph.is-on .m-walk{clip-path:inset(0 0 0 0)} .morph-group:hover .morph::after,.morph.is-on::after{transform:scaleY(1);left:100%} /* one edge for the whole headline, at the end of the sweep */ .morph-group--multi .morph::after{display:none} .morph-group--multi .morph--last::after{display:block} @media (prefers-reduced-motion:reduce){.morph .m-sans,.morph .m-walk,.morph::after{transition:none}} /* The phone's menu: nine destinations, a way to search, and a way in. Rows are 52px so a thumb hits one on purpose. */ .mega-list{display:flex;flex-direction:column;padding:8px 0 20px} .mega-row{display:flex;align-items:stretch;border-bottom:1px solid var(--rule)} /* ".mega a" is declared later and matches at the same weight, so the menu's own rows have to be said through .mega to keep their type — otherwise they inherit the panel's 16px/600 and read as headlines rather than a list. */ .mega .mega-list a,.mega .mega-list-search{ display:flex;align-items:center;gap:12px;min-height:52px;padding:0 20px; font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.1em; text-transform:none;line-height:1.2;color:var(--ink); background:none;border:0;width:100%;text-align:left;cursor:pointer} .mega .mega-list a{flex:1;min-width:0} .mega .mega-list-search{border-bottom:1px solid var(--rule);color:var(--grey);font-size:12px} .mega .mega-list a.on{color:var(--blue)} .mega-list-search svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor; stroke-width:1.8;stroke-linecap:round} .mega .mega-list a.mega-list-who{color:var(--grey);font-size:11px} .mega-list .mega-list-who{border-top:1px solid var(--rule);margin-top:6px} /* The arrow is its own target beside the name: the name goes to the section, the arrow opens what is inside it. */ .mega-more{flex:0 0 56px;display:grid;place-items:center;background:none;border:0; border-left:1px solid var(--rule);color:var(--grey);cursor:pointer;padding:0} .mega-more svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round; transition:transform var(--dur-fast) var(--ease)} .mega-more.open{color:var(--ink)} .mega-more.open svg{transform:rotate(90deg)} .mega-sub{padding:10px 20px 16px;background:var(--bone); border-bottom:1px solid var(--rule)} .mega .mega-sub a{display:block;min-height:0;padding:9px 0;font-family:var(--sans); font-size:14px;font-weight:500;letter-spacing:-.01em;text-transform:none; color:var(--ink-2);width:auto} .mega .mega-sub a:hover{color:var(--blue)} .mega-sub span{display:block;font-family:var(--mono);font-size:8.5px;font-weight:500; letter-spacing:.12em;text-transform:uppercase;color:var(--grey);margin-top:2px} /* ---------- phone ---------- */ .tabbar{display:none} @media (max-width:900px){ .cols,.cols--2{background-image:none;min-height:0} /* The bar has to hold the mark, Sign in and the burger inside 375px. At 30px the script mark alone took most of it and pushed the burger off the right edge — which is why it could not be tapped at all. The mark gives way, the burger never shrinks. */ .nav{gap:12px} .nav .mark{font-size:22px;min-width:0;overflow:hidden;text-overflow:clip} .nav-links,.nav-search{display:none} /* Sign in lives in the burger sheet on a phone (.mega-list-who, appended when the menu is built), so the bar does not need to carry it twice — and the wordmark needs the room more than a duplicate link does. It is taken out below, after the rule that would otherwise put it back. */ .nav-burger{display:grid;flex:0 0 34px;font-size:17px;line-height:1} .cols,.cols--2,.cols--rail{display:block} /* A rail is a column on a desktop and a swipeable strip on a phone. Wrapping it instead turned an outline into a paragraph of run-on labels — and because each row is justify-between, the title and its count ended up at opposite edges of the screen. One row that scrolls sideways, each entry a chip that keeps its pair together. */ /* It sticks under the bar, so it needs a ground and a layer. It had neither — the page scrolled through it and two lines of type sat on top of each other. Paper, and above the column it is holding. */ .rail-l,.side.rail-sticky{background:var(--paper);z-index:30} .rail-l{border-bottom:1px solid var(--rule);flex-direction:row;flex-wrap:nowrap; gap:8px;padding:12px 16px;overflow-x:auto;overscroll-behavior-x:contain; scrollbar-width:none} .rail-l::-webkit-scrollbar{display:none} .rail-l > *{flex:0 0 auto} .rail-l b{align-self:center;white-space:nowrap;padding-right:2px} .rail-l a{display:inline-flex;align-items:center;justify-content:flex-start;gap:8px; white-space:nowrap;min-height:44px; border:1px solid var(--rule);border-radius:var(--r-pill);padding:6px 14px} .rail-l a.sub{padding-left:12px} .rail-l a.on,.rail-l a.here,.rail-l .sub.here{border-left:1px solid var(--ink); padding-left:12px;background:var(--ink);color:var(--paper);border-color:var(--ink)} .rail-l a.on span,.rail-l a.here span,.rail-l .sub.here span{color:var(--paper)} .side{border-left:0;border-top:1px solid var(--rule)} .main{padding:22px 16px 34px} .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--paper);border-top:1px solid var(--rule);justify-content:space-between;padding:10px 20px 22px} .tabbar a{display:flex;flex-direction:column;align-items:center;gap:5px;font-family:var(--mono);font-size:8px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-2)} .tabbar i{width:15px;height:15px;border:1.3px solid currentColor;display:block} .tabbar a.on{color:var(--ink)} .tabbar a.on i{background:currentColor} .h1{font-size:clamp(32px,9vw,42px)} /* The rollover holds its two layers on one unbreakable line, which is what makes the wipe measurable — and what pushed a long title past the right edge of a phone. There is no hover on a phone anyway, so the headline goes back to being a headline: one layer, wrapping like text. */ .morph{white-space:normal} .morph .m-walk,.morph::after{display:none} /* A wide stat table does not fit a phone and should not try. It scrolls inside its own box rather than panning the whole page sideways. The table stays a table. Making it display:block and handing thead and tbody `display:table` each turns them into two independent tables that size their columns separately — the gem table came out with a 441px header over a 323px body, so the headings sat over the wrong figures. One table, natural width, scrolling in the wrapper it already has. */ .ar-tw{overflow-x:auto;overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;max-width:100%} .ar-tw > table{display:table;min-width:max-content;max-width:none;overflow:visible} .ar-tw > table thead{display:table-header-group} .ar-tw > table tbody{display:table-row-group} /* A table that somehow escaped the wrapper still must not pan the page. */ table:not(.ar-tw > table){display:block;overflow-x:auto;max-width:100%} .deskgrid{display:block !important} .deskgrid .ph{min-height:210px;margin-top:20px} .pillars{grid-template-columns:1fr 1fr !important;gap:18px !important} .twoup,.factrow,.series,.stats{display:block !important} .cols--rail aside{border-left:0;border-top:1px solid var(--rule)} /* The Desk is a fixed frame on a desktop — a full-height board with its own inner scrollers. On a phone that meant a page locked to 100dvh with overflow hidden, so the Desk could not be scrolled at all: everything below the fold was simply unreachable. A phone scrolls the page. */ .page--frame{height:auto;min-height:100dvh;overflow:visible} .page--frame .cols{flex:none;min-height:0} .page--frame .deskmain{overflow-y:visible;display:block} .page--frame .rail-scroll{position:static;height:auto;max-height:none;overflow:visible} /* Nothing is pinned to the bottom of a phone. The tab bar held 65px of the screen at all times and the footer reserved another 96 to clear it — 161px spent before a word of the page. The bar goes back into the flow and the footer is a footer. */ .tabbar{position:static;padding:14px 20px;border-top:1.4px solid var(--ink)} .tabbar a{min-height:44px;justify-content:center} /* The scrubber is a column down the edge, not a row — 26 letters at 44px each would be 1,144px of it. The thumb runs down the strip rather than hunting one letter, so the target grows sideways only. */ .azscrub a{min-width:30px;display:flex;align-items:center;justify-content:center} /* A 14px link is a 14px target. The padding grows the touch area and the negative margin gives the space back to the layout, so a "See all →" still sits on the same line as the heading it belongs to — it is simply hittable now. */ a.mono-s,a.mono,.nav-who,.foot a, .signin-swap a,.acad-account a,.glossbox a,.side--reads .rp a{ display:inline-flex;align-items:center;min-height:44px; margin-top:-15px;margin-bottom:-15px} /* …except the one in the bar, which is not there at all on a phone. This has to out-specify the touch-target rule directly above it: both are a single class on .nav-who, and that one is written later. */ .nav .nav-who{display:none} .foot a{min-height:32px;margin-top:-9px;margin-bottom:-9px} /* Wrapped tags in a rail keep their own line box, so they take the height as padding instead — a negative margin would pull the row above them. */ .glossbox a,.side--reads .rp a{min-height:0;margin:0;padding:7px 0} } /* =================================================================== MEGA NAV · SEARCH · SCROLLING RAIL =================================================================== */ .nav-links a.has-menu{cursor:default} .mega{ position:fixed;left:0;right:0;top:var(--nav-h);z-index:49;background:var(--paper); border-bottom:1.4px solid var(--ink);box-shadow:0 24px 40px -34px rgba(0,0,0,.55); padding:26px clamp(16px,3vw,40px) 30px;display:none; } .mega.open{display:block} .mega-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:26px 34px;max-width:1360px} .mega h4{margin:0 0 12px;font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--grey)} .mega a{display:block;padding:6px 0;font-size:16px;font-weight:600;letter-spacing:-.015em;line-height:1.25} .mega a:hover{color:var(--blue)} .mega a span{display:block;font-family:var(--mono);font-size:8.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);margin-top:3px} .scrim{position:fixed;inset:var(--nav-h) 0 0;background:rgba(17,17,16,.35);z-index:48;display:none} .scrim.open{display:block} /* search */ .search-wrap{position:fixed;inset:0;z-index:70;display:none;background:rgba(17,17,16,.45);padding:8vh 16px 16px} .search-wrap.open{display:block} .search-box{max-width:760px;margin:0 auto;background:var(--paper);border-radius:var(--r);overflow:hidden;box-shadow:0 40px 80px -40px #000} .search-field{display:flex;align-items:center;gap:14px;padding:18px 22px;border-bottom:1.4px solid var(--ink)} .search-field input{flex:1;border:0;outline:0;font-family:var(--sans);font-size:24px;font-weight:600;letter-spacing:-.02em;color:var(--ink);background:transparent} .search-field input::placeholder{color:var(--grey-2);font-weight:300} .search-hint{font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-2);white-space:nowrap} .search-results{max-height:56vh;overflow:auto} .sr-group{font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--grey);background:var(--bone);padding:7px 22px} .sr{display:grid;grid-template-columns:14px 1fr auto;gap:12px;align-items:baseline;padding:11px 22px;border-bottom:1px solid var(--rule);cursor:pointer} .sr:hover,.sr.sel{background:rgba(27,35,255,.06)} .sr h5{margin:0;font-size:17px;font-weight:600;letter-spacing:-.018em} .sr p{margin:3px 0 0;font-size:13px;line-height:1.4;color:var(--grey)} .sr .st{align-self:center} .search-empty{padding:26px 22px;font-family:var(--serif);font-weight:300;font-size:17px;color:var(--grey)} /* the desk rail scrolls on its own */ .rail-scroll{position:sticky;top:var(--top-h);max-height:var(--view-h);overflow-y:auto;overscroll-behavior:contain} /* the rail scrolls, so its tiles keep their full height instead of being squeezed to fit the viewport */ .rail-scroll > *{flex:none} .rail-scroll .ph{flex:none} .rail-scroll{scrollbar-width:thin;scrollbar-color:rgba(17,17,16,.28) transparent;scrollbar-gutter:stable} .rail-scroll::-webkit-scrollbar{width:9px} .rail-scroll::-webkit-scrollbar-thumb{background:rgba(17,17,16,.22);border-radius:var(--r-pill);border:3px solid var(--bone)} .rail-scroll::-webkit-scrollbar-thumb:hover{background:rgba(17,17,16,.4)} @media (max-width:900px){ .mega{top:var(--nav-h);max-height:calc(100dvh - var(--nav-h));overflow:auto} .mega-in{grid-template-columns:1fr;gap:20px} .rail-scroll{position:static;max-height:none} .search-wrap{padding:0} .search-box{border-radius:0;height:100dvh;display:flex;flex-direction:column} .search-results{max-height:none;flex:1} } /* the kingdom section carries its own tell wherever it is named */ .k318-link{display:inline-flex;align-items:center;gap:6px} .k318-link::before{content:"";width:7px;height:7px;background:var(--acid);border-radius:50%;flex:none} .k318-link.on::before{background:var(--ink)} /* the kingdom masthead: a charcoal band under the nav, on every K318 page */ /* Lo: it stays with you on the kingdom pages, the way the nav does — it is how you know which part of the Atlas you are standing in. */ .kband{position:sticky;top:var(--nav-h);z-index:35; background:var(--lilac);color:var(--ink);padding:19px clamp(16px,3vw,40px) 17px; display:flex;align-items:center;gap:16px;flex-wrap:wrap} .kband .sigil{width:28px;height:28px;border-radius:50%;background:var(--acid);color:var(--ink);display:grid;place-items:center; font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.02em;flex:none; transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)} .kband a.sigil:hover{transform:scale(1.12);box-shadow:0 0 0 4px rgba(17,17,16,.12)} .kband .kname{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.15em;text-transform:uppercase} .kband .knote{font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgba(17,17,16,.55);margin-left:auto} /* provenance, this section only */ .prov{font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding:4px 9px;border-radius:var(--r-pill);border:1px solid var(--rule);color:var(--grey)} .prov--palace{background:var(--ink);color:var(--paper);border-color:var(--ink)} .prov--council{background:var(--blue);color:#fff;border-color:var(--blue)} .prov--observed{border-color:var(--ink);color:var(--ink)} .prov--estimate{background:var(--sand);border-color:var(--sand);color:var(--ink)} .prov--unverified{background:var(--flare);border-color:var(--flare);color:#fff} .vis{font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding:4px 9px;border-radius:var(--r-pill)} .vis--public{background:var(--bone);color:var(--grey)} .vis--kingdom{background:var(--acid);color:var(--ink)} /* Tighter than kingdom-only: one clan's own business, not K318's. Set in ink because the tiers read as a ladder — bone, acid, then solid — and because acid is spoken for and must keep meaning exactly one thing. */ .vis--clan{background:var(--ink);color:var(--paper)} /* The kingdom's pages inside the phone menu. One column, tappable rows, with the rail's own count held to the right where it does not fight the label. */ .mega-k318{display:flex;flex-direction:column} .mega-k318 a{display:flex;justify-content:space-between;align-items:baseline;gap:12px; padding:11px 0;border-top:1px solid var(--rule);font-family:var(--mono);font-size:11px; font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)} .mega-k318 a:first-child{border-top:0} .mega-k318 em{font-style:normal;color:var(--grey);white-space:nowrap} .directive{border:1.4px solid var(--ink);border-radius:var(--r);padding:20px 22px;background:var(--paper)} .directive .attrib{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--rule)} .correction{background:var(--flare);color:#fff;border-radius:var(--r);padding:12px 16px;margin-bottom:18px} .clock{font-weight:800;letter-spacing:-.05em;line-height:.9;font-variant-numeric:tabular-nums;font-size:clamp(72px,10vw,132px);margin:0} /* =================================================================== MOTION Page to page, the mega nav, and everything that arrives on scroll. One curve does most of it; the spring is for things that open. =================================================================== */ /* --- page to page: a cross-fade with a small rise on the incoming view --- */ @view-transition{navigation:auto} ::view-transition-old(root){animation:vt-out .34s var(--ease) both} ::view-transition-new(root){animation:vt-in var(--dur-slow) var(--ease) both} @keyframes vt-out{to{opacity:0;transform:translateY(-6px) scale(.995)}} @keyframes vt-in{from{opacity:0;transform:translateY(14px) scale(.995)}} /* the chrome stays put while the body moves under it */ .nav{view-transition-name:atlas-nav} ::view-transition-old(atlas-nav),::view-transition-new(atlas-nav){animation:none;mix-blend-mode:normal} /* --- the mega nav opens rather than appears --- */ .mega{ display:block;opacity:0;visibility:hidden;pointer-events:none; transform:translateY(-12px) scaleY(.97);transform-origin:top center; transition:opacity .26s var(--ease),transform var(--dur) var(--ease-spring),visibility 0s linear var(--dur); } .mega.open{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s,0s,0s} .mega-in > div{opacity:0;transform:translateY(10px);transition:opacity .38s var(--ease),transform .5s var(--ease-spring)} .mega.open .mega-in > div{opacity:1;transform:none} .mega.open .mega-in > div:nth-child(1){transition-delay:.04s} .mega.open .mega-in > div:nth-child(2){transition-delay:.09s} .mega.open .mega-in > div:nth-child(3){transition-delay:.14s} .mega.open .mega-in > div:nth-child(4){transition-delay:.19s} .scrim{display:block;opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s linear .3s} .scrim.open{opacity:1;visibility:visible;transition-delay:0s,0s} .mega a{transition:color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)} .mega a:hover{transform:translateX(3px)} /* --- search opens the same way --- */ .search-wrap{display:block;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s var(--ease),visibility 0s linear .28s} .search-wrap.open{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s,0s} .search-box{transform:translateY(-14px) scale(.985);transition:transform .46s var(--ease-spring)} .search-wrap.open .search-box{transform:none} .sr{transition:background var(--dur-fast) var(--ease)} /* --- lists arrive as you reach them --- */ .reveal{opacity:0;transform:translateY(16px)} .reveal.in{opacity:1;transform:none;transition:opacity .55s var(--ease),transform var(--dur-slow) var(--ease-spring)} /* --- everything that reacts to a pointer does it on the same curve --- */ .row,.glrow,.qrow,.k-card,.nav-links a,.pill,.btn,.tabbar a,.rail-l a{ transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease); } .row:hover,.glrow:hover,.qrow:hover{transform:translateX(2px)} .btn:hover{transform:translateY(-1px)} .pill:hover{border-color:var(--ink);color:var(--ink)} /* an active pill is ink-on-ink at this point, so it keeps its own colour */ .pill--on:hover{color:var(--paper)} .pill--pink:hover,.pill--lilac:hover{color:var(--ink)} .tile{transition:transform var(--dur) var(--ease-spring),box-shadow var(--dur) var(--ease)} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .reveal{opacity:1;transform:none} .mega,.mega-in > div,.search-box{transition:none} ::view-transition-old(root),::view-transition-new(root){animation:none} .row:hover,.glrow:hover,.qrow:hover,.btn:hover,.mega a:hover{transform:none} } /* =================================================================== THE GLOSSARIUM'S FINDING AID 295 entries is too many to scroll blind, so the alphabet is a control: a sticky bar on desktop, a scrubber down the edge on a phone, and a sticky letter header that tells you where you are. =================================================================== */ .azbar{display:none} .azbar a{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.06em;color:var(--grey); width:24px;height:24px;display:grid;place-items:center;border-radius:var(--r-pill); transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)} .azbar a:hover{background:var(--ink);color:var(--paper);transform:translateY(-1px)} .azbar a.empty{color:var(--rule);pointer-events:none} .azbar a.here{background:var(--acid);color:var(--ink)} .azbar .azcount{margin-left:auto;font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--grey-2)} .glwrap{display:grid;grid-template-columns:minmax(0,1fr) 34px} .lettergroup{scroll-margin-top:var(--top-h)} /* the letter bars carry the charcoal, so a scrolling reader always knows which run they are in without looking away at the scrubber */ .glhead{position:sticky;top:var(--top-h);z-index:20;background:var(--charcoal); padding:8px clamp(16px,2vw,26px);font-family:var(--mono);font-size:10px;font-weight:500; letter-spacing:.15em;text-transform:uppercase;color:var(--bone); border:0;display:flex;justify-content:space-between} .glhead span:last-child{color:rgba(244,241,233,.62)} .glrow{cursor:pointer} .glrow.sel{background:rgba(17,17,16,.07)} /* the alphabet runs down the edge of the list at every width */ .azscrub{ position:sticky;top:calc(var(--top-h) + 10px);align-self:start; height:calc(var(--view-h) - 40px); display:flex;flex-direction:column;justify-content:space-between;align-items:center; padding:6px 0;border-left:1px solid var(--rule); } .azscrub a{font-family:var(--mono);font-size:9px;font-weight:500;color:var(--grey-2);line-height:1; width:22px;height:22px;display:grid;place-items:center;border-radius:50%;margin:0 auto; transition:color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),transform .3s var(--ease-spring)} .azscrub a:hover{color:var(--paper);background:var(--ink);transform:scale(1.18)} .azscrub a.empty{color:var(--rule);pointer-events:none} /* the letter you are standing in gets the same round mark as the K318 sigil */ .azscrub a.here{color:var(--ink);background:var(--acid);font-weight:500; box-shadow:0 0 0 3px rgba(230,255,46,.35);transform:scale(1.05)} @media (max-width:900px){ .azscrub{height:calc(var(--view-h) - 120px);background:rgba(255,255,255,.86);backdrop-filter:blur(6px)} } /* =================================================================== PILLAR FLOOD A pillar announces itself with a full-bleed band in its own colour, then gets out of the way so the reading ground stays paper. =================================================================== */ .flood{background:var(--flood,var(--lilac));padding:30px clamp(16px,3vw,44px) 28px} .flood--tight{padding-top:22px;padding-bottom:22px} .flood .mono,.flood .mono-s{color:rgba(17,17,16,.62)} .flood .lede{color:rgba(17,17,16,.82)} .flood-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:36px;align-items:end} .flood .prog{background:rgba(17,17,16,.22)} .flood .prog i{background:var(--ink)} @media(max-width:900px){.flood-grid{display:block}.flood-grid > div + div{margin-top:22px}} /* A rail that tracks where you are inside a long page. Every left rail on the site is 300px — the width the article index has always used. At 250px the longer entries ("Revival Economics & Event Timing", "Reading Your Kingdom's RoE") wrapped onto a second line and the outline read as prose. */ .rail-l .sub{padding-left:12px;font-size:10.5px} /* The reading time is the second half of a two-up row, and on the longer lesson titles it was breaking as "4 / min" across two lines. It is never wider than five characters — let it hold its line. */ .rail-l .sub span:last-child{white-space:nowrap} /* a long nested run reads better with a little air above the first and below the last, so the group still holds together */ .rail-l a:not(.sub) + .sub{margin-top:2px} .rail-l .sub + a:not(.sub){margin-top:8px} .rail-l a.here{color:var(--ink);border-left:3px solid var(--ink);padding-left:10px} .rail-sticky{position:sticky;top:var(--top-h);align-self:start;max-height:var(--view-h);overflow-y:auto;scrollbar-width:thin} /* =================================================================== THE ROE CALLOUT The charter is the one page every player in the kingdom has to have read, so it gets a band of its own rather than a link in a list. =================================================================== */ .roe{background:var(--blue);color:#fff;border-radius:var(--r);padding:26px 30px 28px;margin-top:30px; display:grid;grid-template-columns:1.35fr .65fr;gap:34px;align-items:center} .roe .eyebrow{font-family:var(--mono);font-size:8.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75);margin:0;white-space:nowrap} .roe h2{margin:12px 0 0;font-size:clamp(28px,3.2vw,40px);font-weight:800;letter-spacing:-.032em;line-height:1.04} .roe p{margin:12px 0 0;font-size:17px;line-height:1.5;color:rgba(255,255,255,.86);max-width:52ch} .roe .btn{background-color:#fff;color:var(--ink);background-image:linear-gradient(var(--ink),var(--ink))} .roe .btn:hover{color:#fff} .roe .btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)} .roe-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.32);border:1px solid rgba(255,255,255,.32)} .roe-facts div{background:var(--blue);padding:14px 12px} .roe-facts b{display:block;font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1} .roe-facts span{display:block;font-family:var(--mono);font-size:8.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75);margin-top:7px} @media(max-width:900px){.roe{display:block}.roe-facts{margin-top:22px}} /* =================================================================== K318 · STATUS TRACKER AND THE DIRECTORY =================================================================== */ .track{border-top:1.4px solid var(--ink)} .trow{display:grid;grid-template-columns:1fr 190px 120px 96px;gap:18px;align-items:center; padding:14px 0;border-bottom:1px solid var(--rule)} .trow h4{margin:0;font-size:17px;font-weight:600;letter-spacing:-.018em;line-height:1.25} .trow .sub{margin:5px 0 0;font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)} .bar{height:6px;background:var(--sand);position:relative} .bar i{display:block;height:100%;background:var(--ink)} .bar--warn i{background:var(--flare)} .barnum{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.08em;color:var(--grey);margin-top:6px;display:block} .chip{font-family:var(--mono);font-size:8.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;padding:4px 9px;border-radius:var(--r-pill);white-space:nowrap} .chip--running{background:var(--ink);color:var(--paper)} .chip--planned{background:var(--bone);color:var(--grey);border:1px solid var(--rule)} .chip--blocked{background:var(--flare);color:#fff} .chip--done{background:var(--lilac);color:var(--ink)} @media(max-width:900px){ .trow{grid-template-columns:1fr;gap:8px} .trow > *:nth-child(4){justify-self:start} } .who{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:16px} /* The card grid, and only that. k318-audit-clans.html carries .who on a byline span for an entirely different job, so this is scoped to the cards rather than widened on .who itself. Now the Vanguard has gone there are two cards rather than three, and a fixed three-column track left the last third of the row empty. auto-fit collapses the tracks with nothing in them, so the cards fill the column at whatever number the section happens to carry. */ .who:has(> .who-card){grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))} /* Lo: a lighter beige ground, so the cards sit on the page rather than float above it. */ .who-card{border:1px solid var(--rule);border-radius:var(--r);padding:20px 22px 22px;background:var(--bone);display:flex;flex-direction:column} /* Both tiles carry a fixed ten rows, so each list runs its full height with no inner scroll, and the two cards come out level beside each other. */ .who-list{margin-top:14px} .who-card h3{margin:10px 0 0;font-size:22px;font-weight:700;letter-spacing:-.026em} /* rules between the rows, none under the last one — the button below needs no line above it */ .who-card .line + .line{border-top:1px solid var(--rule)} .who-card .line{display:flex;justify-content:space-between;gap:12px;padding:9px 0;font-size:15px} .who-card .line span:last-child{font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);white-space:nowrap;align-self:center} /* The global .foot carries page-edge padding; inside a card that pushed the link off the text column it belongs to. */ .who-card .foot{margin-top:auto;padding:18px 0 0;display:flex;justify-content:flex-start; border-top:1px solid var(--rule)} /* a card closes on a text link, not another button */ .cardlink{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.13em; text-transform:uppercase;color:var(--blue)} .cardlink:hover{color:var(--ink)} .tbd{color:var(--grey-2);font-style:italic} @media(max-width:900px){.who{grid-template-columns:1fr}} /* the tracker in a half-width column: one line for the claim, one for the evidence, so nothing wraps three deep */ .track--tight .trow{grid-template-columns:1fr auto;gap:6px 14px;padding:13px 0} .track--tight .trow h4{font-size:16px} .track--tight .trow .sub{grid-column:1 / -1;margin:0} .track--tight .trow .barwrap{grid-column:1 / -1;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;margin-top:8px} .track--tight .trow .barnum{margin:0;white-space:nowrap} /* =================================================================== MODALS · a read one for tracker items, a write one for submissions =================================================================== */ .modal{position:fixed;inset:0;z-index:80;display:block;opacity:0;visibility:hidden;pointer-events:none; background:rgba(17,17,16,.45);padding:6vh 16px 16px;overflow-y:auto; transition:opacity .28s var(--ease),visibility 0s linear .28s} .modal.open{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s,0s} .modal-box{position:relative;max-width:720px;margin:0 auto;background:var(--paper);border-radius:var(--r);overflow:hidden; box-shadow:0 40px 80px -40px #000;transform:translateY(-16px) scale(.985); transition:transform .46s var(--ease-spring)} .modal.open .modal-box{transform:none} .modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px; padding:22px 26px 18px;border-bottom:1.4px solid var(--ink)} .modal-head h2{margin:10px 0 0;font-size:26px;font-weight:700;letter-spacing:-.026em;line-height:1.15} .modal-x{width:32px;height:32px;border-radius:50%;border:1px solid var(--rule);display:grid;place-items:center; font-size:15px;color:var(--grey);cursor:pointer;flex:none;transition:background var(--dur-fast) var(--ease)} .modal-x:hover{background:var(--bone);color:var(--ink)} .modal-body{padding:22px 26px 26px} .modal-body h3{margin:22px 0 0;font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.14em; text-transform:uppercase;color:var(--grey)} .modal-body h3:first-child{margin-top:0} .modal-body p{margin:8px 0 0;font-family:var(--serif);font-weight:300;font-size:16.5px;line-height:1.55;color:var(--ink-2)} .modal-body ol{margin:10px 0 0;padding-left:20px;font-size:15.5px;line-height:1.6;color:var(--ink-2)} .modal-body ol li{margin:6px 0} .modal-body ol li b{font-weight:600;color:var(--ink)} .modal-foot{border-top:1px solid var(--rule);padding:16px 26px;display:flex;gap:10px;flex-wrap:wrap;align-items:center} .who-line{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--rule);font-size:15px} .who-line span:last-child{font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);align-self:center} /* the form */ .field{margin-top:16px} .field label{display:block;font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.14em; text-transform:uppercase;color:var(--grey);margin-bottom:7px} .field input[type=text],.field textarea,.field select{width:100%;font-family:var(--sans);font-size:16px;font-weight:400; color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);padding:11px 13px} .field textarea{min-height:88px;resize:vertical;font-family:var(--serif);font-weight:300;line-height:1.5} .field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)} .chips{display:flex;gap:8px;flex-wrap:wrap} .chip-opt{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase; padding:8px 13px;border-radius:var(--r-pill);border:1px solid var(--rule);color:var(--grey);cursor:pointer; transition:all var(--dur-fast) var(--ease)} .chip-opt.sel{background:var(--ink);color:var(--paper);border-color:var(--ink)} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} .consent{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:14.5px;line-height:1.45;color:var(--ink-2)} .dropzone{border:1px dashed var(--rule);border-radius:var(--r);padding:18px;text-align:center;color:var(--grey); font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase} @media(max-width:900px){.field-row{grid-template-columns:1fr}.modal{padding:0}.modal-box{border-radius:0;min-height:100dvh}} .trow h4{cursor:pointer} .trow h4:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px} /* stats that sit beside a page headline share its baseline: the numerals line up with the H1, and the labels hang below it */ .headstats{display:flex;gap:0;align-items:flex-end} /* the same hairline-divided run of numerals the Glossarium panel uses */ .headstats > span{display:block;text-align:left;padding:0 18px 0 0} .headstats > span + span{border-left:1px solid rgba(17,17,16,.2);padding-left:20px} .headstats .num{display:block;font-size:34px;line-height:.82} .headstats .mono-s{display:block;margin-top:9px} /* The category filter sits where the article count used to: a small mono label and the Atlas's own dropdown, right-aligned in the pagehead. */ .afilter{display:flex;align-items:center;justify-content:flex-end;gap:12px} .afilter-l{font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--grey)} .afilter .asel-btn{min-width:156px} .strip .h1{line-height:.9} .pill--lilac{background:var(--lilac);border-color:var(--lilac);color:var(--ink)} .pill--blue{background:var(--blue);border-color:var(--blue);color:#fff} .pill--blue:hover{color:#fff;border-color:var(--ink);background:var(--ink)} .qrow{cursor:pointer} /* two panels across the foot of the desk: what is running right now, and where the Atlas itself stands */ /* min-width:0 on the tracks. A grid track's default minimum is its content's min-content, and the plate image in the second panel is 1270px wide intrinsically — so without this it claims the whole row and the events panel collapses to a column of wrapped words. It only ever looked right because .morph is nowrap and propped the first track up; taking the rollover off the event headings exposed it. */ .homerow > *{min-width:0} .homerow{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule); border-top:1px solid var(--rule);margin-top:auto;padding-top:0} .homerow .homepanel{padding-top:24px} .deskmain > .homerow{margin-top:36px} .homepanel{background:var(--paper);padding:18px 0 4px} .homepanel > .ph-head{display:flex;justify-content:space-between;align-items:baseline;padding:0 0 10px} .ev-row{display:grid;grid-template-columns:14px 1fr auto;gap:12px;align-items:baseline;padding:9px 0;border-top:1px solid var(--rule)} /* A row the Atlas has an entry for opens it in place. One that it does not stays inert rather than pretending — the pointer is the tell. */ .ev-row--open{cursor:pointer} .ev-row--open:hover h4{color:var(--blue)} .ev-row h4{margin:0;font-size:16px;font-weight:600;letter-spacing:-.016em} .ev-row p{margin:4px 0 0;font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)} .live{width:9px;height:9px;border-radius:50%;background:var(--acid);box-shadow:0 0 0 3px rgba(230,255,46,.35);margin-top:5px} .soon{width:9px;height:9px;border-radius:50%;background:transparent;border:1.4px solid var(--ink);margin-top:5px} .later{width:9px;height:9px;border-radius:50%;background:var(--sand);margin-top:5px} .risk{width:9px;height:9px;border-radius:50%;background:var(--flare);margin-top:5px} .ledger{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border-top:1px solid var(--rule)} .ledger > div{background:var(--paper);padding:14px 0 4px} @media(max-width:900px){.homerow{grid-template-columns:1fr}.homepanel + .homepanel{border-top:1px solid var(--rule)}} /* who's who: one ground per body, so the three read as three different kinds of thing rather than three lists */ /* Anything on the orange ground carries weight: at 300 the serif disappears into the fill, so copy there sets at 500 and the labels drop their transparency. */ .ask,.correction,.warn{font-weight:500} .ask p,.correction p,.warn p{font-weight:500} .ask .mono-s,.correction .mono-s,.warn .mono-s{opacity:1;color:#fff} .correction p:last-child,.warn p:last-child,.ask p:last-child{font-family:var(--sans);letter-spacing:-.006em} /* in the rails, a conflict count is a rail item like any other — same size, same tracking, just red. It is not a chip in there. */ .rail-l .st,.rail-l .st--cont{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em; text-transform:uppercase;background:none;padding:0;border-radius:0;color:var(--flare)} .rail-l a:hover .st--cont{color:var(--flare)} /* the screenshot lane: the single most valuable thing a reader can send */ .shot-drop{border:1px dashed var(--rule);border-radius:var(--r);padding:26px 18px;text-align:center;cursor:pointer; transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)} .shot-drop:hover,.shot-drop.over{border-color:var(--blue);background:rgba(27,35,255,.04)} .shot-drop .big{font-size:17px;font-weight:600;letter-spacing:-.018em;color:var(--ink);display:block} .shot-drop .sm{font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.12em;text-transform:uppercase; color:var(--grey);display:block;margin-top:8px} .shot-prev{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;border:1px solid var(--rule); border-radius:var(--r);padding:12px;margin-top:12px} .shot-prev img{width:96px;height:72px;object-fit:cover;border-radius:2px;display:block;background:var(--bone)} .shot-prev .meta{font-size:14px;line-height:1.4} .shot-prev .meta b{display:block;font-weight:600} .shot-prev .drop-again{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);cursor:pointer} .settles{background:var(--lilac);border-radius:var(--r);padding:14px 16px} .settles p{margin:0;font-family:var(--serif);font-weight:300;font-size:16px;line-height:1.45} /* rows that are links behave like links: the label goes blue on hover */ a.ev-row{color:inherit} a.ev-row:hover h4{color:var(--blue)} a.ev-row:hover{background:rgba(27,35,255,.03)} .issue--quiet{border-top:0;padding-top:0;padding-bottom:34px} .issue--quiet .b-quiet{margin-top:34px} /* =================================================================== A FULL GLOSSARY ENTRY The short definition is what the list shows. This is the entry itself — the Atlas's own prose, its evidence, and what it links to. =================================================================== */ .entry-body h4{margin:24px 0 0;font-size:19px;font-weight:600;letter-spacing:-.02em} .entry-body p{margin:10px 0 0;font-family:var(--serif);font-weight:300;font-size:17px;line-height:1.6;color:var(--ink-2);max-width:62ch} .entry-body p b,.entry-body h4 + p b{font-weight:600;color:var(--ink)} /* A missing page is worth saying once, quietly. It was a dashed box holding a 17px italic sentence, which gave the one thing on the page with nothing to say the most room on it. Same type as the site's footer, which is where the eye already expects a note about the page rather than from it. */ .entry-stub{border:0;border-top:1px solid var(--rule);border-radius:0;padding:13px 0 0;margin-top:24px} .entry-stub p{margin:0;font-family:var(--mono);font-size:10px;font-weight:500; letter-spacing:.13em;text-transform:uppercase;font-style:normal; color:var(--grey-2);line-height:1.7} /* In a modal it runs across the bottom, outside the scroller, so it stays put while the entry scrolls behind it. */ .modal-foot.entry-note{padding:13px 26px;justify-content:flex-start; align-items:center;gap:16px;flex-wrap:wrap; background:var(--acid);border-top:1.4px solid var(--ink)} .modal-foot.entry-note p{margin:0;font-family:var(--mono);font-size:10px;font-weight:500; letter-spacing:.13em;text-transform:uppercase;color:var(--ink);line-height:1.7} .entry-head{background:var(--tint-other);color:var(--ink);padding:26px clamp(16px,3vw,40px) 28px} .entry-head .h1{font-size:clamp(38px,4.6vw,56px)} /* A leader's entry leads with their face, beside the name rather than above it. Only heads that have one become a row; every other entry keeps the block it has always been, which is why this hangs off :has rather than being the default. The portrait takes itself out on a 404, and when it goes the head goes back to a block with it. */ .entry-head:has(.entry-face){display:flex;gap:clamp(20px,3vw,34px); align-items:center;flex-wrap:wrap} .entry-head-in{flex:1;min-width:min(300px,100%)} .entry-face{flex:none;width:clamp(132px,17vw,208px);aspect-ratio:1; border-radius:var(--r);overflow:hidden;background:var(--ink); border:1px solid rgba(17,17,16,.14);display:block} .entry-face img{width:100%;height:100%;object-fit:cover;display:block} /* In the modal the head is tighter and the reading is right behind it, so the face is smaller there than on the entry's own page. The row rule has to be said again at the modal's own weight: `.modal-box .modal-head.entry-head` sets display:block and outranks a bare `.entry-head:has(…)`, so the head stayed a block and the portrait sat on top of the name instead of beside it. */ .modal-head .entry-face{width:clamp(96px,12vw,132px)} .modal-box .modal-head.entry-head:has(.entry-face){display:flex; gap:clamp(18px,2.4vw,26px);align-items:center;flex-wrap:wrap} .entry-meta{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:14px} .glrow p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* =================================================================== CATEGORY TINTS The dot is the saturated mark; the panel behind an entry is the same hue at reading strength, so the colour tells you what kind of thing you have opened before you read a word. =================================================================== */ /* An opened entry always sits on lilac — the sheet colour — and the dot is what says which kind of thing it is. One ground, eight marks. */ .side--sheet{background:transparent;color:var(--ink)} .cols{--tintcol:transparent} .cols.tinted{background-image: linear-gradient(var(--rule),var(--rule)), linear-gradient(var(--tint,var(--lilac)),var(--tint,var(--lilac))); background-size:1px 100%,340px 100%; background-position:300px 0,right top;background-repeat:no-repeat} /* ---------- the record behind an entry ---------- */ /* Every claim the Atlas holds for this term, with the status it was given and the kind of source it came from. Shown only when there is something to show. */ .record{margin-top:34px;padding-top:18px;border-top:1.4px solid var(--ink);scroll-margin-top:calc(var(--top-h) + 20px)} .rec-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:6px} .rec-head .h2{margin:0} .rec{padding:15px 0;border-bottom:1px solid var(--rule);max-width:70ch} .rec-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .rec-meta .st{color:var(--ink)} .rec p{margin:9px 0 0;font-size:16px;line-height:1.5;color:var(--ink-2)} /* the one link out of a record: the same small mono the rest of the chrome uses, not a serif paragraph wearing uppercase */ .rec-more{display:inline-block;margin-top:16px;font-family:var(--mono);font-size:9px;font-weight:500; letter-spacing:.13em;text-transform:uppercase;color:var(--grey)} .rec-more:hover{color:var(--blue)} /* a run of outbound sources or long reads, used wherever the Atlas credits its own writing or someone else's */ .srclist{display:flex;flex-direction:column} .srclist a{display:block;padding:11px 0;border-top:1px solid rgba(17,17,16,.2);font-size:15px;line-height:1.35} .srclist a:last-child{border-bottom:1px solid rgba(17,17,16,.2)} .srclist a span{display:block;margin-top:5px;font-family:var(--mono);font-size:8.5px;font-weight:500; letter-spacing:.12em;text-transform:uppercase;color:var(--grey)} .srclist a:hover{color:var(--blue)} /* Where a term is written up is a list of one to five names, and as rows it drew a rule above each and below the last — two lines, stacked under the label and over the record's own divider. Three rules to introduce one link. Named things the Atlas already sets as tags, so these are tags. */ .wrote-l{margin:28px 0 10px} /* First thing in the panel: it needs the panel's own padding, not a paragraph break as well. */ .entry-body > .wrote-l:first-child{margin-top:4px} .srclist--tags{flex-direction:row;flex-wrap:wrap;gap:6px;margin-top:2px} .srclist--tags a{display:inline-flex;align-items:baseline;gap:8px;padding:7px 12px; border:1px solid var(--rule);border-top:1px solid var(--rule);border-radius:var(--r-pill); font-size:13.5px;line-height:1.2;white-space:nowrap} .srclist--tags a:last-child{border-bottom:1px solid var(--rule)} .srclist--tags a span{display:inline;margin:0;font-size:8.5px;color:var(--grey)} .srclist--tags a:hover{border-color:var(--ink);color:var(--blue)} /* Glossary tags: solid ink pills, white text, flipping to blue on rollover. */ .srclist--tags--ink a{background:var(--ink);color:var(--paper);border-color:var(--ink)} .srclist--tags--ink a:hover{background:var(--blue);border-color:var(--blue);color:#fff} /* the mega nav's term of the day sits apart from the category columns */ .mega .dot{margin-right:8px;vertical-align:middle;position:relative;top:-1px} .mega-tod{align-self:stretch;border-left:1.4px solid var(--ink);padding-left:30px} .mega-tod h4{color:var(--grey)} .mega-tod a{display:block;padding:0} .mega-tod .tod-meta{display:block;font-family:var(--mono);font-size:8.5px;font-weight:500; letter-spacing:.12em;text-transform:uppercase;color:var(--grey);margin:0 0 8px} .mega-tod b{display:block;font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.05} .mega-tod em{display:block;margin-top:9px;font-family:var(--serif);font-style:normal;font-weight:300; font-size:15px;line-height:1.45;color:var(--ink-2)} .mega-tod a:hover b{color:var(--blue)} /* The page footer rides the bottom of the window on every page. Sticky rather than fixed, so it still takes its own space at the end of the document and nothing hides behind it. On mobile the tab bar already owns that edge, so the footer goes back to sitting where it falls. */ footer.foot{position:sticky;bottom:0;z-index:40;background:var(--sand); border-top:1.4px solid #c1bcb0;color:var(--ink);font-weight:400;margin-top:auto} /* Declared after the phone block, so the phone block has to be said again here or it loses on source order — which is why the footer was still riding the bottom of a phone screen, on top of the tab bar, with the page scrolling underneath it. The 96px was clearance for a fixed tab bar. The bar is in the flow now, so the clearance is dead space and the footer is just a footer. */ @media (max-width:900px){ footer.foot{position:static;padding-bottom:16px;gap:6px; flex-direction:column;align-items:flex-start;font-size:9px;margin-top:0} } footer.foot a{color:inherit;border-bottom:1px solid rgba(17,17,16,.3)} footer.foot a:hover{color:var(--blue);border-color:var(--blue)} /* the entry, read in place */ .modal-box .modal-head.entry-head{display:block;border-radius:var(--r) var(--r) 0 0;padding:30px 34px 26px} .modal-box .modal-body.entry-body{padding:26px 34px 34px;max-height:64vh;overflow:auto} .modal-box .record{margin-top:28px} .modal-x{position:absolute;top:16px;right:18px;z-index:2;width:34px;height:34px;border-radius:50%; border:0;background:rgba(17,17,16,.08);color:var(--ink);font-size:19px;line-height:1;cursor:pointer} .modal-x:hover{background:var(--ink);color:var(--paper)} /* the one big thing in a menu: set off by a rule, the way the term of the day is */ /* No min-width. A grid item wider than its track does not widen the track, it overflows — so at 1100px the Just published plate ran 37px past the menu's own right gutter and off the window. It takes the track it is given and the plate scales inside it. */ .mega-hero{align-self:stretch;border-left:1.4px solid var(--ink);padding-left:30px;min-width:0} .mega .mega-hero-in{display:block;padding:0} .mega .mh-row{display:flex;align-items:center;gap:14px;padding:9px 0;border-bottom:1px solid var(--rule)} .mega .mh-date{flex:none;min-width:46px;text-align:center;background:var(--bone);border-radius:var(--r);padding:6px 6px 7px} .mega .mh-date.is-conflict{background:var(--pink)} .mega .mh-date.is-live{background:var(--acid)} .mega .mh-date.is-k318{background:var(--pink)} .mega .mh-date em{display:block;font-family:var(--mono);font-size:7.5px;font-weight:500;letter-spacing:.14em; text-transform:uppercase;color:var(--grey);font-style:normal} .mega .mh-date b{display:block;font-size:20px;font-weight:800;letter-spacing:-.04em;line-height:.95;margin-top:2px; font-variant-numeric:tabular-nums} .mega .mh-what{min-width:0} .mega .mh-what b{display:block;font-family:var(--sans);font-size:15px;font-weight:600; letter-spacing:-.015em;line-height:1.2;text-transform:none;color:var(--ink)} .mega .mh-what em{display:block;margin-top:3px;font-family:var(--mono);font-size:8.5px;font-weight:500; letter-spacing:.12em;text-transform:uppercase;color:var(--grey);font-style:normal} .mega .mh-more{display:block;margin-top:14px;padding:0;font-family:var(--mono);font-size:8.5px;font-weight:500; letter-spacing:.13em;text-transform:uppercase;color:var(--grey)} .mega .mega-hero-in:hover .mh-more{color:var(--blue)} /* Rail items with no page behind them yet: present so the shape of the section is legible, faded and inert so nobody clicks into nothing. */ .rail-l .rail-off{display:flex;justify-content:space-between;gap:10px;opacity:.38;cursor:default; pointer-events:none} /* ---------- the marker, and the data strip ---------- */ /* A highlighter stroke for the one phrase in a paragraph that carries the figure. Neon as a marker, never a field — so it only ever wraps a few words. */ .hl{background:var(--acid);padding:1px 3px;margin:0 -1px;border-radius:2px; box-decoration-break:clone;-webkit-box-decoration-break:clone;color:var(--ink)} /* A dataset called out of the flow: the label, the figure at size, and the caveat that keeps the figure honest. */ .datastrip{background:var(--blue);color:#fff;border-radius:var(--r);padding:22px 24px 24px;margin:28px 0 0} .datastrip .l{display:block;font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.13em; text-transform:uppercase;color:rgba(255,255,255,.78);margin:0} .datastrip b{display:block;margin-top:10px;font-size:clamp(44px,5.4vw,68px);font-weight:800; letter-spacing:-.045em;line-height:.92;font-variant-numeric:tabular-nums} .datastrip .c{display:block;margin-top:12px;font-family:var(--mono);font-size:9px;font-weight:500; letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.78);line-height:1.6} /* ---------- the long read: index left, sources right ---------- The layout itself is further down, where the measure and the full-height rules are set. What is left here is how the rail's own contents look. */ .side--reads .rl{margin:0 0 9px;font-family:var(--mono);font-size:9px;font-weight:500; letter-spacing:.13em;text-transform:uppercase;color:var(--grey)} .side--reads .rp{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-2)} .side--reads .rp--cont{color:var(--flare)} .side--reads .rp--cont a{color:var(--flare)} .srcmini{margin-top:10px} .srcmini a{display:block;padding:9px 0;border-top:1px solid var(--rule);font-size:14px;line-height:1.35} .srcmini a:last-child{border-bottom:1px solid var(--rule)} .srcmini a span{display:block;margin-top:4px;font-family:var(--mono);font-size:8px;font-weight:500; letter-spacing:.12em;text-transform:uppercase;color:var(--grey)} .srcmini a:hover{color:var(--blue)} /* an article that comes in parts announces each one */ .ar-view + .ar-view{margin-top:44px;padding-top:8px;border-top:1.4px solid var(--ink)} .ar-viewlabel{margin:34px 0 0;font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.14em; text-transform:uppercase;color:var(--grey)} .rail-l .idx-view{font-weight:500;color:var(--ink);margin-top:8px} .rail-l .idx-view:first-of-type{margin-top:0} @media(max-width:900px){.cols--reads{display:block} /* Stacked, the rail is the last thing on the page rather than a column beside it — and it keeps its rule as a top edge. */ .cols--reads .side--reads{border-left:0;border-top:1px solid var(--rule)}} /* ---------- the page head ---------- */ /* Every section leads with the same full-width band: eyebrow, name, and the one sentence saying what the section is. The rails start below it, not beside it. */ .pagehead{background:var(--lilac);padding:32px clamp(16px,3vw,40px) 34px} /* a sticky band has to be opaque or the page scrolls through it */ .ar-head{background:var(--bone)} /* the same band on the page's own ground, for sections that read better plain */ /* A tool is not an article: the name is orientation, not a headline, and every pixel it takes is a pixel of the thing you came to look at. */ /* The workshop reads as its own part of the Atlas: the reference sections keep the lilac, a tool you come to use gets the acid. --slim is this page only. */ .pagehead--slim{background:var(--acid);padding:18px clamp(16px,3vw,40px) 20px} .pagehead--slim .h1{font-size:clamp(26px,3vw,34px)} .pagehead--plain{background:var(--paper);border-bottom:1.4px solid var(--ink)} .pagehead--plain .eyebrow{color:var(--grey)} .pagehead--plain .lede{color:var(--ink-2)} .pagehead--plain .pagehead-aside{border-left-color:var(--rule)} .pagehead--plain .headstats > span + span{border-left-color:rgba(17,17,16,.2)} /* and on the blue, where the section warrants it */ .pagehead--blue{background:var(--blue);color:#fff} .pagehead--blue .eyebrow{color:rgba(255,255,255,.72)} .pagehead--blue .lede{color:rgba(255,255,255,.86)} .pagehead--blue .pagehead-aside{border-left-color:rgba(255,255,255,.3)} .pagehead--acid{background:var(--acid)} .pagehead--acid .eyebrow{color:rgba(17,17,16,.62)} .pagehead--acid .lede{color:rgba(17,17,16,.82)} .pagehead--acid .pagehead-aside{border-left-color:rgba(17,17,16,.28)} .pagehead--acid .headstats > span + span{border-left-color:rgba(17,17,16,.28)} .pagehead--bone{background:var(--bone);border-bottom:1.4px solid var(--ink)} .pagehead--pink{background:var(--pink)} .pagehead--pink .eyebrow{color:rgba(17,17,16,.62)} .pagehead--pink .lede{color:rgba(17,17,16,.84)} .pagehead--pink .pagehead-aside{border-left-color:rgba(17,17,16,.24)} .pagehead--pink .mono{color:rgba(17,17,16,.62)} .pagehead--pink .mono-s{color:rgba(17,17,16,.62)} .pagehead--pink .prog{background:rgba(17,17,16,.22)} .pagehead--pink .prog i{background:var(--ink)} .pagehead--bone .eyebrow{color:var(--grey)} .pagehead--bone .lede{color:var(--ink-2)} .pagehead--bone .pagehead-aside{border-left-color:var(--rule)} .pagehead--bone .headstats > span + span{border-left-color:rgba(17,17,16,.2)} .pagehead .h1{margin:12px 0 0} .pagehead .eyebrow{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.15em; text-transform:uppercase;color:rgba(17,17,16,.6);display:block} .pagehead .lede{margin-top:14px;max-width:52ch;color:rgba(17,17,16,.82)} .pagehead-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:38px;align-items:end} .pagehead-aside{border-left:1px solid rgba(17,17,16,.22);padding-left:30px} .pagehead .headstats > span + span{border-left-color:rgba(17,17,16,.24)} @media(max-width:900px){.pagehead-grid{grid-template-columns:1fr;gap:22px} .pagehead-aside{border-left:0;padding-left:0;border-top:1px solid rgba(17,17,16,.22);padding-top:20px}} /* The fifteen articles sit folded until you are inside the ROE, so the rail stays readable from every other K318 page. */ .rail-l .roe-subs{display:grid;grid-template-rows:0fr;overflow:hidden; transition:grid-template-rows var(--dur) var(--ease),opacity .3s var(--ease);opacity:0} .rail-l .roe-subs > *{min-height:0;display:flex;flex-direction:column;gap:11px} .rail-l .roe-subs.open{grid-template-rows:1fr;opacity:1;margin-top:2px;overflow:visible} /* once open the run must not clip — the last articles were being cut off */ .rail-l .roe-subs.open > *{overflow:visible} /* ---------- the section band, held at the top ---------- */ /* Sticky, but it condenses: past the fold it drops the lede and the stat run and keeps only the eyebrow and the name, so it costs one slim bar rather than a third of the window. --head-h is what everything else sticky sits below. */ :root{--head-h:62px} .pagehead,.ar-head{position:sticky;top:var(--top-h);z-index:30; transition:padding var(--dur) var(--ease),background var(--dur) var(--ease)} .pagehead .h1,.ar-head .h1{transition:font-size var(--dur) var(--ease),margin var(--dur) var(--ease)} .pagehead .lede,.ar-head .ar-lede,.pagehead-aside,.ar-head .ar-hero img{ transition:opacity .22s var(--ease),max-height var(--dur) var(--ease),margin var(--dur) var(--ease)} /* A page too short to scroll can opt its band out of the sticky-condense: it stays in flow and scrolls away, rather than jittering through the collapse over a few pixels. proto.js skips the scroll handler for it too. */ .pagehead--static{position:static} .pagehead.is-stuck,.ar-head.is-stuck{padding-top:11px;padding-bottom:12px; border-bottom:1.4px solid var(--ink);box-shadow:0 10px 22px -20px rgba(0,0,0,.5)} .pagehead.is-stuck .h1,.ar-head.is-stuck .h1{font-size:clamp(26px,2.4vw,32px);margin:5px 0 0} /* .sb-lede was never in this list, so the stack builder's header stayed at full height for ever — 228px of a short window held by a sentence you have already read. */ .pagehead.is-stuck .lede,.pagehead.is-stuck .sb-lede,.ar-head.is-stuck .ar-lede, .pagehead.is-stuck .pagehead-aside,.ar-head.is-stuck .ar-hero img{ opacity:0;max-height:0;margin:0;overflow:hidden;pointer-events:none} /* The upcoming-event tag rides in .ar-lede-row beside the lede. When the band is stuck the lede collapses, so the row is dead weight under the shrunk title. Zero the row's margin and lift the tag out of it, pinned to the right of the compact band at the page gutter — absolute right is measured from the padding box (the window edge), so it takes the gutter explicitly rather than sitting flush against the edge — so the tag stays visible on scroll without holding the row open. */ .ar-head.is-stuck .ar-lede-row{margin-top:0} .ar-head.is-stuck .ev-state{position:absolute;right:clamp(16px,3vw,40px);top:50%;transform:translateY(-50%);margin:0} .pagehead.is-stuck .eyebrow{font-size:8.5px} .pagehead.is-stuck .pagehead-grid,.ar-head.is-stuck .ar-hero{display:block;gap:0} /* everything else that sticks now sits below the condensed band. The height has to come down by the same amount it was pushed down, or the rail is still sized for a window that starts higher — which is what put the last few entries of the K318 rail behind the sticky footer. */ /* The 16px is air below the condensed band. On a page with no band there is nothing to sit below, and the offset only pushed the rail 16px past the top of its own column — so it rode pre-stuck, out of line with everything beside it. The gap belongs to the band and leaves with it. */ :root{--head-gap:16px} .rail-sticky,.side--reads,.ctx{ top:calc(var(--top-h) + var(--head-h) + var(--head-gap)); max-height:calc(var(--view-h) - var(--head-h) - var(--head-gap))} .glhead{top:calc(var(--top-h) + var(--head-h))} .ar-h2,.lettergroup,.record{scroll-margin-top:calc(var(--top-h) + var(--head-h) + 16px)} @media(max-width:900px){:root{--head-h:0px}.pagehead,.ar-head{position:static}} /* In a 340px rail, buttons stack rather than squeeze — a two-line button label reads as a mistake. */ .btn-stack{display:grid;gap:8px;margin-top:20px} .btn-stack .btn{justify-content:center;text-align:center;white-space:nowrap} /* the rail is 340px; buttons stack, always */ .btn-stack .btn{min-width:0;overflow:hidden;text-overflow:ellipsis} /* ---------- the tournament rotation ---------- Three states, split by what you have to DO about a row rather than by what it is: flare for the one gone by tonight, acid for what is on with room, sand for what has not started. K318's own dates keep the pink they have everywhere else. The rows are stamped by npm run proto; the state on them is recomputed in the browser, because whether something ends tonight depends on when you are reading. */ .ending{width:9px;height:9px;border-radius:50%;background:var(--flare);box-shadow:0 0 0 3px rgba(255,74,23,.24);margin-top:5px} .running{width:9px;height:9px;border-radius:50%;background:var(--acid);box-shadow:0 0 0 3px rgba(230,255,46,.35);margin-top:5px} .coming{width:9px;height:9px;border-radius:50%;background:var(--sand);margin-top:5px} .passed{width:9px;height:9px;border-radius:50%;background:var(--rule);margin-top:5px} /* The tier colours. The calendar reads them off its row dots, the key off its chips. */ .dot--epic{background:var(--ink)} .dot--kvk{background:var(--flare)} .dot--standard{background:var(--acid)} .dot--mini{background:var(--sand);border:1px solid var(--rule)} .dot--kingdom{background:var(--pink)} /* Grouped events (Ragnarök, Trials of Olympus): no box of their own. The row's own top/bottom hairlines bound them like any other row; the parts nest inside as Version 2 clean rows (name + note, no connectors). */ .cal-parts-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--grey);margin:14px 0 4px} .cal-parts{display:flex;flex-direction:column} .cal-part{display:flex;gap:14px;align-items:baseline;padding:8px 0} .cal-part + .cal-part{border-top:1px solid var(--rule)} .cal-part .cpn{font-weight:500;font-size:15px;flex:0 0 auto;min-width:180px} .cal-part .cpd{color:var(--grey);font-size:13px} /* A clan tournament needs somebody else before it starts, so it is marked in the heading rather than buried in the rules. */ .cal-scope,.cal-tag{ display:inline-block;margin-left:10px;vertical-align:2px; font-family:var(--mono);font-size:8px;font-weight:500;letter-spacing:.12em; text-transform:uppercase;padding:3px 7px;border-radius:var(--r-pill); } .cal-scope{background:var(--lilac);color:var(--ink)} .cal-tag{background:var(--bone);color:var(--grey);border:1px solid var(--rule)} /* The four cross-kingdom PvP events the KvK treaty names. Flagged in the data (kvk:true), marked here so the calendar shows at a glance which rows are the ones you can fight other kingdoms in. Flare outline, no fill — a mark, not a loud cell. */ .cal-tag--kvk{background:var(--bone);border-color:var(--flare);color:var(--flare)} /* Event-guide state tag — set live by proto.js from the schedule (window.ATLAS). It rides at the bottom-right of the guide header, aligned to the foot of the lede, so it never adds a row above the title. Hidden until it has something to say, so a guide for an event that is not on the calendar shows nothing. Lives here (not lesson.css) so it does not inline into every Academy lesson. */ .ar-lede-row{display:flex;align-items:flex-end;gap:8px 24px;flex-wrap:wrap;margin-top:16px} .ar-lede-row .ar-lede{margin-top:0;margin-bottom:0} .ev-state{flex:0 0 auto;margin-left:auto;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;border-radius:var(--r-pill);padding:4px 11px;white-space:nowrap} .ev-state:empty{display:none} .ev-state.is-live{background:var(--flare);color:#fff} .ev-state.is-soon{border:1px solid var(--rule);color:var(--grey)} /* A drawn placeholder standing where an illustration will go. * * It takes the geometry of the image it replaced, NOT the whole frame. * A gallery cell has a caption underneath it — the monster's name, its * family — and a placeholder sized to the cell pushes that caption out * of the box entirely. * * The child combinator matters too: a placeholder is a , and so * is the second line of every caption, so .gcell span would otherwise * set the placeholder in 8px mono. */ .gcell > .ph{width:100%;max-width:88px;height:64px;display:block;margin:0 auto} .plate > .ph, .readfeature-plate > .ph{width:100%;height:100%;min-height:110px;display:block} .thumb.ph{width:100%;height:100%;display:block} /* An article's inline figure, standing in for a drawing. */ .ar-img.ph{display:block;width:100%;min-height:200px;border-radius:var(--r)} /* Both halves of a band starting on the same line. The default is bottom-aligned, which suits a band whose right side is a stat row; a right side holding a heading, a bar and a button has to start where the left side's eyebrow does. */ .pagehead-grid--top{align-items:start} /* Button and prompt on one line, so the right column stops out-growing the left and the band reads as one band. */ .acad-cta{margin-top:18px;display:flex;gap:18px;align-items:center;flex-wrap:wrap} /* An account is an offer, not a gate, so it is quieter than the button beside it. */ .acad-account{ margin:0;max-width:26ch;font-family:var(--mono);font-size:9px;font-weight:500; letter-spacing:.1em;text-transform:uppercase;line-height:1.8;color:rgba(17,17,16,.6); } .acad-account a{color:var(--ink);border-bottom:1px solid rgba(17,17,16,.35)} .acad-account a:hover{color:var(--blue);border-color:var(--blue)} /* ---------- the two doors ---------- Sign in and the kingdom gate are the same kind of page — a door with a field in it — so they share a shape: the band, the form on the left, the reason it is worth doing on the right. */ .signin{display:grid;grid-template-columns:minmax(0,1fr) 330px;flex:1;align-items:start} .signin-box{padding:38px clamp(16px,3vw,40px) 54px;max-width:460px} .signin-aside{ border-left:1px solid var(--rule);align-self:stretch; padding:38px clamp(16px,3vw,40px) 54px 30px;background:var(--bone); } .signin-aside h4{margin:0 0 16px;color:var(--grey)} /* The prototype's .field rule only ever met text, textarea and select; a password box is none of those, and it is the field that matters most on both of these pages. */ .signin .field input[type=password]{ width:100%;font-family:var(--sans);font-size:16px;font-weight:400; color:var(--ink);background:var(--paper); border:1px solid var(--rule);border-radius:var(--r);padding:11px 13px; } .signin .field input:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)} .signin .field label em{font-style:normal;color:var(--grey-2)} .signin .field:first-child{margin-top:0} .signin-submit{margin-top:26px;width:100%} .signin-error{ margin:0 0 22px;padding:12px 14px;border-radius:var(--r); background:var(--pink);color:var(--ink);font-size:15px;line-height:1.4; } .signin-swap{ margin:22px 0 0;font-family:var(--mono);font-size:9.5px;font-weight:500; letter-spacing:.12em;text-transform:uppercase;color:var(--grey); } .signin-swap a{color:var(--blue)} .signin-list{margin:0;padding:0;list-style:none} .signin-list li{ padding:0 0 14px;margin-bottom:14px;border-bottom:1px solid var(--rule); font-size:15px;line-height:1.45;color:var(--ink-2); } .signin-list li:last-child{border-bottom:0} .signin-list b{font-weight:600;color:var(--ink)} .signin-note{ margin:8px 0 0;font-family:var(--mono);font-size:9px;font-weight:500; letter-spacing:.1em;text-transform:uppercase;line-height:1.7;color:var(--grey); } @media(max-width:900px){ .signin{grid-template-columns:1fr} .signin-box{max-width:none} .signin-aside{border-left:0;border-top:1px solid var(--rule);padding-left:clamp(16px,3vw,40px)} } /* The monster and item records, in the modal shell. What is particular to each is only what goes at the top of it. */ .mon-art{ background:var(--bone);border-radius:var(--r);padding:18px;margin-bottom:20px; display:flex;align-items:center;justify-content:center; } /* The tile's own shape, so a drawing cut once works in the tile, the modal and the Register index. Full bleed: these are painted panels with their own ground rather than cut-outs. */ .mon-art--has{aspect-ratio:1.77;height:auto;min-height:0;padding:0;overflow:hidden; border-radius:var(--r)} .mon-art--has img{width:100%;height:100%;object-fit:cover;object-position:center top; display:block} /* The codex bestiary cards are 360x440 with a ground of their own. Cropped to the tile's landscape they lose half the drawing, so they sit inside the plate instead of filling it. */ .mon-art--in{background:var(--lilac)} .mon-art--in img{object-fit:contain;object-position:center} /* The game's own stat card, in the order it prints it. */ .mon-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr)); gap:14px;margin-top:14px;padding-bottom:16px;border-bottom:1px solid var(--rule)} /* Four figures across a phone fit three to a row and strand the fourth. Two by two reads as a stat card; three and a leftover reads as a mistake. */ @media(max-width:560px){.mon-figs{grid-template-columns:1fr 1fr}} .mon-figs div{display:flex;flex-direction:column;gap:3px} .mon-figs b{font-size:26px;line-height:1} .mon-figs span{font-family:var(--mono);font-size:8.5px;font-weight:500; letter-spacing:.13em;text-transform:uppercase;color:var(--grey)} .mon-feats{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px} .mon-bon{margin-top:12px} .mon-bon div{display:flex;justify-content:space-between;gap:16px;padding:9px 0; border-bottom:1px solid var(--rule);font-size:15px;color:var(--ink-2)} .mon-bon div:last-child{border-bottom:0} .mon-bon b{font-weight:600;color:var(--ink);white-space:nowrap} /* The Herald's field chips, reused — same job, same size. */ .mon-feats .chip-f{font-family:var(--mono);font-size:8.5px;font-weight:500; letter-spacing:.11em;text-transform:uppercase;color:var(--ink-2);background:var(--bone); border-radius:var(--r-pill);padding:5px 10px;white-space:nowrap} .mon-art .ph{width:100%;height:180px;display:block} .modal-body .qv-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px} /* "font:inherit" is the usual button reset, but it is a shorthand — it took the pill's mono, its size and its weight with it and handed the tag the body's face at the body's size. Reset only what a button needs, and take the tag size the Herald already uses for the same job. */ .modal-body .pill{cursor:pointer;background:none; font-family:var(--mono);font-size:8.5px;font-weight:500;letter-spacing:.11em; text-transform:uppercase;padding:5px 10px} .modal-body .pill:hover{border-color:var(--ink);color:var(--ink)} .item-list{margin:8px 0 0;padding-left:20px;list-style:disc} .item-list li{ margin-top:6px;font-family:var(--serif);font-weight:300;font-size:16px; line-height:1.5;color:var(--ink-2); } .item-list li::marker{color:var(--grey-2)} /* The shell scrolls its own body, so a long record cannot push its own close button off the top of a short screen. */ .modal-box{max-height:88vh;display:flex;flex-direction:column} .modal-box > .modal-head,.modal-box > .modal-foot{flex:none} .modal-box > .modal-body{overflow-y:auto;min-height:0} /* ---------- the calendar's three columns ---------- The rail on the left is where you are; the dates in the middle; the catalogue on the right, beside the dates rather than below thirty- nine rows of them, where nobody would reach it. */ .cols--cal{grid-template-columns:300px minmax(0,1fr) 260px} /* The column dividers are painted on the GRID, not on the columns — a 1px gradient the full height of the layout — so they run to the bottom of the window whatever the columns hold. A border on the sidebar itself stopped where the rotation list stopped, which on a 12,000px page is about four inches in. The left divider comes from .cols; this adds the right one at the rotation column's edge, and the sidebar gives up its own border so the two do not paint a double line a pixel apart. */ .cols--cal{ background-image:linear-gradient(var(--rule),var(--rule)), linear-gradient(var(--rule),var(--rule)); background-size:1px 100%,1px 100%; background-position:300px 0,calc(100% - 260px) 0; background-repeat:no-repeat; } .side--cal{ border-left:0;padding:26px 24px;position:sticky; top:var(--top-h);align-self:start;max-height:var(--view-h); overflow-y:auto;overscroll-behavior:contain; } .side-note{margin:10px 0 0;font-size:13.5px;line-height:1.5;color:var(--grey)} .side--cal .evlist{display:block;margin-top:14px} .side--cal .evlist a{display:block;font-size:14.5px;padding:8px 0;border-bottom:1px solid var(--rule)} .side--cal .evlist a:hover{color:var(--blue)} /* A colour that has to be learned by inference is a colour that gets ignored, so the key sits above the list rather than being implied. */ .cal-key{display:flex;gap:12px 18px;flex-wrap:wrap;align-items:center;flex:1 1 auto;min-width:0} .cal-key-item{ display:inline-flex;align-items:center;gap:8px;font-family:var(--mono); font-size:9px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--grey); } .dot--ending{background:var(--flare)} .dot--running{background:var(--acid)} .dot--coming{background:var(--sand)} .dot--passed{background:var(--rule)} .dot--k318{background:var(--pink)} /* The side column holds the summon-mastery rotation — the one list on this page you read weeks out — so below 1200px it drops under the calendar rather than disappearing. Hiding it was fine when it only held a catalogue of every event; it is not fine now that the rotation lives there. */ @media(max-width:1200px){ /* The rotation column is gone, so its divider goes with it. */ .cols--cal{grid-template-columns:300px minmax(0,1fr); background-image:linear-gradient(var(--rule),var(--rule)); background-size:1px 100%;background-position:300px 0} .side--cal{grid-column:1/-1;position:static;max-height:none;overflow:visible; border-top:1px solid var(--rule);padding:28px 24px 34px} } /* Below 900 the columns stack, so there is nothing left to divide. The reset has to be restated here: .cols drops its own background at this width, but .cols--cal sets one later in the file and would otherwise win and leave a rule ruled down the middle of a single-column page. */ @media(max-width:900px){.cols--cal{display:block;background-image:none}} /* ---------- the read layout, everywhere ---------- From the V1 study. It lived inside read-cp-runs.html's own