/* Road Trip Cruisers - components */

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 26px;
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: "wdth" 100;
  font-size: 1.0625rem;
  line-height: 1.1;
  white-space: nowrap;
  text-decoration: none;
  border-radius: 4px;
  border: 0;
  cursor: pointer;
  transition: background-color 0.15s ease-out;
}
.btn--book { background: var(--crimson); color: var(--on-crimson); }
.btn--book:hover { background: var(--crimson-hover); }

.text-link {
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: "wdth" 100;
  font-size: 1.0625rem;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  white-space: nowrap;
}
.on-basalt .text-link:hover, .on-laterite .text-link:hover { text-decoration-color: var(--ochre); }
.on-cream .text-link:hover { text-decoration-color: var(--crimson); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 28px; }

/* ---------- Header and navigation (the engine's nav component drives it) ---------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--basalt);
  color: var(--on-basalt);
  --focus: var(--ochre);
}
.site-head[data-se-nav-scrolled] { background: var(--basalt); box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 8px 20px rgba(0,0,0,0.16); }
.site-head__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-h);
}
.brand { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; min-height: 48px; text-decoration: none; }
.brand img { height: var(--logo-h); width: auto; max-width: 100%; }

.nav-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  min-width: 48px;
  padding: 0 4px 0 12px;
  background: transparent;
  color: var(--cream);
  border: 0;
  font: 700 1rem/1 var(--font-display);
  cursor: pointer;
  position: relative;
  z-index: 2;
}
.nav-toggle__bars { display: inline-flex; flex-direction: column; gap: 5px; width: 26px; }
.nav-toggle__bars span { display: block; height: 3px; background: currentColor; border-radius: 1px; transition: transform 0.18s ease-out, opacity 0.18s ease-out; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.site-nav { display: flex; align-items: center; gap: 4px 18px; flex-wrap: nowrap; }
.site-nav a {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "wdth" 86;
  font-size: 0.9375rem;
  color: var(--cream);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
}
.site-nav a:hover { text-decoration: underline; text-decoration-color: var(--ochre); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.site-nav a[aria-current="page"] { color: var(--ochre); }

/* The open menu below the breakpoint (the component sets the mode and the open state) */
.site-nav[data-se-nav-mode="overlay"] {
  background: var(--basalt);
  padding: calc(var(--header-h) + 8px) var(--gutter) 40px;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 0;
}
.site-nav[data-se-nav-mode="overlay"] a {
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  font-weight: 800;
  font-variation-settings: "wdth" 100;
  min-height: 52px;
}

/* Memberships: one menu entry holding Become a Member and Membership Rules (the component opens and closes it) */
.nav-group { position: relative; display: flex; align-items: center; }
.nav-sub {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "wdth" 86;
  font-size: 0.9375rem;
  color: var(--cream);
  background: transparent;
  border: 0;
  padding: 0 4px 0 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  cursor: pointer;
}
.nav-sub:hover { text-decoration: underline; text-decoration-color: var(--ochre); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.nav-sub.is-current { color: var(--ochre); }
.nav-sub__caret { width: 0.42em; height: 0.42em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-25%) rotate(45deg); transition: transform 0.18s ease-out; }
.nav-sub[aria-expanded="true"] .nav-sub__caret { transform: translateY(20%) rotate(-135deg); }
.nav-submenu { list-style: none; margin: 0; padding: 6px 0; position: absolute; top: 100%; left: -18px; min-width: max-content; background: var(--basalt); box-shadow: 0 8px 20px rgba(0,0,0,0.28); z-index: 2; }
.nav-submenu a { padding: 0 18px; width: 100%; }
@media (scripting: none) {
  .nav-submenu { position: static; display: flex; gap: 18px; padding: 0 0 0 18px; box-shadow: none; }
  .nav-submenu a { padding: 0; }
}
.site-nav[data-se-nav-mode="overlay"] .nav-group { flex-direction: column; align-items: flex-start; }
.site-nav[data-se-nav-mode="overlay"] .nav-sub {
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  font-weight: 800;
  font-variation-settings: "wdth" 100;
  min-height: 52px;
  gap: 14px;
}
.site-nav[data-se-nav-mode="overlay"] .nav-submenu { position: static; padding: 0 0 8px 20px; box-shadow: none; background: transparent; }
.site-nav[data-se-nav-mode="overlay"] .nav-submenu a { padding: 0; font-size: clamp(1.25rem, 1.05rem + 1vw, 1.5rem); font-weight: 700; min-height: 48px; }

/* ---------- Page head (inner pages) ---------- */
.page-head { padding-top: clamp(32px, 3.6vw, 56px); padding-bottom: clamp(32px, 3vw, 44px); }
/* The title is sized so its longest single word fits the column (never hyphenated, never cut).
 * --fit is that word's width in em at wdth 125 plus a margin: 6.5 covers "Upcoming" and every shorter
 * title; a page with a longer word sets its own on the h1 ("Membership" 7.95, "Commandments" 10.6).
 * --fit-wide, from 1100px, is the whole title's width, so a title that should hold one line can ask for it.
 * On a phone a title whose word would land smaller than the headings under it may set --wdth-phone
 * (Archivo's own width axis) with the matching --fit-phone, so it keeps its size by running narrower.
 * From 760px the 20px allows for a desktop scrollbar, which 100vw includes. */
