/* ==========================================================================
   AisleTimeline design system
   Editorial romance: blush ivory ground, dusty sage rules, charcoal ink.
   Cormorant Garamond over Jost. Hairline botanical marks. Film grain plates.
   ========================================================================== */

:root {
  /* Core palette from the brand book */
  --bg: #FBF6F4;
  --surface: #FFFFFF;
  --ink: #221E1E;
  --primary: #7C8B72;
  --accent: #C89B8C;
  --muted: #7A6F6C;

  /* Derived ivories and blushes */
  --bg-deep: #F5ECE8;
  --bg-deeper: #EFE3DE;
  --blush-wash: #FAF0EC;
  --blush-line: #E7CFC6;
  --sage-wash: #F0F2ED;
  --sage-line: #D3DACD;

  /* Derived inks and sages that clear 4.5:1 on ivory */
  --ink-soft: #3D3635;
  --ink-quiet: #5C5250;
  --primary-deep: #56634E;
  --primary-mid: #6B7A62;
  --accent-deep: #9E6C5B;

  /* Hairlines */
  --rule: 1px solid var(--sage-line);
  --rule-blush: 1px solid var(--blush-line);
  --rule-faint: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);

  /* Spacing scale */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4.5rem;
  --s9: 6.5rem;
  --s10: 9rem;

  /* Radii kept nearly square: this is print, not plastic */
  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 4px;
  --r-pill: 999px;

  /* Shadows: paper lift, never glow */
  --lift-1: 0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent);
  --lift-2: 0 12px 30px -22px color-mix(in srgb, var(--ink) 55%, transparent);
  --lift-3: 0 26px 60px -38px color-mix(in srgb, var(--ink) 60%, transparent);

  /* Type scale */
  --f-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --f-body: "Jost", "Futura", "Century Gothic", "Helvetica Neue", Arial, sans-serif;
  --t-xs: 0.75rem;
  --t-sm: 0.8125rem;
  --t-base: 1rem;
  --t-md: 1.0625rem;
  --t-lg: 1.375rem;
  --t-xl: 1.875rem;
  --t-2xl: 2.5rem;
  --t-3xl: 3.25rem;
  --t-4xl: clamp(2.6rem, 6.2vw, 4.6rem);

  --measure: 66ch;
  --shell: 1220px;
  --gutter: clamp(1.15rem, 4vw, 3.25rem);

  /* Film grain tile, generated in the stylesheet, no image request */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E");

  --spine: 0;
}

/* --------------------------------------------------------------------------
   Reset and base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-soft);
  font-family: var(--f-body);
  font-size: var(--t-md);
  font-weight: 300;
  line-height: 1.72;
  letter-spacing: 0.004em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Whole page carries a faint film grain, the way the photography does */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--grain);
  background-size: 180px 180px;
  opacity: 0.055;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 9;
}

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

h1, h2, h3, h4 {
  font-family: var(--f-display);
  color: var(--ink);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.012em;
  margin: 0 0 var(--s4);
}

h1 { font-size: var(--t-4xl); }
h2 { font-size: clamp(2rem, 4.2vw, var(--t-3xl)); }
h3 { font-size: var(--t-lg); letter-spacing: -0.004em; }
h4 { font-size: 1.1875rem; }

p { margin: 0 0 var(--s4); max-width: var(--measure); }

a { color: var(--primary-deep); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--accent-deep); }

ul, ol { margin: 0 0 var(--s4); padding-left: 1.1rem; }
li { margin-bottom: var(--s2); }

strong { font-weight: 500; color: var(--ink); }

hr {
  border: 0;
  border-top: var(--rule);
  margin: var(--s7) 0;
}

::selection { background: var(--blush-line); color: var(--ink); }

/* --------------------------------------------------------------------------
   Accessibility furniture
   -------------------------------------------------------------------------- */

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

.skip-link {
  position: absolute;
  left: var(--s4);
  top: -100px;
  z-index: 200;
  background: var(--ink);
  color: var(--bg);
  padding: 0.7rem 1.2rem;
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: top 160ms ease;
}
.skip-link:focus { top: var(--s4); }

:focus-visible {
  outline: 2px solid var(--primary-deep);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* --------------------------------------------------------------------------
   Shell and rhythm
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: var(--s9); position: relative; }
.band--tight { padding-block: var(--s8); }
.band--wash { background: var(--bg-deep); }
.band--paper { background: var(--surface); }

.band + .band { border-top: var(--rule-faint); }

/* The eyebrow: a hairline, a small sage node, then letterspaced Jost */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--primary-deep);
  margin: 0 0 var(--s4);
}
.eyebrow::before {
  content: "";
  width: 2.75rem;
  height: 1px;
  background: var(--primary);
  flex: none;
}
.eyebrow::after {
  content: "";
  width: 5px; height: 5px;
  transform: rotate(45deg);
  background: var(--accent);
  flex: none;
}

.lede {
  font-size: 1.1875rem;
  color: var(--ink-quiet);
  max-width: 58ch;
}

