/* ═══════════════════════════════════════════════════════════════════════════
   ASPV — website stylesheet

   Every component below is a direct translation of its counterpart in the
   design system (the .jsx files under components/), from inline style objects
   into classes.
   The JSX keeps hover/focus in React state because it has no classes; here
   those become real pseudo-selectors, which is the only intentional
   divergence. Every value is a var(--token) — no raw hex, no raw px outside
   the small optical adjustments the DS itself hard-codes (button padding,
   field height), no new hues.

   Selector discipline: one class per rule, modifiers always after their base,
   no element selectors carrying spacing. Section padding lives on .section
   and nothing else overrides it except .section modifiers.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Reset & base ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--surface-page);
  font:var(--text-body-md);
  color:var(--text-body);
  letter-spacing:var(--tracking-body);
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0}
/* Components below set display:flex, which outranks the UA sheet's
   [hidden]{display:none}. Without this, hiding a card by setting .hidden
   does nothing — the resource filters and the empty state both depend on it. */
[hidden]{display:none !important}
a{color:var(--text-link);text-decoration:none;transition:color var(--duration-fast) var(--ease-standard)}
a:hover{color:var(--text-link-hover)}
button,input,select,textarea{font-family:inherit}

/* Focus: 3px petrol ring, always visible — never removed. */
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-xs)}
.skip-link{
  position:absolute;left:var(--space-4);top:calc(var(--space-4) * -6);z-index:100;
  background:var(--white);color:var(--petrol-700);font:var(--text-label);
  padding:var(--space-3) var(--space-5);border-radius:var(--radius-pill);
  box-shadow:var(--shadow-lg);transition:top var(--duration-fast) var(--ease-standard);
}
.skip-link:focus{top:var(--space-4)}

/* ── Typography ───────────────────────────────────────────────────────────── */
.display-1{font:var(--text-display-1);letter-spacing:var(--tracking-display);color:var(--text-heading);text-wrap:pretty}
.display-2{font:var(--text-display-2);letter-spacing:var(--tracking-display);color:var(--text-heading);text-wrap:pretty}
.h1{font:var(--text-h1);letter-spacing:var(--tracking-heading);color:var(--text-heading);text-wrap:pretty}
.h2{font:var(--text-h2);letter-spacing:var(--tracking-heading);color:var(--text-heading);text-wrap:pretty}
.h3{font:var(--text-h3);letter-spacing:var(--tracking-heading);color:var(--text-heading);text-wrap:pretty}
.h4{font:var(--text-h4);letter-spacing:var(--tracking-heading);color:var(--text-heading);text-wrap:pretty}
.lead{font:var(--text-lead);color:var(--text-muted);text-wrap:pretty}
.body-lg{font:var(--text-body-lg);color:var(--text-body);text-wrap:pretty}
.body-sm{font:var(--text-body-sm);color:var(--text-body)}
.caption{font:var(--text-caption);color:var(--text-muted)}
.mono{font:var(--text-mono-sm);color:var(--text-muted)}
.muted{color:var(--text-muted)}
.subtle{color:var(--text-subtle)}

/* The one approved all-caps style. */
.eyebrow{
  display:inline-block;align-self:flex-start;
  font:var(--text-eyebrow);letter-spacing:var(--eyebrow-tracking);
  text-transform:uppercase;color:var(--text-subtle);
}
.eyebrow--coral{color:var(--coral-600)}
.eyebrow--petrol{color:var(--petrol-500)}
.eyebrow--on-dark{color:rgb(255 255 255 / .6)}

/* ── Layout ───────────────────────────────────────────────────────────────── */
.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--space-8)}
.container--narrow{max-width:var(--container-narrow)}

.section{padding-block:var(--section-y)}
.section--tight{padding-block:var(--section-y-tight)}
.section--flush-top{padding-block-start:var(--space-9)}
.section--flush-bottom{padding-block-end:var(--space-9)}

