/* ============================================================
   THE ROSEDALE SOCIETY — OCTOBER 2026 TEMPLATE REBUILD
   Responsive editorial shell, adapted to the Rosedale brand.
   ============================================================ */

:root {
  --paper: #f3efe6;
  --paper-2: #eae3d6;
  --paper-3: #d2c7b5;
  --ink: #1b201b;
  --ink-2: #283128;
  --ink-3: #475047;
  --on-paper: #1b201b;
  --on-paper-soft: #565d54;
  --on-paper-faint: #777d74;
  --on-ink: #f5f0e7;
  --on-ink-soft: #d5cebf;
  --on-ink-faint: #aca596;
  --brass: #987844;
  --brass-lt: #b6945e;
  --brass-dk: #775b31;
  --oxblood: #68352f;
  --moss: #405747;
  --rust: #8a4938;
  --rust-lt: #a5624f;
  --line: #c9beac;
  --header-glass: rgba(243, 239, 230, .9);
  --rail-w: 332px;
  --announce-h: 37px;
  --nav-h: 56px;
  --gutter: clamp(1.25rem, 4.2vw, 3rem);
  --s-chapter: clamp(4.75rem, 8vw, 7.5rem);
  --f-display: "Newsreader", Georgia, serif;
  --f-text: "DM Sans", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", monospace;
}

html { background: var(--paper); }
body {
  color: var(--ink);
  background: var(--paper);
  font-family: var(--f-text);
  font-size: 16px;
  line-height: 1.58;
  letter-spacing: .005em;
  overflow-x: clip;
}

body::before,
body::after,
.grain,
.progress,
.siderail { display: none !important; }

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

