/* ============================================================
   The argument (15 September 2026)
   A page folded down to the four lines that carry its argument,
   in the page's own words, chosen in advance. Nothing is rewritten:
   everything that is not one of the four lines folds away, named,
   and comes back at a press. Furniture in the mono apparatus voice;
   the lines themselves keep the page's own type.
   Loaded after palimpsest.css, and the two colour rules for the
   lines carry their class twice, so a Tier 1 page's own paragraph
   colour does not outrank them.
   ============================================================ */

/* ---- the band under the bar: the control's only home, on every device's first screen ----
   It lived at the foot of the ribbon until 16 September 2026, which is halfway down a page
   and off a phone's first screen entirely. It now sits directly under whatever bar the page
   has, from page load, and carries both of its states: the way in before, the way back and
   the voice after. A spacer of its own height sits in the flow after the bar, so it never
   covers the first words of a page. */
.arg-band {
    position: fixed !important; left: 0; right: 0; top: 0;
    z-index: 38 !important;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 0.4rem 0.75rem;
    padding: 0.42rem 1rem;
    background: var(--bar-glass, var(--bar)); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
    border-bottom: 1px solid var(--reveal-deep);
    /* It rises into place rather than dropping into it (17 September 2026). Dropping meant the
       band spent its first third of a second 10px higher than its resting place, where the menu
       bar, which paints above it, covered the top of the switch: a screenshot taken on arrival
       shows the first line of a label sliced off. Nothing in the band ever passes behind the bar
       now. */
    opacity: 0; transform: translateY(0.6rem);
    transition: opacity 0.34s ease, transform 0.34s ease;
    pointer-events: none;
}
.arg-band.is-shown { opacity: 1; transform: translateY(0); pointer-events: auto; }
.arg-band-spacer { display: block; width: 100%; }

.arg-rib, .arg-full, .arg-hear, .arg-pace, .arg-band .rb-listen, .arg-band .rb-pace {
    display: inline-flex; align-items: center; gap: 0.55em;
    background: none; border: 1px solid var(--reveal-lit); border-radius: 0;
    padding: 0.32rem 0.7rem 0.3rem; margin: 0; cursor: pointer;
    font-family: var(--mono); font-size: var(--t-2); font-weight: 500;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--reveal-lit); line-height: 1.2;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}
/* ---- the two-position switch (17 September 2026) ----
   Two controls, joined, and the lit one is what the page is showing. "The full page" and
   "Just the argument" never change their words or their jobs: Tommy's report on the
   relabelled control was that it was not obvious the thing he had just pressed now did
   something else, and a switch with both positions in view is the shape that cannot be
   misread. The lit position is filled and inert; the other is the way across. */
.arg-switch { display: inline-flex; align-items: stretch; }
.arg-switch .arg-full, .arg-switch .arg-rib { position: relative; }
.arg-switch .arg-rib { margin-left: -1px; }
.arg-full:hover, .arg-rib:hover { background: var(--reveal-lit); color: var(--ink-deep); }
.arg-full[aria-pressed="true"], .arg-rib[aria-pressed="true"] {
    background: var(--reveal-lit); color: var(--ink-deep); border-color: var(--reveal-lit); cursor: default;
}
:root[data-daylight] .arg-full:hover, :root[data-daylight] .arg-rib:hover,
:root[data-daylight] .arg-full[aria-pressed="true"],
:root[data-daylight] .arg-rib[aria-pressed="true"] { color: var(--ink-raised); }
.arg-rib svg, .arg-full svg { width: 0.95rem; height: 0.95rem; display: block; }
.arg-rib svg rect, .arg-rib svg polygon, .arg-full svg rect { fill: currentColor; }
.arg-note {
    font-family: var(--mono); font-size: var(--t-2); letter-spacing: 0.06em;
    color: var(--reveal-lit); opacity: 0.85; white-space: nowrap;
}
/* ---- the one button to hear the page (17 September 2026) ----
   Listen on the full page and Hear the argument when folded share one slot after the switch
   and one treatment: filled oxide, the page ground for their ink, the one filled oxide thing in
   the band. Invitation, on purpose: Tommy did not find Listen in the header, and a way in the
   reader is meant to notice is filled rather than outlined, in a colour the apparatus beside
   it is not (the switch is reveal-lit; the pace and the note are outlined or bare). */