.section-head { max-width: 46rem; margin-bottom: var(--s7); }
.section-head h2 em { font-style: italic; color: var(--accent-deep); }

/* Botanical divider used between major bands */
.sprig {
  display: block;
  width: 96px;
  height: 24px;
  margin: 0 0 var(--s5);
  color: var(--primary);
}

/* --------------------------------------------------------------------------
   The timeline spine: the site's structural motif
   -------------------------------------------------------------------------- */

.spine-track {
  position: absolute;
  top: 0; bottom: 0;
  left: calc(var(--gutter) / 2);
  width: 1px;
  background: var(--sage-line);
  pointer-events: none;
  display: none;
}
.spine-track::after {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, var(--primary), var(--accent));
  transform-origin: top center;
  transform: scaleY(var(--spine));
  transition: transform 120ms linear;
}

.node {
  position: relative;
  padding-left: 0;
}
.node::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--gutter) / 2 - 4px);
  top: 0.7em;
  width: 9px; height: 9px;
  transform: rotate(45deg);
  background: var(--bg);
  border: 1px solid var(--primary);
  display: none;
}

@media (min-width: 1080px) {
  .spine-track { display: block; }
  .node::before { display: block; }
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--f-body);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.02rem 1.85rem;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.btn--primary {
  background: var(--primary-deep);
  color: #FBF6F4;
  border-color: var(--primary-deep);
}
.btn--primary:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #FBF6F4;
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 24%, transparent);
}
.btn--ghost:hover {
  border-color: var(--primary-deep);
  color: var(--primary-deep);
  background: var(--sage-wash);
}

.btn--quiet {
  background: var(--surface);
  color: var(--primary-deep);
  border-color: var(--sage-line);
}
.btn--quiet:hover { background: var(--sage-wash); color: var(--ink); }

.btn--block { width: 100%; }
.btn--sm { padding: 0.75rem 1.3rem; font-size: var(--t-xs); }

/* --------------------------------------------------------------------------
   Header
   The inline row carries the wordmark, seven letterspaced nav items and the
   demo button, so the gaps, the nav size and the button padding are all sized
   to clear the 1220px shell down to the 960px drawer breakpoint. Labels are
   held on one line, otherwise a flex item shrinks to its longest word and the
   nav breaks onto a second row.
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(9px);
  border-bottom: 1px solid transparent;
  transition: border-color 240ms ease, background-color 240ms ease, padding 240ms ease;
}
.site-header.is-stuck {
  border-bottom-color: var(--blush-line);
  background: color-mix(in srgb, var(--bg) 96%, transparent);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.8rem, 1.35vw, 1.6rem);
  padding-block: 1.15rem;
  transition: padding 240ms ease;
}
.site-header.is-stuck .header-inner { padding-block: 0.7rem; }

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--ink);
  flex: none;
  white-space: nowrap;
}
.wordmark svg { width: 30px; height: 30px; flex: none; }
.wordmark span {
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 2.2vw, 1.5rem);
  letter-spacing: 0.01em;
}
.wordmark b { font-weight: 400; color: var(--primary-deep); }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid var(--blush-line);
  border-radius: var(--r-sm);
  padding: 0.55rem 0.75rem;
  cursor: pointer;
  color: var(--ink);
}
.nav-toggle svg { width: 18px; height: 18px; }

.site-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1vw, 1.45rem);
  margin: 0; padding: 0;
}
.site-nav a {
  font-size: clamp(0.66rem, 0.26vw + 0.5rem, 0.78rem);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-quiet);
  padding-block: 0.35rem;
  position: relative;
  white-space: nowrap;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width 220ms ease;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a:hover::after { width: 100%; }

.header-cta {
  flex: none;
  padding: 0.72rem 1.05rem;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

@media (max-width: 959px) {
  .site-nav {
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--bg);
    border-block: var(--rule-blush);
    padding: var(--s5) var(--gutter) var(--s6);
    display: none;
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: flex-start; gap: var(--s4); }
  /* The drawer stacks, so it keeps the full nav type of the original design. */
  .site-nav a { font-size: var(--t-base); letter-spacing: 0.12em; }
  .wordmark span { font-size: 1.5rem; }
  .header-cta { display: none; }
}
@media (min-width: 960px) {
  .nav-toggle { display: none; }
  .site-nav { display: block !important; }
}

/* --------------------------------------------------------------------------
   Photographic plates: offset hairline frame plus grain
   -------------------------------------------------------------------------- */

.plate {
  position: relative;
  isolation: isolate;
}
.plate img {
  position: relative;
  z-index: 1;
  filter: saturate(0.93) contrast(1.03) brightness(1.01);
}
.plate::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1px solid var(--blush-line);
  z-index: 0;
}
.plate::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: var(--grain);
  background-size: 180px 180px;
  opacity: 0.11;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.plate--flip::before { inset: -18px 18px 18px -18px; border-color: var(--sage-line); }

