/* ==========================================================================
   PewRoster design system
   Quiet sanctuary: warm stone, vestment plum, brass rules, stained glass tiles.
   Display: EB Garamond. Body: Assistant. Motion: slow dissolve, arched reveals.
   ========================================================================== */

:root {
  /* --- core palette from the brief --- */
  --bg: #F9F6F2;
  --surface: #FFFFFF;
  --ink: #231C26;
  --primary: #5C3D63;
  --accent: #B58A46;
  --muted: #6B6169;

  /* --- derived stone tints --- */
  --stone-50: #FDFBF8;
  --stone-100: #F4EFE8;
  --stone-200: #EBE3D8;
  --stone-300: #DFD4C5;
  --stone-400: #C9BCAA;

  /* --- vestment plum family --- */
  --plum-900: #2C1B31;
  --plum-800: #3C2742;
  --plum-700: #4A3151;
  --plum-600: #6B4872;
  --plum-500: #5C3D63;
  --plum-400: #7B5A83;
  --plum-200: #C0AAC6;
  --plum-050: #F0E9F2;

  /* --- brass family --- */
  --brass-700: #7E5F2A;
  --brass-600: #96712F;
  --brass-500: #B58A46;
  --brass-300: #D6B87E;
  --brass-100: #F2E7D2;

  /* --- stained glass accents, used in small panes only --- */
  --glass-ruby: #93303F;
  --glass-cobalt: #2E4B85;
  --glass-emerald: #2C6B55;
  --glass-amber: #C4872B;
  --glass-violet: #6B3F87;

  /* --- ink levels --- */
  --ink-soft: #3B3040;
  --ink-mute: #6B6169;
  --ink-faint: #8B8290;
  --on-dark: #F6F1EA;
  --on-dark-mute: #D3C7D6;

  /* --- spacing scale, unhurried --- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 18px;
  --s-5: 26px;
  --s-6: 38px;
  --s-7: 54px;
  --s-8: 76px;
  --s-9: 104px;
  --s-10: 140px;

  /* --- radii, arches --- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-pill: 999px;
  --arch: 50% 50% var(--r-md) var(--r-md) / 30% 30% var(--r-md) var(--r-md);
  --arch-deep: 50% 50% var(--r-md) var(--r-md) / 44% 44% var(--r-md) var(--r-md);
  --arch-soft: 46% 46% var(--r-md) var(--r-md) / 18% 18% var(--r-md) var(--r-md);

  /* --- shadows, soft and low --- */
  --sh-1: 0 1px 2px rgba(35, 28, 38, .05);
  --sh-2: 0 10px 30px -18px rgba(35, 28, 38, .28);
  --sh-3: 0 26px 60px -34px rgba(44, 27, 49, .42);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, .7);

  /* --- type --- */
  --font-display: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: "Assistant", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --t-xs: .8125rem;
  --t-sm: .9375rem;
  --t-base: 1.0625rem;
  --t-md: 1.1875rem;
  --t-lg: 1.375rem;
  --t-xl: 1.75rem;
  --t-2xl: 2.125rem;
  --t-3xl: 2.75rem;
  --t-4xl: 3.5rem;
  --t-5xl: 4.25rem;

  /* --- motion, nothing abrupt --- */
  --ease-quiet: cubic-bezier(.22, .61, .36, 1);
  --d-slow: 900ms;
  --d-mid: 560ms;
  --d-fast: 320ms;

  --wrap: 1180px;
  --wrap-narrow: 780px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.75;
  font-weight: 400;
  letter-spacing: .002em;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(1100px 520px at 82% -8%, rgba(92, 61, 99, .10), transparent 62%),
    radial-gradient(760px 420px at 6% 4%, rgba(181, 138, 70, .10), transparent 60%),
    repeating-linear-gradient(115deg, rgba(35, 28, 38, .018) 0 1px, transparent 1px 5px);
  background-attachment: scroll, scroll, fixed;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.008em;
  color: var(--plum-900);
  margin: 0 0 var(--s-4);
}

h1 { font-size: clamp(2.35rem, 5.4vw, var(--t-5xl)); letter-spacing: -.018em; }
h2 { font-size: clamp(1.9rem, 3.6vw, var(--t-3xl)); }
h3 { font-size: var(--t-lg); line-height: 1.28; }
h4 { font-size: var(--t-md); }

p { margin: 0 0 var(--s-4); max-width: 68ch; }

a { color: var(--plum-500); text-decoration-color: rgba(181, 138, 70, .55); text-underline-offset: .18em; }
a:hover { color: var(--plum-700); text-decoration-color: var(--brass-500); }

ul, ol { margin: 0 0 var(--s-4); padding-left: 1.15rem; }
li { margin-bottom: var(--s-2); }

strong { font-weight: 700; color: var(--plum-800); }

hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--stone-300), transparent); margin: var(--s-7) 0; }

::selection { background: var(--plum-050); color: var(--plum-900); }

/* --------------------------------------------------------------------------
   Accessibility helpers
   -------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: var(--s-4); top: -100px;
  z-index: 200;
  background: var(--plum-800);
  color: var(--on-dark);
  padding: var(--s-3) var(--s-5);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--d-fast) var(--ease-quiet);
}
.skip-link:focus { top: 0; color: var(--on-dark); }

:focus-visible {
  outline: 3px solid var(--brass-500);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.btn:focus-visible, .plan__cta:focus-visible { outline-offset: 4px; }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }

.section { padding-block: var(--s-9); position: relative; }
.section--tight { padding-block: var(--s-8); }
.section--stone { background: linear-gradient(180deg, rgba(235, 227, 216, .55), rgba(249, 246, 242, 0)); }

.section__head { margin-bottom: var(--s-7); }
.section__head p { color: var(--ink-mute); font-size: var(--t-md); }
.section__head--center { text-align: center; }
.section__head--center p { margin-inline: auto; }

/* Eyebrow: small caps label sitting under a brass hairline */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brass-700);
  margin-bottom: var(--s-4);
}
.eyebrow::before {
  content: "";
  width: 34px; height: 1px;
  background: linear-gradient(90deg, var(--brass-500), rgba(181, 138, 70, .1));
}

