/* 00-tokens.css */
/* AddVantage design tokens, from the designer's tokens.css. Values come from the app theme; do not change them.
   The one difference from the handoff file: the fonts are served from this site, not from Google. */
:root {
  /* colour */
  --av-ground:      #1E1D1D; /* Off Black: page ground */
  --av-ink:         #E5E4DF; /* Desert Storm: primary text; rare light ground */
  --av-teal:        #30A57B; /* Turaco Teal: the only accent */
  --av-teal-press:  oklch(0.57 0.11 160); /* pressed primary button only */
  --av-teal-soft:   #16332A; /* quiet fill behind a teal element */
  --av-surface:     #2B2A28; /* raised panels, crisis block */
  --av-field:       #141313; /* sunken wells, inputs, deepest black */
  --av-elevated:    #3A3836; /* menus, disabled button fill, pressed controls */
  --av-soft:        #A6A39D; /* secondary text AND all captions */
  --av-faint:       #726F6A; /* disabled / 24px+ only (3.4:1) */
  --av-line:        rgba(255,255,255,.08);
  --av-line-strong: rgba(255,255,255,.15);
  --av-danger:      #E07A63; /* errors only */
  --av-control:     var(--av-faint); /* every control edge: fields, choices, rungs, calendar days */
  --av-underline:   rgba(229,228,223,.4); /* the rule under a text link when teal is taken */

  /* type */
  --av-sans:  "Inter", system-ui, sans-serif;
  --av-mark:  "Michroma", sans-serif;           /* wordmark, the join-panel price, the Hundred counter. Nothing else. */
  --av-verse: "Newsreader", Georgia, serif;     /* italic, scripture only */

  --av-display: clamp(44px, 6.1vw, 88px);   /* 300 / 0.98 / -0.03em  */
  --av-h1:      clamp(38px, 4.45vw, 64px);  /* 300 / 1.04 / -0.025em */
  --av-h2:      clamp(30px, 3.05vw, 44px);  /* 300 / 1.1  / -0.02em  */
  --av-h3:      clamp(22px, 1.8vw, 26px);   /* 400 / 1.25 / -0.01em  */
  --av-lead:    clamp(18px, 1.46vw, 21px);  /* 300 / 1.5             */
  --av-body:    clamp(16px, 1.18vw, 17px);  /* 400 / 1.6-1.65        */
  --av-small:   14px;                       /* 400 / 1.5             */
  --av-label:   15px;                       /* 500 / 1 / +0.01em     */
  --av-numeral: clamp(44px, 5vw, 72px);     /* Michroma / 1 / -0.03em */
  --av-verse-size: clamp(22px, 2.2vw, 32px);/* Newsreader italic / 1.5 */

  /* space (4px base) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px; --s-11: 192px;

  /* layout */
  --av-frame: 1440px;                        /* the widest a section's frame grows */
  --av-max: 1280px;                          /* content max inside a 1440 frame */
  --av-margin:  clamp(20px, 5.55vw, 80px);   /* 20 phone / 48 tablet / 80 desktop */
  --av-gutter:  clamp(16px, 1.67vw, 24px);
  --av-section: clamp(96px, 13.3vw, 192px);  /* vertical gap between page sections */
  --av-nav-h: clamp(72px, 6.1vw, 88px);
  --av-radius: 2px;                          /* max corner radius anywhere */
  --av-ease: cubic-bezier(.2,.7,.1,1);
  --av-tap: 48px;                            /* min height of anything a thumb taps; 8px between neighbours */
  --av-fade: 200ms;                          /* cross-fade for every link after the first arrival */
  --av-photo-grade: grayscale(1) contrast(1.08) brightness(.9); /* the one photo treatment */
  --av-scrim-x: linear-gradient(90deg, #1E1D1D 0%, rgba(30,29,29,.86) 38%, rgba(30,29,29,.25) 100%), linear-gradient(0deg, rgba(30,29,29,.7) 0%, rgba(30,29,29,0) 45%);
  --av-scrim-y: linear-gradient(0deg, #1E1D1D 0%, rgba(30,29,29,.9) 42%, rgba(30,29,29,.45) 72%, rgba(30,29,29,.25) 100%);
  /* breakpoints: phone < 700px, tablet 700-1199px, desktop >= 1200px. The menu folds below 960px. */
}

/* 10-base.css */
/* Base: reset, type steps, layout frames, focus, motion rules. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--av-nav-h) + 16px); background: var(--av-ground); }
body {
  margin: 0; background: var(--av-ground); color: var(--av-ink);
  font-family: var(--av-sans); font-size: var(--av-body); line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3, h4 { font-weight: 400; font-size: inherit; }
ul[class], ol[class] { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
/* With scripts off nothing can be chosen, so every part that waits on a choice ([data-when]) is shown instead of hidden. */
.js [hidden], [hidden]:not([data-when]) { display: none !important; }
:where(html:not(.js) [data-when][hidden]) { display: block; }
main { display: block; }
main:focus { outline: none; }

@media (hover: hover) { a:hover { color: var(--av-teal); } }

/* Focus, everywhere */
:focus-visible { outline: 2px solid var(--av-ink); outline-offset: 3px; }

/* Browser-drawn states */
::selection { background: var(--av-teal-soft); color: var(--av-ink); }
input, textarea { caret-color: var(--av-teal); }
input:-webkit-autofill, textarea:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px var(--av-teal-soft) inset; -webkit-text-fill-color: var(--av-ink); }
input[type=date], input[type=time], select { color-scheme: dark; }

.skip { position: absolute; left: var(--av-margin); top: 12px; z-index: 200; padding: 14px 20px; background: var(--av-ink); color: var(--av-ground); font-weight: 500; transform: translateY(-200%); }
.skip:focus { transform: none; }
@media (hover: hover) { .skip:hover { color: var(--av-ground); } }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Type steps. One class each; sizes come from the tokens. Lead and Body are Soft (Two tones, below). */
.t-display { font-weight: 300; font-size: var(--av-display); line-height: .98; letter-spacing: -0.03em; }
.t-h1 { font-weight: 300; font-size: var(--av-h1); line-height: 1.04; letter-spacing: -0.025em; }
.t-h2 { font-weight: 300; font-size: var(--av-h2); line-height: 1.1; letter-spacing: -0.02em; }
.t-h3 { font-weight: 400; font-size: var(--av-h3); line-height: 1.3; letter-spacing: -0.01em; }
.t-lead { font-weight: 300; font-size: var(--av-lead); line-height: 1.5; color: var(--av-soft); }
.t-body { font-size: var(--av-body); line-height: 1.65; color: var(--av-soft); }
.t-small { font-size: var(--av-small); line-height: 1.5; }
.t-label { font-size: var(--av-label); font-weight: 500; line-height: 1.3; }
.t-verse { font-family: var(--av-verse); font-style: italic; font-size: var(--av-verse-size); line-height: 1.5; }
/* Two tones (Francois, 14 Oct 2026, after the first AddVantage site). A heading, a statement, a name, a number or a label
   is Ink; the sentence that explains it is Soft. The words a Soft sentence names as its point are lifted back to Ink
   with .key. A section heading is never Soft. */
.soft { color: var(--av-soft); }
.key { color: var(--av-ink); }
.balance { text-wrap: balance; }
.pretty { text-wrap: pretty; }

/* Frames. A section is a full-width frame with the page margin and the standard gap above it. */
.frame { width: 100%; max-width: var(--av-frame); margin-inline: auto; padding-inline: var(--av-margin); }
.section { width: 100%; max-width: var(--av-frame); margin-inline: auto; padding: var(--av-section) var(--av-margin) 0; }
.section--tight { padding-top: clamp(48px, 5vw, 72px); }
/* A band is a section on a different ground that runs edge to edge. */
.band { margin-top: var(--av-section); background: var(--av-field); }
.band__inner { width: 100%; max-width: var(--av-frame); margin-inline: auto; padding: clamp(72px, 8vw, 128px) var(--av-margin); }

/* Motion. Colour changes are linear; the one entrance easing is --av-ease. Nothing bounces, and a button never moves or scales.
   What plays, and where, is in 20-components.css under Motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
}
/* Smooth scrolling starts once the page has settled (site.js adds .av-live), so a link that lands part-way down a page
   opens there at once and is not seen scrolling down from the top. */
.av-live { scroll-behavior: smooth; }

/* Page changes. No page blinks: the browser holds the old page until the new one can be drawn, then draws the change itself.
   Every link after the first arrival is a short cross-fade, and on top of that fade a few things keep their place or travel:
     the menu bar stays exactly where it is;
     the old page's headline drops out, and the new one rises a moment later (site.js, headline reveal);
     a post's headline and picture travel between the News list and the article, both ways.
   The script in the page head (layout.html) names what is carried: .av-leaving on the page being left, .av-carry on the post
   that was opened or come back from. Parts are named only under .av-motion, so reduced motion keeps the plain 150ms fade.
   Chrome, Edge and Safari do this; a browser that does not changes page at once, as before. */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: var(--av-fade); animation-timing-function: var(--av-ease); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--av-fade); animation-timing-function: linear; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 150ms; }
}
/* A part that travels takes longer than the fade (below). When only one of the two pages has it on screen there is nothing
   to travel, so it fades with the page: the page cannot be touched while a change is drawn, and that must stay short. */
::view-transition-old(av-title):only-child, ::view-transition-new(av-title):only-child,
::view-transition-old(av-pic):only-child, ::view-transition-new(av-pic):only-child { animation-duration: var(--av-fade); animation-delay: 0ms; animation-timing-function: linear; }

/* The menu bar. With the full-screen menu open it is left in the page, or its "Menu" would show through the menu's "Close". */
.av-motion .nav { view-transition-name: av-nav; }
.av-motion.menu-open .nav { view-transition-name: none; }
::view-transition-old(av-nav), ::view-transition-new(av-nav) { animation-duration: var(--av-fade); animation-timing-function: linear; }

/* The headline of the page being left sinks behind its own lower edge, the reverse of how a headline rises. */
.av-motion.av-leaving main h1:not(.article-title) { view-transition-name: av-head-out; }
::view-transition-group(av-head-out) { overflow: clip; }
::view-transition-old(av-head-out) { animation: head-sink 220ms cubic-bezier(.5, 0, .9, .5) both; }
@keyframes head-sink { to { transform: translateY(45%); opacity: 0; } }

/* A post: its headline and its picture, in the list and at the head of the article.
   The headline is set at a different size and breaks over different lines in the two places, so it is never stretched from
   one to the other: each is drawn at its own size from the same top left corner, the old one gone early in the move and
   the new one arriving over the rest of it. */
.av-motion .article-title, .av-motion .av-carry .news-lead__title, .av-motion .av-carry .news-item__title { view-transition-name: av-title; }
.av-motion .article-lead__slot, .av-motion .av-carry .slot { view-transition-name: av-pic; }
::view-transition-group(av-title), ::view-transition-group(av-pic) { animation-duration: 440ms; }
::view-transition-old(av-title), ::view-transition-new(av-title) { height: 100%; object-fit: none; object-position: 0 0; overflow: visible; animation-timing-function: linear; }
::view-transition-old(av-title) { animation-duration: 150ms; }
::view-transition-new(av-title) { animation-duration: 260ms; animation-delay: 110ms; }

/* First arrival of a visit: the wordmark on Off Black, a teal rule drawn under it, then the page. About 720ms, once.
   It is driven by CSS alone and never takes a tap, so it cannot hold a page hostage. */
.arrival { display: none; }
.av-arrive .arrival {
  display: flex; position: fixed; inset: 0; z-index: 300; align-items: center; justify-content: center;
  background: var(--av-ground); pointer-events: none;
  animation: arrival-out 160ms linear 560ms both;
}
.arrival__lockup { display: flex; flex-direction: column; gap: 14px; }
.arrival__word { display: flex; align-items: center; gap: 14px; animation: arrival-rise 320ms var(--av-ease) both; }
.arrival__word .wordmark { font-size: 18px; }
.arrival__word .mark { width: 40px; }
.arrival__rule { height: 1px; background: var(--av-teal); transform-origin: left; animation: arrival-rule 300ms var(--av-ease) 220ms both; }
@keyframes arrival-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes arrival-rule { from { transform: scaleX(0); } }
@keyframes arrival-out { to { opacity: 0; visibility: hidden; } }

/* 20-components.css */
/* Shared components. Page files (css/pages/*.css) add only what is theirs, with their own prefix.
   Rules that hold everywhere: one teal action per view; controls are outlined in --av-control and hairlines only divide content;
   anything a thumb taps is at least 48px tall; a pressed colour shows at once and the 160ms fade is for a mouse hover only. */

/* ---------- The mark and the wordmark ---------- */
.mark {
  flex: none; display: inline-block; width: 34px; aspect-ratio: 320 / 218; background: currentColor;
  -webkit-mask: url(/assets/brand/mark.png) center / contain no-repeat; mask: url(/assets/brand/mark.png) center / contain no-repeat;
}
.wordmark { font-family: var(--av-mark); font-size: clamp(14px, 1.1vw, 16px); letter-spacing: -0.03em; line-height: 1; white-space: nowrap; }