.plate-caption {
  margin: var(--s4) 0 0;
  font-size: var(--t-sm);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

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

.hero { padding-block: clamp(3rem, 7vw, 6rem) var(--s9); position: relative; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 70%;
  background: linear-gradient(180deg, var(--blush-wash), transparent 88%);
  pointer-events: none;
}
.hero-grid {
  position: relative;
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 1000px) {
  .hero-grid { grid-template-columns: 1.06fr 0.94fr; }
}

.hero h1 { margin-bottom: var(--s5); }
.hero h1 em { font-style: italic; color: var(--accent-deep); }
.hero-sub { font-size: 1.1875rem; color: var(--ink-quiet); max-width: 46ch; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin: var(--s6) 0 var(--s6);
}

.trust {
  list-style: none;
  margin: 0; padding: var(--s5) 0 0;
  border-top: var(--rule-blush);
  display: grid;
  gap: var(--s4);
}
@media (min-width: 620px) { .trust { grid-template-columns: repeat(3, 1fr); gap: var(--s5); } }
.trust li { margin: 0; display: flex; gap: 0.6rem; align-items: flex-start; }
.trust svg { width: 17px; height: 17px; color: var(--primary); flex: none; margin-top: 0.32rem; }
.trust b {
  display: block;
  font-family: var(--f-display);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.15;
}
.trust span { font-size: var(--t-sm); color: var(--muted); letter-spacing: 0.03em; }

/* --------------------------------------------------------------------------
   Cards, generic
   -------------------------------------------------------------------------- */

.grid { display: grid; gap: var(--s5); }
@media (min-width: 700px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 760px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.card {
  background: var(--surface);
  border: var(--rule-blush);
  border-radius: var(--r-md);
  padding: var(--s6);
  position: relative;
  transition: border-color 260ms ease, transform 260ms ease, box-shadow 260ms ease;
}
.card:hover {
  border-color: var(--sage-line);
  transform: translateY(-2px);
  box-shadow: var(--lift-2);
}
.card h3 { margin-bottom: var(--s3); }
.card p { margin-bottom: 0; font-size: var(--t-base); color: var(--ink-quiet); }

/* Problem cards carry a serif index numeral and a cost line */
.cost-card { padding-top: var(--s7); }
.cost-card .idx {
  position: absolute;
  top: var(--s4); right: var(--s5);
  font-family: var(--f-display);
  font-style: italic;
  font-size: 2.4rem;
  color: var(--blush-line);
  line-height: 1;
}
.cost {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: var(--rule-faint);
  font-size: var(--t-sm);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-deep);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Steps
   -------------------------------------------------------------------------- */

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps > li {
  position: relative;
  padding: 0 0 var(--s6) 4.25rem;
  margin: 0;
  border-left: 1px solid var(--sage-line);
  margin-left: 1.1rem;
}
.steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps > li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: -1.1rem;
  top: -0.15rem;
  width: 2.2rem; height: 2.2rem;
  display: grid; place-items: center;
  background: var(--bg);
  border: 1px solid var(--primary);
  border-radius: var(--r-pill);
  font-family: var(--f-display);
  font-size: 0.95rem;
  color: var(--primary-deep);
}
.steps h3 { margin-bottom: var(--s2); }
.steps p { margin-bottom: 0; color: var(--ink-quiet); font-size: var(--t-base); }

.split {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 1000px) { .split { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .split--wide-left { grid-template-columns: 1.15fr 0.85fr; } }

/* --------------------------------------------------------------------------
   Features
   -------------------------------------------------------------------------- */

.feature {
  background: var(--surface);
  border: var(--rule-faint);
  border-radius: var(--r-md);
  padding: var(--s6);
  position: relative;
  overflow: hidden;
  transition: border-color 260ms ease, box-shadow 260ms ease;
}
.feature::before {
  content: "";
  position: absolute;
  left: var(--s6); right: var(--s6);
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 360ms ease;
}
.feature:hover { border-color: var(--sage-line); box-shadow: var(--lift-2); }
.feature:hover::before { transform: scaleX(1); }
.feature .ico {
  width: 34px; height: 34px;
  color: var(--primary-deep);
  margin-bottom: var(--s4);
}
.feature h3 { margin-bottom: var(--s3); }
.feature p { margin: 0; font-size: var(--t-base); color: var(--ink-quiet); }

/* --------------------------------------------------------------------------
   Outcomes
   -------------------------------------------------------------------------- */

.outcome { padding-top: var(--s5); border-top: 1px solid var(--primary); }
.outcome .fig {
  font-family: var(--f-display);
  font-size: clamp(3rem, 6vw, 4.25rem);
  line-height: 0.95;
  color: var(--ink);
  display: block;
  margin-bottom: var(--s3);
}
.outcome .fig i { font-style: italic; color: var(--accent-deep); font-size: 0.55em; }
.outcome h3 { font-size: 1.15rem; margin-bottom: var(--s2); }
.outcome p { font-size: var(--t-base); color: var(--ink-quiet); margin: 0; }

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */

.testimonial {
  margin: 0;
  background: var(--surface);
  border: var(--rule-blush);
  border-radius: var(--r-md);
  padding: var(--s7) var(--s6) var(--s6);
  position: relative;
}
.testimonial::before {
  content: "\201C";
  position: absolute;
  top: 0.4rem; left: var(--s5);
  font-family: var(--f-display);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--blush-line);
}
.testimonial p {
  font-family: var(--f-display);
  font-size: 1.32rem;
  line-height: 1.45;
  font-style: italic;
  color: var(--ink);
  margin-bottom: var(--s5);
}
.testimonial figcaption {
  border-top: var(--rule-faint);
  padding-top: var(--s4);
  font-size: var(--t-sm);
  color: var(--muted);
  line-height: 1.6;
}
.testimonial figcaption b {
  display: block;
  font-family: var(--f-body);
  font-size: var(--t-base);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.testimonial figcaption .where {
  display: block;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: var(--t-xs);
  color: var(--primary-deep);
  margin-top: 0.35rem;
}

.results {
  display: grid;
  gap: var(--s5);
  margin-top: var(--s7);
  padding: var(--s6) 0 0;
  border-top: 1px solid var(--primary);
  list-style: none;
}
@media (min-width: 700px) { .results { grid-template-columns: repeat(3, 1fr); } }
.results li { margin: 0; text-align: center; }
.results b {
  display: block;
  font-family: var(--f-display);
  font-size: 2.6rem;
  font-weight: 400;
  color: var(--primary-deep);
  line-height: 1;
}
.results span {
  display: block;
  margin-top: var(--s2);
  font-size: var(--t-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

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

.tiers { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 940px) { .tiers { grid-template-columns: repeat(3, 1fr); } }

.tier {
  background: var(--surface);
  border: var(--rule-blush);
  border-radius: var(--r-md);
  padding: var(--s6);
  display: flex;
  flex-direction: column;
  position: relative;
}
.tier--pick {
  border: 1px solid var(--primary);
  box-shadow: var(--lift-3);
}
@media (min-width: 940px) { .tier--pick { transform: translateY(-14px); padding-block: var(--s7); } }
.tier--pick::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--sage-line);
  border-radius: 2px;
  pointer-events: none;
}
.ribbon {
  position: absolute;
  top: -0.85rem; left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #2B1F1B;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.4rem 1rem;
  border-radius: var(--r-sm);
  white-space: nowrap;
}
.tier h3 {
  font-family: var(--f-body);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--primary-deep);
  margin-bottom: var(--s4);
}
.price {
  font-family: var(--f-display);
  font-size: 3.4rem;
  line-height: 1;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.price small {
  font-family: var(--f-body);
  font-size: var(--t-sm);
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.tier-for {
  margin: var(--s3) 0 var(--s5);
  font-size: var(--t-base);
  color: var(--ink-quiet);
  padding-bottom: var(--s5);
  border-bottom: var(--rule-faint);
}
.tier ul { list-style: none; padding: 0; margin: 0 0 var(--s6); flex: 1; }
.tier ul li {
  position: relative;
  padding-left: 1.6rem;
  font-size: var(--t-base);
  color: var(--ink-quiet);
  margin-bottom: var(--s3);
}
.tier ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 6px; height: 6px;
  transform: rotate(45deg);
  border: 1px solid var(--primary);
}
.billing-note {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: var(--rule-blush);
  font-size: var(--t-base);
  color: var(--muted);
  max-width: 62ch;
}

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

.faq { border-top: 1px solid var(--primary); max-width: 56rem; }
.faq-item { border-bottom: var(--rule-faint); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s5);
  background: transparent;
  border: 0;
  padding: var(--s5) 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--f-display);
  font-size: 1.32rem;
  line-height: 1.28;
  color: var(--ink);
}
.faq-q:hover { color: var(--primary-deep); }
.faq-q .mark {
  flex: none;
  width: 26px; height: 26px;
  border: 1px solid var(--sage-line);
  border-radius: var(--r-pill);
  position: relative;
  margin-top: 0.15rem;
  transition: transform 300ms ease, border-color 300ms ease;
}
.faq-q .mark::before, .faq-q .mark::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--primary-deep);
  transform: translate(-50%, -50%);
}
.faq-q .mark::before { width: 10px; height: 1px; }
.faq-q .mark::after { width: 1px; height: 10px; transition: opacity 250ms ease; }
.faq-q[aria-expanded="true"] .mark { transform: rotate(180deg); border-color: var(--primary); }
.faq-q[aria-expanded="true"] .mark::after { opacity: 0; }
.faq-a {
  overflow: hidden;
  max-height: 0;
  transition: max-height 380ms ease, opacity 320ms ease;
  opacity: 0;
}
.faq-a.is-open { max-height: 60rem; opacity: 1; }
.faq-a > div { padding: 0 0 var(--s5); }
.faq-a p { font-size: var(--t-base); color: var(--ink-quiet); max-width: 62ch; }
.faq-a p:last-child { margin-bottom: 0; }

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

