/* ============================================================
   THE ROSEDALE SOCIETY
   Visual System v2.0 — "Midnight Ledger"
   ------------------------------------------------------------
   A visual layer over the existing site architecture. It keeps
   every route, section, interaction, and form intact while moving
   the house from field journal to private editorial institution.
   ============================================================ */

:root {
  --ink: #0b0908;
  --ink-2: #15110f;
  --ink-3: #2b221e;
  --ink-veil: rgba(11, 9, 8, 0.76);

  --paper: #eee7da;
  --paper-2: #f7f1e7;
  --paper-3: #d3c6b5;

  --brass: #b69358;
  --brass-lt: #d2b078;
  --brass-dk: #7b5c3f;
  --oxblood: #35110f;
  --moss: #35110f;
  --moss-lt: #65302a;
  --rust: #752e27;
  --rust-lt: #b96657;

  --on-ink: #f1eadf;
  --on-ink-soft: rgba(241, 234, 223, 0.79);
  --on-ink-faint: rgba(241, 234, 223, 0.55);
  --on-paper: #18120f;
  --on-paper-soft: rgba(24, 18, 15, 0.8);
  --on-paper-faint: rgba(24, 18, 15, 0.58);

  --f-display: "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif;
  --f-text: "DM Sans", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --t-display-xl: clamp(4.2rem, 10vw, 10rem);
  --t-display-l: clamp(3.35rem, 7.3vw, 7.25rem);
  --t-display-m: clamp(2.55rem, 5vw, 5rem);
  --t-display-s: clamp(1.8rem, 3.2vw, 3rem);
  --t-lead: clamp(1.15rem, 1.55vw, 1.52rem);
  --t-copy: clamp(1rem, 1.05vw, 1.13rem);
  --t-body: clamp(1rem, 1.05vw, 1.13rem);
  --t-mono: clamp(0.72rem, 0.76vw, 0.82rem);
  --t-micro: 0.64rem;

  --gutter: clamp(1.25rem, 4.2vw, 4.75rem);
  --rail: clamp(0px, 3vw, 52px);
  --maxw: 1580px;
  --e-out: cubic-bezier(.22, 1, .36, 1);
  --e-inout: cubic-bezier(.65, 0, .35, 1);
  --nav-h: 88px;
}

@media (max-width: 900px) {
  :root { --nav-h: 74px; }
}

html { background: var(--ink); }

body {
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--f-text);
  font-weight: 300;
  letter-spacing: -0.008em;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: .18;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), transparent 0, rgba(255, 225, 173, .035) 24rem, transparent 48rem),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 5px);
  mix-blend-mode: screen;
}

.grain { opacity: .13; mix-blend-mode: soft-light; }
::selection { background: var(--brass); color: var(--ink); }
:focus-visible { outline-color: var(--brass-lt); }

/* Typography ------------------------------------------------ */
.display {
  font-family: var(--f-display);
  font-weight: 500;
  font-optical-sizing: none;
  font-variation-settings: "opsz" 36;
  line-height: 1.02;
  letter-spacing: -.035em;
}

.display--xl,
.display--l { font-variation-settings: "opsz" 48; }
.display--xl,
.display--l { line-height: .98; }
.display--m { line-height: 1.03; }
.display--s { line-height: 1.08; letter-spacing: -.035em; }
.display em,
.display .it { color: var(--brass); font-weight: 500; }

/* The reveal mask needs optical breathing room for Bodoni's deep bowls and
   descenders. Negative margins preserve the intended line rhythm while the
   padding prevents the last line from being visibly guillotined. */
.display .line {
  padding-block: .08em .16em;
  margin-block: -.08em -.16em;
}

.display .line > span { white-space: nowrap; }

.roman {
  font-family: var(--f-display);
  font-weight: 500;
  letter-spacing: .02em;
}

.copy,
.lead,
.dcard p,
.pin__text p,
.hpanel__lede,
.orb__label,
.lrow__proj,
.cmp__b,
.fld__help,
.appform input,
.appform textarea {
  font-family: var(--f-text);
}

.copy {
  font-weight: 300;
  line-height: 1.72;
  letter-spacing: -.006em;
}

.lead {
  font-style: normal;
  font-weight: 300;
  line-height: 1.66;
  letter-spacing: -.012em;
}

.overline {
  font-size: var(--t-micro);
  letter-spacing: .24em;
  color: var(--brass-lt);
}

.overline::before {
  width: clamp(24px, 3.5vw, 52px);
  background: currentColor;
}

.on-paper .overline { color: var(--brass-dk); }
.mono { letter-spacing: .14em; }
.num {
  font-family: var(--f-display);
  font-weight: 500;
  font-optical-sizing: none;
  font-variation-settings: "opsz" 32;
}

/* Surfaces -------------------------------------------------- */
.on-ink,
.on-ink-2 {
  background-color: var(--ink);
  color: var(--on-ink);
}

.on-ink-2 { background-color: var(--ink-2); }
.on-paper { background-color: var(--paper); color: var(--on-paper); }
.on-paper-2 { background-color: var(--paper-2); color: var(--on-paper); }

.on-ink::before {
  background:
    radial-gradient(ellipse at 76% 0%, rgba(182, 147, 88, .07), transparent 48%),
    radial-gradient(ellipse at 12% 100%, rgba(53, 17, 15, .16), transparent 52%);
}

.on-paper::before,
.on-paper-2::before {
  opacity: .42;
  background-image:
    radial-gradient(circle at 12% 10%, rgba(139, 96, 65, .11), transparent 43%),
    radial-gradient(circle at 88% 82%, rgba(182, 147, 88, .07), transparent 48%);
}

.rule { background: var(--rule, rgba(241, 234, 223, .22)); }
.on-paper .rule { background: rgba(24, 18, 15, .24); }
.rule--brass { background: linear-gradient(90deg, var(--brass), transparent); }

/* Navigation and house chrome ------------------------------ */
.progress {
  height: 2px;
  background: var(--brass);
}

.siderail {
  color: rgba(241, 234, 223, .36);
  font-size: 9px;
  letter-spacing: .34em;
  border-color: rgba(241, 234, 223, .08);
}

body.rail-dark .siderail { color: rgba(24, 18, 15, .34); }

.nav {
  padding-inline: var(--gutter);
  border-bottom-color: rgba(241, 234, 223, .12);
}

.nav.is-stuck {
  background: rgba(11, 9, 8, .88);
  border-bottom-color: rgba(182, 147, 88, .25);
  backdrop-filter: blur(16px) saturate(.92);
  -webkit-backdrop-filter: blur(16px) saturate(.92);
}

.nav__mark,
.foot__logo,
.menu__art,
.seal img {
  filter: sepia(1) saturate(.72) brightness(1.5);
}

.nav__wordmark {
  font-family: var(--f-display);
  font-size: clamp(.92rem, 1.1vw, 1.08rem);
  font-weight: 500;
  letter-spacing: .01em;
  line-height: .82;
  text-transform: none;
}

.nav__wordmark small {
  margin-top: .28rem;
  font-family: var(--f-mono);
  font-size: .52rem;
  font-weight: 400;
  letter-spacing: .25em;
  line-height: 1;
  text-transform: uppercase;
  opacity: .76;
}

.nav__links { gap: clamp(1rem, 2.4vw, 2.6rem); }
.nav__links a { font-size: .61rem; letter-spacing: .16em; }
.nav__links a::after { background: var(--brass); }

.nav__links .btn {
  padding: .72em 0 !important;
  background: transparent;
  color: var(--on-ink);
  border-bottom: 1px solid var(--brass);
}
.nav__links .btn::before { display: none; }

.menu {
  background:
    radial-gradient(circle at 82% 18%, rgba(182, 147, 88, .1), transparent 34%),
    var(--ink);
}

.menu__inner a {
  font-family: var(--f-display);
  font-size: clamp(2.8rem, 9vw, 6rem);
  line-height: 1.01;
  letter-spacing: -.045em;
}

.menu__inner a i { color: var(--brass); }
.menu__foot { border-top-color: rgba(182, 147, 88, .24); }
.menu__art { opacity: .11; }

/* Buttons and links ---------------------------------------- */
.btn {
  --btn-bg: var(--paper);
  --btn-fg: var(--ink);
  justify-content: space-between;
  min-width: 184px;
  border-radius: 0;
  font-size: .64rem;
  letter-spacing: .15em;
}