/* ---------- Buttons: colour only, never move or scale ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; max-width: 100%; min-height: 52px; padding: 0 28px;
  border: 1px solid transparent; border-radius: var(--av-radius); background: none; color: var(--av-ink);
  font-size: 15px; font-weight: 500; letter-spacing: .01em; line-height: 1.2; white-space: nowrap; text-align: center; cursor: pointer;
  transition: background-color 160ms linear, border-color 160ms linear, color 160ms linear;
}
.btn--large { min-height: 56px; font-size: 16px; }
.btn--block { display: flex; width: 100%; }
.btn--primary { background: var(--av-teal); color: var(--av-ground); }
.btn--secondary { border-color: var(--av-soft); }
@media (hover: hover) {
  .btn--primary:hover { background: var(--av-ink); color: var(--av-ground); }
  .btn--secondary:hover { background: var(--av-surface); border-color: var(--av-ink); color: var(--av-ink); }
}
.btn--primary:active { background: var(--av-teal-press); color: var(--av-ground); transition: none; }
.btn--secondary:active { background: var(--av-elevated); transition: none; }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--av-elevated); border-color: transparent; color: var(--av-soft); cursor: default; pointer-events: none; }

/* ---------- Text links: the word carries a rule under it ---------- */
.link { display: inline-flex; align-items: center; min-height: var(--av-tap); padding: 0; border: 0; background: none; color: var(--av-ink); font-size: 16px; text-align: left; cursor: pointer; }
.link > span { padding-bottom: 5px; border-bottom: 1px solid var(--av-underline); }
@media (hover: hover) { .link:hover { color: var(--av-teal); } }
.link:active { color: var(--av-soft); }
.link:focus-visible { outline-offset: 4px; }
/* A link inside a sentence. */
.inline-link { border-bottom: 1px solid var(--av-underline); }
.inline-link:active { color: var(--av-soft); }

/* ---------- Fields: the label always sits above ---------- */
.field { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.field__label { font-size: 15px; font-weight: 500; line-height: 1.3; }
.field__opt { color: var(--av-soft); font-weight: 400; }
.field__hint { font-size: 14px; line-height: 1.5; color: var(--av-soft); }
.field__input {
  width: 100%; height: 56px; padding: 0 16px; background: var(--av-field); border: 1px solid var(--av-control); border-radius: var(--av-radius);
  color: var(--av-ink); font-size: 16px; line-height: 1.3; appearance: none; -webkit-appearance: none;
}
textarea.field__input { height: auto; min-height: 140px; padding: 14px 16px; line-height: 1.5; resize: vertical; }
select.field__input { padding-right: 44px; background-image: linear-gradient(45deg, transparent 50%, var(--av-soft) 50%), linear-gradient(135deg, var(--av-soft) 50%, transparent 50%); background-position: calc(100% - 22px) 25px, calc(100% - 16px) 25px; background-size: 6px 6px; background-repeat: no-repeat; }
.field__input::placeholder { color: var(--av-soft); opacity: .7; }
.field__input:focus-visible { border-color: var(--av-ink); outline: 2px solid var(--av-ink); outline-offset: 3px; }
.field__input[aria-invalid="true"] { border-color: var(--av-danger); }
.field__input:disabled { border-style: dashed; color: var(--av-faint); }
.field__error { font-size: 14px; line-height: 1.5; color: var(--av-danger); }
/* A field with a unit in front of it, like the R of an amount in rand. */
.field__wrap { position: relative; }
.field__unit { position: absolute; left: 16px; top: 0; bottom: 0; display: flex; align-items: center; font-size: 16px; color: var(--av-soft); pointer-events: none; }
.field__wrap .field__input { padding-left: 36px; }

/* ---------- Forms and their states ---------- */
.form__errors { padding: 20px; border: 1px solid var(--av-danger); border-radius: var(--av-radius); font-size: 15px; line-height: 1.55; }
.form__errors-head { font-weight: 500; color: var(--av-danger); }
.form__errors ul { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.form__errors a { display: inline-flex; align-items: center; min-height: var(--av-tap); border-bottom: 0; text-decoration: underline; text-decoration-color: var(--av-underline); text-underline-offset: 5px; }
.form__fail { font-size: 15px; line-height: 1.5; color: var(--av-danger); }
.form__note { font-size: 14px; line-height: 1.5; color: var(--av-soft); }
/* What stands in a form's place once it has gone through. */
.done { display: flex; flex-direction: column; gap: 12px; }
.done:focus { outline: none; }
.done__head { font-size: 36px; font-weight: 300; letter-spacing: -0.02em; line-height: 1.1; }
.done__text { font-size: 16px; line-height: 1.6; color: var(--av-soft); }
.done__text b, .done__text [data-fill] { color: var(--av-ink); font-weight: 400; }
/* Shown while a form is not connected to anything: says so, plainly. */
.preview-note { padding-left: 16px; border-left: 1px solid var(--av-control); font-size: 14px; line-height: 1.5; color: var(--av-soft); }

/* ---------- Choices: rungs, periods, sorter options, give or join. Choosing is instant. ---------- */
.choice {
  display: flex; align-items: center; gap: 12px; min-height: var(--av-tap); padding: 16px 20px; width: 100%;
  background: transparent; color: var(--av-ink); border: 0; border-radius: var(--av-radius); box-shadow: inset 0 0 0 1px var(--av-control);
  font-size: 16px; line-height: 1.35; text-align: left; cursor: pointer;
}
@media (hover: hover) { .choice:hover { background: var(--av-surface); color: var(--av-ink); } }
.choice:active { background: var(--av-elevated); }
.choice[aria-checked="true"] { background: var(--av-surface); box-shadow: inset 0 0 0 2px var(--av-teal); }
/* On a Surface panel the fills step one tone up. */
@media (hover: hover) { .choice--raised:hover { background: var(--av-elevated); } }
.choice--raised[aria-checked="true"] { background: var(--av-elevated); }
.choice__label { flex: 1; min-width: 0; }
.choice__box { flex: none; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px var(--av-control); }
.choice__box::after { content: ""; width: 10px; height: 10px; }
.choice[aria-checked="true"] .choice__box { box-shadow: inset 0 0 0 1px var(--av-teal); }
.choice[aria-checked="true"] .choice__box::after { background: var(--av-teal); }

/* ---------- Navigation ---------- */
.nav { position: absolute; top: 0; left: 0; right: 0; z-index: 50; }
.js .nav { position: fixed; }
.nav::before { content: ""; position: absolute; inset: 0; background: var(--av-ground); border-bottom: 1px solid var(--av-line-strong); opacity: 0; transition: opacity 200ms linear; pointer-events: none; }
.nav.is-scrolled::before { opacity: 1; }
.nav__bar { position: relative; max-width: var(--av-frame); height: var(--av-nav-h); margin: 0 auto; padding: 0 var(--av-margin); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav__home, .menu__brand, .footer__brand { display: flex; align-items: center; gap: 12px; min-height: var(--av-tap); white-space: nowrap; color: var(--av-ink); }
@media (hover: hover) { .nav__home:hover { color: var(--av-ink); } }
.nav__home:focus-visible { outline-offset: 4px; }
.nav__links { display: flex; align-items: center; gap: clamp(20px, 2.2vw, 32px); font-size: 15px; white-space: nowrap; }
.nav__join { display: inline-flex; align-items: center; height: 48px; padding: 0 20px; border: 1px solid var(--av-teal); border-radius: var(--av-radius); color: var(--av-ink); font-weight: 500; transition: background-color 160ms linear; }
@media (hover: hover) { .nav__join:hover { background: var(--av-teal-soft); color: var(--av-ink); } }
.nav__join:active { background: var(--av-elevated); transition: none; }
.nav__link { display: flex; align-items: center; height: 48px; color: var(--av-soft); }
.nav__link[aria-current="page"] { color: var(--av-ink); box-shadow: inset 0 -1px 0 var(--av-ink); }
.nav__link:active { color: var(--av-ink); }
.nav__link:focus-visible { outline-offset: 2px; }
.nav__menu { display: none; align-items: center; justify-content: center; height: 48px; min-width: 64px; padding: 0 6px; background: none; border: 0; color: var(--av-ink); font-size: 15px; font-weight: 500; cursor: pointer; }
.nav__menu > span { padding-bottom: 4px; border-bottom: 1px solid var(--av-underline); }
@media (hover: hover) { .nav__menu:hover { color: var(--av-ink); } }
.nav__menu:active { background: var(--av-elevated); }
.nav__menu:focus-visible { outline-offset: 2px; }
.menu .nav__menu { display: flex; }
@media (max-width: 959.98px) {
  .nav__links { display: none; }
  .nav__menu { display: flex; }
}

/* The full-screen menu below 960px */
.menu { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--av-ground); color: var(--av-ink); overflow: auto; }
.menu[open] { display: flex; flex-direction: column; }
.menu::backdrop { background: var(--av-ground); }
.menu__top { flex: none; height: 72px; padding: 0 var(--av-margin); display: flex; align-items: center; justify-content: space-between; }
.menu__brand { gap: 10px; }
.menu__brand .mark { width: 30px; }
.menu__brand .wordmark { font-size: 14px; }
.menu__links { flex: none; display: flex; flex-direction: column; margin: 24px var(--av-margin) auto; border-bottom: 1px solid var(--av-line); }
.menu__link { display: flex; align-items: center; min-height: 68px; border-top: 1px solid var(--av-line); font-size: 36px; font-weight: 300; letter-spacing: -0.025em; line-height: 1.1; color: var(--av-ink); }
.menu__links--four .menu__link { min-height: 76px; }
.menu__link--join { color: var(--av-teal); }
.menu__link:active { background: var(--av-surface); }
.menu__link:focus-visible { outline-offset: -2px; }
.menu__crisis { flex: none; margin: 32px var(--av-margin) 20px; padding: 20px; background: var(--av-surface); display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.menu__crisis-head { font-weight: 500; }
.menu__crisis-lines { color: var(--av-soft); line-height: 1.5; }
.menu__crisis-lines a { display: inline-flex; align-items: center; min-height: var(--av-tap); color: var(--av-ink); text-decoration: underline; text-decoration-color: var(--av-underline); text-underline-offset: 5px; }
html.menu-open { overflow: hidden; }
.av-motion .menu[open] { animation: menu-in 200ms linear both; }
.av-motion .menu[open] .menu__link { animation: menu-link 400ms var(--av-ease) both; animation-delay: calc(var(--i) * 60ms + 40ms); }
@keyframes menu-in { from { opacity: 0; } }
@keyframes menu-link { from { opacity: 0; transform: translateY(12px); } }

/* ---------- Crisis block: on every page, first thing in the footer ---------- */
.crisis { padding: clamp(24px, 3.3vw, 48px); background: var(--av-surface); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 28px 40px; align-items: start; }
.crisis__intro { display: flex; flex-direction: column; gap: 12px; }
.crisis__head { font-size: var(--av-h3); font-weight: 400; letter-spacing: -0.01em; line-height: 1.25; }
.crisis__sub { font-size: 15px; line-height: 1.55; color: var(--av-soft); }
.crisis__line { display: flex; flex-direction: column; gap: 6px; padding-left: 20px; border-left: 1px solid var(--av-line-strong); color: var(--av-ink); }
.crisis__verb, .crisis__service { font-size: 14px; line-height: 1.4; color: var(--av-soft); }
.crisis__number { font-size: 24px; line-height: 1.2; font-variant-numeric: tabular-nums; }
@media (hover: hover) { .crisis__line:hover { color: var(--av-ink); } .crisis__line:hover .crisis__number { color: var(--av-teal); } }
.crisis__line:active .crisis__number { color: var(--av-soft); }

/* ---------- Footer ---------- */
.footer { max-width: var(--av-frame); margin: 0 auto; padding: var(--av-section) var(--av-margin) 40px; display: flex; flex-direction: column; gap: clamp(48px, 5vw, 72px); }
.footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 40px 24px; }
.footer__about { display: flex; flex-direction: column; gap: 16px; }
.footer__about p { font-size: 15px; line-height: 1.6; color: var(--av-soft); max-width: 300px; }
.footer__brand { min-height: 0; }
.footer__nav { display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.footer__label { font-size: 15px; font-weight: 500; color: var(--av-ink); padding-bottom: 4px; }
.footer__nav a, .footer__nav > span { display: flex; align-items: center; min-height: var(--av-tap); overflow-wrap: anywhere; }
.footer__nav a { color: var(--av-soft); }
@media (hover: hover) { .footer__nav a:hover { color: var(--av-teal); } }
.footer__nav a:active { color: var(--av-ink); }
.footer__nav a:focus-visible { outline-offset: 2px; }
.footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 24px; border-top: 1px solid var(--av-line); font-size: 14px; color: var(--av-soft); }

/* ---------- Grounds ---------- */
/* The hero ground: a pool of Surface from the upper right, a fade to Field at the floor, and grain. */
.av-ground { position: relative; background: var(--av-ground); overflow: hidden; }
.av-ground::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(110% 85% at 80% 12%, var(--av-surface) 0%, transparent 58%), linear-gradient(180deg, transparent 50%, var(--av-field) 100%); }
.av-ground::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: url(/assets/img/grain.svg); }
.av-ground > * { position: relative; z-index: 1; }
.av-ground__photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--av-photo-grade); }
.av-ground__scrim { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--av-scrim-x); }
@media (max-width: 699.98px) { .av-ground__scrim { background: var(--av-scrim-y); } }
.av-ground__rule { position: absolute; left: var(--av-margin); bottom: 0; z-index: 1; width: 42%; height: 1px; background: var(--av-teal); }
/* The site's light (Francois, 14 Oct 2026, after the "Elegant Dark Pattern" by Jatin Yadav on 21st.dev), behind Home's hero
   and every inner page head: a pool of Surface from the upper left; inside it five shafts of teal, each fading downwards, cut
   into the original's stripes and leaned 45 degrees; a fine grid of dots. It does not move. On Home it stands on Field under
   the grain and replaces the pool and floor of .av-ground. These are the only places teal is light rather than ink (The Flat
   Ink Rule). Markup: <!-- @render rays --> as the first child. */