.contact-grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 1000px) { .contact-grid { grid-template-columns: 0.85fr 1.15fr; } }

.form-plate {
  background: var(--surface);
  border: var(--rule-blush);
  border-radius: var(--r-md);
  padding: clamp(1.5rem, 3.4vw, 2.75rem);
  box-shadow: var(--lift-2);
}

.field { margin-bottom: var(--s5); }
.field label {
  display: block;
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--s2);
}
.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--f-body);
  font-size: var(--t-base);
  font-weight: 300;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--blush-line);
  border-radius: var(--r-sm);
  padding: 0.85rem 0.95rem;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.field textarea { min-height: 8.5rem; resize: vertical; line-height: 1.6; }
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--primary-deep) 50%),
                    linear-gradient(135deg, var(--primary-deep) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(1.28rem), calc(100% - 15px) calc(1.28rem);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.6rem;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--primary);
  background: var(--surface);
}
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: #A4473A;
  background: #FDF3F1;
}
.field-row { display: grid; gap: var(--s5); }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }
.hint { font-size: var(--t-sm); color: var(--muted); margin: var(--s2) 0 0; font-weight: 300; }
.err {
  display: none;
  font-size: var(--t-sm);
  color: #8E3A2E;
  margin: var(--s2) 0 0;
  font-weight: 400;
}
.err.is-shown { display: block; }