.btn::before { background: var(--oxblood, #35110f); }
.btn:hover { color: var(--paper); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--on-ink);
  box-shadow: inset 0 0 0 1px rgba(241, 234, 223, .25);
}

.btn--ghost::before { background: var(--paper); }
.btn--ghost:hover { color: var(--ink); }
.on-paper .btn--ghost { box-shadow: inset 0 0 0 1px rgba(24, 18, 15, .24); }
.on-paper .btn--ghost::before { background: var(--ink); }
.on-paper .btn--ghost:hover { color: var(--paper); }

.link {
  font-size: .65rem;
  letter-spacing: .14em;
  color: var(--brass-lt);
}

.on-paper .link,
.on-paper-2 .link { color: var(--brass-dk); }

/* Opening cover -------------------------------------------- */
.hero-stage {
  position: relative;
  height: 185svh;
  background: var(--ink);
}

.hero-stage + section { position: relative; z-index: 1; }

.hero {
  --cover-left: 42%;
  --cover-top: 7%;
  --cover-right: 3.5%;
  --cover-bottom: 8%;
  --cover-scale: 1.035;
  --cover-filter: sepia(.4) saturate(.42) contrast(1.12) brightness(.64);
  --copy-opacity: 1;
  --copy-y: 0px;
  --masthead-opacity: 0;
  --masthead-scale: .92;
  --shade-opacity: 1;
  --cue-opacity: 1;
  background: var(--ink);
  isolation: isolate;
}

.hero-stage > .hero {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 0;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--shade-opacity);
  background:
    linear-gradient(90deg, var(--ink) 0%, rgba(11, 9, 8, .98) 27%, rgba(11, 9, 8, .67) 54%, rgba(11, 9, 8, .08) 85%),
    linear-gradient(0deg, rgba(11, 9, 8, .72), transparent 47%);
}

.hero__bg {
  inset: var(--cover-top) var(--cover-right) var(--cover-bottom) var(--cover-left);
  border: 1px solid rgba(182, 147, 88, .33);
  box-shadow: 0 38px 110px rgba(0, 0, 0, .46);
  overflow: hidden;
  clip-path: inset(0);
  animation: ledger-cover-reveal 1.35s .08s var(--e-out) both;
}

.hero__bg::before {
  content: "";
  position: absolute;
  inset: 11px;
  z-index: 2;
  border: 1px solid rgba(241, 234, 223, .12);
  pointer-events: none;
}

.hero__bg img {
  filter: var(--cover-filter);
  object-position: center 42%;
  transform: scale(var(--cover-scale));
  will-change: transform, filter;
}

.hero__bg::after {
  z-index: 1;
  background: linear-gradient(0deg, rgba(11, 9, 8, .34), transparent 54%);
}

.hero__inner {
  z-index: 3;
  padding-bottom: clamp(5.8rem, 10vh, 8rem);
  opacity: var(--copy-opacity);
  transform: translate3d(0, var(--copy-y), 0);
  will-change: opacity, transform;
}

.hero__inner .display--xl { max-width: 9.2ch; }
.hero__inner .copy { max-width: 46ch !important; }
.hero__cue { left: auto; right: var(--gutter); bottom: 6.7rem; writing-mode: vertical-rl; opacity: var(--cue-opacity); }
.hero__cue b { width: 1px; height: 52px; border: 0; background: linear-gradient(var(--brass), transparent); }

.hero__masthead {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 10.5vh;
  width: 100%;
  color: transparent;
  font-family: var(--f-display);
  font-size: clamp(7rem, 18.5vw, 21rem);
  font-weight: 500;
  font-variation-settings: "opsz" 96;
  line-height: .7;
  letter-spacing: -.075em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-text-stroke: 1px rgba(247, 241, 231, .68);
  opacity: var(--masthead-opacity);
  transform: translateX(-50%) scale(var(--masthead-scale));
  transform-origin: center;
  mix-blend-mode: screen;
  pointer-events: none;
  will-change: opacity, transform;
}

@keyframes ledger-cover-reveal {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0); }
}

/* Interior page mastheads ---------------------------------- */
.masthead {
  min-height: min(86svh, 920px);
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--nav-h) + clamp(4rem, 10vw, 8rem));
  padding-bottom: clamp(4rem, 8vw, 7rem);
  border-bottom: 1px solid rgba(182, 147, 88, .18);
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 34%, rgba(182, 147, 88, .08), transparent 34%),
    linear-gradient(108deg, rgba(53, 17, 15, .13), transparent 38%),
    var(--ink);
}

.masthead::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: -.035em;
  bottom: -.13em;
  color: transparent;
  font-family: var(--f-display);
  font-size: clamp(8rem, 20vw, 22rem);
  font-weight: 500;
  font-variation-settings: "opsz" 96;
  line-height: .72;
  letter-spacing: -.075em;
  white-space: nowrap;
  text-transform: uppercase;
  -webkit-text-stroke: 1px rgba(241, 234, 223, .105);
  pointer-events: none;
}

body[data-page="society"] .masthead::before { content: "Society"; }
body[data-page="membership"] .masthead::before { content: "Membership"; }
body[data-page="gatherings"] .masthead::before { content: "Gatherings"; }
body[data-page="members"] .masthead::before { content: "Portraits"; }
body[data-page="faq"] .masthead::before { content: "Questions"; }
body[data-page="apply"] .masthead::before { content: "Apply"; }
body[data-page="received"] .masthead::before { content: "Received"; }
body[data-page="terms"] .masthead::before { content: "Terms"; }
body[data-page="404"] .masthead::before { content: "Archive"; }
body[data-page="style-guide"] .masthead::before { content: "Rosedale"; }

.masthead::after {
  content: "";
  position: absolute;
  right: var(--gutter);
  bottom: 0;
  width: 1px;
  height: clamp(46px, 8vw, 82px);
  background: linear-gradient(var(--brass), transparent);
}

.masthead > .wrap { position: relative; z-index: 2; }
.masthead .overline { margin-left: clamp(0px, 5vw, 5rem); }
.masthead .display--l {
  max-width: 10.5ch;
  font-size: clamp(4.5rem, 9.2vw, 9.5rem);
}
.masthead .lead {
  max-width: 40ch !important;
  margin-left: clamp(0px, 17vw, 15rem);
}

/* Conversion mastheads keep the page's one next step inside a laptop-sized
   first view. The editorial scale remains, but the empty vertical intervals
   tighten once a masthead contains a primary action. */
.masthead:has(.btn) {
  padding-top: calc(var(--nav-h) + clamp(2rem, 4vw, 4rem));
  padding-bottom: clamp(2.75rem, 5vw, 5rem);
}
.masthead:has(.btn) .display--l {
  max-width: 11.5ch;
  margin-top: 1.15rem;
  font-size: clamp(4rem, 7.2vw, 7.6rem);
}
.masthead:has(.btn) .lead { margin-top: 1.25rem; }
.masthead:has(.btn) .lead + .u-mt-5 { margin-top: 1.5rem; }
.masthead:has(.btn) .u-mt-5 + .mono { margin-top: .75rem; }

body[data-page="apply"] .masthead {
  min-height: auto;
  padding-top: calc(var(--nav-h) + clamp(3rem, 6vw, 5rem));
  padding-bottom: clamp(3rem, 5vw, 5rem);
}
body[data-page="apply"] .masthead .display--l {
  font-size: clamp(4rem, 7.2vw, 7.6rem);
}

.masthead__art {
  right: -4%;
  top: 6%;
  width: min(48vw, 610px);
  opacity: .09;
  mix-blend-mode: screen;
  filter: sepia(1) brightness(1.45);
}

/* Easter-egg portraits are photographs, not engravings. Once revealed,
   remove the host's brightening filter and grade the image as a restrained
   silver-gelatin print so skin and paper retain their midtone detail. */
.masthead__art.egg-swap:hover,
.masthead__art.egg-swap.is-shown {
  filter: none;
}

.on-ink .masthead__art.egg-swap .egg-swap__egg,
.on-ink-2 .masthead__art.egg-swap .egg-swap__egg {
  filter: sepia(.28) saturate(.5) brightness(.72) contrast(1.1);
  mix-blend-mode: normal;
}

.masthead__art.egg-swap:hover .egg-swap__egg,
.masthead__art.egg-swap.is-shown .egg-swap__egg {
  opacity: .9;
}

/* Photography and plates ---------------------------------- */
.media,
.member__photo,
.reg__plate img,
.pin__fig {
  background: var(--ink-2);
}

.media img,
.member__photo img,
.reg__plate img,
.pin__fig img,
.curtain img {
  filter: sepia(.24) saturate(.62) contrast(1.07);
  transition: filter .8s var(--e-out), transform 1.4s var(--e-out);
}

.media:hover img,
.member:hover .member__photo img,
.reg__plate:hover img,
.pin__fig.is-on img,
.curtain:hover img {
  filter: sepia(0) saturate(.9) contrast(1.04);
}

