/* 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; }

/* 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); }

/* 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 {
  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 { 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 { 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; }
/* With the Handbook the return row holds five, and five cannot share one line with their separators
   inside the page's column at any width (measured 25 September 2026: it wraps at 1440px and below),
   so one would be left hanging after The Password. So they go, as they do wherever a row wraps, and
   the row is spaced as a wrapping row is. */
.mc-return:has(> a[href="./handbook.html"]) .mc-sep { display: none; }
.mc-return:has(> a[href="./handbook.html"]) { gap: 34px 26px; }
/* 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); }

.mc-under { display: flex; align-items: baseline; gap: 12px; margin: -4px 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; }
/* "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 { background: #560000; }
.mc-options button[aria-checked="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; }
  .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. */
@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; }
  .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 { 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; }