.template-announcement {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1300;
  height: var(--announce-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  color: var(--paper);
  background: var(--moss);
  border-bottom: 1px solid rgba(255,255,255,.16);
  font: 400 .67rem/1 var(--f-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.template-announcement i { width: 18px; height: 1px; background: currentColor; opacity: .55; }

.nav {
  top: var(--announce-h) !important;
  left: 0;
  right: 0;
  height: var(--nav-h);
  padding: 0 var(--gutter);
  color: var(--ink) !important;
  background: var(--header-glass) !important;
  border-bottom: 1px solid var(--line) !important;
  backdrop-filter: blur(16px) saturate(.9);
  -webkit-backdrop-filter: blur(16px) saturate(.9);
  box-shadow: none !important;
  z-index: 1200;
}
.nav__brand { color: var(--ink); gap: .55rem; }
.nav__mark { width: 30px; height: 30px; filter: sepia(.15) saturate(.65) contrast(1.15); }
.nav__wordmark {
  color: var(--ink) !important;
  font-family: var(--f-display);
  font-size: 1.08rem;
  line-height: .92;
  letter-spacing: -.01em;
}
.nav__wordmark small {
  color: var(--brass-dk);
  font: 400 .45rem/1 var(--f-mono);
  letter-spacing: .26em;
  margin-top: .3rem;
}
.nav__context {
  display: none;
  margin-left: auto;
  color: var(--on-paper-faint);
  font: 400 .62rem/1 var(--f-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.nav__links { display: none !important; }
.burger {
  display: flex !important;
  color: var(--ink) !important;
  margin-left: 1rem;
  min-width: 44px;
  min-height: 44px;
  justify-content: flex-end;
}
.burger > span:first-child {
  font: 400 .66rem/1 var(--f-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.burger__bars i { background: currentColor !important; }

.menu {
  inset: var(--announce-h) 0 0 auto !important;
  width: min(92vw, 440px) !important;
  height: calc(100dvh - var(--announce-h)) !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: var(--nav-h) 1fr auto !important;
  color: var(--ink) !important;
  background: var(--paper) !important;
  border-left: 1px solid var(--line);
  box-shadow: -28px 0 80px rgba(27,32,27,.12) !important;
  transform: translateX(102%);
  transition: transform .28s cubic-bezier(.22,.8,.2,1), visibility .28s !important;
  z-index: 1150 !important;
}
body.menu-open .menu { transform: translateX(0); }
.menu > div:first-child { border-bottom: 1px solid var(--line); }
.menu__inner {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  gap: 0 !important;
  padding: clamp(1.25rem, 5vw, 2.4rem) !important;
}
.menu__inner a {
  display: grid !important;
  grid-template-columns: 2.1rem 1fr;
  align-items: baseline;
  padding: 1rem 0 !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--line);
  font-family: var(--f-display) !important;
  font-size: clamp(1.65rem, 5vw, 2.2rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -.02em !important;
  opacity: 1 !important;
  transform: none !important;
}
.menu__inner a i { color: var(--brass-dk) !important; font: .62rem/1 var(--f-mono); letter-spacing: .1em; }
.menu__inner a[aria-current="page"] { color: var(--oxblood) !important; }
.menu__foot {
  padding: 1.4rem 1.5rem max(1.4rem, env(safe-area-inset-bottom)) !important;
  color: var(--on-paper-faint) !important;
  border-top: 1px solid var(--line) !important;
}
.menu__art { right: -20%; bottom: -5%; width: 80%; opacity: .045 !important; filter: none !important; }

.template-rail { display: none; }
.template-mobile-cta {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 1050;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1.25rem;
  color: var(--paper);
  background: var(--oxblood);
  box-shadow: 0 12px 32px rgba(27,32,27,.2);
  font: 500 .72rem/1 var(--f-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(100% + 24px));
  transition: opacity .2s ease, transform .28s cubic-bezier(.22,.8,.2,1);
}
.template-mobile-cta.is-shown { opacity: 1; pointer-events: auto; transform: none; }

main { padding-top: calc(var(--announce-h) + var(--nav-h)); }
.wrap { width: min(100%, 1200px); padding-inline: var(--gutter); }
.wrap--narrow { width: min(100%, 880px); }
.wrap--reading { width: min(100%, 760px); }

.on-ink,
.on-paper,
.on-paper-2 { color: var(--ink) !important; background: var(--paper) !important; }
.on-paper-2 { background: var(--paper-2) !important; }
.section:nth-of-type(even).on-ink,
.section:nth-of-type(even).on-paper { background: var(--paper-2) !important; }

.section { padding-block: var(--s-chapter); border-top: 1px solid var(--line); }
.section--tight { padding-block: clamp(3.75rem, 6vw, 5.5rem); }
.section--flush-top { padding-top: 0 !important; }
.section--snap { min-height: 0 !important; }

.display,
.pin__text h2,
.acc__q,
.stat__k,
.roman {
  color: var(--ink) !important;
  font-family: var(--f-display) !important;
  font-weight: 500 !important;
  letter-spacing: -.026em !important;
}
.display--xl { font-size: clamp(3.25rem, 6.2vw, 6.4rem); line-height: .96; }
.display--l { font-size: clamp(2.8rem, 5vw, 5.2rem); line-height: .99; }
.display--m { font-size: clamp(2.25rem, 4vw, 4rem); line-height: 1.02; }
.display--s { font-size: clamp(1.55rem, 2.2vw, 2.2rem); line-height: 1.1; }
.copy,
.lead,
.pin__text p,
.dcard p,
.qa p,
.acc__body,
.prose { color: var(--on-paper-soft) !important; font-family: var(--f-text) !important; }
.copy { font-size: 1rem; line-height: 1.65; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.55; }
.u-soft,
.u-faint { color: var(--on-paper-soft) !important; opacity: 1 !important; }
.mono,
.overline,
.pin__kicker,
.stat__u,
.fld label,
.step__n,
.qa__q {
  color: var(--brass-dk) !important;
  font-family: var(--f-mono) !important;
  font-size: .7rem !important;
  line-height: 1.5 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase;
}
.overline::before { background: var(--brass-dk) !important; }

.btn,
.btn--lg {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  padding: .9rem 1.3rem !important;
  color: var(--paper) !important;
  background: var(--moss) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font: 500 .7rem/1.2 var(--f-mono) !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
  transition: background .16s ease, transform .16s ease !important;
}
.btn:hover { background: var(--ink-2) !important; transform: translateY(-1px); }
.btn--ghost {
  color: var(--ink) !important;
  background: transparent !important;
  outline: 1px solid var(--line);
  outline-offset: -1px;
}
.link { color: var(--oxblood) !important; border-bottom-color: var(--oxblood) !important; }

/* Homepage cover: Rosedale photography occupies the template's hero-media role. */
.hero-stage { height: auto !important; }
.hero-stage > .hero {
  position: relative !important;
  min-height: clamp(680px, 88svh, 880px) !important;
  color: var(--paper) !important;
  background: var(--ink) !important;
}
.hero__bg { inset: 0 !important; transform: none !important; clip-path: none !important; }
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(18,24,19,.86) 0%, rgba(18,24,19,.55) 48%, rgba(18,24,19,.15) 100%),
              linear-gradient(0deg, rgba(18,24,19,.62), transparent 55%);
}
.hero__bg img { filter: saturate(.72) contrast(1.04) brightness(.86) !important; transform: none !important; }
.hero::after { display: none !important; }
.hero__inner {
  position: relative !important;
  z-index: 2;
  width: min(100%, 1200px);
  margin-inline: auto;
  padding: clamp(7rem, 14vh, 10rem) var(--gutter) clamp(5rem, 10vh, 7rem) !important;
  opacity: 1 !important;
  transform: none !important;
}
.hero__inner .display,
.hero__inner .copy,
.hero__inner .overline { color: var(--paper) !important; }
.hero__inner .display--xl { max-width: 8ch !important; }
.hero__inner .copy { max-width: 47ch !important; color: rgba(245,240,231,.82) !important; }
.hero__inner .btn--ghost {
  color: var(--paper) !important;
  outline-color: rgba(245,240,231,.55) !important;
}
.hero__cue,
.hero__masthead { display: none !important; }

.masthead,
.masthead:has(.btn) {
  min-height: clamp(520px, 68svh, 720px) !important;
  padding: clamp(7rem, 14vh, 10rem) 0 clamp(4.5rem, 8vw, 7rem) !important;
  color: var(--ink) !important;
  background: var(--paper-2) !important;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.masthead > .wrap { position: relative; z-index: 2; }
.masthead .display,
.masthead .lead,
.masthead .overline { color: var(--ink) !important; }
.masthead .lead { color: var(--on-paper-soft) !important; }
.masthead__art {
  top: 7% !important;
  right: -7% !important;
  width: min(56vw, 700px) !important;
  opacity: .09 !important;
  filter: none !important;
  mix-blend-mode: multiply !important;
}

.grid { gap: clamp(2rem, 4vw, 4rem); }
.plate,
.media,
.reg__plate,
.g-art,
.egg {
  border-radius: 0 !important;
  overflow: hidden;
}
.plate,
.reg__plate,
.g-art {
  background: var(--paper-2);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.media img,
.plate img,
.reg__plate img,
.g-art img { filter: saturate(.78) contrast(1.02); }
.media__cap,
.plate figcaption,
.reg__plate figcaption { color: var(--on-paper-faint) !important; border-color: var(--line) !important; }

.problem__lines { border-left-color: var(--brass) !important; }
.problem__lines p { color: var(--on-paper-soft) !important; }
.statement { text-align: center; }
.statement .display { max-width: 14ch; margin-inline: auto; }
.engraving { filter: sepia(.35) saturate(.55) contrast(.9) !important; mix-blend-mode: multiply !important; }
.engraving--ghost { opacity: .07 !important; }

.pin { color: var(--ink) !important; background: var(--paper) !important; }
.pin__sticky { background: var(--paper); }
.pin__fig { background: var(--paper-2); }
.pin__fig img { filter: saturate(.7) contrast(1.02) !important; }
.pin__texts { border-left: 1px solid var(--line); }
.pin__text { color: var(--ink) !important; }
.pin__ticks i { background: var(--line) !important; }
.pin__ticks i[is-on],
.pin__ticks i.is-on { background: var(--oxblood) !important; }

.deck,
.statgrid,
.steps,
.deal { border-color: var(--line) !important; }
.dcard,
.stat,
.step,
.qa,
.acc { border-color: var(--line) !important; }
.dcard,
.stat,
.step { background: transparent !important; }
.dcard__art,
.stat__art { opacity: .16 !important; }
.dcard h3,
.stat__k,
.step h3 { color: var(--ink) !important; }
.stat__k { font-size: clamp(2.8rem, 5vw, 5rem) !important; }
.stat__l { max-width: 28ch; }

.register {
  gap: clamp(.8rem, 1.5vw, 1.25rem) !important;
}
.reg__plate { border: 1px solid var(--line); }
.ticker { color: var(--ink); }
.chip {
  color: var(--ink) !important;
  background: transparent !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
}
.chip--inv { color: var(--paper) !important; background: var(--moss) !important; border-color: var(--moss) !important; }

.cmp-wrap,
.cmp,
.ledger { color: var(--ink) !important; background: transparent !important; border-color: var(--line) !important; }
.cmp th,
.cmp td,
.ledger th,
.ledger td { color: var(--ink) !important; border-color: var(--line) !important; }
.cmp tbody tr:nth-child(even),
.ledger tbody tr:nth-child(even) { background: rgba(210,199,181,.2) !important; }

.hscroll,
.hscroll__sticky { color: var(--ink) !important; background: var(--paper-2) !important; }
.hpanel { background: var(--paper) !important; border: 1px solid var(--line); }
.hpanel__lede { color: var(--on-paper-soft) !important; }
.hscroll__rail { background: var(--line) !important; }

.acc__btn { color: var(--ink) !important; min-height: 68px; }
.acc__btn:hover .acc__q { color: var(--oxblood) !important; }
.acc__body > div { color: var(--on-paper-soft) !important; }
.acc__sign::before,
.acc__sign::after { background: var(--moss) !important; }

.appform { gap: 2rem 2.4rem; }
.fld label { color: var(--brass-dk) !important; }
.fld__help,
.fld__opt { color: var(--on-paper-faint) !important; }
.appform input,
.appform textarea {
  min-height: 54px;
  color: var(--ink) !important;
  background: rgba(255,255,255,.42) !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
}
.appform input:focus,
.appform textarea:focus { border-color: var(--moss) !important; box-shadow: 0 0 0 3px rgba(64,87,71,.16) !important; }
.appform__foot { border-color: var(--line) !important; }

.foot {
  position: relative;
  color: var(--paper) !important;
  background: var(--ink-2) !important;
  border-top: 1px solid rgba(255,255,255,.14);
}
.foot .wrap { position: relative; z-index: 2; }
.foot__logo { filter: invert(1) sepia(.18) saturate(.35) !important; opacity: .9; }
.foot .rule { background: rgba(255,255,255,.18) !important; }
.foot h2 { color: var(--brass-lt) !important; }
.foot a,
.foot__base { color: rgba(245,240,231,.78) !important; }
.foot a:hover { color: #fff !important; }

@media (min-width: 768px) {
  :root { --gutter: clamp(2rem, 3.2vw, 3rem); }

  .template-rail {
    position: fixed;
    top: var(--announce-h);
    bottom: 0;
    left: 0;
    z-index: 1100;
    width: var(--rail-w);
    display: flex;
    flex-direction: column;
    color: var(--ink);
    background: var(--paper-2);
    border-right: 1px solid var(--line);
  }
  .template-rail__brand {
    min-height: 118px;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 1.75rem;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
  }
  .template-rail__brand img { width: 54px; height: 54px; object-fit: contain; filter: sepia(.1) saturate(.65); }
  .template-rail__brand > span { font: 500 1.55rem/.88 var(--f-display); letter-spacing: -.025em; }
  .template-rail__brand small { display: block; margin-top: .5rem; color: var(--brass-dk); font: 400 .52rem/1 var(--f-mono); letter-spacing: .28em; text-transform: uppercase; }
  .template-rail__status { padding: 2.25rem 1.75rem 2rem; border-bottom: 1px solid var(--line); }
  .template-rail__status strong { display: block; margin-top: .7rem; font: 500 2rem/1 var(--f-display); letter-spacing: -.025em; }
  .template-rail__status p { max-width: 26ch; margin-top: .9rem; color: var(--on-paper-soft); font-size: .9rem; line-height: 1.55; }
  .template-kicker { color: var(--brass-dk); font: 400 .63rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
  .template-rail__facts { margin: 0; }
  .template-rail__facts div { padding: 1rem 1.75rem; border-bottom: 1px solid var(--line); }
  .template-rail__facts dt { color: var(--on-paper-faint); font: 400 .6rem/1.2 var(--f-mono); letter-spacing: .13em; text-transform: uppercase; }
  .template-rail__facts dd { margin: .4rem 0 0; color: var(--ink); font-size: .86rem; }
  .template-rail__callout { margin-top: auto; padding: 1.5rem 1.75rem; color: var(--paper); background: var(--moss); }
  .template-rail__callout > span { display: block; max-width: 27ch; font-size: .82rem; line-height: 1.5; opacity: .78; }
  .template-rail__callout a { min-height: 50px; display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; padding-top: 1rem; color: #fff; border-top: 1px solid rgba(255,255,255,.28); font: 500 .69rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
  .template-rail__foot { padding: 1rem 1.75rem; color: var(--on-paper-faint); border-top: 1px solid var(--line); font: 400 .55rem/1.4 var(--f-mono); letter-spacing: .11em; text-transform: uppercase; }

  main,
  .foot { margin-left: var(--rail-w); width: calc(100% - var(--rail-w)); }
  .nav {
    left: var(--rail-w);
    margin-left: 0;
    width: calc(100% - var(--rail-w));
  }
  .nav__brand { display: none !important; }
  .nav__context { display: block; margin-left: 0; }
  .burger { margin-left: auto; }
  .template-mobile-cta { display: none; }

  .hero-stage > .hero { min-height: calc(100svh - var(--announce-h) - var(--nav-h)) !important; }
  .hero__inner { display: flex; flex-direction: column; justify-content: flex-end; min-height: inherit; }
  .hero__inner .grid { width: 100%; }
  .masthead { min-height: 600px !important; }
  .masthead,
  .masthead:has(.btn) { padding: 5rem 0 4rem !important; }
  .masthead .display--l,
  .masthead:has(.btn) .display--l {
    max-width: 12.5ch !important;
    font-size: clamp(3.7rem, 4.65vw, 5.15rem) !important;
  }
}

@media (min-width: 1280px) {
  :root { --rail-w: 360px; }
  .hero__inner .display--xl { font-size: clamp(5rem, 6.6vw, 7.3rem); }
}

@media (max-width: 900px) {
  :root {
    --s-chapter: clamp(4.75rem, 18vw, 6.5rem);
    --gutter: clamp(1.25rem, 5vw, 1.7rem);
  }
  body { padding-bottom: 82px; }
  body[data-page="apply"],
  body[data-page="received"],
  body[data-page="membership-offer-annual"] { padding-bottom: 0; }
  .nav__context { display: none; }
  .display--xl { font-size: clamp(3.2rem, 14vw, 4.7rem); }
  .display--l { font-size: clamp(2.8rem, 12vw, 4.1rem); }
  .display--m { font-size: clamp(2.25rem, 9.7vw, 3.25rem); }

  .hero-stage > .hero { min-height: max(780px, 100svh) !important; }
  .hero__bg::after {
    background: linear-gradient(0deg, rgba(18,24,19,.88) 0%, rgba(18,24,19,.54) 64%, rgba(18,24,19,.18) 100%);
  }
  .hero__inner { min-height: inherit; display: flex; flex-direction: column; justify-content: flex-end; padding: 7rem var(--gutter) 5.5rem !important; }
  .hero__inner .grid { gap: 1.75rem; }
  .hero__inner .grid > div { width: 100%; display: grid !important; grid-template-columns: 1fr; }
  .hero__inner .btn { width: 100%; }

  .masthead,
  .masthead:has(.btn) { min-height: 610px !important; padding: 7.5rem 0 5rem !important; }
  .masthead__art { top: 8% !important; right: -38% !important; width: 120vw !important; }
  .masthead .display--l { max-width: 9ch !important; }

  .pin__texts { border-left: 0; }
  .pin__text,
  .pin__text.is-on { padding: 3rem var(--gutter) 5.5rem !important; }
  .pin__fig { min-height: 58vw; }
  .pin__fig img { min-height: 58vw; object-fit: cover; }

  .grid { gap: 2.5rem; }
  .register { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .reg__plate { margin: 0 !important; }
  .deck { margin-top: 2.5rem !important; }
  .dcard,
  .statgrid .stat,
  .statgrid .stat:nth-child(3n) { padding-block: 2.5rem !important; }
  .hscroll__sticky { padding-block: 4.5rem 2rem !important; }
  .hpanel { width: 84vw !important; }
  .acc__btn { padding-block: 1.65rem !important; }
  .foot { padding-bottom: 7rem; }
}

@media (max-width: 520px) {
  .template-announcement { font-size: .57rem; gap: .55rem; letter-spacing: .1em; }
  .template-announcement i { width: 10px; }
  .nav { padding-inline: 1.1rem; }
  .burger > span:first-child { display: none; }
  .hero__inner { padding-bottom: 6rem !important; }
  .register { grid-template-columns: 1fr 1fr !important; }
  .foot__grid { grid-template-columns: 1fr 1fr !important; gap: 2.5rem 1rem !important; }
}

@media (min-width: 768px) and (max-width: 900px) {
  .nav__context { display: block !important; }
}

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

/* ============================================================
   MOBILE-FIRST EDITORIAL REFINEMENT — OCTOBER 2026
   A calmer, image-led reading rhythm. Desktop composition is retained.
   ============================================================ */

:root {
  --on-paper-faint: #5e655c;
  --brass: #74582f;
  --brass-dk: #674c28;
}

:where(main [id], section[id], .deck__head[id]) {
  scroll-margin-top: calc(var(--announce-h) + var(--nav-h) + 1rem);
}

:where(a, button, input, textarea, summary):focus-visible {
  outline: 3px solid var(--rust);
  outline-offset: 3px;
}

.menu-backdrop {
  position: fixed;
  inset: var(--announce-h) 0 0;
  z-index: 1140;
  width: 100%;
  border: 0;
  background: rgba(27, 32, 27, .4);
  backdrop-filter: blur(2px);
}
.menu-backdrop[hidden] { display: none; }

.rail-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .65rem;
  margin-top: 1rem;
}
.rail-controls button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  font-size: 1.05rem;
}
.rail-controls button:disabled { opacity: .32; }
.rail-controls__status { min-width: 5rem; text-align: center; color: var(--on-paper-faint); font-size: .65rem; }
.mobile-story,
.member-index,
.dossier-toggle { display: none; }

.source-notes {
  margin-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.source-notes summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--brass-dk);
  cursor: pointer;
  font: 500 .66rem/1.35 var(--f-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.source-notes .cites { margin-top: .25rem; }

@media (min-width: 901px) {
  [data-hscroll] > .hscroll__sticky > .rail-controls { display: none; }
}

@media (max-width: 767px) {
  :root {
    --gutter: 1.25rem;
    --s-chapter: 3.75rem;
  }

  body { font-size: 16px; line-height: 1.58; }
  .wrap, .wrap--narrow, .wrap--reading { width: 100%; }
  .section { padding-block: 3.75rem; }
  .section--tight { padding-block: 3rem; }
  .section--flush-top { padding-top: 0; }
  .grid { gap: 1.75rem; }

  .display--xl { font-size: clamp(2.5rem, 11vw, 2.9rem) !important; line-height: .98; }
  .display--l { font-size: clamp(2rem, 8.9vw, 2.35rem) !important; line-height: 1.02; }
  .display--m { font-size: clamp(1.75rem, 7.6vw, 2.1rem) !important; line-height: 1.05; }
  .display--s { font-size: clamp(1.4rem, 6.2vw, 1.7rem) !important; }
  .lead { font-size: 1.04rem !important; line-height: 1.58 !important; }
  .copy, .prose { font-size: .98rem; line-height: 1.62; }
  .overline { font-size: .66rem !important; letter-spacing: .13em !important; }

  .nav__brand { min-width: 44px; min-height: 44px; }
  .nav__wordmark { font-size: 1rem; }
  .burger { justify-content: center; margin-left: .5rem; }
  .menu { width: 100vw !important; border-left: 0; }
  .menu__inner { justify-content: flex-start; overflow-y: auto; padding: 1.1rem 1.25rem !important; }
  .menu__inner a { min-height: 52px; padding: .7rem 0 !important; font-size: 1.55rem !important; }
  .menu__foot { padding-block: 1rem max(1rem, env(safe-area-inset-bottom)) !important; }

  .hero-stage > .hero { min-height: max(680px, calc(100svh - var(--announce-h) - var(--nav-h))) !important; }
  .hero__bg::after {
    background: linear-gradient(0deg, rgba(18,24,19,.83) 0%, rgba(18,24,19,.38) 62%, rgba(18,24,19,.08) 100%);
  }
  .hero__inner { padding: 5.25rem var(--gutter) 3.5rem !important; }
  .hero__inner .display--xl { max-width: 9.5ch !important; }
  .hero__inner .copy { max-width: 34ch !important; font-size: .96rem; line-height: 1.55; }
  .hero__inner .grid { gap: 1.15rem; }
  .hero__inner .grid > div { gap: .7rem; }
  .hero__inner .btn { min-height: 52px; }
  .hero__inner .btn--ghost {
    min-height: 44px;
    justify-content: flex-start;
    width: max-content;
    padding-inline: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid currentColor !important;
  }

  .masthead,
  .masthead:has(.btn),
  body[data-page="apply"] .masthead {
    min-height: 460px !important;
    padding: 5rem 0 3.25rem !important;
  }
  .masthead .display--l,
  .masthead:has(.btn) .display--l,
  body[data-page="apply"] .masthead .display--l { max-width: 12ch !important; }
  .masthead .lead { max-width: 32ch !important; margin-top: 1rem !important; }
  .masthead .u-mt-5 { margin-top: 1.5rem !important; }
  .masthead__art { top: 9% !important; right: -25% !important; width: 78vw !important; opacity: .065 !important; }
  .masthead::before { font-size: 24vw !important; opacity: .035 !important; }

  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.25rem;
  }

  .statement { min-height: 0 !important; padding-block: 4.5rem !important; }
  .statement .display { max-width: 15ch; }
  .problem { padding-block: 3.5rem !important; }
  .problem__lines { margin-top: 2rem !important; }
  .problem__lines p { padding-block: .85rem !important; font-size: 1rem !important; }

  [data-pin] > .pin__sticky { display: none !important; }
  [data-pin] { height: auto !important; padding-block: 3.25rem; overflow: hidden; }
  .mobile-story { display: block; }
  .mobile-story__track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding: 0 var(--gutter) .8rem;
    scroll-padding-inline: var(--gutter);
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }
  .mobile-story__card {
    flex: 0 0 calc(100vw - 3.25rem);
    scroll-snap-align: start;
    background: var(--paper-2);
    border: 1px solid var(--line);
  }
  .mobile-story__image { aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--line); }
  .mobile-story__image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.02); }
  .mobile-story__copy { padding: 1.4rem; }
  .mobile-story__copy h2 { margin-top: .65rem; font-size: 1.8rem !important; line-height: 1.04; }
  .mobile-story__copy p { margin-top: .9rem; color: var(--on-paper-soft) !important; }
  .mobile-story > .rail-controls { padding-inline: var(--gutter); }

  .register { grid-template-columns: 1fr 1fr !important; gap: .8rem !important; }
  .register > :first-child { grid-column: 1 / -1; }
  .register > :nth-child(n+6) { display: none; }
  .register .reg__plate img { aspect-ratio: 4 / 4.6; }
  .deck__head { margin-bottom: 1.5rem; }

  .statgrid { grid-template-columns: 1fr !important; }
  .statgrid .stat { min-height: 0 !important; padding: 1.45rem 0 !important; }
  .statgrid .stat:nth-child(n+4) { display: none; }
  .stat__art { display: none !important; }
  .stat__k { font-size: 2.6rem !important; }
  .ticker { overflow: visible !important; }
  .ticker__row { transform: none !important; flex-wrap: wrap; gap: .55rem .9rem !important; white-space: normal !important; }
  .ticker__row > * { margin: 0 !important; }

  :where(body[data-page="membership"], body[data-page="index"]) .cmp tbody tr:nth-child(n+4):not(:last-child) { display: none; }
  :where(body[data-page="membership"], body[data-page="index"]) .cmp tbody tr { padding-block: .25rem; }
  :where(body[data-page="membership"], body[data-page="index"]) .cmp__k { padding-top: .85rem; }
  .source-notes .cites { font-size: .76rem; line-height: 1.55; }

  .deck--4 { display: block !important; }
  .deck--4 .dcard {
    position: relative;
    display: grid !important;
    grid-template-columns: 2.2rem 1fr;
    gap: .3rem .75rem;
    min-height: 0 !important;
    padding: 1.25rem 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--line) !important;
  }
  .deck--4 .dcard__art { display: none; }
  .deck--4 .dcard__n { grid-row: 1 / span 2; align-self: start; }
  .deck--4 .dcard h3 { margin: 0 !important; font-size: 1.4rem; }
  .deck--4 .dcard p { margin: .2rem 0 0 !important; font-size: .92rem; line-height: 1.5; }

  .hscroll__sticky { padding: 3.25rem 0 2.25rem !important; }
  .hscroll__sticky > .wrap { padding-inline: var(--gutter); }
  .hscroll__hint { display: none; }
  .hscroll__track {
    gap: 1rem !important;
    padding-inline: var(--gutter) !important;
    scroll-padding-inline: var(--gutter);
    scroll-snap-type: x mandatory;
  }
  .hpanel { width: calc(100vw - 3.25rem) !important; min-height: 0 !important; scroll-snap-align: start; }
  .hpanel .media { aspect-ratio: 16 / 10 !important; }
  .hpanel__body { padding: 1.35rem !important; }
  .hpanel__body h3 { font-size: 1.5rem !important; }
  [data-hscroll] .rail-controls { padding-inline: var(--gutter); }

  body[data-page="gatherings"] main > .section--snap {
    min-height: 0 !important;
    padding-block: 3.5rem !important;
  }
  body[data-page="gatherings"] main > .section--snap .grid { display: flex; flex-direction: column; gap: 1.5rem; }
  body[data-page="gatherings"] main > .section--snap .g-art { order: -1 !important; width: 100%; }
  body[data-page="gatherings"] .g-art .media { aspect-ratio: 16 / 10 !important; }
  body[data-page="gatherings"] .g-art__mark { width: 82px !important; }
  body[data-page="gatherings"] main > .section--snap .display--m { max-width: 14ch; }
  body[data-page="gatherings"] main > .section--snap .copy { max-width: 38ch; }

  .member-index {
    position: relative;
    display: block;
    padding: 1.25rem var(--gutter) 1.1rem;
    overflow: hidden;
    background: var(--paper-2);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .member-index > span { color: var(--brass-dk); font-size: .61rem; letter-spacing: .1em; text-transform: uppercase; }
  .member-index > div { display: flex; gap: .6rem; overflow-x: auto; margin-top: .75rem; padding-bottom: .25rem; }
  .member-index a { flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center; padding: 0 .9rem; color: var(--ink); border: 1px solid var(--line); font-size: .86rem; }
  body[data-page="members"] main > section[id] { padding-block: 3.5rem; }
  body[data-page="members"] main > section[id] .grid { gap: 1.75rem; }
  body[data-page="members"] main > section[id] .markplate { width: 100%; margin-top: 1.5rem !important; }
  body[data-page="members"] main > section[id] .markplate .engraving { display: block; height: 210px; }
  body[data-page="members"] main > section[id] .markplate img { width: 100%; height: 100%; object-fit: contain; }
  body[data-page="members"] main > section[id] blockquote { margin-top: 1.5rem !important; padding-top: 1.25rem; border-top: 1px solid var(--line); }
  body[data-page="members"] main > section[id] .deal { padding-top: 0 !important; }
  body[data-page="members"] main > section[id] .qa { padding-block: 1.15rem !important; }
  body[data-page="members"] .member-dossier:not(.dossier-open) .qa:nth-child(n+3) { display: none; }
  .dossier-toggle {
    min-height: 48px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
    padding: 0;
    color: var(--oxblood);
    background: transparent;
    border: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    font: 500 .7rem/1 var(--f-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .dossier-toggle::after { content: "+"; font-size: 1.1rem; }
  .dossier-toggle[aria-expanded="true"]::after { content: "−"; }

  .acc__btn { min-height: 56px; padding-block: 1rem !important; }
  .acc__q { font-size: 1.05rem !important; line-height: 1.25; }
  .acc__body > div { padding-bottom: 1.25rem !important; }

  .appform { gap: 1.35rem; }
  .fld__help { display: block; margin: .35rem 0 .5rem; font-size: .78rem; line-height: 1.45; }
  .appform input, .appform textarea { font-size: 1rem; }
  .appform__foot .btn, .appform button[type="submit"] { min-height: 54px; font-size: .78rem !important; }

  .link,
  .foot a,
  .cites a { min-height: 44px; display: inline-flex; align-items: center; }
  .foot { padding-bottom: 6.5rem; }
  .template-mobile-cta.is-suppressed { opacity: 0; pointer-events: none; transform: translateY(calc(100% + 24px)); }
}

/* ============================================================
   PARIS, 1927 — ROSEDALE SALON SYSTEM
   Left Bank restraint, evening glamour, and print-led materials.
   This is a token/component evolution: content and architecture stay put.
   ============================================================ */

:root {
  --paper: #e9e0cd;
  --paper-2: #d9cbb0;
  --paper-3: #b8a486;
  --ink: #202426;
  --ink-2: #1d2a2f;
  --ink-3: #3b4547;
  --on-paper: #202426;
  --on-paper-soft: #4d504c;
  --on-paper-faint: #595549;
  --on-ink: #f2ead7;
  --on-ink-soft: #d3c6aa;
  --on-ink-faint: #afa489;
  --brass: #85682f;
  --brass-lt: #b99a58;
  --brass-dk: #604a24;
  --oxblood: #6a302d;
  --moss: #34483e;
  --rust: #7b4637;
  --rust-lt: #9a604c;
  --tobacco: #76563d;
  --midnight: #1d2a2f;
  --line: #b7a789;
  --line-dark: #7f725d;
  --header-glass: rgba(233, 224, 205, .93);
  --f-mono: "Jost", "DM Sans", Arial, sans-serif;
  --ease-paper: cubic-bezier(.22, .75, .24, 1);
}

html { background: var(--midnight); }
body {
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.3), transparent 32rem),
    radial-gradient(circle at 84% 60%, rgba(118,86,61,.07), transparent 38rem),
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(32,36,38,.012) 8px);
}
.grain {
  display: block !important;
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  opacity: .11;
  background-image: var(--noise);
  mix-blend-mode: multiply;
}
::selection { color: var(--paper); background: var(--oxblood); }

.display,
.pin__text h2,
.acc__q,
.stat__k,
.roman,
blockquote {
  font-variation-settings: "opsz" 46;
  text-wrap: balance;
}
.display { letter-spacing: -.032em !important; }
.lead { font-family: var(--f-text); letter-spacing: .003em; }
.mono,
.overline,
.template-kicker,
.fld label,
.deck__head,
.media__cap,
.reg__plate figcaption {
  font-family: var(--f-mono) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: .14em !important;
}
blockquote {
  color: var(--ink) !important;
  font-style: italic;
  font-weight: 500;
}

.template-announcement {
  color: var(--on-ink);
  background:
    linear-gradient(90deg, rgba(185,154,88,.08), transparent 30%, transparent 70%, rgba(185,154,88,.08)),
    var(--midnight);
  border-bottom-color: rgba(185,154,88,.4);
  font-size: .61rem;
  letter-spacing: .2em;
}
.template-announcement i {
  position: relative;
  width: 28px;
  background: var(--brass-lt);
}
.template-announcement i::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 5px; height: 5px;
  background: var(--brass-lt);
  transform: translate(-50%,-50%) rotate(45deg);
}

.nav {
  background:
    linear-gradient(90deg, rgba(96,74,36,.055), transparent 24%, transparent 76%, rgba(96,74,36,.055)),
    var(--header-glass) !important;
  border-bottom: 3px double var(--line) !important;
  backdrop-filter: blur(14px) saturate(.72);
  -webkit-backdrop-filter: blur(14px) saturate(.72);
}
.nav__mark { filter: sepia(.42) saturate(.68) contrast(1.22); }
.nav__wordmark { font-size: 1.12rem; }
.nav__wordmark small,
.nav__context { color: var(--brass-dk); }
.burger__bars { width: 25px; }
.burger__bars i { height: 1px !important; }
.burger__bars i:nth-child(2) { width: 68%; margin-left: auto; }

.menu {
  background-color: var(--paper) !important;
  background-image:
    linear-gradient(90deg, transparent 0 18px, rgba(106,48,45,.2) 18px 19px, transparent 19px),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(32,36,38,.035) 32px) !important;
  border-left: 3px double var(--line-dark);
  box-shadow: -34px 0 90px rgba(29,42,47,.24) !important;
}
.menu__inner { padding-left: clamp(2.3rem, 8vw, 3.5rem) !important; }
.menu__inner a {
  border-bottom: 1px solid rgba(96,74,36,.34);
  font-style: italic;
  transition: color .2s ease, padding-left .25s var(--ease-paper) !important;
}
.menu__inner a:hover { padding-left: .45rem !important; color: var(--oxblood) !important; }
.menu__inner a i { color: var(--brass-dk) !important; font-style: normal; }
.menu__inner a[aria-current="page"] {
  color: var(--oxblood) !important;
  box-shadow: inset 3px 0 var(--oxblood);
  padding-left: .7rem !important;
}
.menu__art { opacity: .065 !important; filter: sepia(.42) saturate(.55) contrast(1.18) !important; }
.menu__foot { color: var(--on-paper-faint) !important; border-top: 3px double var(--line) !important; }
.menu-backdrop { background: rgba(18,29,33,.55); backdrop-filter: blur(4px) saturate(.65); }

.template-mobile-cta,
.btn {
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)) !important;
  box-shadow: inset 0 0 0 1px rgba(242,234,215,.18), 0 10px 28px rgba(29,42,47,.14);
  font-family: var(--f-mono) !important;
  letter-spacing: .16em !important;
}
.btn { background: var(--moss) !important; color: var(--on-ink) !important; }
.btn:hover { background: var(--midnight) !important; color: var(--on-ink) !important; }
.btn--ghost {
  background: rgba(29,42,47,.28) !important;
  border-color: rgba(242,234,215,.62) !important;
  box-shadow: inset 0 0 0 1px rgba(242,234,215,.12);
}
.template-mobile-cta { background: var(--oxblood); color: var(--on-ink); }