.media__cap {
  background: linear-gradient(to top, rgba(11, 9, 8, .92), transparent);
  font-size: .58rem;
  letter-spacing: .15em;
}

figure.plate figcaption,
.reg__plate figcaption {
  border-top-color: rgba(241, 234, 223, .2);
  font-size: .58rem;
  letter-spacing: .15em;
}

.on-paper figure.plate figcaption,
.on-paper .reg__plate figcaption { border-top-color: rgba(24, 18, 15, .24); }

.on-ink .engraving img,
.on-ink-2 .engraving img {
  filter: sepia(.7) saturate(.72) brightness(1.32) contrast(1.04);
}

.g-art__mark { filter: drop-shadow(0 8px 28px rgba(0, 0, 0, .46)); }

/* Museum-grade framing: photographs read as numbered plates, never cards. */
.media,
.member__photo,
.reg__plate img,
.pin__fig {
  outline: 1px solid rgba(182, 147, 88, .16);
  outline-offset: -1px;
}

.media--21x9 {
  border-block: 1px solid rgba(182, 147, 88, .2);
}

.on-paper .media,
.on-paper .member__photo,
.on-paper .reg__plate img {
  outline-color: rgba(24, 18, 15, .18);
}

/* Editorial components ------------------------------------ */
.card,
.stat,
.step,
.dcard__n,
.inc,
.virtue,
.notfor,
.rule-item,
.qa,
.orb__rowbtn {
  border-color: rgba(241, 234, 223, .2);
}

.on-paper .card,
.on-paper .stat,
.on-paper .step,
.on-paper .dcard__n,
.on-paper .inc,
.on-paper .virtue,
.on-paper .notfor,
.on-paper .rule-item,
.on-paper .qa,
.on-paper .orb__rowbtn {
  border-color: rgba(24, 18, 15, .22);
}

.card:hover,
.lrow:hover { background: rgba(117, 46, 39, .08); }
.on-paper .card:hover,
.on-paper .lrow:hover { background: rgba(139, 96, 65, .09); }

.member__name,
.acc__q,
.dcard h3,
.pin__text h2,
.hpanel__name,
.lrow__name {
  font-family: var(--f-display);
  letter-spacing: -.025em;
}

.member__role,
.qa__q,
.pin__kicker,
.pin__count,
.card__meta,
.card__idx,
.step__n,
.rule-item__n,
.dcard__n {
  letter-spacing: .16em;
}

/* Convert repeatable content into a continuous editorial ledger. */
.deck {
  gap: 0;
  border-bottom: 1px solid rgba(241, 234, 223, .18);
}

.on-paper .deck,
.on-paper-2 .deck { border-bottom-color: rgba(24, 18, 15, .2); }

.dcard {
  min-height: 100%;
  padding: clamp(1.4rem, 2.3vw, 2.4rem);
  border-right: 1px solid rgba(241, 234, 223, .16);
  transition: background .55s var(--e-out);
}

.dcard:last-child { border-right: 0; }
.on-paper .dcard,
.on-paper-2 .dcard { border-right-color: rgba(24, 18, 15, .18); }
.dcard:hover { background: rgba(182, 147, 88, .055); }
.on-paper .dcard:hover,
.on-paper-2 .dcard:hover { background: rgba(123, 92, 63, .065); }
.dcard__n { border-top: 0; padding-top: 0; }
.dcard h3 { font-size: clamp(1.45rem, 2.25vw, 2rem); }

.statgrid {
  gap: 0;
  border-block: 1px solid rgba(24, 18, 15, .2);
}

.on-ink .statgrid { border-color: rgba(241, 234, 223, .18); }

.statgrid .stat {
  padding: clamp(1.5rem, 2.7vw, 2.8rem) clamp(5.6rem, 7vw, 7rem) clamp(1.7rem, 3vw, 3rem) clamp(1.25rem, 2.2vw, 2.4rem);
  border-top: 0;
  border-right: 1px solid rgba(24, 18, 15, .18);
}

.on-ink .statgrid .stat { border-right-color: rgba(241, 234, 223, .16); }
.statgrid .stat:nth-child(3n) { border-right: 0; }
.statgrid .stat__art { right: clamp(1rem, 2vw, 2rem); top: clamp(1.5rem, 2.7vw, 2.8rem); }

.problem__lines {
  border-left: 1px solid rgba(182, 147, 88, .32);
  padding-left: clamp(1.4rem, 4vw, 4.5rem);
}

.problem__lines p { max-width: 54ch; }
.problem .display { margin-left: clamp(0px, 8vw, 8rem); }

.statement blockquote {
  text-wrap: balance;
  text-align: center;
}

.pin__sticky {
  background: var(--ink);
  color: var(--on-ink);
}
.pin__figs { border-right: 1px solid rgba(182, 147, 88, .2); }
.pin__ticks i { background: rgba(241, 234, 223, .2); }
.pin__ticks i.is-on { background: var(--brass); }
.pin__text h2 { font-size: clamp(2.6rem, 4.7vw, 5rem); line-height: 1.02; }
.pin__text p {
  color: var(--on-ink-soft);
  font-weight: 300;
  line-height: 1.72;
}
.pin__count { color: var(--on-ink-faint); }
.pin__kicker { color: var(--brass-lt); }

/* A pin can originate on a paper chapter, but its fixed stage is always ink.
   Override the outer surface's descendant rules so the stage never inherits
   dark paper text on its dark background. */
.pin.on-paper .pin__text p { color: var(--on-ink-soft); }
.pin.on-paper .pin__count { color: var(--on-ink-faint); }
.pin.on-paper .pin__kicker { color: var(--brass-lt); }
.pin.on-paper .pin__ticks i { background: rgba(241, 234, 223, .2); }
.pin.on-paper .pin__ticks i.is-on { background: var(--brass); }

.statement { min-height: 88svh; }
.statement .display { max-width: 15ch; }
.statement.on-paper .display em { color: var(--brass-dk); }