.consent {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: var(--s5);
}
.consent input { width: 18px; height: 18px; flex: none; margin-top: 0.28rem; accent-color: var(--primary-deep); }
.consent label {
  font-size: var(--t-sm);
  text-transform: none;
  letter-spacing: 0.01em;
  font-weight: 300;
  color: var(--ink-quiet);
  margin: 0;
}

.form-alt {
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: var(--rule-faint);
  font-size: var(--t-sm);
  color: var(--muted);
}

.hook-list { list-style: none; padding: 0; margin: var(--s5) 0 0; }
.hook-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--t-base);
  color: var(--ink-quiet);
}
.hook-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.7em;
  width: 0.85rem; height: 1px;
  background: var(--accent);
}

/* --------------------------------------------------------------------------
   Byline, prose pages, footer
   -------------------------------------------------------------------------- */

.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4);
  margin-top: var(--s8);
  padding-top: var(--s5);
  border-top: var(--rule-blush);
  font-size: var(--t-sm);
  color: var(--muted);
}
.byline strong { font-weight: 500; }

.prose { max-width: 74ch; }
.prose h2 { margin-top: var(--s7); font-size: clamp(1.75rem, 3vw, 2.35rem); }
.prose h3 { margin-top: var(--s6); }
.prose ul li, .prose ol li { color: var(--ink-quiet); }
.prose dl { margin: 0 0 var(--s5); }
.prose dt { font-weight: 500; color: var(--ink); margin-top: var(--s4); }
.prose dd { margin: 0 0 var(--s2); color: var(--ink-quiet); }

.page-head { padding-block: var(--s8) var(--s6); background: var(--blush-wash); border-bottom: var(--rule-blush); }
.page-head p { color: var(--ink-quiet); max-width: 58ch; margin-bottom: 0; }
.crumbs { font-size: var(--t-sm); color: var(--muted); margin-bottom: var(--s4); letter-spacing: 0.06em; }
.crumbs a { color: var(--primary-deep); }

.author-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 900px) { .author-grid { grid-template-columns: 300px 1fr; } }
.portrait { border: 1px solid var(--blush-line); padding: 10px; background: var(--surface); }
.portrait img { filter: saturate(0.9) contrast(1.02); }

.map-group { margin-bottom: var(--s7); }
.map-group ul { list-style: none; padding: 0; margin: 0; border-top: var(--rule-faint); }
.map-group li { margin: 0; border-bottom: var(--rule-faint); padding: var(--s4) 0; }
.map-group a { font-weight: 400; }
.map-group span { display: block; font-size: var(--t-sm); color: var(--muted); margin-top: 0.2rem; }

.site-footer {
  background: var(--bg-deep);
  border-top: 1px solid var(--primary);
  padding-block: var(--s8) var(--s5);
}
.footer-cols { display: grid; gap: var(--s6); }
@media (min-width: 700px) { .footer-cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .footer-cols { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: var(--s7); } }
.footer-cols h2 {
  font-family: var(--f-body);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--primary-deep);
  margin-bottom: var(--s4);
}
.footer-cols ul { list-style: none; padding: 0; margin: 0; }
.footer-cols li { margin-bottom: var(--s3); }
.footer-cols a { color: var(--ink-quiet); text-decoration: none; font-size: var(--t-base); }
.footer-cols a:hover { color: var(--primary-deep); text-decoration: underline; }
.footer-line { font-size: var(--t-base); color: var(--ink-quiet); max-width: 34ch; margin: var(--s4) 0 var(--s5); }
.socials { display: flex; gap: var(--s3); flex-wrap: wrap; }
.socials a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--blush-line);
  border-radius: var(--r-pill);
  color: var(--primary-deep);
  background: var(--surface);
  transition: border-color 220ms ease, color 220ms ease, background-color 220ms ease;
}
.socials a:hover { border-color: var(--primary); color: var(--ink); background: var(--sage-wash); }
.socials svg { width: 17px; height: 17px; }
.publisher { font-size: var(--t-sm); color: var(--muted); margin-top: var(--s4); }
.base-bar {
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: var(--rule-blush);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  justify-content: space-between;
  font-size: var(--t-sm);
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Reveal motion, soft cross fades
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 760ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 760ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 90ms; }
.reveal[data-delay="2"] { transition-delay: 180ms; }
.reveal[data-delay="3"] { transition-delay: 270ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .spine-track::after { transform: scaleY(1); }
}

