/* ============================================================================ ONE TEMPLATE. Every site uses this file unchanged. A site's identity = the :root override block from config/sites.json + its logo. TWO MODES. Dark is the default. A site whose real masthead is light and editorial (white paper, one warm accent) sets `"light": true` in its config; the generator puts class="light" on and the block at the bottom of this file re-points the text/plate/shadow variables. Nothing else changes — the layout, the ad ladder and the stage are identical in both modes. SURFACES ARE NEUTRAL ON PURPOSE. An earlier pass derived tint/surface/line by keeping the brand HUE and darkening it, which turned an orange magazine olive and a tan one into mud, and buried the accent on a same-hue background. The accent is the only place the brand colour is allowed to be loud. Fonts: Barlow Condensed (display) + Work Sans (body). ========================================================================= */ :root{ --accent:#0062ff; /* primary brand */ --accent-2:#7b2bff; /* secondary, for gradients */ --tint:#0d1220; /* page bg, TINTED toward the brand — not black */ --surface:#141a28; --surface-2:#1b2233; --line:#2a3346; --text:#f2f5fa; --muted:#9aa6bb; /* text ramp — every non-accent colour in the file comes from here, so a light skin is a variable swap and not a second stylesheet */ --hi:#fff; /* max contrast: hovers, emphasis, pull quotes */ --soft:#d3dbe9; /* chips, pager, contents, list links */ --dim:#c2cbdb; /* nav and footer links at rest */ --read:#e2e8f2; /* article body copy */ --faint:#6b768a; /* ad labels, photo credits */ --on-accent:#fff; /* type sitting ON the accent (buttons, chips) */ --on-photo:#fff; /* type sitting on a photo scrim — light in BOTH modes */ --plate:#fff; /* card behind dark artwork — only the promo panel still uses it */ /* the halo that makes DARK logo artwork readable on a black page. Stacked drop-shadows, so it hugs the letterforms instead of boxing them in. */ --glow:drop-shadow(0 0 1px rgba(255,255,255,.95)) drop-shadow(0 0 3px rgba(255,255,255,.9)) drop-shadow(0 0 9px rgba(255,255,255,.55)); --glow-lg:drop-shadow(0 0 2px rgba(255,255,255,.95)) drop-shadow(0 0 7px rgba(255,255,255,.8)) drop-shadow(0 0 22px rgba(255,255,255,.45)); --shade:0,0,0; /* shadow colour, as r,g,b */ --accent-ink:var(--accent); /* accent used as TYPE on the page background */ --bar-bg:var(--tint); --menu-bg:var(--tint); --logo-lift:brightness(1.32) saturate(1.1); --display:"Barlow Condensed",Impact,sans-serif; --body:"Work Sans",system-ui,-apple-system,sans-serif; --maxw:1400px; } *{box-sizing:border-box} body{ margin:0;color:var(--text);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased; background:var(--tint); } a{color:inherit;text-decoration:none} img{display:block;max-width:100%} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px} h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1.03;text-transform:uppercase;font-weight:600} /* ---- header ---- */ .bar{background:var(--bar-bg);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60} .bar-in{display:flex;align-items:center;gap:38px;height:96px} /* brand blues sit close to the header's near-black; lift them so the outlined parts of a masthead don't disappear */ .bar img.logo{height:74px;width:auto;filter:var(--logo-lift)} .bar .word{font-family:var(--display);font-size:44px;font-weight:700;line-height:1} /* nowrap + min-width:0 — a long category list must clip, never wrap the header onto a second line */ /* nav takes the space between logo and search and spreads across it */ .bar nav{display:flex;flex:1;flex-wrap:nowrap;justify-content:space-evenly;gap:10px;min-width:0; font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:.03em; text-transform:uppercase;overflow:hidden} .bar nav a{position:relative;white-space:nowrap;color:var(--dim);padding:8px 2px; transition:color .2s ease} /* the hover mark: an accent rule that wipes out from the centre */ .bar nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.5px;border-radius:2px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transform:scaleX(0);transform-origin:center;transition:transform .26s cubic-bezier(.2,.7,.25,1)} .bar nav a:hover{color:var(--hi)} .bar nav a:hover::after,.bar nav a.on::after{transform:scaleX(1)} .bar nav a.on{color:var(--hi)} .bar .sp{display:none} /* hamburger — hidden on desktop, drives the dropdown below 900 */ .burg{display:none;flex:none;width:44px;height:40px;padding:9px 8px;border:0;background:none;cursor:pointer; flex-direction:column;justify-content:space-between} .burg span{display:block;height:2.5px;border-radius:2px;background:var(--soft);transition:transform .3s,opacity .2s,background .2s} .burg:hover span{background:var(--accent-ink)} .bar.open .burg span:nth-child(1){transform:translateY(8.75px) rotate(45deg)} .bar.open .burg span:nth-child(2){opacity:0} .bar.open .burg span:nth-child(3){transform:translateY(-8.75px) rotate(-45deg)} .search{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--line); transition:border-color .2s,box-shadow .2s; border-radius:999px;padding:10px 17px;min-width:210px;flex:none} .search input{background:none;border:0;outline:none;color:var(--text);font-family:var(--body);font-size:15.5px;width:100%} .search input::placeholder{color:var(--muted)} .search svg{flex:none;opacity:.7;transition:opacity .2s} .search:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))} .search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)} .search:focus-within svg{opacity:1;color:var(--accent)} /* one keyboard-focus treatment for everything clickable */ a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px} .cta{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--on-accent);font-family:var(--display);font-size:15px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:9px 17px;border-radius:4px} .ad{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:6px;margin:26px 0} .ad small{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)} .ad iframe{border:0;display:block;max-width:100%} .k{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);display:block;margin-bottom:8px} .m{font-size:14px;color:var(--muted)} /* ============================================================================ THE STAGE — the top section. A live, auto-advancing cinematic slot with a playlist rail beside it. Slow Ken-Burns push on the active frame, crossfade between stories, staggered caption entrance, a running progress bar, click any rail item to jump, hover anywhere to pause. Not a static grid of boxes. ========================================================================= */ .stage{display:grid;grid-template-columns:262px 1fr 348px;gap:14px;height:576px;margin:22px 0 12px} /* left column — text-only headlines, so the photo isn't half the page */ .stg-side{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line); border-radius:9px;overflow:hidden} .ss-h{font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; padding:14px 16px;color:var(--on-accent);background:var(--accent)} .ss-i{padding:14px 16px;border-top:1px solid var(--line);flex:1 1 0;min-height:0; display:flex;flex-direction:column;justify-content:center;transition:background .2s,padding-left .2s} .ss-i:hover{background:var(--surface-2);padding-left:20px} .ss-i h4{transition:color .2s} .ss-i:hover h4{color:var(--accent-ink)} .ss-i .k{margin-bottom:6px;font-size:11px} .ss-i h4{font-size:16.5px;font-family:var(--body);font-weight:600;text-transform:none;line-height:1.34; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} @media(prefers-reduced-motion:reduce){.stage *{animation:none!important;transition:none!important}} .stg-main{position:relative;overflow:hidden;border-radius:9px;background:var(--surface-2); box-shadow:0 20px 50px rgba(var(--shade),.45), 0 0 0 1px var(--line)} .slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .8s ease;display:flex;align-items:flex-end} .slide.on{opacity:1;visibility:visible;z-index:2} .slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%;transform:scale(1.02)} .slide.on img{animation:kenburns 9s ease-out both} @keyframes kenburns{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.13) translate3d(-1.2%,-1.6%,0)}} /* ONE shallow scrim, bottom only. The old version stacked a full-height vertical fade on a left-hand wash and buried most of the photo. */ .slide .sc{position:absolute;inset:0; background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.20) 55%,rgba(0,0,0,.62) 70%, rgba(0,0,0,.90) 85%,rgba(0,0,0,.99) 100%)} .slide .cp{position:relative;padding:34px 38px 46px;max-width:60ch;color:var(--on-photo)} .slide.on .cp>*{animation:rise .7s cubic-bezier(.2,.7,.25,1) both} .slide.on .cp>*:nth-child(1){animation-delay:.10s} .slide.on .cp>*:nth-child(2){animation-delay:.18s} .slide.on .cp>*:nth-child(3){animation-delay:.28s} @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} /* text carries its own legibility so the scrim can stay shallow */ .slide h2{font-size:52px;max-width:19ch;text-shadow:0 2px 4px rgba(0,0,0,.85),0 6px 30px rgba(0,0,0,.75)} .slide .m{display:block;margin-top:14px;font-size:15px;text-shadow:0 2px 6px rgba(0,0,0,.9)} .slide .k{font-size:13.5px;text-shadow:0 2px 6px rgba(0,0,0,.9)} .slide .k::before{content:"";display:inline-block;width:22px;height:2px;background:var(--accent); vertical-align:middle;margin-right:9px;margin-bottom:3px} /* controls */ .stg-main .nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:42px;height:42px; border-radius:50%;border:1px solid var(--line);background:color-mix(in srgb,var(--tint) 55%,transparent); backdrop-filter:blur(6px);color:var(--on-photo);font-size:22px;line-height:1;cursor:pointer; opacity:0;transition:opacity .25s,background .2s;display:grid;place-items:center;padding-bottom:3px} .stg-main:hover .nav{opacity:1} .stg-main .nav:hover{background:var(--accent);border-color:var(--accent)} .stg-main .prev{left:16px}.stg-main .next{right:16px} /* NOTE: must not be called .bar — the site header owns that class. */ .stg-main .prog{position:absolute;left:0;right:0;bottom:0;top:auto;height:3px; background:color-mix(in srgb,#fff 12%,transparent);z-index:5} .stg-main .prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2))} /* playlist rail */ .stg-rail{display:grid;grid-template-rows:repeat(4,1fr);gap:10px;min-height:0} .up{position:relative;display:grid;grid-template-columns:32px 110px 1fr;align-items:center;gap:13px; background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:12px 14px 12px 4px; text-align:left;cursor:pointer;color:inherit;font:inherit;overflow:hidden;min-height:0; transition:background .25s,border-color .25s,transform .25s} .up:hover{background:var(--surface-2);transform:translateX(-3px)} .up .n{font-family:var(--display);font-size:23px;font-weight:700;color:var(--muted);text-align:center;transition:color .25s} .up img{width:110px;height:74px;object-fit:cover;object-position:center 15%;border-radius:4px;opacity:.62;transition:opacity .3s} .up h4{font-size:16.5px;font-family:var(--body);font-weight:600;text-transform:none;line-height:1.32; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .up .k{font-size:11px} .up .k{margin-bottom:4px;font-size:9.5px} .up.on{background:var(--surface-2);border-color:var(--accent)} .up.on .n{color:var(--accent)} .up.on img{opacity:1} .up.on::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)} /* ---- TOP AD STRIP — sits ABOVE the header, on its own black band so the creative's own black background runs edge to edge. ---- */ /* no black band — the strip carries the page's own background. Sizes are pinned so nothing can collapse the creative to a small variant. */ .topad{display:flex;justify-content:center;align-items:flex-start;overflow:hidden;line-height:0;margin:30px 0 4px} /* directly under the header — no dead band above it */ .topad.flush{margin:0} .topad iframe{border:0;display:block;width:970px;height:250px;flex:none;max-width:100%} .ad iframe{flex:none} /* ---- section heads: coloured rule, not a grey line ---- */ .sh{display:flex;align-items:center;gap:12px;margin:34px 0 14px;padding-top:10px; border-top:3px solid transparent; border-image:linear-gradient(90deg,var(--accent),var(--accent-2) 40%,transparent 78%) 1} .sh h2{font-size:34px} .sh .all{margin-left:auto;font-family:var(--body);font-size:14.5px;color:var(--accent-ink);font-weight:600; text-transform:none;display:inline-flex;align-items:center;gap:6px;transition:gap .2s,color .2s} .sh .all:hover{gap:11px;color:var(--hi)} .g5{display:grid;grid-template-columns:repeat(5,1fr);gap:18px} .g6{display:grid;grid-template-columns:repeat(6,1fr);gap:16px} .g4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} /* cards: image lifts and zooms, headline takes the accent */ .card{display:block} .card .imgw{position:relative;overflow:hidden;border-radius:5px;display:block} .card img{aspect-ratio:16/10;object-fit:cover;object-position:center 15%;width:100%;background:var(--surface-2);border-radius:5px; transition:transform .5s cubic-bezier(.2,.7,.25,1)} .card:hover img{transform:scale(1.07)} .card h3{font-size:20px;margin:11px 0 5px;transition:color .2s} .card:hover h3{color:var(--accent-ink)} .g6 .card img{aspect-ratio:1/1} .g6 .card h3{font-size:17px} /* ---- PROMO SECTION — 3 columns: articles | promo box | articles. The middle box is a BRANDING panel. Magazines put the issue cover in it; everyone else puts the logo + a tagline. No background image, no video, no CTA — it exists to say "this is a real publication". ---- */ .promo{margin-top:36px;padding:32px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line); background:var(--surface)} /* an explicit row height is what makes the three columns line up — without it the stretch/1fr children have no height to divide and the section balloons */ .promo .inner{display:grid;grid-template-columns:1fr 470px 1fr;grid-template-rows:640px;gap:26px;align-items:stretch} /* the two flanking columns stretch to the panel's height so all three columns end on the same line — no ragged bottom */ .promo .side{display:grid;gap:18px;grid-auto-rows:1fr;align-content:stretch} .promo .side .card{display:flex;flex-direction:column;min-height:0} .promo .side .card .imgw{flex:1;min-height:0} .promo .side .card img{aspect-ratio:auto;height:100%;width:100%;object-fit:cover;object-position:center 15%} .promo .side .card h3{font-size:19px;flex:none} .pbox{position:relative;border-radius:12px;overflow:hidden;text-align:center; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:22px 26px 24px; background:var(--surface-2); box-shadow:0 24px 60px rgba(var(--shade),.55), 0 0 0 1px var(--line)} .pbox p{font-size:17px;line-height:1.45;color:var(--soft);margin:0;max-width:34ch} /* --- with a cover: the cover fills the panel, accent button under it --- */ .pbox .cover-img{width:100%;flex:1;min-height:0;object-fit:contain; border-radius:4px;filter:drop-shadow(0 20px 44px rgba(var(--shade),.7));transition:transform .35s} .pbox:hover .cover-img{transform:translateY(-5px)} /* deep brand blue, not a light tint — a white masthead on a pale accent is unreadable, which is exactly what the first pass did */ .pbox .lbtn{width:100%;flex:none;display:grid;place-items:center;padding:16px 24px;border-radius:9px; background:var(--tint); border:1px solid var(--accent); box-shadow:0 12px 30px rgba(var(--shade),.5), inset 0 1px 0 rgba(255,255,255,.14); transition:transform .25s,background .25s} .pbox:hover .lbtn{background:var(--surface)} .pbox:hover .lbtn{transform:translateY(-2px)} /* height must be explicit — the masthead SVG has no intrinsic size */ .pbox .lbtn img{height:46px;width:auto;max-width:100%} .pbox .lbtn.mono img{filter:brightness(0) invert(1)} .pbox .lbtn.chip img{filter:var(--glow);height:62px} /* Sites whose logo artwork is DARK (navy, black, a serif wordmark) vanish on a black page. The fix used to be a white card behind the mark, which read like a sticker taped onto the design. A GLOW instead: stacked drop-shadows follow the artwork's own alpha, so a black wordmark gets a tight white halo and nothing rectangular appears. Opt in with config `darkArtwork: true`. Not brightness/invert — that turns a detailed mark into a white blob. */ .pbox .cover-img.on-white{filter:var(--glow-lg)} .bar img.logo.on-white,.fbrand .flogo.on-white{filter:var(--glow)} /* --- no cover: the logo plate grows to fill the panel instead of leaving a hole, and the tagline is set in display type --- */ .pbox .plate{width:100%;flex:1;min-height:200px;display:grid;place-items:center; background:var(--plate);border-radius:14px;padding:26px;box-shadow:0 18px 44px rgba(var(--shade),.45)} .pbox .plate img{width:100%;max-width:340px;height:auto} .pbox .plate.mono{background:var(--accent)} .pbox .plate.mono img{filter:brightness(0) invert(1)} .pbox.nocover p{font-family:var(--display);font-size:29px;line-height:1.1;text-transform:uppercase; font-weight:600;color:var(--hi);max-width:22ch} /* ---- list + rail ---- */ .cols{display:grid;grid-template-columns:1fr 330px;gap:40px;align-items:start;margin-top:8px} .row-item{display:grid;grid-template-columns:220px 1fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--line); transition:background .2s} .row-item:hover{background:var(--surface)} .row-item .imgw{overflow:hidden;border-radius:5px;display:block} .row-item img{aspect-ratio:16/10;object-fit:cover;object-position:center 15%;width:100%;border-radius:5px; transition:transform .5s cubic-bezier(.2,.7,.25,1)} .row-item:hover img{transform:scale(1.07)} .row-item h3{font-size:26px;margin:6px 0;transition:color .2s} .row-item:hover h3{color:var(--accent-ink)} /* The rail must NOT be sticky as a whole — it is taller than the viewport, so pinning it makes everything below the fold unreachable (the tall ad never appeared). Only the trailing ad sticks, which is the point of a 600px unit. */ .rail{align-self:start;display:grid;gap:18px} .rail>[data-fam]:last-child{position:sticky;top:110px} .box{background:var(--surface);border:1px solid var(--line);padding:18px;border-radius:6px} .box h2{font-size:24px;margin-bottom:10px} .rk{display:flex;gap:13px;padding:11px 0;border-bottom:1px solid var(--line)} .rk:last-child{border:0} .rk b{font-family:var(--display);font-size:30px;color:var(--accent-ink);width:30px;transition:transform .22s} .rk h4{font-size:16.5px;font-family:var(--body);font-weight:600;text-transform:none;line-height:1.35; transition:color .2s} .rk:hover h4{color:var(--accent-ink)} .rk:hover b{transform:scale(1.16)} /* thumbnail list — fills the rail so the column doesn't run out under the ad */ .pk{display:grid;grid-template-columns:88px 1fr;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)} .pk:last-child{border:0;padding-bottom:0} .pk .imgw{overflow:hidden;border-radius:4px;display:block;height:60px} .pk img{width:88px;height:60px;object-fit:cover;object-position:center 15%;border-radius:4px; transition:transform .45s cubic-bezier(.2,.7,.25,1)} .pk:hover img{transform:scale(1.1)} .pk .k{margin-bottom:4px;font-size:10.5px} .pk h4{font-size:15.5px;font-family:var(--body);font-weight:600;text-transform:none;line-height:1.3; transition:color .2s} .pk:hover h4{color:var(--accent-ink)} /* ============================ ARTICLE PAGE ============================== */ /* reading progress — tracks the article body, not the whole document */ .rp{position:fixed;top:0;left:0;right:0;height:3px;z-index:80;background:transparent;pointer-events:none} .rp i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2)); box-shadow:0 0 12px color-mix(in srgb,var(--accent) 70%,transparent)} /* ---- HERO — a magazine opener: PICTURE first, words beside it. ------------ The old one stamped the headline across the middle of the photo, so on a portrait the type landed on the subject's face and the crop cut the head off at the bottom of a 600px band. Nothing overlaps now: the image gets its own panel with its focal point respected, the words get a black column next to it, and a bad crop can no longer take the headline down with it. ---------- */ .ahero{border-bottom:1px solid var(--line);background:var(--tint);padding:26px 0 34px} .ah-in{display:grid;grid-template-columns:1.05fr .95fr;gap:38px;align-items:center; max-width:var(--maxw)} .ah-img{margin:0;position:relative;border-radius:10px;overflow:hidden;background:var(--surface-2); box-shadow:0 24px 60px rgba(var(--shade),.5)} /* 4:3 keeps a portrait subject whole; object-position comes from focal.json */ .ah-img img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 25%} .ah-txt{min-width:0} .ah-in .k{font-size:13.5px} .ah-in .k::before{content:"";display:inline-block;width:24px;height:2px;background:var(--accent); vertical-align:middle;margin-right:10px;margin-bottom:3px} .ah-in h1{color:var(--text);font-size:52px;line-height:1.03;margin:4px 0 0} .ah-in .stand{font-size:19.5px;line-height:1.5;color:var(--muted);margin:16px 0 0;font-weight:400} .ah-in .byline{margin-top:22px} .hcap{margin:12px 0 0;font-size:13.5px;color:var(--muted);line-height:1.5; padding-left:12px;border-left:3px solid var(--accent)} .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:9px;padding:0 0 14px;font-size:14px;color:var(--muted)} .crumbs a{color:var(--text)} .crumbs a:hover{color:var(--accent-ink)} .crumbs em{font-style:normal;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:44ch} .art-cols{margin-top:34px} /* Desktop article pages: let the sidebar travel with the story. .rail is align-self:start, so its box is only as tall as its own content and the sticky unit stops moving the moment that box scrolls out of view - on a long feature it unpinned a screen or two in. Stretching the rail to the full grid row and giving its LAST child the remaining space (1fr) means that unit has room to stay pinned for the entire length of the article. */ @media(min-width:900px){ .art-cols .rail{align-self:stretch;grid-template-rows:repeat(3,max-content) 1fr} .art-cols .rail>[data-fam]:last-child{position:sticky;top:96px;align-self:start} } /* the READING elements are measure-limited; ad units are not, so an in-article banner can use the full column instead of looking like a stamp */ .art{max-width:none} .art>p,.art>h2,.art>blockquote,.art>figure,.art>.toc,.art>.kf, .art>.tags,.art>.abio,.art>.nextup{max-width:76ch} .byline{display:flex;align-items:center;gap:14px;margin:26px 0 0;padding:0} .byline .av{width:48px;height:48px;flex:none;border-radius:50%;display:grid;place-items:center; font-family:var(--display);font-size:19px;font-weight:700;color:var(--on-accent); background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)} .byline strong{display:block;font-size:16.5px} .byline .m{display:block;margin-top:2px;color:var(--muted)} .byline .m b{color:var(--accent-ink);font-weight:600} /* contents jump box */ .toc{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:18px 22px;margin:0 0 30px} .toc h3{font-size:15px;letter-spacing:.14em;color:var(--muted);margin-bottom:12px} .toc a{display:block;padding:8px 0 8px 18px;position:relative;font-size:16.5px;font-weight:600;color:var(--soft); border-bottom:1px solid var(--line);transition:color .2s,padding-left .2s} .toc a:last-child{border:0;padding-bottom:0} .toc a::before{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;margin-top:-3px; border-radius:50%;background:var(--accent);opacity:.55;transition:opacity .2s,transform .2s} .toc a:hover{color:var(--accent-ink);padding-left:24px} .toc a:hover::before{opacity:1;transform:scale(1.35)} .art figure{margin:32px 0} /* portrait sources would otherwise run 1000px tall in the column */ .art figure img{width:100%;max-height:560px;object-fit:cover;object-position:center 20%;border-radius:7px} .art figcaption{margin-top:10px;font-size:13.5px;color:var(--muted);line-height:1.5; padding-left:12px;border-left:3px solid var(--accent)} .art figcaption .cred{display:block;margin-top:3px;font-size:12px;letter-spacing:.09em; text-transform:uppercase;color:var(--faint)} .art p{font-size:19px;line-height:1.72;margin:0 0 22px;color:var(--read)} .art p.lead{font-size:21px;line-height:1.66} /* drop cap on the opening paragraph */ .art p.lead::first-letter{float:left;font-family:var(--display);font-size:76px;line-height:.82; padding:6px 12px 0 0;color:var(--accent-ink)} .art .ad{margin:34px 0} /* ---- real WordPress content: tables, lists, links, embeds ---- */ .art a{color:var(--accent-ink);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 45%,transparent)} .art a:hover{color:var(--hi);border-bottom-color:var(--hi)} .art h3{font-size:25px;margin:28px 0 12px} .art h4{font-size:21px;margin:24px 0 10px} .art ul,.art ol{margin:0 0 22px;padding-left:24px;max-width:76ch} .art li{font-size:18.5px;line-height:1.66;margin-bottom:10px;color:var(--read)} .art li::marker{color:var(--accent-ink)} .art strong{color:var(--hi)} .art hr{border:0;border-top:1px solid var(--line);margin:32px 0;max-width:76ch} .art img{height:auto;border-radius:6px} .art table{width:100%;max-width:76ch;border-collapse:collapse;margin:26px 0;font-size:16.5px; background:var(--surface);border:1px solid var(--line);border-radius:8px;overflow:hidden} .art th{text-align:left;font-family:var(--display);font-size:17px;letter-spacing:.05em;text-transform:uppercase; background:var(--surface-2);color:var(--hi);padding:12px 16px; border-bottom:2px solid var(--accent)} .art td{padding:12px 16px;border-bottom:1px solid var(--line);color:var(--read);vertical-align:top} .art tr:last-child td{border-bottom:0} .art tbody tr:nth-child(even) td{background:var(--surface-2)} .art iframe{max-width:100%;border:0;border-radius:8px} .art .wp-block-image,.art figure.aligncenter{margin-left:auto;margin-right:auto} .art .alignleft{float:none} .art .wp-caption-text{font-size:13.5px;color:var(--muted)} /* section-lead paragraph on archive/flat pages */ .phead{padding:26px 0 4px} .phead h1{font-size:52px;margin:6px 0 0} .phead p{margin:10px 0 0;color:var(--muted);font-size:16px} /* ---- pagination ---- */ .pager{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:30px 0 10px; padding-top:22px;border-top:1px solid var(--line)} .pgnums{display:flex;gap:8px;flex-wrap:wrap;margin:0 auto} .pg{display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 14px;border-radius:6px; background:var(--surface);border:1px solid var(--line);color:var(--soft);font-family:var(--display); font-size:18px;font-weight:600;letter-spacing:.03em;transition:background .2s,border-color .2s,color .2s} .pg:hover{background:var(--surface-2);border-color:var(--accent);color:var(--hi)} .pg.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} .pg.off{opacity:.35;pointer-events:none} .pager .gap{color:var(--muted);align-self:center;padding:0 2px} /* ---- search page ---- */ .bigsearch{display:flex;align-items:center;gap:12px;margin:18px 0 26px;padding:14px 20px;border-radius:999px; background:var(--surface);border:1px solid var(--line);transition:border-color .2s,box-shadow .2s} .bigsearch:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent)} .bigsearch svg{flex:none;opacity:.75} .bigsearch input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--text); font-family:var(--body);font-size:20px} .bigsearch input::placeholder{color:var(--muted)} .snone{color:var(--muted);font-size:17px;padding:18px 0} .seclist{display:grid;gap:2px} .seclist a{padding:10px 0;border-bottom:1px solid var(--line);font-size:16.5px;font-weight:600;color:var(--soft); transition:color .2s,padding-left .2s} .seclist a:last-child{border:0} .seclist a:hover{color:var(--accent-ink);padding-left:7px} /* tags, author box, read-next */ .tags{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:34px 0 0;padding-top:22px; border-top:1px solid var(--line)} .tags span{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-right:4px} .tags a{font-size:14.5px;font-weight:600;padding:7px 14px;border-radius:999px; background:var(--surface);border:1px solid var(--line);color:var(--soft); transition:background .2s,border-color .2s,color .2s} .tags a:hover{background:var(--surface-2); border-color:var(--accent);color:var(--hi)} .abio{display:flex;gap:18px;align-items:flex-start;margin-top:30px;padding:22px;border-radius:9px; background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent)} .abio .av{width:54px;height:54px;flex:none;border-radius:50%;display:grid;place-items:center; font-family:var(--display);font-size:21px;font-weight:700;color:var(--on-accent); background:linear-gradient(135deg,var(--accent),var(--accent-2))} .abio strong{font-size:19px;font-family:var(--display);letter-spacing:.02em} .abio p{font-size:15.5px;line-height:1.55;color:var(--muted);margin:6px 0 0} /* Read-next: this used to paint an accent-tinted panel AND accent-coloured text. That reads fine when the accent is blue, but on a red skin it was red on red - genuinely unreadable. The panel is now barely tinted, the headline is white, and the kicker uses accent-2 (the lighter tone). */ .nextup{display:block;margin-top:26px;padding:20px 24px;border-radius:9px; background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent); transition:transform .25s,border-color .25s} .nextup:hover{transform:translateX(5px);border-color:var(--accent)} .nextup span{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);font-weight:700} .nextup h3{font-size:24px;margin-top:8px;color:var(--hi)} .art h2{font-size:32px;margin:38px 0 16px;padding-top:16px;border-top:1px solid var(--line);scroll-margin-top:120px} .art blockquote{margin:32px 0;padding:4px 0 4px 24px;border-left:4px solid var(--accent); font-family:var(--display);font-size:29px;line-height:1.22;text-transform:uppercase;color:var(--hi)} /* key-facts panel */ .kf{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent); border-radius:7px;padding:20px 24px;margin:30px 0} .kf h3{font-size:22px;margin-bottom:12px} .kf ul{margin:0;padding-left:20px} .kf li{font-size:16.5px;line-height:1.55;margin-bottom:8px;color:var(--soft)} .kf li::marker{color:var(--accent-ink)} .kf li:last-child{margin-bottom:0} /* ---- FOOTER — masthead + section columns + a legal bar ---- */ .foot{margin-top:52px;border-top:1px solid var(--line);background:var(--surface)} .foot-in{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px;padding-top:44px;padding-bottom:40px} .fbrand .flogo{height:64px;width:auto;margin-bottom:16px;filter:var(--logo-lift)} .fbrand .fword{display:block;font-family:var(--display);font-size:38px;font-weight:700;margin-bottom:14px} .fbrand p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.55;max-width:38ch} .fcol h4{font-size:19px;letter-spacing:.05em;margin-bottom:14px; padding-bottom:10px;border-bottom:2px solid var(--accent);display:inline-block} .fcol a{display:block;padding:7px 0;color:var(--dim);font-size:15.5px;transition:color .2s,padding-left .2s} .fcol a:hover{color:var(--accent-ink);padding-left:7px} .fbar{border-top:1px solid var(--line)} .fbar-in{display:flex;flex-wrap:wrap;gap:16px;align-items:center;padding-top:20px;padding-bottom:26px; color:var(--muted);font-size:14.5px} .fmini{margin-left:auto;display:flex;gap:22px} .fmini a{color:var(--muted)} .fmini a:hover{color:var(--hi)} /* ========================================================================== RESPONSIVE — 4 tiers. ≥1200 desktop · 900–1199 tablet landscape · 600–899 tablet portrait · <600 phone. Every ad unit is swapped for one that actually fits the column it lands in. ========================================================================= */ /* ---------- TABLET LANDSCAPE (≤1199) ---------- */ @media(max-width:1199px){ .wrap{padding:0 18px} .bar-in{gap:20px;height:84px} .bar img.logo{height:56px} .bar nav{font-size:17px;gap:14px;justify-content:flex-start} .search{min-width:170px} .stage{grid-template-columns:1fr 300px;grid-template-rows:auto;height:470px} .stg-side{display:none} /* headline column folds away first */ .slide h2{font-size:40px} .slide .cp{padding:26px 28px 36px} .up{grid-template-columns:26px 84px 1fr;gap:10px;padding:9px 11px 9px 3px} .up img{width:84px;height:56px} .up h4{font-size:14.5px;-webkit-line-clamp:2} .g5{grid-template-columns:repeat(4,1fr)} .g6{grid-template-columns:repeat(4,1fr)} .cols{grid-template-columns:1fr 300px;gap:26px} .promo .inner{grid-template-columns:1fr 340px 1fr;grid-template-rows:520px;gap:18px} .pbox .lbtn img{height:34px} .ah-in h1{font-size:48px} .art h1{font-size:44px} .foot-in{grid-template-columns:1fr 1fr 1fr;gap:28px} .fbrand{grid-column:1/-1} } /* ---------- TABLET PORTRAIT (≤899): one column everywhere ---------- */ @media(max-width:899px){ /* header collapses to [☰] [logo] [search] with a dropdown menu */ .bar-in{height:68px;gap:12px} .bar img.logo{height:44px} .burg{display:flex} .search{flex:1;min-width:0;max-width:320px;margin-left:auto} .bar nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;justify-content:flex-start; gap:0;font-size:20px;background:var(--menu-bg); border-bottom:1px solid var(--line);box-shadow:0 24px 50px rgba(var(--shade),.6); max-height:0;overflow:hidden;transition:max-height .34s cubic-bezier(.2,.7,.25,1)} .bar.open nav{max-height:80vh;overflow-y:auto} .bar nav a{padding:15px 22px;border-bottom:1px solid var(--line);width:100%} .bar nav a::after{left:22px;right:auto;width:26px;bottom:10px;transform-origin:left} .bar nav a:hover{background:var(--surface)} .stage{grid-template-columns:1fr;height:auto;gap:10px} .stg-main{height:420px} .slide h2{font-size:34px;max-width:none} .stg-rail{grid-template-rows:none;grid-auto-flow:column;grid-auto-columns:74%; overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px} .up{scroll-snap-align:start} .stg-main .nav{opacity:1} .g5,.g6,.g4{grid-template-columns:repeat(2,1fr);gap:16px} .g6 .card img{aspect-ratio:16/10} .sh h2{font-size:27px} .row-item{grid-template-columns:150px 1fr;gap:14px} .row-item h3{font-size:20px} /* KEEP a real sidebar on tablet portrait — a 300px column stacked full width is what stranded the tall ad in an empty band. A 260px rail is exactly what the 160x600 skyscraper is for. */ .cols{grid-template-columns:1fr;gap:26px} .rail{gap:16px} .rail>[data-fam]:last-child{top:82px} .box{padding:14px} .box h2{font-size:20px} .rk b{font-size:25px;width:24px} .rk h4{font-size:14.5px} .pk{grid-template-columns:70px 1fr;gap:10px} .pk .imgw{height:48px} .pk img{width:70px;height:48px} .pk h4{font-size:14px} .promo .inner{grid-template-columns:1fr;grid-template-rows:none;gap:20px} .promo .side{grid-auto-rows:auto} .promo .side .card .imgw{flex:none} .promo .side .card img{aspect-ratio:16/10;height:auto} .pbox{max-width:470px;margin:0 auto} /* one column: picture on top, words under it */ .ahero{padding:14px 0 22px} .ah-in{grid-template-columns:1fr;gap:20px} .ah-img img{aspect-ratio:16/10} .ah-in h1{font-size:36px} .ah-in .stand{font-size:18px} .crumbs em{max-width:24ch} .art h1{font-size:36px} .art p{font-size:17.5px} .art p.lead{font-size:19px} .art h2{font-size:26px} .art blockquote{font-size:24px} .art figure img{max-height:340px} /* FOOTER — brand block on top, link columns side by side under it */ .foot-in{grid-template-columns:repeat(3,1fr);gap:22px 20px;padding-top:34px;padding-bottom:30px} .fbrand{grid-column:1/-1;text-align:center;padding-bottom:22px;border-bottom:1px solid var(--line)} .fbrand .flogo{height:56px;margin:0 auto 14px} .fbrand p{margin:0 auto;max-width:46ch} .fcol h4{font-size:17px;margin-bottom:10px} .fcol a{padding:6px 0;font-size:15px} .fbar-in{flex-direction:column;align-items:center;gap:10px;text-align:center} .fmini{margin-left:0} } /* real sidebar only where the reading column survives it (≥720) */ @media(min-width:720px) and (max-width:899px){ .cols{grid-template-columns:1fr 260px;gap:24px} } /* below that the rail stacks; its trailing ad would land on the closing banner */ @media(max-width:719px){ .rail{position:static} .rail>[data-fam]:last-child{display:none;position:static} } /* ---------- PHONE (≤599) ---------- */ @media(max-width:599px){ body{font-size:16px} .wrap{padding:0 14px} .bar img.logo{height:40px} .bar nav{font-size:16px;gap:16px} .stg-main{height:330px} .slide h2{font-size:26px} .slide .cp{padding:18px 18px 26px} .stg-rail{grid-auto-columns:86%} .g5,.g6,.g4{grid-template-columns:1fr;gap:14px} .sh{margin:26px 0 12px} .sh h2{font-size:24px} .row-item{grid-template-columns:110px 1fr;gap:12px} .row-item h3{font-size:17.5px} .row-item .m{display:none} /* below 600 there is no room for a sidebar — stack it, and the ad ladder swaps the column units for full-width strips */ .cols{grid-template-columns:1fr;gap:26px} .rail{gap:18px} .box{padding:16px} /* the rail stacks directly above the closing banner — drop its trailing ad so two ad units never sit back to back */ .rail>[data-fam]:last-child{display:none;position:static} .ah-img img{aspect-ratio:3/2} .ah-in h1{font-size:29px} .ah-in .stand{font-size:16.5px} .art h2{font-size:23px} .art blockquote{font-size:21px;padding-left:16px} .art figure img{max-height:260px} .byline{gap:11px} .abio{flex-direction:column;gap:12px} .nextup h3{font-size:19px} .toc{padding:15px 17px} /* phone footer: brand centred, then two link columns, then a wide one */ .foot-in{grid-template-columns:1fr 1fr;gap:20px 18px;padding-top:28px} .foot-in .fcol:last-child{grid-column:1/-1;padding-top:18px;border-top:1px solid var(--line)} .foot-in .fcol:last-child h4{font-size:16px} .fbrand .flogo{height:48px} .fbrand p{font-size:14.5px} } /* ---------- AD UNITS ---------- Sizes are swapped in JS (see ADS_JS) by picking the largest real slot that fits the container, so a 970 creative is never clipped into a phone column. CSS only stops overflow if the script hasn't run yet. */ .topad iframe,.ad iframe{max-width:100%} @media(max-width:1199px){.topad iframe{width:auto}} /* ========================================================================== LIGHT MODE — machinery only, and NOT IN USE. paradoxmagazine ran on it for one deploy; the owner's ruling on 2026-08-05 was "do them all black", so every site is dark and no config sets `"light": true`. Kept because it costs nothing and it is the only thing standing between a future white-paper title and a second stylesheet. Turn it on with `"light": true` in config/sites.json. ========================================================================= */ body.light{ --hi:#000; --on-photo:#fff; /* photo scrims stay dark in both modes */ --plate:#fff; --logo-lift:none; /* a dark masthead must not be brightened away */ --bar-bg:color-mix(in srgb,var(--tint) 88%,#fff); --menu-bg:color-mix(in srgb,var(--tint) 96%,#fff); } /* the stage sits ON photography, so it keeps a dark chrome */ body.light .stg-main .nav{background:rgba(0,0,0,.42);border-color:rgba(255,255,255,.34);color:#fff} body.light .stg-main .nav:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} body.light .pbox .lbtn{background:var(--surface-2);border-color:var(--accent)} body.light .pbox:hover .lbtn{background:var(--surface)} body.light .pg:hover{color:var(--hi)} body.light .up img{opacity:.9}