.ticker-word { letter-spacing: -.05em; }
.ticker-word span { color: var(--brass); }
.chip { letter-spacing: .16em; }
.chip--inv { background: var(--oxblood, #35110f); }

.cmp thead th,
.cmp tbody td,
.lrow,
.st td,
.deck__head,
.acc,
.appform__foot {
  border-color: rgba(24, 18, 15, .22);
}

.on-ink .cmp thead th,
.on-ink .cmp tbody td,
.on-ink .lrow,
.on-ink .st td,
.on-ink .deck__head,
.on-ink .acc,
.on-ink .appform__foot {
  border-color: rgba(241, 234, 223, .18);
}

.cmp__a { background: rgba(139, 96, 65, .1); }
.on-ink .cmp__a { background: rgba(182, 147, 88, .09); }
.cmp tbody tr:last-child .cmp__a,
.cmp tbody tr:last-child .cmp__b {
  font-optical-sizing: none;
  font-variation-settings: "opsz" 24;
  letter-spacing: 0;
}
.cmp tbody tr:last-child .cmp__b { font-weight: 500; }
.cmp tbody tr:last-child .cmp__a { font-weight: 600; }
.cmp__detail {
  display: block;
  margin-top: .22rem;
  font-family: var(--f-mono);
  font-size: .62rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: .035em;
  color: var(--on-paper-faint);
}
.cmp__a .cmp__detail { color: rgba(24, 18, 15, .66); }
.cmp__money td { font-weight: 500; }
.cmp__money .cmp__a strong,
.cmp__saving .cmp__a strong {
  font-weight: 600;
  color: var(--oxblood);
}
.cmp__saving th,
.cmp__saving td { border-top: 1px solid var(--brass-dk); }

/* The commercial verdict is intentionally scannable: short criteria,
   binary marks where the answer is binary, and exact figures where it is not. */
.cmp--verdict .cmp__k {
  width: 46%;
  vertical-align: middle;
}
.cmp--verdict .cmp__b,
.cmp--verdict .cmp__a {
  width: 27%;
  text-align: center;
  vertical-align: middle;
}
.cmp--verdict tbody td { padding-block: .82rem; }
.cmp-mark {
  display: inline-block;
  font-family: var(--f-text);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1;
}
.cmp-mark--yes { color: var(--oxblood); }
.cmp-mark--no { color: rgba(24, 18, 15, .38); }
.cmp-mark--muted { color: rgba(24, 18, 15, .58); }
.cmp-note {
  font-family: var(--f-mono);
  font-size: .6rem;
  line-height: 1.3;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--on-paper-faint);
}
.cmp--verdict .cmp__money strong { font-size: 1.18rem; }
.cmp--verdict .cmp__saving .cmp__a strong { white-space: nowrap; }

/* Repeated application prompts behave like an editorial colophon: visible
   at decision points without turning every chapter into another hero. */
.application-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding-block: clamp(1.5rem, 2.5vw, 2.4rem);
  border-block: 1px solid rgba(24, 18, 15, .24);
}
.on-ink .application-prompt { border-color: rgba(241, 234, 223, .2); }
.application-prompt__copy { max-width: 48ch; }
.application-prompt__copy strong {
  display: block;
  margin-top: .45rem;
  font-family: var(--f-display);
  font-size: clamp(1.45rem, 2.25vw, 2.2rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.025em;
}
.application-prompt .btn { flex: 0 0 auto; }
.st__dues .st__item,
.st__dues .st__val {
  font-weight: 600;
  font-optical-sizing: none;
  font-variation-settings: "opsz" 24;
}
.magna { border-top-color: var(--brass); }

/* Orrery and instruments ----------------------------------- */
.orb__track { border-color: rgba(241, 234, 223, .17); }
.orb__ring.is-lit .orb__track { border-color: rgba(182, 147, 88, .46); }
.orb__stage::before { background: radial-gradient(circle, rgba(182, 147, 88, .11), transparent 68%); }
.orb__pip { background: radial-gradient(circle at 34% 30%, var(--brass-lt), var(--brass) 58%, var(--brass-dk)); }
.orb__arm { background: linear-gradient(90deg, transparent 0 40%, rgba(182, 147, 88, .45) 72%, var(--brass-lt)); }
.offer__price { line-height: 1 !important; }

/* Forms ----------------------------------------------------- */
.fld label { letter-spacing: .15em; }
.fld__help { font-weight: 300; }

.appform input,
.appform textarea {
  border: 0;
  border-bottom: 1px solid rgba(241, 234, 223, .26);
  border-radius: 0;
  background: rgba(241, 234, 223, .025);
  color: var(--on-ink);
  padding: .95rem .15rem;
  font-size: 1rem;
  font-weight: 300;
}

.appform input:hover,
.appform textarea:hover { border-color: var(--brass); }

.appform input:focus,
.appform textarea:focus {
  border-color: var(--brass-lt);
  background: rgba(182, 147, 88, .06);
  box-shadow: 0 1px 0 var(--brass-lt);
}

.on-paper .appform input,
.on-paper .appform textarea {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(24, 18, 15, .3);
}

/* Footer ---------------------------------------------------- */
.foot {
  border-top: 1px solid rgba(182, 147, 88, .2);
  background:
    radial-gradient(circle at 50% 0%, rgba(182, 147, 88, .08), transparent 34%),
    var(--ink);
}

.foot__logo { width: min(42vw, 170px); }
.foot h2 { color: var(--brass); letter-spacing: .2em; }
.foot a { font-size: .74rem; letter-spacing: .04em; }

/* Responsive ------------------------------------------------ */
@media (max-height: 800px) and (min-width: 901px) {
  .hero__inner { padding-bottom: 5.4rem; }
  .hero__inner .display--xl { font-size: clamp(4rem, 7.3vw, 7rem); }
  .hero__inner .u-mt-5 { margin-top: 1.7rem; }
  .hero__inner .copy { font-size: .96rem; line-height: 1.58; }
}

/* Pinned chapters occupy the same grid cell on desktop. Keep inactive
   chapters out of paint so their display titles never crossfade together. */
@media (min-width: 901px) {
  .pin__text { visibility: hidden; }
  .pin__text.is-on { visibility: visible; }
}

@media (max-width: 1080px) and (min-width: 621px) {
  .dcard:nth-child(2n) { border-right: 0; }
  .statgrid .stat:nth-child(3n) { border-right: 1px solid rgba(24, 18, 15, .18); }
  .on-ink .statgrid .stat:nth-child(3n) { border-right-color: rgba(241, 234, 223, .16); }
  .statgrid .stat:nth-child(2n) { border-right: 0; }
}

@media (max-width: 900px) {
  .hero-stage { height: 150svh; }

  .hero__bg {
    inset: 0;
    border: 0;
    box-shadow: none;
  }

  .hero__bg::before { display: none; }
  .hero::after {
    background: linear-gradient(0deg, var(--ink) 2%, rgba(11, 9, 8, .8) 52%, rgba(11, 9, 8, .24));
  }

  .hero__inner { padding-bottom: 7rem; }
  .hero__inner .display--xl { max-width: 8ch; }
  .hero__cue { right: 1rem; bottom: 6rem; }
  .hero__masthead { bottom: 15vh; font-size: 21vw; }
  .masthead { min-height: 72svh; }
  .masthead .overline,
  .masthead .lead { margin-left: 0; }
  .masthead::before { font-size: 27vw; bottom: -.04em; }
  .masthead__art { width: 92vw; opacity: .1; }

  /* Mobile chapters are a true image/story sequence. The base component
     previously showed one image above all three stories and hid the other
     two, leaving later chapters as long text-only stretches. display:contents
     lets the paired figures and copy interleave without duplicating markup. */
  .pin__sticky {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .pin__figs,
  .pin__texts { display: contents; }

  .pin__fig,
  .pin__fig + .pin__fig {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    opacity: 1;
    transform: none;
    border-right: 0;
    border-bottom: 1px solid rgba(182, 147, 88, .2);
  }

  .pin__fig:nth-child(1) { order: 1; }
  .pin__text:nth-child(1) { order: 2; }
  .pin__fig:nth-child(2) { order: 3; }
  .pin__text:nth-child(2) { order: 4; }
  .pin__fig:nth-child(3) { order: 5; }
  .pin__text:nth-child(3) { order: 6; }

  .pin__text,
  .pin__text.is-on {
    width: 100%;
    max-width: none;
    padding: clamp(2.6rem, 9vw, 4rem) var(--gutter) clamp(5rem, 14vw, 7rem);
  }
}

@media (max-width: 620px) {
  .dcard {
    padding-inline: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(241, 234, 223, .16);
  }
  .on-paper .dcard,
  .on-paper-2 .dcard { border-bottom-color: rgba(24, 18, 15, .18); }
  .dcard:last-child { border-bottom: 0; }

  .statgrid .stat,
  .statgrid .stat:nth-child(3n) {
    border-right: 0;
    border-bottom: 1px solid rgba(24, 18, 15, .18);
  }
  .on-ink .statgrid .stat,
  .on-ink .statgrid .stat:nth-child(3n) { border-bottom-color: rgba(241, 234, 223, .16); }
  .statgrid .stat:last-child { border-bottom: 0; }
}

@media (max-width: 560px) {
  .hero__inner .display--xl { font-size: clamp(3.8rem, 17vw, 6rem); }
  .hero__inner .grid { gap: 1.4rem; }
  .masthead .display--l { font-size: clamp(3.4rem, 15vw, 5.5rem); }
  .masthead::after { display: none; }
  .statement { min-height: 78svh; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-stage { height: 100svh; }
  .hero-stage > .hero { position: relative; }
  .hero__masthead { display: none; }
  .hero__bg { animation: none; }
}

/* ============================================================
   Visual System v3.0 — "The Private Edition"
   ------------------------------------------------------------
   The conversion system is an editorial sequence, not a stack of
   landing-page cards: cover, evidence, company, terms, application.
   These rules preserve the existing copy and document structure
   while restoring the asymmetric composition of the concept.
   ============================================================ */

/* Quiet conversion chrome: one permanent route to the application. */
.nav__links .btn {
  min-width: 0;
  color: var(--brass-lt);
  border-bottom-color: currentColor;
}

.nav__links .btn::after {
  content: "\2197";
  margin-left: .6rem;
  font-size: .8em;
}

/* Never turn the house seal into a novelty. */
.seal--spin { animation: none !important; }

/* Interior covers use the same framed, split composition as the opening. */
@media (min-width: 901px) {
  .masthead {
    min-height: min(94svh, 980px);
    align-items: center;
    padding-top: calc(var(--nav-h) + 4rem);
    padding-bottom: 4rem;
  }

  .masthead > .wrap {
    width: min(100% - (var(--gutter) * 2), var(--maxw));
    padding-right: min(44vw, 650px);
  }

  .masthead .overline,
  .masthead .lead { margin-left: 0; }

  .masthead .display--l {
    max-width: 7.6ch;
    font-size: clamp(4.8rem, 8.5vw, 9.4rem);
  }

  .masthead .lead { max-width: 34ch !important; }

  .masthead__art {
    top: calc(var(--nav-h) + 2.25rem);
    right: var(--gutter);
    bottom: 3.25rem;
    width: min(39vw, 610px);
    height: auto;
    display: grid;
    place-items: center;
    padding: clamp(2rem, 4vw, 4.5rem);
    border: 1px solid rgba(182, 147, 88, .28);
    background:
      linear-gradient(rgba(11, 9, 8, .1), rgba(11, 9, 8, .28)),
      radial-gradient(circle at 50% 42%, rgba(182, 147, 88, .1), transparent 60%);
    opacity: .36;
  }

  .masthead__art::after {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(241, 234, 223, .1);
    pointer-events: none;
  }

  .masthead__art > img:first-child {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .masthead__art .egg-swap__egg {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .masthead:has(.btn) {
    min-height: min(94svh, 980px);
    padding-top: calc(var(--nav-h) + 4rem);
    padding-bottom: 4rem;
  }

  .masthead:has(.btn) .display--l {
    max-width: 9.5ch;
    font-size: clamp(4.6rem, 8vw, 8.8rem);
  }

  body[data-page="apply"] .masthead {
    min-height: min(76svh, 760px);
    padding-top: calc(var(--nav-h) + 3.5rem);
    padding-bottom: 3.5rem;
  }
}

/* Ruled chapter heads create one continuous issue of a magazine. */
body:not([data-page="style-guide"]) main { counter-reset: private-edition; }

body:not([data-page="index"]):not([data-page="style-guide"]) main > .section:not(.section--flush-top) > .wrap:first-child,
body[data-page="index"] main > .section:not(.statement):not(.section--flush-top) > .wrap:first-child {
  counter-increment: private-edition;
}

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 {
  content: "VOL. I  /  " counter(private-edition, decimal-leading-zero);
  display: block;
  width: 100%;
  margin-bottom: clamp(2.6rem, 5vw, 5.5rem);
  padding-top: .7rem;
  border-top: 1px solid currentColor;
  color: inherit;
  font-family: var(--f-mono);
  font-size: .56rem;
  line-height: 1;
  letter-spacing: .25em;
  opacity: .46;
}

/* The plate register is a disciplined archive. Equal frames let the
   photography vary without making the section itself feel accidental. */
.register > :nth-child(n) { margin-top: 0; }
.register .reg__plate img { aspect-ratio: 4 / 5; }

@media (min-width: 1001px) {
  .register {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-flow: row;
    gap: clamp(1rem, 1.65vw, 1.8rem);
  }

  .register > :nth-child(n) {
    grid-column: auto;
    margin-left: 0;
  }
}

/* Numbered offerings are an index: images and type carry the hierarchy. */
@media (min-width: 901px) {
  .deck--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
  }

  .deck--4 .dcard {
    display: grid;
    grid-template-rows: auto clamp(150px, 13vw, 190px) auto 1fr;
    grid-column: auto;
    padding-top: clamp(1.8rem, 2.7vw, 2.8rem);
  }

  .dcard__art {
    height: clamp(150px, 13vw, 190px);
    margin-block: 1.5rem 2rem;
  }

  .dcard__art .engraving,
  .dcard__art img { height: 100%; width: 100%; object-fit: contain; }
}

/* Gathering pages are eight cinematic spreads. */
@media (min-width: 1001px) {
  body[data-page="gatherings"] main > .section--snap {
    min-height: 100svh;
    display: grid;
    align-items: center;
    padding-block: clamp(6rem, 10vh, 10rem);
  }

  body[data-page="gatherings"] main > .section--snap > .wrap {
    width: min(100% - (var(--gutter) * 1.15), 1740px);
  }

  body[data-page="gatherings"] main > .section--snap .grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(2rem, 4.5vw, 6rem);
  }

  body[data-page="gatherings"] main > .section--snap .grid > :not(.g-art) {
    grid-column: span 5;
    align-self: center;
    max-width: 620px;
  }

  body[data-page="gatherings"] main > .section--snap .g-art {
    grid-column: span 7;
    width: min(100%, 760px);
    justify-self: end;
  }

  body[data-page="gatherings"] main > .section--snap.on-paper .g-art { justify-self: start; }

  body[data-page="gatherings"] .g-art .media { aspect-ratio: 4 / 5.15; }
  body[data-page="gatherings"] .g-art__mark {
    width: clamp(110px, 11vw, 180px);
    right: -2.5rem;
    bottom: 6%;
  }

  body[data-page="gatherings"] main > .section--snap .display--m {
    font-size: clamp(3.6rem, 5.6vw, 6.6rem);
    max-width: 100%;
  }
}

/* Member dossiers: a sticky identity plate against a long-form ledger. */
body[data-page="members"] main > section[id] {
  border-top: 1px solid rgba(182, 147, 88, .2);
}

@media (min-width: 1001px) {
  body[data-page="members"] main > section[id] > .wrap {
    width: min(100% - (var(--gutter) * 1.4), 1500px);
  }

  body[data-page="members"] main > section[id] .grid {
    grid-template-columns: minmax(320px, 5fr) minmax(0, 7fr);
    gap: clamp(4rem, 8vw, 10rem);
    align-items: start;
  }

  body[data-page="members"] main > section[id] .grid > :first-child {
    position: sticky;
    top: calc(var(--nav-h) + 2rem);
  }

  body[data-page="members"] main > section[id] .display--m {
    font-size: clamp(4.2rem, 6.4vw, 7.2rem);
    max-width: 100%;
  }

  body[data-page="members"] main > section[id] .markplate {
    position: absolute;
    z-index: -1;
    right: -2rem;
    top: 35%;
    width: min(25vw, 310px);
    opacity: .28;
  }

  body[data-page="members"] main > section[id] blockquote {
    max-width: 30ch;
    padding-top: 1.8rem;
    border-top: 1px solid rgba(182, 147, 88, .32);
  }

  body[data-page="members"] main > section[id] .deal {
    padding-top: clamp(5rem, 11vw, 12rem);
  }

  body[data-page="members"] main > section[id] .qa {
    display: grid;
    grid-template-columns: minmax(120px, 1.6fr) minmax(0, 5fr);
    gap: 2rem;
    padding-block: 1.6rem;
  }

  body[data-page="members"] main > section[id] .qa__q { margin: 0; }
}

/* Membership is the commercial issue: broad evidence, large terms, one exit. */
@media (min-width: 901px) {
  body[data-page="membership"] main > .section .grid--5-7,
  body[data-page="membership"] main > .section .grid--7-5,
  body[data-page="index"] main > .section .grid--5-7,
  body[data-page="index"] main > .section .grid--7-5 {
    gap: clamp(4rem, 8vw, 10rem);
  }

  :where(body[data-page="membership"], body[data-page="index"]) .cmp-wrap { margin-left: 0; }

  body[data-page="membership"] main > .section > .wrap > .grid--2 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid rgba(241, 234, 223, .2);
  }

  body[data-page="membership"] main > .section > .wrap > .grid--2 > .qa {
    grid-column: span 6;
    min-height: 250px;
    padding: clamp(2rem, 4vw, 4.5rem);
    border-right: 1px solid rgba(241, 234, 223, .16);
  }

  body[data-page="membership"] main > .section > .wrap > .grid--2 > .qa:nth-child(3) {
    grid-column: 3 / span 6;
  }

  body[data-page="membership"] main > .section > .wrap > .grid--2 > .qa:nth-child(4),
  body[data-page="membership"] main > .section > .wrap > .grid--2 > .qa:nth-child(5) {
    transform: translateY(4rem);
  }

  body[data-page="membership"] .st { margin-top: clamp(4rem, 8vw, 8rem); }
  body[data-page="membership"] #process .steps { margin-top: clamp(4rem, 8vw, 8rem); }
}

/* A long comparison needs real reading room on a handset. Each criterion
   becomes a two-column comparison card, with both alternatives still visible
   side by side instead of being squeezed into three tiny columns. */
@media (max-width: 760px) {
  :where(body[data-page="membership"], body[data-page="index"]) .cmp,
  :where(body[data-page="membership"], body[data-page="index"]) .cmp tbody,
  :where(body[data-page="membership"], body[data-page="index"]) .cmp tr { display: block; }

  :where(body[data-page="membership"], body[data-page="index"]) .cmp thead { display: none; }

  :where(body[data-page="membership"], body[data-page="index"]) .cmp tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid rgba(24, 18, 15, .22);
  }

  :where(body[data-page="membership"], body[data-page="index"]) .cmp__k {
    grid-column: 1 / -1;
    width: auto;
    padding: 1rem .72rem .62rem;
    color: var(--on-paper-faint);
  }

  :where(body[data-page="membership"], body[data-page="index"]) .cmp tbody td {
    width: auto;
    min-width: 0;
    padding: .75rem .72rem 1.05rem;
    border: 0;
    font-size: .88rem;
    line-height: 1.48;
  }

  :where(body[data-page="membership"], body[data-page="index"]) .cmp tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: .5rem;
    font-family: var(--f-mono);
    font-size: .54rem;
    line-height: 1.25;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--on-paper-faint);
  }

  :where(body[data-page="membership"], body[data-page="index"]) .cmp tbody tr:last-child .cmp__a,
  :where(body[data-page="membership"], body[data-page="index"]) .cmp tbody tr:last-child .cmp__b {
    font-family: var(--f-text);
    font-size: .95rem;
    line-height: 1.35;
  }

  :where(body[data-page="membership"], body[data-page="index"]) .cmp__detail { font-size: .58rem; }

  /* The compact verdict has no prose to stack. Keep it as a true three-column
     table on phones so every check, cross and price can be compared in one eye
     movement without the broken card fragments of the long-form version. */
  body[data-page="membership"] .cmp--verdict {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  body[data-page="membership"] .cmp--verdict thead { display: table-header-group; }
  body[data-page="membership"] .cmp--verdict tbody { display: table-row-group; }
  body[data-page="membership"] .cmp--verdict tr,
  body[data-page="membership"] .cmp--verdict tbody tr { display: table-row; }
  body[data-page="membership"] .cmp--verdict thead th { display: table-cell; }
  body[data-page="membership"] .cmp--verdict thead th:first-child,
  body[data-page="membership"] .cmp--verdict .cmp__k {
    display: table-cell;
    grid-column: auto;
    width: 52%;
  }
  body[data-page="membership"] .cmp--verdict .cmp__b,
  body[data-page="membership"] .cmp--verdict .cmp__a {
    display: table-cell;
    width: 24%;
  }
  body[data-page="membership"] .cmp--verdict .cmp__k {
    padding: .78rem .48rem;
    font-size: .56rem;
    line-height: 1.35;
    letter-spacing: .045em;
    vertical-align: middle;
  }
  body[data-page="membership"] .cmp--verdict tbody td {
    padding: .68rem .3rem;
    border-bottom: 1px solid rgba(24, 18, 15, .22);
    font-size: .82rem;
    line-height: 1.25;
    vertical-align: middle;
  }
  body[data-page="membership"] .cmp--verdict .cmp-mark { font-size: 1.25rem; }
  body[data-page="membership"] .cmp--verdict .cmp-note {
    font-size: .48rem;
    letter-spacing: .025em;
  }
  body[data-page="membership"] .cmp--verdict .cmp__money strong { font-size: .92rem; }
  body[data-page="membership"] .cmp--verdict tbody tr:last-child .cmp__a,
  body[data-page="membership"] .cmp--verdict tbody tr:last-child .cmp__b {
    font-size: .78rem;
  }
  body[data-page="membership"] .cmp--verdict .cmp__detail {
    margin-top: .2rem;
    font-size: .46rem;
    line-height: 1.25;
  }
}