@media print {
  .site-header, .site-footer, .hero-actions, .form-plate { display: none; }
  body { background: #FFFFFF; color: #000000; }
}

/* ==========================================================================
   Run of Show: the AisleTimeline magazine
   Same ivory ground, same sage hairlines, same Cormorant over Jost. The only
   new idea here is editorial rhythm: a wide masthead, a lead card, and a
   single column of body text set to a printed measure.
   ========================================================================== */

/* --- Masthead on the magazine index -------------------------------------- */

.mag-masthead {
  position: relative;
  padding-block: var(--s8) var(--s7);
  background: var(--blush-wash);
  border-bottom: var(--rule-blush);
}
.mag-masthead h1 {
  font-size: clamp(3rem, 8.5vw, 5.4rem);
  margin-bottom: var(--s5);
}
.mag-masthead .standfirst { margin-bottom: var(--s4); }
.mag-masthead__note {
  font-size: var(--t-base);
  color: var(--muted);
  max-width: 62ch;
  margin-bottom: 0;
}

/* --- Breadcrumb ----------------------------------------------------------- */

.art-crumbs { margin-bottom: var(--s5); }
.art-crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.55rem;
}
.art-crumbs li { margin: 0; display: flex; align-items: baseline; gap: 0.55rem; }
.art-crumbs li + li::before {
  content: "";
  width: 4px;
  height: 4px;
  transform: rotate(45deg);
  background: var(--accent);
  flex: none;
}
.art-crumbs a { text-decoration: none; }
.art-crumbs a:hover { text-decoration: underline; }
.art-crumbs [aria-current="page"] { color: var(--muted); }

/* --- Standfirst, shared by the index and the article --------------------- */

.standfirst {
  font-family: var(--f-display);
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  line-height: 1.42;
  font-weight: 300;
  color: var(--ink);
  max-width: 46ch;
}

/* --- The card grid -------------------------------------------------------- */

.mag-index { padding-block: var(--s8); }

.mag-grid {
  display: grid;
  gap: var(--s6) var(--s5);
}
@media (min-width: 720px) { .mag-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .mag-grid { grid-template-columns: repeat(3, 1fr); } }

.mag-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: var(--rule-blush);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color 260ms ease, transform 260ms ease, box-shadow 260ms ease;
}
.mag-card:hover {
  border-color: var(--sage-line);
  transform: translateY(-2px);
  box-shadow: var(--lift-2);
}

.mag-card__plate {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--bg-deep);
  border-bottom: var(--rule-blush);
}
.mag-card__plate img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(0.93) contrast(1.03) brightness(1.01);
  transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mag-card__plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 180px 180px;
  opacity: 0.1;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.mag-card:hover .mag-card__plate img { transform: scale(1.025); }

.mag-card__body {
  padding: var(--s5) var(--s5) var(--s6);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.mag-kicker {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--primary-deep);
  margin: 0 0 var(--s3);
  max-width: none;
}
.mag-kicker::before {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: var(--accent);
  flex: none;
}

.mag-card__title {
  font-size: 1.5rem;
  line-height: 1.14;
  margin: 0 0 var(--s3);
}
.mag-card__title a {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size 320ms ease, color 200ms ease;
}
.mag-card__title a:hover {
  color: var(--accent-deep);
  background-size: 100% 1px;
}

.mag-card__dek {
  font-size: var(--t-base);
  color: var(--ink-quiet);
  max-width: none;
  margin-bottom: var(--s5);
}

.mag-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: auto 0 0;
  padding-top: var(--s4);
  border-top: var(--rule-faint);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  max-width: none;
}
.art-sep {
  width: 4px;
  height: 4px;
  transform: rotate(45deg);
  background: var(--sage-line);
  flex: none;
}

/* The lead card takes the full width of the grid and grows a size */
.mag-card.lead { grid-column: 1 / -1; }
.mag-card.lead .mag-card__title { font-size: clamp(1.9rem, 3.6vw, 2.75rem); }
.mag-card.lead .mag-card__dek { font-size: 1.1875rem; max-width: 52ch; }
@media (min-width: 860px) {
  .mag-card.lead {
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    align-items: stretch;
  }
  .mag-card.lead .mag-card__plate {
    height: 100%;
    border-bottom: 0;
    border-right: var(--rule-blush);
  }
  .mag-card.lead .mag-card__plate img { height: 100%; aspect-ratio: auto; }
  .mag-card.lead .mag-card__body { padding: var(--s7) var(--s7) var(--s6); justify-content: center; }
}