.on-ink,
.on-paper { background-color: var(--paper) !important; }
.on-paper-2 { background-color: var(--paper-2) !important; }
.section:nth-of-type(even).on-ink,
.section:nth-of-type(even).on-paper { background-color: var(--paper-2) !important; }
.section,
.pin,
.hscroll__sticky,
.masthead,
.menu,
.template-rail {
  background-image:
    radial-gradient(circle at 17% 12%, rgba(255,255,255,.2), transparent 29rem),
    repeating-linear-gradient(0deg, transparent 0 8px, rgba(32,36,38,.012) 9px);
}
.section { border-top: 3px double var(--line); }
.section > .wrap { position: relative; }

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 {
  width: auto;
  color: var(--brass-dk);
  border-top: 3px double var(--line-dark);
  letter-spacing: .22em;
  opacity: .82;
}

.hero { background: var(--midnight); }
.hero::after {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 3;
  pointer-events: none;
  border: 1px solid rgba(185,154,88,.5);
  box-shadow: inset 0 0 0 6px rgba(29,42,47,.1);
}
.hero__bg img {
  filter: saturate(.68) sepia(.09) contrast(1.08) brightness(.9);
}
.hero__bg::after {
  background:
    radial-gradient(circle at 62% 54%, rgba(185,154,88,.12), transparent 28%),
    linear-gradient(90deg, rgba(21,31,35,.76) 0%, rgba(21,31,35,.26) 57%, rgba(21,31,35,.12) 100%),
    linear-gradient(0deg, rgba(21,31,35,.82), transparent 62%) !important;
}
.hero__inner .display {
  color: var(--on-ink) !important;
  text-shadow: 0 2px 28px rgba(8,14,16,.55);
}
.hero__inner .overline { color: var(--brass-lt) !important; }
.hero__inner .copy { color: rgba(242,234,215,.86) !important; }