/* FAQ is a reading room ledger rather than a generic accordion column. */
@media (min-width: 901px) {
  body[data-page="faq"] main > .section.on-paper > .wrap--narrow {
    width: min(100% - (var(--gutter) * 2), 1380px);
    display: grid;
    grid-template-columns: 3fr 9fr;
    column-gap: clamp(3rem, 8vw, 9rem);
  }

  body[data-page="faq"] main > .section.on-paper .deal,
  body[data-page="faq"] main > .section.on-paper .grid { grid-column: 2; }

  body[data-page="faq"] .acc__btn { padding-block: clamp(1.4rem, 2.1vw, 2rem); }
  body[data-page="faq"] .acc__q {
    font-size: clamp(1.5rem, 2.4vw, 2.35rem);
    max-width: 29ch;
  }
  body[data-page="faq"] .acc__body > div { max-width: 60ch; }
}

/* The application itself reads as a private dossier. */
@media (min-width: 901px) {
  body[data-page="apply"] main > .section.on-ink > .wrap--reading {
    width: min(100% - (var(--gutter) * 2), 1420px);
    display: grid;
    grid-template-columns: minmax(250px, 3fr) minmax(0, 8fr);
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(4rem, 9vw, 11rem);
    align-items: start;
  }

  body[data-page="apply"] main > .section.on-ink > .wrap--reading > .overline,
  body[data-page="apply"] main > .section.on-ink > .wrap--reading > .copy {
    grid-column: 1;
  }

  body[data-page="apply"] main > .section.on-ink > .wrap--reading > .copy {
    position: sticky;
    top: calc(var(--nav-h) + 5rem);
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(182, 147, 88, .32);
  }

  body[data-page="apply"] .appform {
    grid-column: 2;
    grid-row: 1 / span 3;
    padding-left: clamp(2rem, 4vw, 5rem);
    border-left: 1px solid rgba(182, 147, 88, .22);
  }
}