.page-head__title {
  --fit-now: var(--fit-phone, var(--fit, 6.5));
  font-size: min(var(--step-hero), calc((100vw - 2 * var(--gutter)) / var(--fit-now)));
  font-weight: 900; font-variation-settings: "wdth" var(--wdth-phone, 125); letter-spacing: -0.03em; line-height: 0.96;
}
@media (min-width: 760px) {
  .page-head__title { --fit-now: var(--fit, 6.5); font-variation-settings: "wdth" 125; font-size: min(var(--step-hero), calc((100vw - 2 * var(--gutter) - 20px) / var(--fit-now))); }
}
@media (min-width: 1100px) {
  .page-head__title { --fit-now: var(--fit-wide, var(--fit, 6.5)); font-size: min(var(--step-hero), calc((min(100vw, var(--content) + 2 * var(--gutter)) - 2 * var(--gutter) - 20px) / var(--fit-now))); }
}
/* the room straight after an inner page's head starts closer to it, so the first content is on the first screen */
@media (min-width: 1100px) {
  [data-inky-section="page-title"] + .section { padding-top: clamp(40px, 3.6vw, 56px); }
}
/* a page head with her lede and actions sets them side by side from 1100px, so the head uses the width
 * and the first content comes up */
@media (min-width: 1100px) {
  .page-head:has(> .page-head__lede):has(> .actions) { display: grid; grid-template-columns: minmax(0, 60ch) auto; column-gap: 64px; align-items: start; justify-content: space-between; }
  .page-head:has(> .page-head__lede):has(> .actions) > .page-head__title { grid-column: 1 / -1; }
  .page-head:has(> .page-head__lede):has(> .actions) > .actions { margin-top: 20px; justify-content: flex-end; }
}
.page-head__line { margin-top: 16px; font-family: var(--font-display); font-weight: 700; font-variation-settings: "wdth" 100; font-size: var(--step-2); color: var(--ochre); }
.page-head__line .keep { white-space: nowrap; }
.page-head__lede { margin-top: 20px; font-size: var(--step-1); line-height: 1.45; max-width: 52ch; }
.page-head__list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 4px; font-family: var(--font-display); font-weight: 700; font-variation-settings: "wdth" 100; font-size: 1.0625rem; color: var(--on-basalt-muted); }
.on-laterite .page-head__line { color: var(--cream); }

/* ---------- Hero (home) ---------- */
.hero { position: relative; background: var(--basalt); color: var(--cream); }
.hero__media { position: relative; max-width: var(--photo-cap); margin-inline: auto; }
.hero__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: cover;
  /* the convoy sits in the left half: anchored left, all four cars stay in a phone's 4:5 */
  object-position: 0% 55%;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(31,27,23,0.78) 0%, rgba(31,27,23,0.52) 34%, rgba(31,27,23,0) 62%);
  pointer-events: none;
}
/* On a phone the headline's last line reaches the white lead SUV's roof, so the scrim holds longer there
 * and a soft shadow sits under the type; the photograph itself is untouched */
@media (max-width: 759px) {
  .hero__media::after { background: linear-gradient(to bottom, rgba(31,27,23,0.80) 0%, rgba(31,27,23,0.64) 36%, rgba(31,27,23,0.5) 50%, rgba(31,27,23,0.18) 64%, rgba(31,27,23,0) 76%); }
  .hero__title { text-shadow: 0 1px 2px rgba(20,17,14,0.45), 0 2px 20px rgba(20,17,14,0.55); }
  /* four lines on every phone: "The Road" (about 6em wide) always fits the column, so a narrow phone never
   * drops "Road" to a fifth line and pushes "Mumbai" down onto the cars */
  .hero .hero__title { font-size: min(var(--step-hero), calc((100vw - 2 * var(--gutter)) / 6.2)); }
}
.hero__copy { position: absolute; inset: 0 0 auto 0; z-index: 1; padding-top: clamp(20px, 4vw, 64px); }
.hero__title {
  font-size: var(--step-hero);
  font-weight: 900;
  font-variation-settings: "wdth" 125;
  letter-spacing: -0.03em;
  line-height: 0.96;
  color: #fff;
  text-wrap: balance;
}
@media (min-width: 760px) {
  .hero__media img {
    aspect-ratio: auto;
    height: min(calc(100svh - var(--header-h) - 64px), 60vw, 860px);
    min-height: 420px;
    object-position: 50% 42%;
  }
}
@media (min-width: 1281px) {
  /* past the photograph's own width the basalt ground carries the stage; the headline keeps the column */
  .hero__copy { max-width: calc(var(--content) + 2 * var(--gutter)); }
}

/* ---------- The season board ---------- */
.board { padding-bottom: var(--section); }
.board__head { padding-top: var(--section); margin-bottom: 28px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; }
.board__title { font-size: var(--step-4); letter-spacing: -0.02em; }
.board__line { font-family: var(--font-display); font-weight: 700; font-variation-settings: "wdth" 100; font-size: var(--step-1); color: var(--ochre); }
.board__foot { margin-top: 28px; }

.drives { list-style: none; margin: 0; padding: 0; container-type: inline-size; container-name: board; }

.season {
  padding: 28px 0 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: "wdth" 112;
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--on-basalt-muted);
}
.season__name { font: inherit; letter-spacing: inherit; }