.masthead {
  background-color: var(--paper) !important;
  border-bottom: 3px double var(--line);
}
.masthead::after {
  background: linear-gradient(90deg, var(--brass), transparent 58%) !important;
  opacity: .42;
}
.masthead::before { color: var(--tobacco) !important; opacity: .045 !important; }
.masthead__art {
  border: 3px double rgba(96,74,36,.32) !important;
  background: radial-gradient(circle, rgba(185,154,88,.12), transparent 62%) !important;
  filter: sepia(.35) saturate(.55) contrast(.95) !important;
}

.media,
.plate,
.reg__plate,
.g-art,
.egg {
  clip-path: none !important;
  border-radius: 0 !important;
}
.media,
.plate,
.reg__plate,
.g-art {
  position: relative;
  border: 1px solid var(--line-dark) !important;
  outline: 6px solid rgba(233,224,205,.7);
  outline-offset: -7px;
  box-shadow: 0 10px 28px rgba(58,49,37,.12);
}
.media img,
.plate img,
.reg__plate img,
.g-art img {
  filter: saturate(.7) sepia(.055) contrast(1.06) brightness(.96) !important;
  transition: filter .45s ease, transform .65s var(--ease-paper);
}
.media:hover img,
.plate:hover img,
.reg__plate:hover img,
.g-art:hover img { filter: saturate(.86) contrast(1.04) brightness(1) !important; }
.media__cap,
.plate figcaption,
.reg__plate figcaption {
  background: rgba(233,224,205,.94);
  border-top: 1px solid var(--line-dark) !important;
  color: var(--brass-dk) !important;
  text-transform: uppercase;
}