/* Finale panels are the deliberate end of the journey. */
body[data-page="index"] main > .section:last-child,
body[data-page="society"] main > .statement:last-child,
body[data-page="membership"] main > .statement:last-child,
body[data-page="gatherings"] main > .section:last-child,
body[data-page="members"] main > .section:last-child,
body[data-page="faq"] main > .section:last-child {
  min-height: 100svh;
  display: grid;
  place-items: center;
  border-top: 1px solid rgba(182, 147, 88, .24);
  background:
    radial-gradient(circle at 50% 45%, rgba(182, 147, 88, .1), transparent 28%),
    linear-gradient(118deg, rgba(53, 17, 15, .22), transparent 38%),
    var(--ink);
}

body[data-page="index"] main > .section:last-child .display--l,
body[data-page="society"] main > .statement:last-child .display--l,
body[data-page="membership"] main > .statement:last-child .display--l,
body[data-page="gatherings"] main > .section:last-child .display--l,
body[data-page="members"] main > .section:last-child .display--l,
body[data-page="faq"] main > .section:last-child .display--l {
  max-width: 11ch;
  margin-inline: auto;
}

@media (max-width: 1000px) {
  .register > :nth-child(n) { transform: none; }
  .deck--4 .dcard:nth-child(n) { padding-top: clamp(1.4rem, 2.3vw, 2.4rem); }

  body[data-page="gatherings"] main > .section--snap { min-height: auto; }
  body[data-page="members"] main > section[id] .grid > :first-child { position: relative; top: auto; }
  body[data-page="members"] main > section[id] .markplate { max-width: 180px; }
}

@media (max-width: 680px) {
  .masthead { min-height: 82svh; }
  .masthead .display--l,
  .masthead:has(.btn) .display--l { font-size: clamp(3.45rem, 15vw, 5.3rem); }

  .masthead__art {
    top: 12%;
    right: -28%;
    width: 96vw;
    opacity: .09;
  }

  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 {
    margin-bottom: 2.4rem;
  }

  .register { gap: 1.1rem .75rem; }
  .register > :nth-child(n) { margin-top: 0; }

  .application-prompt {
    display: grid;
    justify-items: start;
    gap: 1.25rem;
  }

  body[data-page="gatherings"] main > .section--snap { padding-block: 5rem; }
  body[data-page="gatherings"] main > .section--snap .grid { gap: 2.6rem; }
  body[data-page="gatherings"] main > .section--snap.on-ink .g-art { order: -1; }
  body[data-page="gatherings"] .g-art .media { aspect-ratio: 4 / 4.8; }
  body[data-page="gatherings"] .display--m { font-size: clamp(3rem, 13vw, 4.7rem); }

  body[data-page="members"] main > section[id] .markplate {
    width: 130px;
    margin-top: 2rem;
  }

  body[data-page="members"] main > section[id] .deal { margin-top: 4rem; }
  body[data-page="members"] main > section[id] .qa { padding-bottom: 1rem; }

  body[data-page="apply"] .appform { margin-top: 3.5rem; }

  body[data-page="index"] main > .section:last-child,
  body[data-page="society"] main > .statement:last-child,
  body[data-page="membership"] main > .statement:last-child,
  body[data-page="gatherings"] main > .section:last-child,
  body[data-page="members"] main > .section:last-child,
  body[data-page="faq"] main > .section:last-child { min-height: 82svh; }
}

/* Laptop-height covers keep the decisive action in the opening frame. */
@media (max-height: 800px) and (min-width: 901px) {
  .masthead,
  .masthead:has(.btn) {
    min-height: 100svh;
    padding-top: calc(var(--nav-h) + 2.35rem);
    padding-bottom: 2.25rem;
  }

  .masthead:has(.btn) .display--l {
    max-width: 11ch;
    margin-top: .8rem;
    font-size: clamp(4rem, 6.6vw, 6.4rem);
    line-height: .96;
  }

  .masthead:has(.btn) .lead {
    margin-top: .9rem;
    font-size: 1rem;
    line-height: 1.48;
  }

  .masthead:has(.btn) .lead + .u-mt-5 { margin-top: 1.1rem; }
  .masthead:has(.btn) .u-mt-5 + .mono { margin-top: .6rem; }

  .masthead__art {
    top: calc(var(--nav-h) + 1.5rem);
    bottom: 1.75rem;
  }
}