/* Stained glass band: five jewel panes divided by brass leading */
.glassband {
  height: 7px;
  background:
    linear-gradient(90deg,
      var(--glass-ruby) 0 20%, var(--brass-500) 20% 20.6%,
      var(--glass-amber) 20.6% 40%, var(--brass-500) 40% 40.6%,
      var(--glass-emerald) 40.6% 60%, var(--brass-500) 60% 60.6%,
      var(--glass-cobalt) 60.6% 80%, var(--brass-500) 80% 80.6%,
      var(--glass-violet) 80.6% 100%);
  opacity: .92;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(249, 246, 242, .82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(223, 212, 197, .8);
  transition: background var(--d-mid) var(--ease-quiet), box-shadow var(--d-mid) var(--ease-quiet);
}
.site-header.is-scrolled {
  background: rgba(249, 246, 242, .96);
  box-shadow: 0 14px 34px -28px rgba(44, 27, 49, .6);
}
.site-header__inner {
  display: flex; align-items: center; gap: var(--s-5);
  min-height: 78px;
}

.brandmark { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; }
.brandmark svg { width: 34px; height: 34px; flex: none; }
.brandmark__word {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--plum-900);
  letter-spacing: -.01em;
}
.brandmark__word em { font-style: normal; color: var(--brass-600); }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: var(--s-5); list-style: none; margin: 0; padding: 0; }
/* Nav link treatment is scoped away from .btn: the last item in the list is the
   header call to action, and an unscoped ".nav__list a" outranks .btn--primary on
   specificity, so it was painting the plum filled button with dark nav ink (and
   stealing its pill padding and brass hover underline as well). */
.nav__list a:not(.btn) {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .01em;
  padding: var(--s-2) 0;
  position: relative;
}
.nav__list a:not(.btn)::after {
  content: "";
  position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--brass-500);
  transition: right var(--d-mid) var(--ease-quiet);
}
.nav__list a:not(.btn):hover { color: var(--plum-700); }
.nav__list a:not(.btn):hover::after { right: 0; }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: var(--surface);
  border: 1px solid var(--stone-300);
  border-radius: var(--r-md);
  padding: 9px 11px;
  cursor: pointer;
  color: var(--plum-800);
}
.nav-toggle svg { display: block; width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: .02em;
  padding: 14px 26px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--d-mid) var(--ease-quiet), box-shadow var(--d-mid) var(--ease-quiet),
              background-color var(--d-mid) var(--ease-quiet), color var(--d-mid) var(--ease-quiet);
}
.btn--primary {
  background: linear-gradient(180deg, var(--plum-500), var(--plum-700));
  color: var(--on-dark);
  box-shadow: var(--sh-2), inset 0 1px 0 rgba(255, 255, 255, .16);
}
/* The label stays light on the plum fill in every interactive state. */
.btn--primary:hover,
.btn--primary:focus,
.btn--primary:focus-visible,
.btn--primary:active { color: #fff; }
.btn--primary:hover { transform: translateY(-1px); box-shadow: var(--sh-3), inset 0 1px 0 rgba(255, 255, 255, .2); }
.btn--ghost {
  background: transparent;
  color: var(--plum-700);
  border-color: var(--brass-300);
}
.btn--ghost:hover { background: var(--brass-100); border-color: var(--brass-500); color: var(--plum-800); }
.btn--brass {
  background: linear-gradient(180deg, var(--brass-500), var(--brass-600));
  color: #2A1F0E;
  box-shadow: var(--sh-2);
}
.btn--brass:hover { color: #241A0B; transform: translateY(-1px); }
.btn--wide { width: 100%; }
.btn--sm { padding: 10px 18px; font-size: var(--t-xs); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero { padding-block: var(--s-9) var(--s-8); position: relative; overflow: hidden; }
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(620px 380px at 78% 18%, rgba(107, 63, 135, .10), transparent 66%),
    radial-gradient(420px 300px at 12% 82%, rgba(196, 135, 43, .12), transparent 68%);
  pointer-events: none;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  gap: var(--s-8);
  align-items: center;
  position: relative;
}
.hero__text h1 { margin-bottom: var(--s-5); }
.hero__lede { font-size: var(--t-md); color: var(--ink-soft); max-width: 52ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-6) 0 var(--s-6); }

/* Trust strip separated by small brass lozenges */
.trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4);
  padding-top: var(--s-5);
  border-top: 1px solid var(--stone-300);
  list-style: none; margin: 0; padding-left: 0;
}
.trust li {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--t-sm);
  color: var(--ink-mute);
  margin: 0;
}
.trust li + li::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--brass-500);
  transform: rotate(45deg);
  flex: none;
}
.trust b { color: var(--plum-800); font-weight: 700; }

/* Arched photograph frame with a brass keyline and glass sill */
.archframe { position: relative; padding: 14px 14px 0; }
.archframe::before {
  content: "";
  position: absolute; inset: 0 0 26px;
  border: 1px solid var(--brass-300);
  border-radius: var(--arch);
  background: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(244, 239, 232, .35));
  box-shadow: var(--sh-3);
}
.archframe img {
  position: relative;
  border-radius: var(--arch);
  object-fit: cover;
  width: 100%;
  filter: saturate(.96) contrast(1.02);
}
.archframe__sill {
  position: relative;
  height: 26px;
  margin-top: -1px;
  border-radius: 0 0 var(--r-md) var(--r-md);
  background:
    linear-gradient(180deg, var(--stone-200), var(--stone-300)),
    var(--surface);
  box-shadow: var(--sh-1);
}
.archframe__sill::after {
  content: "";
  position: absolute; left: 12%; right: 12%; top: 7px; height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--brass-500), transparent);
  opacity: .7;
}

.hero__media { position: relative; }
.works__media { position: relative; }

/* Floating caption card, the shape of a small chapel window */
.hero__note {
  position: absolute;
  left: -22px; bottom: 46px;
  width: 236px;
  background: var(--surface);
  border: 1px solid var(--stone-300);
  border-radius: var(--arch-soft);
  padding: var(--s-5) var(--s-4) var(--s-4);
  box-shadow: var(--sh-3);
  font-size: var(--t-xs);
  color: var(--ink-mute);
  line-height: 1.6;
}
.hero__note b { display: block; font-family: var(--font-display); font-size: 1.5rem; color: var(--plum-700); line-height: 1.1; margin-bottom: 4px; }

/* --------------------------------------------------------------------------
   Cards, arched top edge is the house shape
   -------------------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--stone-200);
  border-radius: var(--arch-soft);
  padding: var(--s-6) var(--s-5) var(--s-5);
  box-shadow: var(--sh-1);
  position: relative;
  transition: transform var(--d-slow) var(--ease-quiet), box-shadow var(--d-slow) var(--ease-quiet),
              border-color var(--d-slow) var(--ease-quiet);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--stone-300); }
.card p:last-child { margin-bottom: 0; }
.card h3 { margin-bottom: var(--s-3); }

.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Problem cards, each carries a cost line at the foot */
.pain { display: flex; flex-direction: column; gap: var(--s-3); }
.pain__mark {
  width: 44px; height: 52px;
  border-radius: 22px 22px 3px 3px;
  border: 1px solid var(--brass-300);
  background: linear-gradient(180deg, var(--brass-100), rgba(242, 231, 210, .25));
  display: grid; place-items: center;
  color: var(--brass-700);
}
.pain__mark svg { width: 22px; height: 22px; }
.pain__cost {
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px dashed var(--stone-300);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--glass-ruby);
  letter-spacing: .01em;
}
.pain p { color: var(--ink-mute); margin-bottom: 0; }