/* Full-bleed colour bands mark section changes. Never more than two per page. */
.band--white{background:var(--white)}
.band--page{background:var(--surface-page)}
.band--sunken{background:var(--surface-sunken)}
.band--petrol{background:var(--surface-brand);color:var(--white)}
.band--ink{background:var(--surface-inverse);color:var(--white)}
.band--petrol .h2,.band--ink .h2,
.band--petrol .h1,.band--ink .h1,
.band--petrol .display-2,.band--ink .display-2{color:var(--white)}
.band--petrol .lead,.band--ink .lead{color:rgb(255 255 255 / .8)}

/* Stacks and grids — gap everywhere, never margins between siblings. */
.stack{display:flex;flex-direction:column;gap:var(--space-4)}
.stack--2{gap:var(--space-2)}
.stack--3{gap:var(--space-3)}
.stack--5{gap:var(--space-5)}
.stack--6{gap:var(--space-6)}
.stack--8{gap:var(--space-8)}
.stack--9{gap:var(--space-9)}
.row{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}
.row--3{gap:var(--space-3)}
.row--tight{gap:var(--space-2)}
.row--top{align-items:flex-start}
.grid{display:grid;gap:var(--space-6)}
.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))}
.divider{height:1px;background:var(--border-subtle);border:0}
.divider--on-dark{background:rgb(255 255 255 / .12)}

/* Section headers: eyebrow, title, one line of context. */
.section-head{display:flex;flex-direction:column;gap:var(--space-3);max-width:62ch}
.section-head__lead{font:var(--text-body-lg);color:var(--text-muted);text-wrap:pretty}
.band--petrol .section-head__lead,.band--ink .section-head__lead{color:rgb(255 255 255 / .78)}

/* ── Button ───────────────────────────────────────────────────────────────── */
/* Pill, echoing the mark's capsules. Coral is reserved for the single main
   action per view — never two coral buttons side by side. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  align-self:flex-start;
  font-family:var(--font-body);font-weight:var(--fw-semibold);letter-spacing:0;
  border-radius:var(--radius-button);border:1px solid transparent;cursor:pointer;
  text-decoration:none;white-space:nowrap;transition:var(--transition-interactive);
  padding:11px 22px;font-size:15px;min-height:44px;
}
.btn:active{transform:scale(var(--press-scale))}
.btn:disabled,.btn.is-disabled{opacity:.42;cursor:not-allowed;transform:none}

.btn--sm{padding:8px 16px;font-size:13.5px;min-height:36px}
.btn--lg{padding:15px 30px;font-size:16.5px;min-height:52px}
.btn--full{width:100%;align-self:stretch}

.btn--primary{background:var(--coral-500);color:var(--text-on-accent)}
.btn--primary:hover{background:var(--coral-600);color:var(--text-on-accent)}
.btn--secondary{background:var(--petrol-500);color:var(--text-on-brand)}
.btn--secondary:hover{background:var(--petrol-600);color:var(--text-on-brand)}
.btn--outline{background:transparent;color:var(--petrol-600);border-color:var(--petrol-300)}
.btn--outline:hover{background:var(--petrol-50);border-color:var(--petrol-400);color:var(--petrol-600)}
.btn--ghost{background:transparent;color:var(--petrol-600)}
.btn--ghost:hover{background:var(--petrol-50);color:var(--petrol-600)}
/* Sun never carries white text. */
.btn--highlight{background:var(--sun-500);color:var(--text-on-highlight)}
.btn--highlight:hover{background:var(--sun-600);color:var(--text-on-highlight)}
.btn--inverse{background:var(--white);color:var(--petrol-600)}
.btn--inverse:hover{background:var(--petrol-50);color:var(--petrol-600)}

