/* ============================================================ Cairns - one stylesheet for the whole series (issue page + the /cairns archive index). Ported from Dia's _proto/cairns-build/cairns/cairns.css (LET1c, docs/design/2026-09-24-cairns-prototype-port.md). Cairns is a sibling of Clarity & Perspective in FEEL but does not sit under that route, so it does NOT pull in series-scene.* (the canvas world) — it reads as the same site by inheriting the canonical tokens from /clarity-perspective/colors_and_type.css (paper + deep-field palettes, kintsugi surface, the gold thread) and is set apart by its own motif: the cairn. ADAPTED FROM THE PROTOTYPE (LET1c decision 3 — no new HTML vocabulary, no change to shared/blocks-to-html.mjs): every selector below targets what the CORE block mapper actually emits inside a slot, not Dia's own classes. The mapping: .s-body / .question -> .slot-observation .body p / .slot-question .body p .borrowed .q / .src -> .slot-borrowed blockquote / .slot-borrowed p.aside .path-body / a.waymarker -> .path-card .body p / .path-card a.waymarker .shot (custom lightbox) -> figure.plate .plate-img (shared/series-article.js owns the inline-expand behavior; no lightbox overlay is built here) .embed/video/p.caption ARE real core output (YouTube/Vimeo/a downloaded Notion mp4 — shared/blocks-to-html.mjs's "video"/"embed" cases) and are styled below, even though they're not in the brief's 6-mapping table for the 22 Sep issue specifically. AUD1 (24 Sep) added a 7th: .audio (the shared player, shared/audio-player.css's baseline, restyled below for a slot) and .embed.podcast (a Spotify/Apple Podcasts iframe, NOT 16:9 like a video embed). Gallery / .portal are still not core output at all (no block type maps to them), so that CSS is not carried over — it would be dead weight styling markup the engine never emits. Contract notes (unchanged from the prototype): - No OS-level motion media query anywhere (CLAUDE.md #6). All motion gates on body.reduced (the footer Motion toggle) via window.motionReduced(). - 16px hard type floor; reading text sits at 17-19px. - Never overrides --display or any nav/font token the chrome reads. ============================================================ */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;overflow-x:clip} /* ---- local tokens: STONE + TRAIL, derived from the system tokens so they flip light<->dark. Nothing here shadows a system or nav token. ---- */ body{ --stone:color-mix(in srgb,var(--ink) 10%,var(--page-bg)); --stone-2:color-mix(in srgb,var(--ink) 16%,var(--page-bg)); --stone-edge:color-mix(in srgb,var(--ink) 26%,transparent); --cap:var(--thread-solid); /* gold capstone */ --trail:color-mix(in srgb,var(--accent) 34%,transparent); /* the drawn path line */ --panel:color-mix(in srgb,var(--page-bg) 74%,transparent); /* media surfaces */ font-family:var(--serif); color:var(--ink); background:transparent; min-height:100vh; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; transition:color .6s var(--exhale); } /* ============================================================ THE GROUND - a quiet, static, theme-aware backdrop. ============================================================ */ .ground{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden; background: radial-gradient(130% 90% at 50% -20%, color-mix(in srgb,var(--accent) 7%,transparent), transparent 62%), linear-gradient(180deg, var(--page-bg) 0%, var(--page-bg2) 100%); } .ground::before{content:"";position:absolute;inset:0;background-image:var(--grain);background-size:240px 240px;opacity:.5} /* ============================================================ NAV DOCK - the sticky title tab chrome.js injects from data-dock. ============================================================ */ .nav .dock{position:absolute;left:50%;top:100%;transform:translateX(-50%) translateY(-8px); display:flex;align-items:center;gap:9px;opacity:0;pointer-events:none;z-index:99; padding:8px 18px;border-radius:0 0 var(--r-md) var(--r-md); background:color-mix(in srgb,var(--accent) 18%,var(--nav-glass)); backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4); border:1px solid color-mix(in srgb,var(--accent) 38%,var(--nav-border));border-top:none;box-shadow:var(--nav-shadow); transition:opacity .4s var(--exhale),transform .5s var(--breath);max-width:min(80vw,520px)} .nav.docked .dock{opacity:1;transform:translateX(-50%) translateY(0)} .nav .dock .dg{width:18px;height:18px;color:var(--accent);flex:none} .nav .dock .dg svg{width:100%;height:100%} .nav .dock .dt{font-family:var(--display);font-size:14px;font-weight:800;text-transform:lowercase;letter-spacing:-.01em; color:var(--nav-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ============================================================ SHARED: the cairn glyph. A stack of stones, largest at the base, a gold capstone. Drawn inline with 1-4 stones so the stack visibly grows across the sections. Stones settle in on reveal. ============================================================ */ .cairn{display:inline-block;line-height:0;aspect-ratio:64/96} .cairn svg{display:block;width:100%;height:auto;overflow:visible} .stone{transform-box:fill-box;transform-origin:center;fill:var(--stone);stroke:var(--stone-edge);stroke-width:1; filter:drop-shadow(0 1.6px 1px rgba(0,0,0,.28)); opacity:0;transform:translateY(-10px) scale(.88) rotate(var(--rot,0deg)); transition:opacity .55s var(--exhale),transform .75s var(--breath)} .stone.s-alt{fill:var(--stone-2)} .stone.s-cap{fill:var(--cap);stroke:color-mix(in srgb,var(--cap) 60%,var(--ink))} .in .stone,.reveal.in .stone{opacity:1;transform:rotate(var(--rot,0deg))} .in .stone:nth-child(1){transition-delay:.04s} .in .stone:nth-child(2){transition-delay:.16s} .in .stone:nth-child(3){transition-delay:.28s} .in .stone:nth-child(4){transition-delay:.40s} .in .stone:nth-child(5){transition-delay:.52s} .in .stone:nth-child(6){transition-delay:.64s} /* ============================================================ ISSUE PAGE ============================================================ */ .issue{position:relative;z-index:1;max-width:900px;margin:0 auto;padding:0 24px 40px} .c-head{text-align:center;padding:72px 0 8px} .crumb{font-family:var(--mono);font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:22px} .crumb a{color:var(--ink-faint);transition:color .25s} .crumb a:hover{color:var(--accent)} .c-mark{display:block;margin:0 auto 18px;color:var(--accent);width:58px} h1.c-title{font-family:var(--display);font-size:clamp(32px,5.4vw,52px);font-weight:800;letter-spacing:-.02em;line-height:1.03;color:var(--ink);margin-bottom:14px} .c-date{font-family:var(--mono);font-size:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)} /* the sections: a two-column climb. Left gutter carries the numeral and the growing cairn; the body reads at measure. A single trail line runs down the gutter, connecting the cairns. */ .slots{position:relative;margin-top:48px} .slots::before{content:"";position:absolute;top:10px;bottom:120px;left:65px;width:1.5px; background:linear-gradient(var(--trail),color-mix(in srgb,var(--trail) 20%,transparent));z-index:0} .slot{position:relative;z-index:1;display:grid;grid-template-columns:132px minmax(0,1fr);gap:34px;align-items:start; padding:30px 0} .slot + .slot{border-top:1px solid var(--line)} .slot-mark{position:sticky;top:96px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px} .slot-mark .numeral{font-family:var(--display);font-size:26px;font-weight:800;letter-spacing:.02em;color:var(--accent);line-height:1} .slot-mark .cairn{color:var(--accent);width:52px} .slot-body{max-width:64ch} /* prose — slot I (observation) and slot III (question) both come through as plain core .body > p; scope by the slot-wrap's slot-observation/slot-question modifier class (shared/cairns-slots.mjs), not by a class the engine emits. CAIRNS2 item 4: body 22px, opening paragraph 24px — this page's own scale, overriding CLAUDE.md #9's 17-19px target by Zaheer's decision (27 Sep). */ .slot-observation .body p{font-family:var(--serif);font-size:22px;line-height:1.68;color:var(--ink-soft);margin-bottom:20px;hyphens:none;text-wrap:pretty} .slot-observation .body p:first-child{font-size:24px;line-height:1.6;color:var(--ink)} .slot-observation .body p:last-child{margin-bottom:0} .slot-observation .body strong{color:var(--ink);font-weight:600} .slot-observation .body em{font-style:italic} .slot-observation .body a{color:var(--accent);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent);transition:border-color .25s} .slot-observation .body a:hover{border-bottom-color:var(--accent)} /* a borrowed fragment: the core's bare
+ the paired

pulled adjacent by pairQuoteSource() (shared/cairns-slots.mjs) — no .borrowed wrapper exists in core output, so these key straight off .slot-borrowed. CAIRNS2 item 4: quotes 26px, flat (dropped the vw clamp — this page's scale is fixed, not fluid). CAIRNS2 item 1 (planning review, 27 Sep): the blockquote's own trailing space used to be padding-bottom — internal to the box, so it read fine but measured as a literal 0px gap to the next sibling. Real margin-bottom instead, so there's always a measurable >=18px-floor gap after a quote, whatever follows it (a paired p.aside, an unrelated paragraph, or another blockquote — section II has three). */ .slot-borrowed blockquote{font-family:var(--serif);font-style:italic;font-size:26px;line-height:1.45;color:var(--ink); padding-top:8px;margin:0 0 20px;position:relative;quotes:none} .slot-borrowed blockquote::before{content:"";display:block;width:54px;height:2px;background:var(--thread);margin:0 0 20px} .slot-borrowed p.aside{font-family:var(--mono);font-size:16px;letter-spacing:.04em;color:var(--ink-faint);margin-bottom:22px} .slot-borrowed p.aside a{color:var(--accent);border-bottom:1px solid var(--nav-border)} /* CAIRNS2 item 1(b): a borrowed slot can carry plain prose beyond the quote itself (e.g. an "Image sources: …" credits line and commentary following a gallery) — core emits these as ordinary .body > p, same as slot I, so give them the same reading treatment + the same >=18px-floor gap before the next paragraph (was unstyled/0-margin: the brief's exact complaint). No :last-child margin reset here (unlike slot-observation) — a borrowed slot can have several quote/paragraph pairs in sequence, so "last child of this particular div.body" is not "last thing in the slot"; zeroing it was what collapsed the paragraph-before-a-blockquote gap to 0 (planning review, 27 Sep). p.credit (item 3, same review): the credits line markGalleryCredits() marks right after a carousel — same caption treatment as p.aside/figcaption, 16px mono. */ .slot-borrowed .body p{font-family:var(--serif);font-size:22px;line-height:1.68;color:var(--ink-soft);margin-bottom:20px} .slot-borrowed .body p.credit{font-family:var(--mono);font-size:16px;letter-spacing:.04em;color:var(--ink-faint)} .slot-borrowed .body a{color:var(--accent);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent);transition:border-color .25s} .slot-borrowed .body a:hover{border-bottom-color:var(--accent)} /* a question (CAIRNS2 item 3): the most prominent line on the page — accent colour, and sized so it is always larger than every other body text at every viewport (min 28px clears the 26px quote size at mobile widths, where the old clamp's vw term collapsed toward its floor). Notion authors this section as either a plain paragraph (core: .body > p, no wrapper) or a quote block (core: a bare

, wrapBody() leaves it unwrapped) — style both so the question reads the same either way; the observed issue ("The stones show the way") uses the quote form. */ .slot-question .body p, .slot-question blockquote{font-family:var(--serif);font-size:clamp(28px,3.6vw,34px);line-height:1.3;color:var(--accent);font-weight:500;max-width:26ch;quotes:none} /* a Notion divider -> the ◐ glyph beat (core: shared/blocks-to-html.mjs's MOVEMENT constant, `div.movement > span.g > svg`, emitted as its own top-level sibling wherever a divider sits, same as a blockquote — never wrapped in div.body). Ported from shared/reader-page.css's `.reader-body .movement` rules (CAIRNS2, planning review, 27 Sep) — this was the one core-emitted element cairns.css had zero styling for. Re-tokened for Cairns: --accent for the glyph (the same gold used for the cairn capstone and the numerals), no reader-specific wrapper needed. */ .movement{text-align:center;margin:30px 0;color:var(--accent);opacity:.6} .movement .g{display:inline-block;width:20px;height:20px} .movement svg{width:100%;height:100%} /* ============================================================ MEDIA — a single image, framed by the core's figure.plate. The inline-expand toggle is /shared/series-article.js's job (figure.plate .plate-img -> .expanded); this file only supplies the stone-era look. ============================================================ */ .plate-img{all:unset;position:relative;display:block;width:100%;cursor:zoom-in;border-radius:var(--r-md);overflow:hidden; border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line)); background:linear-gradient(160deg,#c9b48e,#7d95a0 45%,#4a5a63); box-shadow:0 20px 46px -34px color-mix(in srgb,var(--accent) 40%,rgba(70,55,30,.5)); transition:transform .4s var(--exhale),box-shadow .4s var(--exhale)} .plate-img::after{content:"";display:block;padding-top:66%} .plate-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .plate-img:hover{transform:translateY(-2px);box-shadow:0 26px 54px -32px color-mix(in srgb,var(--accent) 52%,rgba(70,55,30,.5))} figure.plate.expanded .plate-img{cursor:zoom-out} figure.plate.expanded .plate-img::after{padding-top:110%} figure.plate.expanded .plate-img img{object-fit:contain;background:#0d0e0e} /* CAIRNS2 item 1: the image-sources line needs the same clear-space-before- next-paragraph treatment as a quote's source line — bottom margin raised from 4px to 20px (a little more than the 18px quote-to-source floor). */ figure.plate{margin:26px auto 20px;max-width:64ch} figure.plate figcaption{font-family:var(--mono);font-size:16px;letter-spacing:.04em;color:var(--ink-faint);padding:10px 2px 0;text-align:center} /* a video: YouTube/Vimeo iframe, or a downloaded Notion-hosted mp4