/* ============================================================================ ARTĀVAN — visual stylesheet, owned by the LOCAL (visual) lane. The glazed-Susa register: a TURQUOISE glazed-brick wall (sampled from the well-lit Louvre Frieze of Archers — field #56757d, per-brick varied courses) framing cream/ vellum tablets in dark ink. Gold-leaf accents, the stepped Persepolis merlon, rosette friezes, the winged disc. Palette + brick variation SAMPLED from handoff/references/persian-art/. Mobile-first. Display face: Cinzel (SIL OFL 1.1, assets/fonts/). Self-authored ornaments: assets/ornament/*.svg. ========================================================================== */ @font-face { font-family: "Cinzel"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("assets/fonts/cinzel-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Cinzel"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("assets/fonts/cinzel-latinext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* glazed turquoise field — SAMPLED from the well-lit Louvre frieze 1505 (#61747b–#6f7d80, cool) */ --field: #56757d; --field-deep: #3e555c; --field-glow: #71909a; /* warm cream surfaces (panels) + vellum (the matter at hand) */ --panel-bg: rgba(245, 238, 223, 0.9); --vellum: #f6efdb; --vellum-edge: #c79a45; --panel-edge: rgba(184, 134, 43, 0.5); --panel-edge-lit: rgba(154, 111, 30, 0.72); --groove: rgba(58, 44, 18, 0.22); /* ink (text) */ --ink: #2a2008; --ink-soft: #5c4a2a; --ink-faint: #695330; /* tertiary / fine print — deepened to clear WCAG AA (~5:1) on vellum (Domesday baseline: lift contrast to ≥4.5:1) */ /* gold leaf + ochre */ --gold: #d9a93a; --gold-soft: #e7c879; --gold-deep: #b8862b; --gold-text: #7a4d0e; /* deep ochre — gold legible as TEXT on light (deepened 23p for contrast) */ --gold-grad: linear-gradient(180deg, #f0d28a 0%, var(--gold) 52%, var(--gold-deep) 100%); --title-grad: linear-gradient(180deg, #f3d68e 0%, #c79328 100%); /* bright gilt for the title on the blue field */ /* signal hues (deepened so they read on light) */ --persian-red: #a8392f; --crimson: #a8392f; --amber: #9a5a12; --green: #3d7d4e; --teal-ink: #2c6f68; --bronze: #9a6a3a; --display: "Cinzel", "Trajan Pro", "Iowan Old Style", Georgia, serif; --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; /* ── ONE type scale, applied across every section (owner 2026-06-22: sizes/styles read messily) ── A small fixed set of roles so the same kind of text is the same size everywhere. LOCAL may retune the values, but please keep each role to ONE size so sections stay visually consistent. */ /* ONE TIGHT TYPE SCALE — just FOUR distinct sizes (owner 2026-06-25 "too many different font sizes here"). The many ROLES are told apart by STYLE — caps + tracking + gold for labels, weight for emphasis, italic for notes — NOT by micro-differences in size (sizes 1px apart read as mistakes). Domesday's discipline: title › body › label/note › fine. KEEP each role pointing at one of these four; don't reintroduce in-between sizes. */ --fs-title: 1.2rem; /* the ONE page/matter title (a dilemma / ending h2) */ --fs-head: 0.85rem; /* section headings (.section-head / world summaries) — small caps-tracked LABELS; the caps + gold + rule carry the weight, not size (= the note size; told apart by style) */ --fs-eyebrow: 0.85rem; /* the small uppercase step-label (THE MATTER BEFORE YOU …) — the same small-label size */ --fs-lead: 0.95rem; /* lead body: a dilemma setup / an option label — = body size, told apart by WEIGHT (bold) */ --fs-body: 0.95rem; /* the ordinary body line: prose, stat lines, journal entries, archive body */ --fs-note: 0.85rem; /* a secondary / italic note: hints, stat-notes, tells, how-we-know */ --fs-fine: 0.76rem; /* fine print: source cites, the build stamp */ /* ONE spacing scale (REVIEWER cyc-121: block margins were hand-set 0.28/0.55/0.6/0.7/0.95rem with no system). Use these for vertical rhythm between blocks/sections so the cadence is even everywhere. */ --sp-1: 0.3rem; /* tight: label→its line */ --sp-2: 0.55rem; /* default: paragraph / within a section */ --sp-3: 0.85rem; /* between blocks within a section */ --sp-4: 1.25rem; /* between sections */ } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { min-height: 100vh; color: var(--ink); font-family: var(--serif); line-height: 1.5; -webkit-text-size-adjust: 100%; background-color: var(--field); /* light stone wall: a soft top glow + warm/cool tonal patches + the varied glazed-brick course */ background-image: url("assets/ornament/brick.svg"), radial-gradient(58% 46% at 14% 8%, rgba(150, 200, 205, 0.16), rgba(0, 0, 0, 0) 70%), radial-gradient(70% 55% at 88% 92%, rgba(38, 70, 86, 0.20), rgba(0, 0, 0, 0) 72%), radial-gradient(125% 85% at 50% -10%, var(--field-glow) 0%, var(--field) 48%, var(--field-deep) 100%); background-repeat: repeat, no-repeat, no-repeat, no-repeat; background-size: 300px 225px, cover, cover, cover; } #scene { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; } #overlay { max-width: 1180px; margin: 0 auto; padding: clamp(0.75rem, 2vw, 1.5rem); } /* clear the fixed bottom tab bar so content isn't hidden behind it */ #overlay { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom)); } /* ── top bar ─────────────────────────────────────────────────────────────── */ .topbar { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.06rem; padding: 0.35rem 0 0.85rem; margin-bottom: 1rem; } .topbar::before { content: ""; position: absolute; top: -0.55rem; left: 50%; transform: translateX(-50%); width: clamp(175px, 43vw, 290px); aspect-ratio: 240 / 104; background: url("assets/ornament/winged-disc.svg") center / contain no-repeat; opacity: 0.3; pointer-events: none; } .topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 11px; background: url("assets/ornament/merlon.svg") repeat-x bottom / auto 100%; opacity: 0.95; } .topbar > div { position: relative; z-index: 1; } .title { font-family: var(--display); font-size: clamp(1.35rem, 4.2vw, 1.9rem); margin: 0; /* owner: masthead was too big — scaled down (was 1.75–2.6rem) */ letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; line-height: 1.04; color: #7a4f12; } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .title { background: var(--title-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); } } .subtitle { margin: 0.26rem 0 0; color: #e9eff0; font-size: var(--fs-head); letter-spacing: 0.02em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); } .station { margin: 0.12rem 0 0; color: #f1d99e; font-size: var(--fs-note); font-style: italic; letter-spacing: 0.02em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); } .build { margin: 0; font-size: var(--fs-fine); color: #d6e4e4; opacity: 0.72; white-space: nowrap; position: absolute; top: 0.15rem; right: 0; z-index: 1; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); } /* the build stamp shown statically at the foot of an info screen (the start page + the How-to-Play "about") rather than over the in-game title — owner 2026-06-23: it was colliding with the masthead. */ .build-foot { margin: 1.1rem 0 0; font-size: var(--fs-fine); color: #cfe0e0; opacity: 0.75; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } /* title-screen footer: copyright bottom-left, build bottom-right (owner 2026-06-25; CLOUD baseline, @LOCAL to match Domesday) */ /* pinned to the VIEWPORT bottom (owner 2026-06-25: "should be pinned to bottom of screen not float when you scroll") — copyright bottom-left, build bottom-right, full-width like Domesday's. pointer-events:none so the bar never blocks a control beneath it; the .title-screen carries extra bottom padding so content clears it when scrolled down. LIFTED clear of the iOS home-indicator / curved-corner crop (owner 2026-06-25: "being truncated by the curved iPhone screen") via the safe-area inset (viewport-fit=cover is set), with a touch of horizontal inset for the curved sides. */ /* owner 2026-06-25 iterated DOWN repeatedly: sit it near the very bottom edge. The copyright/build are at the bottom CORNERS and the home-indicator is centre-bottom, so the safe-area-bottom lift isn't needed here and only floated the line up — dropped it for a small fixed offset. The slight horizontal indent still clears the curved corners. owner 2026-06-26: lifted VERY slightly (0.3→0.6rem) — at the bottom CORNERS the curved-screen radius was clipping the copyright/build text; a touch more bottom offset clears the curve without floating the line up. */ .title-foot { position: fixed; left: 0; right: 0; bottom: 0.6rem; z-index: 5; pointer-events: none; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.4rem calc(1.05rem + env(safe-area-inset-right, 0px)) 0 calc(1.05rem + env(safe-area-inset-left, 0px)); font-size: var(--fs-fine); color: #cfe0e0; opacity: 0.72; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .title-copyright, .title-build { white-space: nowrap; } /* ── tabs ────────────────────────────────────────────────────────────────── */ /* Bottom-pinned tab bar (owner: Domesday/app-style). CLOUD baseline; LOCAL refined the fit (2026-06-22): vw-scaled label, tighter spacing/line-height so the 4 labels stay compact & even on narrow phones. */ .tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; margin: 0; display: flex; gap: 0.24rem; justify-content: center; flex-wrap: nowrap; padding: 0.35rem clamp(0.25rem, 1.2vw, 0.8rem) calc(0.35rem + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(46, 60, 64, 0.92), rgba(28, 40, 44, 0.97)); border-top: 1px solid var(--panel-edge-lit); box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.3); } .tab { flex: 1 1 0; min-width: 0; max-width: 13rem; display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--display); background: linear-gradient(180deg, #efe4ca, #e2d4b4); color: var(--ink); border: 1px solid var(--panel-edge); border-radius: 8px; padding: 0.34rem 0.1rem; gap: 0; min-height: 44px; cursor: pointer; font-size: clamp(0.6rem, 2.7vw, 0.72rem); letter-spacing: 0; line-height: 1.06; text-transform: uppercase; /* single-word labels (ui.js) → raise the floor off 8px to ~9.6px @320px (owner: legible nav) */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); transition: background 0.12s, color 0.12s; } .tab:hover { background: linear-gradient(180deg, #f5ecd6, #e9dcbf); } .tab-active { background: var(--gold-grad); color: var(--ink); border-color: var(--gold-soft); font-weight: 700; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); } /* ── layout ──────────────────────────────────────────────────────────────── */ .layout { display: flex; flex-direction: column; gap: 1rem; } @media (min-width: 920px) { .layout { display: grid; grid-template-columns: 252px minmax(0, 1fr) 296px; align-items: start; gap: 1.25rem; } } section { margin: 0; } h2 { font-family: var(--display); color: var(--gold-text); margin: 0 0 0.55rem; font-size: var(--fs-title); font-weight: 600; letter-spacing: 0.02em; } h3 { font-family: var(--display); color: var(--gold-text); margin: 0.55rem 0 0.38rem; font-size: var(--fs-head); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; /* tracked like a Domesday section-label, so h3 reads a clear step BELOW the tighter h2 page-title (ls 0.02em) — hierarchy by tracking+colour-register, not size */ padding-bottom: 0.26rem; border-bottom: 1px solid rgba(184, 134, 43, 0.26); /* LOCAL Domesday pass 2026-06-24: a quieter hairline + tighter rhythm (owner: heads were "disruptive across all tabs"); size already scaled by CLOUD 23z24 */ } /* a warm cream panel — carved-tablet feel */ .stat-group, .policies, .journal, .course { position: relative; background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 22%), var(--panel-bg); border: 1px solid var(--panel-edge); border-radius: 9px; padding: 0.75rem 0.85rem; box-shadow: inset 0 0 0 1px rgba(184, 134, 43, 0.16), 0 2px 10px rgba(60, 44, 20, 0.22); } /* ── status / stats ──────────────────────────────────────────────────────── */ .status { display: flex; flex-direction: column; gap: 0.9rem; } .stat-note { margin: 0 0 var(--sp-2); font-size: var(--fs-note); color: var(--ink-soft); font-style: italic; } /* Readout views (.world / .codex / .chronicle) print their section title + intro + category / year headers DIRECTLY on the turquoise field, where the dark ochre/ink (meant for vellum cards) is illegible — make those LIGHT (soft-gold + shadow, like the title). Direct-child scoping keeps the vellum cards' own text dark-on-cream. (LOCAL — owner legibility fix, 2026-06-22.) */ .world > h2, .codex > h2, .chronicle > h2 { color: var(--gold-soft); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); } /* the YEAR headers + Archive category heads sit on the turquoise field → light gold + shadow. The chronicle ENTRY titles (.chron-realm-head) live INSIDE cream .chron-entry panels, so they must be DEEP gold, not the light field-gold (the 23p "gold titles hard to read" fix — they were wrongly lumped with the field heads). */ .archive-cat-head, .chron-year-head { color: var(--gold-soft); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); border-bottom-color: rgba(217, 169, 58, 0.45); } .world > .stat-note, .codex > .stat-note, .chronicle > .stat-note { color: #dde9e9; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } .stat { display: grid; grid-template-columns: 4.4rem 1fr 2rem; align-items: center; gap: 0.45rem; margin: 0.32rem 0; } .stat-label { font-size: var(--fs-body); color: var(--ink); } .stat-track { height: 0.64rem; background: var(--groove); border-radius: 5px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); } .stat-fill { display: block; height: 100%; border-radius: 5px; background: var(--gold-grad); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); transition: width 0.35s ease; } .stat-val { font-size: var(--fs-body); text-align: right; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .stat-favour { background: var(--gold-grad); } .stat-might { background: linear-gradient(180deg, #c98a4a, var(--bronze)); } .stat-suspicion { background: linear-gradient(180deg, #c4554a, var(--crimson)); } .stat-order { background: linear-gradient(180deg, #5fa873, var(--green)); } .stat-grain { background: linear-gradient(180deg, #e0bd63, #c69a3e); } .stat-treasury { background: linear-gradient(180deg, #c2c7cf, #9aa0a9); } .stat-irrigation { background: linear-gradient(180deg, #5aa6c4, #3f86a4); } .stat-danger .stat-label { color: var(--crimson); font-weight: 700; } .stat-danger .stat-fill { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 7px rgba(168, 57, 47, 0.6); } .stat-line { font-size: var(--fs-body); color: var(--ink); margin: 0.28rem 0; } /* ── the dilemma + options (vellum — the matter before you) ───────────────── */ .main-col { display: flex; flex-direction: column; gap: 1rem; } .dilemma, .ending { position: relative; background: radial-gradient(140% 120% at 0% 0%, #fbf5e3 0%, var(--vellum) 55%, #ecdfc2 100%); color: var(--ink); border: 1px solid var(--vellum-edge); border-radius: 11px; padding: 1.5rem 1.15rem 1.15rem; box-shadow: inset 0 0 0 2px rgba(184, 134, 43, 0.34), 0 6px 18px rgba(60, 44, 20, 0.28); } .dilemma::before, .ending::before { content: ""; position: absolute; left: 0.9rem; right: 0.9rem; top: 0.5rem; height: 13px; background: url("assets/ornament/rosette-frieze.svg") repeat-x center / auto 100%; opacity: 0.92; } .dilemma h2, .ending h2 { color: #7a4612; letter-spacing: 0.01em; padding-bottom: 0.45rem; margin-bottom: 0.7rem; border-bottom: 1.5px solid rgba(122, 70, 18, 0.3); } .setup { font-family: var(--serif); font-size: var(--fs-lead); line-height: 1.55; margin: 0 0 0.95rem; color: var(--ink); } /* the BIND cue (audit C2): a quiet in-world reminder of the King's wariness / a moving rival, shown inside the matter modal only when the bind is live. Subdued (small italic, a thin amber rule) so it frames the choice without shouting. (@LOCAL: tone is yours to refine.) */ .bind-cue { font-style: italic; font-size: 0.84rem; line-height: 1.4; color: var(--ink-soft); margin: -0.45rem 0 0.85rem; padding-left: 0.55rem; border-left: 2px solid var(--gold-deep); } .options { display: flex; flex-direction: column; gap: 0.55rem; } /* CENTRALISED action-button spacing (owner 2026-06-26: "unify action-button styling across the game, centralised not per-section; works had gaps, acts didn't — the tight acts look is better"). The in-SECTION action buttons (works + acts, both `.option` buttons in `.options` inside a world-section) share ONE tight gap; the MATTER (the set-piece decision, `.dilemma .options`) keeps its roomier spacing. Typography is already shared (.option-label/-hint/-cost). */ .world-section .options { gap: 0.3rem; } .option { position: relative; /* anchor for the top-right ⓘ "from the record" badge */ display: flex; flex-direction: column; gap: 0.16rem; text-align: left; background: linear-gradient(180deg, #fffaf0, #f6ead2); color: var(--ink); border: 1.5px solid #c79a45; border-left-width: 4px; border-radius: 8px; padding: 0.62rem 2.1rem 0.62rem 0.8rem; min-height: 44px; cursor: pointer; font-family: var(--serif); /* extra right pad reserves room for the ⓘ */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); transition: background 0.12s, border-color 0.12s, transform 0.06s, box-shadow 0.12s; } /* the option's "from the record" ⓘ sits TOP-RIGHT of the box and reads as a clear, tappable badge (owner 2026-06-25: "move the ⓘ to top right of the box and make it more legible"). @LOCAL: verify the tap-floor + the exact tone. */ .option > .note-info { position: absolute; top: 0.4rem; right: 0.4rem; margin: 0; width: 1.7rem; height: 1.7rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; line-height: 1; opacity: 1; color: var(--gold-deep); background: rgba(199, 154, 69, 0.18); border: 1px solid rgba(199, 154, 69, 0.6); border-radius: 50%; } .option > .note-info:hover, .option > .note-info:focus-visible { background: rgba(199, 154, 69, 0.34); color: var(--gold-text); border-color: var(--gold-deep); } .option:hover { background: linear-gradient(180deg, #fff3da, #f3e1bf); border-left-color: var(--gold-deep); box-shadow: 0 2px 8px rgba(122, 70, 18, 0.22); } .option:active { transform: translateY(1px); } /* a GATED option is shown but CLOSED (e.g. a ransom you cannot afford): muted + inactive, but its label and its "why" stay legible (we grey via colour, NOT opacity — opacity would dim the reason into illegibility). */ .option[disabled] { cursor: not-allowed; box-shadow: none; background: #ece4d2; border-left-color: #c4b89a; } .option[disabled]:hover { background: #ece4d2; border-left-color: #c4b89a; box-shadow: none; } .option[disabled] .option-label, .option[disabled] .option-hint { color: var(--ink-soft); } .option-label { font-weight: 700; font-size: var(--fs-lead); } .option-hint { font-size: var(--fs-body); color: var(--ink-soft); } /* the TELL is the primary consequence line — body size, not note (REVIEWER cyc-121 P2.4) */ /* the ACT cost meta ("Spends coin and an act") — a quiet sub-line under the act, set apart from the flavour (owner 2026-06-24: smaller, italic, a different colour). @LOCAL may refine the tone. */ /* THE COST LINE — ONE shared treatment across matter-options, works AND acts (owner 2026-06-26: "standardise how cost is shown on all buttons; not capitalised — normal font, italic, bold, a different colour"). Italic + semibold + a gold accent, NEVER small-caps. Only the COLOUR shifts by background (gold-deep on the vellum; light gilt on the blue act). */ .option-cost { display: block; margin-top: 0.2rem; font-size: var(--fs-fine); font-style: italic; font-weight: 600; color: var(--gold-deep); letter-spacing: 0.01em; } /* the reason a gated option is CLOSED (e.g. coffers too empty to pay a ransom) — the operative "why", in the game's own oxblood "needs heed" tone so it reads clearly as a block, not as more flavour. */ .option-blocked { display: block; margin-top: 0.25rem; font-size: var(--fs-fine); font-weight: 600; color: #7a241d; } /* ── ACTS OF THE HOUSE — their OWN class so they size + colour APART from the vellum matter-options (owner 2026-06-25: "act buttons too big + need a standout colour to lift them off the vellum", floated blue/red). Filled rubric-red tiles in Domesday's .btn-primary register (the King's-court red), more COMPACT than the matter tablet. Acts carry no ⓘ → no right-pad reserve. KEEPS Artāvan's gold/vellum scheme around them. ── */ .act-btn { background: linear-gradient(180deg, #52727a, #3b5862); /* a deep teal-blue, kin to the --field tile background — "in keeping", not jarring (owner 2026-06-25: oxblood too jarring, "blue like the tile") */ border: 1px solid #243b42; border-left: 4px solid var(--gold-deep); border-radius: 7px; color: #f2ecda; padding: 0.5rem 0.78rem; gap: 0.1rem; } .act-btn .option-label { color: #fbf4dd; font-size: var(--fs-body); } /* a touch smaller than the matter-option label (fs-lead) — the acts are quieter than the matter */ .act-btn .option-hint { color: #dce7e5; font-size: var(--fs-note); } /* the diegetic tell, legible light on the blue */ /* the act cost-line shares the ONE cost treatment (.option-cost: italic, semibold, fs-fine, no caps); only the COLOUR differs of necessity — the light gilt reads on the blue act button where the works' dark gold-deep reads on cream. */ .act-btn .option-cost { color: #ecca84; } .act-btn:hover { background: linear-gradient(180deg, #5a7c84, #41616b); border-left-color: var(--gold); box-shadow: 0 2px 9px rgba(36, 59, 66, 0.42); } .act-btn:active { transform: translateY(1px); } .act-btn[disabled] { opacity: 0.5; cursor: not-allowed; box-shadow: none; } /* the WORK IN HAND's named work ("Caravanserai") — a bold serif NAME, distinct from its uppercase section LABEL above it, so the two headings no longer collide in the same style (owner 2026-06-25). */ .work-title { display: block; font-family: var(--serif); font-weight: 700; font-size: var(--fs-lead); color: var(--gold-text); margin: 0; letter-spacing: 0.005em; } /* the work-in-hand label sits in a .kin-entry card, so the parent's gap spaces it (margin:0); 0.95rem is fine CONTAINED, as .kin-name is */ /* ── the two-step decision: section eyebrows, framing notes, locked state ──── */ /* (CLOUD baseline for the owner's "This Month" legibility pass, 2026-06-22 — LOCAL to harmonise the look between the readout / course / matter; see COORDINATION.) */ .step-eyebrow { font-family: var(--serif); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 0.35rem; } /* the matter / work title — the SAME hero display face + size as the section heads (h3), so headings read as ONE consistent register, not a serif title towering over Cinzel section heads (owner 2026-06-23, "consistent hero font; the matter title is too large"). The eyebrow above it ("The matter before you") cues prominence. */ .section-head { font-family: var(--display); font-size: var(--fs-head); color: var(--gold-text); font-weight: 600; letter-spacing: 0.06em; } /* tracked section-label register (Domesday baseline), distinct from the h2 title */ .step-note { font-family: var(--serif); font-size: var(--fs-note); line-height: 1.5; font-style: italic; color: var(--ink-soft); margin: 0 0 0.7rem; } /* The standing-course banner renders on the turquoise field (above the matter tablet), so its text must be LIGHT — and the "Change course" affordance was the browser-default white pill; make it a themed vellum/gold pill in the display face. (LOCAL — owner legibility + theming fix, 2026-06-22.) */ .course .step-eyebrow { color: var(--gold-deep); } .course-current { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem 0.7rem; margin: 0.1rem 0 0.35rem; } .course-label { font-size: var(--fs-lead); font-weight: 700; color: var(--gold-deep); } .course-tell { margin: 0; font-size: var(--fs-note); color: var(--ink-soft); font-style: italic; line-height: 1.5; } .course-change { font-family: var(--display); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); background: linear-gradient(180deg, #ece0c6, #ddcdaa); border: 1px solid var(--gold-soft); border-radius: 999px; padding: 0.3rem 0.8rem; min-height: 34px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 5px rgba(0, 0, 0, 0.28); transition: background 0.12s, border-color 0.12s, transform 0.06s; } .course-change:hover { background: linear-gradient(180deg, #f2e7cf, #e3d4b3); border-color: var(--gold); } .course-change:active { transform: translateY(1px); } .locked-note { font-family: var(--serif); font-size: var(--fs-note); line-height: 1.45; color: #8a5a1a; background: rgba(184, 134, 43, 0.12); border-left: 3px solid var(--gold-soft); padding: 0.5rem 0.65rem; border-radius: 6px; margin: 0 0 0.8rem; } .dilemma-locked .options { opacity: 0.55; } /* ── policies (your house's course) — match the option buttons: full-width, even, same type ──── */ .policy-row { display: flex; flex-direction: column; gap: 0.55rem; } .policy { display: flex; flex-direction: column; gap: 0.16rem; text-align: left; background: linear-gradient(180deg, #ece0c6, #ddcdaa); color: var(--ink); border: 1.5px solid var(--panel-edge); border-left-width: 4px; border-radius: 8px; padding: 0.62rem 0.8rem; min-height: 44px; cursor: pointer; font-family: var(--serif); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55); transition: background 0.12s, border-color 0.12s, transform 0.06s, box-shadow 0.12s; } .policy:hover { background: linear-gradient(180deg, #f2e7cf, #e3d4b3); border-color: var(--panel-edge-lit); } .policy:active { transform: translateY(1px); } .policy-selected { background: var(--gold-grad); color: var(--ink); border-color: var(--gold-soft); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 0 1px var(--gold-soft), 0 3px 10px rgba(184, 134, 43, 0.35); } .policy-label { font-weight: 700; font-size: var(--fs-lead); } .policy-hint { font-size: var(--fs-note); color: var(--ink-soft); line-height: 1.4; } .policy-selected .policy-hint { color: #5a4216; } /* ── the month-step (a quiet month) — the affordance to let the season run on when no matter presses. A calmer cousin of the matter tablet: the same vellum, but softer (no rosette frieze, lighter frame), so a quiet month reads as a pause rather than a decision. (LOCAL — owner's month-paced advance, 2026-06-22.) */ .advance { background: radial-gradient(140% 120% at 0% 0%, #f8f1df 0%, var(--vellum) 60%, #ece0c4 100%); color: var(--ink); border: 1px solid var(--vellum-edge); border-radius: 11px; padding: 1.15rem 1.15rem 1.2rem; text-align: center; box-shadow: inset 0 0 0 1px rgba(184, 134, 43, 0.22), 0 4px 14px rgba(60, 44, 20, 0.2); } .advance .step-eyebrow { font-size: var(--fs-head); font-weight: 600; text-transform: none; letter-spacing: 0.02em; color: var(--gold-text); margin-bottom: 0.5rem; } /* "The month turns" reads as a section head, not a tiny eyebrow (owner: "too small") */ .advance .step-note { max-width: 34rem; margin: 0 auto 1rem; } .advance-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; font-family: var(--serif); font-weight: 600; font-size: var(--fs-lead); letter-spacing: 0.01em; color: var(--ink); background: var(--gold-grad); border: 1.5px solid var(--gold-soft); border-radius: 8px; padding: 0.6rem 1.3rem; min-height: 44px; cursor: pointer; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 8px rgba(184, 134, 43, 0.3); transition: background 0.12s, border-color 0.12s, transform 0.06s, box-shadow 0.12s; } .advance-btn:hover { background: linear-gradient(180deg, #f5dd9c, var(--gold) 55%, var(--gold-deep)); border-color: var(--gold); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 3px 11px rgba(184, 134, 43, 0.42); } .advance-btn:active { transform: translateY(1px); } @media (prefers-reduced-motion: reduce) { .advance-btn { transition: none; } } .turn-hint { font-size: var(--fs-note); color: #f1d99e; font-style: italic; margin: 0.3rem 0.2rem 0; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } /* ── journal ─────────────────────────────────────────────────────────────── */ /* .journal now FLOWS in the page (no nested scroll): a capped overflow-y made the scroll "jerk" at the end of the events text and need a second scroll to move the page on (owner 2026-06-25). The page itself is the scroll. */ .journal ul { list-style: none; margin: 0; padding: 0; } .log { font-size: var(--fs-body); margin: 0 0 0.6rem; padding: 0 0 0.6rem 0.6rem; color: var(--ink); border-left: 2px solid transparent; border-bottom: 1px solid rgba(184, 134, 43, 0.2); } .log:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } /* same-month events flow together with no dividing line between them (owner 2026-06-25); dividers stay at month boundaries */ .log.log-cont { border-bottom: none; margin-bottom: 0.3rem; padding-bottom: 0.15rem; } .log-fact { color: var(--gold-text); border-left-color: rgba(184, 134, 43, 0.6); } .fact-mark { color: var(--gold-deep); font-style: normal; } /* the "how we know" disclosure — the scholarly apparatus tucked behind a click (owner: events lead). */ .fact-note { margin: 0; } .fact-summary { cursor: pointer; list-style: none; font-family: var(--serif); font-size: var(--fs-note); letter-spacing: 0.02em; color: var(--gold-deep); /* functional toggle = readable serif, not Cinzel (REVIEWER cyc-121 P2.5) */ } .fact-summary::-webkit-details-marker { display: none; } .fact-summary::marker { content: ""; } .fact-body { margin: 0.35rem 0 0; font-size: var(--fs-note); font-style: italic; color: var(--gold-text); line-height: 1.5; } /* "Earlier events" — the prior decisions' events, folded away so the latest reads cleanly (owner). */ .earlier-events { margin: 0.4rem 0 0; border-top: 1px solid var(--panel-edge); padding-top: 0.4rem; } /* "Earlier events" as a tappable SECTION-LABEL with a ▸/▾ triangle, matching Domesday's "Earlier days" + the game's other section headings (owner 2026-06-25; the headings are small/quiet now, so a caps label no longer competes). */ .earlier-summary { cursor: pointer; list-style: none; font-family: var(--display); font-size: var(--fs-head); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-deep); } .earlier-summary::-webkit-details-marker { display: none; } .earlier-summary::marker { content: ""; } .earlier-summary::before { content: "▸ "; } .earlier-events[open] > .earlier-summary::before { content: "▾ "; } .earlier-events ul { margin: 0.5rem 0 0; padding: 0; list-style: none; opacity: 0.85; } /* the EMPIRE MAP + DYNASTY TREE graphics (owner 2026-06-22) — SVG framed on a faint vellum field. LOCAL to refine the art; this is the structural baseline. */ .empire-map, .dynasty-tree { margin: 0.55rem 0 0.2rem; background: radial-gradient(120% 120% at 50% 0%, #fbf5e3, var(--vellum) 70%, #ecdfc2); border: 1px solid var(--vellum-edge); border-radius: 9px; padding: 0.4rem 0.5rem; box-shadow: inset 0 0 0 1px rgba(184, 134, 43, 0.18); } .empire-map svg, .dynasty-tree svg { font-family: var(--serif); } .map-readout .empire-map { margin-top: 0.7rem; } /* labels sit OVER the connecting lines: a filled vellum PLATE is drawn behind each (svgLabel in ui.js), so even the inter-word gaps mask the line (owner: "text is behind lines"). A thin glyph halo on top keeps the un-plated symbols (⚔ ♛) crisp over the land. */ .empire-map svg text, .dynasty-tree svg text { paint-order: stroke; stroke: var(--vellum); stroke-width: 0.9; stroke-linejoin: round; } /* labels drawn on a PLATE (the kin pills, city/seat plates) skip the vellum halo — the plate already gives contrast, and the cream stroke muddied the gold-on-blue kin names (owner 2026-06-27). Region/sea labels keep their halo. */ .empire-map svg text.on-plate, .dynasty-tree svg text.on-plate { stroke: none; } /* sub-tabs within a readout (the Archive's sections; Domesday-style) */ /* SMALLER category pills, Domesday-style (owner 2026-06-24 "smaller category buttons"; tightened further 2026-06-25 "smaller / take less room") — fine type, tight padding, a pill radius; the content row sits close above the divided meta row below. */ .subtabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem 0.3rem; margin: 0.05rem 0 0.3rem; } /* TWO per row (owner 2026-06-25 "two buttons per row, takes too much vertical space") */ .subtab { justify-content: center; text-align: center; } .subtab { font-family: var(--display); font-size: 0.7rem; letter-spacing: 0.01em; background: linear-gradient(180deg, #efe4ca, #e2d4b4); color: var(--ink); border: 1px solid var(--panel-edge); border-radius: 999px; padding: 0.08rem 0.46rem; min-height: 22px; cursor: pointer; line-height: 1.1; } .subtab-active { background: var(--gold-grad); border-color: var(--gold-soft); font-weight: 700; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); } /* per-section progress on each Archive sub-tab (Domesday scholarly apparatus): how many of the section's entries you have met in play (✦) out of its total. */ .subtab-count { margin-left: 0.3rem; opacity: 0.6; font-variant-numeric: tabular-nums; } .subtab-active .subtab-count { opacity: 0.8; } /* the Archive search box + the meta-tab separator (CLOUD baseline 2026-06-23, owner live-review; @LOCAL may restyle) — Domesday's "search + chips + How to Play/How we know folded into the reference book". */ .archive-search { margin: 0.1rem 0 0.6rem; } .archive-search-input { width: 100%; box-sizing: border-box; font-family: var(--serif); font-size: var(--fs-body); color: var(--ink); background: #fbf5e3; border: 1px solid var(--panel-edge); border-radius: 7px; padding: 0.45rem 0.7rem; min-height: 40px; } .archive-search-input::placeholder { color: var(--ink-faint); font-style: italic; } .archive-search-input:focus { outline: none; border-color: var(--gold-soft); box-shadow: 0 0 0 2px rgba(184, 134, 43, 0.25); } /* the META / reference tabs (How to Play · How we know) sit on their OWN row, divided by a dashed rule and styled in a cool "out-of-world" slate — set apart from the warm gold in-world content pills, so they don't read like the historical sections (owner 2026-06-24: "meta sections divided by a separator and shown differently" — Domesday's two-row Codex idiom; @LOCAL may retune the slate to taste). */ .subtabs-meta { margin: 0 0 0.85rem; padding-top: 0.5rem; border-top: 1px dashed rgba(63, 90, 102, 0.5); } .subtab-meta { background: rgba(63, 90, 102, 0.08); border-color: rgba(63, 90, 102, 0.55); border-style: dashed; color: #3a5663; } .subtab-meta.subtab-active { background: #3f5a66; border-color: #2f4858; border-style: solid; color: #f6efdb; font-weight: 700; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); } .archive-meta { margin-top: 0.2rem; } /* the EMPIRE MAP controls (owner 2026-06-22): zoom buttons, a legend/key, clickable places → lore popup */ .map-readout { position: relative; } .map-tools { display: flex; gap: 0.4rem; justify-content: flex-end; margin: 0 0 0.3rem; } .map-zoom { min-width: 40px; min-height: 40px; font-size: 1.2rem; line-height: 1; font-family: var(--serif); cursor: pointer; border: 1px solid var(--panel-edge); border-radius: 7px; color: var(--ink); background: linear-gradient(180deg, #efe4ca, #e2d4b4); } .map-place { cursor: pointer; } .map-legend { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; margin: 0.5rem 0 0.1rem; font-size: var(--fs-note); color: var(--ink-soft); } .legend-sym { color: var(--gold-deep); font-weight: 700; } .map-popup { position: absolute; left: 0.6rem; right: 0.6rem; bottom: 0.6rem; background: radial-gradient(140% 120% at 0% 0%, #fbf5e3, var(--vellum) 60%, #ecdfc2); border: 1px solid var(--vellum-edge); border-radius: 9px; padding: 0.7rem 0.9rem; box-shadow: 0 6px 20px rgba(18, 18, 12, 0.4); } .map-popup-title { font-family: var(--display); font-size: var(--fs-head); color: var(--gold-text); margin: 0 0 0.3rem; } .map-popup-body { font-size: var(--fs-body); color: var(--ink); margin: 0; line-height: 1.5; } .map-popup-close { position: absolute; top: 0.25rem; right: 0.4rem; border: none; background: none; font-size: 1.3rem; cursor: pointer; color: var(--ink-soft); min-width: 40px; min-height: 40px; } .log-decision { color: #1c1505; font-weight: 400; } /* the decision-result is a multi-sentence VIGNETTE — regular weight reads as prose; the dark ink marks it as YOUR act (the left rule was visual clutter, dropped — owner 2026-06-24) */ /* the diegetic "what your choice changed" line, set with the decision's events (owner 2026-06-28, player feedback). A subtle gilt panel below "The Passing Days", distinct from the vignette prose. @LOCAL may restyle to taste. */ .what-changed { font-size: var(--fs-note); font-style: italic; color: var(--ink-soft); margin: 0 0 0.7rem; padding: 0.45rem 0.6rem; background: rgba(199, 154, 69, 0.1); border-left: 2px solid var(--gold-deep); border-radius: 4px; line-height: 1.5; } .log-policy { color: var(--ink-soft); } .log-event, .log-chronicle { color: var(--teal-ink); } .log-warning { color: var(--amber); border-left-color: rgba(154, 90, 18, 0.6); } .log-ending { color: var(--crimson); font-weight: 700; border-left-color: var(--crimson); } /* ── codex & chronicle ───────────────────────────────────────────────────── */ .codex, .chronicle { max-width: 760px; } .codex-entry, .chron-entry { position: relative; background: var(--panel-bg); color: var(--ink); border: 1px solid var(--panel-edge); border-left: 3px solid var(--gold-deep); border-radius: 8px; padding: 0.7rem 0.9rem; margin: 0.7rem 0; box-shadow: 0 2px 8px rgba(60, 44, 20, 0.18); } .codex-entry h3, .chron-entry h3, .chron-realm-head { font-family: var(--display); color: var(--gold-text); text-transform: none; letter-spacing: 0.01em; font-size: var(--fs-head); font-weight: 600; border-bottom: none; padding-bottom: 0; margin-bottom: 0.3rem; text-shadow: none; } .codex-seen { border-left-color: var(--gold); background: linear-gradient(180deg, #fbf4e2, #f3e8cf); } .codex-body { margin: 0.3rem 0; font-size: var(--fs-body); color: var(--ink); } .codex-how { margin: 0.3rem 0; font-size: var(--fs-note); color: var(--ink-soft); font-style: italic; } .codex-src { margin: 0.2rem 0 0; font-size: var(--fs-fine); color: var(--ink-faint); } /* an optional "read the full source in translation" link on an entry (owner 2026-06-26, the Behistun text). A clear, gold, solid-underlined call-to-action set apart from the muted citation line above it; the label carries a ↗ cue. */ .codex-link { margin: 0.4rem 0 0.1rem; font-size: var(--fs-note); } .codex-link-a { font-family: var(--serif); color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; } .codex-link-a:hover { color: var(--ink); } .chron-approx { border-left-color: var(--amber); } .chron-contested { border-left-color: var(--crimson); } /* ── ending ──────────────────────────────────────────────────────────────── */ .ending .legacy { font-size: 1.18rem; font-weight: 700; color: #7a4612; margin: 0.85rem 0; } .ending .policy-selected { display: inline-block; margin-top: 0.4rem; } /* THE JOURNEY REPORT (sim/journey.js) — the differentiated retrospective at the close. Baseline only: a little breathing room + a faint left rule to read as one "account". @LOCAL: give it the Domesday end-report treatment (the .journey-para paragraphs are the body; the final one is the manner-of-the-end close). */ .journey-report { margin: 0.6rem 0 0.4rem; padding-left: 0.7rem; border-left: 2px solid rgba(122, 70, 18, 0.22); } .journey-report .journey-para:last-child { margin-bottom: 0.2rem; } /* ── title / splash screen ───────────────────────────────────────────────── */ .title-screen { position: relative; max-width: 640px; margin: 2.5vh auto 0; text-align: center; padding: 0.7rem 1rem calc(3.2rem + env(safe-area-inset-bottom, 0px)); } /* tighter top so the masthead emblem doesn't push the actions far below the fold; bottom pad clears the pinned .title-foot, which now sits above the iOS safe-area inset (owner 2026-06-25) */ .title-screen::before { content: ""; display: block; width: clamp(130px, 40vw, 206px); aspect-ratio: 530 / 250; margin: 0 auto 0.25rem; /* the AUTHENTIC Achaemenid winged symbol on the masthead (owner 2026-06-25) — the Persepolis form the modern "Faravahar" is drawn from; gold reads against the blue field, the drop-shadow lifts it. CC BY-SA 3.0, see CREDITS. */ background: url("assets/faravahar.svg") center / contain no-repeat; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45)); } .title-big { font-family: var(--display); font-size: clamp(2.6rem, 12vw, 5rem); margin: 0; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 700; line-height: 1.02; color: #7a4f12; } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .title-big { background: var(--title-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)); } } .subtitle-big { font-family: var(--serif); font-weight: 600; font-size: min(3.7vw, 1.25rem); margin: 0.5rem 0 0; color: var(--gold-soft); letter-spacing: 0.02em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); white-space: nowrap; } .setting-line { font-size: var(--fs-note); color: #d6e4e4; margin: 0.45rem 0 0.9rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); } /* the "what this is" title blurb (owner 2026-06-25, Domesday-style) — a readable three-line premise on the dark masthead field; @LOCAL may restyle. */ .title-blurb { max-width: 30rem; margin: 0.2rem auto 0.9rem; font-size: var(--fs-body); line-height: 1.55; font-style: italic; text-align: center; color: #e6dcc4; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } /* ── THE COVER SPLASH (owner 2026-06-27, Domesday-style) ──────────────────────────────────────────────────── The title screen first shows over the cover painting with a breathing "tap to begin"; a tap fades the painting away to the field background to reveal the start page beneath. The emblem (.title-screen::before), .title-big and .subtitle-big are the SAME elements in both states and the .title-screen column keeps its normal block layout — so the click-through never moves them (a seamless morph). Only the background, the hidden start-page content, and the tap-prompt change. [@CLOUD: please verify the live render — the preview can't be screenshotted on this box.] */ /* the cover painting fills the screen (zoom/cover), extended into the safe-area insets (no blue field strip). The asset itself was extended TALLER (more sky above, more terrace below, 768x1719 ~20:9) so on a tall phone `cover` shows the WHOLE scene with almost no crop and no borders (owner 2026-06-27: "zoom out as much as possible"). */ .title-splash-bg { position: fixed; left: 0; right: 0; z-index: -1; top: calc(0px - env(safe-area-inset-top, 0px)); bottom: calc(0px - env(safe-area-inset-bottom, 0px)); background: #1c1812 url("assets/hero/splash-oath.jpg") center center / cover no-repeat; box-shadow: inset 0 175px 105px -75px rgba(14, 10, 5, 0.62), inset 0 -190px 130px -60px rgba(14, 10, 5, 0.72); transition: opacity 0.85s ease; } .title-screen:not(.is-splash) .title-splash-bg { opacity: 0; pointer-events: none; } /* lock scrolling while the cover is up so the title can't be dragged up/down; and a DARK fallback behind it so no strip of the blue field shows at the very top edge / status-bar safe-area (owner 2026-06-27) */ html:has(.title-screen.is-splash), body:has(.title-screen.is-splash) { overflow: hidden; } body:has(.title-screen.is-splash) { background: #1c1812; } /* a transparent full-viewport tap-catcher so a tap ANYWHERE dismisses the cover (the title column is only 640px wide); it sits on top while the cover is up, then is removed from the flow on dismiss so it never blocks the buttons. */ .title-splash-catch { position: fixed; inset: 0; z-index: 3; cursor: pointer; } .title-screen:not(.is-splash) .title-splash-catch { display: none; } /* while the cover is up, collapse + hide the start-page content (it reveals on dismiss); the shared emblem/title/ subtitle are untouched, so they stay exactly put. */ .is-splash .title-gloss, .is-splash .setting-line, .is-splash .epigraph, .is-splash .title-blurb, .is-splash .title-actions { opacity: 0; max-height: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; pointer-events: none; } .title-gloss, .setting-line, .epigraph, .title-blurb, .title-actions { transition: opacity 0.55s ease 0.3s; } /* define the title word on the start page (owner 2026-06-27): a small italic gloss under the subtitle, tying Artāvan to arta */ .title-gloss { font-family: var(--serif); font-style: italic; font-size: var(--fs-note); color: var(--gold-soft); margin: 0.4rem auto 0; max-width: 30rem; line-height: 1.5; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } /* lift the gold text + copyright for legibility over the painting */ .is-splash .title-big { filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.9)); } .is-splash .subtitle-big { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95); } .is-splash .title-copyright, .is-splash .title-build { color: rgba(231, 200, 121, 0.6); text-shadow: 0 1px 7px rgba(0, 0, 0, 0.9); } /* the gently-breathing prompt, pinned near the foot of the viewport (only while the cover is up) */ .title-tap { display: none; position: fixed; left: 0; right: 0; bottom: calc(3.6rem + env(safe-area-inset-bottom, 0px)); z-index: 2; text-align: center; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; font-size: 0.92rem; color: var(--gold-soft); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.92); animation: tapBreathe 6.5s ease-in-out infinite; pointer-events: none; } .is-splash .title-tap { display: block; } @keyframes tapBreathe { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 0.92; transform: scale(1.025); } } @media (prefers-reduced-motion: reduce) { .title-tap { animation: none; opacity: 0.7; } } .epigraph { margin: 1rem auto; max-width: 30rem; padding: 0.9rem 1.1rem; background: radial-gradient(140% 120% at 0% 0%, #fbf5e3, var(--vellum) 60%, #ecdfc2); border: 1px solid var(--vellum-edge); border-radius: 10px; box-shadow: inset 0 0 0 2px rgba(184, 134, 43, 0.3), 0 6px 16px rgba(40, 40, 30, 0.3); } .epigraph-text { font-style: italic; font-size: 1.05rem; color: var(--ink); margin: 0 0 0.5rem; line-height: 1.6; } .epigraph-cite { font-size: 0.8rem; color: var(--gold-text); font-style: normal; } /* a PAGE-HEAD epigraph (the World / Archive / House) is a quiet left-ruled motto, lighter than the Chronicle's boxed set-piece (owner 2026-06-25, Domesday-style; @LOCAL may refine the tone/spacing). */ .page-epigraph { margin: 0.1rem 0 1rem; max-width: none; padding: 0.4rem 0.9rem; background: none; border: none; border-left: 3px solid rgba(184, 134, 43, 0.45); border-radius: 0; box-shadow: none; } .page-epigraph .epigraph-text { font-size: 0.95rem; margin-bottom: 0.25rem; color: var(--ink-soft); line-height: 1.5; } .page-epigraph .epigraph-cite { font-size: 0.72rem; } .title-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; align-items: stretch; margin: 1rem 0 0.5rem; } /* SAVE/LOAD (owner 2026-06-25): the Load control is conformed to the other buttons (a .title-btn button-label with the file input visually hidden), so Save + Load read as a matched pair on both the title screen and Settings. */ /* Save/Load conform (owner 2026-06-25): Load is a button-LABEL that matches the other .title-btn buttons, not the browser's raw "Choose file" control; the file is visually hidden but kept focusable, so the control stays keyboard- and screen-reader-accessible (the label shows the focus ring via :focus-within). */ .save-load-btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; position: relative; } .save-load-btn:focus-within { outline: 2px solid var(--panel-edge-lit); outline-offset: 2px; border-color: var(--panel-edge-lit); } .save-load-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .save-status { font-style: italic; margin-top: 0.4rem; } /* fit all the actions on one screen WITHOUT scrolling — TWO PER ROW, compact (owner 2026-06-27 "fit the buttons, multiple on a row"). The grid is set on .title-actions above; these scope the BUTTON sizing to the title screen (min-width:0 beats the global .title-btn 16rem so each fills its half-cell; Settings keeps its full-width sizing). */ .title-actions > .title-btn { min-width: 0; width: 100%; min-height: 44px; padding: 0.5rem 0.55rem; font-size: 1rem; } .title-actions > .save-status { grid-column: 1 / -1; margin: 0.2rem 0 0; } .title-btn { min-width: 16rem; min-height: 48px; padding: 0.7rem 1.2rem; font-family: var(--serif); font-size: 1.05rem; cursor: pointer; border-radius: 8px; color: var(--ink); background: linear-gradient(180deg, #ece0c6, #ddcdaa); border: 1.5px solid var(--panel-edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55); transition: background 0.12s, border-color 0.12s; } .title-btn:hover { background: linear-gradient(180deg, #f2e7cf, #e3d4b3); border-color: var(--panel-edge-lit); } /* primary weight toned 700 -> 600 so it doesn't read LARGER than the quote it sits below (owner 2026-06-27); all .title-btn are 1.05rem = .epigraph-text, the quote's size */ .title-btn.primary { background: var(--gold-grad); color: var(--ink); border-color: var(--gold-soft); font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 3px 10px rgba(184, 134, 43, 0.35); } /* ── opening scene-setter (data/intro.js) + the inline-gloss layer ─────────── */ /* CLOUD baseline (2026-06-22): the intro shipped UNSTYLED — its long body fell back to dark-on-blue (unreadable), gloss terms showed as native button-pills, and the gloss card had no position so it rendered off-screen ("links don't work"). This is a conservative, token-based fix: body on vellum (legible), gloss SUBTLE (owner: keep meta unobtrusive, Domesday-style), card a real overlay. LOCAL owns the polish. */ .intro-screen { position: relative; max-width: 40rem; margin: 3vh auto 0; padding: 0 0.4rem 2.5rem; } .intro-dateline { text-align: center; font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; color: #d6e4e4; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); margin: 0.1rem 0 1.1rem; } .intro-title { font-family: var(--display); text-align: center; font-size: clamp(2.2rem, 10vw, 3.6rem); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; line-height: 1.04; margin: 0; color: #7a4f12; } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .intro-title { background: var(--title-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)); } } .intro-gloss { text-align: center; font-style: italic; font-size: 0.95rem; color: #eef3f3; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); margin: 0.25rem 0 0.5rem; } /* The How-to-Play GUIDE screen reuses .intro-title/.intro-gloss but adds .page (the cream vellum). The dark-FIELD title styling then washes out: the gilt gradient title and the near-white gloss are both meant for the blue start screen, so on cream they go pale-on-pale (owner 2026-06-27: "title and blurb illegible"). Re-tone for the light page — a solid deep-ochre title (no transparent gradient fill, no dark glow) and a dark-ink gloss. Scoped to .guide-screen, so the dark intro/title screen keeps its gilt untouched. (@LOCAL: the exact tones are yours to refine.) */ .guide-screen .intro-title { background: none; -webkit-text-fill-color: var(--gold-text); color: var(--gold-text); filter: none; text-shadow: none; } .guide-screen .intro-gloss { color: var(--ink-soft); text-shadow: none; } /* the body sits on ONE vellum tablet (continuous prose, not a box per paragraph) so the long passage is fully legible and reads as a single vignette. */ .intro-body { background: var(--panel-bg); color: var(--ink); border: 1px solid var(--panel-edge); border-radius: 10px; padding: 1rem 1.15rem; box-shadow: 0 2px 10px rgba(60, 44, 20, 0.16); } .intro-para { color: var(--ink); line-height: 1.62; font-size: 1rem; margin: 0 0 0.85rem; } .intro-para:last-child { margin-bottom: 0; } /* the gloss term: SUBTLE inline text, NOT a button-pill — native chrome reset, a faint dotted gold underline the only affordance (owner directive: meta stays unobtrusive) */ .gloss-term { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; display: inline; text-decoration: underline; text-decoration-style: dotted; text-decoration-color: var(--gold-deep); text-underline-offset: 2px; } .gloss-term:hover, .gloss-term:focus-visible { color: var(--gold-text); text-decoration-color: var(--gold); } .gloss-foreign { font-style: italic; } /* transliterated foreign terms (bandaka, arta…) read as foreign */ .intro-actions { display: flex; justify-content: center; margin: 1.5rem 0 0.5rem; } .intro-foot { text-align: center; font-size: 0.78rem; color: #cfe0e0; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); margin: 0.4rem 0 0; } /* the gloss card — a FIXED, centred overlay (was appended inline at the page bottom) */ .gloss-backdrop { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 1.2rem; background: rgba(18, 22, 24, 0.55); } .gloss-card { max-width: 24rem; width: 100%; background: radial-gradient(140% 120% at 0% 0%, #fbf5e3, var(--vellum) 60%, #ecdfc2); color: var(--ink); border: 1px solid var(--vellum-edge); border-radius: 10px; padding: 1.1rem 1.2rem; box-shadow: inset 0 0 0 2px rgba(184, 134, 43, 0.3), 0 12px 32px rgba(18, 18, 12, 0.5); } .gloss-card-term { font-family: var(--display); color: var(--gold-text); font-size: 1.15rem; text-transform: none; margin: 0 0 0.5rem; } .gloss-card-body { font-size: 0.95rem; line-height: 1.55; color: var(--ink); margin: 0 0 0.6rem; } .gloss-card-how { font-size: var(--fs-note); font-style: italic; color: var(--ink-soft); margin: 0 0 0.5rem; line-height: 1.5; } .gloss-card-src { font-size: var(--fs-fine); color: var(--ink-faint); margin: 0 0 0.9rem; } .gloss-card-close { min-height: 40px; padding: 0.45rem 1.2rem; cursor: pointer; border-radius: 7px; font-family: var(--serif); color: var(--ink); background: linear-gradient(180deg, #ece0c6, #ddcdaa); border: 1.5px solid var(--panel-edge); } .gloss-card-close:hover { background: linear-gradient(180deg, #f2e7cf, #e3d4b3); border-color: var(--panel-edge-lit); } /* the info-card nav row: "‹ Back" (rabbit-hole return) + "Close" (owner 2026-06-28, player feedback). @LOCAL may restyle. */ .gloss-card-nav { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.2rem; } .gloss-card-back { min-height: 40px; padding: 0.45rem 1rem; cursor: pointer; border-radius: 7px; font-family: var(--serif); color: var(--ink-soft); background: transparent; border: 1.5px solid var(--panel-edge); } .gloss-card-back:hover { color: var(--ink); border-color: var(--panel-edge-lit); background: rgba(199, 154, 69, 0.08); } /* the ⓘ "from the record" affordance + its pop-up (CLOUD baseline 2026-06-23, owner live-review; @LOCAL may restyle to taste) — a subtle, in-flow info glyph on a journal entry or matter option; the record one tap away. */ /* the ⓘ — a clearly visible little chip, not a faint glyph (owner 2026-06-23: "hard to see"). */ .note-info { display: inline-block; margin-left: 0.35rem; cursor: pointer; color: var(--gold-deep); font-size: 1.05em; opacity: 0.95; vertical-align: baseline; line-height: 1; } .note-info:hover, .note-info:focus-visible { opacity: 1; color: var(--gold-text); } /* the ⓘ on a JOURNAL entry (events + tidings) reads as a clear gilt BADGE, matching the Archive/matter-option ⓘ (owner 2026-06-25: "make the info buttons in tidings and events more obvious, like other sections like archive"). */ .journal .note-info, .setup .note-info { /* .setup: the ⓘ at the end of a decision's intro text (e.g. the tribute) — same gilt badge as the journal/option ⓘ (owner 2026-06-27) */ margin-left: 0.4rem; vertical-align: middle; width: 1.6rem; height: 1.6rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; line-height: 1; opacity: 1; color: var(--gold-deep); background: rgba(199, 154, 69, 0.18); border: 1px solid rgba(199, 154, 69, 0.6); border-radius: 50%; } .journal .note-info:hover, .journal .note-info:focus-visible, .setup .note-info:hover, .setup .note-info:focus-visible { background: rgba(199, 154, 69, 0.34); color: var(--gold-text); border-color: var(--gold-deep); } .note-card { max-width: 26rem; text-align: left; } /* a VERBATIM excerpt inside the ⓘ pop-up, shown DISTINCTLY from the paraphrase (the quote doctrine — owner 2026-06-24: "cite sources AND quote real excerpts… PFA, ancient authors, the Bible", Domesday-style). LOCAL ships the treatment; CLOUD/REVIEWER pass the excerpt as its OWN body element so it renders as a blockquote. Contract:
verbatim words— Herodotus 7.83
(the is optional; inline short quotes inside a paraphrured para stay inline — this is for standalone excerpts). */ .note-quote { margin: 0 0 0.7rem; padding: 0.45rem 0.6rem 0.5rem 0.85rem; border-left: 3px solid var(--gold-deep); /* the "from the record" rule */ background: rgba(86, 117, 125, 0.15); /* a glaze-turquoise wash (--field) on the vellum — strong enough to set the excerpt apart (Domesday callout: the wash + left-rule mark the block) */ border-radius: 0 6px 6px 0; font-family: var(--serif); font-style: italic; font-size: 0.97rem; line-height: 1.5; color: var(--ink); } .note-quote-cite { display: block; margin-top: 0.3rem; text-align: right; font-style: normal; font-variant: small-caps; letter-spacing: 0.03em; font-size: var(--fs-fine); color: var(--ink-faint); } /* "The heights it may be remembered for" — the EARNED milestones in the House view (owner 2026-06-24: "should be diegetically clearer what each is about"). Met (✦) reads bright + gold-ruled; unmet (○) sits quiet; each carries its meaning INLINE — today the blurb is a hover-only title=, invisible on touch. Hook-gated on `.milestone-blurb` so the live rows are UNTOUCHED until CLOUD renders the sub-line + `.is-met`. */ .milestone-line:has(.milestone-blurb) { margin: 0.35rem 0; padding: 0.3rem 0.2rem 0.4rem 0.7rem; border-left: 2px solid var(--panel-edge); border-radius: 0 5px 5px 0; } .milestone-line.is-met:has(.milestone-blurb) { border-left-color: var(--gold); background: rgba(217, 169, 58, 0.06); } .milestone-label { font-family: var(--display); font-size: var(--fs-lead); color: var(--ink-soft); letter-spacing: 0.01em; } .milestone-line.is-met .milestone-label { color: var(--gold-text); font-weight: 600; } .milestone-blurb { font-size: var(--fs-note); line-height: 1.45; font-style: italic; color: var(--ink-soft); margin-top: 0.12rem; } .milestone-line:not(.is-met) .milestone-blurb { color: var(--ink-faint); } /* ── INLINE ILLUMINATIONS — the artwork feature (Domesday's manuscript-image pattern). An entry that carries an `image` shows a captioned thumbnail floated into the prose, framed like an illuminated plate (ink border + a gilt rule + a faint manuscript warmth); its ⓘ gilt roundel opens the enlarged plate + its label-copy in the "from the record" pop-up. LOCAL owns the look; CLOUD's artThumb/noteCard render it; self-hides on a 404. */ .art-thumb { float: right; width: 42%; max-width: 168px; margin: 0.15rem 0 0.6rem 0.9rem; /* left + bottom margins so the entry prose wraps around the plate */ position: relative; } .art-thumb-img { display: block; width: 100%; height: auto; background: var(--vellum); border: 1.5px solid var(--ink); border-radius: 2px; outline: 1px solid var(--gold-deep); outline-offset: 1.5px; /* the gilt rule of an illuminated plate */ box-shadow: 0 2px 9px rgba(60, 44, 20, 0.32); filter: sepia(0.08); cursor: pointer; transition: box-shadow 0.16s ease, filter 0.16s ease; /* the whole plate is the tap-target (owner 2026-06-25); ⓘ kept as the cue */ } .art-thumb-img:hover { box-shadow: 0 4px 14px rgba(60, 44, 20, 0.46); filter: sepia(0.03); } .art-thumb-img:focus-visible { outline-width: 2px; } /* keyboard cue: thicken the gilt rule */ .art-thumb-cap { font-family: var(--serif); font-style: italic; font-size: var(--fs-fine); color: var(--ink-soft); text-align: center; line-height: 1.32; margin-top: 0.5rem; } .art-thumb .note-info { /* the ⓘ becomes a gilt corner roundel — the "tap to enlarge" affordance (Domesday) */ position: absolute; top: 0.25rem; right: 0.25rem; margin: 0; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: radial-gradient(circle at 38% 32%, #f6efdb, #e7c879); color: var(--gold-text); border: 1px solid var(--gold-deep); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); font-size: 0.95rem; } /* the ENLARGED plate, shown in the ⓘ pop-up (inside the vellum note-card) */ .art-full { margin: 0 0 0.5rem; } .art-full-img { display: block; width: 100%; height: auto; max-height: 58vh; object-fit: contain; background: var(--vellum); border: 1.5px solid var(--ink); border-radius: 3px; outline: 1px solid var(--gold-deep); outline-offset: 1.5px; box-shadow: 0 4px 16px rgba(60, 44, 20, 0.36); filter: sepia(0.06); } .art-full-detail { font-family: var(--serif); font-size: var(--fs-body); line-height: 1.5; color: var(--ink); margin: 0.6rem 0 0.35rem; } .art-credit { font-size: var(--fs-fine); color: var(--ink-faint); line-height: 1.4; margin: 0.3rem 0 0.1rem; } .art-source { font-size: var(--fs-fine); color: var(--gold-deep); text-decoration: underline dotted; text-underline-offset: 2px; } /* "What needs heed" — the safety-net alerts (CLOUD baseline 2026-06-23, owner live-review; @LOCAL may restyle). Criticals-first; sev0 acute (oxblood), sev1 grave, sev2 caution. A distinct push block above the annal. */ .alerts { border: 1px solid rgba(168, 57, 47, 0.5); border-left: 3px solid #a8392f; border-radius: 8px; padding: 0.5rem 0.85rem 0.6rem; margin: 0 0 0.8rem; background: rgba(168, 57, 47, 0.06); } .alerts-head { font-family: var(--display); color: #8c2f27; font-size: var(--fs-head); margin: 0 0 0.35rem; border-bottom: none; padding-bottom: 0; } .alerts-list { list-style: none; margin: 0; padding: 0; } .alert { font-size: var(--fs-note); line-height: 1.5; margin: 0.3rem 0; padding-left: 0.7rem; border-left: 2px solid transparent; color: var(--ink); } .alert-sev0 { border-left-color: #a8392f; color: #7a241d; font-weight: 600; } .alert-sev1 { border-left-color: #b8862b; } .alert-sev2 { border-left-color: #9a8a5a; color: var(--ink-soft); } /* the Nowruz year-turn set-piece (CLOUD baseline 2026-06-23, owner live-review; @LOCAL may restyle — the illuminated retrospective is a natural place for a painted omen later). A taller, scrollable card. */ .yearturn-card { max-width: 31rem; text-align: left; max-height: 84vh; overflow-y: auto; } .yearturn-title { color: var(--gold-text); margin: 0.1rem 0 0.4rem; } .yearturn-head { font-family: var(--display); color: var(--gold-deep); font-size: var(--fs-head); margin: 0.9rem 0 0.3rem; border-bottom: 1px solid rgba(184, 134, 43, 0.3); padding-bottom: 0.2rem; } .yearturn-realm { font-size: 0.95rem; line-height: 1.55; margin: 0 0 0.15rem; color: var(--ink); } .yearturn-house { font-size: 0.95rem; line-height: 1.55; margin: 0.25rem 0; color: var(--ink); } /* match the realm annal's body size (owner 2026-06-27: "In your house should match In the realm") */ .yearturn-epigraph { margin: 0.9rem 0 0.4rem; } .yearturn-on { margin-top: 0.9rem; width: 100%; } /* the satrapal-appointment milestone set-piece (CLOUD baseline 2026-06-25, owner: "make it more prominent — a modal"; @LOCAL may restyle — a natural place for an investiture illumination later). Gold-forward + a top rule to read as a triumphal moment, distinct from the reflective year-turn. */ .appointment-card { max-width: 30rem; text-align: left; max-height: 86vh; overflow-y: auto; border-top: 3px solid var(--gold-deep); } .appointment-title { font-family: var(--display); color: var(--gold-text); font-size: 1.5rem; line-height: 1.2; margin: 0.15rem 0 0.6rem; } .appointment-lede { font-size: 1.02rem; line-height: 1.6; margin: 0 0 0.5rem; color: var(--ink); } .appointment-shadow { font-size: var(--fs-note); line-height: 1.5; margin: 0.4rem 0 0.2rem; color: var(--ink-soft, #6a5b46); font-style: italic; } .appointment-epigraph { margin: 0.9rem 0 0.4rem; } .appointment-on { margin-top: 1rem; width: 100%; } /* the satrapy-grant SET-PIECE painting — a framed painterly hero at the top of the appointment card (beat-art-plan.md; AI-generated, credited in CREDITS). A full-bleed-behind-text wasn't right: the card carries heavy text, so the painting LEADS as a prominent banner and the prose reads below it. CSS-only (a ::before), no change to the render. */ .appointment-card::before { content: ""; display: block; height: 42vh; min-height: 220px; max-height: 380px; margin: 0 0 0.9rem; border-radius: 6px; background: #1c1812 url("assets/scenes/satrapy-grant.jpg") center 42% / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(184, 134, 43, 0.45), inset 0 -54px 42px -34px rgba(20, 15, 9, 0.55), 0 4px 14px rgba(18, 18, 12, 0.4); } /* THE MATTER AS A SET-PIECE (CLOUD baseline 2026-06-25, owner: "decisions land as more important set pieces", then "province admin can stay inline, only the big decisions should be modal"; @LOCAL may restyle). ONLY the matter (the consequential dilemma) is pushed as a modal over the ambient play tab; province admin (labour, harvest) stays inline. The inner section keeps its prose but sheds its inline tablet chrome (now in the card). */ .decision-card { max-width: 33rem; text-align: left; max-height: 88vh; overflow-y: auto; border-top: 3px solid var(--gold-deep); } .decision-card > .dilemma, .decision-card > .advance { border: none; background: transparent; box-shadow: none; margin: 0; padding: 0; } .decision-card .section-head { margin-top: 0.1rem; } /* the quiet "study your house first" escape — defers the decision (it stays pending) and reveals the play tab */ .decision-study { display: block; width: 100%; margin: 1rem 0 0; padding: 0.5rem; background: transparent; border: none; border-top: 1px solid rgba(184, 134, 43, 0.25); color: var(--gold-deep); font-family: var(--display); font-size: var(--fs-note); cursor: pointer; opacity: 0.85; } .decision-study:hover { opacity: 1; text-decoration: underline; } /* the inline cue that sits behind the modal and is the way back once the decision is deferred */ .decision-cue-btn { display: flex; flex-direction: column; gap: 0.15rem; align-items: flex-start; text-align: left; } .decision-cue-eyebrow { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; } .decision-cue-label { font-family: var(--display); font-size: var(--fs-head); } /* the Other Noble Houses list — a scannable entry (owner 2026-06-25: the flat run-on lines were "hard to read"). Bold NAME on its own line; the status muted, italic, indented beneath, per primary/secondary list best-practice. @LOCAL may restyle. */ .house-entry { margin: 0.35rem 0 0.5rem; } .house-name { display: block; font-size: var(--fs-body); font-weight: 600; color: var(--ink); line-height: 1.3; } .house-status { display: block; padding-left: 0.95rem; font-style: italic; font-size: var(--fs-note); color: var(--ink-soft, #6a5b46); line-height: 1.4; } /* the up-front COST on each province work (owner 2026-06-25: "province works should show cost") — a plain price line, gold-keyed and set apart from the diegetic tell above it; the coffers line gives the affordability context. */ .work-cost { display: block; margin-top: 0.3rem; font-size: var(--fs-fine); font-style: italic; font-weight: 600; color: var(--gold-deep); letter-spacing: 0.01em; } /* the ONE cost treatment (= .option-cost), no small-caps (owner 2026-06-26) */ .work-coffers { margin: 0.1rem 0 0.55rem; opacity: 0.9; } /* the courtier "Road to a Satrapy" readout (owner 2026-06-25, early-game legibility): the two diegetic progress lines (favour + a name made), left-ruled in gold; the closing line italic. @LOCAL may restyle. */ .road-line { margin: 0.32rem 0; padding-left: 0.85rem; border-left: 2px solid rgba(184, 134, 43, 0.35); line-height: 1.5; font-size: var(--fs-body); color: var(--ink); } /* was inheriting the rogue 16px (owner 2026-06-25 "too many font sizes") */ .road-close { margin-top: 0.55rem; font-style: italic; font-size: var(--fs-note); } /* the Counsel box (CLOUD baseline 2026-06-23, owner live-review; @LOCAL may restyle) — advisory, calm; a green field-accent, distinct from the oxblood "needs heed" alerts so counsel and danger never blur. */ .counsel { border: 1px solid rgba(47, 111, 104, 0.4); border-left: 3px solid #2f6f68; border-radius: 8px; padding: 0.5rem 0.85rem 0.55rem; margin: 0.2rem 0 0.8rem; background: rgba(47, 111, 104, 0.05); } .counsel-head { font-family: var(--display); color: #1f5f59; font-size: var(--fs-head); margin: 0; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; list-style: none; } .counsel-head::-webkit-details-marker { display: none; } .counsel-head::after { content: "▸"; float: right; color: #2f6f68; transition: transform 0.15s; } .counsel[open] > .counsel-head::after { transform: rotate(90deg); } .counsel-body { margin: 0.3rem 0 0; } .counsel-nudge { font-size: var(--fs-note); line-height: 1.5; margin: 0.1rem 0 0.3rem; color: var(--ink); font-style: italic; } .counsel-item { font-size: var(--fs-note); line-height: 1.5; margin: 0.25rem 0; color: var(--ink); } .counsel-hide { display: inline-block; margin: 0 0 0.4rem; padding: 0.15rem 0.5rem; font-size: var(--fs-fine); cursor: pointer; color: var(--ink-soft); background: none; border: 1px solid var(--panel-edge); border-radius: 6px; } .counsel-hide:hover { color: var(--ink); border-color: var(--panel-edge-lit); } /* the Chronicle's annalistic "In the realm / In your house" sub-heads (CLOUD baseline 2026-06-23; @LOCAL). */ .chron-subhead { font-family: var(--display); font-size: var(--fs-note); color: var(--gold-deep); font-style: italic; letter-spacing: 0.03em; margin: 0.6rem 0 0.2rem; } /* the More tab (CLOUD baseline 2026-06-23, owner live-review; @LOCAL may restyle) — about/mission, how-to, artwork (to come), credits & sources, the build stamp. */ .more-block { margin: 0 0 1rem; } .more-head { font-family: var(--display); color: var(--gold-text); font-size: var(--fs-head); margin: 0 0 0.3rem; } .more-block .title-btn { margin: 0.35rem 0; } /* in-game feedback form (More → Feedback) — CLOUD structural baseline; @LOCAL to theme to the vellum */ .feedback-cat-label { display: block; margin: 0.3rem 0; font-style: italic; } .feedback-category { margin-left: 0.3rem; font: inherit; padding: 0.15rem 0.3rem; } .feedback-text { display: block; width: 100%; box-sizing: border-box; min-height: 4.5em; margin: 0.4rem 0; padding: 0.5rem 0.6rem; font: inherit; resize: vertical; } .feedback-shot-label { display: block; margin: 0.3rem 0; font-style: italic; } .feedback-shot { display: block; margin-top: 0.2rem; } .feedback-send { margin: 0.4rem 0; } .feedback-status { min-height: 1.2em; color: var(--gold-text); } .more-build { text-align: left; margin-top: 0.6rem; } /* ── The House tab — the member detail card + the merged kin/council roster (CLOUD baseline 2026-06-23, owner "merge house council to house tab / dedupe"; LOCAL may refine) ── */ .kin-list { display: flex; flex-direction: column; gap: 0.55rem; margin: 0.1rem 0 0.4rem; } /* each kinsman is ONE parchment card (owner: "why the blue panels and different font/colours?") — the grey was the bare