.arg-hear, .arg-band .rb-listen {
    background: var(--oxide); border-color: var(--oxide); color: var(--ink-deep);
    gap: 0.55em;
}
.arg-hear:hover, .arg-band .rb-listen:hover { background: var(--oxide-deep, var(--oxide)); border-color: var(--oxide-deep, var(--oxide)); color: var(--ink-deep); filter: brightness(1.08); }
:root[data-daylight] .arg-hear, :root[data-daylight] .arg-band .rb-listen,
:root[data-daylight] .arg-hear:hover, :root[data-daylight] .arg-band .rb-listen:hover { color: var(--ink-raised); }
.arg-band .rb-listen.is-active { border-color: var(--oxide); color: var(--ink-deep); }
:root[data-daylight] .arg-band .rb-listen.is-active { color: var(--ink-raised); }
.arg-band .rb-listen .rb-icon { width: 0.8rem; height: 0.8rem; color: currentColor; }
.arg-band .rb-listen .lsn-b { border-bottom-color: currentColor; }
.arg-band .rb-listen[hidden] { display: none; }
/* the shell's pace, while its reading plays, dressed as the argument's own pace beside it */
.arg-band .rb-pace {
    text-transform: none; letter-spacing: 0.04em; gap: 0; justify-content: center;
    font-variant-numeric: tabular-nums; min-width: 3.1rem;
    border-color: var(--oxide); color: var(--oxide); background: none;
}
.arg-band .rb-pace:hover { background: var(--oxide); color: var(--ink-deep); }
:root[data-daylight] .arg-band .rb-pace:hover { color: var(--ink-raised); }
.arg-band .rb-pace[hidden] { display: none; }
.arg-hear[hidden] { display: none; }
.arg-hear .arg-icon { width: 0.8rem; height: 0.8rem; display: block; }
.arg-hear .arg-pause { display: none; }
.arg-hear.is-playing .arg-play { display: none; }
.arg-hear.is-playing .arg-pause { display: block; }

/* ---- the pace (17 September 2026) ----
   The same control the foot strip carries on a full page, in the band's own box: the speed
   it is set to, in tabular figures so the box does not jump between 1x and 1.3x, in the
   oxide the Hear button wears, outlined rather than filled because it is apparatus and Hear
   is the invitation beside it. It takes its box from the three controls above rather than
   its own numbers, so it is exactly their height on a phone and at every text size, and it
   is never the loudest thing in the band.
   It is quietened by its size and its outline, never by opacity: a first pass held it at
   0.88 and the ink measured 3.89 to 1 against the band in daylight, under the site's floor,
   where the full ink measures 4.83 by lamplight 5.81. Quiet comes off the box, not the
   contrast. */
.arg-pace {
    text-transform: none; letter-spacing: 0.04em; gap: 0;
    font-variant-numeric: tabular-nums; justify-content: center;
    min-width: 3.1rem;
    border-color: var(--oxide); color: var(--oxide);
}
.arg-pace:hover { background: var(--oxide); color: var(--ink-deep); }
:root[data-daylight] .arg-pace:hover { color: var(--ink-raised); }
.arg-pace[hidden] { display: none; }

/* the way in beckons until it has been used once in this browsing session: the site's own
   ring around the argument position, rather than a page-wide dim. It is not filled while it
   beckons, because in the switch a fill means "this is what you are reading" and the full
   page is what a reader is reading on arrival. A beckon stops when it has been answered. */
.arg-band.is-beckoning .arg-rib::after {
    content: ""; position: absolute; inset: -3px;
    border: 2px solid var(--reveal-lit); pointer-events: none;
    animation: arg-ring 2.6s ease-out infinite;
}
@keyframes arg-ring {
    0%   { opacity: 0.55; transform: scale(1); }
    70%  { opacity: 0; transform: scale(1.14); }
    100% { opacity: 0; transform: scale(1.14); }
}