/* Call to action closing the magazine index */
.mag-index__cta {
  margin-top: var(--s8);
  padding: var(--s7) var(--gutter);
  background: var(--sage-wash);
  border: var(--rule);
  border-radius: var(--r-md);
  text-align: center;
}
.mag-index__cta .eyebrow { justify-content: center; }
.mag-index__cta h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  max-width: 26ch;
  margin-inline: auto;
}
.mag-index__cta p { max-width: 58ch; margin-inline: auto; color: var(--ink-quiet); }

/* --- Article page: header block ------------------------------------------ */

.mag-article {
  padding-block: var(--s7) var(--s9);
  background: linear-gradient(180deg, var(--blush-wash), transparent 26rem);
}
.art-top { max-width: 74ch; margin-inline: auto; }
.art-head h1 {
  font-size: clamp(2.3rem, 5.4vw, 3.9rem);
  margin-bottom: var(--s5);
}
.art-head .standfirst { max-width: 54ch; color: var(--ink-quiet); }

.art-byline {
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: var(--rule-blush);
}
.art-byline__who {
  font-size: var(--t-base);
  color: var(--ink);
  margin: 0 0 0.35rem;
  max-width: none;
}
.art-byline__who a { color: var(--ink); text-decoration-color: var(--accent); }
.art-byline__who a:hover { color: var(--accent-deep); }
.art-byline__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
  max-width: none;
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.art-figure { max-width: 62rem; margin: var(--s7) auto var(--s8); }
.art-figure img { width: 100%; }
@media (min-width: 1080px) { .art-figure::before { inset: 22px -22px -22px 22px; } }

/* --- Article body: the printed measure ----------------------------------- */

.art-body {
  max-width: 68ch;
  margin-inline: auto;
  font-size: 1.0625rem;
  line-height: 1.78;
  color: var(--ink-soft);
}
.art-body > p { max-width: none; margin-bottom: var(--s5); }
.art-body > p:first-of-type { font-size: 1.15rem; line-height: 1.7; color: var(--ink); }

.art-body h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.25rem);
  line-height: 1.14;
  margin: var(--s8) 0 var(--s4);
}
.art-body h2::before {
  content: "";
  display: block;
  width: 2.75rem;
  height: 1px;
  background: var(--primary);
  margin-bottom: var(--s4);
}
.art-body h3 {
  font-size: 1.3rem;
  margin: var(--s6) 0 var(--s3);
  color: var(--ink);
}
.art-body h2 + h3 { margin-top: var(--s5); }

.art-body ul, .art-body ol {
  margin: 0 0 var(--s5);
  padding-left: 0;
  list-style: none;
  counter-reset: artnum;
}
.art-body li { margin-bottom: var(--s3); padding-left: 1.7rem; position: relative; }
.art-body ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 0.9rem;
  height: 1px;
  background: var(--accent);
}
.art-body ol > li::before {
  counter-increment: artnum;
  content: counter(artnum, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--f-display);
  font-size: 0.95rem;
  color: var(--primary-deep);
}

.art-body blockquote {
  margin: var(--s6) 0;
  padding: 0 0 0 var(--s5);
  border-left: 1px solid var(--primary);
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.32rem;
  line-height: 1.45;
  color: var(--ink);
}
.art-body blockquote p { max-width: none; }
.art-body blockquote p:last-child { margin-bottom: 0; }

.art-body table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: var(--s6) 0;
  font-size: var(--t-base);
}
.art-body th, .art-body td {
  text-align: left;
  vertical-align: top;
  padding: 0.8rem 1rem;
  border-bottom: var(--rule-faint);
}
.art-body thead th {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary-deep);
  border-bottom: 1px solid var(--primary);
  white-space: nowrap;
}
.art-body tbody tr:last-child td { border-bottom: 0; }
.art-body td { color: var(--ink-quiet); }

.art-body a { color: var(--primary-deep); }
.art-body a:hover { color: var(--accent-deep); }
.art-body strong { color: var(--ink); }

/* The contextual read on, dropped between sections */
.inline-read {
  margin: var(--s6) 0;
  padding: var(--s4) var(--s5);
  background: var(--blush-wash);
  border-left: 1px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  max-width: none;
  font-size: var(--t-sm);
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
}
.inline-read a {
  display: inline;
  font-size: var(--t-base);
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink);
  text-decoration-color: var(--accent);
}
.inline-read a:hover { color: var(--accent-deep); }

/* --- Article call to action ---------------------------------------------- */

.art-cta {
  max-width: 68ch;
  margin: var(--s8) auto 0;
  padding: var(--s7) clamp(1.25rem, 4vw, 2.75rem);
  background: var(--sage-wash);
  border: var(--rule);
  border-radius: var(--r-md);
}
.art-cta h2 {
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  margin-bottom: var(--s4);
  max-width: 24ch;
}
.art-cta p { color: var(--ink-quiet); max-width: none; }
.art-cta__act { margin: var(--s5) 0 0; }
.art-cta__act .btn { text-align: center; }