.av-rays { position: absolute; inset: 0; pointer-events: none; }
.av-ground--rays::before { display: none; }
.av-ground > .av-rays { position: absolute; z-index: 0; background: var(--av-field); }
.av-rays__pool {
  position: absolute; inset: 0;
  background: radial-gradient(100% 100% at 0% 0%, var(--av-surface) 0%, var(--av-field) 100%);
  -webkit-mask: radial-gradient(125% 100% at 0% 0%, #000 0%, rgba(0, 0, 0, .224) 88.29%, rgba(0, 0, 0, 0) 100%);
          mask: radial-gradient(125% 100% at 0% 0%, #000 0%, rgba(0, 0, 0, .224) 88.29%, rgba(0, 0, 0, 0) 100%);
}
.av-rays__ray {
  position: absolute; inset: 0; opacity: .2; transform: skewX(45deg);
  background: linear-gradient(var(--av-teal) 0%, transparent 100%);
  -webkit-mask: var(--av-stripes); mask: var(--av-stripes);
}
.av-rays__ray:nth-child(1) { --av-stripes: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 20%, rgba(0,0,0,0) 36%, #000 55%, rgba(0,0,0,.13) 67%, #000 78%, rgba(0,0,0,0) 97%); }
.av-rays__ray:nth-child(2) { --av-stripes: linear-gradient(90deg, rgba(0,0,0,0) 11%, #000 25%, rgba(0,0,0,.55) 41%, rgba(0,0,0,.13) 67%, #000 78%, rgba(0,0,0,0) 97%); }
.av-rays__ray:nth-child(3) { --av-stripes: linear-gradient(90deg, rgba(0,0,0,0) 9%, #000 20%, rgba(0,0,0,.55) 28%, rgba(0,0,0,.424) 40%, #000 48%, rgba(0,0,0,.267) 54%, rgba(0,0,0,.13) 78%, #000 88%, rgba(0,0,0,0) 97%); }
.av-rays__ray:nth-child(4) { --av-stripes: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 17%, rgba(0,0,0,.55) 26%, #000 35%, rgba(0,0,0,0) 47%, rgba(0,0,0,.13) 69%, #000 79%, rgba(0,0,0,0) 97%); }
.av-rays__ray:nth-child(5) { --av-stripes: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 20%, rgba(0,0,0,.55) 27%, #000 42%, rgba(0,0,0,0) 48%, rgba(0,0,0,.13) 67%, #000 74%, #000 82%, rgba(0,0,0,.47) 88%, rgba(0,0,0,0) 97%); }
.av-rays__dots { position: absolute; inset: 0; opacity: .1; background-image: radial-gradient(circle at 1px 1px, var(--av-ink) 1px, transparent 0); background-size: 20px 20px; }
/* An inner page's head: the same light as Home's hero (.av-rays) at the size of Home's hero (a screen tall, or the head if
   that is taller), on the page's own ground instead of Field. Below a short head it goes on behind the page and fades out
   with no edge. It lies under everything in the page, panels and cards included, because main keeps it there (isolation,
   z-index -1). Clears the navigation bar. */
main { isolation: isolate; }
.page-head { position: relative; display: flow-root; overflow-x: clip; }
.page-head > .av-rays {
  z-index: -1; bottom: auto; height: max(100%, 100svh, 560px);
  -webkit-mask: linear-gradient(#000 40%, transparent); mask: linear-gradient(#000 40%, transparent);
}
/* At Home's full strength, on Francois's word (14 Oct 2026: at 60% he could not see them). A page head's words sit near the
   top, where the shafts are strongest and overlap, so the grey (Soft) words highest in a head fall below 4.5:1 against the
   brightest shafts unless lifted, which the next rule does. */
.page-head .av-rays__pool { background: radial-gradient(100% 100% at 0% 0%, var(--av-surface) 0%, transparent 100%); }
/* Words over the light (Francois, 15 Oct 2026: full-strength shafts and readable words). Where the shafts fall behind small
   grey or red words (a page head, the first post on News, a legal page's contents) Soft is lifted 45% toward Ink and Danger
   25%, so they keep 4.5:1 against the brightest shaft. The tokens themselves do not change; these are mixes of them. */
:root {
  --av-soft-lit: color-mix(in srgb, var(--av-soft) 55%, var(--av-ink));
  --av-danger-lit: color-mix(in srgb, var(--av-danger) 75%, var(--av-ink));
}
.page-head, .news-lead, .legal-toc { --av-soft: var(--av-soft-lit); --av-danger: var(--av-danger-lit); }
.page-head__inner { position: relative; width: 100%; max-width: var(--av-frame); margin: 0 auto; padding: clamp(104px, 9vw, 136px) var(--av-margin) 0; }

/* ---------- Pictures ---------- */
/* A picture slot holds a photograph, or the brand object that stands in until the photograph exists. */
.slot { position: relative; background: var(--av-field); overflow: hidden; }
.slot__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--av-photo-grade); }
.slot__fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(80% 70% at 50% 40%, var(--av-surface) 0%, transparent 70%); }
.slot__note { position: absolute; left: 12px; right: 12px; bottom: 10px; font-size: 13px; line-height: 1.4; color: var(--av-soft); text-align: center; }
.caption { font-size: 14px; line-height: 1.5; color: var(--av-soft); }

/* A hundred squares, ten by ten. */
.hundred { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; width: 100%; }
.hundred__cell { aspect-ratio: 1; box-shadow: inset 0 0 0 1px var(--av-line-strong); }
.hundred__cell.is-filled { background: var(--av-teal); box-shadow: none; }
.hundred__cell.is-today { background: var(--av-teal-soft); box-shadow: inset 0 0 0 1px var(--av-teal); }

/* The phone frame around an app screenshot. */
.phone { position: relative; width: clamp(220px, 19vw, 280px); aspect-ratio: 300 / 620; padding: 9px; background: var(--av-field); border-radius: 42px; box-shadow: 0 0 0 1px var(--av-line-strong), 0 30px 60px -20px rgba(0,0,0,.6); }
.phone__screen { position: relative; width: 100%; height: 100%; border-radius: 33px; overflow: hidden; background: var(--av-ground); }
.phone__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Rank card (credit-card proportions; sizes follow the card's own width) ---------- */
.rank-card { position: relative; width: 100%; aspect-ratio: 1.586; background: var(--av-ground); border-radius: var(--av-radius); overflow: hidden; container-type: inline-size; box-shadow: 0 0 0 1px var(--av-line-strong), 0 18px 36px -16px rgba(0,0,0,.65), 0 2px 4px rgba(0,0,0,.35); }
.rank-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 120% at 100% 0%, var(--av-surface) 0%, transparent 60%); }
.rank-card::after { content: ""; position: absolute; inset: 0; background-image: url(/assets/img/grain.svg); }
.rank-card__inner { position: absolute; inset: 0; z-index: 1; padding: 7cqw 8cqw; display: flex; flex-direction: column; justify-content: space-between; color: var(--av-ink); }
.rank-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 4cqw; }
.rank-card__brand { display: flex; align-items: center; gap: 2.6cqw; white-space: nowrap; }
.rank-card__brand .mark { width: 8.4cqw; }
.rank-card__brand .wordmark { font-size: 4.4cqw; }
.rank-card__rank { font-size: 4.2cqw; font-weight: 500; letter-spacing: .08em; line-height: 1; }
.rank-card__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 5cqw; }
.rank-card__holder { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2cqw; }
.rank-card__holder::after { content: ""; height: 1px; background: var(--av-line-strong); }
.rank-card__name { font-size: 5.2cqw; font-weight: 300; line-height: 1.2; min-height: 6.4cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-card__patch { flex: none; width: 30cqw; height: auto; aspect-ratio: 1; object-fit: contain; }
/* The card of the chosen rank: its edge brightens, and where movement is welcome it lifts 8px. Choosing itself stays instant. */
.choice[aria-checked="true"] .rank-card { box-shadow: 0 0 0 1px var(--av-ink), 0 18px 36px -16px rgba(0,0,0,.65), 0 2px 4px rgba(0,0,0,.35); }
.av-motion .choice .rank-card { transition: transform 320ms var(--av-ease), box-shadow 320ms linear; }
.av-motion .choice[aria-checked="true"] .rank-card { transform: translateY(-8px); }
.rank-card--mini .rank-card__brand .mark { width: 13cqw; }
.rank-card--mini .rank-card__rank { font-size: 9cqw; }
.rank-card--mini .rank-card__foot { justify-content: flex-end; }
.rank-card--mini .rank-card__patch { width: 44cqw; }

/* ---------- Video frame, at rest: the poster fades to Field at its foot, where the square play button and the film's title sit.
   The button is Teal, and Desert Storm (video--ink) on a page where a teal button already owns the view. The shape comes
   from --video-ratio. ---------- */
.video__frame { aspect-ratio: var(--video-ratio, 16 / 9); container-type: inline-size; }
/* Until a film has a poster of its own, its frame can hold a card of words set like a title. */
.video__card { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 7cqi 14cqi; font-weight: 300; font-size: 15.5cqi; line-height: 1.02; letter-spacing: -0.03em; }
.video__shade { position: absolute; left: 0; right: 0; bottom: 0; height: 50%; pointer-events: none; background: linear-gradient(180deg, rgba(20,19,19,0) 0%, rgba(20,19,19,.92) 100%); }
.video__bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 16px; padding: clamp(16px, 6cqi, 28px); }
.video__play { flex: none; width: 72px; height: 72px; display: grid; place-items: center; border-radius: var(--av-radius); background: var(--av-teal); }
.video__play::before { content: ""; margin-left: 4px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent var(--av-ground); }
.video--ink .video__play { background: var(--av-ink); }
.video__what { min-width: 0; }
.video__title { font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; }
.video__by { font-size: 15px; line-height: 1.4; color: var(--av-soft); }
@container (max-width: 440px) {
  .video__play { width: 56px; height: 56px; }
  .video__play::before { border-width: 9px 0 9px 15px; margin-left: 3px; }
}
/* Where a film is attached (data-film) the play control is a real button. It changes colour and never moves. */
button.video__play { padding: 0; border: 0; cursor: pointer; transition: background-color 160ms linear; }
@media (hover: hover) {
  button.video__play:hover { background: var(--av-ink); }
  .video--ink button.video__play:hover { background: var(--av-teal); }
}
.video button.video__play:active { background: var(--av-teal-press); transition: none; }

/* ---------- Video frame, playing (site.js, film frames). The film is fetched only when Play is pressed; it never starts by itself
   and never loops. The film takes the frame; at its foot a 1px track with a 3px Teal bar for how far it has run, a 44px outline
   pause button, the time, and controls named in words. When the film ends the frame goes back to its card. ---------- */
.video__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--av-field); cursor: pointer; }
.video__controls { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 14px; padding: clamp(16px, 6cqi, 28px); }
.video:not(.is-playing) .video__film, .video:not(.is-playing) .video__controls { display: none; }
.video.is-playing .video__card, .video.is-playing .video__bar, .video.is-playing .slot__fallback { display: none; }
.video.is-playing .video__shade { height: 24%; }
.video__track { position: relative; height: 1px; background: var(--av-line-strong); }
.video__done { position: absolute; left: 0; top: -1px; width: 100%; height: 3px; background: var(--av-teal); transform-origin: 0 50%; transform: scaleX(var(--done, 0)); }
.video__row { display: flex; align-items: center; gap: 16px; }
.video__pause { flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid var(--av-soft); border-radius: var(--av-radius); background: none; cursor: pointer; transition: background-color 160ms linear, border-color 160ms linear; }
.video__pause::before { content: ""; width: 11px; height: 14px; border: solid var(--av-ink); border-width: 0 3px; }
.video__pause[data-paused]::before { width: 0; height: 0; margin-left: 3px; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent var(--av-ink); }
@media (hover: hover) { .video__pause:hover { background: var(--av-surface); border-color: var(--av-ink); } }
.video__pause:active { background: var(--av-elevated); transition: none; }
.video__time { font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.video__of { color: var(--av-soft); }
.video__word { margin-left: auto; min-height: var(--av-tap); padding: 0 2px; border: 0; background: none; color: var(--av-ink); font-size: 14px; white-space: nowrap; cursor: pointer; }
.video__word:active { color: var(--av-soft); }
.video__frame:fullscreen { aspect-ratio: auto; width: 100vw; height: 100vh; }
.video__frame:fullscreen .video__film { object-fit: contain; }

/* ---------- Quote ---------- */
.quote { display: flex; flex-direction: column; gap: 28px; max-width: 980px; }
.quote__text { font-weight: 300; font-size: var(--av-h2); line-height: 1.2; letter-spacing: -0.02em; text-wrap: pretty; }
.quote__more { margin-top: 24px; font-size: var(--av-lead); font-weight: 300; line-height: 1.55; letter-spacing: 0; color: var(--av-soft); max-width: 44em; }
.quote__by { display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 1.4; }
.quote__name { font-weight: 500; }
.quote__role { color: var(--av-soft); }
/* The smaller quote on a Field panel, with Previous and Next when there is more than one. */
.quote--panel { max-width: none; padding: 32px; background: var(--av-field); }
.quote--panel .quote__text { font-size: var(--av-h3); line-height: 1.4; letter-spacing: -0.01em; }

/* Scripture: the only place Newsreader is used. */
.verse { display: flex; flex-direction: column; align-items: center; gap: 24px; max-width: 820px; margin-inline: auto; text-align: center; }
.verse__text { font-family: var(--av-verse); font-style: italic; font-size: var(--av-verse-size); line-height: 1.5; text-wrap: balance; }
.verse__ref { font-size: 15px; color: var(--av-soft); }

/* Where Drew has spoken: logos in one tone, six a row, three on a phone. */
.hosts { display: flex; flex-direction: column; gap: 28px; }
.hosts__head { font-size: 15px; font-weight: 500; }
.hosts__row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px clamp(16px, 2.2vw, 32px); }
.hosts__logo { position: relative; aspect-ratio: 5 / 2; }
.hosts__logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: grayscale(1) brightness(0) invert(.9); }
.hosts__logo--empty { display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px var(--av-line-strong); font-size: 13px; color: var(--av-soft); }
@media (max-width: 699.98px) { .hosts__row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Questions: one open at a time, a plus of two 1px bars ---------- */
.faq-section { display: flex; flex-wrap: wrap; gap: 40px clamp(40px, 8vw, 120px); }
.faq-section > h2 { flex: 1 1 280px; }
.faq { flex: 2 1 480px; min-width: 0; display: flex; flex-direction: column; border-bottom: 1px solid var(--av-line-strong); }
.faq__item { border-top: 1px solid var(--av-line-strong); }
.faq__q { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 72px; padding: 20px 0; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.4; cursor: pointer; list-style: none; }
.faq__q::-webkit-details-marker { display: none; }
@media (hover: hover) { .faq__q:hover { color: var(--av-teal); } }
.faq__q:active { color: var(--av-soft); }
.faq__q:focus-visible { outline-offset: 2px; }
.faq__plus { position: relative; flex: none; width: 14px; height: 14px; }
.faq__plus::before, .faq__plus::after { content: ""; position: absolute; background: currentColor; }
.faq__plus::before { left: 0; top: 6.5px; width: 14px; height: 1px; }
.faq__plus::after { left: 6.5px; top: 0; width: 1px; height: 14px; transition: transform 240ms var(--av-ease); }
.faq__item[open] .faq__plus::after { transform: rotate(90deg); }
.faq__a { padding: 0 48px 28px 0; font-size: 16px; line-height: 1.65; color: var(--av-soft); max-width: 46em; }
.faq__a > * + * { margin-top: 12px; }
@media (max-width: 699.98px) { .faq__a { padding-right: 0; } }
@supports (interpolate-size: allow-keywords) {
  .av-motion .faq__item { interpolate-size: allow-keywords; }
  .av-motion .faq__item::details-content { block-size: 0; overflow: clip; transition: block-size 240ms var(--av-ease), content-visibility 240ms allow-discrete; }
  .av-motion .faq__item[open]::details-content { block-size: auto; }
}

/* ---------- Long text: articles and the legal pages ---------- */
.prose { font-size: 18px; line-height: 1.7; max-width: 720px; }
.prose > * + * { margin-top: 1.2em; }
.prose h2 { margin-top: 1.6em; font-size: var(--av-h2); font-weight: 300; line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
.prose h3 { margin-top: 1.6em; font-size: var(--av-h3); font-weight: 400; line-height: 1.3; letter-spacing: -0.01em; }
.prose h2 + *, .prose h3 + * { margin-top: .8em; }
.prose ul, .prose ol { margin-bottom: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: .5em; }
.prose li { position: relative; padding-left: 28px; }
.prose ul > li::before { content: ""; position: absolute; left: 2px; top: .68em; width: 7px; height: 7px; background: var(--av-faint); }
.prose ol { counter-reset: n; }
.prose ol > li { counter-increment: n; }
.prose ol > li::before { content: counter(n) "."; position: absolute; left: 0; color: var(--av-soft); font-variant-numeric: tabular-nums; }
.prose a { text-decoration: underline; text-decoration-color: var(--av-teal); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.prose a:active { color: var(--av-soft); }
.prose blockquote { padding-left: 24px; border-left: 1px solid var(--av-faint); font-size: 22px; font-weight: 300; line-height: 1.5; }
.prose figure { margin-block: 2em; }
.prose figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--av-soft); }
.prose .standfirst { font-size: 22px; font-weight: 300; line-height: 1.5; }

/* ---------- Motion ----------
   One easing (--av-ease) and three gestures taken from the club itself: a headline rises from behind a line, a square
   fills or a line draws, and an earned object is set down. Each plays once. Everything sits under .av-motion, which the
   page head sets only when movement is welcome, so reduced motion and the screenshot tool both get the still page.
   Start states are written for the screen only (a print shows everything), and each has a way out if a script fails. */
.av-arrive { --head-wait: 620ms; }

/* Headline reveal: each line of a page's headline rises from behind a mask, 80ms apart; what follows it then fades up.
   --k orders the parts that follow, 70ms apart. On the first page of a visit it waits for the wordmark arrival to clear. */
[data-reveal-lines] .line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
[data-reveal-lines] .line > span { display: block; }
[data-reveal-after="2"] { --k: 1; } [data-reveal-after="3"] { --k: 2; } [data-reveal-after="4"] { --k: 3; }
[data-reveal-after="5"] { --k: 4; } [data-reveal-after="6"] { --k: 5; }
.av-motion [data-reveal-lines]:not(.is-split),
.av-motion [data-reveal]:not(.is-go) [data-reveal-after] { opacity: 0; animation: reveal-failsafe 1ms linear 2.4s forwards; }
.av-motion [data-reveal].is-go .line > span { animation: reveal-line 720ms var(--av-ease) calc(var(--wait, 0ms) + var(--n) * 80ms) backwards; }
.av-motion [data-reveal].is-go [data-reveal-after] { animation: reveal-rise 480ms var(--av-ease) calc(var(--wait, 0ms) + 360ms + var(--k, 0) * 70ms) backwards; }
/* Every entrance is written from its start to the element's own resting style, so nothing is left on it afterwards. */
@keyframes reveal-line { from { transform: translateY(105%); } }
@keyframes reveal-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes reveal-failsafe { to { opacity: 1; } }

/* A statement in beats: each sentence sits in its own mask. Written so the still page looks exactly like plain text. */
.beat { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 .04em .1em; margin: 0 -.04em -.1em; }
.beat > span { display: inline-block; }
.beat:nth-child(2) { --i: 1; } .beat:nth-child(3) { --i: 2; } .beat:nth-child(4) { --i: 3; }
[data-stagger] > :nth-child(2) { --i: 1; } [data-stagger] > :nth-child(3) { --i: 2; } [data-stagger] > :nth-child(4) { --i: 3; }
[data-stagger] > :nth-child(5) { --i: 4; } [data-stagger] > :nth-child(6) { --i: 5; }

@media screen {
  /* Parts marked data-in play once when they are scrolled to (site.js adds .is-in). */
  /* Beats: each sentence rises from behind its mask, 140ms apart. */
  .av-motion [data-in]:not(.is-in) .beat > span { transform: translateY(110%); }
  .av-motion [data-in].is-in .beat > span { animation: beat-rise 780ms var(--av-ease) calc(var(--i, 0) * 140ms) backwards; }

  /* A real sequence (steps, talks): its items arrive in order, 80ms apart. */
  .av-motion [data-in][data-stagger]:not(.is-in) > * { opacity: 0; }
  .av-motion [data-in][data-stagger].is-in > * { animation: set-rise 560ms var(--av-ease) calc(var(--i, 0) * 80ms) backwards; }

  /* Scripture arrives by itself, slowly, without moving. */
  .av-motion .verse[data-in]:not(.is-in) { opacity: 0; }
  .av-motion .verse[data-in].is-in { animation: fade-in 1000ms linear backwards; }

  /* The Hundred fills square by square, in day order (site.js gives each square its turn). */
  .av-motion [data-fill] .hundred__cell { transition: background-color 120ms linear, box-shadow 120ms linear; }
  .av-motion [data-fill]:not(.is-in) .hundred__cell { background-color: transparent; box-shadow: inset 0 0 0 1px var(--av-line-strong); }

  /* A state change arrives instead of appearing: a panel shown by a choice, a thank-you block, an error line. Leaving is instant,
     and so is the choice itself. site.js adds .av-live once the page has settled, so nothing that is simply there on opening plays this.
     Only whole panels (div, dl) take it: a word or a line swapped by a choice, like the billing period, changes at once. */
  .av-live :is(div, dl)[data-when], .av-live .done { transition: opacity 240ms linear, transform 360ms var(--av-ease); }
  .av-live .field__error, .av-live .form__fail, .av-live .form__errors { transition: opacity 160ms linear; }
  @starting-style {
    .av-live :is(div, dl)[data-when]:not([hidden]), .av-live .done:not([hidden]) { opacity: 0; transform: translateY(10px); }
    .av-live .field__error:not([hidden]), .av-live .form__fail:not([hidden]), .av-live .form__errors:not([hidden]) { opacity: 0; }
  }
}
@keyframes beat-rise { from { transform: translateY(110%); } }
@keyframes set-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes draw-x { from { transform: scaleX(0); } }
/* For a hairline drawn as a background (see the earn route in join.css). */
@keyframes grow-x { from { background-size: 0% 100%; } }
@keyframes grow-y { from { background-size: 100% 0%; } }
@keyframes press-on { from { opacity: 0; transform: scale(1.1); } }

/* article.css */
/* Article. One 720px column for the title, the text and the foot; the wide picture, when a post has one, runs to 1120px.
   The long-text styles (standfirst, subheadings, lists, links, quoted passage, caption) come from the shared "prose" class. */
.article { display: flex; flex-direction: column; align-items: center; padding-top: clamp(112px, 10vw, 152px); }
.article-head { width: 100%; max-width: 720px; display: flex; flex-direction: column; gap: 24px; }
.article-back { align-self: flex-start; display: inline-flex; align-items: center; min-height: var(--av-tap); font-size: 15px; color: var(--av-soft); }
@media (hover: hover) { .article-back:hover { color: var(--av-ink); } }
.article-back:active { color: var(--av-ink); }
.article-back:focus-visible { outline-offset: 2px; }
.article-meta { font-size: 15px; line-height: 1.5; color: var(--av-soft); }
.article-sample { max-width: 36em; }

.article-lead { width: 100%; max-width: 1120px; margin-top: clamp(40px, 4.4vw, 64px); display: flex; flex-direction: column; gap: 12px; }
.article-lead__slot { aspect-ratio: 3 / 2; }
.article-body { width: 100%; margin-top: clamp(40px, 4.4vw, 64px); }

/* Where this page differs from the shared prose: a quoted passage is body size with its source beneath, scripture is
   the one italic serif block, and a pull quote is set at the subheading size. */
.article-body blockquote { font-size: inherit; font-weight: inherit; line-height: inherit; }
.article-quote { padding: 4px 0 4px 24px; border-left: 1px solid var(--av-faint); }
.article-quote blockquote { padding: 0; border: 0; }
.article-quote figcaption { margin-top: 8px; font-size: 15px; }
.article-body .verse__text { padding: 0; border: 0; font-family: var(--av-verse); font-style: italic; font-weight: 400; font-size: var(--av-verse-size); line-height: 1.5; }
.article-body .verse__ref { margin-top: 0; font-size: 15px; }
.article-body .article-pull { margin-block: 1.6em; font-size: var(--av-h2); font-weight: 300; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }

/* A picture in the text: 3:2 with a plain caption. With no picture yet the brand mark stands in. */
.article-figure__slot { aspect-ratio: 3 / 2; }
.article-figure__slot .mark { width: clamp(56px, 8vw, 96px); color: var(--av-faint); }

/* The foot: who the club is, and the one teal action */
.article-foot { width: 100%; max-width: 720px; margin-top: clamp(64px, 7vw, 104px); padding-top: 32px; border-top: 1px solid var(--av-line-strong); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.article-foot__line { max-width: 18em; font-size: var(--av-h3); letter-spacing: -0.01em; line-height: 1.3; }

/* coaching.css */
/* Coaching. One teal action in view: the head's "Book a free call". Everything further down is outlined or plain.
   Hairlines: the booking frame and the questions. No movement on this page. */

/* Page head: text on the left, the portrait on the right. Below 800px the portrait stacks above the words, as designed. */
.coaching-head { display: flex; flex-wrap: wrap-reverse; align-items: flex-end; gap: 40px clamp(40px, 6vw, 96px); }
.coaching-head__text { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; padding-bottom: clamp(0px, 3vw, 48px); }
.coaching-head__text .t-lead { max-width: 28em; }
.coaching-portrait { flex: 1 1 380px; min-width: 0; max-width: 600px; margin: 0 0 0 auto; display: flex; flex-direction: column; gap: 12px; }
.coaching-portrait__frame { width: 100%; aspect-ratio: 4 / 5; }
.coaching-portrait__patch { width: 44%; }

/* Who it is for */
.coaching-for { display: flex; flex-direction: column; gap: clamp(32px, 3.3vw, 48px); }
.coaching-for__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 40px clamp(40px, 6vw, 96px); line-height: 1.15; }

/* The standing block: what Coaching is not, and what a man may ask about Drew */
.coaching-standing { background: var(--av-field); padding: clamp(28px, 5vw, 72px); display: flex; flex-wrap: wrap; gap: 40px clamp(40px, 8vw, 120px); }
.coaching-standing__lead { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.coaching-standing__lead p { max-width: 28em; }
.coaching-standing__facts { flex: 1.2 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.coaching-standing__facts > div { display: flex; flex-direction: column; gap: 8px; }
.coaching-standing__facts dd { font-size: 16px; line-height: 1.65; color: var(--av-soft); }

/* What happens: four steps, four across, two by two on a tablet, one by one on a phone */
.coaching-steps { display: flex; flex-direction: column; gap: clamp(40px, 4.4vw, 64px); }
.coaching-steps__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px 0; }
.coaching-step { display: flex; flex-direction: column; gap: 16px; padding-right: clamp(16px, 2.2vw, 32px); }
.coaching-step__rule { width: 32px; height: 1px; background: var(--av-teal); }
.coaching-step__title { font-size: clamp(20px, 1.6vw, 22px); letter-spacing: -0.01em; line-height: 1.3; }
.coaching-step__text { font-size: 15px; line-height: 1.6; color: var(--av-soft); }
@media (min-width: 700px) { .coaching-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .coaching-steps__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Proof, once a coaching testimonial exists */
.coaching-proof .quote__text { font-size: var(--av-h2); }

/* Book a free call. The page's one anchor: the head's button lands on the heading, not on the gap above it. */
.coaching-action__inner { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 48px clamp(40px, 5.55vw, 80px); }
.coaching-action__side { flex: 1 1 300px; max-width: 440px; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.coaching-facts { display: flex; flex-direction: column; gap: 24px; }
.coaching-facts > div { display: flex; flex-direction: column; gap: 6px; }
.coaching-facts dd { font-size: 16px; line-height: 1.6; color: var(--av-soft); }
.coaching-write { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.coaching-action__main { flex: 1.6 1 480px; min-width: 0; display: flex; flex-direction: column; gap: clamp(40px, 4.4vw, 56px); }

/* The call booking slot: a plain frame for a calendar we do not control. The well is light so the provider's own styling looks intended. */
.coaching-slot { display: flex; flex-direction: column; box-shadow: inset 0 0 0 1px var(--av-line-strong); }
.coaching-slot__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; padding: 20px 24px; border-bottom: 1px solid var(--av-line-strong); }
.coaching-slot__by { font-size: 14px; line-height: 1.5; color: var(--av-soft); }
.coaching-slot__well { min-height: 560px; margin: 16px; padding: 24px; display: flex; align-items: center; justify-content: center; background: var(--av-ink); color: var(--av-ground); text-align: center; font-size: 15px; line-height: 1.5; }
@media (max-width: 699.98px) { .coaching-slot__well { min-height: 460px; } }

/* The form beneath it, for the man who would rather leave a number */
.coaching-fallback { display: flex; flex-direction: column; gap: 20px; }
.coaching-fallback__head { display: flex; flex-direction: column; gap: 8px; }
.coaching-fallback__head p { line-height: 1.6; }
.coaching-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 20px; align-items: start; }
.coaching-form__wide { grid-column: 1 / -1; }
.coaching-form__submit { grid-column: 1 / -1; justify-self: start; }
.coaching-done { padding: 24px; background: var(--av-surface); }
.coaching-done .done__text { line-height: 1.6; }

/* Pass it on: one rule down the left, one size */
.coaching-pass { max-width: 720px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-left: clamp(20px, 2.2vw, 32px); border-left: 1px solid var(--av-control); }
.coaching-pass p { font-size: 16px; line-height: 1.65; }

/* Motion: the small teal rule of each step is drawn as the step arrives (shared rules: 20-components.css, Motion). */
@media screen {
  .av-motion .coaching-steps__list[data-in].is-in .coaching-step__rule { transform-origin: 0 50%; animation: draw-x 520ms var(--av-ease) calc(var(--i, 0) * 80ms + 180ms) backwards; }
}

/* home.css */
/* Home. The hero is the page's one peak: the manifesto's opening line on the gradient ground. */
.home-hero { min-height: max(100svh, 560px); display: flex; flex-direction: column; justify-content: flex-end; }
.home-hero__inner { width: 100%; max-width: var(--av-frame); margin: 0 auto; padding: clamp(120px, 14vw, 200px) var(--av-margin) clamp(48px, 7vw, 104px); display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 32px); }
.home-hero__head { max-width: 10.5em; }
.home-hero__lead { max-width: 30em; }
.home-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; padding-top: 4px; }

/* The headline reveal is shared now (20-components.css, Motion): the hero carries data-reveal like every page head. */

/* Mission: the section's one statement is the mission sentence, set a clause to a line under its heading. What Drew wrote
   straight after it follows. Beside it stands the mission film, upright. */
.home-mission { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(56px, 6.7vw, 96px); }
.home-mission__say { container-type: inline-size; }
/* Each line of the statement is one clause. On a phone the longest of them, the third, takes two lines; from tablet width up the
   type is sized against the column so that it never has to (it measures about 12.3em). */
.home-mission__say > * { font-size: clamp(26px, 8.6cqi, var(--av-h1)); }
/* The heading is the same size and colour as the statement. A hairline under it tells the two apart, not a quieter tone. */
.home-mission__say h2 { position: relative; padding-bottom: .3em; margin-bottom: .36em; }
.home-mission__say h2::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--av-line-strong); transform-origin: 0 50%; }
.home-mission__say .beat { display: block; }
.home-mission__say .beat > span { text-wrap: balance; }
.home-mission__line .beat:nth-child(1) { --i: 1; } .home-mission__line .beat:nth-child(2) { --i: 2; } .home-mission__line .beat:nth-child(3) { --i: 3; }
.home-mission__line .beat:nth-child(4) { --i: 4; } .home-mission__line .beat:nth-child(5) { --i: 5; }
.home-mission__body { container-type: inline-size; display: flex; flex-direction: column; gap: clamp(40px, 4.4vw, 64px); }
.home-mission__why { max-width: 31em; }
/* Not this, but that: the refusal in Soft, the answer in Ink, a pair to a line. Where a pair is too long for one line it breaks
   between its two halves, never inside the answer. */
