/* The Mansa Court — the members' area. Layout and colour only.

   Governed by MEMBERS' AREA: DESIGN RULE in ../CLAUDE.md, and checked by
   test/members-style.test.py on every build. In short, as it bears on this file:

     rule 2  no font-size, letter-spacing, font-weight, font-family or text-transform here or
             anywhere in members/. Type comes from ../tokens.css and nowhere else. line-height,
             font-style and text-indent are not tokens.css's to own and may be set.
     rule 3  these colours and no others (the public site's, from 25 September 2026):
               #DFD4BB cream   #1D1A15 ink        #560000 the Court's red   #800000 red, hovered
               #554E42 navigation   #615A4C muted   #4E483C the copyright tone
               rgba(86,0,0, .25 / .28 / .30 / .45 / .5) the hairlines, which are red
               rgba(223,212,187,0.83) the wash of cream over the paper
     rule 5  no cards, boxes, borders round content, shadows, rounded corners, gradients,
             animation, transitions, fades or smooth scrolling. The resets the rule permits,
             border-radius: 0 and the cream autofill shadow, are here: they add nothing visible,
             they only stop the browser adding something. So is the paper's wash, a gradient of
             one colour at both ends, which paints a flat tint as the public pages do.
     rule 7  a standalone action is .t-action, a return or navigation link is .t-link, and a link
             inside a sentence carries a hairline so that colour is not its only mark.
     rule 9  a tap target is at least 24px, and 44px where the layout allows. Every one below is
             made by padding cancelled by an equal negative margin, so nothing moves on the page. */

/* The paper of the public site's standalone pages (The Almanac, the entry and policy pages), exactly
   as they lay it: the cream, and over the stationery a wash of the same cream at 0.83, so that the
   paper shows through as texture and never darkens the text. The wash is written as a gradient of
   one colour at both ends, which paints a flat tint and nothing a reader could see as a gradient;
   it is the one gradient rule 5 permits, in exactly this form. The body's ground is left to reach
   the canvas, as on the public pages. */