/* --------------------------------------------------------------------------
   How it works, arched milestone rail
   -------------------------------------------------------------------------- */

.works__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: start; }

.steps { list-style: none; margin: 0; padding: 0; position: relative; }
.steps::before {
  content: "";
  position: absolute; left: 26px; top: 18px; bottom: 26px;
  width: 1px;
  background: linear-gradient(180deg, var(--brass-300), rgba(214, 184, 126, .16));
}
.step { position: relative; padding: 0 0 var(--s-6) 74px; margin: 0; }
.step:last-child { padding-bottom: 0; }
.step__num {
  position: absolute; left: 0; top: 0;
  width: 53px; height: 62px;
  border-radius: 26px 26px 4px 4px;
  background: var(--surface);
  border: 1px solid var(--brass-300);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--plum-700);
  box-shadow: var(--sh-1);
}
.step__num::after {
  content: "";
  position: absolute; left: 50%; top: 10px;
  transform: translateX(-50%);
  width: 15px; height: 15px;
  border-radius: 8px 8px 2px 2px;
  background: linear-gradient(180deg, rgba(107, 63, 135, .2), rgba(196, 135, 43, .18));
}
.step h3 { margin-bottom: var(--s-2); }
.step p { color: var(--ink-mute); margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Features, arched line icons
   -------------------------------------------------------------------------- */

.feature__icon {
  width: 54px; height: 54px;
  margin-bottom: var(--s-4);
  border-radius: 27px 27px 6px 6px;
  border: 1px solid var(--stone-300);
  background: linear-gradient(180deg, var(--plum-050), rgba(255, 255, 255, .4));
  display: grid; place-items: center;
  color: var(--plum-600);
}
.feature__icon svg { width: 26px; height: 26px; stroke: var(--plum-500); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.feature p { color: var(--ink-mute); font-size: var(--t-sm); margin-bottom: 0; }
.feature:nth-child(2) .feature__icon svg { stroke: var(--glass-cobalt); }
.feature:nth-child(3) .feature__icon svg { stroke: var(--glass-emerald); }
.feature:nth-child(4) .feature__icon svg { stroke: var(--glass-ruby); }
.feature:nth-child(5) .feature__icon svg { stroke: var(--brass-600); }
.feature:nth-child(6) .feature__icon svg { stroke: var(--glass-violet); }

/* --------------------------------------------------------------------------
   Outcomes, plum panel with brass numerals
   -------------------------------------------------------------------------- */

.outcomes {
  background:
    radial-gradient(760px 420px at 88% 6%, rgba(107, 63, 135, .5), transparent 62%),
    linear-gradient(160deg, var(--plum-800), var(--plum-900));
  color: var(--on-dark);
  border-radius: var(--arch-soft);
  padding: var(--s-8) var(--s-6);
  position: relative;
  overflow: hidden;
}
.outcomes::after {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(246, 241, 234, .07) 0 1px, transparent 1px 96px);
  pointer-events: none;
}
.outcomes h2 { color: var(--on-dark); }
.outcomes .eyebrow { color: var(--brass-300); }
.outcomes .eyebrow::before { background: linear-gradient(90deg, var(--brass-300), rgba(214, 184, 126, .1)); }
.outcome { position: relative; padding-top: var(--s-5); border-top: 1px solid rgba(214, 184, 126, .38); }
.outcome__num {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4.6vw, 3.5rem);
  line-height: 1;
  color: var(--brass-300);
  display: block;
  margin-bottom: var(--s-3);
  letter-spacing: -.02em;
}
.outcome h3 { color: var(--on-dark); font-size: var(--t-md); margin-bottom: var(--s-2); }
.outcome p { color: var(--on-dark-mute); font-size: var(--t-sm); margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Testimonials, stained glass panel heads
   -------------------------------------------------------------------------- */

.testimonial {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--stone-200);
  border-radius: var(--arch-soft);
  padding: var(--s-7) var(--s-5) var(--s-5);
  box-shadow: var(--sh-1);
  position: relative;
  display: flex; flex-direction: column;
}
.testimonial::before {
  content: "";
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 76px; height: 30px;
  border-radius: 0 0 38px 38px / 0 0 30px 30px;
  background: linear-gradient(90deg, var(--glass-ruby) 0 33%, var(--glass-amber) 33% 66%, var(--glass-cobalt) 66% 100%);
  opacity: .88;
}
.testimonial:nth-child(2)::before { background: linear-gradient(90deg, var(--glass-emerald) 0 33%, var(--glass-cobalt) 33% 66%, var(--glass-violet) 66% 100%); }
.testimonial:nth-child(3)::before { background: linear-gradient(90deg, var(--glass-violet) 0 33%, var(--glass-ruby) 33% 66%, var(--glass-amber) 66% 100%); }
.testimonial p {
  font-family: var(--font-display);
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--plum-900);
}
.testimonial figcaption {
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--stone-200);
  font-size: var(--t-sm);
  color: var(--ink-mute);
}
.testimonial figcaption b { display: block; color: var(--plum-800); font-size: var(--t-base); }

.results {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-7);
  border-top: 1px solid var(--stone-300);
  border-bottom: 1px solid var(--stone-300);
  padding-block: var(--s-6);
}
.result { text-align: center; }
.result b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.6vw, 2.9rem);
  color: var(--plum-700);
  line-height: 1.05;
}
.result span { font-size: var(--t-sm); color: var(--ink-mute); }

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); align-items: stretch; }
.plan {
  background: var(--surface);
  border: 1px solid var(--stone-200);
  border-radius: var(--arch-soft);
  padding: var(--s-7) var(--s-5) var(--s-5);
  display: flex; flex-direction: column;
  box-shadow: var(--sh-1);
  position: relative;
}
.plan--featured {
  border-color: var(--brass-500);
  box-shadow: var(--sh-3);
  background: linear-gradient(180deg, var(--brass-100), var(--surface) 34%);
}
.plan__flag {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(180deg, var(--brass-500), var(--brass-600));
  color: #291E0C;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 5px 16px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  box-shadow: var(--sh-2);
}
.plan h3 { font-size: var(--t-xl); margin-bottom: var(--s-2); }
.plan__price { display: flex; align-items: baseline; gap: 6px; margin-bottom: var(--s-2); }
.plan__price b { font-family: var(--font-display); font-size: 3rem; color: var(--plum-800); line-height: 1; font-weight: 600; }
.plan__price span { color: var(--ink-mute); font-size: var(--t-sm); }
.plan__for { color: var(--ink-mute); font-size: var(--t-sm); border-bottom: 1px solid var(--stone-200); padding-bottom: var(--s-4); }
.plan ul { list-style: none; padding: 0; margin: var(--s-4) 0 var(--s-6); }
.plan li { position: relative; padding-left: 26px; font-size: var(--t-sm); color: var(--ink-soft); }
.plan li::before {
  content: "";
  position: absolute; left: 2px; top: 9px;
  width: 12px; height: 14px;
  border-radius: 6px 6px 1px 1px;
  border: 1px solid var(--brass-500);
  background: rgba(181, 138, 70, .16);
}
.plan__cta { margin-top: auto; }
.pricing__note { text-align: center; color: var(--ink-mute); font-size: var(--t-sm); margin-top: var(--s-6); }