.home-mission__turns { display: flex; flex-direction: column; gap: .32em; }
.home-mission__turns p { text-wrap: balance; }
.home-mission__turns span { display: inline-block; }
/* The film, and under it the one line that says where these words come from. */
.home-mission__side { display: flex; flex-direction: column; gap: 18px; width: min(100%, 360px); }
.home-mission__video { --video-ratio: 9 / 16; }
.home-mission__from { font-size: 15px; line-height: 1.55; max-width: 22em; }
@media (max-width: 699.98px) {
  /* The statement is smaller on a phone, so the pairs step down with it. */
  .home-mission__turns { font-size: 24px; }
}
@media (min-width: 700px) {
  .home-mission__say > * { font-size: min(var(--av-h1), 7.5cqi); }
}
/* Desktop: the film stands to the right of the statement and runs down beside the lines under it. */
@media (min-width: 1100px) {
  .home-mission { grid-template-columns: minmax(0, 1fr) clamp(300px, 24vw, 340px); column-gap: clamp(56px, 6.7vw, 96px); }
  .home-mission__side { grid-column: 2; grid-row: 1 / span 2; align-self: start; width: auto; padding-top: calc(var(--av-h1) * .16); }
  /* Beside the film the first pair is the widest thing in its column (19.3em), so the pairs are sized to keep it on one line. */
  .home-mission__turns { font-size: min(var(--av-h2), 4.9cqi); }
  .home-mission .verse { grid-column: 1 / -1; }
}
/* Tablet: the statement runs full width, then the film stands beside the lines under it. */
@media (min-width: 700px) and (max-width: 1099.98px) {
  .home-mission { grid-template-columns: clamp(240px, 34vw, 320px) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 56px); }
  .home-mission__say, .home-mission .verse { grid-column: 1 / -1; }
  .home-mission__side { width: auto; }
  .home-mission__body { align-self: center; }
}
@media screen {
  /* The hairline under the heading is drawn from the left as the heading rises. */
  .av-motion .home-mission__say:not(.is-in) h2::after { transform: scaleX(0); }
  .av-motion .home-mission__say.is-in h2::after { animation: draw-x 900ms var(--av-ease) 120ms backwards; }
  /* The film's frame rises into place a moment after the statement has started. */
  .av-motion .home-mission__video:not(.is-in) { opacity: 0; }
  .av-motion .home-mission__video.is-in { animation: set-rise 700ms var(--av-ease) 240ms backwards; }
}