/* --- Author box ----------------------------------------------------------- */

.author-box {
  max-width: 68ch;
  margin: var(--s7) auto 0;
  padding: var(--s6) 0 0;
  border-top: 1px solid var(--primary);
  display: grid;
  gap: var(--s5);
}
@media (min-width: 620px) {
  .author-box { grid-template-columns: 132px 1fr; gap: var(--s6); align-items: start; }
}
.author-box__portrait {
  width: 100%;
  max-width: 132px;
  height: auto;
  border: 1px solid var(--blush-line);
  padding: 7px;
  background: var(--surface);
  filter: saturate(0.9) contrast(1.02);
}
.author-box__text h2 { font-size: 1.75rem; margin-bottom: var(--s3); }
.author-box__text p { color: var(--ink-quiet); max-width: none; font-size: var(--t-base); }
.author-box__link { margin-bottom: 0; }

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

.mag-related {
  margin-top: var(--s8);
  padding-top: var(--s6);
  border-top: var(--rule-blush);
}
.mag-related__title {
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  margin-bottom: var(--s6);
}
.rel-grid { display: grid; gap: var(--s5); }
@media (min-width: 700px) { .rel-grid { grid-template-columns: repeat(3, 1fr); } }

.rel-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: var(--rule-faint);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color 260ms ease, box-shadow 260ms ease, transform 260ms ease;
}
.rel-card:hover {
  border-color: var(--sage-line);
  transform: translateY(-2px);
  box-shadow: var(--lift-2);
}
.rel-card__plate { margin: 0; position: relative; background: var(--bg-deep); }
.rel-card__plate img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(0.93) contrast(1.03);
}
.rel-card__plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 180px 180px;
  opacity: 0.1;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.rel-card__body { padding: var(--s5); display: flex; flex-direction: column; flex: 1 1 auto; }
.rel-card__title { font-size: 1.1875rem; line-height: 1.2; margin-bottom: var(--s3); }
.rel-card__title a { color: var(--ink); text-decoration: none; }
.rel-card__title a:hover { color: var(--accent-deep); text-decoration: underline; }
.rel-card__dek {
  font-size: var(--t-sm);
  color: var(--ink-quiet);
  max-width: none;
  margin-bottom: var(--s4);
  line-height: 1.62;
}
.rel-card__meta {
  margin: auto 0 0;
  max-width: none;
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.mag-related__more { margin: var(--s6) 0 0; font-size: var(--t-sm); letter-spacing: 0.06em; }

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

.mag-home__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s5);
  margin-bottom: var(--s7);
}
.mag-home__head .section-head { margin-bottom: 0; }
.mag-home__all { flex: none; }
.mag-grid--three { grid-template-columns: 1fr; }
@media (min-width: 720px) { .mag-grid--three { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .mag-grid--three { grid-template-columns: repeat(3, 1fr); } }
.mag-grid--three .mag-card__title { font-size: 1.32rem; }

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

.pub-list { list-style: none; padding: 0; margin: var(--s5) 0 0; border-top: var(--rule-faint); }
.pub-list li {
  margin: 0;
  padding: var(--s4) 0;
  border-bottom: var(--rule-faint);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem var(--s4);
  justify-content: space-between;
}
.pub-list a { font-size: var(--t-base); }
.pub-list time {
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  flex: none;
}

/* --- Narrow screens, down to 360 ----------------------------------------- */

@media (max-width: 520px) {
  .mag-masthead { padding-block: var(--s7) var(--s6); }
  .mag-article { padding-block: var(--s6) var(--s8); }
  .art-figure { margin: var(--s6) 0 var(--s7); }
  .art-figure::before { inset: 10px -10px -10px 10px; }
  .mag-card__body { padding: var(--s5) var(--s4) var(--s5); }
  .mag-card__title { font-size: 1.32rem; }
  .mag-card.lead .mag-card__title { font-size: 1.6rem; }
  .mag-card.lead .mag-card__dek { font-size: var(--t-base); }
  .art-body { font-size: var(--t-base); }
  .art-body th, .art-body td { padding: 0.7rem 0.75rem; }
  .art-cta, .mag-index__cta { padding-inline: var(--s4); }
  .art-cta__act .btn, .mag-index__cta .btn { width: 100%; }
  .inline-read { padding: var(--s4); }
  .pub-list li { justify-content: flex-start; }
}



/* 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); }
.site-network h2 { font: inherit; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; margin: 0 0 0.7rem; opacity: 0.72; }
.site-network ul { list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.site-network li + li { margin-top: 0; }
.site-network a { font-size: 0.86rem; text-decoration: none; opacity: 0.9;
  border-bottom: 1px solid transparent; }
.site-network a:hover, .site-network a:focus-visible { opacity: 1; border-bottom-color: currentColor; }
@media (max-width: 620px) { .site-network ul { gap: 0.45rem 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%; }
}