/* --------------------------------------------------------------------------
   FAQ accordion
   -------------------------------------------------------------------------- */

.faq { border-top: 1px solid var(--stone-300); }
.faq__item { border-bottom: 1px solid var(--stone-300); }
.faq__q {
  width: 100%;
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4);
  background: none; border: 0;
  padding: var(--s-5) 0;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  color: var(--plum-900);
  text-align: left;
  cursor: pointer;
  line-height: 1.3;
}
.faq__q:hover { color: var(--plum-500); }
.faq__sign {
  flex: none;
  width: 26px; height: 30px;
  border-radius: 13px 13px 2px 2px;
  border: 1px solid var(--brass-300);
  display: grid; place-items: center;
  color: var(--brass-700);
  font-family: var(--font-body);
  font-size: 1rem; font-weight: 700;
  transition: background-color var(--d-mid) var(--ease-quiet), transform var(--d-mid) var(--ease-quiet);
}
.faq__q[aria-expanded="true"] .faq__sign { background: var(--brass-100); transform: rotate(180deg); }
.faq__a {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height var(--d-slow) var(--ease-quiet), opacity var(--d-slow) var(--ease-quiet),
              padding var(--d-slow) var(--ease-quiet);
}
.faq__a p { color: var(--ink-mute); margin-bottom: 0; max-width: 74ch; }
.faq__a.is-open { max-height: 460px; opacity: 1; padding-bottom: var(--s-5); }

/* --------------------------------------------------------------------------
   Contact form
   -------------------------------------------------------------------------- */

.contact__panel {
  background: var(--surface);
  border: 1px solid var(--stone-200);
  border-radius: var(--arch-soft);
  box-shadow: var(--sh-3);
  padding: var(--s-8) var(--s-6) var(--s-6);
  position: relative;
  overflow: hidden;
}
.contact__panel::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 7px;
  background:
    linear-gradient(90deg,
      var(--glass-violet) 0 20%, var(--brass-500) 20% 20.6%,
      var(--glass-cobalt) 20.6% 40%, var(--brass-500) 40% 40.6%,
      var(--glass-emerald) 40.6% 60%, var(--brass-500) 60% 60.6%,
      var(--glass-amber) 60.6% 80%, var(--brass-500) 80% 80.6%,
      var(--glass-ruby) 80.6% 100%);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-5); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--t-sm); font-weight: 700; color: var(--plum-800); }
.field input, .field select, .field textarea {
  font-family: var(--font-body);
  font-size: var(--t-base);
  color: var(--ink);
  background: var(--stone-50);
  border: 1px solid var(--stone-300);
  border-radius: var(--r-md);
  padding: 12px 14px;
  width: 100%;
  transition: border-color var(--d-fast) var(--ease-quiet), box-shadow var(--d-fast) var(--ease-quiet), background-color var(--d-fast) var(--ease-quiet);
}
.field textarea { min-height: 132px; resize: vertical; line-height: 1.6; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--stone-400); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--plum-400);
  box-shadow: 0 0 0 3px rgba(92, 61, 99, .16);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--brass-500); outline-offset: 2px; }
.field [aria-invalid="true"] { border-color: var(--glass-ruby); background: rgba(147, 48, 63, .05); }
.field__error { font-size: var(--t-xs); color: var(--glass-ruby); font-weight: 700; min-height: 1px; }
.consent { display: flex; align-items: flex-start; gap: var(--s-3); grid-column: 1 / -1; }
.consent input { width: 20px; height: 20px; flex: none; margin-top: 4px; accent-color: var(--plum-500); }
.consent label { font-size: var(--t-sm); font-weight: 400; color: var(--ink-mute); }
.form-foot { margin-top: var(--s-5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.form-foot p { font-size: var(--t-sm); color: var(--ink-mute); margin: 0; }
.contact__aside li { color: var(--ink-mute); font-size: var(--t-sm); }
.contact__aside b { color: var(--plum-800); }

/* --------------------------------------------------------------------------
   Author byline block, used near the end of every page
   -------------------------------------------------------------------------- */

.byline {
  display: flex; gap: var(--s-5); align-items: flex-start;
  background: linear-gradient(180deg, var(--stone-100), rgba(255, 255, 255, .5));
  border: 1px solid var(--stone-200);
  border-radius: var(--arch-soft);
  padding: var(--s-6) var(--s-5);
}
.byline__seal {
  flex: none;
  width: 58px; height: 68px;
  border-radius: 29px 29px 4px 4px;
  border: 1px solid var(--brass-500);
  background: radial-gradient(circle at 50% 34%, var(--brass-100), rgba(242, 231, 210, .3));
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--brass-700);
}
.byline p { margin-bottom: 0; font-size: var(--t-sm); color: var(--ink-mute); }
.byline b { color: var(--plum-800); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  margin-top: var(--s-9);
  background: linear-gradient(180deg, var(--plum-900), #1D1221);
  color: var(--on-dark-mute);
  position: relative;
}
.site-footer::before {
  content: "";
  display: block;
  height: 7px;
  background:
    linear-gradient(90deg,
      var(--glass-amber) 0 20%, var(--brass-500) 20% 20.6%,
      var(--glass-ruby) 20.6% 40%, var(--brass-500) 40% 40.6%,
      var(--glass-violet) 40.6% 60%, var(--brass-500) 60% 60.6%,
      var(--glass-emerald) 60.6% 80%, var(--brass-500) 80% 80.6%,
      var(--glass-cobalt) 80.6% 100%);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: var(--s-7) var(--s-6);
  padding-block: var(--s-8) var(--s-7);
}
.site-footer h2, .site-footer h3 { color: var(--stone-100); }
.footer__col h3 {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brass-300);
  margin-bottom: var(--s-4);
}
.footer__col ul { list-style: none; margin: 0; padding: 0; }
.footer__col li { margin-bottom: var(--s-3); }
.footer__col a { color: var(--on-dark-mute); text-decoration: none; font-size: var(--t-sm); }
.footer__col a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--brass-500); }
.footer__brand .brandmark__word { color: var(--stone-100); }
.footer__brand p { font-size: var(--t-sm); color: var(--on-dark-mute); max-width: 34ch; }
.footer__pub { font-size: var(--t-xs); color: #A899AE; margin-top: var(--s-4); }

.social { display: flex; gap: var(--s-3); margin-top: var(--s-5); list-style: none; padding: 0; }
.social li { margin: 0; }
.social a {
  width: 38px; height: 42px;
  border-radius: 19px 19px 3px 3px;
  border: 1px solid rgba(214, 184, 126, .45);
  display: grid; place-items: center;
  color: var(--brass-300);
  transition: background-color var(--d-mid) var(--ease-quiet), color var(--d-mid) var(--ease-quiet), border-color var(--d-mid) var(--ease-quiet);
}
.social a:hover { background: rgba(214, 184, 126, .16); color: #fff; border-color: var(--brass-300); }
.social svg { width: 17px; height: 17px; fill: currentColor; }

.footer__base {
  border-top: 1px solid rgba(214, 184, 126, .24);
  padding-block: var(--s-5);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); align-items: center; justify-content: space-between;
  font-size: var(--t-xs);
  color: #A899AE;
}
.footer__base a { color: var(--brass-300); text-decoration: none; }
.footer__base a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   Long form pages
   -------------------------------------------------------------------------- */

.page-head {
  padding-block: var(--s-8) var(--s-7);
  border-bottom: 1px solid var(--stone-300);
  background: linear-gradient(180deg, rgba(240, 233, 242, .7), rgba(249, 246, 242, 0));
}
.page-head p { color: var(--ink-mute); font-size: var(--t-md); max-width: 60ch; }
.crumbs { font-size: var(--t-xs); color: var(--ink-mute); margin-bottom: var(--s-4); letter-spacing: .06em; }
.crumbs a { color: var(--brass-700); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

.prose { padding-block: var(--s-8); }
.prose h2 {
  font-size: var(--t-xl);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--stone-300);
}
.prose h2:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }
.prose h3 { margin-top: var(--s-5); font-size: var(--t-md); }
.prose p, .prose li { color: var(--ink-soft); max-width: 74ch; }
.prose .lead { font-family: var(--font-display); font-size: var(--t-lg); color: var(--plum-800); line-height: 1.5; }