/* ============================================================
   Visual System v3.1 — Legibility and decisive actions
   ------------------------------------------------------------
   Newsreader keeps the literary, editorial character without the
   disappearing hairlines of the previous display cut. Application
   links now read as controls before hover, on both ink and paper.
   ============================================================ */
:root {
  --f-display: "Newsreader", "Iowan Old Style", Georgia, serif;
}

.display {
  font-weight: 500;
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 48;
  letter-spacing: -.026em;
}

.display--xl,
.display--l {
  font-variation-settings: "opsz" 64;
  line-height: 1;
}

.display--m { line-height: 1.055; }
.display--s { line-height: 1.1; }

/* Savings are evidence, not decoration: set the commercial punchline in
   the text face so every numeral remains unambiguous at a glance. */
.cmp--verdict .cmp__saving .cmp__a strong {
  font-family: var(--f-text);
  font-weight: 600;
  letter-spacing: -.02em;
}

.btn {
  min-height: 48px;
  padding: 1.05em 1.9em;
  background: var(--oxblood);
  color: var(--paper-2);
  border: 1px solid var(--oxblood);
  box-shadow: 0 8px 24px rgba(53, 17, 15, .18);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  transition:
    color var(--d-base) var(--e-out),
    border-color var(--d-base) var(--e-out),
    box-shadow var(--d-base) var(--e-out),
    transform var(--d-base) var(--e-out);
}

.btn--lg { font-size: .78rem; }

.btn::before { background: #5a211d; }
.btn:hover {
  color: var(--paper-2);
  border-color: #5a211d;
  box-shadow: 0 12px 30px rgba(53, 17, 15, .28);
  transform: translateY(-2px);
}

.btn:active {
  box-shadow: 0 4px 12px rgba(53, 17, 15, .2);
  transform: translateY(0);
}

.btn:focus-visible {
  outline: 3px solid var(--brass-lt);
  outline-offset: 3px;
}

.on-ink .btn {
  background: var(--paper-2);
  color: var(--ink);
  border-color: var(--paper-2);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
}

.on-ink .btn::before { background: var(--brass-lt); }
.on-ink .btn:hover {
  color: var(--ink);
  border-color: var(--brass-lt);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .38);
}

.btn--ghost,
.on-ink .btn--ghost {
  background: transparent;
  color: var(--on-ink);
  border-color: rgba(241, 234, 223, .58);
  box-shadow: none;
}

.btn--ghost::before,
.on-ink .btn--ghost::before { background: var(--paper-2); }
.btn--ghost:hover,
.on-ink .btn--ghost:hover {
  color: var(--ink);
  border-color: var(--paper-2);
}

/* The persistent application route is a compact brass tab, not another
   quiet navigation underline. */
.nav__links .btn {
  min-height: 44px;
  padding: .72em 1.25em !important;
  background: var(--brass-lt);
  color: var(--ink);
  border: 1px solid var(--brass-lt);
  box-shadow: none;
  font-size: .61rem;
}

.nav__links .btn::before {
  display: block;
  background: var(--paper-2);
}

.nav__links .btn:hover {
  color: var(--ink);
  border-color: var(--paper-2);
  box-shadow: 0 7px 20px rgba(0, 0, 0, .25);
}

.nav__links .btn::after { content: none; }

@media (max-width: 680px) {
  .display--m { line-height: 1.075; }
  .btn { min-height: 52px; }
}

/* ============================================================
   Visual System v3.2 — Quiet Reading
   ------------------------------------------------------------
   A restrained legibility pass: warmer ink, firmer text contrast,
   calmer motion, and a phone-first rhythm. The editorial identity,
   content order, photography, and conversion paths stay intact.
   ============================================================ */

:root {
  --ink: #171310;
  --ink-2: #211b17;
  --ink-3: #3b312a;
  --ink-veil: rgba(23, 19, 16, .67);
  --paper: #f2ece1;
  --paper-2: #faf6ef;
  --paper-3: #d8cbbb;
  --on-ink-soft: rgba(248, 242, 233, .87);
  --on-ink-faint: rgba(248, 242, 233, .69);
  --on-paper-soft: rgba(24, 18, 15, .86);
  --on-paper-faint: rgba(24, 18, 15, .67);
}

body { font-weight: 400; }
body::after { opacity: .09; }
.grain { opacity: .08; }

.copy,
.lead,
.dcard p,
.pin__text p,
.hpanel__lede,
.orb__label,
.lrow__proj,
.fld__help { font-weight: 400; }

.copy { line-height: 1.68; }
.lead { line-height: 1.58; }
.u-faint { color: var(--on-ink-faint); }
.on-paper .u-faint,
.on-paper-2 .u-faint { color: var(--on-paper-faint); }

.on-ink::before {
  background:
    radial-gradient(ellipse at 76% 0%, rgba(210, 176, 120, .09), transparent 50%),
    radial-gradient(ellipse at 12% 100%, rgba(117, 46, 39, .12), transparent 54%);
}

.media img,
.member__photo img,
.reg__plate img,
.pin__fig img,
.curtain img {
  filter: sepia(.18) saturate(.72) contrast(1.03) brightness(1.04);
}

/* Display copy is present immediately; reading no longer waits for motion. */
[data-split] { opacity: 1; }
[data-split] .line { overflow: visible; }
[data-split] .line > span {
  transform: none;
  transition: none;
}

/* The hero still opens cinematically, but the proposition stays legible
   instead of exiting while the visitor is reading it. */
.hero__inner {
  opacity: 1 !important;
  transform: none !important;
}
.hero__masthead { display: none; }

@media (min-width: 901px) {
  .hero__inner { padding-bottom: clamp(3.5rem, 6.5vh, 5.75rem); }
  .hero__inner .display--xl {
    max-width: 8.5ch;
    font-size: clamp(4.8rem, 7.1vw, 7.15rem);
    line-height: .99;
  }
  .hero__inner .u-mt-5 { margin-top: clamp(1.6rem, 3vh, 2.25rem); }

  .masthead:has(.btn) .display--l {
    font-size: clamp(4rem, 6vw, 6.6rem);
    line-height: 1;
  }
  .masthead:has(.btn) .lead {
    font-size: clamp(1.05rem, 1.25vw, 1.25rem);
    line-height: 1.55;
  }
}