.deck__head {
  position: relative;
  padding-block: .8rem;
  border-top: 3px double var(--line-dark) !important;
  border-bottom: 1px solid var(--line) !important;
  color: var(--brass-dk);
}
.deck__head::after {
  content: "◆";
  position: absolute;
  left: 50%; top: -.72rem;
  padding-inline: .65rem;
  color: var(--brass);
  background: inherit;
  font-size: .55rem;
  transform: translateX(-50%);
}
.dcard,
.stat,
.step,
.qa,
.acc {
  border-color: var(--line) !important;
}
.dcard {
  position: relative;
  background: rgba(255,255,255,.05) !important;
}
.dcard::before {
  content: "";
  position: absolute;
  left: 1.4rem; right: 1.4rem; top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--brass), transparent 72%);
  opacity: .65;
}
.dcard:hover { background: rgba(185,154,88,.08) !important; }
.dcard__n,
.stat__u,
.qa__q,
.step__n { color: var(--brass-dk) !important; }
.dcard__art,
.stat__art,
.engraving { filter: sepia(.48) saturate(.55) contrast(.96) !important; }

.pin { border-block: 3px double var(--line); }
.pin__figs { border-right: 3px double var(--line-dark) !important; }
.pin__texts { border-left: 3px double var(--line) !important; }
.pin__kicker { color: var(--brass-dk) !important; }
.pin__ticks i { height: 2px; }

.register {
  padding: clamp(.75rem, 1.5vw, 1.25rem);
  border: 3px double var(--line-dark);
  background: rgba(255,255,255,.08);
}
.reg__plate { background: var(--paper-2) !important; }
.reg__plate:nth-child(3n+2) { transform: translateY(.7rem); }

.ticker {
  border-block: 3px double var(--line-dark);
  background: rgba(29,42,47,.035);
}
.chip {
  color: var(--ink) !important;
  border: 1px solid var(--line-dark) !important;
  background: rgba(233,224,205,.52) !important;
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
}
.chip--inv { color: var(--on-ink) !important; background: var(--midnight) !important; }

.cmp-wrap,
.ledger {
  border: 3px double var(--line-dark) !important;
  box-shadow: 0 12px 32px rgba(58,49,37,.08);
}
.cmp thead,
.ledger thead { background: var(--midnight) !important; }
.cmp thead th,
.ledger thead th { color: var(--on-ink) !important; }
.cmp tbody tr:nth-child(even),
.ledger tbody tr:nth-child(even) { background: rgba(118,86,61,.07) !important; }
.source-notes { border-top: 3px double var(--line); }
.source-notes summary { color: var(--brass-dk); }