.factsheet {
  background: var(--surface);
  border: 1px solid var(--stone-200);
  border-left: 3px solid var(--brass-500);
  border-radius: var(--r-md);
  padding: var(--s-5);
  margin-bottom: var(--s-6);
}
.factsheet dl { margin: 0; display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: var(--s-2) var(--s-4); }
.factsheet dt { font-weight: 700; color: var(--plum-800); font-size: var(--t-sm); }
.factsheet dd { margin: 0; color: var(--ink-soft); font-size: var(--t-sm); }

.author__grid { display: grid; grid-template-columns: 300px 1fr; gap: var(--s-7); align-items: start; }
.author__portrait { padding: 12px 12px 0; }
.author__portrait img { border-radius: var(--arch); border: 1px solid var(--brass-300); box-shadow: var(--sh-3); }
.author__card {
  margin-top: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--stone-200);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  font-size: var(--t-sm);
  color: var(--ink-mute);
}
.author__card ul { list-style: none; padding: 0; margin: 0; }
.author__card a { color: var(--plum-600); text-decoration: none; font-weight: 600; }
.author__card a:hover { text-decoration: underline; }

.map-group {
  background: var(--surface);
  border: 1px solid var(--stone-200);
  border-radius: var(--arch-soft);
  padding: var(--s-6) var(--s-5) var(--s-5);
  margin-bottom: var(--s-5);
}
.map-group h2 { border: 0; padding: 0; margin-top: 0; font-size: var(--t-lg); }
.map-group ul { list-style: none; padding: 0; margin: 0; }
.map-group li { padding: var(--s-3) 0; border-top: 1px dotted var(--stone-300); }
.map-group li:first-child { border-top: 0; }
.map-group a { font-weight: 700; text-decoration: none; }
.map-group span { display: block; font-size: var(--t-sm); color: var(--ink-mute); }

.status-page { text-align: center; padding-block: var(--s-10) var(--s-8); }
.status-page .archnum {
  width: 128px; height: 152px; margin: 0 auto var(--s-6);
  border-radius: 64px 64px 8px 8px;
  border: 1px solid var(--brass-500);
  background:
    linear-gradient(180deg, rgba(107, 63, 135, .16), rgba(196, 135, 43, .12)),
    var(--surface);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 3rem;
  color: var(--plum-700);
  box-shadow: var(--sh-2);
}
.status-page p { margin-inline: auto; }
.status-page .btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-top: var(--s-6); }

/* --------------------------------------------------------------------------
   Motion: slow dissolve with an arched rise
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--d-slow) var(--ease-quiet), transform var(--d-slow) var(--ease-quiet);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 120ms; }
.reveal[data-delay="2"] { transition-delay: 240ms; }
.reveal[data-delay="3"] { transition-delay: 360ms; }
.reveal[data-delay="4"] { transition-delay: 480ms; }
.reveal[data-delay="5"] { transition-delay: 600ms; }

.reveal--arch {
  opacity: 0;
  clip-path: inset(0 0 100% 0 round 50% 50% 8px 8px);
  transition: opacity 1200ms var(--ease-quiet), clip-path 1200ms var(--ease-quiet);
}
.reveal--arch.is-visible { opacity: 1; clip-path: inset(0 0 0 0 round 50% 50% 8px 8px); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1040px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .hero__grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .hero__note { left: auto; right: 10px; bottom: 12px; }
  .works__grid { grid-template-columns: 1fr; }
  .author__grid { grid-template-columns: 1fr; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 880px) {
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--bg);
    border-bottom: 1px solid var(--stone-300);
    box-shadow: var(--sh-3);
    padding: var(--s-4) 0 var(--s-6);
    display: none;
  }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
  .nav__list li { border-bottom: 1px solid var(--stone-200); }
  .nav__list a:not(.btn) { display: block; padding: var(--s-4) 0; font-size: var(--t-base); }
  .nav__list .btn { margin-top: var(--s-4); }
  .nav-toggle { display: block; }
  .site-header__inner { position: relative; }
  .grid--3, .grid--2, .plans, .results { grid-template-columns: 1fr; }
  .plan--featured { order: -1; }
  .section { padding-block: var(--s-8); }
}

@media (max-width: 620px) {
  .grid--4 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .hero__note { display: none; }
  .byline { flex-direction: column; }
  .factsheet dl { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .step { padding-left: 62px; }
  .outcomes { padding: var(--s-7) var(--s-5); }
  .contact__panel { padding: var(--s-7) var(--s-4) var(--s-5); }
}

@media (max-width: 380px) {
  body { font-size: 1rem; }
  .btn { padding: 13px 20px; width: 100%; }
  .hero__actions { flex-direction: column; align-items: stretch; }
}

/* --------------------------------------------------------------------------
   Reduced motion: everything settles instantly, nothing moves
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal--arch { opacity: 1; transform: none; clip-path: none; }
  .card:hover, .btn:hover { transform: none; }
}

@media print {
  .site-header, .site-footer, .nav-toggle, .hero__actions { display: none; }
  body { background: #fff; }
}

/* ==========================================================================
   The Sunday Desk: the magazine
   Built from the tokens above. Arched plates, brass hairlines, stone sills,
   EB Garamond headings over Assistant text. Nothing new is introduced here.
   ========================================================================== */