/* ---- the page, folded ----
   The class is doubled so a page's own style block, which the browser reads after this
   file, cannot hold a folded section open with its own !important padding; box-sizing is
   pinned because max-height clamps the content box alone on an element set to content-box,
   which leaves a section standing at the height of its padding; and a folded table is made
   a block for as long as it is folded, because max-height does not apply to a table at all.
   All three were found by measuring the folded height rather than looking at the page. */
.arg-fold.arg-fold {
    overflow: hidden;
    box-sizing: border-box;
    opacity: 0;
    margin-top: 0 !important; margin-bottom: 0 !important;
    padding-top: 0 !important; padding-bottom: 0 !important;
    border-top-width: 0 !important; border-bottom-width: 0 !important;
    pointer-events: none;
}
table.arg-fold.arg-fold { display: block; }
.arg-moving {
    transition: max-height 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease,
                margin 0.55s cubic-bezier(0.4, 0, 0.2, 1), padding 0.55s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.4s ease;
}
.arg-fold.arg-moving { filter: blur(2px); }

/* a folded stretch, named: what lies under the fold and how much of it */
.arg-gap {
    display: block; width: 100%;
    max-width: var(--max-prose, 680px);
    margin: 0.7rem 0 0.8rem;
    padding: 0.5rem 0 0.5rem 0;
    background: none; border: 0; border-top: 1px solid var(--reveal-deep); border-bottom: 1px solid var(--reveal-deep);
    text-align: left; cursor: pointer;
    font-family: var(--mono); font-size: var(--t-2); letter-spacing: 0.06em; line-height: 1.6;
    color: var(--reveal-lit);
    opacity: 0; transition: opacity 0.45s ease 0.35s, color 0.2s;
}
.arg-gap.is-shown { opacity: 1; }
.arg-gap:hover { color: var(--vellum); }
.arg-gap .arg-gap-mark { color: var(--reveal-deep); margin-right: 0.6em; }
.arg-gap .arg-gap-count { color: var(--vellum-dim); }
.arg-gap .arg-gap-count::before { content: "\00B7"; margin: 0 0.6em; color: var(--reveal-deep); }
.arg-gap .arg-gap-open { color: var(--oxide); }
.arg-gap .arg-gap-open::before { content: "\00B7"; margin: 0 0.6em; color: var(--reveal-deep); }
/* the homepage folds whole sections, which sit edge to edge: the marker keeps the
   reading column rather than running the full width of the screen */
.pal-home .arg-gap { margin-left: auto; margin-right: auto; }

/* ---- the four lines ---- */
.arg-label {
    display: block;
    font-family: var(--mono); font-size: var(--t-2); letter-spacing: 0.14em;
    color: var(--reveal-lit); line-height: 1.4;
    margin: 1.4rem 0 0.3rem;
    opacity: 0; transition: opacity 0.45s ease 0.3s;
}
.arg-label.is-shown { opacity: 1; }
.arg-label.arg-label-arg { color: var(--oxide); text-transform: uppercase; }
.arg-label:first-child { margin-top: 0; }
.pal-home .arg-label { max-width: var(--max-prose, 680px); margin-left: auto; margin-right: auto; }
/* in the folded page the lines sit closer: a pull quote sheds most of its air */
.arg-on .pull-quote.arg-keep { margin: 1rem 0 1.2rem; padding: 1.1rem 0 1.1rem 1.6rem; }
.arg-on p.arg-keep { margin-bottom: 1rem; }
/* the lines take the page's brightest ink; a pull quote is already set that way */
.arg-on .arg-keep.arg-keep { color: var(--vellum); }
/* a line that is one sentence of a longer paragraph: the rest of that paragraph is lifted
   out of the page while the fold is on (see light() in argument.js), and the sentence that
   stays ends in a small ellipsis, drawn here so it is never part of the page's own text */
.arg-on .arg-part.arg-part { color: var(--vellum); }
.arg-on .arg-part::after { content: "\2009\2026"; color: var(--vellum-dim); }