.drive {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 20px 20px 22px;
  background: var(--basalt-2);
  margin-bottom: 4px;
}
.drive p + p, .drive__main p { margin-top: 0; }
.drive__date { font-family: var(--font-display); line-height: 1; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.drive__flag { display: none; flex-basis: 100%; font-weight: 800; font-variation-settings: "wdth" 112; font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px; }
.drive--next .drive__flag { display: block; }
.drive__month { font-weight: 700; font-variation-settings: "wdth" 100; font-size: 1.0625rem; letter-spacing: 0.01em; }
.drive__days {
  font-weight: 900;
  font-variation-settings: "wdth" 72;
  font-size: clamp(2.75rem, 2.2rem + 1.6vw, 3.5rem);
  letter-spacing: -0.02em;
  word-spacing: 0.12em;
  font-variant-numeric: lining-nums;
  line-height: 0.95;
}
.drive__name { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); font-weight: 800; font-variation-settings: "wdth" 100; letter-spacing: -0.01em; }
.drive__name a { text-decoration: none; }
.drive__name a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.drive__tag { color: var(--ochre); font-weight: 600; }
.drive__place, .drive__captain { font-size: 1.0625rem; }
.drive__captain { color: var(--on-basalt-muted); }
.drive__act { margin-top: 10px; display: flex; align-items: center; }
.drive__past, .drive__memory { display: none; font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; letter-spacing: 0.06em; text-transform: uppercase; }
.drive__memory { min-height: 48px; align-items: center; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em; color: inherit; }
.drive__book { display: inline-flex; }
.drive__book--quiet { color: var(--cream); }

/* the next drive: the only ochre row */
.drive--next { background: var(--ochre); color: var(--on-ochre); --focus: var(--ink); }
.drive--next .drive__tag, .drive--next .drive__captain { color: var(--on-ochre); }
.drive--next .drive__book { width: 100%; }

/* past drives stay in the board, muted, with no claim about how they went */
.drive--past { background: transparent; color: var(--on-basalt-muted); }
.drive--past .drive__tag, .drive--past .drive__captain { color: var(--on-basalt-muted); }
.drive--past .drive__days { font-weight: 800; }
.drive--past .drive__book { display: none; }
.drive--past .drive__past { display: inline; }
.drive--past .drive__memory { display: inline-flex; }
.drive--past:has(.drive__memory) .drive__past { display: none; }

@container board (min-width: 820px) {
  .drive {
    grid-template-columns: minmax(190px, 1.5fr) 3.6fr 2.8fr minmax(190px, auto);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 28px;
    padding: 18px 28px;
  }
  .drive__date { flex-direction: column; align-items: flex-start; gap: 4px; grid-column: 1; grid-row: 1 / 3; }
  .drive__main { grid-column: 2; grid-row: 1 / 3; }
  .drive__place { grid-column: 3; grid-row: 1 / 3; align-self: center; }
  .drive__captain { grid-column: 3; grid-row: 2; align-self: start; }
  .drive:has(.drive__captain) .drive__place { grid-row: 1; align-self: end; }
  .drive__act { margin-top: 0; justify-self: end; grid-column: 4; grid-row: 1 / 3; }

  /* the next drive reads as one group: date, then name, tag and place together, then the button */
  .drive--next {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    column-gap: clamp(28px, 3vw, 48px);
    padding-block: 26px;
  }
  .drive--next .drive__date { grid-column: 1; grid-row: 1 / 4; }
  .drive--next .drive__main { grid-column: 2; grid-row: 1; align-self: end; }
  .drive--next .drive__place, .drive--next:has(.drive__captain) .drive__place { grid-column: 2; grid-row: 2; align-self: start; font-weight: 700; margin-top: 4px; }
  .drive--next .drive__captain { grid-column: 2; grid-row: 3; }
  .drive--next .drive__act { grid-column: 3; grid-row: 1 / 4; }
  .drive--next .drive__book { width: auto; }
  .drive--next .drive__days { font-size: clamp(3.25rem, 2.6rem + 1.8vw, 4.25rem); }
  .drive--next .drive__name { font-size: clamp(1.625rem, 1.3rem + 0.8vw, 2.125rem); }
}

/* Home: the next drive straddles the photograph's bottom edge; only the next few drives show */
.board--home .drive--next { position: relative; z-index: 2; margin-top: -48px; box-shadow: 0 2px 4px rgba(0,0,0,0.12), 0 12px 32px rgba(0,0,0,0.28); }
@media (min-width: 760px) { .board--home .drive--next { margin-top: -72px; } }
/* Large screens (brief): from 1680px the next drive's row is ochre edge to edge, its content still on the
 * 1280 column; the photograph above stays at its own width and sits on the ochre band */
@media (min-width: 1680px) {
  .board--home .drive--next { box-shadow: 0 0 0 100vmax var(--ochre); clip-path: inset(0 -100vmax); }
}
.board--home .drive--past, .board--home .drive--current, .board--home .drive--later, .board--home .season--empty { display: none; }

/* Upcoming page: the board's rows run edge to edge */
.board--full .board__shell .drives { container-type: normal; }
.board--full .board__shell .drive, .board--full .board__shell .season { padding-inline: max(var(--gutter), calc((100% - var(--content)) / 2)); }
.board--full .board__shell .drive { margin-bottom: 0; background: var(--basalt-2); }
.board--full .board__shell .drive:nth-of-type(odd) { background: var(--basalt-3); }
.board--full .board__shell .drive--past { background: transparent; }
.board--full .board__shell { container-type: inline-size; container-name: board; }
.board--full .board__lead .drives { container-type: inline-size; container-name: board; }
.board--full .board__head { padding-top: 40px; }