body { margin: 0; background-color: #DFD4BB; background-image: linear-gradient(rgba(223,212,187,0.83), rgba(223,212,187,0.83)), url("../photos/paper-stationery.webp"); background-size: auto, 420px auto; background-repeat: repeat, repeat; background-attachment: scroll, scroll; color: #1D1A15; }
/* Cream on the Court's red. Ink on red cannot be read. */
::selection { background: #560000; color: #DFD4BB; }
a { color: #560000; text-decoration: none; }
a:hover { color: #800000; }
a:focus-visible, button:focus-visible { outline: 1px solid #560000; outline-offset: 5px; }
[hidden] { display: none !important; }

/* Colour, by name. */
.mc-ink { color: #1D1A15; }
.mc-prose { color: #1D1A15; }
.mc-muted { color: #615A4C; }
.mc-ox { color: #560000; }
.mc-italic { font-style: italic; }

/* The page: a single column, the footer at the foot. */
.mc-page { min-height: 100svh; display: flex; flex-direction: column; }
.mc-main { flex: 1; box-sizing: border-box; width: 100%; max-width: 760px; margin: 0 auto; padding: clamp(72px,12vh,128px) 24px clamp(64px,10vh,104px); }
.mc-main--entrance { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-top: clamp(48px,10vh,96px); padding-bottom: clamp(48px,10vh,96px); }

/* The head: crest, then the diamond rule. On a gated page these stand outside the room, so that
   a member who is waiting on Memberstack sees the Court's paper rather than nothing. */
.mc-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.mc-crest { display: block; line-height: 0; }
.mc-crest img { display: block; height: 80px; width: auto; }
.mc-rule { display: flex; align-items: center; justify-content: center; gap: 9px; width: 236px; max-width: 66%; height: 17px; opacity: 0.6; margin: clamp(22px,3.4vh,30px) 0; }
.mc-rule > span { flex: 1; height: 1px; background: #560000; }
.mc-rule > span:nth-child(2) { flex: none; width: 5px; height: 5px; transform: rotate(45deg); }
.mc-titles { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* Rule 6: a page heading is set as the public site sets one on The Almanac, The Lexicon and the
   engagement pages, which is .t-page. A heading within a page, such as a section's, is .t-title. */
.mc-titles h1 { margin: 0; line-height: 1.25; }
.mc-titles p { margin: clamp(18px,2.6vh,24px) 0 0; }

/* The way between the rooms. */
.mc-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 34px 16px; margin-top: clamp(22px,3.4vh,34px); }
.mc-nav a { color: #554E42; padding: 16px 0; margin: -16px 0; }
.mc-nav a:hover, .mc-nav a[aria-current="page"] { color: #560000; }
.mc-sep { flex: none; width: 4px; height: 4px; background: #560000; transform: rotate(45deg); opacity: 0.8; }
/* With the Ledger the way between the rooms holds five links, and five cannot share one line with
   their separators inside the page's column: at every width one separator would be left hanging at
   the end of the first line. So they go, as they do wherever a line of links wraps (below), and the
   links are spaced as they are there. Four links keep their separators from 681px, where they share
   one line (below). Measured in a copy: the five then sit on one line from 752px up and wrap cleanly
   below, no target overlapping another. */
.mc-nav:has(> a:nth-of-type(5)) .mc-sep { display: none; }
.mc-nav:has(> a:nth-of-type(5)) { gap: 34px 26px; }
/* Six links (Letters joined the rooms, 4 October 2026) cannot share one line in the page's column without crowding:
   at 1440 they need 677px of the column's 712, leaving 7px between them. So they stand three and three, in columns,
   and below 520px, where three no longer fit, two and two and two: never one left alone on a line (the owner). */
.mc-nav:has(> a:nth-of-type(6)) { display: grid; grid-template-columns: repeat(3, max-content); justify-content: center; justify-items: center; }
@media (max-width: 520px) {
  .mc-nav:has(> a:nth-of-type(6)) { grid-template-columns: repeat(2, max-content); }
}
/* Eight links (the owner, 5 October 2026): The Photographs joined the rooms, and The Handbook came up from the foot
   of the room. Only the spacing, the columns and the breaks change; the type is the navigation's own. Measured in a
   copy (runs/photo-link-agent, nav-proto2): four and four, in columns, need a 608px column, which a 656px window
   gives (the column is the window less 48px, and at most 712px); two and two a 325px column, which a 373px window
   gives. Four and four start at 680px, not 656px, so that a browser that takes a scrollbar's width from the window
   (Windows, up to 17px) still never scrolls sideways; 680px is the breakpoint the navigation already keeps. So from
   680px they stand four and four (The Register, Invitations, Letters, The Photographs; then Your
   Season, Particulars, The Ledger, The Handbook), from 373px two and two and two and two, in columns, and below that
   in the same pairs, each pair centred on a line of its own. Never one alone on a line (the owner). The rows keep the
   gap of a wrapping navigation (34px), deeper than the 32px the targets reach above and below their line.
   With the Ledger closed the navigation would hold seven, and the six links' rule above would leave The Handbook
   alone on a line: a closed Ledger would need a rule of its own. None is built, since the Ledger stands open on
   every draft and in production. */
.mc-nav:has(> a:nth-of-type(8)) { grid-template-columns: repeat(4, max-content); }
@media (max-width: 679px) {
  .mc-nav:has(> a:nth-of-type(8)) { grid-template-columns: repeat(2, max-content); }
}
/* Below 373px two columns no longer fit, and each pair stands centred on a line of its own, its two links 16px apart;
   the widest pair (Letters and The Photographs) is 264px, which a 312px window still holds. Each pair is closed by a
   forced break: every second separator, shown as an empty line the column's width and no height, so nothing is
   drawn. The links keep their 16px of padding cancelled by margin, so nothing moves; between two pairs stand two row
   gaps and the break, 34px in all, so a pair's targets never reach the pair above (rule 9). */
@media (max-width: 372px) {
  .mc-nav:has(> a:nth-of-type(8)) { display: flex; column-gap: 16px; row-gap: 17px; }
  .mc-nav:has(> a:nth-of-type(8)) > .mc-sep:nth-of-type(2n) { display: block; width: 100%; height: 0; transform: none; }
}

/* A section: the Almanac's heading line, title to the left, dotted leader, band to the right. */
.mc-section { margin-top: clamp(56px,8vh,84px); }
.mc-heading { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid #560000; }
.mc-heading .t-title { margin: 0; color: #560000; }
.mc-heading .t-band { white-space: nowrap; color: #615A4C; }
.mc-leader { flex: 1; min-width: 10px; height: 0; border-bottom: 1px dotted rgba(86,0,0,0.30); }
/* Where the title and its band cannot share a line (Invitations' season, the Register's order, on a 320px telephone),
   the band moves under the heading, set to the right, and wraps there if it must, rather than running past the page
   (the owner, 7 October 2026). The leader keeps the title's line. Nothing in a heading is a target, so no row gap is
   owed to rule 9. */
.mc-heading { flex-wrap: wrap; row-gap: 8px; }
.mc-heading .t-band { margin-left: auto; min-width: 0; text-align: right; }
@media (max-width: 480px) {
  .mc-heading .t-band { white-space: normal; overflow-wrap: anywhere; }
}

/* A line in a list: the Almanac's row. */
.mc-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.mc-row { display: flex; align-items: baseline; gap: 16px; padding: clamp(13px,1.7vh,17px) 0; border-bottom: 1px solid rgba(86,0,0,0.28); }
.mc-row .t-entry { color: #1D1A15; text-wrap: pretty; }
.mc-row .t-band { margin-left: auto; text-align: right; white-space: nowrap; color: #615A4C; }

/* An invitation: the name, then its particulars, then the reply. */
.mc-invitation { padding: clamp(30px,4.4vh,44px) 0; border-bottom: 1px solid rgba(86,0,0,0.28); }
.mc-invitation h3 { margin: 0; line-height: 1.3; color: #1D1A15; text-wrap: pretty; }
.mc-particulars { display: grid; grid-template-columns: max-content 1fr; gap: 10px clamp(20px,4vw,40px); margin: clamp(18px,2.6vh,24px) 0 0; }
.mc-particulars dt { margin: 0; padding-top: 0.62em; color: #615A4C; }
.mc-particulars dd { margin: 0; line-height: 1.7; color: #1D1A15; text-wrap: pretty; }
.mc-reply { display: flex; flex-wrap: wrap; align-items: baseline; gap: 22px 16px; margin-top: clamp(24px,3.4vh,32px); }
/* Item 10: a reply is marked by the Court's diamond, exactly as an option is on Particulars --
   outlined while it is not the reply given, filled when it is. An underline was the mark before,
   which is the one thing the members' area uses for a link. */
.mc-reply button { appearance: none; -webkit-appearance: none; background: transparent; border: 0; border-radius: 0; margin: -10px 0; padding: 10px 0; display: inline-flex; align-items: baseline; gap: 9px; color: #554E42; cursor: pointer; }
.mc-reply button::before { content: ""; flex: none; width: 5px; height: 5px; transform: rotate(45deg); border: 1px solid #560000; }
.mc-reply button[aria-pressed="true"]::before { background: #560000; }
.mc-reply button:hover { color: #560000; }
.mc-reply button[aria-pressed="true"] { color: #560000; }
.mc-reply button:disabled { cursor: default; }
.mc-reply button:disabled:not([aria-pressed="true"]) { color: #615A4C; }
.mc-reply button:disabled:hover { color: #615A4C; }
.mc-reply button[aria-pressed="true"]:disabled:hover { color: #560000; }
.mc-said { margin: 14px 0 0; line-height: 1.85; font-style: italic; color: #615A4C; }
.mc-said:empty { margin: 0; }
.mc-said.mc-ox { color: #560000; }

/* Prose. A link inside a sentence carries a hairline, so that colour is not its only mark, and
   its focus ring sits close enough not to strike the next word. */
.mc-prose-block { margin: clamp(34px,5vh,46px) 0 0; text-wrap: pretty; }
.mc-aside { margin: clamp(38px,5.4vh,56px) 0 0; text-align: center; font-style: italic; color: #615A4C; text-wrap: pretty; }
.mc-prose-block a, .mc-aside a, .mc-said a, .mc-error a, .mc-quiet a, .mc-terms a, .mc-code a, .mc-fixed-note a, .mc-handbook a, .mc-waiting-note a {
  color: #560000; border-bottom: 1px solid rgba(86,0,0,0.45); padding-top: 8px; padding-bottom: 1px;
}
/* Item 16: a short link inside a sentence is kept whole, so that "the password page" does not
   break after "the". Only the said and error lines, whose links are short by design. */
.mc-said a, .mc-error a { white-space: nowrap; }
.mc-prose-block a:hover, .mc-aside a:hover, .mc-said a:hover, .mc-error a:hover, .mc-quiet a:hover, .mc-terms a:hover, .mc-code a:hover, .mc-fixed-note a:hover, .mc-handbook a:hover, .mc-waiting-note a:hover { color: #800000; border-bottom-color: #800000; }
.mc-prose-block a:focus-visible, .mc-aside a:focus-visible, .mc-said a:focus-visible, .mc-error a:focus-visible, .mc-quiet a:focus-visible, .mc-terms a:focus-visible, .mc-code a:focus-visible, .mc-fixed-note a:focus-visible, .mc-handbook a:focus-visible, .mc-waiting-note a:focus-visible { outline-offset: 2px; }

/* The Code, as the public site sets it: a label, then the rule beneath it. */
.mc-code { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(34px,5vh,52px) clamp(40px,7vw,88px); margin-top: clamp(40px,6vh,64px); text-align: left; }
.mc-code .t-label { margin: 0 0 13px; color: #560000; }
.mc-code .t-body { margin: 0; color: #1D1A15; text-wrap: pretty; }

/* The Terms: a clause heading, then its paragraphs, down the measure. */
.mc-terms { display: flex; flex-direction: column; gap: clamp(34px,5vh,46px); margin-top: clamp(40px,6vh,64px); }
.mc-terms section { display: flex; flex-direction: column; gap: 13px; }
.mc-terms h2 { margin: 0; color: #560000; }
.mc-terms h3 { margin: 0; color: #615A4C; }
.mc-terms p { margin: 0; color: #1D1A15; text-wrap: pretty; }
/* A run-in head. It is rendered as <em>, not <strong>, so that no weight above the 400 the
   Court loads is ever asked for and the browser never draws a synthetic bold (item 9). The
   strong is kept only so that an older build does not lose its italic. */
.mc-terms em, .mc-terms strong { font-style: italic; }

/* The Handbook: a section title on the Almanac's hairline, then short paragraphs down the measure,
   each subsection a question, and its sources said once, quietly, at its end. Drawn by members.js
   from /api/room; nothing of it is in the page. */
.mc-handbook { display: flex; flex-direction: column; gap: 14px; margin-top: clamp(40px,6vh,64px); }
.mc-handbook h2 { margin: clamp(40px,6vh,60px) 0 6px; padding-bottom: 14px; border-bottom: 1px solid #560000; color: #560000; }
.mc-handbook h2:first-child { margin-top: 0; }
.mc-handbook h3 { margin: clamp(22px,3.2vh,30px) 0 0; color: #1D1A15; }
.mc-handbook p, .mc-handbook li { margin: 0; color: #1D1A15; text-wrap: pretty; }
.mc-handbook ol, .mc-handbook ul { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 14px; }
.mc-handbook ol { list-style: decimal; }
.mc-handbook ul { list-style: none; padding-left: 0; }
.mc-handbook em { font-style: italic; }
.mc-handbook .mc-sources { font-style: italic; color: #615A4C; }

/* The form: the Antechamber's. A label, a field on a hairline, one action. */
.mc-form { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: clamp(26px,4vh,36px); text-align: left; margin-top: clamp(34px,5vh,48px); }
.mc-field { display: flex; flex-direction: column; gap: 7px; }
.mc-field .t-label { color: #615A4C; }
.mc-field input { background: transparent; border: 0; border-bottom: 1px solid rgba(86,0,0,0.45); border-radius: 0; padding: 8px 0; color: #1D1A15; appearance: none; -webkit-appearance: none; }
.mc-field input:focus { outline: none; border-bottom-color: #560000; }
/* Two hairlines deep where the browser marks the focus, and a pixel off the padding so that the
   field does not grow and the page does not shift. */
.mc-field input:focus-visible { border-bottom: 2px solid #560000; padding-bottom: 7px; }
.mc-field input[aria-invalid="true"] { border-bottom-color: #560000; }
/* No icon but the diamond: the browser's own marks inside a field are put away. */
.mc-field input::-ms-reveal, .mc-field input::-ms-clear { display: none; }
/* The browser paints an autofilled field its own colour. The reset paints it back to the Court's
   cream: a flat inset shadow puts nothing on the page that can be seen (rule 5). */
.mc-field input:-webkit-autofill { -webkit-text-fill-color: #1D1A15; box-shadow: 0 0 0 1000px #DFD4BB inset; }
/* A password field, with the word that shows it beside it. The two share one hairline, so the
   field reads as one line. No icon: the design rule allows none but the diamond. */
.mc-secret { display: flex; align-items: baseline; gap: 14px; padding-bottom: 1px;
  border-bottom: 1px solid rgba(86,0,0,0.45); }
.mc-secret input { flex: 1; min-width: 0; border-bottom: 0; }
.mc-secret input:focus-visible { border-bottom: 0; padding-bottom: 8px; }
/* Two hairlines deep, as .mc-field input is, and a pixel off the padding so nothing moves. */
.mc-secret:focus-within { border-bottom: 2px solid #560000; padding-bottom: 0; }
.mc-secret .mc-show { appearance: none; -webkit-appearance: none; background: transparent; border: 0; border-radius: 0; flex: none; margin: -15px 0; padding: 15px 0; color: #615A4C; cursor: pointer; }
.mc-secret .mc-show:hover { color: #560000; }
.mc-field .mc-help { margin-top: 7px; }

.mc-action { align-self: center; appearance: none; -webkit-appearance: none; background: transparent; border: 0; border-bottom: 1px solid #560000; border-radius: 0; margin: -19px 0 0; padding: 19px 4px 7px; color: #560000; cursor: pointer; }
.mc-action:hover { color: #800000; border-bottom-color: #800000; }
.mc-action:disabled { cursor: default; color: #615A4C; border-bottom-color: rgba(86,0,0,0.45); }
.mc-another { align-self: center; appearance: none; -webkit-appearance: none; background: transparent; border: 0; border-radius: 0; margin: -15px 0; padding: 15px 0; color: #615A4C; cursor: pointer; }
.mc-another:hover { color: #560000; }
.mc-error { margin: 0; text-align: center; line-height: 1.85; font-style: italic; color: #560000; }
.mc-quiet { margin: clamp(40px,6vh,60px) 0 0; max-width: 46ch; text-align: center; line-height: 1.85; font-style: italic; color: #615A4C; text-wrap: pretty; }
.mc-quiet + .mc-quiet { margin-top: clamp(14px,2vh,20px); }
.mc-confirm { margin: clamp(34px,5vh,48px) 0 0; max-width: 40ch; line-height: 1.8; color: #560000; }
.mc-confirm:focus { outline: none; }

/* The return, and the foot of the page. */
.mc-return { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 34px 16px; margin-top: clamp(60px,9vh,92px); }
.mc-return a, .mc-return button { color: #615A4C; padding: 16px 0; margin: -16px 0; }
.mc-return a:hover, .mc-return button:hover { color: #560000; }
.mc-return a[aria-current="page"] { color: #560000; }
.mc-return button { appearance: none; -webkit-appearance: none; background: transparent; border: 0; border-radius: 0; cursor: pointer; }
/* The Handbook stood in this row from 25 September 2026, a fifth, and the row's separators went at every width. On
   5 October 2026 it went up into the navigation (the owner), and the row holds four again: The Code, The Terms, The
   Password and Take Leave. With their separators they need 541px of the column, which a 589px window gives (measured
   that day in a copy), so they keep them above 620px, as the row did before, and below it stand two and two (below). */
/* The way back to the entrance is a red line on a hairline, as .t-link is elsewhere. */
.mc-return .mc-underlined, .mc-underlined { color: #560000; border-bottom: 1px solid rgba(86,0,0,0.5); padding-bottom: 6px; }
.mc-return .mc-underlined:hover, .mc-underlined:hover { color: #800000; border-bottom-color: #800000; }
.mc-foot { padding: clamp(56px,9vh,88px) 24px; display: flex; flex-direction: column; align-items: center; text-align: center; border-top: 1px solid rgba(86,0,0,0.25); }
.mc-foot p { margin: 0; }
.mc-foot .t-nav { color: #615A4C; }
.mc-foot .t-nav a { color: #615A4C; padding: 14px 0; margin: -14px 0; }
.mc-foot .t-nav a:hover { color: #560000; }
.mc-foot .t-fine { margin-top: clamp(30px,5vh,44px); color: #4E483C; }

/* ── Particulars ─────────────────────────────────────────────────────────────────────────────
   A page of fields, in two parts. Nothing here is kept on the site: every field is read from and
   written to the member's own Memberstack record (rule 12). */
.mc-fields { display: flex; flex-direction: column; gap: clamp(26px,4vh,36px); margin-top: clamp(26px,4vh,36px); max-width: 560px; }
.mc-fields .mc-field { max-width: none; }
/* A value the Court holds and the member reads but does not set. It sits where an input would,
   so that a part reads as one list, but it is plainly not a field to type in. */
/* It sits where an input would so that a part reads as one list, but it carries NO rule: a
   hairline beneath it is what a field looks like, and these are the Court's record, not fields. */
.mc-fixed { margin: 7px 0 0; padding: 0; color: #1D1A15; }

.mc-help { margin: 0; line-height: 1.6; font-style: italic; color: #615A4C; text-wrap: pretty; }
/* Said once beneath the whole block of fixed particulars rather than under each one. It follows a
   list whose last line already carries a rule, so it needs air above it. This MUST stand after
   .mc-help, whose margin: 0 would otherwise win on equal specificity and leave it flush. */
.mc-fixed-note { margin: clamp(20px,2.6vh,26px) 0 0; }
/* Said once for a form rather than under each password in it, which read as a stammer. The
   form's own gap would set it too far from the fields it belongs to. */
.mc-read { margin-top: calc(7px - clamp(26px,4vh,36px)); }
.mc-subheading { margin: clamp(46px,7vh,68px) 0 0; color: #560000; }
/* Well clear of the field above, and close to the pair it heads, so it reads as a heading. */
.mc-pair { margin: clamp(30px,4.6vh,42px) 0 -6px; }
.mc-fields > .mc-pair:first-child { margin-top: clamp(10px,1.6vh,14px); }
.mc-keep { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: clamp(40px,6vh,60px); }
.mc-keep .mc-said { margin: 0; text-align: center; }

/* The Ledger. A row names a charge and what it comes to; under it stands either the action that
   settles it or, once settled, the day it was paid and the way to its receipt. The padding that
   makes each a proper tap target is cancelled by negative margin, so nothing moves (rule 9). */
.mc-settle { margin: -4px 0 clamp(13px,1.7vh,17px); }
.mc-settle button { appearance: none; -webkit-appearance: none; background: transparent; border: 0; border-bottom: 1px solid #560000; border-radius: 0; margin: -15px 0 0; padding: 15px 4px 6px; color: #560000; cursor: pointer; }
.mc-settle button:hover { color: #800000; border-bottom-color: #800000; }
.mc-settle button:disabled { cursor: default; color: #615A4C; border-bottom-color: rgba(86,0,0,0.45); }

/* Clear of the row's hairline above it (7 October 2026): tucked 4px under it, the day paid and Receipt were crossed by
   it, which Receipt's old box had hidden. */
.mc-under { display: flex; align-items: baseline; gap: 12px; margin: 8px 0 clamp(13px,1.7vh,17px); color: #615A4C; }
.mc-under .t-band { color: #615A4C; }
.mc-under a, .mc-under button { margin-left: auto; padding: 12px 0; margin-top: -12px; margin-bottom: -12px; color: #560000; }
.mc-under a:hover, .mc-under button:hover { color: #800000; }
/* A button beneath a row (the Ledger's Receipt) reads as the link beside it would: no ground, no frame, its type the
   link's own class (t-link), and nothing of the browser's button drawn (the owner, 7 October 2026). */
.mc-under button { appearance: none; -webkit-appearance: none; background: transparent; border: 0; border-radius: 0; cursor: pointer; }
/* "Add to Calendar" beneath a reply in Your Season (D2): clear of the row's hairline, its target with it. */
.mc-under.mc-cal { margin-top: 14px; }

/* What a part comes to, under its list. */
.mc-sum { display: flex; align-items: baseline; gap: 12px; margin: clamp(15px,2vh,19px) 0 0; color: #1D1A15; }
.mc-sum .t-band { margin-left: auto; text-align: right; white-space: nowrap; color: #1D1A15; }

/* An option is a word with the Court's diamond beside it: open when it is not chosen, filled when
   it is, as the public site draws every other diamond. No checkbox, no radio, no other icon. */
.mc-options { display: flex; flex-wrap: wrap; align-items: baseline; gap: 20px 20px; }
.mc-options button { appearance: none; -webkit-appearance: none; background: transparent; border: 0; border-radius: 0; margin: -9px 0; padding: 9px 0; display: inline-flex; align-items: baseline; gap: 9px; color: #554E42; cursor: pointer; }
.mc-options button::before { content: ""; flex: none; width: 5px; height: 5px; transform: rotate(45deg); border: 1px solid #560000; }
.mc-options button[aria-checked="true"]::before, .mc-options button[aria-pressed="true"]::before { background: #560000; }
.mc-options button[aria-checked="true"], .mc-options button[aria-pressed="true"] { color: #560000; }
.mc-options button:hover { color: #1D1A15; }

/* The lines a member writes for the Register, and the count of what is left. */
.mc-lines { background: transparent; border: 0; border-bottom: 1px solid rgba(86,0,0,0.45); border-radius: 0; padding: 8px 0; color: #1D1A15; line-height: 1.85; resize: none; appearance: none; -webkit-appearance: none; }
.mc-lines:focus { outline: none; border-bottom-color: #560000; }
.mc-lines:focus-visible { border-bottom: 2px solid #560000; padding-bottom: 7px; }
.mc-count { color: #615A4C; }
.mc-count:empty { display: none; }

/* The photograph: warm monochrome, in multiply over the cream, so that it sits with the
   engravings on the public site. Its own proportion, never cropped round, never rounded. */
.mc-photo { display: block; width: 116px; height: auto; border-radius: 0; filter: grayscale(1) sepia(0.36) contrast(1.02); mix-blend-mode: multiply; }
.mc-photo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 30px 16px; }
.mc-photo-row button { appearance: none; -webkit-appearance: none; background: transparent; border: 0;
  border-radius: 0; cursor: pointer; color: #554E42; padding: 14px 0; margin: -14px 0; }
.mc-photo-row button:hover { color: #560000; }
.mc-preview { margin-top: clamp(46px,7vh,68px); }
.mc-preview .mc-entry { padding-top: clamp(20px,3vh,28px); }

/* An entry in the Register, as another member reads it: opened beneath the name, as an engagement
   opens beneath its row on the public calendar. */
.mc-entry { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(20px,3vw,34px); padding: 0 0 clamp(26px,4vh,38px); }
.mc-entry .mc-photo { width: 116px; }
.mc-entry-words { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 12px; }
.mc-entry-words h3 { margin: 0; line-height: 1.3; color: #1D1A15; }
.mc-entry-words .t-band { color: #615A4C; }
.mc-entry-words .mc-lines-read { margin: 0; line-height: 1.85; color: #1D1A15; text-wrap: pretty; white-space: pre-line; }
.mc-entry-words .mc-entry-foot { margin: 0; line-height: 1.85; font-style: italic; color: #615A4C; text-wrap: pretty; }
.mc-entry-words .mc-entry-foot a { color: #560000; border-bottom: 1px solid rgba(86,0,0,0.45); padding-top: 8px; padding-bottom: 1px; }
.mc-entry-words .mc-entry-foot a:hover { color: #800000; border-bottom-color: #800000; }
.mc-entry-words .mc-entry-foot a:focus-visible { outline-offset: 2px; }

/* A name in the Register is a way in. It opens its own entry and closes any other. */
.mc-row button.mc-name { appearance: none; -webkit-appearance: none; background: transparent; border: 0; border-radius: 0; margin: -8px 0; padding: 8px 0; text-align: left; color: #560000; cursor: pointer; }
.mc-row button.mc-name:hover { color: #800000; }
.mc-row button.mc-name[aria-expanded="true"] { color: #560000; }
/* It stands under the navigation, whose links reach 16px below their row (rule 9), and holds a link
   of its own that reaches 8px above its line: the navigation's own row gap keeps the two apart. */
.mc-asked { margin: 34px 0 clamp(30px,4.4vh,44px); line-height: 1.85; font-style: italic; color: #615A4C; text-wrap: pretty; }
.mc-asked a { color: #560000; border-bottom: 1px solid rgba(86,0,0,0.45); padding-top: 8px; padding-bottom: 1px; }
.mc-asked a:hover { color: #800000; border-bottom-color: #800000; }
.mc-asked a:focus-visible { outline-offset: 2px; }

/* Your Season: marking an engagement, and unmarking one from the list. */
.mc-mark { margin-top: clamp(24px,3.4vh,32px); }
.mc-subheading + .mc-quiet { margin-top: clamp(18px,2.6vh,24px); }
.mc-row button.mc-unmark { appearance: none; -webkit-appearance: none; background: transparent; border: 0; border-radius: 0; margin: -8px 0; padding: 8px 0; display: inline-flex; align-items: baseline; gap: 9px; text-align: left; color: #1D1A15; cursor: pointer; }
.mc-row button.mc-unmark::before { content: ""; flex: none; width: 5px; height: 5px; transform: rotate(45deg); background: #560000; }
.mc-row button.mc-unmark:hover { color: #560000; }
.mc-row button.mc-unmark:hover::before { background: #800000; }
.mc-arrange { margin: 4px 0 clamp(10px,1.6vh,14px); text-align: left; }

/* ── Set left, and set in figures ───────────────────────────────────────────────────────────── */

/* Item 19. tokens.css pairs letter-spacing with an equal text-indent, so that CENTRED uppercase
   sits true on its centre. Where the very same class is set to the left, that indent pushes the
   words a third of an em right of the rule beneath them. text-indent is not tokens.css's to own
   (see the head of this file), so it is set to nothing wherever the text is left or right aligned.
   The centred rows -- the navigation, the return, the page titles -- keep theirs. */
.mc-heading .t-title,
.mc-subheading,
.mc-field .t-label,
.mc-fields .t-label,
.mc-code .t-label,
.mc-pair,
.mc-row .t-band,
.mc-sum .t-band,
.mc-under .t-band,
.mc-entry-words .t-band,
.mc-2027,
.mc-terms h2,
.mc-terms h3,
.mc-handbook h2 { text-indent: 0; }

/* Item 20. Cormorant Garamond sets figures old-style, which at these sizes read as letters: a
   clause "1." reads as "i.", and a count reads as a word. Lining figures are asked for HERE, on
   the members' own classes, so that tokens.css and the public site are left exactly as they are. */
.mc-count,
.mc-terms h2,
.mc-handbook,
.mc-fixed,
.mc-particulars dd,
.mc-row .t-band,
.mc-sum .t-band,
.mc-under .t-band,
.mc-2027 { font-variant-numeric: lining-nums; }

/* Item 13: the door shown to a visitor who is not a member sits under a centred title, so the
   engagement's name and the sentence beneath it are centred with it rather than flush left. */
#season-door { display: flex; flex-direction: column; align-items: center; text-align: center; }
#season-door .mc-quiet, body[data-room="missing"] .mc-quiet { margin-left: auto; margin-right: auto; }

/* Where a line of links must wrap, its separators go, as they do in the main page's footer:
   a separator left hanging at the end of a line is worse than none. Beside a photograph, Choose
   Another and Take It Down share one line only above 508px (measured 25 September 2026). */
@media (max-width: 620px) {
  .mc-return .mc-sep, .mc-reply > span, .mc-photo-row .mc-sep { display: none; }
  .mc-return { gap: 34px 26px; }
  /* The foot of a room, four since 5 October 2026, wraps three and one from about 430px to 588px, Take Leave alone on
     its line (measured that day in a copy). So below 621px it stands two and two, in columns, as the navigation does:
     The Code and The Terms, then The Password and Take Leave. */
  .mc-return:has(> a[href="./code.html"]) { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; justify-items: center; }
  .mc-photo-row { gap: 30px 26px; }
  .mc-reply { flex-direction: column; align-items: flex-start; }
}
/* The four rooms share one line with their separators only from a 647px window (measured 25
   September 2026); below it, one was left hanging after Invitations. Below 681px, leaving room for
   a wider scrollbar or face, they are spaced as a wrapping line is, with none. The rooms are eight now (above),
   and the rule stands for a navigation of four, as the Secretary's Desk has (5 October 2026). */
@media (max-width: 680px) {
  .mc-nav .mc-sep { display: none; }
  .mc-nav { gap: 34px 26px; }
}
@media (max-width: 480px) {
  .mc-row { flex-wrap: wrap; row-gap: 16px; }
  /* A long date in a row's band (an invitation's, under Kept, on a 320px telephone) wraps on its own line
     rather than pushing the page sideways (the owner, 7 October 2026). */
  .mc-row .t-band { white-space: normal; min-width: 0; overflow-wrap: anywhere; }
  .mc-particulars { grid-template-columns: 1fr; gap: 2px; }
  .mc-particulars dt { padding-top: 12px; }
  .mc-code { grid-template-columns: 1fr; }
  .mc-entry .mc-photo, .mc-photo { width: 96px; }
}

/* The 2027 line under an engagement in Your Season, as the public page shows it (2 October 2026). */
.mc-2027 { margin: 6px 0 0; color: #615A4C; }
/* ── Held in confidence (B2, B3) ─────────────────────────────────────────────────────────────── */

/* The line at the foot of every room a member is in: "Held in confidence for", their name and the day. */
.mc-held { margin-top: clamp(30px,4.4vh,44px); }
.mc-held:empty { display: none; }

/* The member's name, laid faintly behind the Register and the Handbook. #room is given a place for it
   and NO stacking context of its own (no z-index, opacity, transform, filter or isolation), so that the
   ground paints over the paper and beneath everything else, and the Register's photographs, which
   multiply, still multiply over the paper through it. Decorative: aria-hidden, never selectable, never
   a target, never printed. Its type is the class Claude Design gives it (rule 2); its colour the
   Court's red, made faint. */
#room { position: relative; }
.mc-ground { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; -webkit-user-select: none; user-select: none; opacity: 0.06; }
.mc-ground p { margin: 0; white-space: nowrap; color: #560000; line-height: 2.6; text-indent: 0; }
.mc-ground p:nth-child(even) { margin-left: -9em; }
/* Contrast (rule 10). The small grey #615A4C holds 4.5:1 on the paper with little to spare; over the
   ground it would fall below. So in the two rooms the ground lies behind, it is set in the
   navigation's grey instead, which holds 4.87:1 over a 6% ground on the paper's darkest part. A link
   keeps its red when pointed at, and the room one is in keeps its own. */
body[data-room="register"] #room .mc-muted, body[data-room="handbook"] #room .mc-muted,
body[data-room="register"] #room .t-band, body[data-room="handbook"] #room .t-band,
body[data-room="register"] #room .mc-said:not(.mc-ox), body[data-room="handbook"] #room .mc-said:not(.mc-ox),
body[data-room="register"] #room .mc-aside, body[data-room="handbook"] #room .mc-aside,
body[data-room="register"] #room .mc-asked, body[data-room="handbook"] #room .mc-asked,
body[data-room="register"] #room .mc-entry-foot, body[data-room="handbook"] #room .mc-sources,
body[data-room="register"] #room .mc-return a:not(:hover):not([aria-current]), body[data-room="handbook"] #room .mc-return a:not(:hover):not([aria-current]),
body[data-room="register"] #room .mc-return button:not(:hover), body[data-room="handbook"] #room .mc-return button:not(:hover) { color: #554E42; }

/* No selecting, copying, dragging or saving, and no printing, in any room a member is in, but the
   Terms and the Code (members.js puts .mc-confidential on the page once a member is known, and
   never there). What a member types, the Secretary's address and every link are given back. A page
   cannot stop a screenshot, a reader mode or a second camera, and does not claim to. */
.mc-print { display: none; }
body.mc-confidential .mc-page { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.mc-confidential img { -webkit-user-drag: none; }
body.mc-confidential input, body.mc-confidential textarea, body.mc-confidential select,
body.mc-confidential [contenteditable], body.mc-confidential .mc-copyable,
body.mc-confidential a[href^="mailto:"] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
body.mc-confidential a { -webkit-touch-callout: default; }
@media print {
  body.mc-confidential .mc-page, body.mc-confidential .mc-hold, body.mc-confidential .mc-view { display: none !important; }
  body.mc-confidential .mc-print { display: block; margin: 72px 24px; text-align: center; font-style: italic; color: #1D1A15; }
}
/* The one quiet line, said when something is tried that the rooms do not allow: a strip at the foot of
   the window in the form of the public site's own notice (the paper, its wash, a red rule above),
   until the member's next press or key. It comes and goes without any fade (rule 5). */
.mc-hold { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; margin: 0; padding: 14px 24px; text-align: center; font-style: italic; color: #1D1A15; background-color: #DFD4BB; background-image: linear-gradient(rgba(223,212,187,0.83), rgba(223,212,187,0.83)), url("../photos/paper-stationery.webp"); background-size: auto, 420px auto; border-top: 1px solid #560000; }
/* Empty, it stays in the page with no room at all, so that a screen reader is already listening when
   the line is written (members.js say()); only print hides it. */
.mc-hold:empty { padding: 0; border-top: 0; background: none; }

/* A request to be seated beside another member, on their entry in the Register. */
.mc-seat { appearance: none; -webkit-appearance: none; background: transparent; border: 0; border-radius: 0; margin: -14px 0; padding: 14px 0; color: #560000; cursor: pointer; }
.mc-seat:hover { color: #800000; }
.mc-seat:disabled { color: #554E42; cursor: default; }
/* What is said of the request stands on its own line beneath the button, whose target reaches 14px
   below its own line (rule 9): the line's 14px margin keeps the Secretary's link in a failure clear
   of it. Once the Court has the request the button is gone, and the line stands where it stood. */
.mc-entry-foot .mc-said { display: block; }
.mc-entry-foot .mc-said:first-child { margin-top: 0; }

/* ── Letters, the Photographs, Your Card, the arrangements desk, the outfit (5 October 2026) ─────── */

/* A button that reads as a link (.t-link): the browser's own button put away, and a target 44px deep made by
   padding cancelled by an equal negative margin, so nothing moves (rule 9). Every row below that holds one and can
   wrap gives a row gap deeper than the 24px it cancels. */
.mc-press { appearance: none; -webkit-appearance: none; background: transparent; border: 0; border-radius: 0; margin: -12px 0; padding: 12px 0; text-align: left; text-indent: 0; color: #560000; cursor: pointer; }
.mc-press:hover { color: #800000; }
.mc-press:disabled, .mc-press:disabled:hover { cursor: default; color: #615A4C; }
/* Set to the left, so the indent tokens.css pairs with its letter-spacing is taken off (item 19). */
.mc-row .t-link, .mc-wallet { text-indent: 0; }

/* Letters: a row for each, its title opening the letter beneath it. "Not yet opened" stands in the Court's red
   beside the day; the second band in a row follows the first rather than sharing the space with it. */
.mc-row .t-band + .t-band { margin-left: 0; }
.mc-row .t-band.mc-unseen { color: #560000; }
.mc-letter { display: flex; flex-direction: column; gap: 14px; padding: clamp(18px,2.6vh,24px) 0 clamp(26px,4vh,38px); }
.mc-letter-words { margin: 0; line-height: 1.85; color: #1D1A15; text-wrap: pretty; white-space: pre-line; }
.mc-poll { display: flex; flex-direction: column; }
.mc-poll .mc-reply { margin-top: clamp(16px,2.4vh,22px); }
/* The Court's word on a member's requests: one sentence to a line, on the Almanac's hairline. */
.mc-word { margin: 0; padding: clamp(13px,1.7vh,17px) 0; border-bottom: 1px solid rgba(86,0,0,0.28); line-height: 1.85; color: #1D1A15; text-wrap: pretty; }
.mc-word a { color: #560000; border-bottom: 1px solid rgba(86,0,0,0.45); padding-top: 8px; padding-bottom: 1px; }
.mc-word a:hover { color: #800000; border-bottom-color: #800000; }
.mc-word a:focus-visible { outline-offset: 2px; }

/* An album: the photographs in a plain grid, each its own proportion, nothing round them. */
.mc-album { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: clamp(30px,4.4vh,44px) 24px; margin-top: clamp(24px,3.4vh,32px); }
.mc-album:empty { display: none; }
.mc-shot { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.mc-shot img { display: block; width: 100%; height: auto; }
.mc-shot-acts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 26px 22px; margin: 0; }
#album-title:focus { outline: none; }
/* The photograph itself opens the full view (below), so it is a button: the browser's own button put away, nothing
   round the photograph, the focus ring the rooms' own (the owner, 5 October 2026). */
.mc-shot-open { appearance: none; -webkit-appearance: none; display: block; width: 100%; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; line-height: 0; cursor: pointer; }

/* ── The full view (the owner, 5 October 2026) ─────────────────────────────────────────────────────────────────────
   One photograph of the open album, large, filling the window over the ink: the darkest colour the rule allows, as a
   flat ground and nothing more (no box, no shadow, no gradient, no fade: it is there or it is not). Its words and
   controls are cream on the ink, 11.8:1; Previous or Next at the end of the album is cream at 0.6, 5.0:1. Above, the
   album's name and "3 of 12" in the band, and Close; below, Previous, Save a Copy (for those who attended) and Next,
   each a word in .t-link (rule 7), never an icon. Each control's target is 44px deep and reaches 12px above and below
   its line and 8px to either side: the rows give a row gap of 26px where they wrap (rule 9), and at least 16px between
   their words, so that two targets side by side meet and never cover each other; the three words below share one line
   at 320px. The view's own 16px margin keeps every target inside the window. While it stands open the room behind
   is hidden as well as inert, so that nothing behind it can be read, reached or pressed, nor scrolled beneath it.
   Its touch-action is manipulation (5 October 2026): a photograph pinched larger may be moved about with a finger,
   which pinch-zoom alone forbade, and a double tap does not zoom; the sideways swipe (members.js) does nothing while
   the window is pinched larger, so moving about a photograph never turns the page.
   Its foot stands clear of the window's own foot (the owner, 6 October 2026): the view keeps 72px below its last line,
   and the phone's home-bar inset besides, so that nothing fixed at the bottom of the screen covers Previous, Save a
   Copy or Next. Memberstack's Test Mode badge stands there, 40px deep with its lower edge 16px above the window's,
   which leaves 56px; the targets, reaching 12px below their line, stop at 60px. The photograph gives up the height
   (.mc-view-frame takes what is left), so nothing overflows. Its head keeps clear of the top inset as before. The
   pages' viewport has no viewport-fit=cover, so on an iPhone the insets read 0 and the 72px alone does the work. */
.mc-view { position: fixed; inset: 0; z-index: 9; display: flex; flex-direction: column; box-sizing: border-box; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(72px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left)); background-color: #1D1A15; color: #DFD4BB; overscroll-behavior: contain; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.mc-view-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 26px 24px; }
.mc-view-where { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.mc-view-where p { margin: 0; text-indent: 0; color: #DFD4BB; }
.mc-view-frame { flex: 1; min-height: 0; margin: 20px 0; display: flex; align-items: center; justify-content: center; }
.mc-view-frame img { display: block; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; }
.mc-view-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 26px 16px; }
.mc-view-head .mc-view-act, .mc-view-foot .mc-view-act { appearance: none; -webkit-appearance: none; background: transparent; border: 0; border-radius: 0; margin: -12px -8px; padding: 12px 8px; text-indent: 0; color: #DFD4BB; cursor: pointer; }
.mc-view-head .mc-view-act[aria-disabled="true"], .mc-view-foot .mc-view-act[aria-disabled="true"], .mc-view-foot .mc-view-act:disabled { color: rgba(223,212,187,0.6); cursor: default; }
.mc-view button:focus-visible, .mc-view a:focus-visible { outline: 1px solid #DFD4BB; outline-offset: 2px; }
/* What is said of a save stands under the row, whose targets reach 12px below it, clear of the Secretary's link (8px
   above its own line); in cream, never the Court's red, which cannot be read on the ink. */
.mc-view .mc-said, .mc-view .mc-said.mc-ox { color: #DFD4BB; text-align: center; }
.mc-view .mc-said:not(:empty) { margin-top: 24px; }
.mc-view .mc-said a { color: #DFD4BB; border-bottom: 1px solid rgba(223,212,187,0.45); padding-top: 8px; padding-bottom: 1px; }
.mc-view .mc-said a:hover { color: #DFD4BB; border-bottom-color: #DFD4BB; }
body.mc-viewing { overflow: hidden; }
body.mc-viewing .mc-page { visibility: hidden; }

/* Your Card: the two wallets, each a standalone action on its own red line, as Settle is on the Ledger. */
.mc-wallets { display: flex; flex-wrap: wrap; align-items: baseline; gap: 34px 32px; margin-top: clamp(30px,4.4vh,44px); }
.mc-wallets:empty { display: none; }
.mc-wallet { display: inline-block; appearance: none; -webkit-appearance: none; background: transparent; border: 0; border-bottom: 1px solid #560000; border-radius: 0; margin: -15px 0 0; padding: 15px 4px 6px; color: #560000; cursor: pointer; }
.mc-wallet:hover { color: #800000; border-bottom-color: #800000; }
.mc-wallet:disabled { cursor: default; color: #615A4C; border-bottom-color: rgba(86,0,0,0.45); }

/* The arrangements desk, beneath an engagement in Your Season (.mc-arrange above): its form, set to the left, and the
   member's requests with the Court's word on each. */
.mc-arrange .mc-fields { margin-top: clamp(20px,3vh,28px); }
.mc-arrange .mc-action { align-self: flex-start; }
.mc-desk-list { display: flex; flex-direction: column; gap: 14px; margin: clamp(16px,2.4vh,22px) 0 0; padding: 0; list-style: none; }
.mc-desk-list p { margin: 0; line-height: 1.85; color: #1D1A15; text-wrap: pretty; }
.mc-desk-list .mc-desk-act { margin-top: 12px; }

/* The outfit, beneath an attending reply on Invitations. */
.mc-outfit { display: flex; flex-direction: column; gap: 14px; margin-top: clamp(22px,3.2vh,30px); }
.mc-outfit .mc-said { margin: 0; }
.mc-outfit-rows { display: flex; flex-direction: column; gap: 26px; }
.mc-outfit-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 26px 20px; }
.mc-outfit-row p { margin: 0; line-height: 1.85; color: #1D1A15; text-wrap: pretty; }

/* Clear of the targets around them (rule 9). The desk's own button reaches 12px above its line: under a row of Your
   Season it stands 12px down, so that it meets the row's own target and does not cover it, and under the diamond that
   marks an engagement (whose target reaches 9px below) it stands further down still. What is said beneath a button
   that reaches 12px below its line, where it may carry the Secretary's link (8px above its own line), stands 22px
   down; an empty line takes no room at all. */
.mc-arrange { margin-top: 12px; }
.mc-mark + .mc-arrange { margin-top: clamp(24px,3.4vh,32px); }
.mc-arrange > .mc-said { margin-top: 22px; }
.mc-outfit .mc-said:not(:empty) { margin-top: 8px; }
.mc-album + .mc-said:not(:empty) { margin-top: 24px; }
.mc-arrange > .mc-said:empty { margin: 0; }

/* ── The Committee's page (5 October 2026) ─────────────────────────────────────────────────────────
   A page laid in the rooms' own classes; these few stand beside them. */

/* A row of quiet actions, each a .mc-press whose target reaches 12px beyond its line: the row gap is deeper than the 24px
   it cancels, so that a row that wraps never lays one target over another (rule 9). */
.mc-acts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 26px 26px; margin: 14px 0 0; }
.mc-acts .mc-press { padding: 12px 0; margin: -12px 0; }
/* Above the letter's own action, whose target reaches 19px above its line: the two targets kept apart. */
.mc-keep > .mc-acts { justify-content: center; margin: 0 0 20px; }
/* No icon but the diamond: the browser's own calendar and clock marks in a day or an hour field are put away. The day
   and the hour are typed. */
.mc-field input::-webkit-calendar-picker-indicator { display: none; }
#preview-title:focus { outline: none; }
/* The line that says how long the desk stays open stands under the centred title, centred with it. */
body[data-room="desk"] .mc-quiet { margin-left: auto; margin-right: auto; }

/* ── The rooms on the home screen (the owner, 5 October 2026) ─────────────────────────────────────
   One quiet passage on the Register, beneath the navigation, on a telephone only (members.js shows it): its lines
   centred under the centred titles, the one action or Not Now beneath them, and a single hairline under the whole to
   set it off from the Register. No box, no ground, no shadow, no drawing (rule 5). It stands 34px under the
   navigation, whose links reach 16px below their row, and its own first line is no target. */
.mc-home { margin: 34px 0 0; padding: 0 0 clamp(26px,4vh,34px); border-bottom: 1px solid rgba(86,0,0,0.28); text-align: center; }
.mc-home p { margin: 0; line-height: 1.85; text-wrap: pretty; }
.mc-home-first { color: #1D1A15; }
/* In the navigation's grey, not the muted one: the member's name lies faintly behind the Register, and the muted grey
   would fall below 4.5:1 over it (rule 10; see "Contrast" above). */
.mc-home .mc-help { margin-top: 6px; color: #554E42; }
.mc-home .mc-field { max-width: 420px; margin: 22px auto 0; text-align: left; }
.mc-home .mc-field .t-label { color: #554E42; text-indent: 0; }
/* The action reaches 19px above its line, Not Now 15px above and below its own, 44px deep (rule 9): the row stands
   30px under the lines, and a row that wraps puts 34px between its lines, as deep as the 19px and 15px the two targets
   could reach across it. */
.mc-home-acts { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 34px 26px; margin-top: 30px; }
.mc-home-acts .mc-action { align-self: auto; margin: -19px 0 0; padding: 19px 4px 7px; }
.mc-home-acts .mc-not-now { appearance: none; -webkit-appearance: none; background: transparent; border: 0; border-radius: 0; margin: -15px 0; padding: 15px 0; color: #554E42; cursor: pointer; }
.mc-home-acts .mc-not-now:hover { color: #560000; }
/* What is said of the copying stands under Not Now, whose target reaches 15px below its line. */
.mc-home .mc-said:not(:empty) { margin-top: 22px; }
/* The Register's own heading takes the focus when the passage is put away, so that a reader is not left nowhere. */
#register-title:focus { outline: none; }

/* ── A room that waits on the fee of admission (the owner, 5 October 2026) ───────────────────────────────────────
   While a member owes the fee, every room but Particulars, The Password, the Handbook, the Code, the Terms and the
   Ledger shows, beneath the navigation and in place of its own content, one quiet passage (members.js, waiting()),
   laid as the home-screen passage is: its lines centred under the centred titles, the way to the Ledger beneath them,
   and a single hairline under the whole. No box, no ground, no shadow, no drawing (rule 5). It stands 56px or more
   under the navigation, whose links reach 16px below their row, and its own first line is no target. */
.mc-waiting { margin: clamp(56px,8vh,84px) 0 0; padding: 0 0 clamp(26px,4vh,34px); border-bottom: 1px solid rgba(86,0,0,0.28); text-align: center; }
.mc-waiting p { margin: 0; line-height: 1.85; text-wrap: pretty; }
.mc-waiting-line { color: #1D1A15; }
/* The action reaches 19px above its line, 44px deep with it (rule 9), and stands 30px under the line above, which
   holds no target. It is alone in its row, which cannot wrap into another target. */
.mc-waiting-acts { display: flex; justify-content: center; margin-top: 30px; }
.mc-waiting-acts .mc-action { align-self: auto; margin: -19px 0 0; padding: 19px 4px 7px; }
/* The Secretary's address, a link inside a sentence on the rooms' hairline (rule 7), whose target reaches 8px above
   its line: 26px under the action's own hairline, so the two never meet. In the navigation's grey, not the muted one:
   the member's name lies faintly behind the Register, and the muted grey would fall below 4.5:1 over it (rule 10). */
.mc-waiting .mc-waiting-note { margin-top: 26px; font-style: italic; color: #554E42; }