/* ==== tokens.css ==== */ /* WAWR's colours, each stated once. What each one is for is in site/DESIGN.md. The pages use these names (var(--w-lime)), not the numbers. Colours that are close to one of these but not equal are still written as numbers in the page styles; DESIGN.md lists them, for the designer to merge or keep. */ :root { --w-purple: #1a0089; /* the page ground */ --w-purple-band: #23108f; /* the Projects band on the homepage; the Links page */ --w-purple-deep: #12084f; /* behind pictures: slides, empty picture boxes */ --w-lime: #e2ff9f; /* the accent: what is active, hovered or focused */ --w-pink: #ff9fd6; /* second accent: the header's links; hover on the footer's address */ --w-ink: #fff; /* text and titles */ --w-ink-soft: #f7f4ff; /* text on project pages, Paintings and Links */ --w-muted: #c5bfdc; /* small labels and captions */ } /* ==== plex.css ==== */ /* IBM Plex Mono (SIL Open Font License, /fonts/plex/OFL.txt), served by the site itself instead of Google Fonts (6 Oct 2026: one less outside connection before text can show). Latin and Latin Extended only - the site is in English and Spanish names; the browser downloads a file only when the page uses a character in its unicode-range. Made from Google Fonts css2 (IBM Plex Mono, 400/600, roman and italic). IBM Plex Sans came with it and no page ever used it: removed 11 Oct 2026 (designer's yes; the files are in git history). */ @font-face { font-family: 'IBM Plex Mono'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/plex/ibm-plex-mono-400i-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/plex/ibm-plex-mono-400i-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: italic; font-weight: 600; font-display: swap; src: url(/fonts/plex/ibm-plex-mono-600i-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: italic; font-weight: 600; font-display: swap; src: url(/fonts/plex/ibm-plex-mono-600i-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/plex/ibm-plex-mono-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/plex/ibm-plex-mono-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/plex/ibm-plex-mono-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/plex/ibm-plex-mono-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ==== base.css ==== */ /* Site B base — what Cargo's framework used to supply around our own CSS. Values measured on the live Cargo site, 4 Oct 2026 (ARCHITECTURE, "Site B"). */ /* Bagnard — the title face. Sebastien Sanfilippo, SIL Open Font License 1.1 (fonts/Bagnard-OFL.txt, published with it). From the official repository github.com/sebsan/Bagnard, 4 Oct 2026. Cargo's copy cannot be used: its font server sends no cross-site header, so browsers refuse it elsewhere. */ @font-face { font-family: "Bagnard"; src: url("/fonts/Bagnard.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } /* Root size. Cargo sets the root font size from the window HEIGHT: 9% of the height as a percentage (81% at 900px tall, 108% at 1200px) — i.e. 1.44vh — and a flat 60% in its phone mode. A few inherited rem sizes depend on it. */ html { font-size: 1.44vh; scroll-behavior: smooth; } @media (max-width: 760px) { html { font-size: 60%; } } body { margin: 0; -webkit-font-smoothing: antialiased; } /* Faint violet specks over the purple page ground: a 64px dither tile from Dither Studio (tools/dither_image.py textures), shown at three times its size with hard pixels — lo-fi against sharp photos and type (designer, 11 Oct 2026). On a layer of its own, behind everything: image-rendering is inherited, so set on it would make every photo blocky. */ body { position: relative; } body::before { content: ""; position: absolute; inset: 0; min-height: 100vh; z-index: -1; pointer-events: none; /* min-height: a short page (404) is covered to the bottom of the window */ background: url("/media/tex-specks-violet-09abcdf17a-64.webp") 0 0 / 192px 192px; image-rendering: pixelated; opacity: .22; } /* Colours and type: cargo.css (body #1a0089 = rgb(26,0,137), measured; named in tokens.css). */ img { border: 0; } /* A picture's proportions before its file arrives (build.py, reserve_space). :where() gives this no weight at all, so any rule a page has about the picture's shape still wins. */ :where(img[style*="--ar"]) { aspect-ratio: auto var(--ar); } /* The header: Cargo's pinned "Navigation" page — fixed at the top, 126px tall, content overflowing below it, and pushing the page down by its height. Its look (gradient, blur) lives with it in content/chrome/nav.html. Page padding itself is in cargo.css. */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 126px; overflow: visible; } body { padding-top: 126px; } /* Phones: no header bar, as on Cargo (see content/chrome/nav.html). */ @media (max-width: 760px) { body { padding-top: 0; } } /* It sits outside the page text, so it names its own type: without this it showed in Times at 9.6px on phones (measured 11 Oct 2026). */ .skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; font: 14px/1.2 "IBM Plex Mono", monospace; } .skip-link:focus { left: 8px; padding: 8px 12px; background: var(--w-lime); color: var(--w-purple); } /* ==== cargo.css ==== */ /* What Cargo applied around every page, from the site's global stylesheet (Cargo Design › CSS; mirror cargo/global.css, read 4 Oct 2026). Two kinds of rules: 1. Cargo's built-in text styles ("Editor styles") and page padding. Our copied page CSS was written against these, so they keep Cargo's exact selectors and specificity: (on , as Cargo has them — on the `[data-css-preset] body` rule cannot match and the page turns white) and the element Cargo wraps page content in (build.py adds both). A weaker selector would let page rules win that lost on Cargo, and the reverse — the pages would look subtly different for no visible reason. 2. The WAWR rules appended at the end of that stylesheet in August 2026 (the slideshow arrows, a nudge on the header). Unchanged. Font names: "IBM Plex Mono" is the same typeface as Cargo's "Plex Mono", under the name Google Fonts serves it. */ /* Cargo's framework sizes every box with its padding and border inside (measured: `* { box-sizing: border-box }` in Cargo's inline CSS). Without it the slideshow controls come out 58px wider than the window. */ *, *::before, *::after { box-sizing: border-box; } bodycopy { display: block; } /* ---- 1. Cargo built-in styles ---------------------------------------- */ /* "Content" defaults — top of cargo/global.css, verbatim except that the body colours come from Cargo's design settings, as on Cargo ([data-css-preset] body beats plain body). `.content` is Cargo's content wrapper; on Site B it is
. */ body { background-color: #fff; color: #000; } [data-css-preset] body { background-color: var(--w-purple); } a:active { opacity: 0.85; } i, em { font-style: italic; } b, strong { font-weight: bolder; } sub, sup { position: relative; vertical-align: baseline; } sub { top: 0.3em; } sup { top: -0.4em; } s { text-decoration: line-through; } img { border: 0; padding: 0; } ul, ol { margin: 0; padding: 0 0 0 1em; } blockquote { margin: 0; padding: 0 0 0 2em; } hr { background: rgba(255, 255, 255, 0.9); border: 0; height: 1px; display: block; } .content img { float: none; margin-bottom: 1em; } /* "Editor styles" */ [data-predefined-style="true"] bodycopy { font-size: 1.4rem; font-weight: 400; color: rgba(255, 255, 255, 0.79); font-family: "IBM Plex Mono", monospace; font-style: normal; line-height: 1.3; } [data-predefined-style="true"] bodycopy a { color: rgba(0, 255, 195, 0.71); padding-bottom: 0.1em; border-bottom: 0.07em solid rgba(255, 255, 255, 0.3); text-decoration: none; } bodycopy a.image-link, bodycopy a.icon-link, bodycopy a.image-link:hover, bodycopy a.icon-link:hover { border-bottom: 0; padding-bottom: 0; } [data-predefined-style="true"] h1 { font-family: Bagnard, Georgia, serif; font-style: normal; font-weight: 400; padding: 0; margin: 0; font-size: 4.7rem; line-height: 1.1; color: rgba(255, 255, 255, 0.95); } [data-predefined-style="true"] h1 a { color: rgba(255, 255, 255, 0.95); } [data-predefined-style="true"] h2 { font-family: Bagnard, Georgia, serif; font-style: normal; font-weight: 400; padding: 0; margin: 0; color: rgba(255, 255, 255, 0.95); font-size: 3rem; line-height: 1.2; } [data-predefined-style="true"] h2 a { color: rgba(255, 255, 255, 0.95); } [data-predefined-style="true"] small { display: inline-block; font-size: 1.3rem; line-height: 1.3; font-family: "IBM Plex Mono", monospace; font-style: normal; font-weight: 400; color: rgba(255, 255, 255, 0.34); } [data-predefined-style="true"] small a { color: rgba(255, 255, 255, 0.5); border-bottom-width: 0; } /* Page padding: Cargo's default 2.4rem everywhere, except the homepage, whose own setting is 4.5rem (the only one of 61 pages that changes it — read from every page's local_css in cargo/pages.json, 4 Oct 2026). */ .pad-chrome { padding: 2.4rem; } main { padding: 2.4rem; } .page-home main { padding: 4.5rem; } /* 4 Oct 2026, designer: the purple band between the header and the slideshow (that 4.5rem, 68px at 912px) looked awkward next to the soft fade into the projects below. The slideshow now starts right under the header, whose own fade (nav.html, .site-header:after) blends into the photo. */ .page-home main { padding-top: 0; } /* The slideshow and the Projects band are 100vw wide, and 100vw includes the scrollbar: wherever scrollbars take up room (Windows; a Mac with a mouse) the homepage scrolled sideways by 7–8px (an outside audit saw it; reproduced at 1363px, 13 Oct 2026 — this Mac's scrollbars float over the page, so it never showed here). The few pixels beyond the page are cut off instead. */ .page-home main { overflow-x: clip; } /* Per-page settings (Cargo page Design panel, `local_css` in the export — only these three pages set anything beyond the defaults). Cargo scoped them with [local-style=""]; the selectors below keep that specificity. */ /* Navigation page (38553670): larger type, plain links. */ [data-predefined-style="true"] .site-header bodycopy { font-size: 1.9rem; } [data-predefined-style="true"] .site-header bodycopy a { color: rgba(255, 255, 255, 0.8); border-bottom: 0; } /* Homepage (38553671): content centred. */ .page-home main bodycopy { margin-left: auto; text-align: center; } /* ---- 2. WAWR homepage refinements, August 2026 ----------------------- */ .home-arrow { display: flex !important; align-items: center !important; justify-content: center !important; font-size: 0 !important; color: rgba(255, 255, 255, 0.72) !important; border-color: rgba(255, 255, 255, 0.28) !important; background: rgba(6, 3, 30, 0.14) !important; } .home-arrow::before { display: block; font-family: "IBM Plex Mono", monospace; font-size: 1.18rem; font-weight: 400; line-height: 1; transform: translateY(-0.04em); } .home-arrow-left::before { content: "<"; } .home-arrow-right::before { content: ">"; } .home-arrow:hover { color: rgba(255, 255, 255, 0.92) !important; border-color: rgba(255, 255, 255, 0.48) !important; background: rgba(6, 3, 30, 0.24) !important; } @media (min-width: 701px) { .site-nav-shell { margin-top: -1.15rem !important; } } /* ==== project.css ==== */ .wawr-project{--wp-ink:var(--w-ink-soft);--wp-muted:var(--w-muted);--wp-line:rgba(247,244,255,.23);color:var(--wp-ink);font-family:"IBM Plex Mono",monospace;max-width:1440px;margin:0 auto;box-sizing:border-box;padding:48px clamp(18px,3vw,48px) 72px} .wawr-project *{box-sizing:border-box} .wawr-project a{color:var(--wp-ink)!important;text-decoration:none!important} .wawr-project a:hover{color:var(--w-lime)!important} .wawr-project a:focus-visible{outline:2px solid var(--w-lime);outline-offset:5px} .wawr-project .wp-overview{display:grid;grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr);gap:clamp(28px,5vw,72px);align-items:start} .wawr-project .wp-eyebrow{font-size:12px;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;color:var(--wp-muted);margin:0 0 18px} .wawr-project h1{font-family:"Bagnard",Georgia,serif!important;font-weight:400!important;font-size:clamp(38px,4.8vw,68px)!important;line-height:1.08!important;letter-spacing:-.027em!important;margin:0 0 20px!important;overflow-wrap:normal} .wawr-project .wp-role{font-size:15px;line-height:1.45;color:var(--w-lime);margin:0 0 26px} .wawr-project .wp-description{border-top:1px solid var(--wp-line);padding-top:24px} .wawr-project .wp-description p{font-size:16px;line-height:1.6;margin:0 0 18px} .wawr-project .wp-hero{margin:0;min-width:0} .wawr-project .wp-image{display:block!important;width:100%!important;height:auto!important;max-width:100%!important;max-height:none!important;object-fit:contain!important;margin:0!important;transform:none!important;filter:none!important} .wawr-project .wp-hero .wp-image{max-height:75vh!important;object-fit:contain!important;object-position:top center} .wawr-project figcaption{font-size:12px;line-height:1.5;color:var(--wp-muted);margin-top:10px} .wawr-project .wp-resource{display:block;font-size:14px;line-height:1.5;margin:16px 0;text-decoration:underline!important;text-underline-offset:4px} .wawr-project .wp-section{margin-top:48px;border-top:1px solid var(--wp-line);padding-top:24px} .wawr-project h2{font-family:"Bagnard",Georgia,serif!important;font-size:clamp(28px,3.2vw,42px)!important;line-height:1.15!important;font-weight:400!important;letter-spacing:-.02em!important;margin:0 0 24px!important} /* A section's text: how it was made (build.py, render_project — 12 Oct 2026). */ .wawr-project .wp-text{font-size:16px;max-width:65ch;margin:0 0 28px} /* font-size here too: ch is measured on this box, not on its paragraphs */ .wawr-project .wp-text p{font-size:16px;line-height:1.6;margin:0 0 18px} .wawr-project .wp-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start} .wawr-project .wp-gallery figure{margin:0;min-width:0}/* A tall picture is at most 720px high (the rule below), so its figure is that height times the picture's width/height (--r, written by build.py). Until 11 Oct 2026 the figure took its width from the loaded file: before the file arrived it was 0px wide, and every row of tall pictures opened up as it loaded (Pier: 1,328px of page height). */ .wawr-project .wp-gallery figure.wp-portrait{width:min(100%,calc(720px*var(--r,1)));max-width:100%;justify-self:center} .wawr-project .wp-gallery figure.wp-portrait .wp-image{max-height:720px!important;object-fit:contain!important} .wawr-project .wp-facts{list-style:none;margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--wp-line);font-size:14px;line-height:1.6} .wawr-project .wp-facts li{margin:0 0 7px} .wawr-project .wp-credits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;list-style:none;margin:0;padding:0} .wawr-project .wp-credits li{font-size:14px;line-height:1.55;margin:0;padding:12px 0;border-top:1px solid var(--wp-line);overflow-wrap:anywhere} .wawr-project .wp-credits strong{display:block;font-size:12px;font-weight:400;line-height:1.5;color:var(--wp-muted);margin-bottom:4px} .wawr-project .wp-video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.wawr-project .wp-video-grid figure{margin:0}.wawr-project .wp-video{aspect-ratio:16/9;background:rgba(5,3,24,.45)} .wawr-project .wp-video iframe{display:block;width:100%;height:100%;border:0} .wawr-project .wp-pagination{display:flex;justify-content:space-between;gap:24px;margin-top:56px;padding-top:24px;border-top:1px solid var(--wp-line);font-size:14px;line-height:1.5}.wawr-project .wp-pagination a{max-width:60%} @media(max-width:760px){.wawr-project{padding:28px 16px 48px}.wawr-project .wp-overview{grid-template-columns:1fr;gap:24px}.wawr-project .wp-hero{grid-row:2}.wawr-project .wp-description p{font-size:16px}.wawr-project .wp-gallery{grid-template-columns:1fr;gap:20px}.wawr-project .wp-gallery figure.wp-portrait{width:100%}.wawr-project .wp-gallery .wp-image{max-height:none!important}.wawr-project .wp-hero .wp-image{max-height:none!important}.wawr-project .wp-credits{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}.wawr-project .wp-video-grid{grid-template-columns:1fr}.wawr-project .wp-section{margin-top:34px}.wawr-project h1{font-size:clamp(36px,10vw,58px)!important}.wawr-project .wp-pagination{margin-top:38px}} @media(max-width:400px){.wawr-project .wp-credits{grid-template-columns:1fr}} /* ==== experiments.css ==== */ /* Experiments: the index (/experiments/) and one page per experiment (/experiments//), both built by build.py from content/experiments/. One stylesheet for both, so it lives here and not in a page. The index is a list of cards (designer, 13 Oct 2026: "it should be a word a subtitle and a 2-3 pics. then you can click into the individual projects"; "maybe we make the photos square"; of the phone mock-ups, "two squares"; "click opens to own page"). Until then the index held every experiment's full text, filtered by thread (12 Oct). The full text, the thread and the production it led to are now on the experiment's page. Colours by name (tokens.css), sizes in px or clamp() (site/DESIGN.md: rem follows the window height here). Lines, not boxes; square corners. */ .xp-page{--xp-line:rgba(247,244,255,.23);max-width:1440px;margin:0 auto;box-sizing:border-box;padding:48px clamp(18px,3vw,48px) 72px;color:var(--w-ink-soft);font-family:"IBM Plex Mono",monospace;text-align:left} .xp-page *{box-sizing:border-box} .xp-intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:end;margin-bottom:clamp(36px,5vw,64px)} .xp-intro h1{margin:0!important;color:var(--w-ink)!important;font-family:"IBM Plex Mono",monospace!important;font-size:clamp(44px,6.7vw,104px)!important;font-weight:400!important;line-height:.92!important;letter-spacing:-.07em!important} .xp-intro p{margin:0;max-width:46ch;font-size:16px;line-height:1.6} .xp-page a:focus-visible{outline:2px solid var(--w-lime);outline-offset:4px} /* ---- the index: a word, a subtitle, square pictures ---- */ .xc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(24px,3.5vw,48px);align-items:center;margin:0 0 44px;padding:0!important;border:0!important;color:inherit!important;text-decoration:none!important} .xc-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px} .xp-page .xc-word{margin:0!important;font-family:"Bagnard",Georgia,serif!important;font-weight:400!important;font-size:clamp(32px,3.6vw,52px)!important;line-height:1.08!important;letter-spacing:-.02em!important;color:var(--w-ink)!important;transition:color .2s ease-out} .xc-year{flex:0 0 auto;font-size:13px;line-height:1.4;letter-spacing:.04em;color:var(--w-muted)} .xc-sub{display:block;margin-top:8px;font-size:15px;line-height:1.45;color:var(--w-lime)} .xc-pics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} /* Square: a wide picture loses its sides. Each opens whole on its page. */ .xc-pic{display:block;aspect-ratio:1/1;overflow:hidden;background:var(--w-purple-deep)} .xc-pic img{display:block;width:100%;height:100%;object-fit:cover;margin:0!important} .xc:hover .xc-word,.xc:focus-visible .xc-word{color:var(--w-lime)!important} /* ---- one experiment's page ---- */ .xe-back{margin:0 0 18px;font-size:13px;line-height:1.5;letter-spacing:.04em} .xp-page .xe-back a{color:var(--w-muted)!important;border-bottom:0;padding-bottom:0;text-decoration:none} .xp-page .xe-back a:hover{color:var(--w-lime)!important} .xp{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:start;border-top:1px solid var(--xp-line);padding:32px 0 48px} .xp-text .xp-meta{font-size:12px;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;color:var(--w-muted);margin:0 0 14px} .xp-meta i{font-style:normal;margin:0 .6em} .xp-page .xp h1{margin:0 0 10px!important;font-family:"Bagnard",Georgia,serif!important;font-weight:400!important;font-size:clamp(38px,4.8vw,68px)!important;line-height:1.08!important;letter-spacing:-.027em!important;color:var(--w-ink)!important} .xp-text .xe-sub{font-size:15px;line-height:1.45;color:var(--w-lime);margin:0 0 26px} .xp-text p{max-width:60ch;font-size:16px;line-height:1.6;margin:0 0 16px} .xp-text .xp-question{font-size:clamp(17px,1.5vw,21px);line-height:1.45;color:var(--w-ink)} .xp-found span,.xp-facts span{display:block;font-size:12px;line-height:1.5;color:var(--w-muted);margin-bottom:4px} .xp-facts{max-width:60ch;list-style:none;margin:22px 0 0;padding:0;font-size:14px;line-height:1.55} .xp-facts li{margin:0;padding:12px 0;border-top:1px solid var(--xp-line)} .xp-page .xp-text a,.xp-page .xe-thread a{color:var(--w-ink-soft)!important;padding-bottom:0;border-bottom:0;text-decoration:underline;text-underline-offset:4px} .xp-page .xp-text a:hover,.xp-page .xe-thread a:hover{color:var(--w-lime)!important} /* Pictures stay small on purpose: many of these exist only as small files, and a small picture shown small is sharp. Each opens at its full size. */ .xp-pictures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start} .xp-pictures.one{grid-template-columns:minmax(0,420px)} .xp-pictures a{display:block;background:var(--w-purple-deep)} .xp-pictures img{display:block;width:100%;height:auto;margin:0} /* the idea it belongs to, and where else that idea went */ .xe-thread{max-width:65ch;border-top:1px solid var(--xp-line);padding:24px 0 8px} .xe-thread .xe-label{font-size:12px;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;color:var(--w-muted);margin:0 0 8px} .xp-page .xe-thread h2{margin:0 0 10px!important;font-family:"Bagnard",Georgia,serif!important;font-weight:400!important;font-size:clamp(26px,2.8vw,36px)!important;line-height:1.15!important;letter-spacing:-.02em!important;color:var(--w-ink)!important} .xe-thread p{font-size:16px;line-height:1.6;margin:0 0 10px} .xe-thread .xe-seen{font-size:14px;color:var(--w-muted)} .xe-pager{display:flex;justify-content:space-between;gap:24px;margin-top:48px;padding-top:24px;border-top:1px solid var(--xp-line);font-size:14px;line-height:1.5} .xp-page .xe-pager a{color:var(--w-ink-soft)!important;border-bottom:0;padding-bottom:0;text-decoration:none} .xp-page .xe-pager a:hover{color:var(--w-lime)!important} @media(max-width:760px){ .xp-page{padding:28px 16px 48px} .xp-intro{grid-template-columns:1fr;gap:16px;align-items:start} /* the cards: the word over two squares (a third picture is not shown, and not fetched: it is lazy and hidden) */ .xc{display:block;margin-bottom:40px} .xp-page .xc-word{font-size:32px!important} .xc-sub{font-size:14px;margin:6px 0 12px} .xc-pics{grid-template-columns:1fr 1fr;gap:8px} .xc-pic:nth-child(n+3){display:none} .xp{grid-template-columns:1fr;gap:24px;padding:24px 0 36px} .xp-pictures{gap:10px} /* a link in a line of text is 19px tall: padding makes it a 45px target, the margin gives the space back */ .xp-page .xp-facts a,.xp-page .xe-seen a,.xp-page .xe-back a,.xp-page .xe-pager a{display:inline-block;padding:13px 0;margin:-9px 0} .xe-pager{flex-wrap:wrap} } @media(prefers-reduced-motion:reduce){.xp-page .xc-word{transition:none}} /* ==== mobile.css ==== */ /* WAWR mobile refinement, 15 September 2026 — from Cargo Design › Custom HTML (