/* * Scriptorium house stylesheet. * * Embedded in the exe (package.json's pkg.assets), written into every built * site as css/scriptorium.css, and linked on every page after the pin's own * stylesheets and before the campaign's overrides.css * (src/build/housestyle.js; docs/decisions/0012-product-stylesheet.md). * * SD-7's split governs what may live here: a rule belongs in this file only * if it holds for ANY gm-apprentice vault, i.e. it fixes a defect in the * pin's own generic templates/CSS and does not depend on a particular * vault's palette, fonts or content. The sections below were moved * verbatim, comments included, from * a campaign's css/overrides.css (docs/decisions/0012-product-stylesheet.md), whose own copies were * replaced with a one-line pointer to here. Do not add a campaign-specific * selector, asset name, or colour literal to this file (AC-20). * * SD-8: this file owns no colour value. Permitted colour syntax, exactly: * var(--...), color-mix() over a var, currentColor, transparent, and * #000/#fff only inside a mask/gradient alpha ramp where the value is an * alpha channel. Where colour is needed, consume the tokens lib/theme.js * emits into theme.css (--bg, --bg-card, --bg-header, --bg-hero, --text, * --text-muted, --accent, --accent-dim, --border). Own tokens, once this * file grows any, are namespaced --sc-* so they cannot collide with what * lib/theme.js regenerates each build. * * E1 (this file's origin) moves only pre-existing pin-defect fixes; it adds * no new rules and no redesign. See the Engineering Brief's four-run split * for what a later run appends. */ /* Focus and motion (from handoff section 3) */ /* * UI-AC-06: css/style.css:1232 and :1644 strip the outline on two form controls * (.name-filter:focus, .search-input) without replacing it, and nothing in the pin * defines a general :focus-visible ring for the ordinary interactive elements the * six-tab-stop walk actually lands on (nav toggles, cards, links) — Chromium's * default focus ring is platform-drawn and not guaranteed to meet 3:1 against every * one of this theme's three surfaces (--bg, --bg-card, --bg-header/--bg-hero). One * explicit ring, keyboard-only (:focus-visible, so no visible ring on mouse/touch * activation), in the accent colour that is already the site's link/active colour: * measured against all three surfaces in the scratch build (see Engineer report), * all clear 3:1. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* * Reviewer rework: the generic :focus-visible rule above never reaches * .name-filter. css/style.css:1232 is `.name-filter:focus { outline: none; ... * }`, specificity (0,2,0) (one class + one pseudo-class); the generic rule is * (0,1,0). A lower-specificity rule loses no matter how late it loads in the * cascade, unlike .search-input just below it in style.css (:1644), which is * an unscoped `.search-input { outline: none; }` at (0,1,0) — an actual tie * that source order settles, which is why that one already worked. Audited * every other outline-removing rule in the pin (`grep -n outline css/style.css * css/themes/ *.css`): these two are the only resets; :3312 and :3837 set real * outlines, not resets, and nothing else strips one. Matching the exact * selector (.name-filter:focus-visible) gets the same (0,2,0) specificity, so * source order (this file loads after style.css) settles it correctly, same * technique as the transition-duration overrides below, no !important. * Re-measured on characters/npcs/index.html (where .name-filter actually * renders): computed outlineStyle is "none" without this rule, "solid" with * it, confirmed against a live .name-filter element, not just the rule's * presence in the file. */ .name-filter:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* * UI-AC-07: css/style.css:36 sets `scroll-behavior: smooth` on with no * `prefers-reduced-motion` guard anywhere in the pin (no grep hit in style.css, * overrides.css or either theme file per the baseline). `prefers-reduced-motion: * reduce` is meant to suppress exactly this kind of motion. `html` here matches * style.css:36's selector at equal (type-selector) specificity, so source order * (overrides.css loads last, lib/templates/base.js:62-63) settles it without * !important. * * UI-AC-07: every selector in style.css that declares a non-zero * transition-duration site-wide — css/style.css:122 .nav-group-toggle, :566 * .img-lightbox-wrap::after, :669 .pc-tab, :862 .entity-card, :900 .pc-card, :950 * .npc-card, :1147 .explore-card, :1206 .pill-filter, :1538 .npc-location-card, * :1565 .rel-card, :2954 .coc-sheet-root .foliotab, :3684 .back-to-top (the 30 * elements the baseline counted on index.html are six of these: nav-group-toggle, * pc-card, npc-card, entity-card, explore-card, back-to-top) — is repeated here * verbatim so each override selector matches its style.css counterpart at the same * specificity; the later source position in overrides.css is then enough to win, * again with no !important needed. Duration goes to exactly 0s: UI-AC-07 counts * non-zero transition-duration elements and expects 0, and nothing in js/ or * lib/templates listens for `transitionend`, so there is no reason to keep a * near-zero value alive for an event that nothing reads. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .nav-group-toggle, .img-lightbox-wrap::after, .pc-tab, .entity-card, .pc-card, .npc-card, .explore-card, .pill-filter, .npc-location-card, .rel-card, .coc-sheet-root .foliotab, .back-to-top { transition-duration: 0s; transition-delay: 0s; } } /* Layout and overflow (from handoff section 4) */ /* * UI-11/UI-AC-04 (baseline BASELINE.md "Horizontal overflow at 390px": * an item page with a long title scrolls at 419px vs 390px clientWidth). Root cause: CSS * grid items default to min-width: auto, so a track's minmax() lower bound never * actually wins over the item's own intrinsic (min-content) width. On this page * that chain starts at .content-with-sidebar's own grid (css/style.css:277-283, * :285-296 sets grid-template-columns) — its ".main" item refuses to shrink below * the width of .stat-block inside it, which uses the identical recipe * (grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr)), css/style.css: * 1914-1917) around a font-mono .stat-value that won't wrap. min-width: 0 on * every grid item in the chain lets each track shrink to its minmax() lower * bound instead of its content's; overflow-wrap lets the value text wrap inside * that width rather than forcing it wider. The same auto-fit/auto-fill + * minmax(_, 1fr) recipe is reused by .card-grid (:847-852), .quick-stats * (:1940-1943) and .relationship-cards (:1552-1557), so all four grids get the * same treatment pre-emptively. */ .content-with-sidebar > .main, .content-with-sidebar > .context-sidebar, .card-grid > *, .stat-block .stat-item, .quick-stats .stat-item, .relationship-cards > * { min-width: 0; } .stat-block .stat-value, .quick-stats .stat-value { overflow-wrap: break-word; } /* * #97: stat values use the theme's body face. The generator sets them in var(--font-mono), an * unshipped system chain (ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Monaco, * Consolas) that neither theme defines, so they rendered in whatever monospace the viewer's OS * had, unrelated to the theme (reported as reading like Comic Sans). Same specificity as the * generator's rules; this file loads after css/style.css. Lining tabular figures keep short * numeric stats ("8 lb.") aligned in a face whose default figures are old-style. */ .stat-block .stat-value, .quick-stats .stat-item .stat-value { font-family: var(--font-body); font-variant-numeric: lining-nums tabular-nums; } /* * UI-11/UI-AC-04 (baseline: campaign/player-characters.html scrolls at 640px vs * 390px clientWidth, 250px over — the worst offender, and not on the original * findings list at all). Different cause from the grid items above: this is a * plain markdown table (six columns, e.g. "Personal quest thread") with no * scroll container — only .npc-table gets one, via a real wrapper div * (css/style.css:1265-1269, .npc-table-wrap) — and th cells force * white-space: nowrap (css/style.css:780), so the header row alone can't shrink * below its content width. No markup wrapper is reachable from a stylesheet, so * the table element itself becomes its own block-level scroll container; * .npc-table is excluded because it already has a real wrapper and this would * duplicate it (and defeat its sticky header, css/style.css:1286-1288, which * needs a normal table display to work). */ @media (max-width: 767px) { .content table:not(.npc-table) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* Relationship graph (from handoff section 7) */ /* * UI-09/UI-AC-05 (component half). label size and hop-2 opacity are SVG * presentation attributes set inline by renderRelationshipSVG * (lib/relationship-graph.js:161 opacity, :187 font-size) — presentation * attributes carry the lowest possible priority, so a plain class-less * stylesheet rule beats them with no !important needed (the !important * red line only applies to real style="" attributes, and SVG presentation * attributes are not that). Baseline findings measured hop-2 labels at 9px * with 0.5 opacity; raising both lifts them to the same legibility as hop-1 * labels (11px, full opacity) without touching hop-0/1, which were already * fine. The 22-node crowding on pages like an NPC page's graph (all nodes * packed into one ring) is a layout problem in renderRelationshipSVG's radial * placement, not something any CSS rule can fix without JS-driven collision * detection or a rewritten layout algorithm — left as-is and flagged (see * Engineer report); UI-09's node-count reduction stays an upstream draft. */ .relationship-graph svg text { font-size: 11px; } .relationship-graph svg g[opacity] { opacity: 1; } /* * UI-AC-04: .relationship-graph already has its own horizontal scroll * container (css/style.css:1737-1741, overflow-x: auto) so the graph never * contributes to page-level overflow at 390px; nothing to add here for * UI-AC-04, noted so a reviewer doesn't go looking for a missing fix. */ /* Tap targets (from handoff section 8) */ /* * UI-27/UI-AC-08 (baseline-adjacent finding, ui-findings.md UI-27, sizes not a * contrast figure so carried forward as-is): the three .recap-link instances * ("Read full session", "View all N NPCs", "Full timeline" — * lib/templates/landing.js:94,169,217) measured 105x23 / 104x22 / 85x22, * under both the finding's 24px-tall minimum and the 44px tap-target * guidance. inline-flex + min-height gives each a real 44px tap box without * moving the visible text or its margins. */ .recap-link { display: inline-flex; align-items: center; min-height: 44px; } /* * UI-27: the mobile-nav close button (css/style.css:201-210) sets no * width/height, so its tap target is just the "×" glyph's own box — measured * 19x37 in the baseline, short on both axes. Centring the glyph inside an * explicit 44x44 box fixes the target without moving its visible position * (top/right offsets are untouched). */ .mobile-nav-close { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; } /* * UI-10/UI-AC-10 (trap 3, risk-7). .nav-search-btn is display: none below the * 768px breakpoint (css/style.css:170, only reversed at :249's * @media (min-width: 768px)), so there is no phone search affordance at all. * window.openSearch (js/search.js:130-136) is already viewport-agnostic, so * showing the button is enough to make it work. The remaining problem is that * .nav-search-btn and .nav-mobile-toggle both carry margin-left: auto * (css/style.css:168, :185); un-hiding the first without touching the second * means both compete for the same auto-margin gap and the toggle gets shoved. * Giving the toggle a fixed left margin once the search button is visible lets * the pair sit together at the header's right edge instead of fighting over * it. The keyboard-shortcut hint is dropped on phone (no keyboard, no point * spending the width). .mobile-nav-search (css/style.css:241-243) is dead CSS * -- lib/templates/nav.js never emits an element with that class -- and is * left alone. * * R1b follow-up. The pin now also emits its own .nav-search-icon-btn magnifier * (lib/templates/nav.js:126-129), always rendered, always shown below 768px by * the pin's own CSS (css/style.css:301). Once that button exists, the * unconditional un-hide above gives phones two search buttons at once instead * of one. The selector is scoped to fire only when the header has no icon * button, so exactly one control shows at every width: our text button when * the icon is missing, the pin's icon button whenever it is present. If a * future pin drops the icon button again, this rule's :not(:has(...)) clause * goes back to matching and phone search keeps working with no further * change. Rejected: deleting the rule outright (phones lose search again the * moment a future pin drops the icon); a second rule that re-hides the text * button (two rules fighting over the same display property); a sibling- * combinator form anchored on the text button itself, testing for a * next-sibling icon button, instead of the header-level scope used here * (the color-mode toggle can sit between the two buttons, so a sibling * combinator can't always reach the icon from the text button). */ @media (max-width: 767px) { .top-nav:not(:has(.nav-search-icon-btn)) .nav-search-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; } .nav-search-btn .search-kbd { display: none; } .nav-mobile-toggle { margin-left: 0.5rem; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; } } /* Inline-style overrides (from handoff section 9; !important, with the reason) */ /* * UI-AC-05: the Latest Session date span carries a real style="" attribute * (opacity:0.7;font-size:0.85rem — lib/templates/landing.js:92), which beats * any non-!important stylesheet rule regardless of selector specificity. * Measured 4.18:1 in the scratch build (still failing 4.5:1) even after * Chunk B's --text-muted correction, because the inline opacity is applied on * top of that already-corrected colour. Overriding just the opacity (leaving * colour and font-size alone) is enough to clear AA. */ .dashboard-section h2 span[style] { opacity: 1 !important; } /* * UI-AC-05: search result subtitles carry a runtime-injected style="" * attribute (opacity:0.6 — js/search.js:114), same reasoning as above. Scoped * to .search-result-item so it can't reach into an unrelated span[style] * elsewhere on the page. */ .search-result-item span[style] { opacity: 1 !important; } /* ========================================================================== * Desktop redesign (E2). Appends only; nothing above this line is touched. * Lead requirements: docs/agent-runs/track-redesign-lead-requirements-2026-09-20.md. * Engineering brief: docs/agent-runs/redesign-engineering-brief-2026-09-20.md. * * Strategy per that brief: the pin's own CSS is mobile-first (base rules * single-column, desktop added at min-width:768/1024 in style.css itself), so * this file stays additive too — new min-width:1024/1280/1440 rules that * widen and rescale, never a rewrite of the base rules. A narrow viewport is * therefore untouched by construction: nothing here fires below 1024px * except the :root token declarations themselves, which are inert until a * gated rule below reads them. * * SD-8: this section owns no colour value either. Every rule below consumes * only var(--sc-*) (this file's own tokens, declared once and never * redeclared with a literal) or the existing var(--bg|--text|--accent|...) * tokens theme.css emits. * ========================================================================== */ /* ---- Tokens: shell width, spacing scale, type scale (FR-07) ---- */ /* * FR-07/AC-06: every length this section and the four that follow introduce * is one of these three token families (--sc-shell, --sc-step-0..4, * --sc-space-1..8, exactly SD-8's own list), or a bare 0, a percentage, or a * @media breakpoint (custom properties are not valid inside a media-query * condition, so 1024/1280/1440 can only ever be literals). A Reviewer * grepping the file for any other raw length should find none. */ :root { /* Content shell (AC-01). 75rem = 1200px, comfortably inside the "roughly 1100-1200px at 1440" target and clear of AC-01's 1120px floor even after .content's own padding, since padding lives inside this box (global box-sizing: border-box, style.css:6-10). Only consumed at >=1024 below; .content's pin-authored 52rem cap (style.css:271) still governs <1024. */ --sc-shell: 75rem; /* Spacing scale, 8 steps. Every margin/padding/gap/radius this section and the three after it introduce is one of these, so the redesign reads as one rhythm rather than ad-hoc rem values. */ --sc-space-1: 0.25rem; --sc-space-2: 0.5rem; --sc-space-3: 0.75rem; --sc-space-4: 1rem; --sc-space-5: 1.5rem; --sc-space-6: 2rem; --sc-space-7: 3rem; --sc-space-8: 4rem; /* * Type scale, 5 steps (AC-05). Today's is 16/17.6/20.8/28/40 (body/h3/h2/ * .page-title/.landing-hero h1 at >=768), ratios 1.10/1.18/1.35/1.43 — the * bottom two ratios are under AC-05's 1.2 floor, which is the measurable * half of "looks like mobile". This scale is 17/21/26/33/42, ratios * 1.235/1.238/1.269/1.273: every adjacent ratio clears 1.2, and body * clears AC-05's 17px floor. Declared unconditionally (inert until the * >=1024 rules below apply it) so it stays a single source of truth rather * than being repeated inside each gated selector. */ --sc-step-0: 1.0625rem; /* 17px — body */ --sc-step-1: 1.3125rem; /* 21px — h3 */ --sc-step-2: 1.625rem; /* 26px — h2 */ --sc-step-3: 2.0625rem; /* 33px — .page-title */ --sc-step-4: 2.625rem; /* 42px — .landing-hero h1 */ } /* * AC-05. Each selector here matches its style.css counterpart at equal * specificity (css/style.css: body untyped at :39, h3 element at :352, * .story-prose h3 at :692, h2 element at :345, .page-title class at :336, * .landing-hero h1 at :1011 plus its own min-width:768 bump at :3701), so * this file's later source position is enough to win with no !important — * same technique as the focus/motion overrides above. Gated to >=1024 only: * below that, style.css's own rules (including its own 768px bump on * .landing-hero h1) are untouched, which is what keeps mobile identical to * today. .dashboard-section h2 and .context-sidebar h3 are both more * specific than the plain h2/h3 here and so are deliberately left alone — * the former gets its own eyebrow treatment below (cluster 5), the latter is * a sidebar label, not prose, and stays out of the type scale. */ @media (min-width: 1024px) { body { font-size: var(--sc-step-0); } h3, .story-prose h3 { font-size: var(--sc-step-1); } h2 { font-size: var(--sc-step-2); } .page-title { font-size: var(--sc-step-3); } .landing-hero h1 { font-size: var(--sc-step-4); } } /* ---- Shell width, nav alignment, prose measure (FR-01/02/04, AC-01/AC-04) ---- */ @media (min-width: 1024px) { /* * FR-01/AC-01: css/style.css:270-274 caps main.content at 52rem (832px) at * every viewport — the pin's own CSS never widens it (no desktop bump of * its own). `main.content` (element+class, specificity 0,1,1) beats the * pin's bare `.content` (0,1,0) regardless of source order, which is also * what keeps this scoped off the notice footer's `
` (src/build/notice.js:85) — that div is never * inside a `
`, so `main.content` cannot match it (SD-9's risk 2). * This only ever widens the shell; it never releases it edge-to-edge (no * 100vw here) — that trap belongs to cluster 4, scoped to .landing-hero * alone, per SD-9. */ main.content { max-width: var(--sc-shell); } /* * FR-04: .top-nav (css/style.css:71-81) is a full-bleed flex bar with its * own fixed padding: 0 1rem, regardless of viewport, so at the new shell * width its brand/links would sit flush to the browser edge while the * page content below sits inset by the shell's own auto margins. The * max() keeps today's 1rem gutter at any width up to the shell (nothing * changes there — "every breakpoint" per FR-04 means every breakpoint the * shell itself is active at, since below 1024 .content and .top-nav * already agree on the same 1rem gutter with nothing to align) and * centers the nav's contents against the shell once the viewport exceeds * it, matching main.content's own edges exactly. */ .top-nav { padding-inline: max(var(--sc-space-4), calc((100% - var(--sc-shell)) / 2)); } /* * FR-02/AC-04: widening main.content above also widens every bare * paragraph inside it, which is wrong on prose pages. Three of the * `campaign/` pages (track-redesign-lead-requirements-2026-09-20.md's * page-type 6) render bare prose with no wrapper div at all — * lib/templates/wiki.js's contentHtml is just mainContent, un-wrapped, * whenever a page has no backlinks/relationships to populate a sidebar * (verified in the scratch build: campaign/timeline.html, * campaign/campaign-overview.html and campaign/player-characters.html all * render `

` as a direct child of `main.content`, no wrapper). The fix * constrains the prose children themselves, not the shell they sit in, so * the shell widen above stays available to what DOES want the width (the * four grids, cluster 3's entity two-column layout) while a paragraph * still reads at a sane measure. `.content-with-sidebar > .main > p` and * siblings reach the equivalent position one level down on entity/recap * pages, where the same bare-paragraph shape recurs inside the article * column (confirmed on sessions/recap-01-the-road.html and * an NPC page). calc(var(--sc-space-8) * 12) is * 48rem/768px, under AC-04's 780px ceiling; composed from the spacing * scale rather than a new literal, per this file's own AC-06 rule — see * the token block's header comment for why --sc-shell is the one * additional named token beyond --sc-space-* and --sc-step-*, and why * that is SD-8's own list, not a gap in it. */ main.content > p, main.content > ul, main.content > ol, main.content > blockquote, .content-with-sidebar > .main > p, .content-with-sidebar > .main > ul, .content-with-sidebar > .main > ol, .content-with-sidebar > .main > blockquote { max-width: calc(var(--sc-space-8) * 12); } } /* ---- Entity two-column layout, double-padding removal (FR-03, AC-02) ---- */ @media (min-width: 1024px) { /* * FR-03: css/style.css:277-296 already gives `.content-with-sidebar` its * own `grid-template-columns: 1fr 18rem` at min-width:1024, unconditional * on the parent's width — verified live in the scratch build, AC-02 * already passes before this rule (two tracks, second 288px, on * an NPC page). What is actually broken is * spacing, not layout: `.content-with-sidebar` (style.css:279-284) and its * parent `main.content` (style.css:270-274) both carry an identical * `padding: 1.5rem 1rem 3rem`, so the article column loses 1rem of * horizontal space twice over — once from main.content's own gutter, * again from content-with-sidebar's own. `main.content > .content-with- * sidebar` (compound + child combinator, specificity 0,2,1) beats * style.css's bare `.content-with-sidebar` (0,1,0) at any source order, so * this stays correct however the two stylesheets end up ordered. Only the * horizontal padding is removed — main.content's own left/right gutter is * now the sole source of that inset — the vertical 1.5rem/3rem rhythm * (breadcrumb-to-content, and the page's own bottom margin) is * deliberately left alone; FR-03 only calls out "double horizontal * padding". 0 is exempt from this file's own AC-06 token rule (see the * header comment on the tokens block above). */ main.content > .content-with-sidebar { padding-inline: 0; } } /* ---- Full-bleed hero (FR-05, AC-07; SD-9) ---- */ @media (min-width: 1024px) { /* * SD-9, verified: .landing-hero and every .dashboard-section are direct * children of main.content (lib/templates/landing.js:270-271 builds * [heroZone, ...sections] into baseShell's content; base.js:69-72 puts * that content straight inside

). The only * sanctioned way to make the hero full-bleed without a viewport unit is to * release the shell on this one page and re-impose it on the siblings * that still want it — exactly SD-9's own two rules, unchanged. :has() * scopes the release to landing.html alone (the only page with a * .landing-hero child; already an established technique in this codebase, * css/style.css:2767 uses `.content:has(.coc-sheet-root)` the same way) — * no JS, no per-template flag, no markup change. Zero 100vw, zero * negative margins, so there is nothing here for a scrollbar to interact * with (AC-07's trap) — confirmed by measurement below, not by construction * alone. `overflow-x: clip|hidden` on html/body, the other way to fake * this, is not used anywhere in this file (SD-9 forbids it outright: it * would make AC-07 pass by clamping scrollWidth, proving nothing, and it * risks .top-nav's `position: sticky`, css/style.css:71-81). */ main.content:has(> .landing-hero) { max-width: none; padding-inline: 0; } main.content:has(> .landing-hero) > .dashboard-section { max-width: var(--sc-shell); margin-inline: auto; } /* * FR-05. .landing-hero (css/style.css:995-1003) is now as wide as * main.content itself (edge to edge, per the release above), so its own * padding becomes the text gutter — the same max() technique as .top-nav * above, so the hero's text lines up with the nav and the sections below * it — and its border-radius is dropped: a rounded rect touching both * viewport edges reads as a bug, not a corner. display:flex + justify- * content:center vertically centers the still-static h1/.hero-tagline/ * .hero-dates inside that height; text-align:center is unchanged from the * base rule. * * A fixed `height`, not `min-height`, deliberately: the image rule below * needs .landing-hero-img's own height:100% to resolve against a definite * ancestor height (a percentage height only resolves against an ancestor * whose own height is explicitly specified, not content-derived — see * that rule's comment for the two failed attempts this ruled out). * Residual gap, written down rather than left for a Reviewer to find by * testing: this vault's hero text (title + one-line tagline + one stat * row) fits inside 448px with room spare, but overflow:hidden means a * vault with a much longer tagline could see it clipped rather than * growing the hero. Out of scope for this vault's own build (FR-05 is * scoped to what this campaign's content needs); flagged for whoever next * touches this rule for a vault with materially longer hero copy. * * z-index:0, added alongside position:relative from the base rule, is * what actually makes .landing-hero a stacking context (CSS2.1: * position:relative with z-index:auto, the base rule's own combination, * does NOT establish one). Without it, a negative z-index on a * descendant escapes past .landing-hero into whatever ancestor context * does exist and paints behind .landing-hero's own background instead of * merely behind its text — measured directly (the image was fully * invisible with z-index:-1, and reappeared under manual z-index:0), and * the reason the two rules below use 0/1 rather than -1/auto. */ .landing-hero { padding-inline: max(var(--sc-space-4), calc((100% - var(--sc-shell)) / 2)); padding-block: var(--sc-space-8); border-radius: 0; height: var(--sc-hero-h, calc(var(--sc-space-8) * 7)); display: flex; flex-direction: column; justify-content: center; z-index: 0; } /* * FR-05 (stacking). .landing-hero's own children (h1, .hero-tagline, * .hero-dates) are flex items now that .landing-hero is display:flex — * the Flexbox spec has flex items "painted like inline-blocks" (CSS2.1 * Appendix E, tier 6), a DIFFERENT paint tier from ordinary in-flow * static content (tier 3), which sits BEFORE the stacking-context root's * own negative-z-index descendants, not after. A negative z-index on * .landing-hero-img therefore paints it behind .landing-hero's own solid * background, not merely behind the (now not-actually-tier-3) text — the * image was fully invisible under a flat --bg-hero fill until this was * caught by forcing z-index in devtools and watching the image reappear. * Explicit z-index:1 here (flex items honour z-index even at the default * position:static, another Flexbox-spec carve-out — no position:relative * needed) settles it unambiguously against the image/scrim's z-index:0 * below, both now ordinary tier-6 comparisons rather than tier assumptions. */ .landing-hero h1, .landing-hero .hero-tagline, .landing-hero .hero-dates { z-index: 1; } /* * FR-05. .landing-hero-img (css/style.css:1004-1010) is a small centred * logo-sized image today (max-width:100%; width:32rem; height:auto). * Absolute + cover turns it into the hero's own background art, filling * .landing-hero (position:relative, unchanged from the base rule) edge to * edge. width/height:100% need .landing-hero's own height to be * explicit, which is exactly why the rule above uses `height`, not * `min-height`. * * `.landing-hero .landing-hero-img` (two classes, specificity 0,2,0), not * the bare class alone: css/style.css:544 has a second, easy-to-miss rule, * `.content img { height: auto; ... }` (a class + type selector, 0,1,1), * which sits ABOVE a bare `.landing-hero-img` (0,1,0) regardless of source * order — every img inside main.content matches it, this one included. * With that rule still winning, `height:100%` never actually applied and * the replaced element's used height fell back to its own intrinsic * ratio (measured 1440x901.4px against a 1440x448 box — 901.4 is exactly * 1440 at the source image's 2048:1282 ratio), silently clipped to * nothing visible by .landing-hero's own overflow:hidden. Caught with * getComputedStyle + a manual walk of every matching stylesheet rule * (document.styleSheets), not by eye; recorded here so nobody re-adds a * bare `.landing-hero-img` height override and reintroduces it. * z-index:0, kept behind h1/.hero-tagline/.hero-dates' explicit z-index:1 * above rather than a negative value — see that rule's own comment for * why a negative z-index paints behind .landing-hero's own background * here, not merely behind the text (this file's second stacking-order * surprise on the same element). * .landing-hero-img will also carry a campaign-owned mask-image once E3 * folds the campaign stylesheet in (the campaign's own css/overrides.css, docs/decisions/0023-haze-theme.md; * SD-7 section 6, kept campaign-side deliberately — it's * keyed to this vault's specific art asset), which stacks on top of this * cover layout unchanged; E2's own scratch build deliberately still runs * the 11-line overrides.css scaffold (no mask present yet), so that * interaction is E3/E4's to confirm, not asserted here as already * checked — see the Engineer report. */ .landing-hero .landing-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; margin-bottom: 0; z-index: 0; } /* * FR-05 (scrim). A hero photo behind the tagline text needs a legibility * gradient; color-mix() over a generator token keeps this inside SD-8's * colour allowance (no new literal, no named colour, no asset reference). * Issue #47: this used to mix toward --bg (the page's general background), * tuned for the assumption that a dark --bg always pairs with light hero * text. That assumption breaks whenever a vault's `primary` colour (which * is what actually drives --bg-hero, and what the pin's own --text-on-header * contrast choice is computed from -- lib/theme.js's headerIsLight) diverges * from `background`'s own scheme, which a light-palette vault can do freely * (e.g. a light parchment --bg with a dark navy --bg-hero). Mixing toward * --bg-hero instead tracks the token the text colour actually contrasts * against, so the scrim's polarity follows the hero/header scheme rather * than the page scheme -- correct in both directions, not just the one * vault this was written against. Same z-index as the image above — paint * order among ties follows generation order, so this ::after (generated * after the real .landing-hero-img child) layers on top of the image, * while both stay behind the text's explicit z-index:1. */ .landing-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to top, color-mix(in srgb, var(--bg-hero) 80%, transparent) 0%, color-mix(in srgb, var(--bg-hero) 15%, transparent) 55%, transparent 100% ); z-index: 0; } } /* ---- Card treatment, eyebrow headings (FR-06/08, AC-03) ---- */ @media (min-width: 1024px) { /* * FR-06. .entity-card (css/style.css:854-864), .pc-card (:891-903), * .npc-card (:940-954), .explore-card (:1140-1153), .loc-card (:2123- * 2127) and .intel-card (:2480-2487) already share background:var(--bg- * card); border:1px solid var(--border); border-radius:0.5rem — the * "surface a shade lighter than the page, hairline border" half of FR-06 * already holds, since --bg-card is deliberately lighter than --bg in * every theme.js palette. What's inconsistent: .loc-card and .intel-card * carry no hover state at all, and among the four that do, only * .entity-card gets a lift (a hardcoded box-shadow:...rgba(0,0,0,0.2), * which this file can't reuse verbatim under SD-8's colour allowance). * One rule per property, matching class selector for class selector so * each card keeps its own internal layout (flex/grid/block, untouched) * — a slightly more generous radius and the same hover everywhere: * border to --accent, plus a soft accent-tinted lift via color-mix() * rather than a bare rgba(). */ .entity-card, .pc-card, .npc-card, .explore-card, .loc-card, .intel-card { border-radius: var(--sc-space-3); } .entity-card:hover, .pc-card:hover, .npc-card:hover, .explore-card:hover, .loc-card:hover, .intel-card:hover { border-color: var(--accent); box-shadow: 0 var(--sc-space-1) var(--sc-space-3) color-mix(in srgb, var(--accent) 25%, transparent); } /* * FR-08. .dashboard-section h2 (css/style.css:1043-1049) is the * "accent-underlined h2" FR-08 names directly — uppercase and letter- * spaced already, just carrying a 2px border-bottom under the full-width * text. Distinct per-section eyebrow *copy* ("OUR STORY" vs "THE * ROSTER") is out of reach from a stylesheet (track-redesign-lead- * requirements-2026-09-20.md's "Not reachable in CSS" list says so * directly — every section is an identical div.dashboard-section with no * per-section hook besides :has(), and inventing text via ::before{ * content:"Section"} would be both wrong (identical string on every * match) and inaccessible (generated content is not reliably exposed to * assistive tech the way real text is). What IS reachable: replace the * underline with a short decorative rule ABOVE the heading * (content:"" only, no copy — exactly FR-08's own instruction) and let * the real heading text — the only text this component actually has — * read as the "large heading" the eyebrow sits over, at the type scale's * step-1 instead of the pin's own 1.15rem. Same selector, same * specificity as the base rule (0,1,1), later source wins with no * !important. */ .dashboard-section h2 { font-size: var(--sc-step-1); border-bottom: 0; padding-bottom: 0; margin-bottom: var(--sc-space-4); } .dashboard-section h2::before { content: ""; display: block; width: var(--sc-space-6); height: calc(var(--sc-space-1) / 2); background: var(--accent); margin-bottom: var(--sc-space-2); } } /* ========================================================================== * Visual treatment: Vellum (material and texture). Chosen 2026-09-20 — * "Vellum is the nicest" — over Plate and Strata. Design exploration: * a private design-exploration folder (not in this repo), containing * vellum.css, OPTIONS.md. SD-7's split governs which of its rules landed * here versus the campaign layer (a campaign's css/overrides.css, and since docs/decisions/0023-haze-theme.md the built-in haze theme): everything * below holds for any vault (material given to the pin's own generic card/ * heading/hero classes, coloured only via var()/color-mix() over the * generator's own tokens per SD-8). The exploration file's own three-rule * "CAMPAIGN LAYER" grouping is narrower than what actually depends on this * vault: its pull-quote brass mark is a raw hex literal (#c9a55a, SD-8 * forbids that here) and its hero-image deckle extends a mask already keyed * to this vault's specific art defect (campaign-side, in the campaign's own css/overrides.css); the brass mark now lives in the built-in haze theme (assets/themes/haze/theme.css). * The third rule it grouped there, the hero-banner "sheet" * lip, uses only var()/color-mix() over generic pin classes (.hero-banner, * .hero-banner-no-img — lib/templates/base.js's own template classes, not a * selector naming this vault) and so passes SD-7's own test; it is moved * here instead. Own tokens namespaced --sc-* per SD-8, joining the redesign * section's --sc-shell, --sc-space-N and --sc-step-N tokens (no collision). * ========================================================================== */ :root { /* One grain tile, reused by every textured surface so the browser decodes it once. Inline SVG data URI, no external request, no palette. */ --sc-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); /* Material tokens: a top highlight and a floor shadow, both derived from the theme's own text/bg tokens so they track any palette. #000 here is an alpha-ramp seed for color-mix(), the same construction the NPC-table fix below uses — never a standalone colour value. */ --sc-lip: color-mix(in srgb, var(--text) 9%, transparent); --sc-floor: color-mix(in srgb, #000 45%, transparent); } /* ---- 1. Paper tooth over the whole page ---------------------------------- * A fixed grain layer at 3.5% behind all content. High enough to kill the * dead-flat fill, low enough that it never reads as noise on top of 17px * body text. */ body::before { content: ""; position: fixed; inset: 0; background-image: var(--sc-grain); opacity: 0.028; pointer-events: none; z-index: 0; } /* The page ground stops being one flat value: a long, very shallow vertical * wash so the top of the page is fractionally lighter than the bottom. */ body { background-image: linear-gradient( to bottom, color-mix(in srgb, var(--bg-card) 40%, transparent) 0%, transparent 720px ); background-repeat: no-repeat; } /* ---- 2. Cards become sheets, not rectangles ------------------------------ * A gradient (lit from above), an inset 1px lip on the top edge, and a floor * shadow together read as a raised sheet rather than a flat rectangle. */ .entity-card, .pc-card, .npc-card, .explore-card, .loc-card, .intel-card, .rel-card, .npc-location-card, .recap { background-image: var(--sc-grain), linear-gradient( to bottom, color-mix(in srgb, var(--text) 4%, transparent) 0%, transparent 40%, color-mix(in srgb, #000 12%, transparent) 100% ); background-blend-mode: overlay, normal; background-size: 180px 180px, auto; box-shadow: inset 0 1px 0 var(--sc-lip), 0 1px 2px var(--sc-floor), 0 6px 16px color-mix(in srgb, #000 28%, transparent); } /* Issue #36: the lift had no transition (an instant 2px jump reads as a glitch), and * :hover sticks after a tap on touch, so the lift is gated to devices that can actually * hover. transition lives on the un-hovered selector list so it applies leaving as well as * entering. The reduced-motion suppression below matches this same :hover selector list at * equal (0,2,0) specificity and wins on source order (no !important), the technique already * documented at this file's :focus-visible/.name-filter rule above. */ @media (hover: hover) { .entity-card, .pc-card, .npc-card, .explore-card, .loc-card, .intel-card { transition: transform 160ms cubic-bezier(0.2, 0, 0, 1), box-shadow 160ms cubic-bezier(0.2, 0, 0, 1); } .entity-card:hover, .pc-card:hover, .npc-card:hover, .explore-card:hover, .loc-card:hover, .intel-card:hover { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent) 35%, transparent), 0 2px 4px var(--sc-floor), 0 12px 28px color-mix(in srgb, #000 38%, transparent); transform: translateY(-2px); } } @media (prefers-reduced-motion: reduce) { .entity-card:hover, .pc-card:hover, .npc-card:hover, .explore-card:hover, .loc-card:hover, .intel-card:hover { transform: none; transition: none; } } /* Entity hero banners get the same lip as the cards, so an image-backed * banner (.hero-banner) and a gradient-backed one (.hero-banner-no-img) read * as the same material. Both are the pin's own generic template classes * (lib/templates/base.js), not this vault's — see this section's header * comment for why this rule moved out of the exploration's "campaign" group. */ .hero-banner, .hero-banner-no-img { box-shadow: inset 0 1px 0 var(--sc-lip), 0 6px 16px color-mix(in srgb, #000 30%, transparent); } /* ---- 3. Ornamental rules instead of template underlines ------------------ * The pin's h2 carries a full-width 2px accent border, which is the single * most "generated by a tool" mark on an entity page. Replace it with a * hairline that fades out, plus a short solid accent lead-in. */ @media (min-width: 1024px) { .content-with-sidebar h2, main.content > h2:not(.dashboard-section h2) { border-bottom: 0; padding-bottom: var(--sc-space-2); position: relative; } .content-with-sidebar h2::after, main.content > h2:not(.dashboard-section h2)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient( to right, var(--accent) 0, var(--accent) var(--sc-space-8), color-mix(in srgb, var(--border) 90%, transparent) var(--sc-space-8), transparent 100% ); } /* The landing's eyebrow dash becomes a lozenge and a hairline that runs the full section width — the ornament a printed gazetteer would use. Shares .dashboard-section h2 with the redesign's own eyebrow rule above; the two compose (this rule's flex/::after are new properties, its ::before geometry wins over the redesign's on the properties they share, since this rule loads later — verified in the scratch build, see Engineer report). */ .dashboard-section h2 { display: flex; align-items: center; gap: var(--sc-space-4); } .dashboard-section h2::before { width: var(--sc-space-2); height: var(--sc-space-2); margin-bottom: 0; background: var(--accent); transform: rotate(45deg); flex: none; } .dashboard-section h2::after { content: ""; flex: 1; height: 1px; background: linear-gradient(to right, var(--border), transparent); } } /* ---- 4. Drop cap --------------------------------------------------------- * One per entity page, on the first body paragraph of the main column only — * never on a recap, a list or a sidebar, where it would be decoration for its * own sake. Sized in the heading face so it reads as a printed initial. */ @media (min-width: 1024px) { .content-with-sidebar > .main > p:first-of-type::first-letter { float: left; font-family: var(--font-heading); font-size: 3.4em; line-height: 0.82; padding-right: var(--sc-space-3); padding-top: var(--sc-space-1); color: var(--accent); } } /* ---- 5. Hero: vignette instead of a flat scrim --------------------------- * Also the fix for a real baseline defect: at 1440 the hero h1 measures * 1.79:1 against the painting behind it because the pin's scrim is a * bottom-up gradient and the title sits at the top of it. An inset vignette * darkens the corners and a centred radial pool sits behind the text block. * Both are pure alpha ramps, over --bg-hero (issue #47 -- see the ::after * scrim's own comment just above for why --bg-hero and not --bg). */ @media (min-width: 1024px) { /* z-index 1, not 0: .landing-hero-img is an absolutely positioned element at z-index 0 and paints AFTER a ::before at the same level, so a ::before vignette at z-index 0 is invisible. The redesign section's ::after scrim (FR-05, above) keeps z-index 0 and composes underneath this. */ .landing-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient( ellipse 52% 62% at 50% 47%, color-mix(in srgb, var(--bg-hero) 96%, transparent) 0%, color-mix(in srgb, var(--bg-hero) 86%, transparent) 52%, transparent 88% ), radial-gradient( ellipse 95% 92% at 50% 50%, transparent 34%, color-mix(in srgb, #000 62%, transparent) 100% ); } .landing-hero h1, .landing-hero .hero-tagline, .landing-hero .hero-dates { position: relative; z-index: 2; } } /* ---- 6. The recap panel becomes a bound page ----------------------------- */ .recap { border-left: calc(var(--sc-space-1) / 2) solid var(--accent); border-radius: 0 var(--sc-space-3) var(--sc-space-3) 0; padding: var(--sc-space-6) var(--sc-space-7); } /* ========================================================================== * NPC table surface. css/style.css:1270 gives .npc-table no background at * all — only the sticky row is filled — so on the NPC index 22 rows of * body text sit straight on the page ground with nothing between them. Fine * while the ground was one flat fill; the first thing to break once it * isn't (the campaign layer's Atlas ground, folded in alongside this). A * generator defect, fixed with tokens only, so it holds for any vault and * any ground treatment a vault might add later — product layer per SD-7. * Every ground treatment explored alongside Atlas carried this same rule * (design exploration: .../ground/ground.css:50-64). * ========================================================================== */ .npc-table-wrap { background-color: color-mix(in srgb, #000 18%, var(--bg)); border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); border-radius: var(--sc-space-2); } /* ========================================================================== * SVG portraits in .char-header. css/style.css:533 styles .char-header * .portrait with aspect-ratio:16/9, object-fit:cover, object-position:center * top -- correct for the raster character photos it was written for, wrong * for a square vector portrait. Found on a real campaign vault's faction sigils (13 * SVGs, the vault's first SVG portraits): every one rendered cropped, ~44% * of the image lost off the bottom (measured: a 320x180 box against 1:1 * content). A vault-agnostic pin defect -- any vault that gives an entity an * SVG portrait hits it, not just this one's factions -- so per SD-7 this is * product layer, not campaign. .char-header .portrait is shared by the * faction/creature/event/heritage/item templates (lib/templates/ *.js), so * the fix reaches all of them, not just factions. * portraitImg() (lib/templates/base.js:186) emits a bare , * no marker distinguishing raster from vector, and that file is * the pinned/vendored generator (never edited directly per CLAUDE.md), so * matching the file extension on src is the only hook available. * aspect-ratio:1/1 matches the sigils' actual square content; object-fit: * contain (not cover) tolerates a sigil that isn't exactly square without * cropping it either way. max-width caps the box near the old raster box's * own rendered height (20rem wide * 9/16 = 11.25rem tall), so a page mixing * SVG and raster portraits doesn't grow a visibly taller header just because * its portrait is vector: --sc-space-8 (4rem) * 2.75 = 11rem, verified in a * live scratch build (factions/house-fen.html) to show the full sigil with * nothing clipped, box measured square by getBoundingClientRect(). * The hero-cinematic (PC/NPC) and hero-banner (locations) portrait paths * carry the same raster-shaped assumption but have no SVG portrait anywhere * in this vault today, so they are unaffected and left alone here -- a * future SVG portrait in one of those templates would need its own rule. * * STATUS 2026-09-21: dead selector in this vault. A real campaign vault's thirteen * faction SVGs were replaced with painted .webp renders (vault commit * e895484), and nothing else here has ever used an SVG portrait, so this * rule currently matches zero elements. Kept, not deleted: the defect it * fixes is in the pinned generator (css/style.css:533), not this vault's * content, so it holds for any vault -- this one or a future one -- that * gives any char-header entity an SVG portrait again. A dead selector costs * nothing at runtime; deleting it would silently drop that protection. The * new painted portraits are raster, not vector, so they need their own hook * -- see the campaign's own css/overrides.css: * campaign layer, because the hook available (image path) is * this vault's folder mapping, not a generator-level distinction. * ========================================================================== */ .char-header .portrait[src$=".svg" i] { aspect-ratio: 1 / 1; width: auto; max-width: calc(var(--sc-space-8) * 2.75); object-fit: contain; } /* Character headers: headline placement ========================================================================== SD-7 (product layer, append-only): only pc.js:252-262 and npc.js:32-38 emit .hero-cinematic (PC and NPC, with art), pc.js:265-273 emits .hero-cinematic.hero-cinematic-no-img (PC, no art), and npc.js:41-45 emits .hero-banner.hero-banner-no-img with a direct .pc-portrait child (NPC, no art). No vault path is involved, so this belongs here, not in overrides.css. That file is unchanged. Drops the card (background, border, radius, padding, box-shadow) pin's css/style.css gives these headers and replaces it with a centred column: portrait on top, then the centred name, then the centred meta line -- the same faction headline treatment as the campaign's own css/overrides.css (commit 0b81e54), reapplied to the character templates. Specificity, against the pin rules this beats: .hero-cinematic (0,1,0) ties style.css:428, wins on source order (scriptorium.css loads after style.css on every entity page) .hero-banner-no-img:has(> .pc-portrait) (0,2,0) beats style.css:358 and :412 .hero-cinematic h1, .hero-banner-no-img:has(> .pc-portrait) > h1 (0,1,1)/(0,2,1) beats/ties style.css:394 and :448 .hero-cinematic .meta, .hero-banner-no-img:has(> .pc-portrait) > .meta (0,2,0)/(0,2,1) ties/beats style.css:399 and :451 600px breakpoint: the pin's @media (max-width: 600px) block (style.css:470-474) sets .hero-cinematic's flex-direction/text-align, .hero-cinematic-img's width/height, and .hero-cinematic-overlay .meta's justify-content. The unconditional rules below already set every one of those properties to the target value, so that block has nothing left to change -- the image rule in particular carries two classes, (0,2,0) against the pin's (0,1,0) media rule, so it wins on specificity and does not depend on stylesheet order. No mirror @media (max-width: 600px) block is added here: it would be redundant, and it would couple this section to the pin's breakpoint value. Vellum lip: the lip box-shadow at scriptorium.css:845-848 is ".hero-banner,\n.hero-banner-no-img" at (0,1,0) per selector. The :has(> .pc-portrait) rule below is (0,2,0) and sets box-shadow: none (with background/min-height/padding/border-radius), so it wins only where a .pc-portrait is a direct child -- i.e. NPC-without-art headers. Location-without-art headers never have that child (location.js:56-59), so they keep the lip, the gradient and the 12rem min-height untouched. Rejected: editing 845-848 to add :not(:has(.pc-portrait)). That rewrites an existing rule instead of appending, and puts the character scoping in two places instead of one. Letter badge: kept at its existing inline size (4rem NPC, 5rem PC, pc.js:265-273 / npc.js:41-45). The only way to override an inline style is !important, and the one precedent for that in this file (scriptorium.css:274-296) exists because no alternative was possible -- here nothing requires it, and reaching for !important would also force any future campaign override of the badge to use !important in turn. align-items: center on the container centres the badge regardless of its own margin. No .pc-portrait rule is added here, so the landing .pc-card .pc-portrait (landing.js:115-116) is never reached by this section. Will catch: a selector drifting to cover .char-header, .pc-card or .landing; the Vellum lip reappearing on the character path; a colour literal or !important sneaking into this section; the 600px pin block regaining control of the image size; the h1 falling off .page-title's step. Will not catch, deliberately: .hero-cinematic-no-img is unverified visually -- this vault has no PC without art, so nobody has ever loaded that markup in a browser against these rules. A future pin markup change (e.g. the image stopping being a direct child of .hero-cinematic) would silently drop the image sizing here; nothing in this file would notice. ========================================================================== */ .hero-cinematic { flex-direction: column; align-items: center; gap: 0; padding: 0; background: none; border: none; border-radius: 0; box-shadow: none; text-align: center; margin-bottom: var(--sc-space-7); } .hero-banner-no-img:has(> .pc-portrait) { align-items: center; min-height: 0; padding: 0; background: none; border-radius: 0; box-shadow: none; text-align: center; margin-bottom: var(--sc-space-7); } .hero-cinematic > .hero-cinematic-img { width: auto; height: calc(var(--sc-space-8) * 4.5); max-width: 100%; object-fit: contain; } .hero-cinematic > .hero-cinematic-overlay { flex: none; align-self: stretch; margin-top: var(--sc-space-4); } .hero-cinematic h1, .hero-banner-no-img:has(> .pc-portrait) > h1 { margin: 0 0 var(--sc-space-2); font-size: calc(var(--sc-space-4) * 1.75); text-align: center; } .hero-cinematic .meta, .hero-banner-no-img:has(> .pc-portrait) > .meta { justify-content: center; } @media (min-width: 1024px) { .hero-cinematic > .hero-cinematic-img { height: calc(var(--sc-space-8) * 6); } .hero-cinematic h1, .hero-banner-no-img:has(> .pc-portrait) > h1 { font-size: var(--sc-step-3); } } /* ====================================================================== * * Landing shell: full-bleed below 1024 * * Engineering Brief: "Into the Haze home + recap emphasis" (docs/agent-runs/ * hazehome-engineering-brief-2026-09-24.md). SD-2: the campaign owns the Haze look itself * (colours, fonts, image treatment, the hero, the nav overlay, the slip); this file only ever * carries the "landing shell release" and #38's transform, because scriptorium.css:9-16 limits * the product layer to fixes that hold for any vault. The existing "Full-bleed hero" section * above already releases main.content:has(> .landing-hero) at >=1024px (SD-9); this section is * the same release below that breakpoint, so the campaign's full-bleed hero and full-width * .dashboard-section (SD-4/SD-8) are not fighting main.content's default 52rem shell and 1rem * padding-inline on any vault that opts into a full-bleed landing look, campaign-owned or not. * ====================================================================== */ main.content:has(> .landing-hero) { max-width: none; padding-inline: 0; padding-top: 0; } @media (max-width: 1023px) { main.content:has(> .landing-hero) > .dashboard-section { padding-inline: var(--sc-space-4); } main.content:has(> .landing-hero) > .landing-hero { border-radius: 0; } } /* ====================================================================== * * Book leaves (Track B) * * Engineering Brief: "Book leaves + motion" (docs/agent-runs/bookleaves-engineering-brief-2026-09-24.md), * plus AMENDMENT 1. Ports the owner's picks (a1 Dark vellum, b1 Framed miniature, c3 Thumb index and * footnotes, d1 Edge to edge) from the design exploration (scratchpad's inner-build/leaf.css) onto * the real pin markup, CSS only -- no markup, no vault path, no colour literal (SD-8). Every rule * below carries the exact scope LEAF: * * body:has(> .top-nav) > main.content:not(:has(> .landing-hero)) * * (0,3,2) by construction, so it never depends on stylesheet order. LEAF excludes the landing page * (Track A's cover; the last :not() clause) and 404.html (no .top-nav; the first :has() clause) by * construction, never by a body class or by JS (rejected -- Structural decision 1). * * Colour: every leaf rule below consumes only the --sc-leaf-* tokens declared in the block * immediately below (product defaults route through the existing theme tokens: --bg-card, --bg, * --text, --text-muted, --accent, --border, --bg-header, --accent-dim, --font-heading). The * campaign layer re-declares every one of them with the mock's literal vellum/brass/haze values, * plus AMENDMENT E-4's five fold tokens (the built-in haze theme's token block, assets/themes/haze/theme.css). Black alphas use * color-mix(in srgb, #000 N%, transparent), the Vellum precedent. * ====================================================================== */ :root { --sc-leaf-paper: var(--bg-card); --sc-leaf-paper-hi: var(--bg-card); --sc-leaf-paper-2: var(--bg); --sc-leaf-ink: var(--text); --sc-leaf-muted: var(--text-muted); --sc-leaf-brass: var(--accent); --sc-leaf-rule: color-mix(in srgb, var(--accent) 42%, transparent); --sc-leaf-rule-faint: color-mix(in srgb, var(--accent) 18%, transparent); --sc-leaf-edge: var(--border); --sc-leaf-desk: var(--bg-header); --sc-leaf-initial-bg: linear-gradient(135deg, var(--accent-dim), var(--bg)); --sc-leaf-initial-ink: var(--text); --sc-leaf-initial-glow: var(--accent); --sc-leaf-font-sc: var(--font-heading); /* AMENDMENT E-4: the fold's five paper/crease stops. */ --sc-leaf-verso: var(--sc-leaf-paper-2); --sc-leaf-verso-2: var(--sc-leaf-paper-2); --sc-leaf-verso-3: var(--sc-leaf-paper-2); --sc-leaf-crease-hi: color-mix(in srgb, var(--sc-leaf-paper) 70%, var(--sc-leaf-ink)); --sc-leaf-crease: color-mix(in srgb, var(--sc-leaf-paper) 65%, var(--sc-leaf-ink)); /* AMENDMENT E-5: 0 everywhere except the fore-edge thumb-tab breakpoint below. */ --sc-vt-over: 0px; } /* ---- a1 Dark vellum: leaf material, inset double brass rule, binding shadow (FR-02/AC-02) ---- */ body:has(> .top-nav) > main.content:not(:has(> .landing-hero)) { position: relative; isolation: isolate; padding: 4rem clamp(1.75rem, 7vw, 5.75rem) 4.5rem; background: linear-gradient(to right, color-mix(in srgb, #000 34%, transparent), transparent 6%), radial-gradient(120% 70% at 50% 0%, var(--sc-leaf-paper-hi), var(--sc-leaf-paper) 62%); box-shadow: 0 2.125rem 4.375rem color-mix(in srgb, #000 50%, transparent), 0 0 0 1px var(--sc-leaf-edge); } body:has(> .top-nav) > main.content:not(:has(> .landing-hero))::before { content: ""; position: absolute; inset: 1.25rem; border: 1px solid var(--sc-leaf-rule); outline: 1px solid var(--sc-leaf-rule-faint); outline-offset: 5px; pointer-events: none; z-index: -1; } /* ---- Breadcrumbs: centred running head (FR-02/AC-02) ---- */ body:has(> .top-nav) > main.content:not(:has(> .landing-hero)) .breadcrumbs { text-align: center; font-family: var(--sc-leaf-font-sc); letter-spacing: 0.05em; color: var(--sc-leaf-muted); margin-bottom: 2.625rem; } body:has(> .top-nav) > main.content:not(:has(> .landing-hero)) .breadcrumbs a { color: var(--sc-leaf-muted); } body:has(> .top-nav) > main.content:not(:has(> .landing-hero)) .breadcrumbs .sep { margin-inline: 0.35em; color: var(--sc-leaf-brass); } /* ---- FR-03: h2 rule, replacing the Vellum hairline on leaves (Structural decision 5). * Reviewer rework (Polish, 2026-09-24): widened past decision 5's original literal selector to * also reach the section-nested h2s decision 5 missed -- index-page.js's dashboard sections * (.cdd-section-title, e.g. "Premise"/"Setting" on campaign/index.html), story-landing.js's *

Character Stories

on story.html, and story.js's *