/* ---- the argument, heard: the line being spoken and the word ---- */
.arg-said { position: relative; }
p.arg-said::after, li.arg-said::after {
    content: ""; position: absolute; left: -1rem; top: 0.35em; bottom: 0.35em; width: 2px;
    background: var(--oxide);
}
.pull-quote.arg-said, blockquote.arg-said { border-left-color: var(--rubric); }
::highlight(bds-arg-line) { background-color: var(--said-line); }
::highlight(bds-arg-word) { background-color: var(--said-word); color: var(--said-word-ink); }

@media (max-width: 640px) {
    .arg-rib-wrap { gap: 0.4rem 0.6rem; }
    p.arg-said::after, li.arg-said::after { left: -0.7rem; }
}
@media (prefers-reduced-motion: reduce) {
    .arg-moving { transition: none; }
    .arg-fold.arg-moving { filter: none; }
    .arg-gap, .arg-label { transition: none; }
}

/* ============================================================
   The way back out of a folded page (16 September 2026)
   Tommy read a folded page on the live site and could not find the way out of it.
   Three answers, in the order a reader meets them: the control in the ribbon stops
   being the button that was just pressed and becomes a new one at the other end of
   the row; a closing band sits at the end of the four lines, where a reader who has
   read them is; and a pinned pill holds the way back on screen once the ribbon has
   scrolled away. The listening strip's Listen from here stands down while the page
   is folded, because the voice of a folded page is Hear the argument and the two
   cannot share the foot of a phone.
   ============================================================ */

/* the way back in the band is the switch's own first position, .arg-full, since 17 September 2026 */

/* ---- the closing band at the end of the four lines ---- */
.arg-close {
    display: block; width: 100%;
    max-width: var(--max-prose, 680px);
    margin: 2.4rem 0 0; padding: 1.2rem 0 0;
    border-top: 1px solid var(--reveal-deep);
    opacity: 0; transition: opacity 0.5s ease 0.25s;
}
.arg-close.is-shown { opacity: 1; }
/* its left edge and width are set from the fourth line by argument.js (17 September 2026),
   so it sits in the reading column on every page, the homepage's edge-to-edge sections included */
.arg-close { box-sizing: border-box; }
.arg-close-line {
    font-family: var(--mono); font-size: var(--t-2); letter-spacing: 0.06em;
    color: var(--reveal-lit); margin: 0 0 0.85rem; line-height: 1.5;
}
.arg-on .arg-close-line.arg-close-line { color: var(--reveal-lit); }
/* the closing band's way back: apparatus, outlined in the oxide, its own class so it never
   shares a selector with the control in the band under the bar */
.arg-close-btn {
    display: inline-flex; align-items: center; gap: 0.55em; margin: 0;
    background: none; border: 1px solid var(--oxide); border-radius: 0;
    padding: 0.42rem 0.8rem; cursor: pointer; min-height: 40px;
    font-family: var(--mono); font-size: var(--t-2); font-weight: 500;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--oxide); line-height: 1.2;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.arg-close-btn:hover { background: var(--oxide); color: var(--ink-deep); }
:root[data-daylight] .arg-close-btn:hover { color: var(--ink-raised); }
.arg-close-btn svg { width: 0.95rem; height: 0.95rem; display: block; }
.arg-close-btn svg rect, .arg-close-btn svg polygon { fill: currentColor; }

/* one voice control per state: the shell's way in to a reading stands down while the
   page is folded, and Hear the argument is the voice of a folded page */
body.is-argument #listenPin:has(.lp-toggle:not(.is-active)) { display: none; }
/* and so does the Carry on pill (16 September 2026, Tommy's decision): on the folded homepage it
   was landing on the argument's third line. A folded page carries nothing at its foot but its
   lines; the pill is back the moment the page is. */
body.is-argument .ho-pin { opacity: 0 !important; visibility: hidden; pointer-events: none; }

/* The marking notice that a folded page once had to hide is gone from the site
   (Your marks removed, 16 September 2026), so nothing is needed here any more. */