.hscroll,
.hscroll__sticky { background-color: var(--paper-2) !important; }
.hpanel {
  border: 3px double var(--line-dark);
  background: var(--paper) !important;
  box-shadow: 0 16px 40px rgba(58,49,37,.13);
}
.hpanel__body { border-top: 1px solid var(--line); }
.hpanel__n { color: var(--brass-dk) !important; }
.hscroll__rail { height: 2px; background: var(--line-dark) !important; }
.hscroll__rail i { background: var(--oxblood) !important; }
.rail-controls button {
  color: var(--ink);
  border: 1px solid var(--line-dark);
  background: rgba(233,224,205,.58);
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
}

.member-index {
  background:
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(32,36,38,.04) 28px),
    var(--paper-2);
  border-block: 3px double var(--line-dark);
}
.member-index a {
  background: rgba(233,224,205,.62);
  border: 1px solid var(--line-dark);
}
.markplate {
  padding: 1rem;
  border: 3px double var(--line-dark);
  background: rgba(255,255,255,.08);
}
.qa { border-top: 1px solid var(--line) !important; }
.dossier-toggle { color: var(--oxblood); border-block: 3px double var(--line) !important; }

.acc { border-bottom: 1px solid var(--line-dark) !important; }
.acc__n { color: var(--brass-dk) !important; }
.acc__sign::before,
.acc__sign::after { background: var(--oxblood) !important; }

.appform {
  padding: clamp(1.25rem, 3vw, 2.6rem);
  border: 3px double var(--line-dark);
  background:
    linear-gradient(90deg, transparent 0 34px, rgba(106,48,45,.16) 34px 35px, transparent 35px),
    repeating-linear-gradient(0deg, transparent 0 43px, rgba(32,36,38,.035) 44px),
    rgba(255,255,255,.1);
}
.fld label { color: var(--brass-dk) !important; text-transform: uppercase; }
.appform input,
.appform textarea {
  color: var(--ink) !important;
  background: rgba(242,234,215,.62) !important;
  border: 1px solid var(--line-dark) !important;
  border-bottom-width: 2px !important;
  clip-path: none !important;
  box-shadow: inset 0 1px rgba(255,255,255,.45);
}
.appform input:focus,
.appform textarea:focus {
  border-color: var(--oxblood) !important;
  box-shadow: 0 0 0 3px rgba(106,48,45,.16) !important;
}
.appform__foot { border-top: 3px double var(--line-dark) !important; }

.foot {
  color: var(--on-ink) !important;
  background:
    radial-gradient(circle at 18% 12%, rgba(185,154,88,.09), transparent 28rem),
    repeating-linear-gradient(135deg, transparent 0 13px, rgba(242,234,215,.012) 14px),
    var(--midnight) !important;
  border-top: 5px double var(--brass) !important;
}
.foot h2 { color: var(--brass-lt) !important; }
.foot a,
.foot__base { color: var(--on-ink-soft) !important; }
.foot__logo { filter: invert(1) sepia(.35) saturate(.5) !important; }

[data-reveal] {
  transition-duration: .48s !important;
  transition-timing-function: var(--ease-paper) !important;
}
[data-reveal]:not(.is-in) { transform: translateY(10px) !important; }
[data-split] { transition: opacity .35s ease !important; }

@media (min-width: 768px) {
  .template-rail {
    background-color: var(--paper-2);
    border-right: 5px double var(--line-dark);
    box-shadow: 10px 0 38px rgba(29,42,47,.08);
  }
  .template-rail::after {
    content: "";
    position: absolute;
    inset: 10px;
    pointer-events: none;
    border: 1px solid rgba(96,74,36,.3);
  }
  .template-rail > * { position: relative; z-index: 1; }
  .template-rail__brand { border-bottom: 3px double var(--line-dark); }
  .template-rail__brand img { filter: sepia(.42) saturate(.64) contrast(1.2); }
  .template-rail__brand > span { font-style: italic; }
  .template-rail__status,
  .template-rail__facts div { border-bottom-color: var(--line); }
  .template-rail__callout {
    margin: auto 10px 10px;
    color: var(--on-ink);
    background: var(--moss);
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  }
  .template-rail__foot { padding-inline: 1.75rem; }
}

@media (max-width: 767px) {
  .hero::after { inset: 8px; }
  .hero__bg img { filter: saturate(.7) sepia(.07) contrast(1.06) brightness(.94); }
  .hero__bg::after {
    background:
      radial-gradient(circle at 58% 46%, rgba(185,154,88,.1), transparent 30%),
      linear-gradient(0deg, rgba(21,31,35,.86) 0%, rgba(21,31,35,.42) 63%, rgba(21,31,35,.08) 100%) !important;
  }
  .menu__inner { padding-left: 2.2rem !important; }
  .menu__inner a { font-style: italic; }
  .masthead__art { border: 0 !important; }
  .register { padding: .65rem; }
  .reg__plate:nth-child(3n+2) { transform: none; }
  .mobile-story__card {
    background: var(--paper-2);
    border: 3px double var(--line-dark);
    box-shadow: 0 12px 28px rgba(58,49,37,.12);
  }
  .mobile-story__image { border-bottom: 3px double var(--line); }
  .deck--4 .dcard::before { left: 0; right: 0; }
  .hpanel { box-shadow: 0 12px 28px rgba(58,49,37,.12); }
  .appform {
    margin-inline: calc(var(--gutter) * -.35);
    padding: 1.35rem;
    background-position: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .media img,
  .plate img,
  .reg__plate img,
  .g-art img { transition: none !important; }
}

/* Scrolling is intentionally native. The original experience combined
   wheel interpolation, proximity snapping and smooth anchor movement;
   together they made the viewport feel delayed and occasionally pulled it
   after input stopped. Decorative motion must never own page movement. */
html {
  scroll-behavior: auto !important;
  scroll-snap-type: none !important;
}

/* ============================================================
   MOBILE EDITORIAL COMPOSITION — image first, quieter, unboxed
   ============================================================ */
@media (max-width: 767px) {
  :root {
    --announce-h: 0px;
    --gutter: 1.35rem;
    --s-chapter: 4.5rem;
  }

  body { padding-bottom: 0 !important; }
  .template-announcement,
  .template-mobile-cta { display: none !important; }
  .nav { top: 0 !important; }
  .menu { top: 0 !important; height: 100dvh !important; }
  main { padding-top: var(--nav-h) !important; }

  .section { padding-block: 4.5rem; border-top: 1px solid var(--line); }
  .section--tight { padding-block: 3.75rem; }
  .section--flush-top { padding-top: 0; }

  /* The cover is a photograph followed by a quiet title block, rather
     than desktop copy laid over a dark full-screen crop. */
  .hero-stage,
  .hero-stage > .hero {
    height: auto !important;
    min-height: 0 !important;
  }
  .hero-stage > .hero {
    display: block !important;
    color: var(--ink) !important;
    background: var(--paper) !important;
    overflow: visible;
  }
  .hero__bg {
    position: relative !important;
    inset: auto !important;
    height: clamp(350px, 49svh, 465px) !important;
    background: var(--midnight);
    overflow: hidden;
  }
  .hero__bg img {
    object-position: 50% 48% !important;
    filter: saturate(.76) sepia(.05) contrast(1.03) brightness(.94) !important;
  }
  .hero__bg::after {
    background:
      linear-gradient(180deg, rgba(21,31,35,.08), transparent 42%),
      linear-gradient(0deg, rgba(21,31,35,.28), transparent 34%) !important;
  }
  .hero__inner {
    position: relative !important;
    display: block !important;
    min-height: 0 !important;
    padding: 2.65rem var(--gutter) 3.5rem !important;
    color: var(--ink) !important;
    background: var(--paper);
  }
  .hero__inner::before {
    content: "";
    display: block;
    width: 2.75rem;
    height: 2px;
    margin-bottom: 1.35rem;
    background: var(--oxblood);
  }
  .hero__inner .display,
  .hero__inner .copy { color: var(--ink) !important; }
  .hero__inner .overline { color: var(--brass-dk) !important; }
  .hero__inner .display--xl {
    max-width: 10ch !important;
    font-size: clamp(2.45rem, 11.5vw, 3.05rem) !important;
    line-height: .96 !important;
  }
  .hero__inner .grid { margin-top: 1.6rem !important; gap: 1.5rem !important; }
  .hero__inner .copy {
    max-width: 35ch !important;
    font-size: 1rem !important;
    line-height: 1.62 !important;
    color: var(--on-paper-soft) !important;
  }
  .hero__inner .btn--ghost {
    color: var(--oxblood) !important;
    width: max-content !important;
    min-height: 44px !important;
    padding: .7rem 0 .45rem !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--oxblood) !important;
    outline-color: transparent !important;
    box-shadow: none !important;
    clip-path: none !important;
  }

  /* Keep chapters spacious, but remove the repeated decorative boxes. */
  .problem { padding-block: 4.25rem !important; }
  .problem__lines {
    margin-top: 1.65rem !important;
    padding-left: 1.1rem;
  }
  .problem__lines p {
    padding-block: .72rem !important;
    font-size: .96rem !important;
    line-height: 1.55 !important;
  }
  .problem .display--m {
    margin-top: 2.4rem !important;
    font-size: clamp(1.78rem, 8vw, 2.05rem) !important;
  }

  .mobile-story__card,
  .register,
  .cmp-wrap,
  .ledger,
  .markplate,
  .appform,
  .hpanel {
    border: 1px solid var(--line-dark) !important;
    box-shadow: none !important;
  }
  .mobile-story__image { border-bottom: 1px solid var(--line) !important; }
  .register { padding: 0 !important; gap: .55rem !important; border: 0 !important; background: transparent; }
  .reg__plate { clip-path: none; }
  .reg__plate figcaption { padding-inline: .55rem; }

  /* A concise comparison is more useful on a phone than a long table. */
  :where(body[data-page="membership"], body[data-page="index"]) .cmp tbody tr {
    display: none !important;
  }
  :where(body[data-page="membership"], body[data-page="index"]) .cmp tbody tr:nth-child(1),
  :where(body[data-page="membership"], body[data-page="index"]) .cmp tbody tr:nth-child(4),
  :where(body[data-page="membership"], body[data-page="index"]) .cmp tbody tr:last-child {
    display: grid !important;
  }
  .cmp-wrap { box-shadow: none; }
  .cmp tbody td { font-size: .86rem !important; line-height: 1.45 !important; }
  .cmp__k { font-size: .64rem !important; letter-spacing: .11em !important; }

  /* Gatherings become photographic editorial cards on phones. */
  .hscroll__sticky { padding: 4.25rem 0 3rem !important; }
  .hscroll__head { padding-inline: var(--gutter); }
  .hscroll__track { align-items: stretch !important; gap: .9rem !important; }
  .hpanel {
    width: calc(100vw - 3.7rem) !important;
    grid-template-rows: auto auto auto auto auto !important;
    align-content: start;
    padding: .8rem .8rem 1.1rem !important;
    background: var(--paper) !important;
  }
  .hpanel__idx { padding: .1rem .1rem .55rem; }
  .hpanel__art {
    display: block !important;
    width: 100%;
    height: auto !important;
    aspect-ratio: 16 / 10;
    padding: 0 !important;
    background-position: center;
    background-size: cover;
    filter: saturate(.75) sepia(.05) contrast(1.02);
  }
  .hpanel__art .engraving { display: none !important; }
  .hpanel:nth-child(1) .hpanel__art { background-image: url("../photos/m17-700.webp?v=69879daa50"); }
  .hpanel:nth-child(2) .hpanel__art { background-image: url("../photos/dsc00045-700.webp?v=eb94e2255a"); }
  .hpanel:nth-child(3) .hpanel__art { background-image: url("../photos/m22-700.webp?v=9d3923dbf5"); }
  .hpanel:nth-child(4) .hpanel__art { background-image: url("../photos/atxwc-71c-700.webp?v=2cc8ec633d"); }
  .hpanel:nth-child(5) .hpanel__art { background-image: url("../photos/dsc00139-700.webp?v=36c1d3f4b8"); }
  .hpanel:nth-child(6) .hpanel__art { background-image: url("../photos/m16-700.webp?v=936f12b699"); }
  .hpanel:nth-child(7) .hpanel__art { background-image: url("../photos/dsc00073-700.webp?v=0581f161d1"); }
  .hpanel:nth-child(8) .hpanel__art { background-image: url("../photos/m12-700.webp?v=b5c7232e5d"); }
  .hpanel__name {
    min-height: 0 !important;
    margin: 1rem .2rem 0 !important;
    font-size: 1.55rem !important;
    line-height: 1.02 !important;
  }
  .hpanel__lede {
    min-height: 0 !important;
    margin: .72rem .2rem 0 !important;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    font-size: .93rem !important;
    line-height: 1.5 !important;
  }
  .hpanel__meta { margin: 1rem .2rem 0 !important; padding-top: .75rem !important; }
  .hpanel--end { align-content: center; padding: 1.5rem !important; }

  .appform { margin-inline: 0; padding: 1.2rem; }
  .appform__foot { border-top: 1px solid var(--line-dark) !important; }
}