@media (max-width: 900px) {
  :root {
    --t-display-xl: clamp(3.35rem, 14.4vw, 4.8rem);
    --t-display-l: clamp(3rem, 13vw, 4.4rem);
    --t-display-m: clamp(2.35rem, 10.6vw, 3.45rem);
    --t-display-s: clamp(1.75rem, 7.6vw, 2.35rem);
    --t-lead: 1.18rem;
    --t-copy: 1.075rem;
    --t-body: 1.0625rem;
    --t-mono: .76rem;
    --t-micro: .68rem;
    --gutter: clamp(1.3rem, 5.8vw, 2rem);
    --s-chapter: clamp(4.75rem, 16vw, 6.25rem);
  }

  body {
    font-size: var(--t-body);
    line-height: 1.68;
    letter-spacing: -.004em;
  }

  .display {
    letter-spacing: -.018em;
    text-wrap: balance;
  }
  .display--xl,
  .display--l { line-height: 1.025; }
  .display--m { line-height: 1.08; }

  .copy,
  .dcard p,
  .pin__text p,
  .hpanel__lede,
  .qa p,
  .acc__body { font-size: var(--t-copy); line-height: 1.68; }

  .lead { font-size: var(--t-lead); line-height: 1.58; }
  .mono { letter-spacing: .09em; line-height: 1.62; }
  .overline { letter-spacing: .19em; line-height: 1.5; }
  .problem__lines p {
    font-family: var(--f-text);
    font-size: var(--t-copy);
    line-height: 1.68;
    letter-spacing: 0;
  }
  :where(body[data-page="membership"], body[data-page="index"]) .cmp-wrap > .mono.u-faint {
    max-width: 60ch;
    font-family: var(--f-text);
    font-size: .875rem;
    line-height: 1.58;
    letter-spacing: 0;
    text-transform: none;
  }

  /* Entrance movement is removed on phones. Navigation, accordions,
     image hover/tap states, and deliberately interactive rails remain. */
  [data-reveal],
  [data-reveal="fade"],
  [data-reveal="left"],
  [data-reveal="right"],
  [data-reveal="scale"],
  [data-reveal="clip"] {
    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; }
  [data-xscrub] { transform: none !important; }

  .section { padding-block: var(--s-chapter); }
  .section--tight { padding-block: clamp(4rem, 13vw, 5.25rem); }
  .grid { gap: clamp(2rem, 7.5vw, 3rem); }

  /* The mobile cover is a single readable composition, not a pinned title
     that disappears during a long artificial scroll. */
  .hero-stage { height: auto !important; }
  .hero-stage > .hero {
    position: relative;
    min-height: max(100svh, 760px);
  }
  .hero__inner {
    padding-top: calc(var(--nav-h) + 4.25rem);
    padding-bottom: 4.5rem;
  }
  .hero__inner .display--xl {
    max-width: 8.4ch;
    font-size: var(--t-display-xl);
  }
  .hero__bg {
    animation-duration: .75s;
    filter: sepia(.24) saturate(.72) contrast(1.02) brightness(.84) !important;
  }
  .hero::after {
    background: linear-gradient(0deg, rgba(23, 19, 16, .9) 0%, rgba(23, 19, 16, .56) 52%, rgba(23, 19, 16, .2));
  }
  .hero__cue { display: none; }

  .masthead,
  .masthead:has(.btn) {
    min-height: auto;
    padding-top: calc(var(--nav-h) + 4.1rem);
    padding-bottom: clamp(4.75rem, 15vw, 6rem);
  }
  .masthead .display--l,
  .masthead:has(.btn) .display--l {
    max-width: 10ch;
    margin-top: 1.2rem;
    font-size: var(--t-display-l);
    line-height: 1.025;
  }
  .masthead .lead,
  .masthead:has(.btn) .lead {
    max-width: 34ch;
    margin-top: 1.5rem;
    font-size: 1.12rem;
    line-height: 1.58;
  }
  .masthead__art {
    top: 9%;
    right: -31%;
    width: 100vw;
    opacity: .12;
  }
  .masthead__art.egg-swap {
    z-index: 0;
    opacity: .1;
  }
  .masthead > .wrap { z-index: 2; }

  /* Remove decorative publishing metadata that becomes small-print clutter
     on a phone; section names and actual content remain. */
  body: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,
  .deck__head b,
  .reg__plate figcaption,
  .media__cap,
  .pin__count { display: none !important; }

  .deck { margin-top: 2rem; }
  .dcard {
    padding: 2.35rem 0;
    min-height: 0;
  }
  .dcard__art {
    height: 92px;
    margin-bottom: 1.35rem;
  }
  .dcard h3 { font-size: 1.75rem; }
  .dcard p { max-width: 36ch; margin-top: .7rem; }

  .statgrid .stat,
  .statgrid .stat:nth-child(3n) {
    padding: 2.35rem 0;
  }
  .statgrid .stat__art { right: 0; top: 2.15rem; }
  .stat__l.copy { font-size: 1.025rem; line-height: 1.58; }

  .statement,
  body[data-page="index"] main > .section:last-child,
  body[data-page="society"] main > .statement:last-child,
  body[data-page="membership"] main > .statement:last-child,
  body[data-page="gatherings"] main > .section:last-child,
  body[data-page="members"] main > .section:last-child,
  body[data-page="faq"] main > .section:last-child {
    min-height: auto;
    padding-block: clamp(6rem, 20vw, 8rem);
  }

  /* Horizontal stories become a direct, touch-controlled rail instead of
     converting vertical reading into a long pinned animation. */
  .hscroll { height: auto !important; }
  .hscroll__sticky {
    position: static;
    height: auto;
    padding-block: 4.5rem 2rem;
  }
  .hscroll__track {
    height: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    transform: none !important;
    padding-bottom: 1rem;
  }
  .hpanel { width: 82vw; scroll-snap-align: center; }
  .hpanel--end { width: 86vw; }
  .hscroll__rail { display: none; }

  body[data-page="gatherings"] main > .section--snap { padding-block: 5.25rem; }
  body[data-page="gatherings"] .display--m { font-size: var(--t-display-m); }
  body[data-page="gatherings"] main > .section--snap .grid > :not(.g-art) { order: 1; }
  body[data-page="gatherings"] main > .section--snap .g-art { order: 2 !important; }

  .btn,
  .btn--lg {
    min-height: 54px;
    font-size: .75rem;
    letter-spacing: .12em;
  }

  .foot { padding-top: 5rem; }
  .foot__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 1.25rem;
  }
  .foot a { font-size: .8rem; line-height: 1.55; }
}

@media (max-width: 760px) {
  body[data-page="membership"] .cmp--verdict .cmp__k {
    padding: .88rem .55rem;
    font-size: .66rem;
    line-height: 1.42;
  }
  body[data-page="membership"] .cmp--verdict tbody td {
    padding: .78rem .35rem;
    font-size: .88rem;
  }
  body[data-page="membership"] .cmp--verdict .cmp-note { font-size: .56rem; }
  body[data-page="membership"] .cmp--verdict .cmp__detail { font-size: .54rem; }
}

@media (max-width: 420px) {
  .nav__wordmark { font-size: 1rem; }
  .nav__wordmark small { font-size: .46rem; }
  .burger { gap: .65rem; }
  .hero-stage > .hero { min-height: 100svh; }
  .hero__inner { padding-top: calc(var(--nav-h) + 3.6rem); }
  .foot__grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   VISUAL SYSTEM v3.3 — MOBILE BREATHING ROOM
   A little more pause between ideas, without changing the layout.
   ============================================================ */
@media (max-width: 900px) {
  :root { --s-chapter: clamp(5.75rem, 20vw, 7.5rem); }

  .section--tight { padding-block: clamp(4.75rem, 16vw, 6.25rem); }
  .grid { gap: clamp(2.5rem, 9vw, 3.5rem); }

  .copy + .copy { margin-top: 1.45em; }
  .problem__lines p + p { margin-top: 1.35rem; }
  .problem .display { margin-top: clamp(3.75rem, 13vw, 5rem); }

  .hero-stage > .hero { min-height: max(108svh, 880px); }
  .hero__inner {
    padding-top: calc(var(--nav-h) + 4.5rem);
    padding-bottom: 5.75rem;
  }
  .hero__inner .grid { gap: 2.25rem; }
  .hero__inner .u-mt-5 { margin-top: 2.25rem; }

  .masthead,
  .masthead:has(.btn) {
    padding-top: calc(var(--nav-h) + 4.5rem);
    padding-bottom: clamp(5.75rem, 18vw, 7rem);
  }
  .masthead .display--l,
  .masthead:has(.btn) .display--l { margin-top: 1.5rem; }
  .masthead .lead,
  .masthead:has(.btn) .lead { margin-top: 1.85rem; }
  .masthead:has(.btn) .lead + .u-mt-5 { margin-top: 2.1rem; }
  .masthead:has(.btn) .u-mt-5 + .mono { margin-top: 1rem; }

  .pin__text,
  .pin__text.is-on {
    padding: clamp(3.6rem, 12vw, 5rem) var(--gutter) clamp(6.25rem, 19vw, 8rem);
  }
  .pin__text h2 + p { margin-top: 1.4rem; }

  .deck { margin-top: 2.75rem; }
  .dcard { padding-block: 3rem; }
  .dcard__art { margin-bottom: 1.75rem; }
  .dcard p { margin-top: 1rem; }

  .statgrid .stat,
  .statgrid .stat:nth-child(3n) { padding-block: 3rem; }

  body[data-page="faq"] .acc__btn { padding-block: 1.75rem; }
  body[data-page="faq"] .acc__body > div { padding-bottom: 2rem; }

  body[data-page="apply"] .appform { row-gap: 2.25rem; }
  body[data-page="apply"] .fld label { margin-bottom: .75rem; }
  body[data-page="apply"] .fld__help { margin: -.1rem 0 .85rem; }
  body[data-page="apply"] .appform__foot {
    gap: 1.5rem;
    margin-top: .75rem;
    padding-top: 2rem;
  }

  .statement,
  body[data-page="index"] main > .section:last-child,
  body[data-page="society"] main > .statement:last-child,
  body[data-page="membership"] main > .statement:last-child,
  body[data-page="gatherings"] main > .section:last-child,
  body[data-page="members"] main > .section:last-child,
  body[data-page="faq"] main > .section:last-child {
    padding-block: clamp(7.25rem, 24vw, 9.5rem);
  }

  .hscroll__sticky { padding-block: 5.75rem 3rem; }
  body[data-page="gatherings"] main > .section--snap { padding-block: 6.5rem; }

  .foot { padding-top: 6.25rem; }
  .foot__grid { gap: 3rem 1.5rem; }
}

@media (max-width: 420px) {
  .hero-stage > .hero { min-height: max(108svh, 880px); }
  .hero__inner { padding-top: calc(var(--nav-h) + 4rem); }
}