/* Outline on a dark band needs a light hairline, not a petrol one. */
.band--petrol .btn--outline,.band--ink .btn--outline{color:var(--white);border-color:rgb(255 255 255 / .38)}
.band--petrol .btn--outline:hover,.band--ink .btn--outline:hover{background:rgb(255 255 255 / .1);border-color:rgb(255 255 255 / .6);color:var(--white)}

.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;
  width:44px;height:44px;border-radius:var(--radius-pill);
  border:1px solid transparent;background:transparent;color:var(--petrol-600);
  cursor:pointer;transition:var(--transition-interactive);
}
.icon-btn:hover{background:var(--petrol-50)}
.icon-btn--outline{border-color:var(--border-subtle)}

/* Text link that reads as an action. */
.link-action{
  display:inline-flex;align-items:center;gap:var(--space-2);align-self:flex-start;
  font:var(--text-body-md);font-weight:var(--fw-semibold);color:var(--petrol-600);
}
.link-action:hover{color:var(--coral-600)}
.link-action .icon{transition:transform var(--duration-fast) var(--ease-standard)}
.link-action:hover .icon{transform:translateX(3px)}

/* ── Card ────────────────────────────────────────────────────────────────── */
/* White, hairline, shadow-xs at rest, 24px padding. Never a coloured left
   border. Tinted cards use a matching border, not a shadow. */
.card{
  display:flex;flex-direction:column;
  border-radius:var(--radius-card);overflow:hidden;
  background:var(--surface-card);border:1px solid var(--border-subtle);
  box-shadow:var(--shadow-xs);transition:var(--transition-interactive);
}
.card__body{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-6);flex:1}
.card__body--sm{padding:var(--space-5)}
.card__body--lg{padding:var(--space-8)}
.card__title{font:var(--text-h4);letter-spacing:var(--tracking-heading);color:var(--text-heading)}
.card__text{font:var(--text-body-md);color:var(--text-muted);text-wrap:pretty}
.card__footer{margin-top:auto;padding-top:var(--space-4)}

.card--accent{background:var(--coral-50);border-color:var(--coral-100);box-shadow:none}
.card--highlight{background:var(--sun-50);border-color:var(--sun-200);box-shadow:none}
.card--sunken{background:var(--surface-sunken);border-color:transparent;box-shadow:none}
.card--brand{background:var(--petrol-500);border-color:transparent;color:var(--white)}
.card--brand .card__title{color:var(--white)}
.card--brand .card__text{color:rgb(255 255 255 / .8)}
.card--inverse{background:var(--ink-900);border-color:transparent;color:var(--white)}
.card--inverse .card__title{color:var(--white)}
.card--inverse .card__text{color:rgb(255 255 255 / .8)}

.card--interactive{cursor:pointer}
.card--interactive:hover{box-shadow:var(--shadow-md);transform:translateY(var(--hover-lift))}
.card--interactive:focus-within{box-shadow:var(--focus-ring)}
/* The whole card is the hit target; the title carries the real link. */
.card__link{color:inherit}
.card__link::after{content:"";position:absolute;inset:0}
.card--interactive{position:relative}
.card__link:focus-visible{box-shadow:none}

/* Feature icon sitting on a tinted disc — the area colour, never a new hue. */
.feature-icon{
  display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;
  width:48px;height:48px;border-radius:var(--radius-pill);flex:none;
  background:var(--petrol-50);color:var(--petrol-500);
}
.feature-icon--coral{background:var(--coral-50);color:var(--coral-600)}
.feature-icon--sun{background:var(--sun-50);color:var(--sun-700)}
.feature-icon--on-dark{background:rgb(255 255 255 / .12);color:var(--white)}