/* Proof */
.home-proof__inner { display: flex; flex-direction: column; gap: clamp(64px, 7vw, 104px); }

/* Join the club: the one outlined panel on the page */
.home-join { position: relative; box-shadow: inset 0 0 0 1px var(--av-line-strong); padding: clamp(28px, 4.4vw, 64px); display: flex; flex-wrap: wrap; align-items: center; gap: clamp(40px, 5vw, 72px); overflow: hidden; }
.home-join::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 90% at 85% 50%, var(--av-surface) 0%, transparent 70%); }
.home-join__text { position: relative; flex: 1.3 1 360px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.home-join__text .t-lead { max-width: 30em; }
.home-join__text .t-body { max-width: 32em; }
.home-join__phone { flex: 0 1 auto; margin: 0 auto; }
.home-join__screen { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 0 12%; }

/* Coaching */
.home-coach { display: flex; flex-direction: row-reverse; flex-wrap: wrap; align-items: flex-end; gap: clamp(40px, 8.3vw, 120px); }
.home-coach__picture { flex: 1 1 360px; min-width: 0; max-width: 560px; aspect-ratio: 4 / 5; margin-left: auto; }
.home-coach__picture img { width: 44%; }
.home-coach__text { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 36px; }
.home-coach__for { display: flex; flex-direction: column; gap: 20px; }

/* Speaking */
.home-speak { display: flex; flex-direction: column; gap: clamp(40px, 4.4vw, 64px); }
.home-speak__picture { width: 100%; aspect-ratio: 16 / 9; }
.home-speak__grid { width: min(26%, 220px); gap: 4px; opacity: .9; }
.home-speak__shade { position: absolute; left: 0; right: 0; bottom: 0; height: 60%; pointer-events: none; background: linear-gradient(180deg, rgba(30,29,29,0) 0%, rgba(30,29,29,.92) 100%); }
.home-speak__head { position: absolute; left: clamp(20px, 3.3vw, 48px); right: clamp(20px, 3.3vw, 48px); bottom: clamp(20px, 3.3vw, 48px); font-size: clamp(38px, 6.1vw, 88px); }
.home-speak__row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px clamp(40px, 6vw, 96px); }
.home-speak__row > p { flex: 1 1 320px; }
.home-speak__side { flex: 1.4 1 420px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.home-speak__places { display: flex; flex-wrap: wrap; gap: 8px 28px; }
/* The stroke follows a place, so a wrapped line never starts with one. */
.home-speak__places li:not(:last-child)::after { content: "/"; margin-left: 28px; color: var(--av-faint); }
@media (max-width: 699.98px) {
  .home-speak__picture { aspect-ratio: 4 / 3; }
  .home-speak__grid { width: 34%; }
}

/* Store: the first of the page's two hairline-row sections */
.home-store { padding-top: clamp(32px, 3.3vw, 48px); border-top: 1px solid var(--av-line-strong); display: flex; flex-wrap: wrap; gap: 32px clamp(32px, 4.4vw, 64px); }
.home-store__text { flex: 1 1 260px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.home-store__text > p:first-of-type { font-size: 16px; line-height: 1.6; max-width: 320px; }
.home-store__products { flex: 3 1 520px; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.67vw, 24px); }
.home-store__product { display: flex; flex-direction: column; gap: 14px; }
.home-store__photo { aspect-ratio: 1; box-shadow: inset 0 0 0 1px var(--av-line); }
.home-store__product p { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 8px; font-size: 15px; }

/* Support the club */
.home-support { background: var(--av-surface); padding: clamp(28px, 4.4vw, 64px); display: flex; flex-direction: column; gap: clamp(32px, 3.3vw, 48px); }
.home-support__top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px clamp(40px, 6vw, 96px); }
.home-support__top h2 { flex: 1 1 300px; }
.home-support__top p { flex: 1 1 320px; max-width: 30em; }
.home-support__routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.home-support__route { flex-direction: column; align-items: flex-start; gap: 10px; min-height: 120px; padding: clamp(20px, 2.2vw, 32px); font-size: 16px; line-height: 1.55; }
.home-support__route-top { display: flex; align-items: center; gap: 12px; width: 100%; }
/* Every cell starts on the same line, so an error under one field never drops its neighbours. The button clears a label's height. */
.home-give { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px 24px; align-items: start; }
.home-give > .btn { margin-top: calc(15px * 1.3 + 10px); }
.home-give .field__input { background: var(--av-field); }
.home-give__freq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.home-give__option { justify-content: center; height: 56px; padding: 0 12px; font-size: 15px; font-weight: 500; text-align: center; }
.home-give__wide { grid-column: 1 / -1; }
.home-support__join { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; }
.home-support__join p { flex: 1 1 320px; max-width: 30em; }
.home-support__promise { font-size: 15px; line-height: 1.55; padding-top: 8px; color: var(--av-soft); }
@media (max-width: 699.98px) {
  .home-support__routes { grid-template-columns: minmax(0, 1fr); }
}