/* ---------- Welcome ---------- */
.welcome__grid { display: grid; gap: 24px 64px; align-items: start; }
.welcome__title { font-size: var(--step-4); letter-spacing: -0.02em; }
.welcome__body { font-size: 1.1875rem; max-width: var(--measure); }
.signoff {
  margin-top: 28px;
  font-family: var(--font-display);
  font-weight: 900;
  font-variation-settings: "wdth" 110;
  font-size: var(--step-3);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--laterite);
}
@media (min-width: 900px) { .welcome__grid { grid-template-columns: 5fr 7fr; } }

/* ---------- Section heads with a link ---------- */
.strip-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; margin-bottom: 28px; }
.past .strip-head { padding-top: var(--section); }

/* ---------- Past drives strip (home) ---------- */
/* Each photo whole, at its own shape: it takes width in proportion to its shape, so a row shares one height and
 * nothing is cropped. On each <picture>: --a is the photo's width / height, --pair the sum of --a across its
 * pair on a phone (two to a row). Swap a photo here and update both. */
.strip { display: flex; flex-wrap: wrap; }
.strip picture { display: block; flex: var(--a) 1 calc(100% * var(--a) / var(--pair) - 1px); min-width: 0; }
.strip img { width: 100%; height: auto; }
@media (min-width: 900px) { .strip { flex-wrap: nowrap; } .strip picture { flex: var(--a) 1 0; } }