/* ── Badge & Tag ─────────────────────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:var(--space-2);align-self:flex-start;
  font:var(--text-label);font-size:12.5px;padding:5px 11px;
  border-radius:var(--radius-pill);background:var(--ink-100);color:var(--ink-700);
}
.badge--petrol{background:var(--petrol-50);color:var(--petrol-700)}
.badge--coral{background:var(--coral-50);color:var(--coral-700)}
.badge--sun{background:var(--sun-50);color:var(--sun-800)}
.badge--success{background:var(--success-50);color:var(--success-500)}
.badge--danger{background:var(--danger-50);color:var(--danger-500)}
.badge--solid{background:var(--petrol-500);color:var(--white)}
.badge--on-dark{background:rgb(255 255 255 / .14);color:var(--white)}

.tag{
  display:inline-flex;align-items:center;gap:var(--space-2);align-self:flex-start;
  font:var(--text-body-sm);font-weight:var(--fw-medium);padding:7px 14px;
  border-radius:var(--radius-pill);border:1px solid var(--border-subtle);
  background:var(--white);color:var(--ink-700);cursor:pointer;
  transition:var(--transition-interactive);
}
.tag:hover{background:var(--petrol-50)}
.tag[aria-pressed="true"]{background:var(--petrol-500);border-color:var(--petrol-500);color:var(--white)}

/* ── Callout ─────────────────────────────────────────────────────────────── */
.callout{
  display:flex;gap:var(--space-4);padding:var(--space-5);
  border-radius:var(--radius-md);
  background:var(--petrol-50);border:1px solid var(--petrol-200);
}
.callout__icon{flex:none;margin-top:1px;color:var(--petrol-500)}
.callout__body{display:flex;flex-direction:column;gap:var(--space-2)}
.callout__title{font:var(--text-h4);font-size:16px;color:var(--text-heading)}
.callout__text{font:var(--text-body-md);color:var(--text-body);text-wrap:pretty}
.callout--care{background:var(--coral-50);border-color:var(--coral-100)}
.callout--care .callout__icon{color:var(--coral-500)}
.callout--attention{background:var(--sun-50);border-color:var(--sun-200)}
.callout--attention .callout__icon{color:var(--sun-600)}
.callout--success{background:var(--success-50);border-color:var(--success-50)}
.callout--success .callout__icon{color:var(--success-500)}

/* ── StatBlock ───────────────────────────────────────────────────────────── */
.stat{display:flex;flex-direction:column;gap:var(--space-2)}
.stat__value{font:var(--text-display-2);letter-spacing:var(--tracking-display);line-height:1;color:var(--petrol-500)}
.stat__label{font:var(--text-body-sm);color:var(--text-muted);max-width:22ch}
.stat--coral .stat__value{color:var(--coral-500)}
.stat--sun .stat__value{color:var(--sun-600)}
.stat--ink .stat__value{color:var(--ink-900)}
.band--petrol .stat__value,.band--ink .stat__value{color:var(--white)}
.band--petrol .stat__label,.band--ink .stat__label{color:rgb(255 255 255 / .72)}

/* ── Forms ───────────────────────────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:var(--space-2);width:100%}
.field__label{font:var(--text-label);color:var(--text-heading)}
.field__hint{font:var(--text-caption);color:var(--text-muted)}
.label{font:var(--text-label);color:var(--text-heading)}
.field__error{font:var(--text-caption);color:var(--danger-500)}

.input,.textarea,.select{
  width:100%;font-family:var(--font-body);font-size:15px;color:var(--text-body);
  background:var(--white);border:1px solid var(--border-default);
  border-radius:var(--radius-input);padding:12px 14px;min-height:46px;
  transition:var(--transition-interactive);outline:none;
}
.input:focus,.textarea:focus,.select:focus{border-color:var(--border-focus);box-shadow:var(--focus-ring)}
.input:disabled,.textarea:disabled,.select:disabled{background:var(--ink-100);color:var(--text-subtle);cursor:not-allowed}
.textarea{resize:vertical;line-height:1.55;min-height:120px}
.select{
  appearance:none;padding-right:var(--space-9);cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236F7A8A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:18px;
}
.check{display:flex;align-items:flex-start;gap:var(--space-3);cursor:pointer}
.check__input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--petrol-500)}
.check__label{font:var(--text-body-md);color:var(--text-body)}

/* Inline field + button, used by the newsletter block. */
.form-inline{display:flex;gap:var(--space-3);flex-wrap:wrap}
.form-inline .input{flex:1 1 240px;min-width:0}