/* join.css */
/* Join Us. The ladder and the join panel are the page's one peak; the Hundred grid is the signature.
   Michroma appears twice here and nowhere else: the join-panel price and the Hundred counter. */

/* ---------- Page head ---------- */
.join-head { display: flex; flex-direction: column; gap: 20px; padding-bottom: clamp(40px, 4.4vw, 64px); }
.join-head__title { max-width: 11em; }
.join-head__line { max-width: 34em; }

/* ---------- The ladder ---------- */
.join-ranks { padding-top: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: clamp(32px, 3.3vw, 48px); }
.join-ranks__lead { max-width: 44em; }
.join-key { color: var(--av-ink); }

/* Written lowest rung first, so keys and arrows climb in order at desktop width.
   Below 1200px the rungs stack with Core on top and Prospect at the foot, directly above the join panel. */
.join-ladder { display: flex; flex-direction: column-reverse; gap: 16px; }
.join-tier { display: flex; flex-direction: column; min-width: 0; }
.join-tier__earn { align-self: flex-start; margin-top: 4px; font-size: 15px; }

.join-rung { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; width: 100%; padding: 24px; border-radius: var(--av-radius); font-size: 16px; line-height: 1.35; text-align: left; }
.join-rung--core { box-shadow: inset 0 0 0 1px var(--av-line-strong); }
.join-rung__card { position: relative; min-width: 0; }
.join-rung__card--mini { display: none; }
.join-rung__text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.join-rung__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; }
.join-rung__name { font-size: var(--av-h3); letter-spacing: -0.01em; line-height: 1.2; }
.join-rung__state { flex: none; display: flex; align-items: center; gap: 8px; }
.join-rung__chosen { display: none; font-size: 14px; font-weight: 500; }
.choice[aria-checked="true"] .join-rung__chosen { display: inline; }
.join-rung__price { font-size: 15px; line-height: 1.45; }
.join-rung__adds { font-size: 15px; line-height: 1.55; color: var(--av-soft); text-wrap: pretty; }

@media (max-width: 699.98px) {
  .join-rung { grid-template-columns: 104px minmax(0, 1fr); gap: 16px; padding: 16px; }
  .join-rung__card--full { display: none; }
  .join-rung__card--mini { display: block; }
}
@media (min-width: 1200px) {
  .join-ladder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: start; }
  .join-rung { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .join-tier--prospect { margin-top: 144px; }
  .join-tier--affiliate { margin-top: 96px; }
  .join-tier--member { margin-top: 48px; }
}

/* ---------- The join panel ---------- */
.join-panel { padding: clamp(24px, 4.4vw, 64px); background: var(--av-surface); }
.join-pane { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: clamp(32px, 5vw, 80px); align-items: start; }
.join-pane__col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.join-pane__col--end { align-self: end; }
.join-pane__text { max-width: 30em; line-height: 1.6; }
.join-terms { display: flex; flex-direction: column; gap: 14px; font-size: 16px; line-height: 1.55; }

/* Paid: the price in Michroma, then the period */
.join-pay { gap: 28px; }
/* The chosen rank's own card, then its name and price beside it. The words never give up the width of the price: where
   the two cannot share a line, in a narrow panel or with a long price, the words drop under the card. */