/* --- masthead and article header ------------------------------------------ */

.mag-masthead,
.mag-head {
  padding-block: var(--s-8) var(--s-7);
  border-bottom: 1px solid var(--stone-300);
  background:
    radial-gradient(760px 380px at 88% -20%, rgba(181, 138, 70, .12), transparent 64%),
    linear-gradient(180deg, rgba(240, 233, 242, .72), rgba(249, 246, 242, 0));
}

.mag-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: var(--t-xs);
}
.mag-crumbs span[aria-hidden="true"] { color: var(--brass-500); }
.mag-crumbs__here {
  color: var(--ink-mute);
  text-transform: none;
  letter-spacing: .04em;
  max-width: 46ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mag-masthead h1 { max-width: 20ch; }
.mag-head h1 { max-width: 24ch; font-size: clamp(2.1rem, 4.4vw, var(--t-4xl)); }

.mag-standfirst {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.2vw, var(--t-lg));
  line-height: 1.5;
  color: var(--plum-700);
  max-width: 56ch;
  margin-bottom: var(--s-6);
}

.mag-masthead__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6);
  margin: 0 0 var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--stone-300);
}
.mag-masthead__facts dt {
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass-700);
  margin-bottom: 2px;
}
.mag-masthead__facts dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-md);
  color: var(--plum-800);
}
.mag-masthead__facts a { color: var(--plum-700); text-decoration: none; border-bottom: 1px solid var(--brass-300); }
.mag-masthead__facts a:hover { color: var(--plum-900); border-bottom-color: var(--brass-500); }
.mag-masthead__note { color: var(--ink-mute); font-size: var(--t-sm); max-width: 72ch; margin-bottom: 0; }

/* --- byline row ----------------------------------------------------------- */

.mag-byline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-4);
  padding-top: var(--s-5);
  border-top: 1px solid var(--stone-300);
}
.mag-byline__seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  flex: none;
  border-radius: var(--arch-deep);
  background: linear-gradient(160deg, var(--plum-500), var(--plum-800));
  color: var(--brass-100);
  font-family: var(--font-display);
  font-size: var(--t-sm);
  letter-spacing: .06em;
}
.mag-byline__who { margin: 0; font-size: var(--t-base); }
.mag-byline__who a {
  font-weight: 700;
  color: var(--plum-800);
  text-decoration: none;
  border-bottom: 1px solid var(--brass-300);
}
.mag-byline__who a:hover { color: var(--plum-900); border-bottom-color: var(--brass-500); }
.mag-byline__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin: 0;
  font-size: var(--t-xs);
  letter-spacing: .06em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.mag-byline__meta span { position: relative; }
.mag-byline__meta span + span::before {
  content: "";
  position: absolute; left: calc(var(--s-4) / -2 - 1px); top: .35em;
  width: 1px; height: .9em;
  background: var(--brass-300);
}

/* --- featured photograph -------------------------------------------------- */

.mag-figure { margin: 0; padding-block: var(--s-7) 0; }
.mag-figure__frame { position: relative; padding: 14px 14px 0; }
.mag-figure__frame::before {
  content: "";
  position: absolute; inset: 0 0 22px;
  border: 1px solid var(--brass-300);
  border-radius: var(--arch);
  background: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(244, 239, 232, .35));
  box-shadow: var(--sh-3);
}
.mag-figure__frame img {
  position: relative;
  width: 100%;
  max-height: 560px;
  object-fit: cover;
  border-radius: var(--arch);
  filter: saturate(.96) contrast(1.02);
}
.mag-figure__sill {
  display: block;
  position: relative;
  height: 22px;
  margin-top: -1px;
  border-radius: 0 0 var(--r-md) var(--r-md);
  background: linear-gradient(180deg, var(--stone-200), var(--stone-300));
  box-shadow: var(--sh-1);
}
.mag-figure__sill::after {
  content: "";
  position: absolute; left: 14%; right: 14%; top: 6px; height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--brass-500), transparent);
  opacity: .7;
}

/* --- article body: the reading measure ------------------------------------ */

.mag-body {
  width: min(100% - 2.5rem, var(--wrap-narrow));
  margin-inline: auto;
  padding-block: var(--s-8) var(--s-7);
  font-size: var(--t-md);
  line-height: 1.72;
  color: var(--ink-soft);
}
.mag-body > :first-child { margin-top: 0; }
.mag-body p,
.mag-body li {
  max-width: 68ch;
  line-height: 1.72;
}
.mag-body p { margin: 0 0 var(--s-5); }
.mag-body h2 {
  font-size: clamp(1.6rem, 3vw, var(--t-2xl));
  margin: var(--s-8) 0 var(--s-4);
  padding-top: var(--s-5);
  border-top: 1px solid var(--stone-300);
  position: relative;
  max-width: 30ch;
}
.mag-body h2::before {
  content: "";
  position: absolute; top: -1px; left: 0;
  width: 68px; height: 2px;
  background: linear-gradient(90deg, var(--brass-500), rgba(181, 138, 70, 0));
}
.mag-body h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.mag-body h2:first-child::before { display: none; }
.mag-body h3 {
  font-size: var(--t-lg);
  color: var(--plum-700);
  margin: var(--s-6) 0 var(--s-3);
  max-width: 40ch;
}
.mag-body ul, .mag-body ol { margin: 0 0 var(--s-5); padding-left: 1.3rem; }
.mag-body li { margin-bottom: var(--s-3); }
.mag-body li::marker { color: var(--brass-600); }
.mag-body strong { color: var(--plum-800); }
.mag-body a { color: var(--plum-600); text-decoration-thickness: 1px; }
.mag-body a:hover { color: var(--plum-900); }
.mag-body blockquote {
  margin: var(--s-6) 0;
  padding: var(--s-4) 0 var(--s-4) var(--s-5);
  border-left: 3px solid var(--brass-500);
  font-family: var(--font-display);
  font-size: var(--t-lg);
  line-height: 1.5;
  color: var(--plum-800);
}
.mag-body blockquote p { max-width: 58ch; margin-bottom: 0; }
.mag-body table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--s-6) 0;
  font-size: var(--t-sm);
  background: var(--surface);
  border: 1px solid var(--stone-200);
  border-radius: var(--r-md);
  overflow: hidden;
}
.mag-body th, .mag-body td { text-align: left; padding: var(--s-3) var(--s-4); border-top: 1px solid var(--stone-200); }
.mag-body thead th { background: var(--stone-100); color: var(--plum-800); border-top: 0; font-weight: 700; }