/* ---------- Captains (home) ---------- */
.captains { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
/* square portraits: most of her Captains' photos are landscape, and 4:5 cut the people and their cars */
.captain img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; }
.captain__name { margin-top: 10px; font-family: var(--font-display); font-weight: 800; font-variation-settings: "wdth" 92; font-size: 1.125rem; }
@media (min-width: 640px) { .captains { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .captains { grid-template-columns: repeat(7, 1fr); } }

/* ---------- Press (home): one row of the publications' own logos ----------
 * Each logo is the outlet's official file (sources: .crawl/press-logos.md), shown in one colour by filter
 * so the mastheads read as one row. --press-h is the shared height; --s on each logo evens out optical
 * size (very wide wordmarks sit lower, boxed and two-line marks taller). */
.press-strip { background: var(--cream-2); }
.press-strip .strip-head { margin-bottom: 16px; }
.press-logos { --press-h: 24px; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 24px; }
.press-logos a { display: flex; align-items: center; min-height: 48px; text-decoration: none; transition: opacity 0.15s ease-out; }
.press-logos__logo { display: block; height: calc(var(--press-h) * var(--s, 1)); width: auto; max-width: 100%; filter: brightness(0) invert(0.11) sepia(0.6) saturate(1.2) hue-rotate(-5deg); /* ink */ }
.press-logos__logo-name { font-family: var(--font-display); font-weight: 800; font-variation-settings: "wdth" 112; font-size: calc(var(--press-h) * 0.72); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; color: var(--ink); }
.press-logos a:hover { opacity: 0.7; }
@media (min-width: 760px) { .press-logos { --press-h: 30px; gap: 8px 48px; } }

/* ---------- Book your space / contact ---------- */
.book__grid { display: grid; gap: 40px 64px; align-items: start; }
/* From 960px the heading, her lede and her routes (WhatsApp, email) share the left column and the form
 * takes the right, so neither column stands half empty beside the other */
@media (min-width: 960px) {
  .book__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; row-gap: 32px; }
  .book__grid > div:first-child { display: contents; }
  .book__grid .section__head { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .book__grid .form-slot { grid-column: 2; grid-row: 1 / span 2; }
  .book__grid > .routes { grid-column: 1; grid-row: 2; }
}
.routes { display: grid; gap: 10px; align-content: start; }
.routes h3 { font-size: var(--step-2); }
.routes h3 + p { margin-top: 6px; }
.routes .actions { margin-top: 8px; }
/* Her routes sit straight under the intro and stay there: a sticky block here slid down the tall
   form's column as the page scrolled, landing at the bottom of the band with a gap of cream above it. */
@media (min-width: 960px) { .routes { padding-top: 8px; } }
.routes__block + .routes__block { margin-top: 28px; }
.routes__block p { margin-top: 8px; }

/* The generated form (build-contact-form), drawn in the direction. */
.form-slot { display: grid; gap: 18px; max-width: 760px; }
.form-slot .cf-form { display: grid; gap: 18px; }
.form-slot .cf-field, .form-slot .cf-form > p { margin: 0; }
.form-slot .cf-field { display: grid; gap: 6px; }
.cf-label { font-family: var(--font-display); font-weight: 700; font-variation-settings: "wdth" 100; font-size: 1rem; }
.cf-input, .cf-textarea {
  font: inherit;
  font-size: 1.0625rem;
  color: var(--ink);
  background: #fff;
  border: 2px solid color-mix(in oklab, var(--ink) 50%, var(--cream));
  border-radius: 4px;
  min-height: 52px;
  padding: 10px 14px;
  width: 100%;
  opacity: 1;
}
.cf-textarea { min-height: 140px; resize: vertical; }
.cf-input:focus, .cf-textarea:focus { border-color: var(--ink); outline: 3px solid var(--ochre); outline-offset: 0; }
select.cf-input { appearance: auto; }
.cf-submit {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 12px 30px;
  font-family: var(--font-display); font-weight: 800; font-variation-settings: "wdth" 100; font-size: 1.0625rem;
  background: var(--crimson); color: var(--on-crimson); border: 0; border-radius: 4px; cursor: pointer; white-space: nowrap;
  transition: background-color 0.15s ease-out;
}
.cf-submit:hover { background: var(--crimson-hover); }
.cf-submit[disabled] { opacity: 0.7; cursor: progress; }
.cf-status { font-size: 1.0625rem; }
.cf-status:not(:empty) { padding: 14px 16px; background: var(--cream-2); border-radius: 4px; }
.cf-status a { color: var(--crimson); font-weight: 700; }

/* touch: her own Commandment line, shown only when a visitor picks First-timer (no script) */
.first-timer {
  display: none;
  margin: -6px 0 0;
  padding: 12px 16px;
  background: var(--ochre);
  color: var(--on-ochre);
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: "wdth" 100;
  font-size: 1.0625rem;
  border-radius: 4px;
}
.form-slot:has(#cf-qualifier2 option:nth-child(3):checked) .first-timer { display: block; }

/* ---------- Join room ---------- */
.join { padding-top: 0; }
.join-photo { max-width: var(--photo-cap); margin-inline: auto; }
/* the club photo (img-073): a band tall enough for everyone head to shoe, anchored at the grass (its object-position is on the img) */
.join-photo img { width: 100%; height: auto; aspect-ratio: 16 / 9; min-height: 260px; object-fit: cover; }
.join__body { padding-top: var(--section); }
.join__grid { display: grid; gap: 36px 64px; }
@media (min-width: 960px) { .join__grid { grid-template-columns: 6fr 6fr; align-items: start; } }
.join__title { font-size: var(--step-4); letter-spacing: -0.02em; }
.join__lede { margin-top: 16px; font-size: var(--step-1); line-height: 1.45; max-width: 40ch; }
.fees { background: var(--cream); color: var(--ink); padding: clamp(24px, 3vw, 40px); border-radius: 4px; --focus: var(--crimson); }
.fees__row + .fees__row { margin-top: 22px; }
.fees__amount { display: block; font-family: var(--font-display); font-weight: 900; font-variation-settings: "wdth" 80; font-size: var(--step-4); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: lining-nums; }
.fees__gst { display: inline-block; font-weight: 700; font-variation-settings: "wdth" 100; font-size: 1rem; letter-spacing: 0; vertical-align: 0.35em; }
.fees__label { display: block; margin-top: 4px; font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; }
.fees__note { margin-top: 6px; color: var(--on-cream-muted); }
.fees .actions { margin-top: 28px; }
/* Join block: heading and lede, then Become a Member. Cream button, because crimson barely shows on laterite. */
.join__actions { margin-top: 0; }
.join .btn--book { background: var(--cream); color: var(--crimson); }
.join .btn--book:hover, .join .btn--book:focus-visible { background: var(--cream-2); }
.join .btn--book:active { background: color-mix(in oklab, var(--cream-2) 85%, var(--ochre)); }
@media (min-width: 960px) { .join__grid { align-items: end; } .join__actions { justify-content: flex-end; } }

/* ---------- Footer ---------- */
.site-foot { background: var(--laterite-deep); color: #fff; --focus: var(--cream); padding-block: 56px 40px; }
.site-foot__grid { display: grid; gap: 32px 48px; }
/* Brand, then three link columns (Media, Join Us, Get in Touch): the brand sits above them until there is room for all four in one row */
@media (min-width: 900px) { .site-foot__grid { grid-template-columns: repeat(3, auto); justify-content: space-between; } .site-foot__brand { grid-column: 1 / -1; } }
@media (min-width: 1200px) { .site-foot__grid { grid-template-columns: minmax(0, 1fr) repeat(3, auto); gap: 32px 64px; } .site-foot__brand { grid-column: auto; } }
.site-foot__brand { display: flex; flex-direction: column; align-items: flex-start; }
.site-foot__brand img { height: 72px; width: auto; }
.site-foot__line { margin-top: 12px; font-family: var(--font-display); font-weight: 800; font-variation-settings: "wdth" 110; font-size: var(--step-2); }
.site-foot h2 { font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; font-variation-settings: "wdth" 112; font-weight: 700; margin-bottom: 8px; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li a { display: inline-flex; align-items: center; min-height: 48px; text-decoration: none; white-space: nowrap; }
.site-foot li a:hover { text-decoration: underline; }
.site-foot__small { margin-top: 40px; font-size: 0.9375rem; color: var(--on-laterite); }

/* ---------- Contact dock: her WhatsApp group and her email (no phone held) ---------- */
.dock { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40; font-family: var(--font-display); }
.dock summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 22px;
  background: var(--basalt); color: var(--cream);
  font-weight: 800; font-size: 1rem; white-space: nowrap;
  border-radius: 999px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.14), 0 10px 24px rgba(0,0,0,0.24);
  outline-offset: 3px;
}
.dock summary::-webkit-details-marker { display: none; }
.dock[open] summary { background: var(--ochre); color: var(--on-ochre); }
.dock__panel {
  position: absolute; right: 0; bottom: calc(100% + 10px);
  display: grid; gap: 2px; min-width: 240px; padding: 8px;
  background: var(--basalt); border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.14), 0 14px 30px rgba(0,0,0,0.28);
}
.dock__panel a { display: flex; align-items: center; min-height: 48px; padding: 0 14px; color: var(--cream); text-decoration: none; font-weight: 700; white-space: nowrap; border-radius: 4px; }
.dock__panel a:hover { background: var(--basalt-3); }
.dock__panel a:focus-visible { outline: 3px solid var(--ochre); outline-offset: 2px; }
/* closed means gone: no boxes left under the page for a tap or a probe to land on */
.dock:not([open]) .dock__panel { display: none; }
@media print { .dock { display: none; } }
/* on a page with the next-drive card, the dock waits until the card has scrolled away, so it never covers "Book your space" */
html.dock-wait .dock { display: none; }

/* ---------- Long reading (rules, values, bios) ---------- */
.prose { max-width: var(--measure); }
.prose ul { margin: 1em 0 0; padding-left: 1.2em; }
.prose li + li { margin-top: 0.5em; }
.prose h3 { font-size: var(--step-2); margin-top: 1.6em; }
.prose h3:first-child { margin-top: 0; }
.prose h3 + p, .prose h3 + ul { margin-top: 0.5em; }

/* ---------- Upcoming page: her planner ---------- */
.planner__grid { display: grid; gap: 40px 64px; align-items: start; }
@media (min-width: 960px) { .planner__grid { grid-template-columns: 7fr 4fr; } }
.planner__note { font-size: 1.1875rem; max-width: var(--measure); }
.planner__note .section__title { margin-bottom: 24px; }
.planner__note .signed { margin-top: 1.4em; font-family: var(--font-display); font-weight: 700; line-height: 1.35; }
.planner__figure { margin: 0; max-width: 446px; }
.planner__figure img { width: 100%; border-radius: 4px; }
.planner__figure a { display: block; }

/* A photograph on a stage of its own colour: it paints up to its own width, the ground carries beyond */
.photo-band { max-width: var(--photo-cap); margin-inline: auto; }
.photo-band img { width: 100%; height: clamp(240px, 34vw, 520px); object-fit: cover; }

/* ---------- Past drives page ---------- */
.gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.gallery li { margin: 0; position: relative; }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; }
/* her three uncaptioned landscape photos keep a landscape frame: a square cut cars out of each */
.gallery li.gallery__wide img { aspect-ratio: 4 / 3; }
.gallery li.gallery__wide--full { grid-column: span 2; }
@media (min-width: 760px) { .gallery li.gallery__wide--full { grid-column: auto; } }
/* four to a row: each takes two columns at 2:1, the height of a square tile beside it (2 + gap / tile) */
@media (min-width: 1100px) { .gallery li.gallery__wide { grid-column: span 2; } .gallery li.gallery__wide img { aspect-ratio: 2.01; } }
.gallery figure { margin: 0; }
.gallery figcaption { padding: 10px 2px 18px; font-family: var(--font-display); font-weight: 700; font-variation-settings: "wdth" 96; font-size: 1rem; line-height: 1.3; }
.gallery figcaption a { color: var(--ochre); }
@media (min-width: 760px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .gallery { grid-template-columns: repeat(4, 1fr); } }
.gallery-wrap { max-width: 2560px; margin-inline: auto; padding-inline: 4px; }