.join-pay__id { display: flex; flex-wrap: wrap; align-items: center; gap: 20px clamp(20px, 2.5vw, 32px); }
.join-pay__cards { flex: 0 0 clamp(144px, 11.5vw, 176px); min-width: 0; }
.join-pay__what { flex: 1 1 200px; min-width: min-content; display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 699.98px) { .join-pay__cards { flex-basis: 104px; } }
.join-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; }
.join-price__fig { font-family: var(--av-mark); font-size: var(--av-numeral); line-height: 1; letter-spacing: -0.03em; }
.join-price__per { font-size: 17px; color: var(--av-soft); }
.join-period { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.join-period__opt { flex-direction: column; align-items: flex-start; gap: 4px; min-height: 72px; padding: 14px 16px; }
.join-period__label { font-size: 15px; font-weight: 500; }
.join-period__price { font-size: 14px; color: var(--av-soft); }
.join-pay__form { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

/* Free */
.join-free__figure { font-size: var(--av-numeral); font-weight: 300; line-height: 1; letter-spacing: -0.03em; }
.join-free__text { max-width: 28em; padding-top: 12px; line-height: 1.6; }
.join-free__form { display: flex; flex-direction: column; gap: 14px; }
.join-free__form .join-terms { padding-bottom: 6px; }
.join-panel .done__head { font-size: var(--av-h2); }
.join-free__again { align-self: flex-start; font-size: 15px; }

/* ---------- Earn your rank ---------- */
.join-earn { padding-top: clamp(96px, 11vw, 160px); display: flex; flex-wrap: wrap; gap: 48px clamp(40px, 8vw, 120px); }
.join-earn__text { flex: 1 1 340px; display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.join-earn__text .t-body { max-width: 30em; }
.join-earn__text .t-small { max-width: 32em; line-height: 1.6; }
.join-route { flex: 1.4 1 480px; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.join-route__step { position: relative; display: flex; flex-direction: column; gap: 20px; padding-right: 24px; }
.join-route__mark { position: relative; z-index: 1; flex: none; width: 16px; height: 16px; background: var(--av-ground); box-shadow: inset 0 0 0 1px var(--av-ink); }
/* The line sits on a whole pixel (7px, not 7.5px): on a half pixel a hairline is smeared across two rows and all but disappears. */
.join-route__step:not(:last-child)::after { content: ""; position: absolute; left: 16px; right: 0; top: 7px; height: 1px; background: var(--av-line-strong); }
.join-route__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.join-route__fig { font-size: var(--av-h3); letter-spacing: -0.01em; line-height: 1.2; }
.join-route__then { font-size: 15px; line-height: 1.5; color: var(--av-soft); }
/* Below 700px the marks stand one above the next, on a vertical line. */
@media (max-width: 699.98px) {
  .join-route { grid-template-columns: minmax(0, 1fr); }
  .join-route__step { flex-direction: row; padding: 0 0 40px; }
  .join-route__step:last-child { padding-bottom: 0; }
  .join-route__step:not(:last-child)::after { left: 7px; right: auto; top: 16px; bottom: 0; width: 1px; height: auto; }
}

/* ---------- The manifesto. Type only, no picture of the document. The heading stands on a hairline that runs the width of the
   panel; the manifesto's own name hangs under it in the same size, with what a man needs to know beside it. It is the shape of
   the mission section on Home, which links here. ---------- */
.join-manifesto__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(48px, 8vw, 120px); align-items: start; padding: clamp(40px, 6.6vw, 96px) clamp(24px, 5.55vw, 80px); background: var(--av-field); }
.join-manifesto__head { grid-column: 1 / -1; position: relative; padding-bottom: .3em; margin-bottom: .36em; }
.join-manifesto__head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--av-line-strong); transform-origin: 0 50%; }
.join-manifesto__name { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.join-manifesto__name .beat { display: block; }
.join-manifesto__name .beat:nth-child(1) { --i: 1; } .join-manifesto__name .beat:nth-child(2) { --i: 2; }
.join-manifesto__text { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.join-manifesto__text .t-lead { max-width: 26em; }
.join-manifesto__up { align-self: flex-start; }
@media (max-width: 699.98px) {
  .join-manifesto__panel { grid-template-columns: minmax(0, 1fr); }
  .join-manifesto__text { margin-top: 32px; }
}

/* ---------- The 100 Club Challenge ---------- */
.join-challenge { --hc: 22px; --hg: 6px; display: flex; flex-direction: column; gap: clamp(56px, 6.6vw, 96px); }
.join-challenge__head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px clamp(40px, 8vw, 120px); }
.join-challenge__head h2 { flex: 1 1 340px; }
.join-challenge__head p { flex: 1 1 340px; max-width: 520px; }
@media (max-width: 699.98px) { .join-challenge { --hc: 18px; --hg: 5px; } }

.join-hundred__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; }
.join-hundred__track { justify-self: center; min-width: 0; }
.join-hundred__pin { display: flex; flex-direction: column; gap: 28px; }
.join-hundred__figs { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px 56px; }
.join-hundred__fig { display: flex; flex-direction: column; gap: 28px; width: calc(var(--hc) * 10 + var(--hg) * 9); }
.join-hundred__top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.join-hundred__count { font-family: var(--av-mark); font-size: var(--av-numeral); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.join-hundred__label { font-size: 14px; color: var(--av-soft); text-align: right; }
.join-hundred__grid { grid-template-columns: repeat(10, var(--hc)); gap: var(--hg); width: 100%; }
.join-hundred__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; font-size: 14px; color: var(--av-soft); }
.join-hundred__legend > span { display: flex; align-items: center; gap: 8px; }
.join-hundred__key { width: 12px; height: 12px; }
.join-hundred__key--done { background: var(--av-teal); }
.join-hundred__key--today { background: var(--av-teal-soft); box-shadow: inset 0 0 0 1px var(--av-teal); }
.join-hundred__key--rest { box-shadow: inset 0 0 0 1px var(--av-line-strong); }

/* The four patches of the challenge sit with the grid they are earned on: Day 25, Day 50, Day 75 and Finisher. */
.join-marks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: 100%; }
.join-mark { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.join-mark__frame { width: 100%; aspect-ratio: 1; padding: 12%; box-shadow: inset 0 0 0 1px var(--av-line-strong); }
.join-mark__frame img { width: 100%; height: 100%; object-fit: contain; }
.join-mark__name { font-size: 14px; font-weight: 500; line-height: 1.3; }

.join-rule { display: flex; flex-direction: column; gap: 36px; max-width: 520px; min-width: 0; }
.join-rule dt { font-size: var(--av-h3); letter-spacing: -0.01em; line-height: 1.25; }
.join-rule dd { margin-top: 8px; font-size: 16px; line-height: 1.6; color: var(--av-soft); }

/* Alongside the rule on desktop, the two still grids side by side. */
@media (min-width: 1200px) {
  .join-hundred__body { grid-template-columns: auto minmax(0, 520px); column-gap: clamp(48px, 8vw, 128px); align-items: start; }
  .join-hundred__track { justify-self: start; }
  .join-hundred__figs { justify-content: flex-start; }
  .join-hundred__legend { justify-content: flex-start; }
}

/* Live: movement is welcome and the script has taken over. One grid, held on screen for about 300vh and run by the scroll:
   the hundred days pass under the thumb. The still state above is the default, so without the script the page just reads
   Day 73 and Day 100 with the four patches under them.
   --hs is the side of the grid: as large as the screen allows once the counter, the patches and the key have their room.
   On a phone the patches sit in a row under the grid; from 700px they stand in a column beside it. */
.join-challenge.is-live {
  --top: calc(var(--av-nav-h) + clamp(16px, 4vh, 48px));
  --hs: clamp(180px, min(100vw - 2 * var(--av-margin), (100vh - var(--top) - var(--av-numeral) - 112px) * .8), 560px);
  --hg: calc(var(--hs) * .024);
  --hc: calc((var(--hs) - 9 * var(--hg)) / 10);
  --side: calc(var(--hc) * 10 + var(--hg) * 9);
}
@supports (height: 1svh) {
  .join-challenge.is-live { --hs: clamp(180px, min(100vw - 2 * var(--av-margin), (100svh - var(--top) - var(--av-numeral) - 112px) * .8), 560px); }
}
/* Whole pixels for a square and its gap, so every edge in the grid is sharp. */
@supports (width: round(down, 1.5px, 1px)) {
  .join-challenge.is-live { --hg: round(calc(var(--hs) * .024), 1px); --hc: round(down, calc((var(--hs) - 9 * var(--hg)) / 10), 1px); }
}
.join-challenge.is-live .join-hundred__track { height: 300vh; height: 300svh; }
.join-challenge.is-live .join-hundred__pin { position: sticky; top: var(--top); display: grid; grid-template-columns: auto; justify-content: center; gap: 20px; }
.join-challenge.is-live .join-hundred__fig--end { display: none; }
.join-challenge.is-live .join-hundred__fig { gap: 20px; }
.join-challenge.is-live .join-marks { width: var(--side); }
.join-challenge.is-live .hundred__cell { transition: background-color 120ms linear; }
@media (min-width: 700px) {
  .join-challenge.is-live {
    --mf: calc((var(--side) + var(--av-numeral) + 28px - 48px) / 4 - 28px);
    --hs: clamp(180px, min(100vw - 2 * var(--av-margin) - 180px, 100vh - var(--top) - var(--av-numeral) - 101px), 640px);
  }
  @supports (height: 1svh) {
    .join-challenge.is-live { --hs: clamp(180px, min(100vw - 2 * var(--av-margin) - 180px, 100svh - var(--top) - var(--av-numeral) - 101px), 640px); }
  }
  .join-challenge.is-live .join-hundred__pin { grid-template-columns: auto auto; gap: 28px 32px; }
  .join-challenge.is-live .join-hundred__fig { gap: 28px; }
  .join-challenge.is-live .join-marks { grid-template-columns: var(--mf); align-content: space-between; gap: 16px; width: auto; }
  .join-challenge.is-live .join-mark { gap: 8px; }
  .join-challenge.is-live .join-hundred__legend { grid-column: 1; }
}
@media (min-width: 1200px) {
  /* Beside the rule the grid is as tall as the window lets it be, up to two fifths of the window's width. */
  .join-challenge.is-live { --hs: clamp(180px, min(40vw, 100vh - var(--top) - var(--av-numeral) - 101px), 640px); }
  @supports (height: 1svh) {
    .join-challenge.is-live { --hs: clamp(180px, min(40vw, 100svh - var(--top) - var(--av-numeral) - 101px), 640px); }
  }
  .join-challenge.is-live .join-hundred__body { grid-template-columns: max-content minmax(0, 520px); column-gap: clamp(48px, 8vw, 128px); align-items: start; }
  .join-challenge.is-live .join-hundred__track { justify-self: start; }
  .join-challenge.is-live .join-hundred__pin { justify-content: start; }
  .join-challenge.is-live .join-hundred__legend { justify-content: flex-start; }
  .join-challenge.is-live .join-rule { position: sticky; top: var(--top); }
}

/* The counter is a mechanical one: each figure is a strip that rolls behind a window one figure tall. */
.join-odo { display: inline-flex; }
.join-odo__col { display: block; height: 1em; overflow: hidden; }
.join-odo__strip { display: flex; flex-direction: column; align-items: center; transform: translateY(calc(var(--at, 0) * -1em)); transition: transform 360ms var(--av-ease); }
.join-odo__strip > span { display: block; height: 1em; line-height: 1; }

/* A day is pressed in as it is done. A patch waits as a faint shape and is struck on as its day is passed; it stays. */
.join-challenge.is-live .hundred__cell.is-filled { animation: day-press 300ms var(--av-ease) backwards; }
.join-challenge.is-live .join-mark img { transition: opacity 240ms linear, filter 240ms linear; }
.join-challenge.is-live .join-mark__name { transition: color 240ms linear; }
.join-challenge.is-live .join-mark:not(.is-struck) img { opacity: .2; filter: grayscale(1); }
.join-challenge.is-live .join-mark:not(.is-struck) .join-mark__name { color: var(--av-soft); }
.join-challenge.is-live .join-mark.is-struck img { animation: mark-strike 640ms var(--av-ease) backwards; }
.join-challenge.is-live .join-mark.is-struck .join-mark__frame { animation: mark-edge 640ms linear backwards; }
@keyframes day-press { from { opacity: 0; transform: scale(1.5); } }
@keyframes mark-strike { from { opacity: .2; filter: grayscale(1); transform: scale(1.24); } }
@keyframes mark-edge { from { box-shadow: inset 0 0 0 1px var(--av-ink); } }

/* The phone and the patches */
.join-app { display: flex; flex-wrap: wrap; align-items: center; gap: 56px clamp(48px, 6vw, 96px); }
.join-app__phone { flex: none; margin: 0 auto; }
.join-app__screen { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 0 12%; text-align: center; }
.join-app__mark { width: 34%; color: var(--av-faint); }
/* The rank patches: one row of four, two by two on a phone. The patches of the challenge sit with the grid above. */
.join-patches { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: clamp(40px, 4.4vw, 56px); }
.join-patches__group { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.join-patches__name { font-size: var(--av-label); font-weight: 500; line-height: 1.3; color: var(--av-soft); }
.join-patches__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 0; }
@media (max-width: 699.98px) { .join-patches__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.join-patch { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 0 clamp(12px, 1.67vw, 24px); border-left: 1px solid var(--av-line); }
/* Order in which a row is pressed on: left to right. */
.join-patch:nth-child(2) { --n: 1; } .join-patch:nth-child(3) { --n: 2; } .join-patch:nth-child(4) { --n: 3; }
.join-patch__frame { width: 100%; max-width: 180px; aspect-ratio: 1; padding: 20%; box-shadow: inset 0 0 0 1px var(--av-line-strong); }
.join-patch__frame img { width: 100%; height: 100%; object-fit: contain; }
.join-patch figcaption { font-size: 15px; font-weight: 500; }

/* ---------- Fealor and the events ---------- */
.join-fealor__inner { display: flex; flex-direction: column; gap: clamp(56px, 6.6vw, 96px); }
.join-fealor__top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 40px clamp(40px, 6vw, 96px); }
.join-fealor__picture { flex: 1.4 1 480px; min-width: 0; aspect-ratio: 3 / 2; background: var(--av-ground); }
.join-fealor__mark { width: clamp(56px, 8vw, 112px); color: var(--av-faint); }
.join-fealor__text { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.join-events { display: flex; flex-direction: column; gap: 32px; }
.join-events__empty { padding: 28px 0; border-top: 1px solid var(--av-line-strong); border-bottom: 1px solid var(--av-line-strong); font-size: 16px; line-height: 1.5; color: var(--av-soft); }
/* The list for when the club names an event: date, name, city, who it is open to. */
.join-events__list { border-bottom: 1px solid var(--av-line-strong); }
.join-events__row { display: grid; grid-template-columns: 200px minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 6px 32px; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--av-line-strong); font-size: 15px; }
.join-events__row > :first-child, .join-events__row > :last-child { color: var(--av-soft); }
.join-events__row > :nth-child(2) { font-size: clamp(20px, 1.6vw, 22px); letter-spacing: -0.01em; }
@media (max-width: 699.98px) { .join-events__row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- How joining works ---------- */
.join-how { display: flex; flex-direction: column; gap: clamp(40px, 4.4vw, 64px); }
.join-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 40px 0; }
.join-steps__item { display: flex; flex-direction: column; gap: 16px; padding-right: clamp(16px, 2.2vw, 32px); }
.join-steps__n { font-size: 15px; font-weight: 500; color: var(--av-soft); }
.join-steps__rule { width: 32px; height: 1px; background: var(--av-teal); }
.join-steps__t { font-size: clamp(20px, 1.6vw, 22px); letter-spacing: -0.01em; line-height: 1.3; }
.join-steps__d { font-size: 15px; line-height: 1.6; color: var(--av-soft); }

/* ---------- Questions and the closing line ---------- */
.join-answer { color: var(--av-ink); }
.join-close p { max-width: 10em; }
/* The closing line is cut by word so it still wraps anywhere; the words of one sentence rise together. */
.join-close .beat:nth-child(1), .join-close .beat:nth-child(2) { --i: 0; }
.join-close .beat:nth-child(3), .join-close .beat:nth-child(4) { --i: 1; }
.join-close .beat:nth-child(5) { --i: 2; }

/* ---------- Motion on this page (the shared rules and keyframes are in 20-components.css, Motion) ---------- */
.join-tier--affiliate { --r: 1; } .join-tier--member { --r: 2; } .join-tier--core { --r: 3; }
.join-route__step:nth-child(2) { --s: 1; } .join-route__step:nth-child(3) { --s: 2; }
@media screen {
  /* The rungs arrive in rank order as the page opens, lowest first. Plain CSS, so the ladder never waits on a script. */
  .av-motion .join-tier { animation: set-rise 620ms var(--av-ease) calc(var(--head-wait, 0ms) + 380ms + var(--r, 0) * 90ms) backwards; }

  /* The earn route is drawn: a mark and its words, then the line that leads to the next mark.
     The line grows as a painted background. Checked in Chrome itself on 12 Oct 2026: it draws and stays drawn.
     Headless Chrome (tools/motion.mjs) does not show this one line in its pictures once it has been animated, whichever way
     it is drawn, so judge it in a real browser, not from those frames. */
  .av-motion .join-route[data-in]:not(.is-in) .join-route__step { opacity: 0; }
  .av-motion .join-route[data-in].is-in .join-route__mark { animation: fade-in 240ms linear calc(var(--s, 0) * 380ms) backwards; }
  .av-motion .join-route[data-in].is-in .join-route__body { animation: set-rise 520ms var(--av-ease) calc(var(--s, 0) * 380ms) backwards; }
  .av-motion .join-route[data-in].is-in .join-route__step::after { background: linear-gradient(var(--av-line-strong) 0 0) 0 0 / 100% 100% no-repeat; animation: grow-x 380ms var(--av-ease) calc(var(--s, 0) * 380ms + 120ms) backwards; }

  /* Each row of patches is pressed on, one patch at a time. */
  .av-motion .join-patches__group[data-in]:not(.is-in) .join-patch { opacity: 0; }
  .av-motion .join-patches__group[data-in].is-in .join-patch { animation: fade-in 320ms linear calc(var(--n, 0) * 90ms) backwards; }
  .av-motion .join-patches__group[data-in].is-in .join-patch img { animation: press-on 640ms var(--av-ease) calc(var(--n, 0) * 90ms) backwards; }

  /* The manifesto: the hairline under its heading is drawn while the heading and the name rise, as under "Our mission" on Home. */
  .av-motion .join-manifesto__panel:not(.is-in) .join-manifesto__head::after { transform: scaleX(0); }
  .av-motion .join-manifesto__panel.is-in .join-manifesto__head::after { animation: draw-x 900ms var(--av-ease) 120ms backwards; }

  /* The small teal rule of each step is drawn as the step arrives. */
  .av-motion .join-steps[data-in].is-in .join-steps__rule { transform-origin: 0 50%; animation: draw-x 520ms var(--av-ease) calc(var(--i, 0) * 80ms + 180ms) backwards; }
}
@media screen and (max-width: 699.98px) {
  .av-motion .join-route[data-in].is-in .join-route__step::after { animation-name: grow-y; }
}

/* The carried card. Choosing a rank with a tap or a click carries a copy of that rank's card from its rung into the join
   panel, and the page moves just far enough to show the panel. It is the same page, so the browser draws the change
   (join.js, the carried card): the old and the new picture of the page slide by the same distance, which reads as one
   scroll, while the card crosses above them and the menu bar stays where it is. Where the panel is more than a screen
   away, as on a phone, the slide is one screen: the old picture leaves as the new one arrives, with no gap between them.
   Without that support, with reduced motion, or from the keyboard, choosing is instant and nothing moves. */
.rank-card.is-copy { position: absolute; inset: 0; z-index: 1; }
.rank-card.is-carried { view-transition-name: av-card; }
::view-transition-group(av-card) { animation-duration: var(--av-move, 480ms); }
html.av-carrying::view-transition-old(root), html.av-carrying::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.av-shifting::view-transition-old(root) { animation: page-shift-out var(--av-move, 480ms) var(--av-ease) both; }
html.av-shifting::view-transition-new(root) { animation: page-shift-in var(--av-move, 480ms) var(--av-ease) both; }
@keyframes page-shift-out { to { transform: translateY(calc(-1 * var(--av-shift, 0px))); } }
@keyframes page-shift-in { from { transform: translateY(var(--av-shift, 0px)); } }

/* joining.css */
/* Joining confirmation: /join/paid/, /join/free/ and /join/failed/. One layout, three states.
   The text column on the left, the man's rank card on the right (below the text on a phone). */
.joining-head__inner { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 48px clamp(48px, 8vw, 120px); }
.joining-main { flex: 1.3 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
/* The line that says what just happened stays Ink: it is the page's news, not an explanation of a heading. */
.joining-lead { max-width: 30em; color: var(--av-ink); }
.joining-aside { flex: 1 1 320px; max-width: 460px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }

/* The rank and billing period are chosen by data-rank and data-period on the section (joining.js sets them from a short allow-list).
   Everything written for the other value is hidden. With no script the page shows Member, billed monthly. */
.joining-head[data-rank="member"] [data-rank-is="affiliate"],
.joining-head[data-rank="affiliate"] [data-rank-is="member"],
.joining-head[data-period="month"] [data-period-is="year"],
.joining-head[data-period="year"] [data-period-is="month"] { display: none; }

/* The three steps */
.joining-steps { margin: 16px 0 0; padding: 0; list-style: none; max-width: 560px; display: flex; flex-direction: column; gap: 32px; counter-reset: joining-step; }
.joining-step { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 16px; counter-increment: joining-step; }
.joining-step::before { content: counter(joining-step); padding-top: 3px; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--av-soft); font-variant-numeric: tabular-nums; }
.joining-step__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.joining-step__title { font-size: clamp(20px, 1.6vw, 22px); font-weight: 400; line-height: 1.3; letter-spacing: -0.01em; }
.joining-step__text { font-size: 15px; line-height: 1.6; color: var(--av-soft); }
.joining-stores { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 10px; }

/* Payment did not go through */
.joining-fail { display: flex; flex-direction: column; gap: 20px; }
.joining-reason { font-size: 16px; line-height: 1.6; color: var(--av-danger); }
.joining-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }

/* Motion: the card is issued. It comes last, after the three steps, set down from a slight angle (shared rules: 20-components.css, Motion).
   The page for a failed payment stays still: bad news is not performed. */
.av-motion .joining-head[data-reveal].is-go .joining-card { animation-name: card-issue; animation-duration: 860ms; }
@keyframes card-issue { from { opacity: 0; transform: translateY(28px) rotate(-3deg); } }

/* legal.css */
/* Legal pages: the contents list beside the text from 960px up (sticky), behind a 56px control below that, then the
   numbered sections in the shared "prose" style. Without the script the list simply shows open. */
.legal-head__inner { display: flex; flex-direction: column; gap: 16px; }
.legal-head__line { max-width: 720px; font-size: 15px; line-height: 1.6; color: var(--av-soft); }

.legal-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
@media (min-width: 960px) {
  .legal-layout { grid-template-columns: clamp(220px, 22vw, 280px) minmax(0, 720px); column-gap: clamp(48px, 8vw, 120px); }
  .legal-toc { position: sticky; top: calc(var(--av-nav-h) + 24px); max-height: calc(100svh - var(--av-nav-h) - 48px); overflow-y: auto; overscroll-behavior: contain; }
}

/* Contents */
.legal-toc { min-width: 0; display: flex; flex-direction: column; }
.legal-toc__head { padding-bottom: 8px; font-size: 15px; font-weight: 500; }
.legal-toc__list { display: flex; flex-direction: column; }
.legal-toc__list a { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 4px; align-items: center; min-height: var(--av-tap); padding: 4px 0; font-size: 15px; line-height: 1.4; color: var(--av-soft); }
.legal-toc__n { font-variant-numeric: tabular-nums; }
@media (hover: hover) { .legal-toc__list a:hover { color: var(--av-ink); } }
.legal-toc__list a:active { color: var(--av-ink); }
.legal-toc__list a:focus-visible { outline-offset: 2px; }
/* The control that folds the list away, added by the script */
.legal-toc__toggle { display: none; width: 100%; height: 56px; align-items: center; justify-content: space-between; padding: 0 16px; background: transparent; border: 1px solid var(--av-control); border-radius: var(--av-radius); color: var(--av-ink); font-size: 15px; font-weight: 500; text-align: left; cursor: pointer; }
.legal-toc__toggle > span + span { font-weight: 400; color: var(--av-soft); }
@media (hover: hover) { .legal-toc__toggle:hover { background: var(--av-surface); } }
.legal-toc__toggle:active { background: var(--av-elevated); }
@media (max-width: 959.98px) {
  .legal-toc--ready .legal-toc__head { display: none; }
  .legal-toc--ready .legal-toc__toggle { display: flex; }
  .legal-toc--ready .legal-toc__list { padding-top: 8px; }
  .legal-toc--ready:not(.is-open) .legal-toc__list { display: none; }
}

/* The text */
.legal-doc { min-width: 0; }
.legal-intro { font-size: var(--av-lead); font-weight: 300; line-height: 1.55; }
.legal-doc > .legal-section { margin-top: clamp(48px, 5vw, 72px); }
.legal-doc > .legal-section:first-child { margin-top: 0; }
.legal-section > * + * { margin-top: 1.2em; }
.legal-doc .legal-section__head { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 4px; margin-top: 0; font-size: var(--av-h3); font-weight: 400; line-height: 1.25; letter-spacing: -0.01em; }
.legal-section__n { color: var(--av-soft); font-variant-numeric: tabular-nums; }
.legal-doc .legal-section h3 { font-size: 18px; font-weight: 500; line-height: 1.4; letter-spacing: 0; }
.legal-doc li > * + * { margin-top: .8em; }
.legal-doc li > ul, .legal-doc li > ol { margin-top: .5em; }
.legal-doc blockquote { font-size: inherit; font-weight: inherit; line-height: inherit; }
@media (min-width: 700px) {
  .legal-section { padding-left: 44px; }
  .legal-doc .legal-section__head { margin-left: -44px; }
}

/* A table scrolls sideways inside its own box, never the page */
.legal-table { overflow-x: auto; overscroll-behavior-x: contain; }
.legal-table table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.55; }
.legal-table th, .legal-table td { min-width: 9em; padding: 14px 20px 14px 0; text-align: left; vertical-align: top; border-top: 1px solid var(--av-line-strong); }
.legal-table th { padding-top: 0; padding-bottom: 12px; border-top: 0; font-size: 15px; font-weight: 500; color: var(--av-soft); }
.legal-table tbody tr:last-child td { border-bottom: 1px solid var(--av-line-strong); }
/* On a phone the table keeps a readable width and scrolls sideways, instead of squeezing into columns a few words wide */
@media (max-width: 699.98px) { .legal-table table { min-width: 40em; } }

/* news.css */
/* News. The newest post is the page's peak, set large; older posts follow in one 880px reading column.
   Each item is one link. Opening one carries its headline and picture to the head of the article, and back again
   (10-base.css, Page changes); nothing on this page moves by itself. */
.news-empty { min-height: 40vh; }
.news-empty__line { max-width: 30em; }

/* The newest post: a picture when it has one, and the date, title and one line beside it. */
.news-lead__link { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 32px clamp(40px, 5.55vw, 80px); min-height: var(--av-tap); color: var(--av-ink); border-radius: var(--av-radius); }
.news-lead__link:focus-visible { outline-offset: 8px; }
.news-lead__pic { flex: 1.4 1 480px; min-width: 0; aspect-ratio: 3 / 2; }
.news-lead__text { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.news-lead__date { font-size: 15px; line-height: 1.4; color: var(--av-soft); }
.news-lead__title { font-size: var(--av-display); font-weight: 300; line-height: 1; letter-spacing: -0.03em; }
.news-lead__link--image .news-lead__title { font-size: var(--av-h1); }
.news-lead__summary { max-width: 28em; font-size: var(--av-lead); font-weight: 300; line-height: 1.5; color: var(--av-soft); }
@media (hover: hover) {
  .news-lead__link:hover { color: var(--av-ink); }
  .news-lead__link:hover .news-lead__title { color: var(--av-teal); }
}
.news-lead__link:active { opacity: .85; }

/* Older posts: one column, a picture 200px wide beside the words when the post has one. The whole row is the link. */
.news-older { padding-top: clamp(96px, 11vw, 160px); }
.news-older__list { max-width: 880px; display: flex; flex-direction: column; gap: clamp(40px, 4.4vw, 56px); }
.news-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 32px; align-items: start; min-height: var(--av-tap); padding: 16px; margin: -16px; color: var(--av-ink); border-radius: var(--av-radius); transition: background-color 160ms linear; }
.news-item:focus-visible { outline-offset: 2px; }
.news-item__text { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.news-item__date { font-size: 14px; line-height: 1.4; color: var(--av-soft); }
.news-item__title { font-size: var(--av-h3); font-weight: 400; line-height: 1.25; letter-spacing: -0.01em; }
.news-item__summary { font-size: 16px; line-height: 1.6; color: var(--av-soft); }
.news-item__pic { aspect-ratio: 3 / 2; }
@media (max-width: 699.98px) {
  .news-item__pic { order: -1; }
}
@media (min-width: 700px) {
  .news-item--image { grid-template-columns: minmax(0, 1fr) 200px; }
}
@media (hover: hover) {
  .news-item:hover { background: var(--av-surface); color: var(--av-ink); }
}
.news-item:active { background: var(--av-elevated); transition: none; }

/* notfound.css */
/* 404: a plain head, one sentence and four plain links. No picture, no button. */
.notfound-head__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.notfound-head__inner .t-lead { max-width: 30em; }
.notfound-links { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.notfound-links .link { font-size: var(--av-h3); letter-spacing: -0.01em; }

/* speaking.css */
/* Speaking. The page's peak is the clip of Drew speaking; until it exists the slot stands on the small Hundred grid.
   Two hairline-row sections only: the host panel and the questions. No scroll-reveal on this page. */

/* Page head: the shared head, with room beneath it and the actions in a row */
.speaking-head__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; padding-bottom: clamp(48px, 5vw, 72px); }
.speaking-head__title { max-width: 12em; }
.speaking-head__lead { max-width: 32em; }
.speaking-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }

/* Organiser sorter: four square choices, then the three facts for the one chosen */
.speaking-sorter { padding-top: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 28px; }
.speaking-sorter__options { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.speaking-sorter__option { min-height: 72px; justify-content: space-between; }
.speaking-sorter__result { display: flex; flex-direction: column; }
.speaking-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 24px clamp(24px, 3.3vw, 48px); }
.speaking-facts__item { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.speaking-facts__item dt { font-size: 15px; line-height: 1.4; color: var(--av-soft); }
@media (min-width: 560px) { .speaking-sorter__options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .speaking-sorter__options { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* The clip: a 16:9 slot. The note sits bottom left where the Watch control will go. */
.speaking-clip { padding-top: clamp(72px, 8vw, 128px); }
.speaking-clip__figure { display: flex; flex-direction: column; gap: 14px; }
.speaking-clip__slot { width: 100%; aspect-ratio: 16 / 9; }
.speaking-clip__mark { width: clamp(56px, 8vw, 112px); color: var(--av-faint); }
.speaking-clip__shade { position: absolute; left: 0; right: 0; bottom: 0; height: 28%; pointer-events: none; background: linear-gradient(180deg, transparent 0%, var(--av-field) 100%); }
.speaking-clip__note { position: absolute; left: clamp(16px, 2.8vw, 40px); right: clamp(16px, 2.8vw, 40px); bottom: clamp(16px, 2.4vw, 36px); font-size: 15px; line-height: 1.4; color: var(--av-soft); }

/* Talks */
.speaking-talks { display: flex; flex-wrap: wrap; gap: 40px clamp(40px, 8vw, 120px); }
.speaking-talks__head { flex: 1 1 260px; }
.speaking-talks__list { flex: 2 1 520px; min-width: 0; display: flex; flex-direction: column; gap: clamp(40px, 4.4vw, 64px); }
.speaking-talk { display: flex; flex-direction: column; gap: 12px; }
.speaking-talk__meta { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 15px; line-height: 1.5; }
.speaking-talk__line { max-width: 36em; font-size: 16px; line-height: 1.6; }

/* Proof: one long quote, set at the size of a panel quote, then the host logos (the shared band) */
.speaking-proof__inner { display: flex; flex-direction: column; gap: clamp(64px, 7vw, 104px); }
.speaking-proof__text { font-size: var(--av-h3); line-height: 1.45; letter-spacing: -0.01em; }

/* Host panel: the first of the page's two hairline-row sections */
.speaking-host { display: flex; flex-wrap: wrap; gap: 40px clamp(40px, 8vw, 120px); }
.speaking-host__head { flex: 1 1 260px; }
.speaking-host__list { flex: 2 1 520px; min-width: 0; border-bottom: 1px solid var(--av-line-strong); }
.speaking-host__row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 8px 32px; padding: 24px 0; border-top: 1px solid var(--av-line-strong); }
.speaking-host__row dt { font-size: 16px; font-weight: 500; line-height: 1.6; }
.speaking-host__row dd { font-size: 16px; line-height: 1.6; color: var(--av-soft); min-width: 0; }
@media (max-width: 699.98px) { .speaking-host__row { grid-template-columns: minmax(0, 1fr); } }

/* Enquiry: the form, with the speaker kit panel beside it */
.speaking-enquiry__layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 56px clamp(40px, 5.55vw, 80px); }
.speaking-enquiry__main { flex: 1.7 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 36px; }
.speaking-enquiry__intro { display: flex; flex-direction: column; gap: 14px; }
.speaking-enquiry__intro p { max-width: 34em; font-size: 16px; line-height: 1.6; }
.speaking-form { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; }
.speaking-form > * { max-width: 100%; }
.speaking-form > .form__errors, .speaking-form > .speaking-group { align-self: stretch; }
.speaking-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.speaking-group__legend { padding: 0 0 20px; }
.speaking-group__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.speaking-field--wide { grid-column: 1 / -1; }
@media (max-width: 599.98px) { .speaking-group__fields { grid-template-columns: minmax(0, 1fr); } }
.speaking-done { padding: clamp(24px, 3.3vw, 40px); background: var(--av-surface); }
.speaking-kit { flex: 1 1 300px; max-width: 420px; min-width: 0; padding: clamp(24px, 2.8vw, 40px); background: var(--av-surface); display: flex; flex-direction: column; gap: 24px; }
.speaking-kit__top { display: flex; flex-direction: column; gap: 6px; }
.speaking-kit__list { display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 1.45; color: var(--av-soft); }
.speaking-kit__list li { position: relative; padding-left: 18px; }
.speaking-kit__list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; background: var(--av-faint); }