/* ── Site header ─────────────────────────────────────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:var(--space-8);
  padding:var(--space-4) var(--space-8);
  background:var(--white);border-bottom:1px solid var(--border-subtle);
}
.site-header__inner{
  width:100%;max-width:var(--container-max);margin-inline:auto;
  display:flex;align-items:center;gap:var(--space-8);
}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:var(--space-7)}
.site-nav__link{
  font:var(--text-body-md);font-weight:var(--fw-medium);color:var(--ink-600);
  padding-bottom:2px;transition:var(--transition-interactive);
}
.site-nav__link:hover{color:var(--petrol-700)}
.site-nav__link[aria-current="page"]{color:var(--petrol-700);box-shadow:inset 0 -2px 0 0 var(--coral-500)}
.site-nav__toggle{display:none}

/* Logo lockup, matching the Logo component's horizontal variant. */
.logo{display:inline-flex;align-items:center;gap:13px;flex:none}
.logo__mark{width:38px;height:38px;flex:none}
.logo__word{
  font-family:var(--font-display);font-weight:var(--fw-extrabold);
  letter-spacing:var(--tracking-heading);color:var(--text-heading);
  font-size:13px;line-height:1.1;
}
.logo--on-dark .logo__word{color:var(--white)}
.logo--lg .logo__mark{width:48px;height:48px}
.logo--lg .logo__word{font-size:16px}

/* ── Site footer ─────────────────────────────────────────────────────────── */
.site-footer{background:var(--ink-900);color:rgb(255 255 255 / .72);padding:var(--space-11) 0 var(--space-8)}
.site-footer__top{display:flex;gap:var(--space-10);flex-wrap:wrap}
.site-footer__brand{flex:1 1 280px;display:flex;flex-direction:column;gap:var(--space-4)}
.site-footer__note{font:var(--text-body-sm);max-width:34ch;color:rgb(255 255 255 / .72)}
.site-footer__col{display:flex;flex-direction:column;gap:var(--space-3);min-width:150px}
.site-footer__link{font:var(--text-body-sm);color:rgb(255 255 255 / .8)}
.site-footer__link:hover{color:var(--white)}
.site-footer__bottom{
  margin-top:var(--space-9);padding-top:var(--space-5);
  border-top:1px solid rgb(255 255 255 / .12);
  display:flex;gap:var(--space-5);flex-wrap:wrap;
  font:var(--text-caption);color:rgb(255 255 255 / .55);
}
.site-footer__disclaimer{margin-left:auto}

/* ── Tabs & breadcrumbs ──────────────────────────────────────────────────── */
.tabs{display:flex;gap:var(--space-6);border-bottom:1px solid var(--border-subtle);overflow-x:auto}
.tab{
  display:inline-flex;align-items:center;gap:var(--space-2);
  border:none;background:transparent;cursor:pointer;white-space:nowrap;
  font:var(--text-body-md);font-weight:var(--fw-medium);color:var(--text-muted);
  padding:0 0 12px;transition:var(--transition-interactive);
}
.tab:hover{color:var(--petrol-700)}
.tab[aria-selected="true"]{font-weight:var(--fw-semibold);color:var(--petrol-700);box-shadow:inset 0 -2px 0 0 var(--coral-500)}

.breadcrumbs{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;font:var(--text-body-sm);color:var(--text-muted)}
.breadcrumbs__sep{opacity:.5}
.breadcrumbs__current{color:var(--text-heading);font-weight:var(--fw-medium)}