/* ============================================================
   PARIS SALON — DEFINITIVE ART DIRECTION
   Modernist literary journal, private dining room, 1927.
   ============================================================ */
:root {
  --f-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --paper: #e7dcc5;
  --paper-2: #f1e8d7;
  --paper-3: #d8c9aa;
  --ink: #242321;
  --ink-2: #1c2729;
  --midnight: #1c2729;
  --moss: #31483d;
  --oxblood: #702f2d;
  --tobacco: #765238;
  --brass: #927039;
  --brass-lt: #c2a46a;
  --brass-dk: #624a24;
  --line: rgba(76,61,39,.28);
  --line-dark: rgba(57,45,29,.5);
  --on-paper-soft: #514c43;
  --on-paper-faint: #686052;
}

body {
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 16% 8%, rgba(255,255,255,.24), transparent 27rem),
    repeating-linear-gradient(0deg, transparent 0 10px, rgba(66,48,27,.012) 11px);
}
.grain { opacity: .2 !important; mix-blend-mode: multiply !important; }

.display,
.masthead h1,
.hero h1,
.foot h2,
.nav__wordmark,
.template-rail__brand > span {
  font-family: var(--f-display) !important;
  font-optical-sizing: auto;
  font-weight: 600 !important;
  letter-spacing: -.035em !important;
}
.display em,
.statement blockquote,
.menu__inner a,
.nav__wordmark { font-style: italic; }

.template-announcement {
  background: var(--oxblood) !important;
  border-bottom: 1px solid rgba(194,164,106,.58) !important;
}
.nav {
  background:
    linear-gradient(90deg, rgba(112,47,45,.05), transparent 23%, transparent 77%, rgba(112,47,45,.05)),
    rgba(241,232,215,.97) !important;
  border-bottom: 4px double var(--line-dark) !important;
  box-shadow: 0 5px 20px rgba(47,36,22,.05);
}
.nav__mark { filter: sepia(.45) saturate(.72) contrast(1.28); }
.nav__wordmark { font-size: 1.2rem; line-height: .9; }
.nav__wordmark small { margin-top: .45rem; font-family: var(--f-ui); font-style: normal; }

.overline {
  color: var(--brass-dk) !important;
  letter-spacing: .2em !important;
}
.overline::before {
  width: 2rem !important;
  height: 1px !important;
  background: var(--oxblood) !important;
  box-shadow: 8px 0 0 -3px var(--paper), 11px 0 0 -3px var(--oxblood);
}

.btn,
.template-rail__callout,
.template-mobile-cta {
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px) !important;
}
.btn {
  background: var(--moss) !important;
  box-shadow:
    inset 0 0 0 1px rgba(231,220,197,.7),
    inset 0 0 0 4px var(--moss),
    inset 0 0 0 5px rgba(194,164,106,.45) !important;
}
.btn:hover { background: var(--oxblood) !important; }

.section,
.masthead,
.hscroll__sticky,
.pin__sticky {
  background-image:
    radial-gradient(circle at 17% 12%, rgba(255,255,255,.2), transparent 28rem),
    repeating-linear-gradient(0deg, transparent 0 10px, rgba(66,48,27,.012) 11px) !important;
}
.section { border-top: 4px double var(--line) !important; }
.statement {
  background-color: var(--paper-3) !important;
  box-shadow: inset 0 10px 0 rgba(255,255,255,.1), inset 0 -10px 0 rgba(74,53,29,.03);
}
.statement blockquote { color: var(--ink); }

.media,
.plate,
.reg__plate,
.mobile-story__image,
.g-art {
  background: var(--paper-2);
  border-radius: 0 !important;
}
.media img,
.plate img,
.reg__plate img,
.mobile-story__image img,
.g-art img {
  filter: saturate(.62) sepia(.11) contrast(1.09) brightness(.96) !important;
}
.plate,
.reg__plate,
.g-art {
  padding: 5px;
  border: 1px solid var(--line-dark);
  box-shadow: inset 0 0 0 3px var(--paper-2), inset 0 0 0 4px var(--line);
  clip-path: none !important;
}
.plate figcaption,
.reg__plate figcaption {
  margin-top: 4px;
  border-top: 1px solid var(--line);
}

.mobile-story__card,
.hpanel,
.cmp-wrap,
.ledger,
.appform,
.markplate {
  background-color: rgba(241,232,215,.82) !important;
  box-shadow:
    inset 0 0 0 4px var(--paper-2),
    inset 0 0 0 5px var(--line),
    0 14px 32px rgba(66,48,27,.08) !important;
}
.hpanel__name,
.mobile-story__copy h2,
.dcard h3,
.qa blockquote { font-family: var(--f-display) !important; }
.hpanel__idx,
.hpanel__meta,
.mobile-story__copy .pin__kicker { color: var(--brass-dk) !important; }

.cmp thead,
.ledger thead { background: var(--oxblood) !important; }
.cmp tbody tr:nth-child(even),
.ledger tbody tr:nth-child(even) { background: rgba(146,112,57,.08) !important; }

.foot {
  border-top: 7px double var(--brass) !important;
  background:
    radial-gradient(circle at 50% 0, rgba(194,164,106,.13), transparent 32rem),
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(231,220,197,.012) 15px),
    var(--midnight) !important;
}

