/* ==========================================================================
           #S  About — the colophon
           --------------------------------------------------------------------------
           The last room off the sidebar, drawn by public/29e-about.js. Built 2026-09-08.

           A page of statements: nothing on it acts, so nothing on it carries the magenta,
           and there is no word at the right of the head. The only thing this page does is
           tell you something, which is why its rows are allowed to be sentences where
           every other list in this world is one line.
           ========================================================================== */
        #aboutPage,
        #colophonPage {
            background: var(--log-stock);
        }

        #aboutPage.active,
        #colophonPage.active {
            display: flex;
            flex-direction: column;
            height: 100vh;
            height: 100dvh;
            min-height: 0;
            overflow: clip;
        }

        /* ---- the head ------------------------------------------------------------ */

        /* The head, its title and Back are the room head (.room-bar, css/11-home.css, since
           2026-09-16). What is this room's own: the page is a column with its own scroller,
           so the head must not shrink into it. */
        #aboutPage .ab-bar,
        #colophonPage .ab-bar {
            flex: none;
        }

        /* ---- the sheet ----------------------------------------------------------- */

        #aboutPage .ab-body,
        #colophonPage .ab-body {
            flex: 1;
            min-height: 0;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding-bottom: calc(var(--sp-2xl) + env(safe-area-inset-bottom, 0px));
        }

        /* The title plate: the book's own name, and one sentence saying what it is for.
           The only place in the app where the name is set large without a journey's name
           beside it. */
        #aboutPage .ab-plate,
        #colophonPage .ab-plate {
            padding: var(--sp-lg);
            border-bottom: 1px solid var(--log-rule-firm);
        }

        #aboutPage .ab-name,
        #colophonPage .ab-name {
            margin: 0 0 var(--sp-xs);
            font-family: var(--log-print);
            font-size: var(--fs-lg);
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            line-height: 1.15;
            color: var(--log-ink);
        }

        /* The one sentence under the name. `.ab-blurb`, not `.ab-line` — it was the
           latter for an hour, which made one class mean both "the sentence that says what
           this is" and "a row", and a selector that means two things is a selector that
           will one day style the wrong one. It already did: it caught the paragraph as a
           row. */
        #aboutPage .ab-blurb,
        #colophonPage .ab-blurb {
            margin: 0;
            font-family: var(--log-write);
            font-size: var(--fs-body);
            line-height: 1.5;
            color: var(--log-ink);
            max-width: 34em;
        }

        #aboutPage .ab-band,
        #colophonPage .ab-band {
            margin: 0;
            padding: var(--sp-xs) var(--sp-lg);
            background: var(--log-stock-band);
            border-top: 1px solid var(--log-rule-firm);
            border-bottom: 1px solid var(--log-rule-firm);
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--log-ink);
        }
        #aboutPage .ab-plate + .ab-band,
        #colophonPage .ab-plate + .ab-band { border-top: none; }

        /* ---- a statement --------------------------------------------------------- */

        /* Stacked, not set across: these are sentences, and the Register's one-line entry
           would put a service's whole explanation into an ellipsis. The name keeps the
           stamped voice and the sentence the written one, so the row still reads as an
           entry rather than a paragraph with a label. */
        #aboutPage .ab-line,
        #colophonPage .ab-line {
            display: flex;
            flex-direction: column;
            gap: 2px;
            padding: var(--sp-sm) var(--sp-lg);
            border-bottom: 1px solid var(--log-rule);
        }

        #aboutPage .ab-what,
        #colophonPage .ab-what {
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--log-ink);
        }

        #aboutPage .ab-said,
        #colophonPage .ab-said {
            font-family: var(--log-write);
            font-size: var(--fs-small);
            line-height: 1.45;
            color: var(--log-ink-soft);
            max-width: 40em;
            /* A build string is a machine's word and breaks where it likes. */
            overflow-wrap: anywhere;
        }

        #aboutPage .ab-note,
        #colophonPage .ab-note {
            margin: 0;
            padding: var(--sp-xs) var(--sp-lg) var(--sp-sm);
            font-family: var(--log-write);
            font-size: var(--fs-small);
            line-height: 1.45;
            color: var(--log-ink-soft);
            max-width: 40em;
        }

        /* The Ruled-To-The-Foot Rule: what is left of the sheet is ruled stock. */
        #aboutPage .ab-rule-out,
        #colophonPage .ab-rule-out {
            flex: 1;
            min-height: calc(var(--log-row) * 2);
            background-image: repeating-linear-gradient(to bottom,
                transparent 0,
                transparent calc(var(--log-row) - 1px),
                var(--log-rule) calc(var(--log-row) - 1px),
                var(--log-rule) var(--log-row));
        }

        /* ---- About's own prose ---------------------------------------------------- */

        /* A paragraph that argues, rather than a row that states. About has to say why
           this is not the third planner the reader has tried, and that is an argument in
           sentences; the colophon has none of these, and its softer .ab-note is a
           different thing — an aside beside a list, not the point of the band. */
        #aboutPage .ab-para {
            margin: 0;
            padding: var(--sp-sm) var(--sp-lg);
            font-family: var(--log-write);
            font-size: var(--fs-body);
            line-height: 1.55;
            color: var(--log-ink);
            max-width: 36em;
        }
        #aboutPage .ab-para + .ab-para { padding-top: 0; }
        #aboutPage .ab-para:last-of-type { padding-bottom: var(--sp-md); }

        /* The product's own three phrases, set in the printed voice inside a written
           sentence — the same treatment a journey's name gets in the Almanac's prose. */
        #aboutPage .ab-said-print {
            font-family: var(--log-print);
            font-size: var(--fs-small);
            font-weight: 600;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            white-space: nowrap;
        }

        /* The colophon opens under the bar with no plate above it, so its first band must
           not double the bar's own rule. */
        #colophonPage .ab-band-first { border-top: none; }

        /* ---- a row that goes somewhere -------------------------------------------- */

        /* Built on .ab-line so a door and a statement sit on the same grid, and marked as
           an act the only way this world marks one: the word underlined, in print caps, in
           the one ink. No glyph, and no magenta — neither of these changes the record. */
        #aboutPage .ab-go {
            width: 100%;
            text-align: left;
            background: none;
            border: none;
            border-bottom: 1px solid var(--log-rule);
            font: inherit;
            color: inherit;
            cursor: pointer;
            text-decoration: none;
        }
        #aboutPage .ab-go-word {
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--log-ink);
            text-decoration: underline;
            text-underline-offset: 0.25em;
            text-decoration-thickness: 1px;
        }
        /* The Ink-Not-Glow Rule: pressing thickens the row's own baseline. */
        #aboutPage .ab-go:active { box-shadow: inset 0 -2px 0 0 var(--log-ink); }
        #aboutPage .ab-go:focus-visible {
            outline: 2px solid var(--log-ink);
            outline-offset: -2px;
        }

        /* ---- a row that is not open yet -------------------------------------------- */

        /* The Stamped-State Rule, as Settings keeps it for Passkey and Language: the state
           is a word in a hairline box at the row's right, in the softer ink, and it is
           content. There is nothing to press, so this is not a button and takes no cursor.
           Buy me a coffee stands this way until there is an address to send one to —
           a support control that opens nothing spends the reader's good will on a dead
           press, which is worse than not asking at all. */
        #aboutPage .ab-line.is-soon {
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            gap: var(--sp-sm);
        }
        #aboutPage .ab-line.is-soon .ab-what { color: var(--log-ink-soft); }
        #aboutPage .ab-stamp {
            flex: none;
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--log-ink-soft);
            border: 1px solid var(--log-rule);
            padding: 2px var(--sp-xs);
        }