/* ============================================================
   THE ROSEDALE SOCIETY — PARIS SALON, 1927
   Authoritative presentation layer. Loaded after the legacy sheets so
   the site has one coherent visual language while its content, routes,
   forms, and interaction logic remain intact.
   ============================================================ */

:root {
  --paper: #e9e0cd;
  --paper-2: #f5efe2;
  --paper-3: #cdbfa8;
  --ink: #1a1714;
  --ink-2: #18262a;
  --ink-3: #3d4a49;
  --midnight: #18262a;
  --midnight-2: #213338;
  --bottle: #273e35;
  --oxblood: #6b2b2d;
  --tobacco: #76543e;
  --brass: #a6894f;
  --brass-lt: #c4a86b;
  --brass-dk: #745d31;
  --rust: #8d4439;
  --rust-lt: #bb705b;
  --line: rgba(52, 40, 28, .25);
  --line-dark: rgba(38, 28, 20, .58);
  --on-paper: #1a1714;
  --on-paper-soft: #4f453c;
  --on-paper-faint: #766a5f;
  --on-ink: #f4ecdc;
  --on-ink-soft: #d8cebc;
  --on-ink-faint: #a99d89;
  --header-glass: rgba(233, 224, 205, .94);
  --announce-h: 0px;
  --nav-h: 72px;
  --gutter: clamp(1.25rem, 4.6vw, 4.5rem);
  --s-chapter: clamp(5rem, 9vw, 9rem);
  --f-display: "Bodoni Moda", Didot, "Times New Roman", serif;
  --f-text: "Newsreader", Georgia, serif;
  --f-mono: "Jost", "Helvetica Neue", sans-serif;
  --f-ui: "Jost", "Helvetica Neue", sans-serif;
}

/* ================================================================
   2026-10-13 — ATX-ALIGNED EDITORIAL DENSITY
   Keep facts, prices, labels, images, and actions. Remove the repeated
   explanatory layer that made short mobile chapters read like essays.
   ================================================================ */
body[data-page="index"] .stat__l,
body[data-page="society"] .stat__l,
body[data-page="index"] .dcard p,
body[data-page="society"] .dcard p,
body[data-page="membership"] .dcard p,
body[data-page="membership-offer-annual"] .dcard p,
body[data-page="index"] .hpanel__lede,
body[data-page="index"] .stack-6 > .qa:nth-child(n + 3),
body[data-page="membership"] .density-pruned,
body[data-page="membership"] .pin__text p,
body[data-page="society"] .pin__text p,
body[data-page="society"] .statement,
body[data-page="gatherings"] main .copy.u-soft,
body[data-page="members"] .stack-4.deal {
  display: none !important;
}

body[data-page="index"] .dcard,
body[data-page="society"] .dcard,
body[data-page="membership"] .dcard,
body[data-page="membership-offer-annual"] .dcard {
  min-height: 0 !important;
}

body[data-page="index"] .hpanel__name {
  margin-bottom: 1rem !important;
}

@media (min-width: 768px) {
  body[data-page="index"] .hero-stage,
  body[data-page="index"] .hero-stage > .hero,
  body[data-page="index"] .hero__inner {
    width: 100% !important;
    height: min(68vw, 720px) !important;
    min-height: 480px !important;
  }
}

html { background: var(--paper); }
body {
  color: var(--ink);
  background: var(--paper);
  font-family: var(--f-text);
  font-size: 18px;
  line-height: 1.62;
  letter-spacing: 0;
  overflow-x: clip;
}

::selection { color: var(--paper-2); background: var(--oxblood); }

/* Remove the institutional dashboard shell. */
.template-announcement,
.template-rail,
.template-mobile-cta,
.siderail,
.progress { display: none !important; }

main {
  width: 100% !important;
  margin-left: 0 !important;
  padding-top: var(--nav-h) !important;
}
.foot {
  width: 100% !important;
  margin-left: 0 !important;
}

/* Typography: Parisian display, literary reading face, geometric utility. */
.display,
.pin__text h2,
.hpanel__name,
.dcard h3,
.member__name,
.acc__q,
.qa blockquote,
blockquote {
  font-family: var(--f-display) !important;
  font-optical-sizing: auto;
  font-weight: 500;
  letter-spacing: -.035em !important;
}
.display--xl { font-size: clamp(4.8rem, 9.2vw, 9rem); line-height: .88; }
.display--l { font-size: clamp(4rem, 7.2vw, 7rem); line-height: .92; }
.display--m { font-size: clamp(2.8rem, 5.1vw, 4.9rem); line-height: .97; }
.display--s { font-size: clamp(2rem, 3.4vw, 3.25rem); line-height: 1; }

.copy,
.lead,
.prose,
.problem__lines p,
.dcard p,
.pin__text p,
.hpanel__lede,
.qa p,
.acc__body {
  font-family: var(--f-text) !important;
  font-weight: 400;
  letter-spacing: 0 !important;
}
.copy { font-size: 1.05rem; line-height: 1.72; }
.lead { font-size: clamp(1.18rem, 1.75vw, 1.55rem); line-height: 1.55; }

.mono,
.overline,
.template-kicker,
.fld label,
.qa__q,
.step__n,
.media__cap,
.reg__plate figcaption,
.member__role,
.hpanel__meta,
.hpanel__idx,
.rail-controls__status,
.foot h2,
.foot a,
.foot__base {
  font-family: var(--f-ui) !important;
  font-style: normal;
  font-weight: 500;
  letter-spacing: .16em !important;
}
.overline {
  color: var(--oxblood);
  font-size: .68rem !important;
  text-transform: uppercase;
}
.overline::before { background: currentColor !important; }

/* No title or copy should wait for a reveal. Photography can carry motion. */
[data-reveal],
[data-reveal="fade"],
[data-reveal="left"],
[data-reveal="right"],
[data-reveal="scale"],
[data-reveal="clip"],
[data-split],
[data-split] .line > span {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  transition: none !important;
}
.scrubwords .w,
.scrubwords .w.is-lit { color: inherit !important; transition: none !important; }

