/* ============================================================ Dressmaker Wiki — ATELIER THEME ------------------------------------------------------------ Layout, components and class names originate from our most evolved guide layout so a new site starts from the most evolved guide layout we run: header / footer · homepage composition · article page (no sidebar) in-article On-this-page TOC · Where-to-go-next · Helpful vote · page-nav ads: two sticky side rails + in-flow native (PC), mobile leader THEME: the :root block below is townfallguide.com's palette and is only a DEFAULT. For a new site either retune the variables or replace the block — nothing outside :root hard-codes a colour. See README "建站步骤" step 3. ============================================================ */ :root { /* ---- Surfaces: walnut desk + cream paper ---- */ --bg: #465448; /* muted sage shop wall */ --bg-2: #3d4a3f; --bg-panel: #E9DFC7; /* main paper sheet */ --bg-panel-deep: #352720; /* walnut-dark */ --bg-raised: #F1E8D4; --surface: #E7DDC3; /* --paper */ --panel: #F7F0DF; /* --paper-highlight, innermost cards */ --walnut-dark: #352720; --walnut: #4A352A; --wood-medium: #604A39; --sage-dark: #465949; --sage: #667763; --sage-muted: #87917A; --paper: #E7DDC3; --paper-light: #F1E8D4; --paper-highlight: #F7F0DF; /* ---- Text: ink on paper ---- */ --text: #322A25; /* headings — --ink */ --body: #42362E; /* body copy */ --text-2: #6A5A4E; /* --ink-muted */ --text-dim: #8A7866; /* micro metadata */ /* ---- Accent: coral dialogue buttons + brass hardware ---- */ --coral: #D98367; --coral-light: #E9A17F; --rust: #9F473D; /* --brick-red — thread + separators */ --rust-hi: #B4553F; --rust-dark: #7A342C; --rust-deep: #5E2A24; --rust-ink: #9F473D; /* text-safe red on paper */ --brass: #B4863F; --brass-light: #CBA65B; --brass-muted: #8B6C36; /* ---- Supporting tones ---- */ --cold: #6B7C82; --stitch: #A85A4C; /* dashed pattern outline */ /* ---- Borders: brown rules, never grey ---- */ --line: rgba(53, 39, 32, 0.28); --line-soft: rgba(53, 39, 32, 0.16); --line-rust: rgba(159, 71, 61, 0.65); --line-rust-soft: rgba(159, 71, 61, 0.40); --line-rust-hot: rgba(159, 71, 61, 0.95); /* ---- Type: editorial serif + rounded game-UI labels ---- */ --font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif; --font-serif: 'Source Serif 4', 'Libre Baskerville', Georgia, serif; --font-body: 'Source Serif 4', Georgia, 'Times New Roman', serif; --font-ui: 'Nunito Sans', system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; --header-h: 78px; /* sticky header height — used to anchor overlays below it */ --max: 1340px; --pad: 48px; /* Physical paper shadows — soft, warm, never SaaS-glow */ --shadow-paper: 0 2px 2px rgba(48, 34, 25, 0.18), 0 8px 18px rgba(48, 34, 25, 0.14); --shadow-paper-lift: 0 3px 3px rgba(48, 34, 25, 0.20), 0 12px 26px rgba(48, 34, 25, 0.18); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: 17px; line-height: 1.75; color: var(--body); background: var(--bg); -webkit-font-smoothing: antialiased; position: relative; /* `overflow-x: clip` contains horizontal overflow WITHOUT making a scroll container. `overflow-x: hidden` did, which broke the sticky header and the nav dropdown hover chain (regression fixed 2026-09-22). */ overflow-x: clip; } /* ---------- Layered background: sage wallpaper + paper grain + vignette ---------- The site should read as a physical room, not a page: muted floral wallpaper behind, warm paper grain over it, soft vignette at the edges. All static — no animation on a full-screen layer (readability + perf). */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: /* soft vignette so the paper sheet feels lit from the centre */ radial-gradient(ellipse 80% 70% at 50% 40%, transparent 40%, rgba(24, 18, 14, 0.30) 100%), /* wallpaper floral suggested with low-opacity radial blooms, not a tiled SVG */ radial-gradient(circle at 12% 18%, rgba(135, 145, 122, 0.16) 0 7px, transparent 8px), radial-gradient(circle at 37% 62%, rgba(135, 145, 122, 0.13) 0 9px, transparent 10px), radial-gradient(circle at 68% 28%, rgba(135, 145, 122, 0.15) 0 6px, transparent 7px), radial-gradient(circle at 88% 74%, rgba(135, 145, 122, 0.12) 0 8px, transparent 9px), radial-gradient(circle at 52% 8%, rgba(135, 145, 122, 0.10) 0 5px, transparent 6px), linear-gradient(180deg, #4A584C 0%, #3F4C42 55%, #36423A 100%); } body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.05; /* fine paper/twill grain — sensed, not seen (spec: 2–6%) */ background-image: repeating-linear-gradient(0deg, rgba(48, 34, 25, 0.55) 0px, rgba(48, 34, 25, 0.55) 1px, transparent 1px, transparent 3px), repeating-linear-gradient(90deg, rgba(48, 34, 25, 0.30) 0px, rgba(48, 34, 25, 0.30) 1px, transparent 1px, transparent 4px); } /* Fine grain layer on the content wrapper so text stays crisp */ .grain { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); } .site-header, main, .site-footer { position: relative; z-index: 2; } /* ---------- Links ---------- */ a { color: var(--text); text-decoration: none; transition: color 160ms ease; } a:hover { color: var(--rust-hi); } /* ---------- Headings: editorial serif ---------- */ h1, h2, h3, h4 { font-family: var(--font-serif); color: var(--text); line-height: 1.2; font-weight: 600; } h1 { font-size: clamp(2.1rem, 4.4vw, 3rem); letter-spacing: -0.01em; margin-bottom: 0.9rem; } h2 { font-size: clamp(1.5rem, 2.6vw, 1.95rem); margin: 2.6rem 0 1rem; position: relative; padding-bottom: 0.55rem; } h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 58px; height: 1px; background: linear-gradient(90deg, var(--rust) 0%, rgba(166, 40, 46, 0) 100%); } h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); margin: 1.9rem 0 0.7rem; } h4 { font-size: 1.05rem; margin: 1.4rem 0 0.5rem; color: var(--text-2); } p { margin: 0 0 1.05rem; } ul, ol { margin: 0 0 1.15rem 1.3rem; } li { margin-bottom: 0.5rem; } strong { color: var(--text); font-weight: 600; } code { font-family: var(--font-mono); font-size: 0.88em; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line-soft); border-radius: 2px; padding: 0.08em 0.34em; color: var(--text); } /* ---------- Micro label (broadcast metadata) ---------- */ .label, .micro { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); } .label--brass { color: var(--brass); } .label--rust { color: var(--rust-hi); } /* ---------- Chromatic aberration: hero title + selected accents only ---------- */ .chroma { text-shadow: -1px 0 rgba(0, 220, 255, 0.5), 1px 0 rgba(255, 30, 30, 0.5); } /* ============================================================ HEADER ============================================================ */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(8, 9, 11, 0.90); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .header-inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); min-height: 78px; display: flex; align-items: center; gap: 2rem; } /* ---- Logo block ---- */ .brand { display: flex; align-items: center; gap: 0.7rem; flex-shrink: 0; } .brand-mark { color: var(--rust); display: grid; place-items: center; } .brand-mark svg { display: block; } .brand-stack { display: flex; flex-direction: column; line-height: 1.05; } .brand-top { font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.20em; text-transform: uppercase; color: #fff; } .brand-sub { font-family: var(--font-serif); font-style: italic; font-size: 1.06rem; color: var(--rust); letter-spacing: 0.01em; } .brand-tag { font-family: var(--font-body); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-dim); margin-left: 0.5rem; align-self: flex-end; padding-bottom: 2px; } /* ---- Nav: hard-edged text links, no pills ---- */ .header-nav { display: flex; align-items: center; gap: 1.55rem; margin-left: auto; } .header-nav > a, .nav-group-btn { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-2); background: none; border: 0; cursor: pointer; padding: 4px 0; border-bottom: 1px solid transparent; transition: color 160ms ease, border-color 160ms ease; } .header-nav > a:hover, .nav-group-btn:hover, .header-nav > a.active, .nav-group-btn.active { color: var(--rust-hi); border-bottom-color: var(--rust); } .nav-group { position: relative; } .nav-drop { position: absolute; top: 100%; left: -14px; padding-top: 10px; /* visual gap, but part of the hover target */ min-width: 250px; display: none; flex-direction: column; z-index: 90; } /* The inner box carries the surface so the padded wrapper above stays transparent but still hoverable — this is what stops the menu closing while the pointer travels from the button down into the list (Ada, 2026-09-22). */ .nav-drop > * { position: relative; } .nav-drop::after { content: ""; position: absolute; top: 10px; left: 0; right: 0; bottom: 0; background: var(--panel); border: 1px solid var(--line-rust-soft); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7); z-index: -1; } /* Dropdown affordance marker so users can tell a menu opens vs. a plain link. */ .drop-caret { display: inline-block; margin-left: 0.34rem; font-size: 8px; line-height: 1; vertical-align: middle; opacity: 0.75; transition: transform 180ms ease; } .nav-group:hover .drop-caret, .nav-group.open .drop-caret { transform: rotate(180deg); opacity: 1; } .nav-drop a { padding: 0.5rem 1.05rem; font-size: 0.82rem; color: var(--text-2); border-left: 2px solid transparent; position: relative; z-index: 1; } .nav-drop a:first-child { padding-top: 0.65rem; } .nav-drop a:last-child { padding-bottom: 0.65rem; } .nav-drop a:hover { color: var(--text); background: rgba(166, 40, 46, 0.12); border-left-color: var(--rust); } .nav-drop a.active { color: var(--rust-hi); border-left-color: var(--rust); } /* Shown by hover (desktop convenience) or by the click "pinned" state. Click is authoritative on every device — hover no longer gates the menu. */ .nav-group.open .nav-drop { display: flex; } .search-toggle { background: none; border: 1px solid var(--line); color: var(--text-2); font-size: 1rem; width: 34px; height: 34px; cursor: pointer; transition: all 160ms ease; flex-shrink: 0; } .search-toggle:hover { border-color: var(--rust-hi); color: var(--rust-hi); } .menu-toggle { display: none; background: none; border: 1px solid var(--line); color: var(--text); font-size: 1.1rem; width: 38px; height: 34px; cursor: pointer; margin-left: auto; } /* ---- Reading progress + On this page jump ---- */ .read-bar { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad) 0.5rem; display: flex; align-items: center; gap: 1rem; position: relative; } .read-bar-track { flex: 1; height: 1px; background: rgba(255, 255, 255, 0.10); } .read-bar-fill { display: block; height: 1px; width: 0; background: var(--rust); } .read-jump { background: none; border: 0; color: var(--text-dim); font-family: var(--font-body); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.4rem; } .read-jump .read-caret { transition: transform 180ms ease; font-size: 8px; } .read-jump[aria-expanded="true"] .read-caret { transform: rotate(180deg); } .read-jump:hover { color: var(--rust-hi); } /* Hidden by default; only rendered visible when the toggle opens it. Anchored to the far right of the viewport gutter (not the article column) so it can never cover the body text it links to (Ada, 2026-09-22). */ .read-menu { display: none; position: fixed; right: 24px; top: 96px; background: var(--panel); border: 1px solid var(--line-rust-soft); padding: 0.4rem 0; min-width: 240px; max-width: 320px; max-height: 62vh; overflow-y: auto; flex-direction: column; z-index: 90; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.7); } .read-menu[data-open="true"] { display: flex; } .read-menu a { padding: 0.34rem 0.95rem; font-size: 0.78rem; color: var(--text-2); border-left: 2px solid transparent; } .read-menu a:hover { color: var(--text); background: rgba(166, 40, 46, 0.10); } .read-menu a[aria-current="true"] { color: var(--text); border-left-color: var(--rust); } /* ============================================================ SEARCH OVERLAY — broadcast terminal ============================================================ */ .search-panel { display: none; position: fixed; inset: 0; z-index: 90; background: rgba(6, 7, 9, 0.96); padding: 14vh 1.5rem 2rem; overflow-y: auto; } .search-panel.open { display: block; } .search-panel label { display: block; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--rust); margin-bottom: 0.7rem; } #searchInput { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line-rust-soft); color: var(--text); font-family: var(--font-serif); font-size: clamp(1.4rem, 3.4vw, 2.2rem); padding: 0.4rem 0 0.6rem; outline: none; } #searchInput::placeholder { color: var(--text-dim); } .search-result { display: block; padding: 0.65rem 0; border-bottom: 1px solid var(--line-soft); font-family: var(--font-serif); font-size: 1.02rem; color: var(--text); } .search-result:hover { color: var(--rust-hi); } .sr-cat { display: block; font-family: var(--font-body); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rust); margin-bottom: 0.15rem; } /* ============================================================ LAYOUT ============================================================ */ .container { max-width: var(--max); margin: 0 auto; padding: 3.4rem var(--pad) 4.5rem; } .breadcrumb { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 1.7rem; } .breadcrumb a { color: var(--text-dim); } .breadcrumb a:hover { color: var(--rust-hi); } .crumb-sep { color: var(--rust); } /* Article page — NO sidebar (Ada, 2026-09-26). The sidebar "On this page" list moved into the article body (`.toc`, on-this-page.njk); the header read-bar already carries the second copy. PC: the two sticky ad rails flank the article. Both rails are display:none below 1340px, so the single-column default is what tablets/phones get. */ .content-wrapper { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: start; justify-content: center; } .main-content { min-width: 0; width: 100%; max-width: 820px; } /* Documentation pages (about / privacy / tos / changelog): no rails, centred. */ .content-wrapper--doc { max-width: 820px; margin: 0 auto; } /* ---------- Article meta line ---------- */ .last-updated { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 1.5rem; } .page-intro { font-size: 1.06rem; color: var(--text-2); margin-bottom: 1.6rem; } /* ---------- Quick answer ---------- */ .quick-answer { background: var(--surface); border: 1px solid var(--line-rust); border-left-width: 3px; border-left-color: var(--rust); padding: 1.3rem 1.5rem; margin: 0 0 2rem; border-radius: 2px; } /* The heading strong is a block label; inline emphasis inside the body must stay inline or every breaks onto its own line (reported 2026-09-22). */ .quick-answer strong { display: inline; font-family: inherit; font-size: inherit; letter-spacing: normal; text-transform: none; color: var(--text); margin: 0; } .quick-answer > strong:first-child { display: block; font-family: var(--font-body); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rust-hi); margin-bottom: 0.55rem; } .quick-answer p:last-child { margin-bottom: 0; } /* ---------- Callouts: dark archival panels ---------- */ .tip-box, .important-box, .warning-box, .spoiler-box { background: var(--surface); border: 1px solid var(--line-soft); border-left: 3px solid var(--text-dim); padding: 1.15rem 1.4rem; margin: 1.6rem 0; border-radius: 2px; } .tip-box strong, .important-box strong, .warning-box strong, .spoiler-box strong { display: block; font-family: var(--font-body); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 0.5rem; color: var(--text-2); } .tip-box strong { color: var(--text-2); } .important-box { border-left-color: var(--rust); } .important-box strong { color: var(--rust-hi); } .warning-box { border-left-color: var(--rust); background: rgba(101, 32, 35, 0.16); } .warning-box strong { color: var(--rust-hi); } .spoiler-box { background: #0c0d0f; border-left-color: var(--cold); } .spoiler-box strong { color: var(--cold); filter: brightness(1.5); } .spoiler-box[open] strong { margin-bottom: 0.7rem; } .spoiler-box summary { cursor: pointer; list-style: none; } .spoiler-box summary::-webkit-details-marker { display: none; } .spoiler-box p:last-child { margin-bottom: 0; } /* ---------- Images as collected evidence ---------- */ .main-content img, .shot { display: block; width: 100%; height: auto; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 2px; margin: 1.7rem 0 0.5rem; background: var(--bg-2); } .img-caption { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 1.9rem; } /* ---------- Tables: promotional edition-chart language ---------- */ .table-scroll { overflow-x: auto; margin: 1.6rem 0 2rem; border: 1px solid var(--line-rust-soft); } table { width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 460px; } thead th { background: linear-gradient(180deg, #1b1c1f 0%, #151618 100%); color: var(--text); font-family: var(--font-body); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; text-align: left; padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--line-rust-soft); white-space: nowrap; } tbody td { padding: 0.7rem 0.9rem; border-bottom: 1px solid rgba(255, 255, 255, 0.07); vertical-align: top; color: var(--body); } tbody tr:nth-child(odd) { background: rgba(255, 255, 255, 0.018); } tbody tr:last-child td { border-bottom: 0; } tbody td strong { color: var(--text); } /* ============================================================ BUTTONS — rectangular, no rounded modern pills ============================================================ */ .btn { display: inline-block; font-family: var(--font-body); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.82rem 1.5rem; border-radius: 2px; cursor: pointer; transition: all 170ms ease; } .btn-primary { background: var(--rust-deep); border: 1px solid #B32C32; color: #fff; } .btn-primary:hover { background: var(--rust-hi); border-color: var(--rust-hi); color: #fff; } .btn-ghost { background: transparent; border: 1px solid var(--line); color: var(--text-2); } .btn-ghost:hover { border-color: var(--rust-hi); color: var(--text); } /* ============================================================ SECTION HEADER ============================================================ */ .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.6rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--line-soft); } .section-head h2 { margin: 0; padding: 0; font-size: clamp(1.35rem, 2.4vw, 1.75rem); } .section-head h2::after { display: none; } .section-head .micro { flex-shrink: 1; min-width: 0; text-align: right; } /* ============================================================ GUIDE CARDS (4-col) ============================================================ */ .card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.15rem; } .guide-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line-rust-soft); border-radius: 2px; overflow: hidden; transition: border-color 180ms ease; } .guide-card:hover { border-color: var(--rust-hi); } .guide-card-thumb { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-2); } .guide-card-thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.7) contrast(1.05) brightness(0.78); transition: transform 200ms ease, filter 200ms ease; } .guide-card:hover .guide-card-thumb img { transform: scale(1.025); filter: saturate(0.85) contrast(1.12) brightness(0.86); } .guide-card-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 35%, rgba(8, 9, 10, 0.9) 100%); } .guide-card-body { padding: 1.05rem 1.15rem 1.2rem; display: flex; flex-direction: column; flex: 1; } .guide-card-body h3 { font-family: var(--font-serif); font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 0.5rem; line-height: 1.25; } .guide-card-body h3 a { color: var(--text); } .guide-card-body h3 a:hover { color: var(--rust-hi); } .guide-card-body p { font-size: 0.84rem; color: var(--text-2); margin: 0 0 0.9rem; line-height: 1.6; } .guide-card-more { margin-top: auto; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rust); transition: transform 180ms ease; } .guide-card:hover .guide-card-more { transform: translateX(4px); color: var(--rust-hi); } /* ============================================================ ARTICLE ROWS (Latest guides — publication index, not blog grid) ============================================================ */ .article-rows { display: flex; flex-direction: column; border-top: 1px solid var(--line-soft); } .article-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 1.4rem; padding: 1.15rem 0; border-bottom: 1px solid var(--line-soft); align-items: start; } .article-row img { width: 150px; height: 90px; object-fit: cover; border: 1px solid var(--line-soft); filter: saturate(0.7) contrast(1.05) brightness(0.8); transition: filter 180ms ease; } .article-row:hover img { filter: saturate(0.85) contrast(1.12) brightness(0.88); } .article-row h3 { font-size: 1.12rem; margin: 0 0 0.35rem; } .article-row h3 a { color: var(--text); } .article-row h3 a:hover { color: var(--rust-hi); } .article-row p { font-size: 0.86rem; color: var(--text-2); margin: 0 0 0.5rem; line-height: 1.6; } /* ============================================================ GAME INFO PANEL — case file / dossier ============================================================ */ .game-info { background: var(--panel); border: 1px solid var(--line); border-radius: 2px; } .game-info h3 { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rust); margin: 0; padding: 0.9rem 1.15rem; border-bottom: 1px solid var(--line-rust-soft); } .game-info-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; filter: saturate(0.72) contrast(1.05) brightness(0.8); border-bottom: 1px solid var(--line-soft); } .game-info-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.68rem 1.15rem; border-bottom: 1px solid var(--line-soft); } .game-info-row:last-child { border-bottom: 0; } .game-info-row dt { font-family: var(--font-body); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); padding-top: 4px; flex-shrink: 0; } .game-info-row dd { font-family: var(--font-serif); font-size: 0.95rem; color: var(--text); text-align: right; margin: 0; } /* ============================================================ TRANSMISSION LOG — signature component ============================================================ */ .transmission { background: var(--bg-2); border-top: 1px solid var(--line-rust-soft); border-bottom: 1px solid var(--line-rust-soft); padding: 3.2rem 0; margin: 3.6rem 0; } .transmission-inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 0.85fr); gap: 2.4rem; align-items: center; } .crt-frame { position: relative; border: 1px solid var(--line); background: #000; overflow: hidden; } .crt-frame img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(1) contrast(1.4) brightness(0.72); } .crt-frame::after { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, rgba(0,0,0,0.42) 0px, rgba(0,0,0,0.42) 1px, transparent 1px, transparent 3px); pointer-events: none; } .transmission-quote { font-family: var(--font-serif); font-size: clamp(1.3rem, 2.5vw, 1.85rem); line-height: 1.35; color: var(--text); margin-bottom: 1.3rem; } .waveform { display: block; width: 100%; max-width: 260px; height: 26px; margin-bottom: 1.2rem; } .waveform path { stroke: var(--rust); stroke-width: 1.4; fill: none; } .transmission-log .label { display: block; margin-bottom: 0.6rem; color: var(--rust); } .transmission-log p { font-size: 0.9rem; color: var(--text-2); margin: 0; } .channels { display: flex; flex-direction: column; gap: 0.15rem; } .channel { display: flex; gap: 0.85rem; padding: 0.5rem 0.7rem; font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-dim); border: 1px solid transparent; transition: all 170ms ease; } .channel:hover { color: var(--text); background: rgba(166, 40, 46, 0.08); } .channel.active { color: var(--text); border-color: var(--rust); background: rgba(166, 40, 46, 0.10); } /* ============================================================ EDITION COMPARISON ============================================================ */ .editions { width: 100%; border-collapse: collapse; border: 1px solid var(--line-rust-soft); margin: 1.6rem 0; min-width: 420px; } .editions th, .editions td { border: 1px solid rgba(166, 40, 46, 0.28); padding: 0.72rem 1rem; text-align: center; } .editions th:first-child, .editions td:first-child { text-align: left; } .editions thead th { background: #131416; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text); } .editions td { font-family: var(--font-serif); font-size: 0.95rem; color: var(--body); } .editions tbody tr:nth-child(odd) td { background: rgba(255, 255, 255, 0.016); } .editions .yes { color: var(--brass); font-weight: 600; } .editions .no { color: var(--text-dim); } /* ============================================================ RELATED GRID + PAGE NAV + HELPFUL ============================================================ */ .related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.2rem 0 2rem; } .related-grid .card { background: var(--surface); border: 1px solid var(--line-rust-soft); border-radius: 2px; padding: 1.15rem 1.25rem; transition: border-color 180ms ease; } .related-grid .card:hover { border-color: var(--rust-hi); } .related-grid .card h3 { font-size: 1.06rem; margin: 0 0 0.45rem; } .related-grid .card h3 a { color: var(--text); } .related-grid .card h3 a:hover { color: var(--rust-hi); } .related-grid .card p { font-size: 0.84rem; color: var(--text-2); margin: 0 0 0.75rem; line-height: 1.6; } .card-link { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rust); } .card-link:hover { color: var(--rust-hi); } .page-nav { display: flex; gap: 1rem; margin: 2.4rem 0 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line-soft); } .page-nav a { flex: 1; border: 1px solid var(--line-soft); border-radius: 2px; padding: 0.9rem 1.1rem; transition: border-color 170ms ease; } .page-nav a:hover { border-color: var(--rust-hi); } .page-nav .label { display: block; margin-bottom: 0.3rem; } .page-nav .pn-title { font-family: var(--font-serif); font-size: 1rem; color: var(--text); } .helpful { display: flex; align-items: center; gap: 1rem; padding: 1.2rem 0; border-top: 1px solid var(--line-soft); margin-top: 1.6rem; } .helpful .label { flex-shrink: 0; } .helpful button { background: transparent; border: 1px solid var(--line); color: var(--text-2); padding: 0.42rem 0.9rem; font-size: 0.82rem; cursor: pointer; border-radius: 2px; transition: all 160ms ease; } .helpful button:hover { border-color: var(--rust-hi); color: var(--text); } /* Next-steps module (mid-article) */ .next-steps { background: var(--bg-2); border: 1px solid var(--line-rust-soft); border-left: 3px solid var(--rust); padding: 1.3rem 1.5rem; margin: 2.2rem 0; border-radius: 2px; } .next-steps > .label { display: block; margin-bottom: 0.9rem; color: var(--rust); } .next-steps-item { display: block; padding: 0.6rem 0; border-top: 1px solid var(--line-soft); } .next-steps-item:first-of-type { border-top: 0; } .next-steps-item strong { display: block; font-family: var(--font-serif); font-size: 1.02rem; color: var(--text); font-weight: 600; margin-bottom: 0.15rem; } .next-steps-item span { font-size: 0.83rem; color: var(--text-2); } /* ============================================================ FOOTER ============================================================ */ .site-footer { border-top: 1px solid var(--line-rust-soft); margin-top: 4rem; background: var(--bg-2); } .footer-inner { max-width: var(--max); margin: 0 auto; padding: 3rem var(--pad) 2rem; display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 2.2rem; } .footer-brand .brand-stack { margin-bottom: 0.9rem; } .footer-brand p { font-size: 0.85rem; color: var(--text-dim); margin: 0; max-width: 30ch; } .footer-col { display: flex; flex-direction: column; gap: 0.42rem; } .footer-col strong { font-family: var(--font-body); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rust); margin-bottom: 0.35rem; } .footer-col a { font-size: 0.85rem; color: var(--text-2); } .footer-col a:hover { color: var(--rust-hi); } .footer-copy { max-width: var(--max); margin: 0 auto; padding: 1.4rem var(--pad) 2.4rem; border-top: 1px solid var(--line-soft); font-size: 0.78rem; color: var(--text-dim); line-height: 1.75; } .footer-copy a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; } .footer-copy .micro-tag { display: block; font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(179, 154, 84, 0.6); margin-bottom: 0.6rem; } /* ============================================================ AD LAYOUT — Adsterra ============================================================ */ .ad-slot { position: relative; max-width: 100%; margin: 0 auto; overflow: hidden; text-align: center; } .ad-label { display: block; margin: 0 0 6px; color: var(--text-dim); font: 500 9px/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; } .ad-slot img, .ad-slot iframe { max-width: 100%; margin: 0; border: 0; filter: none; } .ad-sticky { position: sticky; z-index: 10; } .ad-sticky.hidden { display: none; } .ad-close { position: absolute; top: -22px; right: -4px; z-index: 2; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-rust); border-radius: 50%; background: var(--bg-panel); color: var(--text-2); font: 600 18px/1 var(--font-body); cursor: pointer; } .ad-close:hover { border-color: var(--rust-hi); color: var(--text); } .ad-leader { clear: both; top: 108px; width: max-content; max-width: 100%; margin: 2rem auto 2.4rem; padding: 6px 22px 6px 6px; border: 1px solid var(--line-rust-soft); border-radius: 2px; background: var(--bg-panel); } .ad-leader .ad-slot { margin: 0; } .ad-leader-desktop { width: 728px; max-width: 100%; min-height: 90px; } .ad-leader-mobile { display: none; width: 468px; max-width: 100%; min-height: 60px; } .ad-native { max-width: 800px; min-height: 60px; margin: 2rem auto 2.6rem; } .ad-rail { display: none; top: 108px; align-self: start; width: 160px; padding: 6px; border: 1px solid var(--line-rust-soft); border-radius: 2px; background: var(--bg-panel); } .ad-rail .ad-slot { width: 160px; margin: 0; } /* Reserve the creative's footprint so the slot does not collapse to an empty label strip when nothing is served (and no layout shift when it is). */ .ad-rail-unit { min-height: 600px; } .ad-rail-small .ad-rail-unit { min-height: 300px; } /* Right rail — editorial pages only, same 160px track (Ada 2026-09-26: with the sidebar gone, PC carries two sticky rails instead of one + a mid-article sticky leaderboard). */ .ad-rail-small { display: none; } .ad-home-unit { width: 160px; min-height: 300px; } /* Mobile-only leaderboard (468×60). Editorial pages no longer render the desktop 728 unit at all, so mobile is the only place a leader runs there. */ .ad-mobile-only { display: none; } @media (max-width: 1145px) { .ad-mobile-only { display: block; } } .ad-section { max-width: var(--max); margin: 2.5rem auto; padding: 0 var(--pad); } /* ============================================================ IN-ARTICLE "ON THIS PAGE" TOC (Ada 2026-09-26) Replaces the article sidebar. Sits at the top of the article body. Desktop: always open. ≤900px: accordion — collapsed by default, click to expand (the header read-bar already carries the second copy on mobile). ============================================================ */ .toc { background: var(--bg-panel); border: 1px solid var(--line-rust-soft); border-left: 3px solid var(--rust); border-radius: 2px; padding: 1.1rem 1.4rem 1.2rem; margin: 0 0 2.2rem; } .toc-head, .toc-toggle { font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rust); margin: 0 0 0.75rem; } .toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; } .toc li { margin: 0; counter-increment: toc; } .toc li a { display: block; padding: 0.3rem 0 0.3rem 0.7rem; font-size: 0.9rem; line-height: 1.5; color: var(--text-2); border-left: 1px solid var(--line-soft); } .toc li a::before { content: counter(toc) '. '; font-size: 0.85em; color: var(--text-dim); font-variant-numeric: tabular-nums; } .toc li a:hover { color: var(--text); border-left-color: var(--rust); } .toc-toggle { display: none; width: 100%; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; } @media (max-width: 900px) { .toc { padding: 0; } .toc > .toc-head { display: none; } .toc-toggle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0; padding: 1rem 1.4rem; } .toc-toggle::after { content: '\2304'; font-size: 1rem; color: var(--rust-hi); } .toc.open .toc-toggle::after { content: '\2303'; } .toc-body { display: none; padding: 0 1.4rem 1.1rem; } .toc.open .toc-body { display: block; } } @media (min-width: 1340px) { .content-wrapper:has(.ad-rail), .content-wrapper:has(.ad-rail-small) { max-width: 1400px; margin: 0 auto; gap: 2rem; } /* Both rails open — 160 | article | 160 */ .content-wrapper:has(.ad-rail):has(.ad-rail-small) { grid-template-columns: 160px minmax(0, 1fr) 160px; } .content-wrapper:has(.ad-rail):not(:has(.ad-rail-small)), .content-wrapper:has(.ad-rail):has(.ad-rail-small.hidden) { grid-template-columns: 160px minmax(0, 1fr); } .content-wrapper:has(.ad-rail.hidden):has(.ad-rail-small), .content-wrapper:not(:has(.ad-rail)):has(.ad-rail-small) { grid-template-columns: minmax(0, 1fr) 160px; } /* Both rails closed by the reader — collapse back to one column, or the article lands in a 160px track. */ .content-wrapper:has(.ad-rail.hidden):has(.ad-rail-small.hidden) { grid-template-columns: minmax(0, 1fr); } .ad-rail { display: block; } } @media (max-width: 1154px) { .ad-leader-desktop { display: none; } .ad-leader-mobile { display: block; } } @media (max-width: 900px) { .ad-leader { top: 108px; margin: 1.5rem auto 2rem; padding: 6px; } } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1080px) { :root { --pad: 32px; } .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .transmission-inner { grid-template-columns: 1fr 1fr; gap: 1.8rem; } .channels { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; } .channel { flex: 1 1 45%; } .footer-inner { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .content-wrapper { grid-template-columns: minmax(0, 1fr); gap: 0; } .header-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--panel); border-bottom: 1px solid var(--line-rust-soft); padding: 0.8rem var(--pad) 1.2rem; flex-direction: column; align-items: flex-start; gap: 0; max-height: 78vh; overflow-y: auto; } .header-nav.open { display: flex; } .header-nav > a { width: 100%; padding: 0.7rem 0; border-bottom: 1px solid var(--line-soft); } .nav-group { width: 100%; } .nav-group-btn { width: 100%; text-align: left; padding: 0.7rem 0; border-bottom: 1px solid var(--line-soft); } .nav-drop { position: static; display: none; min-width: 0; padding: 0 0 0.5rem 0.9rem; } .nav-drop::after { display: none; } .nav-drop a { border-left: 0; padding: 0.5rem 0; } .nav-drop a:first-child, .nav-drop a:last-child { padding-top: 0.5rem; padding-bottom: 0.5rem; } .nav-group.open .nav-drop { display: flex; } .menu-toggle { display: block; } .search-toggle { margin-left: 0.5rem; } .header-inner { position: relative; } } @media (max-width: 720px) { :root { --pad: 20px; } /* Section heads stack on small screens: a long micro label in a flex row with flex-shrink:0 forced a horizontal scrollbar (Ada, 2026-09-22). */ .section-head { flex-wrap: wrap; align-items: flex-start; gap: .45rem; } .section-head .micro { flex-shrink: 1; min-width: 0; text-align: left; width: 100%; } .label, .micro, .micro-tag { overflow-wrap: anywhere; } .hero-meta .hm-item { min-width: 0; overflow-wrap: anywhere; } h1 { font-size: clamp(1.75rem, 7vw, 2.3rem); } .card-grid { grid-template-columns: minmax(0, 1fr); } .article-row { grid-template-columns: 96px minmax(0, 1fr); gap: 1rem; } .article-row img { width: 96px; height: 60px; } .related-grid { grid-template-columns: minmax(0, 1fr); } .transmission-inner { grid-template-columns: minmax(0, 1fr); } .footer-inner { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; } .header-nav { padding-left: var(--pad); padding-right: var(--pad); } .read-menu { right: 12px !important; left: 12px !important; max-width: none; } .table-scroll { margin-left: -20px; margin-right: -20px; } } /* ============================================================ TOWNFALL VISUAL REVISION — Analog print / damaged broadcast Per "UI Spec Update" (2026-09-22). Visual only: no IA or copy change here. P0 = global texture, hero composition, image treatment, panel borders, stronger red framing, section framing, typographic registration error. ============================================================ */ /* ---------- §2 Global multi-layer texture ---------- Static (non-animated) overlays so readability survives. Kept at 3–6%. Page-edge distress is a separate fixed layer at 5–14%. */ .global-grain, .global-edges { position: fixed; inset: 0; pointer-events: none; z-index: 0; } .global-grain { opacity: .045; background-image: url("data:image/svg+xml;utf8,"); mix-blend-mode: overlay; } .global-grain::after { content: ""; position: absolute; inset: 0; opacity: .5; background-image: repeating-linear-gradient( 180deg, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, .35) 3px, rgba(0, 0, 0, 0) 4px ); } /* Irregular distressed viewport edge: dirty rust / burnt black, not a gradient. */ .global-edges { box-shadow: inset 0 0 90px 26px rgba(84, 27, 30, .30), inset 0 0 190px 70px rgba(9, 10, 11, .85), inset 0 0 40px 8px rgba(0, 0, 0, .6); } .global-edges::before, .global-edges::after { content: ""; position: absolute; background-repeat: no-repeat; opacity: .12; } .global-edges::before { top: 0; left: 0; right: 0; height: 62px; background-image: linear-gradient(90deg, rgba(84,27,30,.9) 0 8%, rgba(0,0,0,0) 8% 19%, rgba(84,27,30,.7) 19% 23%, rgba(0,0,0,0) 23% 61%, rgba(84,27,30,.55) 61% 66%, rgba(0,0,0,0) 66%); } .global-edges::after { bottom: 0; left: 0; right: 0; height: 74px; background-image: linear-gradient(90deg, rgba(0,0,0,0) 0 4%, rgba(84,27,30,.75) 4% 11%, rgba(0,0,0,0) 11% 38%, rgba(84,27,30,.5) 38% 44%, rgba(0,0,0,0) 44% 78%, rgba(84,27,30,.65) 78% 84%, rgba(0,0,0,0) 84%); } @media (max-width: 900px) { .global-edges { box-shadow: inset 0 0 60px 14px rgba(84,27,30,.22), inset 0 0 90px 30px rgba(9,10,11,.8); } .global-edges::before, .global-edges::after { opacity: .07; } } /* Keep real content above the texture layer. NOTE: .site-header must stay sticky — only raise its stacking order, never set `position` here or the sticky header breaks (regression 2026-09-22). */ main, .site-footer, .search-panel { position: relative; z-index: 2; } .site-header { z-index: 60; } /* ---------- §16 Signal / registration primitives ---------- */ .reg-mark { display: inline-block; width: 7px; height: 7px; border: 1px solid var(--rust); position: relative; flex-shrink: 0; } .reg-mark::before, .reg-mark::after { content: ""; position: absolute; background: var(--rust); } .reg-mark::before { left: 50%; top: -3px; width: 1px; height: 13px; transform: translateX(-50%); } .reg-mark::after { top: 50%; left: -3px; height: 1px; width: 13px; transform: translateY(-50%); } /* Damaged divider: long gray line + short red section + micro marker. */ .tf-divider { display: flex; align-items: center; gap: .55rem; margin: 2.4rem 0 1.9rem; } .tf-divider .d-red { width: 8%; min-width: 34px; height: 1px; background: var(--rust); flex-shrink: 0; } .tf-divider .d-gray { flex: 1; height: 1px; background: rgba(255, 255, 255, .10); } .tf-divider .d-break { width: 14px; height: 1px; background: rgba(255, 255, 255, .10); flex-shrink: 0; } .tf-divider .d-tick { width: 3px; height: 3px; background: var(--rust); flex-shrink: 0; } /* Waveform separator (SVG-free, pure CSS). */ .signal-line { height: 9px; margin: 1.8rem 0; background-image: linear-gradient(90deg, transparent 0 2%, rgba(133,38,42,.85) 2% 2.4%, transparent 2.4% 6%, rgba(133,38,42,.6) 6% 6.5%, transparent 6.5% 12%, rgba(133,38,42,.9) 12% 12.6%, transparent 12.6% 100%); background-size: 220px 100%; background-repeat: repeat-x; opacity: .55; } /* ---------- §3/§12 Section plates + dirty-red framing ---------- */ .plate { position: relative; background: rgba(10, 10, 11, .85); border: 1px solid var(--line-rust-soft); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03); padding: 1.9rem 1.7rem; margin: 0 0 2.1rem; } /* Corner brackets + registration marks, as on the edition graphics. */ .plate::before, .plate::after { content: ""; position: absolute; width: 16px; height: 16px; border: 1px solid var(--line-rust); pointer-events: none; } .plate::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; } .plate::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; } /* Section heading graphic treatment (§19): red tick + title + rule + meta. */ .sec-head { display: flex; align-items: baseline; gap: .6rem; margin: 2.6rem 0 1.1rem; border-bottom: 0; } .sec-head .h-tick { width: 9px; height: 9px; background: var(--rust); flex-shrink: 0; align-self: center; } .sec-head .h-title { font-family: var(--font-body); font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--text-2); flex-shrink: 0; } .sec-head .h-rule { flex: 1; height: 1px; background: rgba(255,255,255,.10); align-self: center; } .sec-head .h-meta { font-family: var(--font-body); font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--text-dim); flex-shrink: 0; } /* Micro broadcast metadata scattered as decoration (§6). */ .micro-tag { font-family: var(--font-body); font-size: 9px; letter-spacing: .30em; text-transform: uppercase; color: var(--text-dim); } /* ---------- §6 Large-heading registration error (analog, ~1px) ---------- */ .reg-text, .hero-title, .main-content h1 { text-shadow: -1px 0 rgba(20, 180, 190, .40), 1px 0 rgba(180, 25, 30, .45); } /* Never apply to long-form body copy — readability. */ .main-content p, .main-content li, td { text-shadow: none; } /* ---------- §9/§14 Site-wide image treatment ---------- No bright untouched screenshot may appear on a black field. */ .tf-img { position: relative; overflow: hidden; background: #000; border: 1px solid var(--line-rust-soft); } .tf-img img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.65) contrast(1.12) brightness(.72); transition: transform 220ms ease, filter 220ms ease; } .tf-img::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(9,10,11,.30) 0%, rgba(9,10,11,.06) 40%, rgba(9,10,11,.72) 100%), repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.16) 3px, rgba(0,0,0,0) 4px), radial-gradient(120% 110% at 50% 40%, rgba(0,0,0,0) 40%, rgba(0,0,0,.72) 100%); mix-blend-mode: multiply; } .tf-img:hover img { transform: scale(1.015); filter: saturate(.70) contrast(1.17) brightness(.74); } /* CRT panel treatment (§15) — selective, no screen curvature. */ .crt-panel { position: relative; border: 1px solid var(--line-rust-soft); background: #000; overflow: hidden; box-shadow: inset 0 0 60px 10px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.03); } .crt-panel img { display: block; width: 100%; filter: saturate(.55) contrast(1.15) brightness(.70); } .crt-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 1px, rgba(0,0,0,.30) 2px, rgba(0,0,0,0) 3px); opacity: .55; } .crt-panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; background: radial-gradient(130% 120% at 50% 50%, rgba(0,0,0,0) 42%, rgba(0,0,0,.78) 100%), linear-gradient(90deg, rgba(20,180,190,.05) 0 49.7%, rgba(180,25,30,.05) 50.3% 100%); } /* ---------- §22 Occasional dark red surface (<=5% of page) ---------- */ .plate--red { background: var(--rust-deep); border-color: var(--line-rust); } /* ---------- §11/§13 Guide cards as promotional panels ---------- */ .card-grid { display: grid; gap: 1.5rem; } .card { position: relative; display: flex; flex-direction: column; background: rgba(10,10,11,.88); border: 1px solid var(--line-rust); box-shadow: inset 0 0 0 1px rgba(255,255,255,.03); border-radius: 0; overflow: hidden; transition: border-color 160ms ease, transform 160ms ease; } .card:hover { border-color: var(--line-rust-hot); } .card .tf-img { border: 0; border-bottom: 1px solid var(--line-rust-soft); aspect-ratio: 16 / 10; } .card-body { padding: 1.05rem 1.15rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; } .card h3 { font-family: var(--font-serif); font-size: 1.32rem; line-height: 1.18; margin: 0; } .card h3 a { color: var(--text); } .card p { font-size: .88rem; color: var(--text-2); margin: 0; flex: 1; } .card-link { font-family: var(--font-body); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--rust-hi); align-self: flex-start; margin-top: .35rem; } /* Card variants (§13) — controlled composition variation, not random styling. */ .card--img-dominant .tf-img { aspect-ratio: 4 / 5; } .card--text-dominant { background: var(--bg-panel-deep); } .card--text-dominant .tf-img { aspect-ratio: 16 / 6; } .card--dark .tf-img img { filter: saturate(.35) contrast(1.22) brightness(.55); } .card--crt .tf-img img { filter: grayscale(1) contrast(1.35) brightness(.62); } .card--red { background: var(--rust-deep); } .card--red .card p { color: #c9b3b3; } /* ---------- §10 Controlled asymmetry ---------- */ .off-l { transform: translateX(-8px); } .off-r { transform: translateX(8px); } .off-up { transform: translateY(-12px); } @media (max-width: 900px) { /* Mobile: simplify asymmetry, keep identity (§29). */ .off-l, .off-r, .off-up { transform: none; } } /* ============================================================ HERO v2 — promotional spread (§8/§9) One dominant framed composition across nearly the full content width. Image bleeds behind the type; the boundary between image and page is ambiguous. Replaces the old clean two-column hero. ============================================================ */ .hero { position: relative; border-bottom: 0; overflow: visible; padding: 1.9rem 0 0; } .hero-frame { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); } .hero-plate { position: relative; min-height: 600px; display: grid; grid-template-rows: 1fr auto; border: 1px solid var(--line-rust); background: var(--bg-panel-deep); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), inset 0 0 120px 20px rgba(0,0,0,.85); } /* Hero image TILES the full plate (Ada, 2026-09-22): the photo spans the entire hero area edge to edge — no crop offset to one side, no scale-up, no side column. The is absolutely positioned itself so `object-fit: cover` has a definite box in every layout; relying on `height:100%` inside the absolutely-positioned wrapper stretched the photo on narrow screens (caught by ops/responsive-check.py). */ .hero-art { position: absolute; inset: 0; z-index: 0; } .hero-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; filter: saturate(.66) contrast(1.12) brightness(.70); } .hero-art::after { content: ""; position: absolute; inset: 0; /* lighter scrim than before so the tiled photo reads across the whole plate, while keeping the left-side copy legible */ background: linear-gradient(100deg, rgba(8,9,10,.94) 0%, rgba(8,9,10,.80) 30%, rgba(8,9,10,.42) 58%, rgba(8,9,10,.30) 80%, rgba(8,9,10,.55) 100%), linear-gradient(180deg, rgba(8,9,10,.42) 0%, rgba(8,9,10,0) 34%, rgba(8,9,10,.74) 100%); } /* scanlines + faint red contamination over the hero image */ .hero-art::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.20) 3px, rgba(0,0,0,0) 4px), linear-gradient(90deg, rgba(155,41,46,.10) 0 42%, rgba(20,180,190,.035) 42% 100%); opacity: .8; } /* asymmetric copy block: left-weighted, with controlled offset (§10) */ .hero-copy { position: relative; z-index: 3; max-width: 660px; padding: 3.4rem 2.2rem 2.1rem 3.1rem; align-self: center; } .hero-kicker { display: flex; align-items: center; gap: .6rem; font-family: var(--font-body); font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--rust-hi); margin: 0 0 1.05rem; } .hero-title { font-family: var(--font-serif); font-size: clamp(2.9rem, 6.4vw, 4.6rem); line-height: 1.02; letter-spacing: -.012em; color: var(--text); margin: 0 0 .85rem; font-weight: 600; } .hero-sub { font-family: var(--font-body); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--brass); margin: 0 0 1.15rem; } .hero-lede { font-size: 1.02rem; line-height: 1.65; color: var(--body); margin: 0 0 1.7rem; max-width: 46ch; } .hero-cta { display: flex; gap: .85rem; flex-wrap: wrap; } /* metadata strip along the bottom of the plate — broadcast log language */ .hero-meta { position: relative; z-index: 3; display: flex; flex-wrap: wrap; gap: .55rem 1.5rem; padding: .85rem 3.1rem; border-top: 1px solid var(--line-rust-soft); background: linear-gradient(90deg, rgba(53,23,25,.55) 0%, rgba(8,9,10,.75) 60%, rgba(8,9,10,.85) 100%); } .hero-meta .hm-item { font-family: var(--font-body); font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: var(--text-2); } .hero-meta .hm-dim { color: var(--text-dim); margin-left: auto; } @media (max-width: 1080px) { .hero-plate { min-height: 540px; } .hero-copy { padding: 2.8rem 1.8rem 1.8rem 2.2rem; } } @media (max-width: 900px) { .hero { padding-top: 1.2rem; } /* `min-height: 0` let the plate collapse to its content height while the tiled image kept `height:100%`, stretching the photo to a 2.4:1 portrait sliver (caught by ops/responsive-check.py). Keep a real height on the plate. */ .hero-plate { min-height: 460px; } .hero-copy { max-width: none; padding: 2.4rem 1.5rem 1.7rem; } .hero-art::after { background: linear-gradient(180deg, rgba(8,9,10,.88) 0%, rgba(8,9,10,.80) 42%, rgba(8,9,10,.94) 100%), radial-gradient(120% 90% at 50% 30%, rgba(0,0,0,.2) 0%, rgba(0,0,0,.8) 100%); } .hero-meta { padding: .75rem 1.5rem; } .hero-meta .hm-dim { margin-left: 0; } .hero-title { font-size: clamp(2.3rem, 9vw, 3.1rem); } } @media (max-width: 480px) { .hero-plate { min-height: 400px; } } /* ============================================================ HOMEPAGE PROPORTION FIX (reported 2026-09-22) Game Info cover and the "Same town" CRT still were rendering at their native 1920x1080, making both boxes far too tall and throwing the page rhythm off. Constrain both to a fixed, cropped aspect ratio. ============================================================ */ .game-info-cover { aspect-ratio: 16 / 9; max-height: 168px; object-fit: cover; object-position: 50% 42%; filter: saturate(.62) contrast(1.14) brightness(.70); } /* the CRT still in the Transmission panel — was the worst offender vertically */ .transmission .crt-frame { max-height: 300px; } .transmission .crt-frame img { max-height: 300px; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 40%; } @media (max-width: 1080px) { .transmission .crt-frame, .transmission .crt-frame img { max-height: 260px; } } @media (max-width: 900px) { .game-info-cover { max-height: 190px; } .transmission .crt-frame, .transmission .crt-frame img { max-height: 210px; } } /* ---------- FAQ accordion (homepage) ---------- */ .faq-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line-rust-soft); } .faq-item { border-bottom: 1px solid var(--line-soft); border-left: 2px solid transparent; transition: border-left-color 160ms ease; } .faq-item[open] { border-left-color: var(--rust); background: rgba(53,23,25,.22); } .faq-item summary { list-style: none; cursor: pointer; padding: 1.05rem 2.2rem 1.05rem 1.15rem; position: relative; font-family: var(--font-serif); font-size: 1.12rem; line-height: 1.35; color: var(--text); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font-family: var(--font-body); font-size: 15px; color: var(--rust-hi); line-height: 1; } .faq-item[open] summary::after { content: "\2013"; } .faq-item summary:hover { color: var(--rust-hi); } .faq-a { padding: 0 1.6rem 1.25rem 1.15rem; color: var(--body); font-size: .95rem; line-height: 1.72; } .faq-a p { margin: 0 0 .85rem; } .faq-a p:last-child { margin-bottom: 0; } .faq-a code { font-size: .86em; } /* ---------- "On this page" dropdown placement ---------- Wide screens: pinned to the far-right gutter (the article column ends around x=1169 at 1280px, so anything aligned to the toggle covers body copy). Mobile: a full-width sheet BELOW the header — `top: auto` used to drop it on top of the header, hiding the nav entirely (Ada, 2026-09-22). */ @media (min-width: 1400px) { .read-menu { min-width: 260px; max-width: 300px; } } @media (max-width: 1399px) { .read-menu { right: 12px; max-width: 320px; border-color: var(--line-rust); box-shadow: 0 14px 40px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.6); } } @media (max-width: 900px) { /* Full-bleed sheet anchored just under the (sticky) header. */ .read-menu { left: 0; right: 0; max-width: none; max-height: 56vh; border-left: 0; border-right: 0; top: var(--header-h, 78px); } } /* Transmission CRT still: constrain by WIDTH not height, so the 16:9 frame holds its proportions in the constrained column instead of squashing to a 1:1 box. */ .transmission .crt-frame { max-height: none; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; } .transmission .crt-frame img { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; object-fit: cover; object-position: 50% 40%; } /* ---------- How-to-use steps (homepage) ---------- */ .hiw-steps { list-style: none; counter-reset: hiw; padding: 0; margin: 1.1rem 0 1.7rem; display: flex; flex-direction: column; gap: .85rem; } .hiw-steps li { counter-increment: hiw; position: relative; padding: .85rem 1.05rem .85rem 3.1rem; background: rgba(10,10,11,.72); border: 1px solid var(--line-rust-soft); border-left-width: 2px; border-left-color: var(--rust); font-size: .95rem; line-height: 1.68; color: var(--body); } .hiw-steps li::before { content: counter(hiw, decimal-leading-zero); position: absolute; left: 1.05rem; top: .9rem; font-family: var(--font-body); font-size: 11px; letter-spacing: .08em; color: var(--rust-hi); } .hiw-steps li strong { color: var(--text); } /* ============================================================ ARTICLE LINK COLOUR (Ada, 2026-09-22) In-body links must be visibly red at rest, not only on hover — users were missing them entirely. Applies site-wide to article prose only; nav, footer, cards and buttons keep their own treatments. ============================================================ */ .main-content a:not(.btn):not(.card-link):not(.anchor-link), .faq-a a, .quick-answer a, .hiw-steps a, .ci-lede a { color: var(--rust-hi); text-decoration: underline; text-decoration-color: rgba(189, 48, 53, .45); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color 140ms ease, text-decoration-color 140ms ease; } .main-content a:not(.btn):not(.card-link):not(.anchor-link):hover, .faq-a a:hover, .quick-answer a:hover, .hiw-steps a:hover, .ci-lede a:hover { color: #e2494f; text-decoration-color: currentColor; } /* Keep paragraph/table links readable against the red accent panels. */ .tip-box a, .important-box a, .warning-box a, .plate--red a { color: #ff8a8e; } /* ============================================================ HOMEPAGE CHAPTER INDEX (replaces the old "Same town" quote block) ============================================================ */ .chapter-index { margin: 2.4rem 0 1.8rem; } .ci-inner { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 2.2rem; align-items: center; border-top: 1px solid var(--line-rust-soft); padding-top: 2.2rem; } .ci-crt { aspect-ratio: 16 / 10; } .ci-crt img { width: 100%; height: 100%; object-fit: cover; } .ci-strap { margin: .9rem 0 0; font-family: var(--font-serif); font-size: 1.05rem; line-height: 1.5; color: var(--body); } .ci-list h2 { margin: 0 0 .5rem; } .ci-lede { color: var(--text-2); font-size: .95rem; margin: 0 0 1.25rem; max-width: 56ch; } .ci-chapters { list-style: none; padding: 0; margin: 0 0 1.1rem; display: flex; flex-direction: column; } .ci-chapters li { border-bottom: 1px solid var(--line-soft); } .ci-chapters li:first-child { border-top: 1px solid var(--line-soft); } .ci-chapters a { display: grid; grid-template-columns: 2.4rem 1fr auto; align-items: baseline; gap: .9rem; padding: .72rem .3rem; border-left: 2px solid transparent; transition: background 160ms ease, border-left-color 160ms ease; } .ci-chapters a:hover { background: rgba(155,41,46,.13); border-left-color: var(--rust); } .ci-num { font-family: var(--font-body); font-size: 10px; letter-spacing: .18em; color: var(--rust-hi); } .ci-name { font-family: var(--font-serif); font-size: 1.08rem; color: var(--text); } .ci-meta { font-family: var(--font-body); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); } .ci-hub { font-family: var(--font-body); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--rust-hi); } @media (max-width: 900px) { .ci-inner { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; } } /* ============================================================ END-OF-PAGE CTA (homepage) — a proper closing block instead of two loose buttons dropped under the FAQ. ============================================================ */ .end-cta { margin: 2.6rem 0 0; border: 1px solid var(--line-rust); background: linear-gradient(100deg, rgba(53,23,25,.55) 0%, rgba(10,10,11,.9) 62%); padding: 1.9rem 1.7rem; position: relative; } .end-cta::before, .end-cta::after { content: ""; position: absolute; width: 16px; height: 16px; border: 1px solid var(--line-rust); pointer-events: none; } .end-cta::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; } .end-cta::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; } .end-cta-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.8rem; align-items: center; } .end-cta-copy h2 { margin: .35rem 0 .55rem; font-size: clamp(1.35rem, 2.4vw, 1.85rem); } .end-cta-copy p { color: var(--text-2); font-size: .95rem; margin: 0; max-width: 62ch; } .end-cta-actions { display: flex; flex-direction: column; gap: .65rem; } @media (max-width: 900px) { .end-cta-inner { grid-template-columns: minmax(0, 1fr); } .end-cta-actions { flex-direction: row; flex-wrap: wrap; } } /* ============================================================ DRESSMAKER ATELIER LAYER ------------------------------------------------------------ Everything below turns the ported guide layout into the physical world of the game: a walnut sewing desk, cream paper sheets, pinned pattern cards, red thread, stitched rules, brass labels and fabric swatches. It re-skins the palette usage only — layout mechanics (grid, ad rails, TOC, read-bar) stay intact. ============================================================ */ /* ---------- 1. Walnut sewing desk header ---------- */ .site-header { background: repeating-linear-gradient(92deg, rgba(255, 236, 205, 0.035) 0px, rgba(255, 236, 205, 0.035) 1px, transparent 1px, transparent 7px), repeating-linear-gradient(88deg, rgba(0, 0, 0, 0.10) 0px, rgba(0, 0, 0, 0.10) 2px, transparent 2px, transparent 13px), linear-gradient(180deg, #4A352A 0%, #3E2C23 100%); border-bottom: 1px solid var(--brass); box-shadow: 0 2px 0 rgba(180, 134, 63, 0.35), 0 8px 18px rgba(24, 18, 14, 0.30); } .header-inner { border-bottom: 1px solid rgba(135, 145, 122, 0.28); } .brand-mark { color: var(--brass-light); } .brand-top { font-family: var(--font-display); color: var(--paper-highlight); letter-spacing: 0.01em; } .brand-sub { font-family: var(--font-ui); color: var(--brass-light); letter-spacing: 0.22em; text-transform: uppercase; font-size: 10px; } .brand-tag { font-family: var(--font-ui); font-weight: 700; background: var(--sage); color: var(--paper-highlight); border: 1px solid var(--sage-dark); border-radius: 2px; } .header-nav > a, .nav-group-btn { font-family: var(--font-ui); font-weight: 700; color: var(--paper-light); } .header-nav > a:hover, .nav-group-btn:hover, .header-nav > a.active, .nav-group-btn.active { color: var(--brass-light); border-bottom-color: var(--brass); } .nav-drop { background: var(--paper-light); border: 1px solid var(--wood-medium); border-radius: 2px; box-shadow: var(--shadow-paper-lift); } .nav-drop a { font-family: var(--font-ui); color: var(--text); } .nav-drop a:hover { color: var(--rust-ink); background: rgba(217, 131, 103, 0.16); border-left-color: var(--rust); } .nav-drop a.active { color: var(--rust-ink); border-left-color: var(--rust); } .search-toggle, .menu-toggle { background: rgba(231, 221, 195, 0.10); border: 1px solid rgba(203, 166, 91, 0.55); border-radius: 2px; color: var(--paper-light); } .search-toggle:hover, .menu-toggle:hover { border-color: var(--brass-light); color: var(--brass-light); } .read-bar { background: rgba(24, 18, 14, 0.42); border-bottom: 1px solid rgba(180, 134, 63, 0.35); } .read-bar-track { background: rgba(203, 166, 91, 0.25); } .read-bar-fill { background: var(--coral); } .read-jump { font-family: var(--font-ui); color: var(--paper-light); } .read-jump:hover { color: var(--brass-light); } .read-menu { background: var(--paper-light); border: 1px solid var(--wood-medium); border-radius: 2px; box-shadow: var(--shadow-paper-lift); } .read-menu a { font-family: var(--font-ui); color: var(--text); } .read-menu a:hover { color: var(--rust-ink); background: rgba(217, 131, 103, 0.14); } .read-menu a[aria-current="true"] { color: var(--rust-ink); border-left-color: var(--rust); } .search-panel { background: var(--sage-dark); border-bottom: 1px solid var(--brass); } .search-panel label { font-family: var(--font-ui); color: var(--brass-light); } .search-result { background: var(--paper-light); border: 1px solid var(--wood-medium); border-radius: 2px; color: var(--text); } .search-result:hover { color: var(--rust-ink); border-color: var(--rust); } .sr-cat { font-family: var(--font-ui); color: var(--sage-dark); } /* ---------- 2. Article page: paper sheet, red thread ribbon ---------- */ .content-wrapper { position: relative; } .main-content { background: var(--paper); border: 1px solid #8F7E6A; border-radius: 2px; box-shadow: var(--shadow-paper); padding: 2.6rem 2.8rem 3rem; position: relative; } /* red thread down the left edge of the sheet — the pattern-book ribbon */ .main-content::before { content: ""; position: absolute; top: 1.6rem; bottom: 1.6rem; left: 1.05rem; width: 2px; background: linear-gradient(180deg, var(--rust) 0%, var(--rust) 62%, rgba(159, 71, 61, 0) 100%); border-radius: 1px; pointer-events: none; } /* ---------- 3. Typography ---------- */ h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text); letter-spacing: -0.005em; } h1 { font-weight: 700; line-height: 1.12; } h2, h3 { font-weight: 600; } /* stitched rule under H2 — the pattern-sheet divider, used sparingly */ .main-content h2 { position: relative; padding-bottom: 0.55rem; margin-bottom: 1.1rem; } .main-content h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 96px; height: 0; border-top: 1px dashed var(--stitch); } .label, .micro { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; color: var(--text-2); } .label--brass { color: var(--brass-muted); } .label--rust { color: var(--rust-ink); } a { color: var(--rust-ink); } a:hover { color: var(--rust-hi); } /* ---------- 4. Buttons: the game's coral dialogue choice ---------- */ .btn, .hero-btn, .card-link, button.btn-primary { font-family: var(--font-ui); font-weight: 700; } .btn-primary, .hero-btn { background: var(--coral); color: #32251E; border: 2px solid #3A2A22; border-radius: 3px; box-shadow: 0 2px 0 #8F5B45; padding: 0.6rem 1.15rem; display: inline-block; text-decoration: none; transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease; } .btn-primary:hover, .hero-btn:hover { background: var(--coral-light); color: #32251E; transform: translateY(-1px); box-shadow: 0 3px 0 #8F5B45; } .btn-primary:active, .hero-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 #8F5B45; } .btn-ghost, .btn--secondary { background: #EDE2CB; border: 1.5px solid #594438; color: #423329; border-radius: 3px; padding: 0.55rem 1.05rem; display: inline-block; text-decoration: none; transition: transform 160ms ease; } .btn-ghost:hover, .btn--secondary:hover { background: var(--paper-highlight); color: #423329; transform: translateY(-1px); } /* ---------- 5. Cards: pinned pattern envelopes & clipped notes ---------- */ .card, .guide-card, .article-row, .faq-item, .entry-card { background: var(--paper-light); border: 1px solid #95836D; border-radius: 3px; box-shadow: var(--shadow-paper); transition: transform 180ms ease, box-shadow 180ms ease; } .card:hover, .guide-card:hover, .entry-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-paper-lift); } /* sewing-pattern variant: dashed coral outline, like the pattern editor */ .card--pattern, .guide-card--pattern { border: 1px dashed var(--stitch); } /* important card: double rule — solid brown outside, dotted coral inside */ .card--important { border: 1px solid var(--wood-medium); box-shadow: inset 0 0 0 3px var(--paper-light), inset 0 0 0 4px rgba(168, 90, 76, 0.55), var(--shadow-paper); } .guide-card-body, .card h3 a { color: var(--text); } .guide-card-more, .card-link { font-family: var(--font-ui); font-weight: 700; color: var(--rust-ink); } .guide-card-more:hover, .card-link:hover { color: var(--rust-hi); } /* catalogue metadata: GUIDE No. 03 / PATTERN No. 12 */ .card-no, .guide-card-no { font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-muted); } /* ---------- 6. Category labels: small sewn fabric tags ---------- */ .tag, .chip, .micro-tag { font-family: var(--font-ui); font-weight: 700; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; background: #71806A; color: #F4ECD9; border: 1px solid #4D5B4B; border-radius: 2px; padding: 4px 9px; display: inline-block; } .tag--rose { background: #A9705F; border-color: #7E4E41; } .tag--mustard { background: #A08748; border-color: #75602F; } .tag--brown { background: #6B5344; border-color: #4A382D; } .tag--sage { background: #71806A; border-color: #4D5B4B; } .tag--brass { background: #B4863F; border-color: #86622A; color: #2B2116; } /* ---------- 7. Tables: dressmaking measurement charts ---------- */ table { width: 100%; border-collapse: collapse; background: var(--paper-light); } thead th { background: #5F7161; color: #F4ECD9; font-family: var(--font-ui); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid #465949; } tbody td { padding: 0.58rem 0.75rem; border-bottom: 1px solid rgba(53, 39, 32, 0.20); font-size: 0.95rem; vertical-align: top; } tbody tr:nth-child(odd) { background: var(--paper); } tbody tr:nth-child(even) { background: var(--paper-highlight); } tbody tr:hover { background: rgba(217, 131, 103, 0.10); } .table-scroll { overflow-x: auto; border: 1px solid #8F7E6A; border-radius: 2px; background: var(--paper-light); } /* ---------- 8. Callouts: taped notes / stitched pattern paper ---------- */ .tip-box, .info-box, .quick-answer, .warning-box, .note-box { background: var(--paper-highlight); border: 1px solid #8F7E6A; border-left: 4px solid var(--sage); border-radius: 2px; box-shadow: var(--shadow-paper); } .warning-box { border-left-color: var(--stitch); border-style: dashed; border-left-style: solid; } .quick-answer { border: 1px dashed var(--stitch); border-left: 4px solid var(--brass); } .tip-box strong, .info-box strong, .quick-answer strong, .warning-box strong { font-family: var(--font-ui); color: var(--rust-ink); letter-spacing: 0.02em; } /* ---------- 9. Images: photographs clipped into the journal ---------- */ .main-content picture img, .main-content figure img, .main-content img { border-radius: 2px; background: #E8DEC6; border: 1px solid #8D7E6D; padding: 7px; box-shadow: var(--shadow-paper); display: block; max-width: 100%; height: auto; } .img-caption, figcaption { font-family: var(--font-ui); font-size: 13px; color: var(--text-2); margin-top: 0.5rem; padding-bottom: 0.25rem; border-bottom: 1px solid rgba(159, 71, 61, 0.35); display: inline-block; } /* ---------- 10. Separators: stitched, never a grey rule ---------- */ hr { border: 0; border-top: 1px dashed rgba(53, 39, 32, 0.30); margin: 2rem 0; } .section-divider, .divider, .game-divider { border: 0; height: 0; border-top: 1px dashed rgba(53, 39, 32, 0.30); margin: 2.2rem 0; color: var(--brass-muted); } /* ---------- 11. TOC: pinned pattern paper ---------- */ .toc { background: var(--paper-highlight); border: 1px dashed var(--stitch); border-radius: 2px; box-shadow: var(--shadow-paper); } .toc-head, .toc-toggle { font-family: var(--font-ui); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; color: var(--rust-ink); } .toc-body a { color: var(--text-2); } .toc-body a:hover { color: var(--rust-ink); } .toc-toggle { background: transparent; border: 0; cursor: pointer; } /* ---------- 12. In-site link layer ---------- */ .next-steps, .helpful, .page-nav { background: var(--paper-light); border: 1px solid #95836D; border-radius: 2px; box-shadow: var(--shadow-paper); } .next-steps .label, .helpful .label, .page-nav .label { font-family: var(--font-ui); color: var(--brass-muted); letter-spacing: 0.12em; } .next-steps-item strong, .pn-title { color: var(--text); font-family: var(--font-display); } .next-steps-item span { color: var(--text-2); } .helpful button { font-family: var(--font-ui); font-weight: 700; background: #EDE2CB; border: 1.5px solid #594438; border-radius: 3px; color: #423329; cursor: pointer; } .helpful button:hover { background: var(--coral); border-color: #3A2A22; } .helpful button.picked { background: var(--sage); color: #F4ECD9; border-color: var(--sage-dark); } .related-grid .card { background: var(--paper-highlight); } .related-grid .card h3 a { color: var(--text); } /* ---------- 13. Ads: paper slots, labelled, no glow ---------- */ .ad-label { font-family: var(--font-ui); letter-spacing: 0.18em; color: var(--text-dim); } .ad-close { background: transparent; border: 0; color: var(--text-dim); cursor: pointer; } /* ---------- 14. Footer: the lower desk ---------- */ .site-footer { background: repeating-linear-gradient(92deg, rgba(255, 236, 205, 0.030) 0px, rgba(255, 236, 205, 0.030) 1px, transparent 1px, transparent 8px), linear-gradient(180deg, #3E2C23 0%, #2E211A 100%); border-top: 1px solid var(--brass); color: var(--paper-light); } .site-footer .brand-top { color: var(--paper-highlight); } .site-footer .brand-sub { color: var(--brass-light); } .footer-col strong { font-family: var(--font-ui); color: var(--brass-light); letter-spacing: 0.12em; text-transform: uppercase; font-size: 11px; } .footer-col a { color: var(--paper-light); } .footer-col a:hover { color: var(--brass-light); } .footer-brand p, .footer-copy { color: rgba(244, 236, 217, 0.72); } .footer-copy a { color: var(--brass-light); } /* ---------- 15. Database toolbars & filters ---------- */ .db-toolbar { background: var(--paper-highlight); border: 1px solid #8F7E6A; border-radius: 2px; box-shadow: var(--shadow-paper); } .db-search, .db-select { font-family: var(--font-ui); font-size: 14px; background: var(--paper-light); color: var(--text); border: 1.5px solid #594438; border-radius: 3px; padding: 0.45rem 0.7rem; } .db-search:focus, .db-select:focus { outline: 2px solid var(--coral); outline-offset: 1px; border-color: var(--coral); } .db-count { font-family: var(--font-ui); color: var(--text-2); font-size: 13px; } .db-chip { font-family: var(--font-ui); font-weight: 700; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; background: var(--paper-light); color: var(--text-2); border: 1px solid #95836D; border-radius: 2px; padding: 4px 9px; cursor: pointer; } .db-chip:hover { border-color: var(--rust); color: var(--rust-ink); } .db-chip[aria-pressed="true"] { background: #71806A; color: #F4ECD9; border-color: #4D5B4B; } .db-check { cursor: pointer; } .db-check input { cursor: pointer; } tr.row-done { opacity: 0.45; } tr.row-done td { text-decoration: line-through; } /* swatch tiles for fabrics/accessories */ .swatch { width: 22px; height: 22px; border-radius: 2px; border: 1px solid rgba(53, 39, 32, 0.35); display: inline-block; vertical-align: middle; flex-shrink: 0; } .swatch-row { display: flex; gap: 3px; flex-wrap: wrap; align-items: center; } /* ---------- 16. Homepage pieces ---------- */ .hero-frame, .hero-plate { background: var(--paper); border: 1px solid #8F7E6A; border-radius: 2px; box-shadow: var(--shadow-paper-lift); } .hero-kicker { font-family: var(--font-ui); color: var(--brass-muted); letter-spacing: 0.14em; text-transform: uppercase; font-size: 11px; } .hero-sub { font-family: var(--font-ui); color: var(--text-2); } .hero-lede { color: var(--body); } .reg-mark { background: var(--rust); } .hero-meta .hm-item { font-family: var(--font-ui); color: var(--text-2); } .hero-meta .hm-dim { color: var(--text-dim); } .section-head h2 { color: var(--text); } .section-head .micro { font-family: var(--font-ui); color: var(--brass-muted); } .game-info-row dt { font-family: var(--font-ui); color: var(--text-2); letter-spacing: 0.06em; text-transform: uppercase; font-size: 11px; } .game-info-row dd { color: var(--text); } .end-cta { background: var(--paper-highlight); border: 1px solid #95836D; border-radius: 2px; box-shadow: var(--shadow-paper); } .faq-item summary { font-family: var(--font-display); color: var(--text); } .faq-item[open] summary { color: var(--rust-ink); } .article-row .micro { font-family: var(--font-ui); } /* ---------- 17. 404 ---------- */ .notfound { text-align: center; } .notfound .big { color: var(--brass-muted); } /* ---------- 18. Mobile: keep the world, drop only ornament ---------- */ @media (max-width: 900px) { .main-content { padding: 1.6rem 1.2rem 2rem; } /* the thread ribbon needs room; on narrow paper it crowds the text */ .main-content::before { display: none; } .toc { position: static; } } @media (max-width: 640px) { body { font-size: 16px; } .main-content { padding: 1.25rem 0.95rem 1.75rem; } thead th { font-size: 11px; padding: 0.5rem 0.55rem; } tbody td { padding: 0.5rem 0.55rem; font-size: 0.9rem; } } /* ---------- 20. Homepage split: two columns on desktop, one on mobile ---------- The inline grid used to live on the element itself, which meant no breakpoint could collapse it and the game-info column pushed the page 108px wide at a 375px viewport (caught by the viewport gate). The layout is now a class so it can be responsive, and it falls back to a single column before the copy gets cramped. */ .home-split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 3rem; margin-top: 4.2rem; align-items: start; } @media (max-width: 900px) { .home-split { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; } } /* Game-info definition rows must wrap rather than force the column wider. */ .game-info-row { display: flex; gap: 0.6rem; align-items: baseline; } .game-info-row dt { flex: 0 0 auto; min-width: 96px; } .game-info-row dd { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } /* Tables inside a scroll wrapper never widen their parent. */ .table-scroll { max-width: 100%; } .table-scroll > table { min-width: 100%; } /* ---------- 20. Homepage split + game info: responsive, never overflow ---------- The two-column grid used to be declared inline on the element, so no breakpoint could collapse it and the game-info column pushed the document 108px wider than a 375px viewport (caught by the viewport gate). It is now a class with a single-column fallback. */ .home-split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 3rem; margin-top: 4.2rem; align-items: start; } @media (max-width: 900px) { .home-split { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; } } .game-info { background: var(--paper-light); border: 1px solid #95836D; border-radius: 3px; box-shadow: var(--shadow-paper); padding: 1.1rem 1.2rem; } .game-info-row { display: flex; gap: 0.6rem; align-items: baseline; } .game-info-row dt { flex: 0 0 auto; min-width: 92px; } .game-info-row dd { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } /* A scroll wrapper must actually clip: the table inside is allowed to be wider, the wrapper is not. */ .table-scroll { max-width: 100%; overflow-x: auto; }