.writeup { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 56px; align-items: start; padding-block: clamp(40px, 4vw, 56px); scroll-margin-top: calc(var(--header-h) + 16px); }
.writeup + .writeup { border-top: 0; }
.writeup__media { max-width: 420px; }
.writeup__media img { width: 100%; height: auto; border-radius: 4px; }
.writeup__media--wide { max-width: 640px; }
.writeup__media--narrow { max-width: 336px; } /* img-016 paints no wider than 336 CSS px */
.writeup__title { font-size: var(--step-3); letter-spacing: -0.015em; }
.writeup__when { margin-top: 8px; font-family: var(--font-display); font-weight: 800; font-variation-settings: "wdth" 100; font-size: var(--step-1); color: var(--laterite); }
.writeup__body { margin-top: 20px; max-width: var(--measure); }
.writeup__body .lead { font-family: var(--font-display); font-weight: 800; font-variation-settings: "wdth" 100; font-size: var(--step-1); line-height: 1.3; }
.writeup__facts { list-style: none; padding: 0; margin: 1em 0 0; display: grid; gap: 4px; font-weight: 600; }
@media (min-width: 900px) {
  .writeup { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .writeup:nth-of-type(even) .writeup__media { order: 2; justify-self: end; }
}
.writeups > .writeup:nth-child(even) { background: var(--cream-2); box-shadow: 0 0 0 100vmax var(--cream-2); clip-path: inset(0 -100vmax); }

/* ---------- Commandments ---------- */
.commandments { list-style: none; margin: 0; padding: 0; }
.commandment { display: grid; gap: 8px 48px; padding-block: clamp(22px, 2.4vw, 32px); }
.commandment + .commandment { box-shadow: 0 -2px 0 0 color-mix(in oklab, var(--ink) 12%, var(--cream)); }
.commandment__title { font-size: var(--step-3); font-weight: 900; font-variation-settings: "wdth" 110; letter-spacing: -0.02em; line-height: 1.05; }
.commandment__line { font-size: var(--step-1); line-height: 1.45; max-width: 46ch; }
@media (min-width: 960px) { .commandment { grid-template-columns: 7fr 5fr; align-items: baseline; } }

.constitution { display: grid; gap: 32px 64px; align-items: start; }
@media (min-width: 960px) { .constitution { grid-template-columns: 7fr 5fr; } }
.constitution__panel { background: var(--basalt); color: var(--cream); padding: clamp(24px, 3vw, 40px); border-radius: 4px; --focus: var(--ochre); }
.constitution__panel p + .actions { margin-top: 20px; }
.constitution__updated { font-family: var(--font-display); font-weight: 700; color: var(--ochre); }

/* ---------- About ---------- */
.story { display: grid; gap: 36px 64px; align-items: start; }
@media (min-width: 960px) { .story { grid-template-columns: 6fr 6fr; } }
.story__title { font-size: var(--step-4); letter-spacing: -0.02em; }
.story__body { margin-top: 24px; font-size: 1.1875rem; max-width: var(--measure); }
.story__media img { width: 100%; height: auto; border-radius: 4px; }
.story__media figure { margin: 0; }
.story__media figcaption { padding: 10px 2px 0; font-family: var(--font-display); font-weight: 700; font-variation-settings: "wdth" 96; font-size: 1rem; line-height: 1.3; }
.values { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
@media (min-width: 760px) { .values { grid-template-columns: 1fr 1fr; } }
.value { background: var(--basalt-2); padding: clamp(22px, 2.6vw, 34px); }
.value__name { font-size: var(--step-2); color: var(--ochre); letter-spacing: -0.01em; }
.value__line { margin-top: 10px; }
.crew { display: grid; gap: 28px 64px; align-items: start; }
@media (min-width: 960px) { .crew { grid-template-columns: 5fr 7fr; } }
.crew__levels { display: grid; gap: 14px; }
.crew__levels p + p { margin-top: 0; }
.crew__levels strong { font-family: var(--font-display); font-weight: 800; }

.vision { font-family: var(--font-display); font-weight: 800; font-variation-settings: "wdth" 100; font-size: var(--step-3); line-height: 1.2; letter-spacing: -0.015em; max-width: 34ch; }
.vmg__label { font-size: var(--step-2); font-variation-settings: "wdth" 112; letter-spacing: 0.04em; text-transform: uppercase; color: var(--laterite); margin-bottom: 16px; }
.vmg__block + .vmg__block { margin-top: clamp(40px, 4vw, 56px); }
.mission { margin: 0; padding-left: 1.2em; max-width: var(--measure); font-size: 1.1875rem; }
.mission li + li { margin-top: 0.5em; }
.goals { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px 48px; }
@media (min-width: 760px) { .goals { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .goals { grid-template-columns: repeat(3, 1fr); } }
.goal__name { font-size: var(--step-1); margin-bottom: 10px; }
.goal ul { margin: 0; padding-left: 1.2em; }
.goal li + li { margin-top: 0.4em; }

/* ---------- Team ---------- */
.committee { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
@media (min-width: 760px) { .committee { grid-template-columns: repeat(3, 1fr); gap: 36px 28px; } }
@media (min-width: 1100px) { .committee { grid-template-columns: repeat(6, 1fr); gap: 36px 20px; } }
.person img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; }
.person__name { margin-top: 12px; font-size: 1.1875rem; font-weight: 800; font-variation-settings: "wdth" 92; }
.person__role { font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ochre-text); }
.on-basalt .person__role { color: var(--ochre); }

.bios { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px 56px; }
@media (min-width: 1100px) { .bios { grid-template-columns: 1fr 1fr; } }
.bio { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px 24px; align-items: start; }
@media (min-width: 640px) { .bio { grid-template-columns: 200px minmax(0, 1fr); } }
.bio img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; }
.bio__name { font-size: var(--step-2); font-weight: 800; font-variation-settings: "wdth" 96; letter-spacing: -0.01em; }
.bio__text { margin-top: 8px; }
/* Every captain's write-up shows the same few lines; assets/js/bio-more.js marks the ones that run longer and adds "Read more" (chg-32f551d8). With no script, every word shows */
.bio { --bio-lines: 6; }
@media (min-width: 640px) { .bio { --bio-lines: 5; } }
.bio__text.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--bio-lines); line-clamp: var(--bio-lines); overflow: hidden; }
.bio__more {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0; border: 0; background: none; cursor: pointer;
  color: inherit; font-family: var(--font-display); font-weight: 700; font-variation-settings: "wdth" 100; font-size: 1.0625rem;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em;
}
.bio__more[hidden] { display: none; }
.bio__more:hover { text-decoration-color: var(--crimson); }