/* Navigation: one slim masthead, no information dashboard. */
.nav {
  inset: 0 0 auto !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: var(--nav-h) !important;
  min-height: var(--nav-h) !important;
  padding: 0 max(1.25rem, env(safe-area-inset-left)) 0 max(1.25rem, env(safe-area-inset-right)) !important;
  color: var(--ink) !important;
  background: var(--header-glass) !important;
  border-bottom: 1px solid var(--line-dark) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.nav__brand {
  display: flex !important;
  min-width: 0;
  gap: .72rem;
  color: var(--ink) !important;
}
.nav__mark { width: 38px; height: 38px; filter: grayscale(1) sepia(.28) contrast(1.15); }
.nav__wordmark {
  color: var(--ink) !important;
  font-family: var(--f-display) !important;
  font-size: 1.28rem !important;
  font-style: italic;
  font-weight: 500;
  line-height: .84;
}
.nav__wordmark small {
  margin-top: .48rem;
  color: var(--oxblood) !important;
  font: 500 .46rem/1 var(--f-ui) !important;
  letter-spacing: .3em !important;
  text-transform: uppercase;
}
.nav__context {
  display: block !important;
  position: absolute;
  left: 50%;
  margin: 0 !important;
  color: var(--brass-dk) !important;
  font: 500 .62rem/1 var(--f-ui) !important;
  letter-spacing: .2em !important;
  text-transform: uppercase;
  transform: translateX(-50%);
}
.burger {
  min-width: 90px;
  margin-left: auto !important;
  color: var(--ink) !important;
  font-family: var(--f-ui) !important;
}
.burger > span:first-child { font-family: var(--f-ui) !important; letter-spacing: .18em; }
.burger__bars i { background: var(--ink) !important; }

/* A full-screen evening menu, closer to a poster than a drawer. */
.menu {
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  grid-template-rows: var(--nav-h) 1fr auto !important;
  color: var(--on-ink) !important;
  background:
    radial-gradient(circle at 82% 20%, rgba(166,137,79,.15), transparent 26rem),
    linear-gradient(135deg, transparent 0 74%, rgba(166,137,79,.07) 74% 74.25%, transparent 74.25%),
    var(--midnight) !important;
  border: 0 !important;
  box-shadow: none !important;
}
.menu > div:first-child { border-bottom-color: rgba(244,236,220,.18) !important; }
.menu__inner {
  width: min(100% - 2.5rem, 760px);
  margin-inline: auto;
  justify-content: center !important;
  padding: 2rem 0 !important;
}
.menu__inner a {
  grid-template-columns: 3rem 1fr;
  min-height: 68px;
  padding: .8rem 0 !important;
  color: var(--on-ink) !important;
  border-bottom-color: rgba(244,236,220,.18) !important;
  font-family: var(--f-display) !important;
  font-size: clamp(2.4rem, 6vw, 4.8rem) !important;
  font-style: normal !important;
}
.menu__inner a i { color: var(--brass-lt) !important; font-family: var(--f-ui) !important; }
.menu__inner a[aria-current="page"] { color: var(--brass-lt) !important; }
.menu__foot {
  color: var(--on-ink-faint) !important;
  border-top-color: rgba(244,236,220,.18) !important;
  background: transparent !important;
}
.menu__art { display: none !important; }
.menu-backdrop { display: none !important; }

/* Core chapter rhythm. */
.on-paper { color: var(--on-paper) !important; background: var(--paper) !important; }
.on-paper-2 { color: var(--on-paper) !important; background: var(--paper-2) !important; }
.on-ink,
.on-ink-2 {
  color: var(--on-ink) !important;
  background:
    radial-gradient(circle at 80% 0, rgba(166,137,79,.08), transparent 32rem),
    var(--midnight) !important;
}
/* The legacy sheet used high-specificity nth-of-type rules to turn every
   chapter beige. Match that specificity so semantic dark chapters stay
   dark and never inherit light text onto paper. */
body[data-page] main section.section.on-ink,
body[data-page] main section.pin.on-ink,
body[data-page] main section.hscroll.on-ink,
body[data-page] main section.masthead.on-ink,
body[data-page] main section.on-ink-2 {
  color: var(--on-ink) !important;
  background:
    radial-gradient(circle at 80% 0, rgba(166,137,79,.08), transparent 32rem),
    var(--midnight) !important;
}
body[data-page] main section.on-ink .problem__lines p,
body[data-page] main section.on-ink .copy,
body[data-page] main section.on-ink .lead,
body[data-page] main section.on-ink .prose,
body[data-page] main section.on-ink p,
body[data-page] main section.on-ink li,
body[data-page] main section.on-ink-2 .copy,
body[data-page] main section.on-ink-2 .lead,
body[data-page] main section.on-ink-2 .prose,
body[data-page] main section.on-ink-2 p,
body[data-page] main section.on-ink-2 li {
  color: var(--on-ink-soft) !important;
}
body[data-page] main section.on-ink .display,
body[data-page] main section.on-ink h1,
body[data-page] main section.on-ink h2,
body[data-page] main section.on-ink h3,
body[data-page] main section.on-ink blockquote,
body[data-page] main section.on-ink-2 .display,
body[data-page] main section.on-ink-2 h1,
body[data-page] main section.on-ink-2 h2,
body[data-page] main section.on-ink-2 h3,
body[data-page] main section.on-ink-2 blockquote {
  color: var(--on-ink) !important;
}
body[data-page] main section.on-ink .overline,
body[data-page] main section.on-ink .u-brass,
body[data-page] main section.on-ink-2 .overline,
body[data-page] main section.on-ink-2 .u-brass {
  color: var(--brass-lt) !important;
}
.on-ink :where(.display, h1, h2, h3, h4, blockquote, strong) { color: var(--on-ink) !important; }
.on-ink :where(.copy, .lead, .prose, p, li, .qa p, .acc__body) { color: var(--on-ink-soft); }
.on-ink .overline,
.on-ink .u-brass { color: var(--brass-lt) !important; }
.on-ink .u-faint { color: var(--on-ink-faint) !important; }

.section,
.masthead,
.hscroll__sticky,
.pin__sticky {
  background-image: none !important;
  border-top: 0 !important;
}
.section { padding-block: var(--s-chapter); }
.section + .section { border-top: 1px solid var(--line) !important; }
.on-ink + .on-ink { border-top-color: rgba(244,236,220,.14) !important; }

.statement {
  color: var(--on-ink) !important;
  background:
    linear-gradient(120deg, transparent 0 68%, rgba(196,168,107,.08) 68% 68.5%, transparent 68.5%),
    var(--oxblood) !important;
  border-block: 0 !important;
  box-shadow: none !important;
}
.statement blockquote,
.statement .display,
.statement p { color: var(--on-ink) !important; }

body[data-page] main section.section.statement {
  color: var(--on-ink) !important;
  background:
    linear-gradient(120deg, transparent 0 68%, rgba(196,168,107,.08) 68% 68.5%, transparent 68.5%),
    var(--oxblood) !important;
}

body:not([data-page="style-guide"]) .statement .engraving,
body:not([data-page="style-guide"]) .engraving--float {
  display: none !important;
}

/* Homepage cover: cinematic on desktop, image-first poster on mobile. */
.hero-stage { height: auto !important; }
.hero-stage > .hero,
.hero {
  min-height: calc(100svh - var(--nav-h)) !important;
  background: var(--midnight) !important;
}
.hero__bg {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}
.hero__bg img {
  filter: grayscale(.74) sepia(.18) saturate(.62) contrast(1.13) brightness(.76) !important;
}
.hero__bg::after {
  background:
    linear-gradient(90deg, rgba(18,31,35,.9) 0%, rgba(18,31,35,.54) 47%, rgba(18,31,35,.18) 78%),
    linear-gradient(0deg, rgba(18,31,35,.84) 0%, transparent 62%) !important;
  box-shadow: inset 0 0 0 12px rgba(233,224,205,.08), inset 0 0 0 13px rgba(196,168,107,.32) !important;
}
.hero__inner {
  width: min(100%, 1500px) !important;
  margin: 0 auto !important;
  padding: clamp(6rem, 13vh, 9rem) var(--gutter) clamp(4rem, 9vh, 7rem) !important;
  color: var(--on-ink) !important;
  background: transparent !important;
  border: 0 !important;
}
.hero__inner::before {
  width: 76px;
  height: 1px;
  margin-bottom: 1.8rem;
  background: var(--brass-lt) !important;
}
.hero__inner .display { max-width: 7.2ch !important; color: var(--on-ink) !important; text-shadow: none; }
.hero__inner .copy,
.hero__inner .overline { color: var(--on-ink-soft) !important; }
.hero__inner .overline { color: var(--brass-lt) !important; }
.hero__cue,
.hero__masthead { display: none !important; }

/* Interior covers use geometry, not a collection of Victorian animals. */
.masthead,
.masthead:has(.btn) {
  min-height: min(72svh, 760px) !important;
  display: grid;
  align-items: end;
  padding: calc(var(--nav-h) + clamp(4rem, 8vw, 8rem)) 0 clamp(4.5rem, 8vw, 7rem) !important;
  color: var(--on-ink) !important;
  background:
    radial-gradient(circle at 78% 46%, transparent 0 8.5rem, rgba(196,168,107,.22) 8.55rem 8.65rem, transparent 8.7rem 12rem, rgba(196,168,107,.12) 12.05rem 12.15rem, transparent 12.2rem),
    linear-gradient(118deg, transparent 0 67%, rgba(196,168,107,.12) 67% 67.25%, transparent 67.25%),
    var(--midnight) !important;
  border-bottom: 0 !important;
}
.masthead::before { content: "" !important; opacity: 1 !important; }
.masthead::after {
  content: "";
  position: absolute;
  inset: auto var(--gutter) 2rem;
  height: 1px;
  background: linear-gradient(90deg, var(--brass-lt), transparent 70%) !important;
  opacity: .65 !important;
}
.masthead__art { display: none !important; }
.masthead .display,
.masthead .lead,
.masthead .overline { color: var(--on-ink) !important; }
.masthead .overline { color: var(--brass-lt) !important; }
.masthead .lead { color: var(--on-ink-soft) !important; }
.masthead .display--l { max-width: 10ch !important; }

/* Photographs become silver-gelatin plates, but remain recognisably current. */
.media,
.plate,
.reg__plate,
.g-art,
.member__photo,
.mobile-story__image,
.hpanel__art {
  padding: 0 !important;
  overflow: hidden;
  background: var(--midnight);
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
}
.media img,
.plate img,
.reg__plate img,
.g-art img,
.member__photo img,
.mobile-story__image img,
.hpanel__art img,
.pin__fig img,
.curtain img {
  filter: grayscale(.82) sepia(.16) saturate(.62) contrast(1.12) brightness(.93) !important;
  transform: none !important;
  transition: filter .45s ease !important;
}
.curtain::after { display: none !important; }
:where(.media,.plate,.reg__plate,.g-art,.member__photo,.mobile-story__image,.hpanel__art):hover img {
  filter: grayscale(.54) sepia(.12) saturate(.78) contrast(1.08) brightness(.98) !important;
}
.media__cap,
.plate figcaption,
.reg__plate figcaption {
  color: var(--on-paper-faint) !important;
  background: transparent !important;
  border-top: 1px solid var(--line) !important;
}
.on-ink .media__cap,
.on-ink .plate figcaption,
.on-ink .reg__plate figcaption { color: var(--on-ink-faint) !important; border-top-color: rgba(244,236,220,.16) !important; }

/* Contact sheets and editorial cards: fewer boxes, more photography. */
.register {
  gap: clamp(.8rem, 1.7vw, 1.6rem) !important;
  padding: 0 !important;
}
.register > :nth-child(n) { margin-top: 0 !important; transform: none !important; }
.reg__plate { background: transparent !important; }

.mobile-story__card,
.hpanel,
.cmp-wrap,
.ledger,
.appform,
.markplate {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
}
.mobile-story__card,
.hpanel {
  border-top: 1px solid var(--line-dark) !important;
  border-bottom: 1px solid var(--line-dark) !important;
}
.on-ink .mobile-story__card,
.on-ink .hpanel { border-color: rgba(244,236,220,.22) !important; }
.mobile-story__copy,
.hpanel__body { padding: 1.5rem 0 0 !important; }

.deck { gap: 0 !important; }
.dcard {
  min-height: 0 !important;
  padding: clamp(2rem, 4vw, 4rem) clamp(1rem, 2vw, 2rem) !important;
  border-top: 1px solid currentColor !important;
  background: transparent !important;
}
.dcard + .dcard { border-left: 1px solid var(--line) !important; }
.on-ink .dcard + .dcard { border-left-color: rgba(244,236,220,.16) !important; }
.dcard__art,
.hpanel__art .engraving { display: none !important; }
.dcard__n { color: var(--brass-dk) !important; border: 0 !important; }
.on-ink .dcard__n { color: var(--brass-lt) !important; }

/* Field marks stay typographic; the prior bestiary made profiles feel
   occult rather than like a Paris review. */
.markplate {
  min-height: 0 !important;
  padding: .2rem 0 .2rem 1rem !important;
  border-left: 2px solid var(--brass) !important;
}
.markplate .engraving { display: none !important; }
.markplate figcaption {
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--brass-lt) !important;
  border: 0 !important;
  background: transparent !important;
}
.on-paper .markplate figcaption { color: var(--brass-dk) !important; }