/* ── Dialog & toast ──────────────────────────────────────────────────────── */
/* The scrim is the single approved use of blur in the whole system. */
.scrim{
  position:fixed;inset:0;z-index:90;
  display:flex;align-items:center;justify-content:center;padding:var(--space-6);
  background:var(--overlay-scrim);backdrop-filter:var(--blur-glass);
}
.scrim[hidden]{display:none}
.dialog{
  width:100%;max-width:520px;max-height:88vh;overflow-y:auto;
  background:var(--surface-card);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-xl);padding:var(--space-8);
  display:flex;flex-direction:column;gap:var(--space-5);
  animation:aspv-rise var(--duration-base) var(--ease-standard);
}
.dialog__head{display:flex;flex-direction:column;gap:var(--space-2);padding-right:var(--space-9)}
.dialog__close{position:absolute;top:var(--space-5);right:var(--space-5)}
.dialog__footer{display:flex;gap:var(--space-3);justify-content:flex-end;flex-wrap:wrap}

.toast-region{position:fixed;right:var(--space-6);bottom:var(--space-6);z-index:95;display:flex;flex-direction:column;gap:var(--space-3)}
.toast{
  display:flex;gap:var(--space-3);align-items:flex-start;
  min-width:280px;max-width:380px;padding:var(--space-4) var(--space-5);
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);box-shadow:var(--shadow-lg);
  animation:aspv-rise var(--duration-base) var(--ease-standard);
}
.toast__icon{color:var(--success-500);flex:none;margin-top:2px}
.toast__title{font:var(--text-label);color:var(--text-heading)}
.toast__text{font:var(--text-caption);color:var(--text-muted)}

@keyframes aspv-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── PhotoSlot ───────────────────────────────────────────────────────────── */
/* No photography was supplied. These placeholders name the intended shot —
   replace with documentary photography, don't delete the labels silently.
   Carries the one approved decorative motif: the mark at 16%, oversized
   and cropped off the edge. */
.photo{
  position:relative;overflow:hidden;
  border-radius:var(--radius-lg);background:var(--petrol-500);
  display:flex;align-items:flex-end;padding:var(--space-5);min-height:260px;
}
.photo--coral{background:var(--coral-500)}
.photo--sun{background:var(--sun-500)}
.photo--ink{background:var(--ink-200)}
.photo__motif{position:absolute;right:-30px;top:-30px;width:200px;height:200px;opacity:.16}
.photo__label{position:relative;font:var(--text-caption);color:rgb(255 255 255 / .85)}
.photo--sun .photo__label{color:var(--ink-900)}
.photo--ink .photo__label{color:var(--ink-700)}
.photo--tall{min-height:420px}
.photo--short{min-height:180px}

/* ── Prose, for the long-form guide ──────────────────────────────────────── */
.prose{display:flex;flex-direction:column;gap:var(--space-5);font:var(--text-body-lg);color:var(--text-body)}
.prose p{text-wrap:pretty}
.prose h2{font:var(--text-h2);letter-spacing:var(--tracking-heading);color:var(--text-heading);margin-top:var(--space-6);text-wrap:pretty}
.prose h3{font:var(--text-h3);letter-spacing:var(--tracking-heading);color:var(--text-heading);margin-top:var(--space-4);text-wrap:pretty}
.prose ul{display:flex;flex-direction:column;gap:var(--space-3);padding-left:var(--space-5);list-style:disc}
.prose li::marker{color:var(--petrol-400)}
.prose a{text-decoration:underline;text-underline-offset:3px}
.prose strong{font-weight:var(--fw-semibold);color:var(--text-heading)}

.toc{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-6);background:var(--white);border:1px solid var(--border-subtle);border-radius:var(--radius-card)}
.toc__link{font:var(--text-body-md);color:var(--text-muted)}
.toc__link:hover{color:var(--petrol-700)}