/* --- the in body reading prompt the assembler inserts --------------------- */

.inline-read {
  margin: var(--s-6) 0;
  padding: var(--s-4) var(--s-5);
  max-width: 100%;
  background: linear-gradient(180deg, var(--stone-50), rgba(244, 239, 232, .55));
  border: 1px solid var(--stone-200);
  border-left: 3px solid var(--brass-500);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink-mute);
}
.inline-read a {
  color: var(--plum-700);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--brass-300);
}
.inline-read a:hover { color: var(--plum-900); border-bottom-color: var(--brass-500); }

/* --- call to action after the conclusion ---------------------------------- */

.mag-cta { padding-block: var(--s-6) var(--s-8); }
.mag-cta--index { padding-block: var(--s-8); }
.mag-cta__inner {
  width: min(100% - 2.5rem, var(--wrap-narrow));
  margin-inline: auto;
  padding: var(--s-7) var(--s-6);
  border-radius: var(--arch-soft);
  color: var(--on-dark);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(620px 340px at 90% 0%, rgba(107, 63, 135, .5), transparent 62%),
    linear-gradient(160deg, var(--plum-800), var(--plum-900));
  box-shadow: var(--sh-3);
}
.mag-cta--index .mag-cta__inner { width: min(100% - 2.5rem, var(--wrap)); }
.mag-cta__inner::after {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(246, 241, 234, .07) 0 1px, transparent 1px 96px);
  pointer-events: none;
}
.mag-cta__inner > * { position: relative; z-index: 1; }
.mag-cta__inner h2 { color: var(--on-dark); font-size: clamp(1.6rem, 3vw, var(--t-2xl)); max-width: 24ch; }
.mag-cta__inner .eyebrow { color: var(--brass-300); }
.mag-cta__inner .eyebrow::before { background: linear-gradient(90deg, var(--brass-300), rgba(214, 184, 126, .1)); }
.mag-cta__inner p { color: var(--on-dark-mute); max-width: 62ch; }
.mag-cta__actions { margin: var(--s-6) 0 var(--s-3); }
.mag-cta__actions .btn--primary {
  background: linear-gradient(180deg, var(--brass-500), var(--brass-700));
  border-color: var(--brass-300);
  color: #241A0B;
}
.mag-cta__actions .btn--primary:hover { color: #241A0B; }
.mag-cta__note { font-size: var(--t-sm); color: var(--on-dark-mute); margin-bottom: 0; opacity: .9; }

/* --- author box ----------------------------------------------------------- */

.mag-author {
  width: min(100% - 2.5rem, var(--wrap-narrow));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: var(--s-6);
  align-items: start;
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--stone-200);
  border-radius: var(--arch-soft);
  box-shadow: var(--sh-1);
}
.mag-author__portrait {
  width: 132px; height: 132px;
  object-fit: cover;
  border-radius: var(--arch-deep);
  border: 1px solid var(--brass-300);
  box-shadow: var(--sh-2);
}
.mag-author__kicker {
  font-size: var(--t-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass-700);
  margin: 0 0 var(--s-2);
}
.mag-author__text h2 { font-size: var(--t-lg); margin-bottom: var(--s-3); }
.mag-author__text p { font-size: var(--t-sm); color: var(--ink-mute); max-width: 62ch; }
.mag-author__link { margin-bottom: 0; }
.mag-author__link a { color: var(--plum-700); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--brass-300); }
.mag-author__link a:hover { color: var(--plum-900); border-bottom-color: var(--brass-500); }

/* --- Read also ------------------------------------------------------------ */

.mag-related { padding-block: var(--s-8) var(--s-9); }
.mag-related__title {
  font-size: var(--t-xl);
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-6);
  border-bottom: 1px solid var(--stone-300);
  position: relative;
}
.mag-related__title::after {
  content: "";
  position: absolute; left: 0; bottom: -1px;
  width: 96px; height: 2px;
  background: linear-gradient(90deg, var(--brass-500), rgba(181, 138, 70, 0));
}
.mag-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.mag-related__all { margin: var(--s-7) 0 0; }

.mag-rel {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--stone-200);
  border-radius: var(--arch-soft);
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: transform var(--d-slow) var(--ease-quiet), box-shadow var(--d-slow) var(--ease-quiet),
              border-color var(--d-slow) var(--ease-quiet);
}
.mag-rel:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--stone-300); }
.mag-rel__media { display: block; position: relative; padding: 10px 10px 0; }
.mag-rel__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--arch);
  filter: saturate(.96) contrast(1.02);
}
.mag-rel__sill {
  display: block;
  height: 8px;
  margin-top: 6px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--brass-300), transparent);
  opacity: .8;
}
.mag-rel__body { padding: var(--s-4) var(--s-5) var(--s-5); }
.mag-rel__date {
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brass-700);
  margin: 0 0 var(--s-2);
}
.mag-rel__title { font-size: var(--t-md); line-height: 1.24; margin-bottom: var(--s-3); }
.mag-rel__title a { color: var(--plum-900); text-decoration: none; }
.mag-rel__title a:hover { color: var(--plum-500); text-decoration: underline; text-decoration-color: var(--brass-500); }
.mag-rel__dek {
  font-size: var(--t-sm);
  color: var(--ink-mute);
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- magazine index grid and lead card ------------------------------------ */

.mag-index { padding-block: var(--s-8) var(--s-6); }
.mag-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7) var(--s-5); }

.mag-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--stone-200);
  border-radius: var(--arch-soft);
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: transform var(--d-slow) var(--ease-quiet), box-shadow var(--d-slow) var(--ease-quiet),
              border-color var(--d-slow) var(--ease-quiet);
}
.mag-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--stone-300); }
.mag-card__media { display: block; position: relative; padding: 12px 12px 0; }
.mag-card__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--arch);
  filter: saturate(.96) contrast(1.02);
}
.mag-card__sill {
  display: block;
  height: 9px;
  margin-top: 7px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--brass-300), transparent);
  opacity: .85;
}
.mag-card__body { padding: var(--s-4) var(--s-5) var(--s-6); display: flex; flex-direction: column; flex: 1; }
.mag-card__angle {
  font-size: var(--t-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass-700);
  margin: 0 0 var(--s-3);
}
.mag-card__title { font-size: var(--t-lg); line-height: 1.2; margin-bottom: var(--s-3); }
.mag-card__title a { color: var(--plum-900); text-decoration: none; }
.mag-card__title a:hover { color: var(--plum-500); text-decoration: underline; text-decoration-color: var(--brass-500); }
.mag-card__dek { font-size: var(--t-sm); color: var(--ink-mute); margin-bottom: var(--s-5); }
.mag-card__meta {
  margin: auto 0 0;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: var(--s-4);
  border-top: 1px solid var(--stone-200);
}
.mag-card__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--brass-500); flex: none; }