/* ---------- Media page ---------- */
.clips { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
@media (min-width: 1000px) { .clips { grid-template-columns: 1fr 1fr; } }
.clip a { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px 20px; align-items: start; padding: 20px; background: var(--basalt-2); text-decoration: none; height: 100%; }
@media (min-width: 640px) { .clip a { grid-template-columns: 200px minmax(0, 1fr); } }
.clip a:hover { background: var(--basalt-3); }
/* each press photo at its own shape: they are wide news crops, and 16:10 cut people at both sides */
.clip img { width: 100%; height: auto; aspect-ratio: auto; border-radius: 2px; }
.clip img.clip__logo { display: block; width: auto; max-width: 100%; height: calc(22px * var(--s, 1)); aspect-ratio: auto; object-fit: contain; border-radius: 0; filter: brightness(0) invert(1) sepia(1) saturate(2) hue-rotate(-30deg) brightness(0.98); /* cream */ }
.clip__logo-name { display: block; font-family: var(--font-display); font-weight: 800; font-variation-settings: "wdth" 112; font-size: 1rem; line-height: 22px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cream); }
.clip__title { display: block; margin-top: 10px; font-family: var(--font-display); font-weight: 800; font-variation-settings: "wdth" 96; font-size: var(--step-1); line-height: 1.25; }
.clip a:hover .clip__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; text-decoration-color: var(--ochre); }
.clip__excerpt { display: block; margin-top: 8px; color: var(--on-basalt-muted); font-size: 1.0625rem; }