/* ── Small shared pieces ─────────────────────────────────────────────────── */
.meta{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;font:var(--text-caption);color:var(--text-subtle)}
.meta__dot{opacity:.5}
.list-plain{display:flex;flex-direction:column;gap:var(--space-3);list-style:none}
.list-check{display:flex;flex-direction:column;gap:var(--space-3);list-style:none}
.list-check li{display:flex;gap:var(--space-3);align-items:flex-start;font:var(--text-body-md);color:var(--text-body)}
.list-check .icon{color:var(--petrol-500);flex:none;margin-top:3px}
.sticky{position:sticky;top:calc(var(--space-11) + var(--space-2))}

/* Numbered steps — used only where the content genuinely is a sequence. */
.step{display:flex;gap:var(--space-5);align-items:flex-start}
.step__num{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:40px;height:40px;border-radius:var(--radius-pill);
  background:var(--petrol-50);color:var(--petrol-600);
  font:var(--text-label);font-size:14px;
}

/* Timeline — the years carry real information, so they are the structure. */
.timeline{display:flex;flex-direction:column;gap:var(--space-8)}
.timeline__item{display:grid;grid-template-columns:96px 1fr;gap:var(--space-6);align-items:start}
.timeline__year{font:var(--text-h3);letter-spacing:var(--tracking-heading);color:var(--petrol-500)}

/* ── Page-specific column ratios ─────────────────────────────────────────── */
.hero-grid{grid-template-columns:1.05fr .95fr;gap:var(--space-10);align-items:center}
.newsletter-grid{grid-template-columns:1fr 420px;gap:var(--space-10);align-items:center}
.aside-grid{grid-template-columns:1fr 340px;gap:var(--space-10);align-items:start}
.article-grid{grid-template-columns:240px 1fr;gap:var(--space-10);align-items:start}
.split-grid{grid-template-columns:1fr 1fr;gap:var(--space-10);align-items:center}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width:960px){
  .newsletter-grid,.aside-grid,.article-grid{grid-template-columns:minmax(0,1fr)}
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .section{padding-block:var(--space-11)}
  .section--tight{padding-block:var(--space-10)}
}

@media (max-width:760px){
  .container{padding-inline:var(--space-6)}
  .site-header{padding:var(--space-3) var(--space-6)}
  .site-nav{
    position:fixed;inset:57px 0 auto;flex-direction:column;align-items:stretch;
    gap:var(--space-1);padding:var(--space-5) var(--space-6) var(--space-7);
    background:var(--white);border-bottom:1px solid var(--border-subtle);
    box-shadow:var(--shadow-lg);
  }
  .site-nav[hidden]{display:none}
  .site-nav__link{padding:var(--space-3) 0;box-shadow:none}
  .site-nav__link[aria-current="page"]{box-shadow:inset 2px 0 0 0 var(--coral-500);padding-left:var(--space-4)}
  .site-nav__toggle{display:inline-flex;margin-left:auto}
  .site-nav .btn{margin-top:var(--space-3)}

  .grid--2,.grid--3,.grid--4{grid-template-columns:minmax(0,1fr)}
  .hero-grid,.split-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-8)}
  .section{padding-block:var(--space-10)}
  .section--tight{padding-block:var(--space-9)}
  .site-footer{padding-block:var(--space-10) var(--space-7)}
  .site-footer__disclaimer{margin-left:0}
  .timeline__item{grid-template-columns:minmax(0,1fr);gap:var(--space-3)}
  .toast-region{right:var(--space-4);left:var(--space-4);bottom:var(--space-4)}
  .toast{max-width:none}
  .dialog{padding:var(--space-6)}
  .sticky{position:static}
  .photo--tall{min-height:300px}
}

/* Reduced motion: keep opacity only, drop every transform. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .card--interactive:hover,.btn:active,.link-action:hover .icon{transform:none}
  .dialog,.toast{animation:aspv-fade var(--duration-base) var(--ease-standard)}
}
@keyframes aspv-fade{from{opacity:0}to{opacity:1}}