/* ============================================================================ read.css — ReadLength's site-local half of the AAA+++ STUDIO PREMIUM layer. Spec: _plans/AAA-PLUS-STUDIO-PREMIUM.md §5 (row: read | Printer's colophon | pages<->hours ribbon). The shared mechanics (§20 of datasite.css) are already loaded before this file; nothing here restates them. The voice is a printer's colophon: the back-matter note in a well-made book — bibliographic, exact, quietly proud of the details. So the site's furniture is drawn the way a compositor draws: hairlines with BUTT caps, the thick-thin "Oxford rule", folio numbers hung under a measure, small caps for labels, en-dashes, and no curve anywhere. That last constraint is what keeps this hand distinct from every sibling (fly's great-circle arc, cook's clock dial, burn's flame, watts' meter band): ReadLength owns straight rules only. Zero new requests. SVG + CSS. Everything renders server-side. ========================================================================== */ /* ---- 0. SITE-LOCAL FIX: re-derive the accent-dependent tokens ------------- BUG FOUND 2026-07-30, shared layer, affects every Identity A site in both modes. datasite.css declares --accent-deep and --accent-wash in :root, but the real per-site accent is only ever set on (§18 re-derives --accent from the inline --site-accent, and §19 overrides it per site for dark). At :root, therefore, --accent resolves to the neutral fallback (#3C4A55 light, #8faaff dark), so every mono kicker, every .method step number and the .formula wash painted SLATE in light mode and LAVENDER-BLUE in dark — beside a burgundy keel rule. Re-derived here on the element that actually carries the accent. The permanent fix belongs in the shared file: see the report. */ body[data-site="read"] { --accent-deep: color-mix(in srgb, var(--accent) 78%, var(--ink)); --accent-wash: color-mix(in srgb, var(--accent) 7%, var(--paper)); } /* ---- 1. entrance choreography on the above-the-fold stack ---------------- The shared layer ships .reveal/.reveal-2/.reveal-3, but the kicker and the h1 are emitted by the shared shell(), which this site must not edit. Same animation, same gate, addressed positionally instead of by class. Nothing below the fold animates. */ @media (prefers-reduced-motion: no-preference) { .hero .eyebrow { animation: aaa-rise var(--t-slow) var(--ease-out) both; } .hero h1 { animation: aaa-rise var(--t-slow) var(--ease-out) both; animation-delay: 60ms; } } /* ---- 2. the answer block: the duration is the answer --------------------- Every sibling in the ring makes its headline figure the quantity it measures. ReadLength measures words but ANSWERS in hours, so the display stat is the duration and the word count is set as specification beside it. That inversion is the whole editorial claim of the site, made typographically. */ .answer.aaa { max-width: 62ch; } .answer.aaa .stat-line { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 0 0 4px; } .answer.aaa .stat-line .big { color: var(--accent); } .answer.aaa .stat-u { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-bottom: .35em; } /* the word count, demoted to the register a compositor would use for it */ .answer.aaa .big.wc, .wc { display: inline-block; font-family: var(--mono); font-size: .8125rem; letter-spacing: .06em; font-variant-numeric: tabular-nums lining-nums; color: var(--ink); border-bottom: 1px solid var(--accent); padding-bottom: 1px; } /* ---- 3. THE SET PIECE: the pages<->hours ribbon ------------------------- A typeset progress rule. Hours are marked above the rule, folios every 50 pages below it, and the extent's duration is set in mono at each end. The argument being drawn: a book's length is a physical extent, and an hour of your evening is a measurable distance along it. viewBox is fixed and the svg is width:100%/height:auto, so the box is sized from its intrinsic ratio before paint — CLS 0.00 with no reserved-height hack. */ .colophon { margin: var(--s5) 0 0; padding: 0; border: 0; } .colophon > .kicker { display: block; margin-bottom: 14px; } /* the measure. Fixed row heights => the box is sized before paint. */ .colophon .rib { position: relative; } .colophon .rib-ends { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .06em; font-variant-numeric: tabular-nums lining-nums; color: var(--accent-deep); height: 19px; } .colophon .rib-e-r { color: var(--accent-deep); } /* the hour side, above the rule: ticks hang DOWN to meet it */ .colophon .rib-hours { position: relative; height: 27px; } .colophon .rib-folios { position: relative; height: 32px; } .colophon .ht, .colophon .ft { position: absolute; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; font-family: var(--mono); font-size: .68rem; letter-spacing: .07em; font-variant-numeric: tabular-nums lining-nums; color: var(--muted); white-space: nowrap; } .colophon .ht { bottom: 0; } .colophon .ft { top: 0; } .colophon .ht b, .colophon .ft b { font-weight: 400; color: var(--ink-2); } .colophon .ht b { margin-bottom: 4px; } .colophon .ft b { margin-top: 4px; } /* the marks themselves: 1px, butt-ended, opaque hairlines (never rgba) */ .colophon .ht i, .colophon .ft i { display: block; width: 1px; background: var(--line-2); } .colophon .ht i { height: 7px; } .colophon .ft i { height: 6px; } .colophon .ht.on i { height: 9px; background: var(--ink-2); } .colophon .ft.on i { height: 10px; background: var(--ink-2); } /* the spine: a printer's thick-thin Oxford rule, with butt terminals in the site accent at each end of the measure */ .colophon .rib-rule { position: relative; height: 2px; background: var(--ink); } .colophon .rib-thin { height: 1px; background: var(--line-2); margin-top: 3px; } .colophon .rib-rule::before, .colophon .rib-rule::after { content: ""; position: absolute; top: -7px; width: 2px; height: 16px; background: var(--accent); } .colophon .rib-rule::before { left: 0; } .colophon .rib-rule::after { right: 0; } .colophon .legend { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 12px 0 0; font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .colophon .legend b { color: var(--ink-2); font-weight: 400; } /* ---- 4. the colophon note ------------------------------------------------ The back-matter block: hanging mono label, hairline above, the edition and the counting rule stated exactly. Used at the foot of every measured page, in the same position, which is what makes it read as a house style rather than a disclaimer. */ .colo { border-top: 2px solid var(--ink); padding-top: 14px; margin-top: var(--s5); display: grid; grid-template-columns: 132px 1fr; gap: 4px 22px; } .colo .colo-l { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); } .colo p { margin: 0; color: var(--ink-2); font-size: .93rem; line-height: 1.62; max-width: var(--measure); } .colo p + p { margin-top: 8px; } @media (max-width: 640px) { .colo { grid-template-columns: 1fr; } } /* ---- 5. the reading schedule, re-set as a printed table of days ---------- */ .progress-row .lbl { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .progress-track { border-radius: 0; background: var(--paper-2); } .progress-fill { border-radius: 0; } .progress-row .val { font-family: var(--mono); font-size: .95rem; font-weight: 400; letter-spacing: .02em; } /* ---- 6. the folio rule: a section datum that is not the keel ------------- Used once per page under the related grid so the page ends the way a gathering ends. */ .folio-rule { border: 0; border-top: 1px solid var(--ink); margin: var(--s5) 0 0; } .folio-rule + .folio-thin { border: 0; border-top: 1px solid var(--line-2); margin: 3px 0 0; } /* ---- 7. the entity bridge keeps the shared pull-quote anatomy ------------- Only its label moves into the mono voice, so the one cross-cluster argument on the page is labelled the same way every other label on this site is. */ .entity-bridge .eb-kicker { font-family: var(--mono); font-weight: 400; font-size: var(--fs-mono); letter-spacing: .1em; color: var(--accent-deep); } /* ---- 8. tighten the tokens read actually uses ---------------------------- */ .stat .v { font-variant-numeric: tabular-nums lining-nums; } .stat .k { font-family: var(--mono); letter-spacing: .1em; } .sec-note { max-width: var(--measure); }