/* Gathering photographs lead each mobile chapter; emblem art no longer
   competes with the real house and community imagery. */
.g-art__mark { display: none !important; }

/* Replace the occult orrery with the complete, useful discipline register. */
.orb {
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) !important;
  grid-template-areas: "head reg" "tail reg" !important;
  grid-template-rows: auto 1fr !important;
  gap: clamp(2rem, 6vw, 7rem) !important;
}
.orb__stage { display: none !important; }
.orb__register {
  position: relative !important;
  width: auto !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-content: start;
  gap: 0 1.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}
.orb__rowbtn {
  min-height: 54px;
  grid-template-columns: 2rem 1fr !important;
  gap: .7rem !important;
  width: 100% !important;
  padding: .7rem 0 !important;
  color: var(--on-ink-soft) !important;
  border-top-color: currentColor !important;
}
.orb__n { color: var(--brass-lt) !important; font-size: 1.15rem !important; }
.orb__label { color: inherit !important; font-family: var(--f-text) !important; font-size: .98rem !important; }
body[data-page="society"] main section.on-ink .orb__label { color: var(--on-ink-soft) !important; }
.orb__rule { display: none !important; }

/* Straight, engraved actions instead of game-like clipped plaques. */
.btn,
.rail-controls button {
  position: relative;
  min-height: 52px;
  color: var(--on-ink) !important;
  background: var(--oxblood) !important;
  border: 1px solid var(--brass) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
  font-family: var(--f-ui) !important;
  font-size: .7rem !important;
  font-weight: 500;
  letter-spacing: .18em !important;
  text-transform: uppercase;
}
.btn::before,
.btn::after { display: none !important; }
.btn:hover { color: var(--midnight) !important; background: var(--brass-lt) !important; }
.on-ink .btn {
  color: var(--midnight) !important;
  background: var(--paper-2) !important;
  border-color: var(--brass-lt) !important;
}
.on-ink .btn:hover { color: var(--on-ink) !important; background: var(--oxblood) !important; }
.btn--ghost { color: inherit !important; background: transparent !important; border-color: currentColor !important; }
.rail-controls button { width: 52px; padding: 0; }

/* Tables become menu-like ledgers. */
.cmp,
.ledger,
.st { border-collapse: collapse; background: transparent !important; }
.cmp thead,
.ledger thead { color: var(--on-ink) !important; background: var(--midnight) !important; }
.cmp th,
.cmp td,
.ledger th,
.ledger td,
.st td {
  border-color: var(--line) !important;
  background: transparent !important;
}
.cmp tbody tr:nth-child(even),
.ledger tbody tr:nth-child(even) { background: rgba(118,84,62,.06) !important; }
.cmp__a { border-left: 1px solid var(--brass) !important; }
.on-ink .cmp__a { background: rgba(166,137,79,.09) !important; }

/* Application form: a clean Paris atelier application sheet. */
.appform {
  position: relative;
  padding: clamp(2rem, 5vw, 4.5rem) !important;
  background: var(--paper-2) !important;
  border: 1px solid var(--line-dark) !important;
}
.appform::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid var(--line);
  pointer-events: none;
}
.appform > * { position: relative; z-index: 1; }
.appform input,
.appform textarea {
  color: var(--ink) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line-dark) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--f-text) !important;
  font-size: 1.05rem !important;
  padding: .8rem 0 !important;
}
.appform textarea { border: 1px solid var(--line-dark) !important; padding: 1rem !important; }
.appform input:focus,
.appform textarea:focus {
  outline: 0 !important;
  border-color: var(--oxblood) !important;
  background: rgba(107,43,45,.035) !important;
}

/* Accordions, dossier blocks, and portrait index. */
.acc,
.qa,
.step { border-color: var(--line) !important; }
.acc__sign::before,
.acc__sign::after { background: var(--oxblood) !important; }
.on-ink .acc__sign::before,
.on-ink .acc__sign::after { background: var(--brass-lt) !important; }
.member-index {
  background: var(--paper-2) !important;
  border-block: 1px solid var(--line-dark) !important;
}
.member-index a {
  color: var(--ink) !important;
  background: transparent !important;
  border: 1px solid var(--line-dark) !important;
  font-family: var(--f-ui) !important;
}
.markplate { padding: 0 !important; }
.markplate .engraving { opacity: .72; filter: sepia(.4) saturate(.48) contrast(1.1); }

/* The footer is the final after-dark room. */
.foot {
  color: var(--on-ink) !important;
  background:
    radial-gradient(circle at 50% 0, rgba(166,137,79,.15), transparent 32rem),
    var(--midnight) !important;
  border-top: 1px solid var(--brass) !important;
}
.foot__logo { width: min(34vw, 150px) !important; filter: grayscale(1) sepia(.2) brightness(1.45); }
.foot h2 { color: var(--brass-lt) !important; }
.foot a { color: var(--on-ink-soft) !important; }
.foot a:hover { color: var(--on-ink) !important; }
.foot__base { color: var(--on-ink-faint) !important; }
.foot .engraving--ghost { display: none !important; }

/* Private gate: retain security behavior, replace the animal illustration. */
.gate {
  color: var(--on-ink) !important;
  background:
    radial-gradient(circle at 50% 38%, transparent 0 8rem, rgba(196,168,107,.18) 8.05rem 8.15rem, transparent 8.2rem),
    var(--midnight) !important;
}
body[data-page] main section.masthead.on-ink {
  background:
    radial-gradient(circle at 79% 46%, transparent 0 7.4rem, rgba(196,168,107,.25) 7.45rem 7.54rem, transparent 7.6rem 10.6rem, rgba(196,168,107,.12) 10.65rem 10.74rem, transparent 10.8rem),
    linear-gradient(118deg, transparent 0 68%, rgba(196,168,107,.13) 68% 68.18%, transparent 68.18%),
    var(--midnight) !important;
}
.gate__art { display: none !important; }
.gate__inner::before {
  content: "RS";
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  margin: 0 auto 2rem;
  color: var(--brass-lt);
  border: 1px solid var(--brass);
  border-radius: 50%;
  font: italic 500 2.6rem/1 var(--f-display);
}