/* ---------- Membership rules ---------- */
.rules { list-style: none; margin: 0; padding: 0; max-width: 900px; }
.rule { padding-block: 22px; }
.rule + .rule { box-shadow: 0 -2px 0 0 color-mix(in oklab, var(--ink) 12%, var(--cream)); }
/* from 1100px her ten questions sit two to a row, so the page uses the column and the first screen holds four */
@media (min-width: 1100px) {
  .rules { max-width: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; }
  .rule:first-child { padding-top: 0; }
  .rule:nth-child(2) { padding-top: 0; box-shadow: none; }
  .rules + .remember { max-width: none; }
}
.rule__q { font-size: var(--step-2); letter-spacing: -0.01em; }
.rule__a { margin-top: 8px; font-size: 1.1875rem; max-width: var(--measure); }
.remember { margin-top: 48px; padding: clamp(24px, 3vw, 40px); background: var(--ochre); color: var(--on-ochre); border-radius: 4px; max-width: 900px; --focus: var(--ink); }
.remember h2 { font-size: var(--step-3); }
.remember ul { margin: 16px 0 0; padding-left: 1.2em; font-size: 1.1875rem; }
.remember li + li { margin-top: 0.5em; }

/* ---------- FAQ (found-ready generator's accordion) ---------- */
.se-faq__title { font-size: var(--step-4); letter-spacing: -0.02em; margin-bottom: 24px; }
.se-faq { max-width: 900px; }
.se-faq__item { border-top: 2px solid color-mix(in oklab, var(--ink) 14%, var(--cream)); }
.se-faq__item:last-child { border-bottom: 2px solid color-mix(in oklab, var(--ink) 14%, var(--cream)); }
.se-faq__q { cursor: pointer; display: flex; align-items: center; min-height: 56px; padding: 14px 0; font-family: var(--font-display); font-weight: 800; font-variation-settings: "wdth" 100; font-size: var(--step-1); line-height: 1.25; }
.se-faq__a { padding: 0 0 20px; font-size: 1.125rem; max-width: var(--measure); }
.se-faq__a p { margin: 0; }
/* From 1100px the heading takes the left column and the questions the right, the same 5/7 split as
   the booking band, so the list uses the content width instead of stopping short of it. */
@media (min-width: 1100px) {
  .se-faq { max-width: none; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; align-items: start; }
  .se-faq__title { grid-column: 1; grid-row: 1 / span 40; margin-bottom: 0; }
  .se-faq__item { grid-column: 2; }
}

/* ---------- Become a member ---------- */
.member-fees { display: grid; gap: 36px 64px; align-items: start; }
@media (min-width: 960px) { .member-fees { grid-template-columns: 6fr 6fr; } }
.member-fees__photo img { width: 100%; height: auto; border-radius: 4px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
@media (min-width: 760px) { .steps { grid-template-columns: 1fr 1fr; } }
.step { background: var(--basalt-2); padding: clamp(22px, 2.6vw, 34px); }
.step__name { font-size: var(--step-2); color: var(--ochre); }
.step p { margin-top: 10px; }

/* ---------- Get in touch ---------- */
.touch-photo { background: var(--laterite); }
.book--alt { background: var(--cream-2); }
.text-link--long { white-space: normal; display: inline; line-height: 1.5; }
/* the hero headline holds two lines inside the 1280 photograph at every width (its 1440 size is its largest) */
.hero__title { font-size: min(var(--step-hero), 6.5rem); }

/* ---------- Polish: interaction states, display type, line breaks ---------- */
/* pressed: every button and the dock answer the press; colour only, so reduced motion loses nothing */
.btn--book:active, .cf-submit:active { background: color-mix(in oklab, var(--crimson-hover) 82%, var(--basalt)); }
.btn--book:focus-visible, .cf-submit:focus-visible { background: var(--crimson-hover); }
.dock summary { transition: background-color 0.15s ease-out; }
.dock:not([open]) summary:hover { background: var(--basalt-3); }
.dock summary:active { background: var(--basalt-2); }
.text-link:active, .drive__memory:active, .site-nav a:active, .site-foot li a:active { text-decoration-thickness: 3px; }
.drive__memory:hover { text-decoration-color: var(--ochre); }
.site-foot li a:hover, .site-foot li a:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em; text-decoration-color: var(--ochre); }
.dock__panel a:active, .clip a:active { background: var(--basalt-2); }
.cf-input:hover, .cf-textarea:hover { border-color: color-mix(in oklab, var(--ink) 70%, var(--cream)); }
.se-faq__q:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; text-decoration-color: var(--crimson); }

/* display type: kerning on, tight leading on the bold one-line display lines (P3-2) */
.hero__title, .page-head__title, .section__title { font-kerning: normal; }
.board__line, .page-head__line, .writeup__when, .site-foot__line { line-height: 1.2; }
/* lines we set: no single word left alone; her paragraphs keep their own breaks */
.board__line, .page-head__line, .signoff, .site-foot__line, .fees__label, .drive__name { text-wrap: balance; }
.section__lede, .page-head__lede, .join__lede { text-wrap: pretty; }

/* preview credit, under her copyright line */
.site-foot__credit { margin-top: 6px; }
/* chg-7bef8c31: the credit sits on the right, on the same line as the rights line. */
.site-foot__base { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 24px; }
.site-foot__base .site-foot__small { margin-top: 0; }
.site-foot__base .site-foot__credit { margin-left: auto; }
.site-foot__credit a { color: inherit; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 48px; }