@media (max-width: 640px) {
    /* the band is permanent furniture on a phone, so it is kept as shallow as a 44px control
       and a line of apparatus allow: tighter padding, a smaller note, no row gap */
    .arg-band { padding: 0.35rem 0.6rem 0.4rem; gap: 0.1rem 0.5rem; }
    .arg-rib, .arg-full, .arg-hear, .arg-pace, .arg-band .rb-listen, .arg-band .rb-pace { padding: 0.32rem 0.58rem 0.3rem; letter-spacing: 0.055em; }
    .arg-pace, .arg-band .rb-pace { letter-spacing: 0.04em; min-width: 2.9rem; }
    /* with Listen in the band a phone's band is two rows at rest (Tommy accepted about 95px,
       17 September 2026); the note would make it three, so on a phone it stands down */
    .arg-band.has-listen .arg-note { display: none; }
    /* --t-3 is 0.86rem, LARGER than the --t-2 the control is set in, so this line rendered at
       14.62px against the button's 12.24px and read as the loudest thing in the band. It takes the
       smallest apparatus size on the site instead, which is about thirty per cent down and sits
       under the control rather than shouting over it. Measured, not guessed: the sizes are
       --t-1 0.62rem, --t-2 0.72rem, --t-3 0.86rem. */
    /* a literal 0.62rem rather than the --t-1 token: the token is lifted to 12px on phones from
       16 September 2026 (the smallest labels were 10.5px), and Tommy set this note smaller than
       the control beside it the same morning, so it keeps that size */
    .arg-note { font-size: 0.62rem;   /* holds: pinned band, follow-up 43 */ letter-spacing: 0.05em; opacity: 0.75; }
}
@media (prefers-reduced-motion: reduce) {
    .arg-close, .arg-band { transition: none; }
    .arg-band { transform: none; }
    .arg-band.is-beckoning .arg-rib::after { animation: none; }
}

/* ============================================================
   The switch says what each side costs (17 September 2026)
   The caption used to sit loose at the end of the band. Once Listen moved in front of it,
   "four lines, half a minute" read as a claim about a reading that takes several minutes,
   so it is now the second line of the half it belongs to, and the full page answers it with
   the reading time the ribbon already works out. Tommy chose this from four options drawn on
   the real bar: "I really like number two, head and shoulders above all the others."
   Three things hold it together. Both halves carry a sub-line in both states, so the band is
   exactly the same height folded and unfolded and the page never moves under the press. The
   sub-line is quietened by its size and its case, never by its opacity, so it keeps the full
   token ink on the filled half as well as the outlined one. And the size is a multiple of
   var(--read), so it answers to the reading-size control like everything else on the page.
   Placed last in the file on purpose: it overrides the band's own align-items and the phone
   block above, and a rule written before the rule it beats does nothing.
   ============================================================ */
.arg-switch .arg-full, .arg-switch .arg-rib { padding-top: 0.26rem; padding-bottom: 0.24rem; }
.arg-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 0.06rem; }
.arg-sub {
    font-size: 0.62rem;   /* holds: pinned band, follow-up 43 */
    letter-spacing: 0.05em; text-transform: none; font-weight: 400;
    white-space: nowrap;
}
/* every box in the band takes the height of the tallest, so a two-line switch beside the
   one-line Listen and pace reads as one row of controls rather than as a mistake */
.arg-band { align-items: stretch; }

@media (max-width: 640px) {
    /* the band is permanent furniture on a phone, and two rows of it is what Tommy accepted on
       17 September: a second line on each half of the switch would make it a third of a small
       screen, so both stand down and a phone's switch is exactly the one that is there today,
       at the padding the phone block above gives every control */
    .arg-sub { display: none; }
    /* the stack itself is taken out of the box tree on a phone, rather than merely emptied:
       a wrapper with one child still measures 2px taller than the bare word, which drew the
       switch at 29px against Hear the argument's 27 on the second row of the band. A control
       in a row of controls takes the neighbours' metrics, never its own. */
    .arg-stack { display: contents; }
    .arg-switch .arg-full, .arg-switch .arg-rib { padding-top: 0.32rem; padding-bottom: 0.3rem; }
}