/* TALK ABOUT IT — Book One ========================================================================== The palette is the house's (bone, near-black ink, antique gold) with ONE addition taken straight out of the book: the orange stitching on the Airstrikes. It is the only hot colour in the build and it is used the way the stitching is used — as a line that runs around the edge of things. ⚠ THE RULE THAT KEEPS THIS OFF BROWN: on bone, gold is a RULE and a MARK, never a word. Gold dark enough to read on bone IS brown, so the moment gold becomes a text colour the whole app's accent is brown. Links are ink with an orange underline; eyebrows are neutral caps beside a short gold rule. Greys stay neutral and are NOT mixed toward the gold. ⚠ This is a children's book, so the type is bigger than this house usually sets it and the line length is shorter. The story sets at 1.35rem minimum, because the read-along highlight has to be legible from a metre away on a tablet lying on a table. ========================================================================== */ :root { /* paper + ink */ --bone: #f1ece3; --bone-2: #e7e0d2; --paper: #fbf9f4; --ink: #0a0a0a; --ink-2: #2b2b2b; /* Neutral, deliberately. Mixing the grey ramp toward the gold is cause #1 of "why does this app look brown" — most words on a page ride this ramp. */ --mute: #56534e; --faint: #8a867f; --line: rgba(10, 10, 10, .16); --line-soft: rgba(10, 10, 10, .08); /* the stitching */ --orange: #e4691e; --orange-ink: #b4470c; /* the orange that is allowed to be a WORD (6.0:1 on bone) */ --orange-soft: #fbe3d2; /* gold — a rule and a mark, never a word */ --gold: #a07020; --gold-hi: #f0d0a0; --gold-mid: #c9a24a; /* ⚠ THE GOLD THAT IS ALLOWED TO BE A WORD. Plain --gold is ~3.6:1 on bone — fine for a rule, an actual a11y failure for a byline. This one is 6.4:1. */ --goldink: #7a5c12; --metal: linear-gradient(180deg, #f0d0a0, #d9b45e 30%, #a07020 64%, #7d5616); /* one urgent red, for one thing only */ --red: #a82818; --serif: "Didot", "Bodoni 72", "Bodoni MT", "Playfair Display", Georgia, serif; --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --read: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif; --wrap: 74rem; --shadow: 0 1px 0 rgba(10,10,10,.05), 0 12px 34px rgba(10,10,10,.09); } /* ── dark, opt-in only ─────────────────────────────────────────────────────── ⚠ Never on `prefers-color-scheme` alone: the brand is a light brand, and flipping it for everyone whose OS is dark flips the whole book. The reader gets a "night" switch, which sets data-theme on . */ :root[data-theme="night"] { --bone: #14120f; --bone-2: #1c1a16; --paper: #1b1915; --ink: #f4efe6; --ink-2: #ded7ca; --mute: #a8a29a; --faint: #7e7a72; --line: rgba(244, 239, 230, .18); --line-soft: rgba(244, 239, 230, .09); --orange-ink: #ff9c5c; --orange-soft: rgba(228, 105, 30, .18); --gold: #c9a24a; --goldink: #e4cd84; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bone); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.62; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, video { max-width: 100%; display: block; } :focus-visible { /* Two-tone ring: the bone halo keeps it visible on ink, the ink ring keeps it visible on bone, so one rule works on every ground in the app. */ outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--bone); border-radius: 2px; } :root[data-theme="night"] :focus-visible { outline-color: var(--gold-hi); } .wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; } .narrow { width: min(100% - 2.5rem, 46rem); margin-inline: auto; } /* ── type ────────────────────────────────────────────────────────────────── */ h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.06; margin: 0 0 .5em; letter-spacing: -.01em; } h1 { font-size: clamp(2.6rem, 8vw, 5.4rem); } h2 { font-size: clamp(1.9rem, 4.4vw, 3.1rem); } h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); } p { margin: 0 0 1.05em; } a { color: inherit; text-decoration-color: var(--orange); text-underline-offset: .18em; text-decoration-thickness: .12em; } a:hover { text-decoration-color: var(--ink); } .eyebrow { font-family: var(--sans); font-size: .7rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--mute); display: flex; align-items: center; gap: .7rem; margin: 0 0 1rem; } .eyebrow::before { content: ""; width: 2.1rem; height: 2px; background: var(--gold); flex: none; } .lede { font-size: clamp(1.1rem, 2vw, 1.32rem); line-height: 1.55; color: var(--ink-2); } /* The stitch: a dashed orange rule, the book's own graphic device. Used to separate, never to decorate more than once in a view. */ .stitch { height: 0; border: 0; border-top: 3px dashed var(--orange); opacity: .85; margin: 2.6rem 0; } .stitch-tight { margin: 1.2rem 0; } /* ── the sticky bar ──────────────────────────────────────────────────────── */ .bar { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--bone) 88%, transparent); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); } .bar .wrap { display: flex; align-items: center; gap: 1.1rem; min-height: 3.6rem; } .bar__mark { display: flex; align-items: center; gap: .6rem; font-family: var(--serif); font-size: 1.05rem; text-decoration: none; flex: none; } .bar__mark svg { width: 26px; height: 26px; flex: none; } .bar nav { display: flex; gap: .1rem; overflow-x: auto; scrollbar-width: none; margin-left: auto; } .bar nav::-webkit-scrollbar { display: none; } .bar nav a { font-size: .78rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; padding: .5rem .62rem; border-radius: 2px; text-decoration: none; color: var(--mute); white-space: nowrap; } .bar nav a:hover, .bar nav a[aria-current] { color: var(--ink); background: var(--bone-2); } /* ── full-bleed bands ────────────────────────────────────────────────────── */ .band { position: relative; isolation: isolate; overflow: clip; } .band__media { position: absolute; inset: 0; z-index: -2; } .band__media img, .band__media video { width: 100%; height: 100%; object-fit: cover; } /* ⚠ The veil is fixed but the copy is not — a band whose text sits low needs its darkness at the bottom. `.band--top` / `.band--bottom` move it to follow. */ .band__veil { position: absolute; inset: 0; z-index: -1; } .band--bottom .band__veil { background: linear-gradient(180deg, rgba(8,7,6,.18) 0%, rgba(8,7,6,.52) 55%, rgba(8,7,6,.86) 100%); } .band--top .band__veil { background: linear-gradient(180deg, rgba(8,7,6,.86) 0%, rgba(8,7,6,.5) 45%, rgba(8,7,6,.2) 100%); } .band--even .band__veil { background: rgba(8,7,6,.62); } .band--light .band__veil { background: linear-gradient(180deg, rgba(241,236,227,.5), rgba(241,236,227,.9)); } .band__body { position: relative; padding: clamp(4rem, 12vh, 9rem) 0; color: #fff; } .band--light .band__body { color: var(--ink); } .band__body .eyebrow { color: rgba(255,255,255,.86); } .band--light .band__body .eyebrow { color: var(--mute); } .band__body p { color: rgba(255,255,255,.92); text-shadow: 0 1px 12px rgba(0,0,0,.5); } .band--light .band__body p { color: var(--ink-2); text-shadow: none; } .band__body h1, .band__body h2 { text-shadow: 0 2px 20px rgba(0,0,0,.55); } .band--light .band__body h1, .band--light .band__body h2 { text-shadow: none; } /* ── the hero ────────────────────────────────────────────────────────────── */ .hero { min-height: min(94vh, 54rem); display: grid; align-items: end; } .hero__body { padding-bottom: clamp(3rem, 8vh, 6rem); } .hero__series { font-family: var(--sans); font-size: .74rem; font-weight: 800; letter-spacing: .34em; text-transform: uppercase; color: var(--gold-hi); margin: 0 0 1.1rem; } .hero h1 { max-width: 16ch; margin-bottom: .35em; } .hero__sub { font-family: var(--read); font-size: clamp(1.05rem, 2.2vw, 1.4rem); max-width: 34ch; } .hero__cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; } /* ── the byline ──────────────────────────────────────────────────────────── */ /* Set in the reading serif rather than the display face: it is a name, not a headline, and at display weight it competes with the title it belongs to. */ .byline { font-family: var(--read); font-style: italic; font-size: clamp(1rem, 1.6vw, 1.25rem); letter-spacing: .01em; margin: .1rem 0 1.1rem; color: var(--gold-hi); } .band--light .byline, .sect .byline { color: var(--goldink); } .byline--card { font-size: .98rem; margin: .15rem 0 .5rem; color: var(--mute); } .rd__by { font-family: var(--read); font-style: italic; font-size: .84rem; color: #9d968a; white-space: nowrap; flex: none; } @media (max-width: 60rem) { .rd__by { display: none; } } /* The bouncing ball lives in the bottom strip of the hero only, under the copy and above the video, and never takes a pointer event. */ .hero__ball { position: absolute; left: 0; right: 0; bottom: 0; height: min(30vh, 15rem); z-index: 0; pointer-events: none; } .hero .band__body { z-index: 1; } /* ── buttons ─────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: .5rem; font: 650 .85rem/1 var(--sans); letter-spacing: .09em; text-transform: uppercase; padding: .95rem 1.4rem; border: 2px solid var(--ink); background: var(--ink); color: var(--bone); border-radius: 2px; cursor: pointer; text-decoration: none; transition: transform .12s ease; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--gold { background: var(--metal); border-color: #7d5616; color: #14100a; } .btn--ghost { background: transparent; color: inherit; border-color: currentColor; } .btn--big { font-size: 1rem; padding: 1.15rem 1.9rem; } .btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; } /* ── plates + cards ──────────────────────────────────────────────────────── */ .sect { padding: clamp(3.6rem, 9vh, 7rem) 0; } .grid { display: grid; gap: 1.4rem; } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr)); } .card { background: var(--paper); border: 1px solid var(--line); border-radius: 2px; padding: 1.5rem; box-shadow: var(--shadow); } .card h3 { margin-bottom: .35em; } .card p:last-child { margin-bottom: 0; } .card__n { font-family: var(--serif); font-size: 2.6rem; line-height: 1; color: var(--orange); display: block; margin-bottom: .3rem; } /* ── the reader ──────────────────────────────────────────────────────────── */ #reader { position: fixed; inset: 0; z-index: 200; display: none; background: #100e0c; } /* ⚠⚠ THE COLUMN, NOT JUST THE ROWS — and this is where the phone overflow actually came from. With only `grid-template-rows` set, the implicit COLUMN is `auto`, so it sizes to the widest child: the toolbar, whose seven controls do not wrap and measure 538px. Every descendant's `100%` then resolved against 538px inside a 390px screen, and the text ran off the side. The lesson worth keeping: the overflow was reported on `.rd__text`, and two plausible fixes applied THERE (`min-width:0`, a pinned column on `.rd__page`) both changed the number without fixing it, because the widening happened two ancestors up. Walk the chain and print every box before editing anything — that took one measurement and would have saved two guesses. */ #reader[data-open] { display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); } body.reading { overflow: hidden; } .rd__stage { position: relative; overflow: hidden; } .rd__bg { position: absolute; inset: 0; } .rd__bg video, .rd__bg img { width: 100%; height: 100%; object-fit: cover; } /* ⚠⚠ THE VEIL ALONE CANNOT CARRY THIS, and the numbers say so. The brightest ground in the set is `fence-light` at L=0.634 measured across the central band where the words actually sit. Against #f7f2e8 text, a flat veil would have to reach 75% black to clear 4.5:1 — which would leave a children's picture book with almost no picture in it. So the darkness is split: a MODERATE veil over the whole frame (the picture survives), and a PLATE behind the words themselves (the words are safe). The plate is what makes the page look like a picture book rather than a caption burnt into a photograph, so this is not a compromise — it is the better design, arrived at by measuring. */ .rd__veil { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, rgba(8,7,6,.42) 0%, rgba(8,7,6,.74) 62%, rgba(8,7,6,.93) 100%); } .rd__fx { position: absolute; inset: 0; pointer-events: none; } .rd__page { position: relative; height: 100%; overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: center; justify-items: center; /* ⚠ AND the column has to be pinned too. With no `grid-template-columns`, the implicit column is `auto` — sized to its content — so the child's `100%` resolves against a track that the child itself widened. `min-width:0` on the item was necessary and not sufficient: the text still measured 458px inside a 390px screen. `minmax(0, 1fr)` is what actually holds the column to the container. Both lines are needed; removing either one puts the text off the side of a phone again. */ grid-template-columns: minmax(0, 1fr); padding: clamp(1.4rem, 4vw, 3rem) clamp(1.2rem, 5vw, 3rem); } .rd__text { /* ⚠ `min-width:0` is load-bearing. A grid item defaults to `min-width:auto`, which lets its CONTENT push it wider than its track — so `width:min(100%,40rem)` was silently overridden and the block measured 500px inside a 351px column on a phone. Without this line the text runs off the side of the screen. */ min-width: 0; max-width: 100%; width: min(100%, 40rem); overflow-wrap: break-word; font-family: var(--read); color: #f7f2e8; font-size: clamp(1.28rem, 2.5vw, 1.72rem); line-height: 1.68; text-shadow: 0 2px 18px rgba(0,0,0,.75); /* the plate */ background: rgba(9, 8, 7, .66); backdrop-filter: blur(14px) saturate(.85); border-radius: 4px; padding: clamp(1.2rem, 3.4vw, 2.1rem) clamp(1.3rem, 3.6vw, 2.4rem); box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 24px 60px rgba(0,0,0,.45); } /* A browser with no backdrop-filter gets a denser flat plate instead, so the contrast floor does not depend on a progressive enhancement. */ @supports not (backdrop-filter: blur(2px)) { .rd__text { background: rgba(9, 8, 7, .82); } } .rd__text p { margin: 0 0 1em; } .rd__text p:last-child { margin-bottom: 0; } /* THE WORD HIGHLIGHT — what a child actually reads along with. Two states: `on` is the word being spoken right now; `said` is everything already spoken, held slightly brighter than what is still coming, so the eye can see where it is in the sentence at a glance. */ .w { transition: color .09s linear, background-color .09s linear; border-radius: 3px; padding: 0 .06em; margin: 0 -.06em; } .w.said { color: #fff; } .w.on { background: var(--orange); color: #fff; box-shadow: 0 0 0 .12em var(--orange), 0 0 26px rgba(228,105,30,.7); } :root[data-theme="night"] .w.on { background: #ff8a3d; box-shadow: 0 0 0 .12em #ff8a3d, 0 0 26px rgba(255,138,61,.55); } /* Emphasis carried over from the manuscript's markdown, rendered as emphasis instead of as asterisks. */ .w--em { font-style: italic; } .w--strong { font-weight: 700; letter-spacing: .01em; } .rd__text.plain .w { transition: none; } .rd__text.plain .w.on { background: none; color: #ffcf9a; box-shadow: none; text-decoration: underline; text-decoration-thickness: .1em; } .rd__speaker { font: 700 .72rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-hi); margin-bottom: 1.4rem; min-height: 1em; display: flex; align-items: center; gap: .6rem; } .rd__speaker::before { content: ""; width: 1.6rem; height: 2px; background: currentColor; } /* reader chrome */ .rd__top, .rd__foot { display: flex; align-items: center; gap: .8rem; padding: .7rem clamp(.8rem, 3vw, 1.6rem); background: #0b0a09; color: #efe8dc; border-color: rgba(255,255,255,.12); border-style: solid; border-width: 0; } /* And the toolbar has to be able to get small, or pinning the column just moves the overflow inside it. The title takes the squeeze; the controls never shrink below a thumb. */ .rd__top { border-bottom-width: 1px; flex-wrap: wrap; } .rd__foot { border-top-width: 1px; } .rd__title { font-family: var(--serif); font-size: 1rem; min-width: 0; flex: 1 1 6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rd__top .rd__btn { flex: none; } .rd__meta { font: 600 .72rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #9d968a; } .rd__spacer { margin-left: auto; } .rd__btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-width: 2.6rem; height: 2.6rem; padding: 0 .8rem; background: transparent; color: inherit; border: 1px solid rgba(255,255,255,.24); border-radius: 2px; cursor: pointer; font: 650 .76rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; } .rd__btn:hover { background: rgba(255,255,255,.1); } .rd__btn[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: #fff; } .rd__btn--play { background: var(--orange); border-color: var(--orange); color: #fff; min-width: 3.4rem; } .rd__btn svg { width: 17px; height: 17px; } .rd__scrub { flex: 1; height: 3px; background: rgba(255,255,255,.2); position: relative; cursor: pointer; border-radius: 2px; } .rd__scrub i { position: absolute; inset: 0 auto 0 0; background: var(--orange); border-radius: 2px; } /* page-turn animation */ @keyframes pgIn { from { opacity: 0; transform: translateX(var(--dir, 3%)) } to { opacity: 1; transform: none } } .rd__page.turning { animation: pgIn .34s cubic-bezier(.2,.7,.3,1); } @media (prefers-reduced-motion: reduce) { .rd__page.turning { animation: none } } /* ── the thread panel ────────────────────────────────────────────────────── */ /* ⚠ Apparatus, and it must not be mistakable for the book. Different face (sans, not the reading serif), a hard orange rule, and the word APPARATUS on it. The one thing this app cannot afford is a reader who cannot tell what the author wrote from what a commentator wrote about it. */ .thread { background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--orange); padding: 1.5rem 1.6rem; font-family: var(--sans); border-radius: 2px; } .thread__tag { font: 800 .64rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--orange-ink); margin-bottom: 1rem; display: block; } .thread dl { display: grid; grid-template-columns: minmax(6.5rem, auto) 1fr; gap: .55rem 1.2rem; margin: 0; } .thread dt { font: 700 .68rem/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); } .thread dd { margin: 0; font-size: .95rem; line-height: 1.55; } .thread .baton { font-weight: 700; color: var(--orange-ink); } @media (max-width: 34rem) { .thread dl { grid-template-columns: 1fr; gap: .1rem .0rem; } .thread dd { margin-bottom: .7rem; } } .rd__thread { position: absolute; inset: auto 0 0 0; z-index: 5; transform: translateY(100%); transition: transform .3s ease; } .rd__thread[data-open] { transform: none; } .rd__thread .thread { border-radius: 0; max-height: 46vh; overflow-y: auto; } /* ── the strand map ──────────────────────────────────────────────────────── */ .map { display: grid; gap: .5rem; } .map__row { display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; align-items: start; padding: .85rem 0; border-bottom: 1px solid var(--line-soft); } .map__n { font-family: var(--serif); font-size: 1.5rem; color: var(--orange); line-height: 1; } .map__point { font-weight: 650; margin-bottom: .3rem; } .map__baton { font-size: .84rem; color: var(--mute); display: flex; flex-wrap: wrap; gap: .4rem .8rem; margin-top: .45rem; } .map__baton b { color: var(--orange-ink); font-weight: 700; } .map__row--hinge { background: var(--orange-soft); border-left: 4px solid var(--orange); padding-left: 1rem; margin-inline: -1rem; padding-right: 1rem; } /* ── tools + games ───────────────────────────────────────────────────────── */ .tool { background: var(--paper); border: 1px solid var(--line); border-radius: 2px; padding: 1.7rem; box-shadow: var(--shadow); } .q { border-top: 1px solid var(--line-soft); padding: 1.1rem 0; } .q:first-of-type { border-top: 0; } .q__ask { font-family: var(--read); font-size: 1.12rem; margin-bottom: .7rem; } .opts { display: flex; flex-wrap: wrap; gap: .5rem; } .opt { font: 600 .84rem/1 var(--sans); padding: .7rem 1rem; border: 1px solid var(--line); background: var(--bone); border-radius: 2px; cursor: pointer; color: inherit; } .opt:hover { border-color: var(--ink); } .opt[aria-pressed="true"] { background: var(--ink); color: var(--bone); border-color: var(--ink); } /* the meter */ .meter { display: grid; gap: .55rem; } .meter__row { display: grid; grid-template-columns: 3.2rem 1fr; gap: 1rem; align-items: center; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 2px; background: var(--bone); cursor: pointer; text-align: left; font: inherit; color: inherit; } .meter__row:hover { border-color: var(--ink); } .meter__row[aria-pressed="true"] { border-color: var(--orange); background: var(--orange-soft); box-shadow: inset 0 0 0 1px var(--orange); } .meter__n { font-family: var(--serif); font-size: 2rem; line-height: 1; text-align: center; } .meter__row:nth-child(5) .meter__n, .meter__row:nth-child(6) .meter__n { color: var(--red); } /* the deck */ .deck { perspective: 1400px; } .deck__card { background: var(--paper); border: 1px solid var(--line); border-radius: 3px; padding: 1.7rem; box-shadow: var(--shadow); min-height: 20rem; display: grid; align-content: start; gap: .9rem; } .deck__scene { font-family: var(--read); font-size: 1.15rem; } .deck__opt { text-align: left; font: inherit; background: var(--bone); border: 1px solid var(--line); border-radius: 2px; padding: .85rem 1rem; cursor: pointer; color: inherit; display: grid; gap: .3rem; } .deck__opt:hover { border-color: var(--ink); } .deck__opt[data-shown] { border-color: var(--orange); background: var(--orange-soft); } .deck__opt b { font-weight: 650; } .deck__cost { font-size: .86rem; color: var(--mute); display: none; } .deck__opt[data-shown] .deck__cost { display: block; } /* ── the shelf ───────────────────────────────────────────────────────────── */ .shelf__band { padding: 1.4rem 0; border-top: 1px solid var(--line); } .shelf__ages { font: 700 .68rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); } .title-chip { display: inline-flex; align-items: baseline; gap: .6rem; padding: .6rem .9rem; margin: .35rem .35rem 0 0; border: 1px solid var(--line); border-radius: 2px; background: var(--paper); font-family: var(--read); } .title-chip small { font: 700 .6rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; } .title-chip[data-state="written"] { border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); } .title-chip[data-state="written"] small { color: var(--orange-ink); } .title-chip[data-state="named"] small { color: var(--mute); } .title-chip[data-state="phrase"] { border-style: dashed; } .title-chip[data-state="phrase"] small { color: var(--faint); } .title-chip[data-state="withdrawn"] { opacity: .72; text-decoration: line-through; text-decoration-thickness: 1px; } .title-chip[data-state="withdrawn"] small { color: var(--red); text-decoration: none; } /* ── films + listen ──────────────────────────────────────────────────────── */ .film { display: grid; gap: .8rem; } .film video { width: 100%; border: 1px solid var(--line); background: #000; border-radius: 2px; } .transcript { font-size: .9rem; color: var(--mute); } .transcript summary { cursor: pointer; font: 650 .74rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; } .transcript p { margin: .7rem 0 0; } /* ── footer ──────────────────────────────────────────────────────────────── */ .foot { background: var(--ink); color: #d9d2c6; padding: 3.4rem 0 2.6rem; } .foot a { color: #fff; } .foot__bar { font: 800 .66rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--gold-hi); margin-bottom: 1.6rem; } .foot small { color: #9d968a; } /* ── the game pop-up ─────────────────────────────────────────────────────── */ /* A sheet rather than a centred modal: on the tablet this is mostly played on, a sheet that rises from the bottom keeps the child's hands where they already are, and it can be dismissed by reaching the nearest edge rather than a small X in a far corner. */ #gamePop { position: fixed; inset: auto 0 0 0; z-index: 210; display: none; max-height: 92vh; background: var(--bone); border-top: 4px solid var(--orange); box-shadow: 0 -20px 60px rgba(10,10,10,.35); grid-template-rows: auto 1fr; } #gamePop[data-open] { display: grid; } .pop__top { display: flex; align-items: center; gap: 1rem; padding: .9rem clamp(1rem, 4vw, 2rem); border-bottom: 1px solid var(--line); font-family: var(--serif); position: sticky; top: 0; background: var(--bone); z-index: 2; } .pop__top .rd__btn { margin-left: auto; border-color: var(--line); color: var(--ink); } .pop__top .rd__btn:hover { background: var(--bone-2); } .pop__body { overflow-y: auto; overscroll-behavior: contain; padding: clamp(1rem, 4vw, 2rem); } .pop__body > * { width: min(100%, 44rem); margin-inline: auto; } @media (min-width: 60rem) { #gamePop { inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: min(56rem, calc(100vw - 4rem)); max-height: 86vh; border: 1px solid var(--line); border-top: 4px solid var(--orange); border-radius: 3px; } } /* ── utility ─────────────────────────────────────────────────────────────── */ .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .stack { display: grid; gap: 1.1rem; } .center { text-align: center; } .pill { display: inline-block; font: 700 .64rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; padding: .4rem .65rem; border: 1px solid var(--line); border-radius: 2px; color: var(--mute); } /* ⚠ Text scaling: this app is read by children and by adults enlarging type for them. Nothing here is a fixed-height box with text in it, and the reader's own type scales with the viewport rather than being pinned. At 200% zoom the layout reflows to one column rather than clipping. */ @media (max-width: 46rem) { .bar .wrap { min-height: 3.2rem; } .bar__mark span { display: none; } .rd__meta { display: none; } .thread dl { grid-template-columns: 1fr; } }