@media (min-width: 768px) {
  .template-rail {
    background:
      linear-gradient(90deg, rgba(112,47,45,.045), transparent 28%, transparent 72%, rgba(112,47,45,.045)),
      repeating-linear-gradient(0deg, transparent 0 31px, rgba(60,44,26,.024) 32px),
      var(--paper) !important;
    border-right: 7px double var(--line-dark) !important;
  }
  .template-rail::after { inset: 12px; border-color: rgba(98,74,36,.42); }
  .template-rail__brand { border-bottom: 4px double var(--line-dark); }
  .template-rail__brand > span { color: var(--oxblood); font-size: 1.72rem; }
  .template-rail__status strong { font-family: var(--f-display); font-weight: 600; }
  .template-rail__callout { background: var(--oxblood); }
}

@media (max-width: 767px) {
  .nav { min-height: var(--nav-h); }
  .nav__wordmark { font-size: 1.08rem; }

  .hero-stage > .hero { padding-top: .8rem; }
  .hero__bg {
    width: calc(100% - 1.6rem);
    height: clamp(340px, 47svh, 440px) !important;
    margin-inline: .8rem;
    border: 1px solid var(--line-dark);
    box-shadow: 0 0 0 5px var(--paper), 0 0 0 6px var(--line-dark);
  }
  .hero__bg::after {
    box-shadow: inset 0 0 0 8px rgba(28,39,41,.08), inset 0 0 0 9px rgba(194,164,106,.45);
  }
  .hero__inner {
    margin-top: 1.1rem;
    padding: 2.85rem var(--gutter) 3.8rem !important;
    border-bottom: 4px double var(--line) !important;
    background:
      radial-gradient(circle at 85% 12%, rgba(146,112,57,.08), transparent 13rem),
      var(--paper) !important;
  }
  .hero__inner::before {
    width: 100%;
    height: 1px;
    margin-bottom: 1.65rem;
    background: linear-gradient(90deg, var(--oxblood) 0 2.3rem, transparent 2.3rem 2.75rem, var(--line-dark) 2.75rem 100%);
  }
  .hero__inner .overline { white-space: nowrap; letter-spacing: .14em !important; }
  .hero__inner .overline::before { display: none; }
  .hero__inner .display--xl {
    max-width: 10.8ch !important;
    font-size: clamp(2.35rem, 10.4vw, 2.75rem) !important;
    line-height: .94 !important;
  }
  .hero__inner .copy { max-width: 32ch !important; }

  .section { border-top: 4px double var(--line) !important; }
  .section > .wrap { position: relative; }
  .statement { border-block: 4px double var(--line-dark) !important; }

  .mobile-story__card,
  .hpanel,
  .cmp-wrap,
  .ledger,
  .appform,
  .markplate {
    border: 1px solid var(--line-dark) !important;
    box-shadow: inset 0 0 0 4px var(--paper-2), inset 0 0 0 5px var(--line) !important;
  }
  .mobile-story__image { margin: 5px 5px 0; border: 1px solid var(--line-dark) !important; }
  .mobile-story__copy { padding: 1.5rem 1.6rem 1.7rem; }

  .register { gap: .72rem !important; }
  .register .reg__plate { padding: 4px; border: 1px solid var(--line-dark) !important; }

  .hpanel { padding: .95rem .95rem 1.25rem !important; }
  .hpanel__art {
    border: 1px solid var(--line-dark);
    box-shadow: inset 0 0 0 5px rgba(241,232,215,.14);
    filter: saturate(.6) sepia(.12) contrast(1.08) !important;
  }
  .hpanel__name { font-size: 1.72rem !important; }

  .appform {
    padding: 1.5rem !important;
    background:
      linear-gradient(90deg, transparent 0 26px, rgba(112,47,45,.14) 26px 27px, transparent 27px),
      repeating-linear-gradient(0deg, transparent 0 43px, rgba(36,35,33,.035) 44px),
      rgba(241,232,215,.78) !important;
  }
}

/* ============================================================
   MOBILE HEADER + NAVIGATION CORRECTION
   Keep the compact salon shell, but give the brand and menu control a
   stable edge-to-edge composition and let the menu links begin at the top
   of their grid row instead of inheriting the old vertically-centred state.
   ============================================================ */
@media (max-width: 767px) {
  :root { --nav-h: 64px; }

  .nav {
    top: 0 !important;
    height: calc(var(--nav-h) + env(safe-area-inset-top));
    min-height: calc(var(--nav-h) + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    padding-left: max(1.15rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    gap: .75rem;
  }

  .nav__brand {
    min-width: 0;
    min-height: 48px;
    gap: .65rem;
  }
  .nav__mark { width: 34px; height: 34px; flex: 0 0 34px; }
  .nav__wordmark { font-size: 1.14rem; line-height: .88; }
  .nav__wordmark small {
    margin-top: .42rem;
    font-size: .46rem;
    letter-spacing: .24em;
  }

  .burger {
    min-width: 82px;
    min-height: 48px;
    margin-left: auto !important;
    padding: 0;
    justify-content: flex-end;
    gap: .7rem;
  }
  .burger > span:first-child {
    display: inline !important;
    font-size: .64rem;
    letter-spacing: .16em;
  }
  .burger__bars { width: 24px; }
  body.menu-open .burger__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  body.menu-open .burger__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .menu {
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    grid-template-rows: calc(var(--nav-h) + env(safe-area-inset-top)) minmax(0, 1fr) auto !important;
    border-inline: 0 !important;
  }
  .menu > div:first-child { min-height: 0; }
  .menu__inner {
    align-self: stretch !important;
    min-height: 0;
    height: auto;
    justify-content: flex-start;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: clamp(1.35rem, 4.5vh, 2.35rem) 1.25rem 1.25rem 2rem !important;
  }
  .menu__inner a {
    min-height: 56px;
    grid-template-columns: 2rem 1fr;
    align-items: center;
    padding: .65rem 0 !important;
    font-size: clamp(1.6rem, 8vw, 1.85rem) !important;
    line-height: 1 !important;
  }
  .menu__inner a[aria-current="page"] { padding-left: .7rem !important; }
  .menu__foot {
    position: relative;
    z-index: 1;
    padding: 1rem max(1.5rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1.5rem, env(safe-area-inset-left)) !important;
    background: rgba(231,220,197,.9);
  }
  .menu__art { opacity: .045 !important; }

  main { padding-top: calc(var(--nav-h) + env(safe-area-inset-top)) !important; }
}

/* ============================================================
   MOBILE RENDERING AUDIT — OCTOBER 2026
   Restore information that the diagram-only composition hid on phones,
   strengthen the smallest editorial labels, and make every horizontal
   rail behave like a deliberate touch surface.
   ============================================================ */
@media (max-width: 767px) {
  :root {
    --t-micro: .72rem;
    --t-mono: .77rem;
  }

  .overline { font-size: .7rem !important; }

  /* On phones the animated orrery cannot communicate fourteen unlabeled
     disciplines by itself. Keep the illustration, then expose its existing
     controls as a compact, readable two-column register. */
  body[data-page="society"] .orb {
    grid-template-areas: "head" "stage" "reg" "tail";
    row-gap: 1.7rem;
  }
  body[data-page="society"] .orb__stage {
    width: min(100%, 18rem);
    margin-inline: auto;
  }
  body[data-page="society"] .orb__register {
    position: relative;
    width: auto;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 .9rem;
    margin: 0;
    padding: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    border: 0;
  }
  body[data-page="society"] .orb__row,
  body[data-page="society"] .orb__rowbtn { min-width: 0; }
  body[data-page="society"] .orb__rowbtn {
    min-height: 52px;
    grid-template-columns: 1.6rem minmax(0, 1fr);
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .65rem 0;
    border-top-color: var(--line-dark);
  }
  body[data-page="society"] .orb__row:nth-last-child(-n + 2) .orb__rowbtn {
    border-bottom: 1px solid var(--line-dark);
  }
  body[data-page="society"] .orb__n {
    color: var(--brass-dk);
    font-size: 1.05rem;
  }
  body[data-page="society"] .orb__label {
    color: var(--ink) !important;
    font-size: .86rem;
    line-height: 1.22;
  }
  body[data-page="society"] .orb.is-engaged .orb__row:not(.is-active) .orb__label {
    color: var(--ink) !important;
  }
  body[data-page="society"] .orb.is-engaged .orb__row:not(.is-active) .orb__n {
    color: var(--brass-dk) !important;
  }
  body[data-page="society"] .orb__rule { display: none; }
  body[data-page="society"] .orb__tail { margin-top: -.25rem; }

  /* These rails are intentionally horizontal. Give touch scrolling its own
     momentum and preserve a little trailing space so the final item never
     lands hard against the viewport edge. */
  .mobile-story__track,
  .hscroll__track,
  .member-index > div {
    overscroll-behavior-inline: contain;
    scroll-padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch;
  }
  .member-index > div { padding-right: var(--gutter); }

  /* Keep faint engravings inside their cover instead of relying on a clipped
     off-canvas box, which produced false horizontal-overflow reports and
     uneven crops on narrow browsers. */
  .masthead__art,
  .masthead__art.egg-swap {
    right: 0 !important;
    width: 74vw !important;
    max-width: 320px;
  }
}