@media (min-width: 901px) {
  .nav { padding-inline: clamp(2rem, 4vw, 4.5rem) !important; }
  .hero__inner .grid { grid-template-columns: minmax(0, 1.2fr) minmax(280px, .48fr) !important; }
  .hero__inner .copy { max-width: 35ch !important; }
  .register { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .hpanel { width: min(36vw, 470px) !important; }
}

@media (max-width: 900px) {
  :root {
    --nav-h: 64px;
    --gutter: clamp(1.25rem, 5.5vw, 2rem);
    --s-chapter: clamp(4.5rem, 17vw, 6.5rem);
  }
  body { font-size: 17px; line-height: 1.64; }
  .nav__context { display: none !important; }
  .nav__mark { width: 34px; height: 34px; }
  .nav__wordmark { font-size: 1.15rem !important; }
  .burger { min-width: 82px; }

  .display--xl { font-size: clamp(3.2rem, 14.8vw, 5rem) !important; line-height: .91 !important; }
  .display--l { font-size: clamp(2.8rem, 12.2vw, 4.25rem) !important; line-height: .94 !important; }
  .display--m { font-size: clamp(2.25rem, 10vw, 3.35rem) !important; line-height: .98 !important; }
  .display--s { font-size: clamp(1.8rem, 8vw, 2.65rem) !important; }
  .lead { font-size: 1.18rem !important; }
  .copy { font-size: 1.03rem !important; }

  .menu__inner {
    width: calc(100% - 2.5rem);
    justify-content: flex-start !important;
    padding-top: clamp(1.5rem, 5vh, 2.5rem) !important;
  }
  .menu__inner a {
    min-height: 58px;
    font-size: clamp(2rem, 10.5vw, 3rem) !important;
  }

  .hero-stage > .hero,
  .hero {
    min-height: auto !important;
    display: block;
    padding-top: .8rem;
    background: var(--paper) !important;
  }
  .hero__bg {
    position: relative !important;
    width: calc(100% - 1.6rem) !important;
    height: clamp(360px, 54svh, 540px) !important;
    margin-inline: .8rem !important;
    border: 1px solid var(--line-dark) !important;
  }
  .hero__bg::after {
    background: linear-gradient(0deg, rgba(24,38,42,.4), transparent 62%) !important;
    box-shadow: inset 0 0 0 7px rgba(233,224,205,.12), inset 0 0 0 8px rgba(196,168,107,.3) !important;
  }
  .hero__inner {
    margin-top: .8rem !important;
    padding: 3.2rem var(--gutter) 4.4rem !important;
    color: var(--on-ink) !important;
    background:
      linear-gradient(130deg, transparent 0 76%, rgba(196,168,107,.08) 76% 76.4%, transparent 76.4%),
      var(--midnight) !important;
  }
  .hero__inner .display { max-width: 8.2ch !important; }
  .hero__inner .copy { color: var(--on-ink-soft) !important; }
  .hero__inner .btn { width: 100%; }

  .masthead,
  .masthead:has(.btn) {
    min-height: 560px !important;
    padding: calc(var(--nav-h) + 4.5rem) 0 5rem !important;
  }
  .masthead .display--l { max-width: 9ch !important; }

  .section { padding-block: var(--s-chapter); }
  .statement { padding-block: 5rem !important; }

  .orb {
    grid-template-columns: 1fr !important;
    grid-template-areas: "head" "reg" "tail" !important;
    grid-template-rows: auto auto auto !important;
  }
  .orb__register { gap: 0 .9rem !important; }
  .orb__rowbtn { min-height: 52px; }

  .register { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .8rem !important; }
  .mobile-story__card,
  .hpanel { border-color: currentColor !important; }
  .mobile-story__image { margin: 0 !important; }

  .deck { grid-template-columns: 1fr !important; }
  .dcard { padding-inline: 0 !important; }
  .dcard + .dcard { border-left: 0 !important; }

  body[data-page="gatherings"] .section--snap > .wrap > .grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 2.2rem !important;
  }
  body[data-page="gatherings"] .section--snap .g-art { order: -1; }

  .cmp-wrap { border-block: 1px solid var(--line-dark) !important; }
  body[data-page="membership"] .cmp--verdict {
    display: table !important;
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
  }
  body[data-page="membership"] .cmp--verdict thead { display: table-header-group !important; }
  body[data-page="membership"] .cmp--verdict tbody { display: table-row-group !important; }
  body[data-page="membership"] .cmp--verdict tr,
  body[data-page="membership"] .cmp--verdict tbody tr { display: table-row !important; }
  body[data-page="membership"] .cmp--verdict th,
  body[data-page="membership"] .cmp--verdict td { display: table-cell !important; }
  body[data-page="membership"] .cmp--verdict thead th:first-child,
  body[data-page="membership"] .cmp--verdict .cmp__k {
    width: 52% !important;
    padding: .85rem .45rem !important;
    font-size: .59rem !important;
    line-height: 1.35 !important;
    letter-spacing: .05em !important;
  }
  body[data-page="membership"] .cmp--verdict .cmp__b,
  body[data-page="membership"] .cmp--verdict .cmp__a {
    width: 24% !important;
    padding: .85rem .3rem !important;
    text-align: center !important;
    vertical-align: middle !important;
  }
  .appform { padding: 2rem 1.5rem !important; }

  .foot { padding-top: 5rem !important; }
  .foot__grid { grid-template-columns: 1fr 1fr !important; gap: 2.5rem 1rem !important; }
}

