/* ═══════════════════════════════════════════════════════════════════════ Nuqleus — the weekly briefing page. Printed, not lit: cool paper throughout, with the Analysis block rising to the clean white sheet: the signal that the reader has moved from scanning to reading. The interface is black and white; the signal red appears in about six places and is always FLAT, and the molten core is the only light source and the only gradient on the page. Nothing here is a card: sections are opened by a hairline rule and closed by white space, the way a printed briefing is set. A box with a radius and a soft shadow is the one gesture that makes this read as a product UI instead of a page. */ /* ═══════════════════════════════════════════════════════════════════════ ═══════════════════════════════════════════════════════════════════════ */ *{box-sizing:border-box;} /* Everything in this sheet is sized in rem, so the whole page scales with the root. The root grows from 16px at 1920 to 20px at 2560 — 1920 is the baseline the design was drawn at and stays untouched, and a 2K screen at 100% browser zoom then reads the way 1920 does at 125%, without the reader having to zoom. At 1920 and below nothing changes at all. Media-query breakpoints stay in px on purpose: those are real device widths. */ /* the root is painted with the FOOTER's dark, not the page's: when a browser has more viewport than the document has content, whatever is under the body box shows through — and under the body box is the footer's end of the page. With the root paper-coloured that gap opened as a pale strip below the dark band. */ html{scroll-behavior:smooth;background:var(--bg-dark); font-size:clamp(16px, calc(16px + 4 * (100vw - 1920px) / 640), 20px);} /* the body wears the HERO's tone, not the sheet's: the sticky masthead lives outside the hero section, so whatever the body is painted with shows through it as a strip across the top. Every band below paints its own ground, so this value is only ever seen up there. */ body{ margin:0;background:var(--bg-hero);color:var(--ink-2); font-family:var(--text);font-size:1rem;line-height:1.7;font-weight:400; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } a{color:var(--ink);text-decoration:underline;text-underline-offset:.18em; text-decoration-thickness:.05em;text-decoration-color:var(--line-2);} a:hover{color:var(--red-ink);text-decoration-color:var(--red-line);} .wrap{max-width:var(--wrap-max);margin:0 auto;padding:0 var(--wrap-pad);} .eyebrow{font-family:var(--text);font-size:0.6875rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--red-ink);} /* ── topbar ─────────────────────────────────────────────────────────── */ /* At the top of the page the bar has no ground at all — it sits straight on the sheet, which is the single cheapest thing that makes a header look like a masthead instead of app chrome. The ground and the rule only fade in once the page has scrolled under it, where they are doing real work (see the .scrolled toggle in nucleus.js). */ .topbar{position:sticky;top:0;z-index:40;background:transparent;border-bottom:0.0625rem solid transparent; transition:background .2s,border-color .2s,backdrop-filter .2s;} .topbar.scrolled{background:rgba(244,245,247,.86);border-bottom-color:var(--line); backdrop-filter:blur(0.875rem);-webkit-backdrop-filter:blur(0.875rem);} /* Every item in the bar is set to line-height:1 before anything is centred. A flex row centres BOXES, not glyphs, so items carrying the page's 1.7 leading sit at a different optical height than one that hugs its type — which is what threw the whole bar out when the button was fixed. With the leading normalised, align-items:center lands them on one line. */ .topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;height:var(--topbar-h); line-height:1;} .wordmark{display:flex;align-items:center;gap:0.5625rem;font-family:var(--display); font-weight:600;font-size:1rem;line-height:1;letter-spacing:-.014em;color:var(--ink); text-decoration:none;} .wordmark:hover{color:var(--ink);} /* the drawn logotype, sized off the bar rather than off its own file: height is what has to match the masthead, the 418x115 box gives the width */ .wm-logo{display:block;height:1.6rem;width:auto;} /* The label used to be pushed down 2px to sit on the wordmark's BASELINE. It reads as falling off the line, so it is centred on it instead: no offset on the label, and the divider centred against its own box rather than nudged by a matching -2px. */ /* set in the text face at a working letter-spacing, not inherited from .wordmark: that rule is tuned for the display serif the drawn logotype replaced, and .16em of tracking on Instrument Sans reads as gapped-out rather than as a small caps label. Title case now that it isn't forced to caps, and a touch darker than --muted — enough to hold its own next to the drawn logotype's ink, not so dark it competes with it. */ .wordmark .sub{font-family:var(--text);font-size:0.8rem;line-height:1;letter-spacing:.06em; color:#56606C;color:color-mix(in srgb,var(--muted) 75%,var(--ink-2) 25%); font-weight:400;padding-left:0.5625rem;margin-left:0.125rem; position:relative;} .wordmark .sub::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%); width:0.0625rem;height:1.0625rem;background:var(--line-2);} .topnav{display:flex;align-items:center;gap:1.625rem;} .topnav a{font-size:0.84375rem;line-height:1;font-weight:400;color:var(--ink-2); transition:color .15s;text-decoration:none;} .topnav a:hover{color:var(--ink);} /* line-height:1 is what actually centres the label: the inherited 1.7 leaves the text box taller than the glyphs, so symmetric padding still lands the word low. The play mark is an SVG for the same reason — the ▶ character sits off its own baseline in most faces. */ .pill{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem; background:var(--red);color:var(--ink-inv); font-weight:600;font-size:0.8125rem;line-height:1;letter-spacing:.04em;padding:0.6875rem 1.125rem; border:0;border-radius:var(--radius);cursor:pointer;transition:background .15s;white-space:nowrap;} .pill svg{display:block;width:0.5625rem;height:0.6875rem;flex-shrink:0;} .pill:hover{background:var(--red-deep);color:var(--ink-inv);} /* ── hero — the cover plate; type on paper, the way a briefing opens ── */ /* No photographic plate: a dark stock globe was the Quantivex tell, and on paper any image behind the headline costs the contrast the type needs. The band is the flat ground, and it ends on nothing at all. Two bands are separated by a step in TONE, never by a rule and never by a fade: the hero sits one step darker than the sheet below it, and that edge is the only thing marking the join. A rule there reads as product chrome, and a vertical fade reads as a gradient — and the core is the only gradient allowed in the sheet. */ /* The glow runs above the band on purpose, so the top edge is open and the other three are not. overflow-x:clip rather than hidden — hidden on one axis forces the other to auto, which would close the top again — and clip-path holds the bottom and sides flush so the photograph and the equaliser are still trimmed at the band. The masthead is transparent until the page scrolls, so what runs past the top reads straight through it. */ .hero{position:relative;overflow-x:clip;overflow-y:visible; clip-path:inset(-40rem 0 0 0);background:var(--bg-hero);} /* --gap-listen is used twice on purpose: above the LISTEN label and below the player, so the transport sits in symmetric space instead of being crowded against the band edge */ /* The hero's two ends are tied together so it can never end up cramped at one of them, with the foot carrying a deliberate 8% more than the head — the whole clamp is scaled, not just its cap, so the extra weight below holds at every width. --gap-listen is the smaller rhythm around the transport itself. */ /* The hero's only ornament: a block equaliser rising across the right of the band. It sits at z-index 0 so it passes UNDER the headline, the standfirst and the player — it is a ground, not an element. Two things keep it from ever competing: the whole field is at 11% opacity, and a horizontal mask holds the left fainter still and lets the right come up, which is where the band has nothing else in it. The blocks are HTML with a repeating gradient rather than an SVG, so they stay exactly square at any viewport instead of being stretched by a viewBox. */ .hero-art{position:absolute;inset:0;z-index:0;pointer-events:none; overflow-x:clip;overflow-y:visible;clip-path:inset(-40rem 0 0 0);} /* The photograph is shot on white, and mix-blend-mode:multiply is what makes that usable: over a light ground, white multiplies away to nothing and only the metal stays, so the picture has no box and no cut-out edge. Grayscale on top of it keeps the page achromatic — a colour photo would be the only other hue on the sheet and would fight the accent for attention. The mask fades the left and top edges so the frame's own crop never reads as an edge. */ /* Anchored to the CENTRED COLUMN and measured in px, which is what stops it drifting under browser zoom. It used to sit `right:23em` from the viewport edge at a width in rem and vw, and all three of those ride the root's 16px-to-20px vw ramp — zoom changes the viewport's CSS width, the ramp re-evaluates, and the photograph walked across the band while the wrap, being capped in px, stayed exactly where it was. It is built from the SAME two values .wrap is built from, so its right edge lands exactly on the column's right edge and stays there. calc(50% - half the measure + the gutter) is that edge while the measure is capped; below the cap the wrap is the viewport and the gutter alone is the inset, which is what the max() falls back to. Sharing the units with .wrap is the whole point — the drift came from measuring the photograph in one system and the column it had to line up with in another. */ /* --mic-out pushes it PAST the column's right edge. It is the one place the photograph is allowed to break the measure: it is a ground, not content, and the hero's overflow:hidden trims whatever runs off the band. Held in px so the overhang stays the same 50px at every width — in rem it would ride the root's 16-to-20px ramp and grow to 62px on a 2K panel. */ .ha-mic{--mic-out:50px;position:absolute;bottom:0;width:19rem;z-index:10;display:block;height:auto; right:max(calc(var(--wrap-pad) - var(--mic-out)), calc(50% - var(--wrap-max) / 2 + var(--wrap-pad) - var(--mic-out)));} /* Brightness alone cannot touch the blacks: it is a multiplier, and 0 * anything is still 0. Opacity looked like the fix, but what sits behind the mic in its own painted area is not a flat ground — .ha-eq's red bars are back there too — so fading the mic toward "whatever is behind it" bled the equaliser's red into the grille's shadows. That reads as a leak, not as a lighter photograph. contrast BELOW 1 is the one filter that lifts blacks using only the image's own pixels: it pulls every value toward mid-grey, so 0 moves up and 255 clips back down to white, and none of it touches what is painted behind the element. */ .ha-mic{filter:grayscale(1) contrast(.82) brightness(1.15); -webkit-mask-image:linear-gradient(to right,transparent 0%,rgb(0,0,0) 30%), linear-gradient(transparent 0%,rgb(0,0,0) 16%); -webkit-mask-composite:source-in; mask-image:linear-gradient(to right,transparent 0%,rgb(0,0,0) 30%), linear-gradient(transparent 0%,rgb(0,0,0) 16%); mask-composite:intersect;} @media(max-width:1000px){.ha-mic{display:none;}} /* The index's image, seated on the same right edge as the chapter's photograph and off the same two tokens, so both heroes hang their art on one line. multiply is what removes the white: the picture is lit on a near-white ground, and over a light page white multiplies away to nothing while the folds stay. It is the technique the mic's own comment describes and the reason no cut-out is needed — there is no edge to cut, the subject IS white and only its shading is the image. Grayscale on top for the same reason it is on the mic: the page stays achromatic and the accent keeps its monopoly on hue. The mask dissolves the left and bottom edges so the frame's own crop never reads as one. */ /* Flush to the PAGE's right edge, not the column's: it is a ground and not content, and the margin the type keeps is exactly what it should ignore. Sized to the band's full height with object-fit:cover rather than by its own aspect. Left to grow by width it stood 28rem tall in a 17rem band, so its own top and bottom — and the mask that dissolves them — fell outside the band entirely and the band's edges did the cutting instead. Boxed to the band, every percentage in the mask lands where it can be seen. */ /* It runs up THROUGH the masthead to the top of the page: the bar is transparent until the page scrolls, and the hero's top is already open, so the only thing stopping it was its own box. Pulled up by the bar's own height and stretched between top and bottom, so no number is repeated and the art always meets the page edge exactly. */ /* The height is written out rather than left to `bottom:0`. An absolutely positioned replaced element with `height:auto` takes its intrinsic ratio and then drops `bottom` as over-constrained (CSS 2.1 10.6.5), so the box was sized by width alone: it shrank with the viewport instead of spanning the band, and by 1100px only a ~15rem-wide sliver of it reached past the negative top at all. Same span as before — the bar's height plus the band — but as a height, which is the one form the box actually honours. It is also what makes the `object-fit:cover` below mean anything: with an auto height there was nothing to crop. */ .ha-folds{position:absolute;top:calc(-6 * var(--topbar-h));right:-55px; width:clamp(31rem,45vw,93rem);height:calc(100% + 6 * var(--topbar-h)); object-fit:cover; mix-blend-mode:multiply;filter:grayscale(1) contrast(1.06);opacity:.3; /* INTERSECT, not add. Two mask layers composited with source-over are a union, and a union of two fades is not a softer mask — it is barely a mask at all: a pixel survives if EITHER gradient allows it, so the left fade is overruled everywhere the bottom one is opaque and vice versa. Only the corner where both go transparent actually dissolves, and the bottom edge stays hard against the foot of the band. Intersected, a pixel survives only where BOTH allow it, which is what makes an edge disappear. Both syntaxes are written out: Firefox reads only the unprefixed pair. */ -webkit-mask-image:linear-gradient(to right,transparent 0%,rgb(0,0,0) 38%), linear-gradient(to top,transparent 0%,rgb(0,0,0) 12%); -webkit-mask-composite:source-in; mask-image:linear-gradient(to right,transparent 0%,rgb(0,0,0) 38%), linear-gradient(to top,transparent 0%,rgb(0,0,0) 12%); mask-composite:intersect;} @media(max-width:1000px){.ha-folds{display:none;}} /* the accent as a ground rather than a mark — the one place it is allowed to be a gradient, sitting behind the photograph in the corner */ .hero-art::after{content:"";position:absolute;top:0rem;right:-14rem;width:60rem;height:60rem; pointer-events:none; background:radial-gradient(circle at 58% 46%,rgba(239, 90, 93, 0.20),rgba(239,90,92,0) 62%);} /* 40rem x 25rem is exactly the viewBox's 640 x 400 at the design root, so the grid's spacing stays locked to the equaliser's block module. overflow:visible lets the lines run out past the top and right; the parent's overflow:hidden then trims them at the band's own edges. */ .ha-grid{position:absolute;top:0;right:0;width:40rem;height:25rem;max-width:52%;overflow:visible;} /* .ha-grid line{stroke:rgba(16,21,28,.10);stroke-width:1;stroke-dasharray:4 4;} */ /* One square lattice: the gap BETWEEN columns is the same 0.3125rem as the gap between blocks inside a column, so the field reads as one grid and not as a row of separate bars. That means the column count has to cover the widest viewport and overflow on the left at narrower ones — which is fine, because the profile is anchored to the right and the mask dissolves that edge long before the clip. */ /* it runs to the very edge of the viewport — no right padding, because it is a ground and not content, and content margins would only pull it back off the corner it is meant to fill */ .ha-eq{position:absolute;left:46%;right:0;bottom:0;display:flex;align-items:flex-end; justify-content:flex-end;gap:0.3125rem;overflow:hidden; padding:0;opacity:.13; /* the ramp comes up early: the stretch just right of the text column used to be the faintest part of the field, and that is exactly where the band has the most empty page to carry */ -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.55) 14%,rgba(0,0,0,.9) 38%,rgba(0,0,0,1) 60%,rgba(0,0,0,.9) 82%,transparent 100%); mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.55) 14%,rgba(0,0,0,.9) 38%,rgba(0,0,0,1) 60%,rgba(0,0,0,.9)32%,transparent 100%);} /* Smaller blocks, and never an even field: each column carries its own weight in --o, and a vertical mask fades every column toward its top, so within one column the blocks run from light at the crest to solid at the base. Between that and the horizontal ramp on the parent, the field goes light, then dark, then light again in both directions. */ .ha-col{flex:0 0 0.6875rem;height:calc(var(--n) * 1rem - 0.3125rem);opacity:var(--o,1); background:repeating-linear-gradient(to bottom,var(--red) 0 0.6875rem,transparent 0.6875rem 1rem); -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,1) 0%,rgba(0,0,0,.9) 45%,rgba(0,0,0,.32) 100%); mask-image:linear-gradient(to top,rgba(0,0,0,1) 0%,rgba(0,0,0,.9) 45%,rgba(0,0,0,.32) 100%);} @media(max-width:1000px){.hero-art{display:none;}} .hero{--pad-hero:clamp(3.5rem,7vw,3.5rem);--gap-listen:clamp(2.5rem,4.6vw,4rem);} .hero .wrap{position:relative;z-index:2;padding-top:var(--pad-hero); padding-bottom:var(--band-gap);} /* The way back to the index. It takes the SECONDARY ink and the small tracked setting, not the accent: it is the exit, and an exit that competes with the headline is a mis-set page. The arrow is its own span so it can slide on hover while the word stays. It is pulled UP out of the hero's top padding to sit close under the band's edge, near the masthead it belongs with, rather than floating in the middle of the opening white space. What it takes off the top it does NOT give back on the bottom. Compensating kept the kicker pinned but banked the whole pull as a gap under the link, and because --pad-hero carries a 7vw term that gap changed size with the viewport while the space above it did not, so the two never looked the same at two zoom levels. Both are flat rem values now. The two gaps are deliberately UNEQUAL: the link belongs to the masthead above it, not to the kicker below, so it sits tight to the bar and holds the kicker at arm's length. --bl-top is the whole distance from the band's edge; --bl-gap is the whole distance to the kicker. */ .backlink{display:inline-flex;align-items:center;gap:0.5rem;text-decoration:none; font-family:var(--text);font-size:0.71875rem;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--muted); --bl-top:1rem; --bl-gap:2.75rem; margin-top:calc(-1 * (var(--pad-hero) - var(--bl-top))); margin-bottom:var(--bl-gap); transition:color .15s;} .backlink .bl-arrow{display:inline-block;font-size:1.125rem;line-height:1; transition:transform .15s;} .backlink:hover{color:var(--red-ink);} .backlink:hover .bl-arrow{transform:translateX(-0.1875rem);} .kicker{display:flex;align-items:center;gap:0.875rem;flex-wrap:wrap;margin-bottom:1.375rem;} .kicker .date{font-family:var(--text);font-size:0.71875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);} .kind{font-family:var(--text);font-size:0.625rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:var(--ink-inv);background:var(--ink);padding:0.3125rem 0.625rem;border-radius:var(--radius);} /* the measure is root-relative (rem), never ch: fitHeadline() shrinks this element's own font-size, so a ch column would shrink with it and the line count would never come down. rem is anchored to the root, which the fit loop does not touch. */ h1.headline{font-family:var(--display);font-weight:600;font-size:clamp(2rem,4.7vw,3.5rem); line-height:1.14;letter-spacing:-.026em; color:var(--ink);margin:0;max-width:min(100%,55rem);} /* the accent runs on inline, continuing the sentence rather than breaking to its own line. On paper it is the marker pen, not a colour swap: the ink stays black and the highlight sits behind it, which is the one device the whole register is built on. */ .hl-accent{color:var(--ink); background:linear-gradient(var(--red-mark),var(--red-mark)) no-repeat; background-size:100% 0.38em;background-position:0 86%; padding:0 0.06em;} .standfirst{margin:1.5rem 0 0;} /* The standfirst is not secondary matter, it is the opening of the piece: both beats sit one step darker than the page's general secondary ink. They are set locally rather than by moving --muted, which carries every other quiet line on the page. */ .deck{font-size:1.125rem;line-height:1.6;font-weight:500;color:var(--ink-read);max-width:58ch;margin:0;} .deck-sub{font-size:0.90625rem;line-height:1.8;font-weight:400;color:var(--ink-2); max-width:74ch;margin:0.9375rem 0 0;} /* ── player — audio is the deliverable, so it gets the hero's bottom rail ─ */ .player{display:flex;align-items:center;gap:0.875rem;margin:0;max-width:45rem; background:var(--bg-card); border:0;border-radius:var(--radius);padding:0.75rem 1rem; box-shadow:0 0 3rem rgba(16,21,28,.02);} .player[hidden]{display:none;} .pl-btn{background:none;border:0;color:var(--muted);cursor:pointer;padding:0.25rem;display:flex; align-items:center;justify-content:center;transition:color .15s;flex-shrink:0;} .pl-btn:hover{color:var(--red);} .pl-play{width:2.625rem;height:2.625rem;border-radius:50%;background:var(--red);color:var(--ink-inv); box-shadow:0 0 0 0.3125rem var(--red-wash);} .pl-play:hover{color:var(--ink-inv);transform:scale(1.05);} .pl-wave{flex:1;min-width:7.5rem;height:2.375rem;cursor:pointer;} .pl-wave svg{display:block;width:100%;height:100%;} .pl-time{font-family:var(--text);font-size:0.71875rem;color:var(--muted);white-space:nowrap; font-variant-numeric:tabular-nums;} .pl-rate{font-family:var(--text);font-size:0.6875rem;font-weight:600;color:var(--muted); border:0.0625rem solid var(--line-2);border-radius:var(--radius);padding:0.1875rem 0.4375rem;background:none;cursor:pointer;} .pl-rate:hover{color:var(--red-ink);border-color:var(--red-line);} .pl-eyebrow{font-family:var(--text);font-size:0.65625rem;font-weight:600;letter-spacing:.18em; text-transform:uppercase; color:var(--red-ink);margin:var(--gap-listen) 0 0.8125rem;display:block;} /* ── bands ──────────────────────────────────────────────────────────── */ .band-core{position:relative;background:var(--bg); padding:var(--band-gap) 0 clamp(3.5rem,7vw,6rem); /* the readout's row gap, declared once: the listing is TWO grids — the six that stay open and the tail inside the disclosure — and the seam between them has to measure the same as a row gap inside either one, or the split shows */ --readout-gap:clamp(0.875rem,1.6vw,1.25rem);} /* The starfield went out with the dark, and the soft orbs that replaced it went out with the cards: the band is the flat sheet. The class name is kept because both bands hang off it. */ .starfield{position:relative;background:var(--bg);} .band-core .wrap{position:relative;z-index:2;} .band-read{background:var(--bg-read); padding:clamp(2.75rem,5vw,4.5rem) 0 clamp(3rem,6vw,5.5rem);} /* the closing band takes the hero's darker tone, so the page shuts on the same note it opened on and the white panel that straddles the seam has something to read against */ .band-close{position:relative;background:var(--bg-hero); padding:clamp(2.75rem,5vw,4.5rem) 0 clamp(3rem,6vw,5rem);} .band-close .wrap{position:relative;z-index:2;} /* Section header: heading over a quiet deck. It does the work a horizontal rule used to do, opening a section loudly enough that the bands need no hairline between them. */ .sec-head{max-width:38.75rem;margin:0 0 clamp(2.125rem,4.2vw,3.375rem);} /* marker-pen highlight, sized in em so it tracks the type at any root size */ .sec-head h2{font-family:var(--display);font-size:clamp(1.375rem,2.1vw,1.75rem);font-weight:600; line-height:1.28;letter-spacing:-.014em;color:var(--ink);margin:0;display:inline-block; background:linear-gradient(var(--red-mark),var(--red-mark)) no-repeat; background-size:100% 0.44em;background-position:0 100%; padding:0 0.22em;margin-left:-0.22em;} .sec-head h2 em{font-style:normal;color:var(--red-ink);} .sec-head p{font-size:0.9375rem;font-weight:400;line-height:1.6;color:var(--muted); margin:0.75rem 0 0;max-width:52ch;} /* when the deck runs ABOVE the heading it stops being a deck and becomes the eyebrow */ .sec-head p.over{font-family:var(--text);font-size:0.6875rem;font-weight:700;letter-spacing:.2em; text-transform:uppercase;color:var(--red-ink);margin:0 0 0.875rem;} /* A movement inside a section, not a section of its own: the chart and the readout are the same six signals seen two ways, so this one drops the marker band and the display size and reads as subordinate to the header above it. PLACEHOLDER TREATMENT — awaiting direction. */ /* the sub head is ruled the full width of the wrap, not capped to the measure the other heads take: it opens the readout grid below it, so the line has to be as wide as what it opens. */ .sec-head.sub{max-width:none;border-bottom:0.0625rem solid var(--line); padding-bottom:0.8125rem;margin-bottom:clamp(1.25rem,2vw,1.75rem);} .sec-head.sub h2{font-size:clamp(1.0625rem,1.35vw,1.1875rem);background:none; padding:0;margin-left:0;} .sec-head.sub p{font-size:0.875rem;margin-top:0.4375rem;} /* add `center` to a .sec-head to centre that header instead */ .sec-head.center{text-align:center;margin-left:auto;margin-right:auto;} .sec-head.center p{margin-left:auto;margin-right:auto;} .sec-head.center .mark{margin-left:auto;margin-right:auto;} /* the dev-only sources appendix keeps the quiet label — it must never compete with the reader-facing sections above it */ .rule{display:flex;align-items:baseline;gap:1rem;margin:0 0 1.625rem;} .rule h2{font-size:0.71875rem;letter-spacing:.22em;text-transform:uppercase; color:var(--muted);margin:0;white-space:nowrap;font-weight:500;} .rule::after{content:"";flex:1;height:0.0625rem;background:var(--line);} /* ── the Nuqleus ────────────────────────────────────────────────────── */ /* Chart centred, key cards flanking it. The chart carries no frame of its own — a box around a circle reads as a picture of a diagram; loose on the ground it reads as the instrument. The cards do the structuring instead, two a side. */ .hero-core{display:grid;counter-reset:axis; grid-template-columns:minmax(0,0.8fr) minmax(0,1.55fr) minmax(0,0.8fr); gap:clamp(0.875rem,1.8vw,1.5rem);align-items:stretch; /* the chart and the readout under it are one section, not two — but only just: at 2rem the readout head crowded the cards and the two stopped being separate steps at all. This sits between the band break it was (4-7.5rem) and the crowding it became. */ margin-bottom:clamp(3.25rem,5.5vw,5rem);} .radar-col{position:relative;z-index:0;display:flex;align-items:center;} /* overflow:visible is the whole trick. An root clips at its viewBox by default, which is what was cutting the ambient glow off on four sides. Made visible, the glow paints outside the element's box — spreading behind the flanking cards, which sit above it on z-index — WITHOUT inflating that box. Growing the viewBox instead made the box tall enough to stretch the whole row. */ #radar{display:block;width:100%;height:auto;overflow:visible;} /* the cards stay grouped next to the chart, centred ON it — the column is stretched to the chart's full height, so centring the content is what puts the key on the nucleus' own axis instead of hanging it from the top of the band */ .key-col{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center; gap:clamp(1.75rem,3vw,2.75rem);color:var(--ink-2);} .axis,.note{flex:0 0 auto;} /* These three ARE boxes, against the rule that governs the rest of the page ("a block is opened by a rule and closed by white space"). They are the exception on purpose: the key is the one thing on the sheet that is not read in sequence — the eye leaves the chart, takes one answer and goes back — and a panel is what says "this is a thing to look things up in". The numeral is a CSS counter, the same trick the readout uses: it costs no markup and no copy, and it says the three questions are asked in an order — position, then colour, then shape. */ .axis{margin:0;position:relative;counter-increment:axis; background:var(--bg-raise);border-radius:var(--radius-card); padding:clamp(1.25rem,1.9vw,1.625rem) clamp(1.125rem,1.7vw,1.5rem);} .axis::before{content:counter(axis,decimal-leading-zero);display:block; font-family:var(--display);font-size:clamp(1.875rem,2.9vw,2.5rem);font-weight:700; line-height:1;letter-spacing:-.02em;color:var(--line-2);margin-bottom:0.625rem;} /* line-height, not just the margin: the question inherits the body's 1.65, which hangs a lot of empty leading under the glyphs, and no margin on the explainer can claw that back. */ .axis .q{font-family:var(--display);font-size:1.0625rem;font-weight:600;letter-spacing:-.01em; line-height:1.28;color:var(--ink);margin-bottom:0.25rem;} /* the explainer takes its own line: in a flanking card it is too narrow to trail the question without orphaning two or three words */ .axis .q em{font-style:normal;font-family:var(--text);font-size:0.78125rem;letter-spacing:.03em; color:var(--muted);font-weight:400;display:block;margin-top:0.2rem;margin-bottom:1rem;} /* the capital is CSS, not copy: the explainers are written lowercase in the template and the data, and ::first-letter lifts the first one without any of them being rewritten */ .axis .q em::first-letter{text-transform:uppercase;} .keyrow{display:flex;align-items:center;gap:0.625rem;font-family:var(--text);font-size:0.8125rem; color:var(--ink-2);margin:0.4375rem 0;} .keyrow .sw{width:1rem;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:0.75rem;color:var(--ink);} /* the gloss used to hang off an em dash; spacing and colour carry the same separation */ .keyrow .gloss{color:var(--muted);margin-left:0.625rem;} /* Heat and lens are both chips. The tint is derived from the label's own colour with color-mix, so one rule covers every value of both channels and nothing has to be restated per hue — including the lens colours, which arrive as an inline style from the data. ACT breaks the pattern on purpose: it fills solid and reverses to white, so the one urgency that demands action is the loudest thing in the readout. */ .chip{display:inline-flex;align-items:center;font-family:var(--text);font-size:0.625rem; font-weight:700;letter-spacing:.12em;flex-shrink:0;white-space:nowrap; padding:0.08rem 0.5rem;border-radius:var(--radius); background:rgba(16,21,28,.05); /* fallback: a browser without color-mix still gets a chip */ background:color-mix(in srgb,currentColor 12%,transparent);} /* scoped to the key: .chip is shared with the readout cards, and the step up was asked for here, not there */ .axis .chip{font-size:0.6875rem;} .ringbadge{color:var(--dismiss);} .rb-ACT{color:var(--ink-inv);background:var(--act);} .rb-TRACK{color:var(--track);} .rb-SCAN{color:var(--scan);} .rb-DISMISS{color:var(--dismiss);} .lensrow{display:flex;flex-wrap:wrap;gap:0.5rem 1.125rem;font-family:var(--text);font-size:0.8125rem;margin-top:0.5rem;} .lensrow span{display:flex;align-items:center;gap:0.4375rem;color:var(--ink-2);} .lensrow i{width:0.5625rem;height:0.5625rem;border-radius:50%;} /* the note is a card too, but WHITE where the three questions are raised grey: it closes the key without joining it. Same corner and same padding, so the column still reads as one stack; the lighter ground and the missing numeral are what say this one is not a fourth question. It takes the readout's shadow rather than a hairline, because white on the band needs an edge and a border would be the only drawn box on the page. */ /* set in PX, not rem: the root scales from 16px at 1920 to 20px at 2560, so a rem here rides that ramp and the note lands at 18.75px on a 2K panel without anyone asking it to. This one block is pinned and steps once, at 2K, by its own rule below. */ .note{font-family:var(--text);font-size:15px;color:var(--muted);line-height:1.65;margin:0; background:var(--bg-note);border-radius:var(--radius-card); box-shadow:0 0 3rem rgba(16,21,28,.03); padding:clamp(1.25rem,1.9vw,1.625rem) clamp(1.125rem,1.7vw,1.5rem);} .note b{color:var(--ink);font-weight:600;} .note-h{display:block;font-size:0.8125rem;letter-spacing:.02em;margin-bottom:0.75rem;} .note-map{list-style:none;margin:0 0 0.875rem;padding:0; border-top:0.0625rem solid var(--line);border-bottom:0.0625rem solid var(--line);} .note-map li{display:flex;gap:0.75rem;padding:0.375rem 0;font-size:0.75rem;} .note-map li+li{border-top:0.0625rem solid var(--line);} .note-map span{flex:0 0 4.75rem;color:var(--ink);font-weight:600;} .note p{margin:0;} .note-hint{margin-top:0.75rem!important;color:var(--dim);} /* ── core readout — one card per signal ─────────────────────────────── */ /* A mark up top, the title, a coloured uppercase label, the body, then a footed line closed off by a rule. The mark is the urgency badge and the coloured label is the lens, so one card carries all three channels without repeating any of them. */ /* Six entries in a listing, two to a row so each one is wide enough to breathe. They are panels again, but the kind that reads as printed and not as UI: a flat sheet one step off the band, no border, no shadow, and a soft radius — the three things that made the old cards look like product chrome were the hairline, the drop shadow and the hover lift, not the panel. The counter is CSS, so the number costs no markup and no copy: it is the position in the readout, nothing more. */ /* min() on the track floor, not a breakpoint: below 26rem of viewport the minimum would be wider than the column itself and auto-fit has no way to shrink it, so the cards ran off the side of the page. min(26rem,100%) lets the floor collapse to the available width instead. */ .readout{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(26rem,100%),1fr)); gap:var(--readout-gap);} .scard{display:flex;flex-direction:column;position:relative;background:var(--bg-card); border-radius:var(--radius);padding:clamp(1.5rem,2.4vw,2rem); box-shadow:0 0 3rem rgba(16,21,28,.02);} /* the numeral is set big and pale, as a printed index does it: it locates the entry without ever competing with its title for the eye */ /* the urgency runs as the entry's eyebrow, the way a listing puts its one coloured label above the title */ .scard .ringbadge{min-width:0;align-self:flex-start;} .scard h3{font-family:var(--display);font-size:1.3125rem;font-weight:500;line-height:1.34; letter-spacing:-.012em;color:var(--ink);margin:0.6875rem 0 0;} /* the lens is coloured TEXT, not a chip: the chip belongs to the label above the title, and making both of them chips put two competing blocks on one entry. On the rail it matches the tracking of the verdict and the movement beside it, so the three read as one line. */ .scard-lens{display:flex;align-items:center;gap:0.4375rem;font-size:0.6875rem;font-weight:600; letter-spacing:.08em;text-transform:uppercase;margin:0;} .scard-lens i{width:0.4375rem;height:0.4375rem;border-radius:50%;flex-shrink:0;} .scard-sum{font-size:0.9375rem;line-height:1.5;color:var(--muted);margin:0.4rem 0 0;max-width:46ch;} /* One meta rail closes the entry: lens, verdict, movement, held apart by space alone. margin-top:auto pins it to the panel's bottom so the rails sit on one baseline across a row no matter how long each summary runs. */ .scard-foot{display:flex;align-items:center;gap:1.375rem;flex-wrap:wrap; margin-top:auto;padding:1.125rem 0 0;} .verdict{font-size:0.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase; display:flex;align-items:center;gap:0.375rem;color:var(--ink-2);white-space:nowrap;} .verdict .g{font-size:0.75rem;} /* the movement is the third item on the meta rail — this signal's change since last week */ .movechip{font-size:0.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase; white-space:nowrap;color:var(--muted);} /* The disclosure holding the tail of the readout. The control is ordered LAST, not first:
puts its summary ahead of its content, but a button that pushes twenty-six cards out underneath itself leaves the reader stranded at the top of what they just opened. Ordered second, it travels down to the end of the tail and is waiting there — the same button, now the way back. It closes on the same rule the readout's own head opens with, so the block is bracketed by a matched pair. The label swaps by state with two spans rather than script:
is script-free and the text has to stay that way. */ .readout-more{margin-top:clamp(1.75rem,3vw,2.75rem);display:flex;flex-direction:column; border-bottom:0.0625rem solid var(--line);padding-bottom:clamp(1.25rem,2vw,1.75rem);} .readout-more[open]{margin-top:var(--readout-gap);} .readout-more>.readout{order:1;} .readout-more>summary{order:2;align-self:flex-start;list-style:none;cursor:pointer; display:inline-flex;align-items:center;gap:0.5625rem; font-family:var(--text);font-size:0.75rem;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--ink); border:0.0625rem solid var(--ink-2);border-radius:var(--radius); padding:0.6875rem 1.125rem;background:none; transition:color .15s,border-color .15s,background .15s;} .readout-more[open]>summary{margin-top:clamp(1.75rem,3vw,2.75rem);} .readout-more>summary::-webkit-details-marker{display:none;} /* the default triangle is removed on both engines: a marker that cannot be coloured or positioned is worse than none */ .readout-more>summary::after{content:"";width:0.4375rem;height:0.4375rem; border-right:0.09375rem solid currentColor;border-bottom:0.09375rem solid currentColor; transform:rotate(45deg) translate(-0.09375rem,-0.09375rem);transition:transform .15s;} .readout-more[open]>summary::after{transform:rotate(-135deg) translate(-0.09375rem,-0.09375rem);} .readout-more>summary:hover{color:var(--red-ink);border-color:var(--red-line); background:var(--red-wash);} .readout-more>summary:focus-visible{outline:0.125rem solid var(--red-line);outline-offset:0.25rem;} .readout-more[open] .rm-more,.readout-more:not([open]) .rm-less{display:none;} .rsrc{font-size:0.6875rem;margin-top:0.5625rem;display:flex;gap:0.875rem;flex-wrap:wrap;} /* Capped to a measure. Uncapped it ran the full 1248px of the wrap, which at 11.5px is around 230 characters — some thirty words to a line, and a line that long loses the reader on the way back to the left edge. 45rem lands near 130 characters, about 17 words, under the 20-word ceiling with room for the long names this list carries. The cap is in REM and the type is too, so the measure holds in CHARACTERS across the root's 16px-to-20px ramp: on a 2K panel the box grows to 900px and the type grows with it. A px cap would have tightened the line to 13 words up there instead. */ .faded{font-size:0.71875rem;color:var(--muted);margin:1.375rem 0 0;font-style:italic; max-width:45rem;} /* ── analysis — the cleanest sheet, raised ink: the calm zone ────────── */ .analysis{margin-top:0.25rem;} /* The dead space used to sit on the RIGHT, because the body was capped at a 68ch measure inside a column that was wider than that. The cap is gone and the leftover moved to the left column instead: the two columns now divide the container exactly, and the body's measure is whatever the split leaves it — which at the design width lands around 80 characters, the top of the comfortable range. The wider side column also stops the section headings wrapping to three lines. */ .sec{padding:2.125rem 0;border-bottom:0.0625rem solid var(--line-soft);display:grid; grid-template-columns:minmax(0,0.52fr) minmax(0,1fr);gap:clamp(2rem,3.5vw,3.25rem);} .sec:last-child{border-bottom:0;} .sec .side{position:sticky;top:5.375rem;align-self:start;} .sec .sec-eyebrow{font-family:var(--text);font-size:0.65625rem;letter-spacing:.18em;text-transform:uppercase; font-weight:600;display:flex;align-items:center;gap:0.5rem;} .sec .sec-eyebrow i{width:0.5rem;height:0.5rem;border-radius:50%;} .sec h3{font-family:var(--display);font-size:clamp(1.375rem,2.4vw,1.8125rem);font-weight:600; line-height:1.28;letter-spacing:-.016em; color:var(--ink);margin:0.75rem 0 0;} .takeaway{font-size:1.125rem;line-height:1.6;font-weight:500;color:var(--ink); border-left:0.125rem solid var(--red);padding:0.125rem 0 0.125rem 1.125rem;margin:0 0 1.25rem;} /* The one place in this sheet that is capped in px, and on purpose. 1.125rem is 18px at the 16px root the design is drawn at, and the min() stops it there when the root grows past 1920: the long-form body is the only thing read word by word, and on a real 2K it was landing at 22px, which is too large to read comfortably. Everything else still scales with the root. */ .sec .body{font-size:min(1.125rem,18px);line-height:1.8;color:var(--ink-read);white-space:pre-wrap;} .s-Grow{color:var(--grow);} .s-Optimize{color:var(--optimize);} .s-Protect{color:var(--protect);} .s-Reinvent{color:var(--reinvent);} /* ── conclusion ─────────────────────────────────────────────────────── */ /* The last word on the page is a panel that RIDES THE SEAM: it is pulled up out of its own band so its top half sits on the white reading sheet and its bottom half on the darker closing band. Half of its outline is therefore invisible, which is the whole trick — the panel looks like it is emerging from the article rather than sitting in a box. The pull is the band's own top padding plus an overlap, so the two stay tied together. */ /* the shadow has no offset at all: it spreads evenly on every side, so the panel reads as floating over the seam rather than lit from one corner. Faint enough to be felt, not seen. */ .conclusion{position:relative;z-index:2;background:var(--bg-card);border-radius:var(--radius); box-shadow:0 0 3rem rgba(16,21,28,.09); display:flex;align-items:flex-start;justify-content:space-between;gap:clamp(2rem,4vw,3.5rem); padding:clamp(2rem,3.8vw,3.25rem); margin:calc(-1 * (clamp(2.75rem,5vw,4.5rem) + clamp(2.25rem,4.4vw,3.5rem))) 0 clamp(2.5rem,5vw,4rem);} .concl-main{flex:1 1 auto;min-width:0;} /* The verdict closes the page and the episode is the deliverable, so the last thing on it is a way to hear the whole thing. Same

. */ /* it is the one piece of type set over the photograph, so it carries its own ground: a halo in the plate's own colour rather than a drop shadow. A dark shadow under 10.5px red letterspaced type only thickens it into mud — the plate bleeding back through the gaps between the strokes is what actually separates the word from the grille behind it. */ .cl-label{font-family:var(--text);font-size:0.65625rem;letter-spacing:.18em;text-transform:uppercase; color:var(--red-ink);line-height:1.6;max-width:8.5rem;text-wrap:balance;font-weight:600; text-shadow:0 0 0.1875rem #F3F5F7,0 0 0.5rem #F3F5F7,0 0 0.875rem rgba(243,245,247,.85);} /* one step darker than the --muted every other secondary line uses: it is the only number on the plate and it sits over the photograph, where --muted goes soft. */ .cl-dur{font-family:var(--text);font-size:0.6875rem;color:var(--ink-2); font-variant-numeric:tabular-nums;} /* The text column is capped and the leftover is left OPEN ON THE RIGHT — that space is reserved, not an accident. The cap is in rem rather than ch so it does not move when the type size does. text-wrap:pretty does the setting: it keeps the last line from running short and evens the rag, which a display face otherwise shows badly. */ .conclusion p{font-family:var(--display);font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.6; font-weight:500;letter-spacing:-.008em;color:var(--ink); margin:0.875rem 0 0;max-width:51.5rem;text-wrap:pretty;} /* ── sources + footer ───────────────────────────────────────────────── */ .sources{columns:3;column-gap:2.25rem;margin:0;padding:0;list-style:none;} .sources li{font-family:var(--text);font-size:0.71875rem;color:var(--muted);margin:0 0 0.5rem; break-inside:avoid;line-height:1.55;} .sources a{color:var(--ink-2);} .sources a:hover{color:var(--red-ink);} /* The page shuts on a dark band. It is the one inversion in the sheet, and it earns it: it ends the scroll the way a printed briefing ends on its colophon, and it gives the disclaimer somewhere to stand. "the disclaimer ... are features, not fine print — they're why a busy executive believes it". At 11px muted it was exactly the fine print the brief rejects, so it is the band's content at reading size, not a line tucked under the credit. */ .band-foot{background:var(--bg-dark);color:#8F98A4; padding:clamp(3rem,6vw,5rem) 0 clamp(3rem,6vw,5rem);} /* Two blocks facing each other, two lines each: the disclaimer on the left, the mark on the right with its parent line stacked under it instead of running beside it. */ .band-foot .wrap{display:flex;align-items:flex-start;justify-content:space-between; gap:clamp(2rem,5vw,4.5rem);} /* the mark holds the right edge even when nothing is set beside it: with one child, a space-between row leaves it on the left, which is what the archive footer was doing */ .band-foot .foot-mark{margin-left:auto;} /* balance, not pretty: the block runs two or three lines, and at that length the goal is even line LENGTHS rather than only a protected last line — a short second line reads as a stray. */ /* pinned in px: at 15px in rem the root's 16-to-20px ramp took it to 18.75px on a 2K panel, bigger than the body copy it is a footnote to */ .band-foot .standing-t{font-size:16px;line-height:1.7;font-weight:400;color:#DFE3E9; margin:0;flex:1 1 26rem;max-width:48ch;text-wrap:balance;} /* the real mark's light-ink cut, stacked over the tagline for the dark band. Same file as the masthead's, sized to the same height, so the wordmark is one asset used twice rather than two drawings of it. */ .foot-mark{flex:0 0 auto;flex-direction:column;align-items:flex-end;gap:0.5rem; text-align:right;} .foot-mark,.foot-mark:hover{color:#F4F6F8;} .fm-logo{display:block;height:1.5rem;width:auto;} /* the divider and the baseline nudge belong to the inline lockup upstairs, not to this one */ .foot-mark .sub{color:#8F98A4;padding:0;margin:0;top:0;} .foot-mark .sub::before{content:none;} /* ── tooltip ────────────────────────────────────────────────────────── */ #tip{position:fixed;z-index:50;pointer-events:none;max-width:19.375rem;background:rgba(255,255,255,.97); border:0.0625rem solid var(--line-2);border-radius:var(--radius);padding:0.8125rem 0.9375rem;color:var(--ink-2); box-shadow:0 1.25rem 2.5rem -0.875rem rgba(16,21,28,.30);opacity:0;transition:opacity .12s; backdrop-filter:blur(0.5rem);-webkit-backdrop-filter:blur(0.5rem);} #tip.on{opacity:1;} #tip .tt{font-family:var(--display);font-size:0.96875rem;font-weight:600;color:var(--ink); margin-bottom:0.4375rem;line-height:1.34;letter-spacing:-.01em;} #tip .tl{font-family:var(--text);font-size:0.75rem;letter-spacing:.03em;line-height:1.85;} #tip .tl b{color:var(--ink);font-weight:600;} #tip .ts{font-size:0.8125rem;color:var(--muted);margin-top:0.5625rem;line-height:1.55;} /* ── dev provenance (rendered only when the payload carries it) ──────── */ .devbadge{font-family:var(--text);font-size:0.625rem;letter-spacing:.14em;text-transform:uppercase; color:var(--ink-inv);background:var(--ink);padding:0.1875rem 0.5625rem;border-radius:var(--radius);font-weight:600; cursor:pointer;user-select:none;} .devbadge.off{color:var(--muted);background:none;border:0.0625rem solid var(--line-2);} body.prov-off .provbtn{display:none!important;} body.prov-off #sourcesRule,body.prov-off #sources{display:none!important;} .provbtn{font-size:.62em;line-height:1;vertical-align:super;margin-left:0.375rem;color:var(--red-ink); background:var(--red-wash);border:0.0625rem solid var(--red-line);border-radius:var(--radius);padding:0.0625rem 0.3125rem; cursor:pointer;transition:.15s;} .provbtn:hover{background:var(--red);color:var(--ink-inv);} .modal{position:fixed;inset:0;z-index:100;background:rgba(16,21,28,.34);backdrop-filter:blur(0.25rem); display:flex;align-items:center;justify-content:center;padding:1.5rem;} .modal[hidden]{display:none;} .modal-card{background:var(--bg-card);color:var(--ink-2);border:0.0625rem solid var(--line-2); border-radius:var(--radius);max-width:55rem;width:100%;max-height:84vh;overflow:hidden;padding:1.5rem 1.625rem; box-shadow:0 2.5rem 5rem -1.875rem rgba(16,21,28,.40);} .pm-cols{display:flex;gap:1.125rem;align-items:stretch;} #pmGraph{width:21.25rem;height:20rem;flex-shrink:0;border:0.0625rem solid var(--line);border-radius:var(--radius);background:var(--bg-read);} #pmQuotes{flex:1;overflow:auto;max-height:20rem;padding-right:0.25rem;} .modal-top{display:flex;justify-content:space-between;align-items:flex-start;gap:0.75rem;margin-bottom:0.25rem;} .modal-h{font-family:var(--display);font-size:1.1875rem;font-weight:600;letter-spacing:-.012em;color:var(--ink);} .modal-sub{font-family:var(--text);font-size:0.6875rem;letter-spacing:.06em;color:var(--muted);margin-bottom:1.125rem;} .modal-x{background:none;border:0;color:var(--muted);font-size:1.625rem;line-height:1;cursor:pointer;padding:0 0.25rem;} .modal-x:hover{color:var(--ink);} .prov-src{border-top:0.0625rem solid var(--line);padding:0.875rem 0;} .prov-title{font-family:var(--text);font-size:0.78125rem;color:var(--red-ink);font-weight:600;} .prov-src blockquote{margin:0.625rem 0 0;padding:0.5625rem 0.9375rem;border-left:0.125rem solid var(--red-line); background:var(--red-wash);border-radius:0 var(--radius) var(--radius) 0;font-size:0.875rem;line-height:1.6;color:var(--ink-2);} .noq{font-family:var(--text);font-size:0.71875rem;color:var(--dim);margin-top:0.5rem;} /* ── responsive ─────────────────────────────────────────────────────── */ @media(max-width:1000px){ /* stacked: the chart leads, then the cards it explains */ .hero-core{grid-template-columns:1fr;gap:1rem;} .radar-col{order:-1;} .sec{grid-template-columns:1fr;gap:0.625rem;} .sec .side{position:static;} .sources{columns:2;} } @media(max-width:720px){ /* the closing panel stops being two columns: the verdict is the read and the plate follows it, because side by side at this width the text column is down to a few words a line. The plate keeps its own width rather than stretching — it is a plate, and a full-bleed strip would re-crop the photograph into the crown of the mic and nothing else. */ .conclusion{flex-direction:column;align-items:stretch;} .concl-listen{align-self:center;width:min(13rem,58%);} .topnav a{display:none;} .wordmark .sub{display:none;} .sources{columns:1;} .pm-cols{flex-direction:column;} #pmGraph{width:100%;height:12.5rem;} #pmQuotes{max-height:40vh;} .pl-time.dur,.pl-rate{display:none;} .sec .body{font-size:1rem;line-height:1.6;} .band-foot .standing-t{font-size:0.875rem;} .deck-sub{font-size:0.9375rem;} .band-foot{padding:2.25rem 0;} .band-foot .wrap{flex-direction:column;gap:1rem;} .band-foot .foot-mark{order:-1;margin-left:0;} .band-foot .standing-t{flex:0 0 auto;max-width:none;} } /* the chart scales with its viewBox, so its labels shrink with it — lift them back to a readable size once the column is narrow */ @media(max-width:600px){ #radar text{font-size:1.0625rem;} } /* the only min-width rule on the page. The note is pinned in px rather than left to the root's 16px-to-20px ramp, so this is where it takes its one step up — on a 2K panel the key column is at its widest and 15px starts reading small. */ @media(min-width:2000px){ .note{font-size:16px;} /* the index's section labels. Pinned in px like the note, and for the same reason: at .2em of tracking these read as a rule of type, and letting the root's ramp carry them lands an arbitrary 13.75px rather than a chosen size. */ .arch-eyebrow{font-size:14px;} } @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}} /* ── back to top ──────────────────────────────────────────────────────── Speaks the same language as the readout's disclosure — outlined, ink border, accent only on hover — so the page has one kind of button and not two. It sits on the column's own gutter rather than a round number of its own, which keeps it on the grid the page is set to. */ .gotop{position:fixed;right:var(--wrap-pad);bottom:var(--wrap-pad);z-index:40; width:2.75rem;height:2.75rem;border-radius:50%; display:flex;align-items:center;justify-content:center;cursor:pointer; background:var(--bg-card);border:0.0625rem solid var(--ink-2);color:var(--ink); box-shadow:0 0.5rem 1.5rem -0.5rem rgba(16,21,28,.18); opacity:1;transform:none;visibility:visible; transition:opacity .26s ease,transform .26s ease,visibility 0s, color .15s,border-color .15s,background .15s;} /* [hidden] normally means display:none, which cannot be transitioned — the button appeared and vanished in one frame. It keeps its box here and fades instead, rising into place and sinking out. visibility is what actually takes it out of reach and out of the accessibility tree, and it is switched with a delay on the way OUT (after the fade) and none on the way IN, so the button is never a live target while it is invisible. */ .gotop[hidden]{display:flex;opacity:0;visibility:hidden;pointer-events:none; transform:translateY(0.625rem) scale(.94); transition:opacity .26s ease,transform .26s ease,visibility 0s .26s;} .gotop svg{width:0.75rem;height:0.875rem;display:block;} .gotop:hover{color:var(--red-ink);border-color:var(--red-line);background:var(--red-wash);} .gotop:focus-visible{outline:0.125rem solid var(--red-line);outline-offset:0.25rem;} /* ── archive ──────────────────────────────────────────────────────────── Rewritten off the old palette: the rules here were still asking for --mono, --serif, --teal and --ink2, none of which survived the move to the light system, so every one of them was resolving to nothing and the list was rendering in the browser's default face. It is set as a printed index, not as a feed of cards: a hairline per entry, the date held out in its own rail, and no box anywhere — the same grammar the analysis sections use. */ /* The index's hero: the chapter's band, shortened. Only the closing padding changes — the opening stays on --pad-hero so the first line of type sits at the same height on both pages and the masthead above it does not appear to move as you navigate. */ .hero-index .wrap{padding-bottom:clamp(2.5rem,4.4vw,3.75rem);} /* The index's glow is its OWN — same seat as before, kept for whenever this comes back — but switched off for now rather than deleted, so no one has to re-derive top/right/width/height for this band's different height a second time. */ .hero-index .hero-art::after{top:-46rem;right:-24rem;width:68rem;height:60rem;display:none; background:radial-gradient(circle at 58% 46%,rgba(239, 90, 93, 0.20),rgba(239,90,92,0) 85%);} /* the title is a rank below a chapter's: the archive is a way IN to the writing, not the writing, and at the chapter's 3.5rem it announced itself as the louder of the two */ .hero-index h1.headline{font-size:clamp(1.75rem,3.4vw,2.625rem);max-width:44rem;} .hero-index .standfirst{margin-top:1rem;max-width:44rem;} .band-arch{background:var(--bg-read); padding:clamp(2.75rem,5vw,4.5rem) 0 clamp(4rem,8vw,7rem);min-height:40vh; /* the index's own inset, shared by the featured panel and every row */ --arch-pad:clamp(1.5rem,2.6vw,2rem);} /* the section labels. Same setting as a chapter's own eyebrow, so the archive is marked up in the publication's voice rather than in a second one invented for the index. */ .arch-eyebrow{font-family:var(--text);font-size:0.6875rem;font-weight:700;letter-spacing:.2em; text-transform:uppercase;color:var(--red-ink);margin:0 0 1.125rem;} /* the empty state. Set as the listing's own body copy, not as a notice: nothing has gone wrong, there is simply nothing yet, and a warning box would say otherwise. */ .arch-empty{font-family:var(--text);font-size:0.9375rem;line-height:1.6;color:var(--muted); margin:0;padding:clamp(1.375rem,2.4vw,1.875rem) var(--arch-pad); border-top:0.0625rem solid var(--line);border-bottom:0.0625rem solid var(--line);} .arch-eyebrow.arch-all{color:var(--muted);margin-top:clamp(3rem,5.5vw,4.75rem);} /* The featured chapter is set EXACTLY like a row of the list — same rails, same type, same two-line summary — and is marked as the current one by its ground alone. Given its own format it stopped being the top of the index and became a second design competing with it. */ .arch-latest{background:var(--bg-note);border-radius:var(--radius-card); padding:var(--arch-pad);transition:background .15s;} .arch-latest:hover{background:var(--bg);} .arch-latest:hover .arch-head{color:var(--red-ink);} .arch-latest:focus-visible{outline:0.125rem solid var(--red-line);outline-offset:0.125rem;} .archive{list-style:none;padding:0;margin:0;} /* the rule sits on the ENTRY, not between entries: a border-top on every item gives the list a line above the first one, which is what closes it against the standfirst */ .archive li{border-top:0.0625rem solid var(--line);} .archive li:last-child{border-bottom:0.0625rem solid var(--line);} /* Two rails. The date column is fixed in rem rather than a fraction so the headlines start on the same x at every width — a ragged left edge is the one thing an index cannot have. */ .archive a,.arch-latest{display:grid;grid-template-columns:9.5rem minmax(0,1fr); gap:clamp(1rem,2.4vw,2.25rem);align-items:baseline;text-decoration:none;color:inherit; transition:background .15s;} /* the same horizontal inset the panel takes, so the date rail of a row starts on the same x as the featured one's. The rules stay full width — they measure the list, not the entry. */ .archive a{padding:clamp(1.375rem,2.4vw,1.875rem) var(--arch-pad);} .arch-meta{display:flex;flex-direction:column;align-items:flex-start;gap:0.5rem;} .archive .date,.arch-latest .date{font-family:var(--text);font-size:0.71875rem; letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap;} .arch-head{font-family:var(--display);font-weight:600; font-size:clamp(1.125rem,1.9vw,1.4375rem);line-height:1.3;letter-spacing:-.012em; color:var(--ink);margin:0;transition:color .15s;text-wrap:pretty;} /* clamped to two lines: the summaries run long, and an index whose entries are four lines deep stops being scannable — the full read is one click away by definition */ .arch-sum{font-size:0.9375rem;line-height:1.6;color:var(--muted);margin:0.5rem 0 0; max-width:52rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;} /* the row lifts by a hair and the headline takes the accent — the whole row is the target, so the whole row has to answer */ /* one step off the sheet, not two: --bg-raise landed the row nearly as dark as the featured panel's ground, so a hover read as a state change in the layout rather than as a pointer */ .archive a:hover{background:var(--bg);} .archive a:hover .arch-head{color:var(--red-ink);} .archive a:focus-visible{outline:0.125rem solid var(--red-line);outline-offset:-0.125rem;} @media(max-width:720px){ .archive a,.arch-latest{grid-template-columns:1fr;gap:0.625rem;} .arch-meta{flex-direction:row;align-items:center;gap:0.75rem;} }