.mag-card.lead {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: stretch;
  border-color: var(--stone-300);
  box-shadow: var(--sh-2);
  background:
    radial-gradient(520px 320px at 96% 0%, rgba(240, 233, 242, .8), transparent 60%),
    var(--surface);
}
.mag-card.lead .mag-card__media { flex: 1 1 56%; padding: 14px 0 14px 14px; }
.mag-card.lead .mag-card__media img { height: 100%; aspect-ratio: auto; min-height: 340px; }
.mag-card.lead .mag-card__sill { display: none; }
.mag-card.lead .mag-card__body { flex: 1 1 44%; justify-content: center; padding: var(--s-7) var(--s-6); }
.mag-card.lead .mag-card__angle::after {
  content: "Latest";
  margin-left: var(--s-3);
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: var(--plum-050);
  color: var(--plum-700);
  letter-spacing: .12em;
}
.mag-card.lead .mag-card__title { font-family: var(--font-display); font-size: clamp(1.7rem, 2.6vw, var(--t-2xl)); }
.mag-card.lead .mag-card__dek { font-size: var(--t-base); color: var(--ink-soft); }

/* --- the magazine block on the home page ---------------------------------- */

.mag-home__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.mag-home__more { margin: var(--s-7) 0 0; }

/* --- responsive: holds together down to 360px ----------------------------- */

@media (min-width: 881px) and (max-width: 1100px) {
  .nav__list { gap: var(--s-4); }
  .nav__list a:not(.btn) { font-size: var(--t-xs); }
}

@media (max-width: 1040px) {
  .mag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mag-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mag-home__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mag-card.lead .mag-card__media img { min-height: 280px; }
}

@media (max-width: 880px) {
  .mag-card.lead { flex-direction: column; }
  .mag-card.lead .mag-card__media { padding: 12px 12px 0; }
  .mag-card.lead .mag-card__media img { min-height: 0; aspect-ratio: 3 / 2; }
  .mag-card.lead .mag-card__sill { display: block; }
  .mag-card.lead .mag-card__body { padding: var(--s-4) var(--s-5) var(--s-6); }
  .mag-figure__frame img { max-height: 420px; }
  .mag-body { font-size: var(--t-base); }
}

@media (max-width: 700px) {
  .mag-grid,
  .mag-related__grid,
  .mag-home__grid { grid-template-columns: 1fr; }
  .mag-masthead,
  .mag-head { padding-block: var(--s-7) var(--s-6); }
  .mag-author { grid-template-columns: 1fr; gap: var(--s-4); padding: var(--s-5); }
  .mag-author__portrait { width: 108px; height: 108px; }
  .mag-related { padding-block: var(--s-7) var(--s-8); }
}

@media (max-width: 480px) {
  .mag-crumbs__here { max-width: 100%; white-space: normal; }
  .mag-byline { gap: var(--s-3); }
  .mag-byline__meta { text-transform: none; letter-spacing: .02em; }
  .mag-byline__meta span + span::before { display: none; }
  .mag-masthead__facts { gap: var(--s-4) var(--s-5); }
  .mag-cta__inner { padding: var(--s-6) var(--s-5); }
  .mag-cta__actions .btn { width: 100%; }
  .mag-body { width: min(100% - 1.75rem, var(--wrap-narrow)); padding-block: var(--s-7) var(--s-6); }
  .mag-body h2 { max-width: 100%; }
  .mag-figure__frame { padding: 8px 8px 0; }
  .mag-figure__frame img { max-height: 300px; }
  .mag-card__body { padding: var(--s-4) var(--s-4) var(--s-5); }
  .mag-card.lead .mag-card__angle::after { display: block; margin: var(--s-2) 0 0; width: fit-content; }
}

@media (max-width: 380px) {
  .mag-head h1 { font-size: 1.95rem; }
  .mag-masthead h1 { font-size: 2.1rem; }
  .mag-standfirst { font-size: 1.08rem; }
  .mag-author { padding: var(--s-4); }
  .mag-related__all .btn,
  .mag-home__more .btn { width: 100%; }
}

/* --- the published articles list on the author page ----------------------- */

.author__articles { list-style: none; padding: 0; margin: 0 0 var(--s-6); }
.author__articles li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-3) 0;
  border-top: 1px dotted var(--stone-300);
}
.author__articles li:first-child { border-top: 0; }
.author__articles a { font-weight: 700; color: var(--plum-700); text-decoration: none; max-width: 62ch; }
.author__articles a:hover { color: var(--plum-900); text-decoration: underline; text-decoration-color: var(--brass-500); }
.author__articles time {
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brass-700);
  white-space: nowrap;
}



/* Network strip: five sibling products, rotated so every site is linked the same
   number of times. Spans the full footer grid rather than adding a fifth column,
   because each footer declares a fixed column count and a fifth item would wrap. */
.site-network { grid-column: 1 / -1; flex-basis: 100%; width: 100%;
  margin-top: 1.6rem; padding-top: 1.2rem;
  border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
/* Heading takes the same brass eyebrow colour as the other footer column
   headings, at full opacity, so it reads against the dark plum footer. */
.site-network h2 { font: inherit; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; margin: 0 0 0.7rem;
  color: var(--brass-300); }

/* One row, never wrapped. The five brand names are set nowrap so none of them
   breaks mid word, and the row itself scrolls sideways in its own box at widths
   where the footer column is too narrow to seat all five. */
.site-network ul { list-style: none; margin: 0; padding: 0 0 3px;
  display: flex; flex-wrap: nowrap; gap: 1.5rem;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.site-network li { flex: 0 0 auto; margin: 0; }

/* The global "a" rule paints links plum-500, which on this near black plum
   footer is all but invisible. These links need the footer's own light ink. */
.site-network a { color: var(--on-dark); font-size: 0.86rem; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  border-bottom: 1px solid transparent; }
.site-network a:hover, .site-network a:focus-visible {
  color: var(--brass-300); border-bottom-color: currentColor; }
@media (max-width: 620px) { .site-network ul { gap: 1.1rem; } }


/* Decorative bleed guard. Several sections intentionally hang a rotated or offset
   pseudo element past the viewport edge. overflow-x: clip contains them without
   creating a scroll container, so position: sticky keeps working, unlike overflow
   hidden. Genuine content overflow is still reported by the element level check in
   the browser pass. */
html { overflow-x: clip; }
body { overflow-x: clip; }


/* Wide content on phones. Class names for the prose wrapper differ from site to site,
   so this targets tables and pre blocks directly: they scroll inside their own box
   rather than pushing cells past the right edge, per the build contract. */
@media (max-width: 700px) {
  table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  th, td { overflow-wrap: anywhere; }
  pre { overflow-x: auto; max-width: 100%; }
}