@media (max-width: 420px) {
  .orb__register { grid-template-columns: 1fr !important; }
  .register { grid-template-columns: 1fr 1fr !important; }
  .foot__grid { grid-template-columns: 1fr 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   2026-10-12 — COMPLETE RESPONSIVE QA PASS
   These rules resolve the final audit findings without changing the
   site's architecture: immediate content, shorter chapters, readable
   utility type, and native scrolling in place of theatrical pinning.
   ============================================================ */

/* A stagger is a layout grouping, not permission to hide its children. */
[data-stagger] > *,
[data-stagger] > *.is-in,
[data-stagger] > *.is-on {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  transition: none !important;
}

/* The invitation gate sits outside <main>, so it needs its own dark-ground
   contrast contract rather than relying on section-scoped colour rules. */
.gate .display,
.gate h1 { color: var(--on-ink) !important; }
.gate .copy,
.gate p:not(.overline):not(.gate__msg) { color: var(--on-ink-soft) !important; }
.gate .overline { color: var(--brass-lt) !important; }
.gate__form input {
  color: var(--on-ink) !important;
  background: rgba(244, 236, 220, .07) !important;
  border-color: rgba(244, 236, 220, .48) !important;
}

/* Interior covers: contained editorial openings rather than empty screens. */
.masthead,
.masthead:has(.btn) {
  min-height: clamp(450px, 62svh, 560px) !important;
  padding: calc(var(--nav-h) + clamp(3rem, 6vw, 5rem)) 0 clamp(3.75rem, 6vw, 5.5rem) !important;
  background:
    radial-gradient(circle at 79% 46%, transparent 0 7.4rem, rgba(196,168,107,.25) 7.45rem 7.54rem, transparent 7.6rem 10.6rem, rgba(196,168,107,.12) 10.65rem 10.74rem, transparent 10.8rem),
    linear-gradient(118deg, transparent 0 68%, rgba(196,168,107,.13) 68% 68.18%, transparent 68.18%),
    var(--midnight) !important;
}
.masthead > .wrap { width: min(100% - (var(--gutter) * 2), 1360px); }
.masthead .display--l { max-width: 11ch !important; }
body[data-page="apply"] .masthead,
body[data-page="received"] .masthead,
body[data-page="404"] .masthead { min-height: clamp(420px, 56svh, 510px) !important; }

/* Replace desktop scroll-jacking with a compact editorial contact sheet.
   The JS-generated cards preserve the exact photographs and prose. */
@media (min-width: 901px) {
  [data-pin] {
    height: auto !important;
    padding: clamp(4.5rem, 7vw, 7rem) var(--gutter) !important;
    overflow: hidden;
  }
  [data-pin] > .pin__sticky { display: none !important; }
  [data-pin] > .mobile-story {
    display: block !important;
    width: min(100%, 1360px);
    margin-inline: auto;
  }
  .mobile-story__track {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.1rem, 2vw, 2rem);
    padding: 0 !important;
    overflow: visible !important;
  }
  .mobile-story__card {
    min-width: 0 !important;
    border: 0 !important;
    border-top: 1px solid currentColor !important;
  }
  .mobile-story__image { aspect-ratio: 4 / 3; }
  .mobile-story__copy { padding: 1.5rem 0 0 !important; }
  .mobile-story__copy h2 { font-size: clamp(2rem, 3vw, 3.15rem) !important; }
  .mobile-story > .rail-controls { display: none !important; }

  .hscroll { height: auto !important; overflow: hidden !important; }
  .hscroll__sticky {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding-block: clamp(4.5rem, 7vw, 7rem) !important;
    overflow: visible !important;
  }
  .hscroll__track {
    height: auto !important;
    padding: 2.25rem var(--gutter) 1.25rem !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    transform: none !important;
    scrollbar-width: thin;
  }
  .hpanel {
    height: auto !important;
    min-height: 510px !important;
    scroll-snap-align: start;
  }
  .hscroll__rail { display: none !important; }
}

/* Decorative stat emblems were the last remnant of the abandoned bestiary. */
.stat__art { display: none !important; }
.stat { padding-right: 0 !important; }

/* Old magazine folio labels added tiny text and several empty lines before
   otherwise self-explanatory chapters. The section overlines do the job. */
body:not([data-page="index"]):not([data-page="style-guide"]) main > .section:not(.section--flush-top) > .wrap:first-child::before,
body[data-page="index"] main > .section:not(.statement):not(.section--flush-top) > .wrap:first-child::before {
  display: none !important;
  content: none !important;
}

/* The acknowledgement page should read as three confident columns. */
body[data-page="received"] .wrap--reading {
  width: min(calc(100% - (var(--gutter) * 2)), 1120px) !important;
  max-width: 1120px !important;
}
body[data-page="received"] .wrap--reading > .lead,
body[data-page="received"] .wrap--reading > .copy { max-width: 680px; }
body[data-page="received"] .steps {
  max-width: 1120px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
body[data-page="received"] .step { padding-right: clamp(1rem, 3vw, 3rem); }

body[data-page="404"] main > .section.on-paper { padding-top: clamp(3.5rem, 7vw, 6rem) !important; }

/* Small text that carries a decision, price, time, or navigation action. */
.card__meta,
.hpanel__meta,
.member__role,
.source-notes summary,
.dossier-toggle { font-size: .72rem !important; line-height: 1.45 !important; }
.cmp-note,
.cmp__detail { font-size: .7rem !important; line-height: 1.4 !important; }
.foot a { display: inline-flex; align-items: center; min-height: 44px; }

/* The current style guide's colour example must show actual full colour. */
body[data-page="style-guide"] .sg-photo--colour img { filter: none !important; }

@media (max-width: 900px) {
  .masthead,
  .masthead:has(.btn),
  body[data-page="apply"] .masthead,
  body[data-page="received"] .masthead,
  body[data-page="404"] .masthead {
    min-height: 440px !important;
    padding: calc(var(--nav-h) + 3.25rem) 0 3.75rem !important;
    background:
      radial-gradient(circle at 92% 19%, transparent 0 5.2rem, rgba(196,168,107,.19) 5.25rem 5.32rem, transparent 5.38rem),
      linear-gradient(125deg, transparent 0 80%, rgba(196,168,107,.09) 80% 80.25%, transparent 80.25%),
      var(--midnight) !important;
  }
  body[data-page] main section.masthead.on-ink {
    background:
      radial-gradient(circle at 92% 19%, transparent 0 5.2rem, rgba(196,168,107,.19) 5.25rem 5.32rem, transparent 5.38rem),
      linear-gradient(125deg, transparent 0 80%, rgba(196,168,107,.09) 80% 80.25%, transparent 80.25%),
      var(--midnight) !important;
  }
  .masthead .display--l,
  .masthead:has(.btn) .display--l { font-size: clamp(2.7rem, 11.4vw, 4rem) !important; max-width: 10.5ch !important; }
  .masthead .lead { max-width: 31ch !important; }

  body[data-page="membership"] .cmp--verdict thead th:first-child,
  body[data-page="membership"] .cmp--verdict .cmp__k {
    width: 54% !important;
    padding: 1rem .55rem !important;
    font-size: .7rem !important;
    line-height: 1.4 !important;
  }
  body[data-page="membership"] .cmp--verdict .cmp__b,
  body[data-page="membership"] .cmp--verdict .cmp__a {
    width: 23% !important;
    padding: 1rem .35rem !important;
  }
  body[data-page="membership"] .cmp--verdict thead th { font-size: .65rem !important; line-height: 1.3 !important; }
  body[data-page="membership"] .cmp--verdict .cmp-note,
  body[data-page="membership"] .cmp--verdict .cmp__detail { font-size: .7rem !important; line-height: 1.4 !important; }
  :where(body[data-page="membership"], body[data-page="index"]) .cmp-wrap > .mono.u-faint {
    font-size: .72rem !important;
    line-height: 1.55 !important;
  }
  :where(body[data-page="membership"], body[data-page="index"]) .cmp-wrap > .mono.u-faint a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: .2rem;
  }

  .member-index { padding-right: 0 !important; }
  .member-index > span { display: flex; justify-content: space-between; padding-right: var(--gutter); }
  .member-index__hint { color: var(--oxblood); letter-spacing: .12em; }
  .member-index > div {
    padding-right: calc(var(--gutter) + 2.5rem) !important;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: thin;
  }
  .member-index::after {
    content: "";
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: .85rem;
    width: 2.8rem;
    height: 3.2rem;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--paper-2) 78%);
  }

  body[data-page="faq"] .deal + .grid { margin-top: 3.75rem !important; gap: 1rem !important; }
  body[data-page="faq"] .deal + .grid .lead { margin: 0 !important; }

  body[data-page="received"] .steps { grid-template-columns: 1fr; }

  .foot { padding-top: 4.25rem !important; }
  .foot__logo { width: min(29vw, 122px) !important; }
  .foot .rule.u-mt-6 { margin-top: 2.5rem !important; }
}

@media (max-width: 420px) {
  .masthead,
  .masthead:has(.btn),
  body[data-page="apply"] .masthead,
  body[data-page="received"] .masthead,
  body[data-page="404"] .masthead { min-height: 420px !important; }
  .gate { padding: 2rem 1.25rem !important; }
  .gate__inner::before { width: 92px; height: 92px; margin-bottom: 1.5rem; }
  .gate__form { gap: .8rem; }
  .gate__form input,
  .gate__form .btn { width: 100%; max-width: none; }
}

/* ============================================================
   2026-10-13 — ATX EDITORIAL RESTRAINT PASS

   The Rosedale content and imagery remain its own. The presentation follows
   the quieter ATX Writing Club system more closely: 16/24 reading type,
   modest editorial titles, warm paper, 20px mobile gutters, 40px mobile
   chapter spacing, 3–4px corners, and documentary photography in its
   original colour. This layer intentionally removes the heavier salon
   theatre that had accumulated above the shared template.
   ============================================================ */

:root {
  --paper: #f7f5ef;
  --paper-2: #efeee9;
  --paper-3: #e7e2d9;
  --ink: rgba(0, 0, 0, .9);
  --ink-2: #382b1f;
  --ink-3: #625d55;
  --midnight: #382b1f;
  --midnight-2: #47382b;
  --oxblood: #9c4f2c;
  --rust: #9c4f2c;
  --rust-lt: #f1dfd3;
  --brass: #b8aea0;
  --brass-lt: #d3c7b8;
  --brass-dk: #743e27;
  --line: #d3c7b8;
  --line-dark: #b8aea0;
  --on-paper: rgba(0, 0, 0, .9);
  --on-paper-soft: #625d55;
  --on-paper-faint: #756f66;
  --on-ink: #f7f5ef;
  --on-ink-soft: #e7e2d9;
  --on-ink-faint: #c9c0b5;
  --header-glass: rgba(247, 245, 239, .9);
  --nav-h: 60px;
  --gutter: clamp(20px, 4vw, 48px);
  --s-chapter: clamp(40px, 5vw, 64px);
  --f-display: "Newsreader", Georgia, serif;
  --f-text: "Newsreader", Georgia, serif;
  --f-ui: "Jost", "Helvetica Neue", sans-serif;
  --f-mono: "Jost", "Helvetica Neue", sans-serif;
}

html { scroll-behavior: auto; }
body {
  background: var(--paper);
  font-family: var(--f-text);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
}

/* Type follows the ATX editorial scale instead of poster typography. */
.display,
.pin__text h2,
.mobile-story__copy h2,
.hpanel__name,
.dcard h3,
.member__name,
.acc__q,
.qa blockquote,
blockquote {
  font-family: var(--f-text) !important;
  font-weight: 400 !important;
  letter-spacing: -.015em !important;
}
.display--xl { font-size: clamp(3rem, 6vw, 4.5rem) !important; line-height: 1.02 !important; }
.display--l { font-size: clamp(2.35rem, 4.5vw, 3.625rem) !important; line-height: 1.08 !important; }
.display--m { font-size: clamp(1.9rem, 3.5vw, 3rem) !important; line-height: 1.1 !important; }
.display--s { font-size: clamp(1.5rem, 2.4vw, 2.125rem) !important; line-height: 1.15 !important; }
.copy,
.prose,
.problem__lines p,
.dcard p,
.pin__text p,
.hpanel__lede,
.qa p,
.acc__body {
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: .01em !important;
}
.lead {
  font-size: clamp(1.0625rem, 1.45vw, 1.25rem) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
}
.overline,
.mono,
.template-kicker,
.fld label,
.qa__q,
.step__n,
.media__cap,
.reg__plate figcaption,
.member__role,
.hpanel__meta,
.hpanel__idx,
.rail-controls__status,
.foot h2,
.foot a,
.foot__base {
  font-weight: 400 !important;
  letter-spacing: .06em !important;
}
.overline {
  color: var(--brass-dk) !important;
  font-size: .75rem !important;
}
.overline::before { width: 28px !important; }

/* Original Rosedale photographs: no monochrome, sepia, dimming, or hover
   treatment. Preserve the colour values in the supplied image files. */
img[src*="assets/photos/"] {
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}
:where(.media,.plate,.reg__plate,.g-art,.member__photo,.mobile-story__image,.hpanel__art):hover img[src*="assets/photos/"] {
  filter: none !important;
}
.curtain::after { display: none !important; }

/* Shared shell: compact, quiet, and almost identical in rhythm to ATX. */
.nav {
  height: var(--nav-h) !important;
  min-height: var(--nav-h) !important;
  padding-inline: var(--gutter) !important;
  background: var(--header-glass) !important;
  border-bottom-color: var(--line) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.nav__mark {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  flex: 0 0 30px !important;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  filter: none !important;
}
.nav__wordmark {
  font-family: var(--f-text) !important;
  font-size: 1.05rem !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}
.nav__wordmark small {
  margin-top: .25rem !important;
  font-size: .45rem !important;
  letter-spacing: .16em !important;
}
.burger {
  min-width: 48px !important;
  min-height: 44px;
  padding-inline: 0 !important;
  font-size: .75rem !important;
}
.burger > span:first-child { letter-spacing: .06em !important; }
.nav__context { display: none !important; }

.menu {
  color: var(--ink) !important;
  background: var(--paper) !important;
}
.menu > div:first-child,
.menu__foot { border-color: var(--line) !important; }
.menu__inner {
  width: min(calc(100% - (var(--gutter) * 2)), 680px) !important;
  justify-content: flex-start !important;
  padding-block: 28px !important;
}
.menu__inner a {
  grid-template-columns: 28px 1fr !important;
  min-height: 54px !important;
  padding: 10px 0 !important;
  color: var(--ink) !important;
  border-bottom-color: var(--line) !important;
  font-family: var(--f-text) !important;
  font-size: clamp(1.5rem, 5vw, 2rem) !important;
  font-weight: 400 !important;
}
.menu__inner a i,
.menu__inner a[aria-current="page"] { color: var(--brass-dk) !important; }
.menu__foot { color: var(--on-paper-faint) !important; }

/* Warm paper is the default. Alternation comes from subtle paper values and
   rules rather than multiple theatrical dark rooms. */
body[data-page] main section.section.on-ink,
body[data-page] main section.pin.on-ink,
body[data-page] main section.hscroll.on-ink,
body[data-page] main section.on-ink-2,
body[data-page] main section.masthead.on-ink {
  color: var(--ink) !important;
  background: var(--paper) !important;
}
body[data-page] main section.on-ink :where(.display,h1,h2,h3,h4,blockquote,strong),
body[data-page] main section.on-ink-2 :where(.display,h1,h2,h3,h4,blockquote,strong) {
  color: var(--ink) !important;
}
body[data-page] main section.on-ink :where(.copy,.lead,.prose,p,li,.qa p,.acc__body),
body[data-page] main section.on-ink-2 :where(.copy,.lead,.prose,p,li,.qa p,.acc__body) {
  color: var(--on-paper-soft) !important;
}
body[data-page] main section.on-ink .overline,
body[data-page] main section.on-ink-2 .overline,
.on-ink .u-brass,
.on-ink-2 .u-brass { color: var(--brass-dk) !important; }
.on-ink .u-faint,
.on-ink-2 .u-faint { color: var(--on-paper-faint) !important; }
.section,
.hscroll__sticky,
[data-pin] { border-color: var(--line) !important; }
.section + .section,
.on-ink + .on-ink { border-top-color: var(--line) !important; }

/* Keep one restrained accent panel rather than several dark/ornamental ones. */
.statement,
body[data-page] main section.section.statement {
  color: var(--ink) !important;
  background: var(--rust-lt) !important;
  border-block: 1px solid var(--line) !important;
}
.statement :where(blockquote,.display,p) { color: var(--ink) !important; }
main .engraving { display: none !important; }

/* Image-led homepage: full-colour media, light editorial copy, no poster
   frame or heavy tint. Desktop keeps a restrained overlay for legibility. */
.hero-stage,
.hero-stage > .hero,
.hero { min-height: 0 !important; background: var(--paper) !important; }
.hero__bg {
  height: min(68vw, 720px) !important;
  min-height: 480px;
  background: var(--paper-2) !important;
}
.hero__bg::after {
  display: block !important;
  background: linear-gradient(90deg, rgba(26, 20, 15, .66), rgba(26, 20, 15, .22) 58%, transparent 82%) !important;
  box-shadow: none !important;
}
.hero__inner {
  min-height: min(68vw, 720px);
  padding: clamp(64px, 9vw, 104px) var(--gutter) clamp(48px, 7vw, 80px) !important;
}
.hero__inner::before { display: none !important; }
.hero__inner .display { max-width: 11ch !important; }
.hero__inner .copy { max-width: 42ch !important; }

/* Interior openings use ATX-style contained editorial headers. */
.masthead,
.masthead:has(.btn),
body[data-page="apply"] .masthead,
body[data-page="received"] .masthead,
body[data-page="404"] .masthead {
  min-height: 0 !important;
  display: block !important;
  padding: clamp(64px, 8vw, 96px) 0 clamp(44px, 6vw, 72px) !important;
  color: var(--ink) !important;
  background: var(--paper) !important;
  border-bottom: 1px solid var(--line) !important;
}
.masthead::before,
.masthead::after { display: none !important; }
.masthead .display,
.masthead .lead { color: var(--ink) !important; }
.masthead .lead { color: var(--on-paper-soft) !important; }
.masthead .display--l { max-width: 18ch !important; }

/* Components use the ATX geometry: thin rules, 3–4px corners, no ornament. */
.media,
.plate,
.reg__plate,
.g-art,
.member__photo,
.mobile-story__image,
.hpanel__art,
.appform,
.gate__form input,
.fld input,
.fld textarea,
.fld select {
  border-radius: 3px !important;
}
.btn {
  min-height: 52px !important;
  padding: 12px 18px !important;
  border: 1px solid var(--oxblood) !important;
  border-radius: 4px !important;
  color: var(--paper) !important;
  background: var(--oxblood) !important;
  font-family: var(--f-text) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
}
.btn:hover { background: var(--brass-dk) !important; border-color: var(--brass-dk) !important; }
.btn--ghost {
  color: var(--oxblood) !important;
  background: transparent !important;
}
.btn--ghost:hover { color: var(--paper) !important; background: var(--brass-dk) !important; }
.chip,
.chip--inv {
  color: var(--ink) !important;
  background: transparent !important;
  border-color: var(--line-dark) !important;
  border-radius: 4px !important;
}
.dcard {
  padding: 24px 20px !important;
  border-color: var(--line) !important;
}
.dcard + .dcard,
.on-ink .dcard + .dcard { border-left-color: var(--line) !important; }
.mobile-story__card,
.hpanel,
.cmp-wrap,
.ledger,
.appform,
.markplate { border-color: var(--line) !important; }
.mobile-story__copy,
.hpanel__body { padding-top: 16px !important; }
.hpanel { min-height: 0 !important; }
.hpanel__name { font-size: clamp(1.5rem, 2.5vw, 2rem) !important; }
.member__name { font-size: clamp(1.35rem, 2vw, 1.75rem) !important; }
.acc__btn { min-height: 64px !important; padding-block: 14px !important; }
.acc__q { font-size: 1.0625rem !important; line-height: 1.35 !important; }
.statgrid .num,
.stat__k { font-size: clamp(2.25rem, 4vw, 3.5rem) !important; }

/* Footer matches the quiet ATX close rather than a second dark hero. */
.foot {
  color: var(--ink) !important;
  background: var(--paper-3) !important;
  border-top: 1px solid var(--line) !important;
}
.foot h2,
.foot a,
.foot a:hover { color: var(--ink) !important; }
.foot__base { color: var(--on-paper-faint) !important; }
.foot__logo { width: 92px !important; filter: none !important; }

@media (min-width: 768px) {
  :root {
    --gutter: clamp(40px, 4vw, 48px);
    --s-chapter: clamp(48px, 5vw, 64px);
  }
}

@media (max-width: 767px) {
  :root {
    --nav-h: 56px;
    --gutter: 20px;
    --s-chapter: 40px;
  }

  body { font-size: 16px; line-height: 1.5; }
  main { padding-top: var(--nav-h) !important; }
  .nav { padding-inline: 20px !important; }
  .nav__brand { gap: 9px !important; }
  .nav__mark {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    flex: 0 0 28px !important;
    aspect-ratio: 1 / 1;
    object-fit: contain;
  }
  .nav__wordmark { font-size: 1rem !important; }
  .burger { min-width: 44px !important; }

  .display--xl { font-size: clamp(2.25rem, 10vw, 3rem) !important; line-height: 1.06 !important; }
  .display--l { font-size: clamp(2rem, 8.7vw, 2.625rem) !important; line-height: 1.08 !important; }
  .display--m { font-size: clamp(1.75rem, 7.5vw, 2.25rem) !important; line-height: 1.1 !important; }
  .display--s { font-size: clamp(1.375rem, 6vw, 1.75rem) !important; line-height: 1.18 !important; }
  .copy,
  .prose,
  .problem__lines p,
  .dcard p,
  .pin__text p,
  .hpanel__lede,
  .qa p,
  .acc__body { font-size: 1rem !important; line-height: 1.5 !important; }
  .lead { font-size: 1.0625rem !important; line-height: 1.5 !important; }

  .menu__inner {
    width: calc(100% - 40px) !important;
    padding-top: 20px !important;
  }
  .menu__inner a {
    min-height: 52px !important;
    font-size: 1.625rem !important;
  }

  .hero-stage > .hero,
  .hero {
    display: block !important;
    padding-top: 0 !important;
    background: var(--paper) !important;
  }
  .hero__bg {
    position: relative !important;
    width: 100% !important;
    height: 62vw !important;
    min-height: 236px !important;
    max-height: 330px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
  .hero__bg::after { display: none !important; }
  .hero__inner {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 36px 20px 44px !important;
    color: var(--ink) !important;
    background: var(--paper) !important;
    border-bottom: 1px solid var(--line) !important;
  }
  .hero__inner .display { max-width: 12ch !important; color: var(--ink) !important; }
  .hero__inner .copy { color: var(--on-paper-soft) !important; }
  .hero__inner .overline { color: var(--brass-dk) !important; }
  .hero__inner .grid { gap: 24px !important; margin-top: 24px !important; }
  .hero__inner .btn { width: auto !important; }
  .hero__inner .btn + .btn { margin-top: 0 !important; }

  .masthead,
  .masthead:has(.btn),
  body[data-page="apply"] .masthead,
  body[data-page="received"] .masthead,
  body[data-page="404"] .masthead {
    min-height: 0 !important;
    padding: 44px 0 40px !important;
    background: var(--paper) !important;
  }
  .masthead .display--l,
  .masthead:has(.btn) .display--l {
    max-width: 18ch !important;
    font-size: clamp(2rem, 8.7vw, 2.625rem) !important;
  }

  .section { padding-block: 40px !important; }
  .section--tight { padding-block: 32px !important; }
  .section--flush-top { padding-top: 0 !important; }
  .statement { padding-block: 40px !important; }
  .u-mt-8 { margin-top: 48px !important; }
  .u-mt-7 { margin-top: 40px !important; }
  .u-mt-6 { margin-top: 32px !important; }
  .u-mt-5 { margin-top: 24px !important; }
  .u-mt-4 { margin-top: 18px !important; }

  .grid,
  .grid--2,
  .grid--3,
  .grid--4,
  .grid--5,
  .grid--5-7,
  .grid--7-5 { gap: 24px !important; }
  .register { gap: 16px !important; }
  .register > * { min-width: min(78vw, 290px); }
  .plate figcaption,
  .reg__plate figcaption,
  .media__cap { font-size: .75rem !important; line-height: 1.4 !important; }

  [data-pin] { padding: 40px 20px !important; }
  .mobile-story__track { gap: 14px !important; }
  .mobile-story__card {
    min-width: calc(100vw - 68px) !important;
    border: 1px solid var(--line) !important;
    border-radius: 3px !important;
    overflow: hidden;
  }
  .mobile-story__copy { padding: 18px !important; }
  .mobile-story__copy h2 { font-size: 1.625rem !important; line-height: 1.12 !important; }

  .hscroll__sticky { padding-block: 40px !important; }
  .hscroll__track { padding: 20px 20px 12px !important; gap: 14px !important; }
  .hpanel {
    width: calc(100vw - 68px) !important;
    min-height: 0 !important;
    padding-bottom: 20px !important;
    border: 1px solid var(--line) !important;
    border-radius: 3px !important;
    overflow: hidden;
  }
  .hpanel__body { padding: 18px !important; }
  .hpanel__name { font-size: 1.625rem !important; }

  .deck { gap: 0 !important; }
  .dcard {
    padding: 24px 0 !important;
    border-top: 1px solid var(--line) !important;
  }
  .dcard + .dcard { border-left: 0 !important; }
  .statgrid { gap: 0 !important; }
  .stat { padding-block: 24px !important; border-top: 1px solid var(--line) !important; }

  .appform { padding: 24px 20px !important; }
  .fld input,
  .fld textarea,
  .fld select { min-height: 52px !important; font-size: 16px !important; }
  .foot { padding-top: 40px !important; }
  .foot__grid { gap: 28px 20px !important; }
  .foot__logo { width: 76px !important; }
}

/* ============================================================
   2026-10-13 — MOBILE READABILITY + ORRERY RESTORATION

   The mobile composition is the animated instrument, not a fourteen-row
   pale register. Keep the complete register in the accessibility tree,
   return the moving diagram to the visual layout, and raise the small
   editorial labels that carry meaning across the site to a legible floor.
   ============================================================ */
@media (max-width: 767px) {
  /* The final light-paper palette must also reach the instrument internals. */
  body[data-page="society"] .orb {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "head" "stage" "tail" !important;
    grid-template-rows: auto auto auto !important;
    row-gap: 28px !important;
  }
  body[data-page="society"] .orb__head {
    max-width: 20rem;
  }
  body[data-page="society"] .orb__stage {
    display: block !important;
    width: min(100%, 22rem) !important;
    max-width: 22rem !important;
    margin: 2px auto 0 !important;
    aspect-ratio: 1 / 1;
  }
  body[data-page="society"] .orb__field {
    transform: scale(.86) !important;
  }
  body[data-page="society"] .orb__track {
    border-color: rgba(56, 43, 31, .3) !important;
  }
  body[data-page="society"] .orb__ring.is-lit .orb__track {
    border-color: rgba(156, 79, 44, .72) !important;
  }
  body[data-page="society"] .orb__arm {
    background: linear-gradient(90deg, transparent 0 40%, rgba(156, 79, 44, .38) 72%, var(--oxblood)) !important;
  }
  body[data-page="society"] .orb__pip {
    background: radial-gradient(circle at 34% 30%, #f1dfd3, var(--oxblood) 60%, var(--brass-dk)) !important;
    box-shadow: 0 0 0 1px rgba(56, 43, 31, .45) !important;
  }
  body[data-page="society"] .orb__count {
    color: var(--ink) !important;
    font-size: clamp(2.65rem, 13vw, 3.45rem) !important;
  }
  body[data-page="society"] .orb__name {
    max-width: 15ch;
    color: var(--brass-dk) !important;
    font-size: .75rem !important;
    line-height: 1.35 !important;
    letter-spacing: .08em !important;
  }
  body[data-page="society"] .orb__stage::before {
    background: radial-gradient(circle, rgba(156, 79, 44, .1), transparent 68%) !important;
  }
  body[data-page="society"] .orb__register {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  /* Small text remains restrained, but no longer requires squinting. */
  main .overline,
  main .mono,
  main .template-kicker,
  main .step__n,
  main .member__role,
  main .hpanel__idx,
  main .hpanel__meta,
  main .stat__u,
  main .media__cap,
  main .reg__plate figcaption,
  main figcaption,
  main .rail-controls__status {
    font-size: .75rem !important;
    line-height: 1.45 !important;
    letter-spacing: .065em !important;
  }
  main .link {
    font-size: .8125rem !important;
    line-height: 1.45 !important;
    letter-spacing: .045em !important;
  }
  main .dossier-toggle,
  main .source-notes summary {
    font-size: .8125rem !important;
    line-height: 1.45 !important;
    letter-spacing: .045em !important;
  }
  body[data-page] main section .card__meta {
    color: var(--on-paper-faint) !important;
    font-size: .75rem !important;
    line-height: 1.5 !important;
    letter-spacing: .045em !important;
    border-color: var(--line) !important;
  }
  body[data-page] main section .card__meta b,
  body[data-page] main section .dcard__n {
    color: var(--brass-dk) !important;
  }
  .fld label {
    font-size: .8125rem !important;
    line-height: 1.4 !important;
    letter-spacing: .06em !important;
  }
  .fld__opt {
    letter-spacing: .04em !important;
  }
  .rail-controls button {
    min-width: 44px !important;
    min-height: 44px !important;
    font-size: 1rem !important;
  }
  .acc__q {
    font-size: 1rem !important;
    line-height: 1.4 !important;
  }
  .acc__btn {
    gap: 12px !important;
  }
  body[data-page="membership"] .cmp--verdict thead .cmp__a,
  body[data-page="membership"] .cmp--verdict thead .cmp__b {
    padding-inline: 3px !important;
    font-size: .75rem !important;
    line-height: 1.2 !important;
    letter-spacing: .01em !important;
    text-align: center !important;
  }
  .foot h2,
  .foot a,
  .foot__base {
    font-size: .75rem !important;
    line-height: 1.45 !important;
    letter-spacing: .04em !important;
  }
}

/* Gathering cards use real responsive photographs at every viewport.
   The former desktop markup contained engravings that the definitive
   image-led art direction intentionally hides, leaving empty color blocks. */
body[data-page="index"] .hpanel__art {
  overflow: hidden;
  background: var(--paper-3) !important;
}
body[data-page="index"] .hpanel__art > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  filter: none !important;
}

/* Legacy template selectors carry page-class specificity and used to force
   the former light-on-dark masthead palette and 500–600 title weights.
   Reassert the restrained light-header contract at the same scope. */
body[data-page] .display,
body[data-page] .pin__text h2,
body[data-page] .mobile-story__copy h2,
body[data-page] .hpanel__name,
body[data-page] .dcard h3,
body[data-page] .member__name,
body[data-page] .acc__q,
body[data-page] .qa blockquote,
body[data-page] blockquote {
  font-family: var(--f-text) !important;
  font-weight: 400 !important;
}
body[data-page] main section.masthead.on-ink h1,
body[data-page] main section.masthead.on-ink .display,
body[data-page] main section.masthead.on-ink .lead,
body[data-page] main section.masthead.on-ink p {
  color: var(--ink) !important;
}
body[data-page] main section.masthead.on-ink .lead,
body[data-page] main section.masthead.on-ink p.u-soft {
  color: var(--on-paper-soft) !important;
}
body[data-page] main section.masthead.on-ink .overline {
  color: var(--brass-dk) !important;
}
body[data-page] main section.on-paper :where(.display,h1,h2,h3,h4,blockquote,strong),
body[data-page] main section.on-paper-2 :where(.display,h1,h2,h3,h4,blockquote,strong) {
  color: var(--ink) !important;
}
body[data-page] main section.on-paper :where(.copy,.lead,.prose,p,li,.qa p,.acc__body),
body[data-page] main section.on-paper-2 :where(.copy,.lead,.prose,p,li,.qa p,.acc__body) {
  color: var(--on-paper-soft) !important;
}
body[data-page] main section.on-paper .overline,
body[data-page] main section.on-paper-2 .overline {
  color: var(--brass-dk) !important;
}

.appform input:not([type="checkbox"]):not([type="radio"]),
.appform select {
  height: 54px !important;
  min-height: 54px !important;
  padding: 12px 0 !important;
}
.appform textarea {
  min-height: 132px !important;
  padding: 14px !important;
}

/* Every public content chapter now uses a light editorial ground. Older
   component rules sometimes carried their own light-on-dark declarations;
   keep heading and prose contrast deterministic across every route. */
body[data-page] main section :where(h1,h2,h3,h4,blockquote,.display,.pin__text h2,.mobile-story__copy h2,.hpanel__name,.member__name,.acc__q) {
  color: var(--ink) !important;
}
body[data-page] main section :where(p:not(.overline):not(.media__cap),li,.copy,.lead,.prose,.problem__lines p,.pin__text p,.mobile-story__copy p,.hpanel__lede,.member__role,.member__body,.qa p,.acc__body,.dcard p) {
  color: var(--on-paper-soft) !important;
}
body[data-page] main section :where(.overline,.step__n,.hpanel__meta,.hpanel__idx,.member__role,.mono,.u-brass) {
  color: var(--brass-dk) !important;
}

body[data-page] main section.on-ink h1,
body[data-page] main section.on-ink h2,
body[data-page] main section.on-ink h3,
body[data-page] main section.on-ink h4,
body[data-page] main section.on-ink .display,
body[data-page] main section.on-ink blockquote,
body[data-page] main section.on-ink blockquote * {
  color: var(--ink) !important;
}
body[data-page] main section.on-ink p:not(.overline):not(.media__cap),
body[data-page] main section.on-ink li,
body[data-page] main section.on-ink .copy,
body[data-page] main section.on-ink .lead,
body[data-page] main section.on-ink .prose,
body[data-page] main section.on-ink .acc__body,
body[data-page] main section.on-ink .hpanel__lede {
  color: var(--on-paper-soft) !important;
}
body[data-page] main section.on-ink .overline,
body[data-page] main section.on-ink .mono,
body[data-page] main section.on-ink .member__role,
body[data-page] main section.on-ink .hpanel__meta,
body[data-page] main section.on-ink .hpanel__idx {
  color: var(--brass-dk) !important;
}

body[data-page] main .display--xl { font-size: clamp(3rem, 5vw, 4rem) !important; }
body[data-page] main .display--l { font-size: clamp(2.35rem, 4.1vw, 3.25rem) !important; }
body[data-page] main .display--m { font-size: clamp(1.9rem, 3.2vw, 2.75rem) !important; }
body[data-page] main .display--s { font-size: clamp(1.5rem, 2.2vw, 2rem) !important; }

@media (max-width: 767px) {
  body[data-page] main .display--xl { font-size: 2.625rem !important; }
  body[data-page] main .display--l { font-size: 2.25rem !important; }
  body[data-page] main .display--m { font-size: 2rem !important; }
  body[data-page] main .display--s { font-size: 1.625rem !important; }
}

/* ============================================================
   2026-10-13 — MOBILE CONTAINMENT + EDITORIAL CLEANUP
   Phone layouts own their width. Photo registers, story rails, and media
   cannot force a column beyond the reading gutter or reveal a stray sliver.
   ============================================================ */
@media (max-width: 767px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip !important;
  }

  main,
  main > section,
  .wrap,
  .grid,
  .grid > *,
  .register,
  .register > *,
  .mobile-story,
  .mobile-story__track,
  .mobile-story__card,
  .hscroll,
  .hscroll__sticky,
  .hscroll__track,
  .hpanel {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  img,
  picture,
  .media,
  .plate,
  .reg__plate,
  .g-art,
  .member__photo,
  .mobile-story__image,
  .hpanel__art {
    max-width: 100% !important;
  }

  .register {
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    overflow: hidden !important;
  }
  .register > * {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  .register > :first-child { grid-column: 1 / -1 !important; }
  .reg__plate img {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5;
    object-fit: cover !important;
  }
  .reg__plate figcaption { display: none !important; }

  [data-pin],
  .mobile-story,
  .hscroll,
  .hscroll__sticky { overflow: hidden !important; }
  .mobile-story__track {
    width: 100% !important;
    padding: 0 !important;
    gap: 16px !important;
    scroll-padding-inline: 0 !important;
  }
  .mobile-story__card {
    width: 100% !important;
    min-width: 100% !important;
    flex-basis: 100% !important;
  }
  .mobile-story__image,
  .mobile-story__image img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
  }

  .hscroll__track {
    width: 100% !important;
    padding-inline: var(--gutter) !important;
    scroll-padding-inline: var(--gutter) !important;
  }
  .hpanel {
    width: calc(100vw - (var(--gutter) * 2)) !important;
    min-width: calc(100vw - (var(--gutter) * 2)) !important;
  }

  /* Keep the information that remains comfortably readable at phone width. */
  .cmp th,
  .cmp td,
  .st__item,
  .st__val,
  .offer__price + .mono {
    font-size: .875rem !important;
    line-height: 1.4 !important;
  }
  body[data-page="membership"] .cmp--verdict .cmp__k {
    font-size: .8125rem !important;
    line-height: 1.35 !important;
  }
  body[data-page="membership"] .cmp--verdict .cmp__a,
  body[data-page="membership"] .cmp--verdict .cmp__b {
    font-size: .875rem !important;
    line-height: 1.4 !important;
  }
}