/* ============================================================
   Lakefront — working prototype
   Framework-free. One stylesheet. Design tokens up top.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Gambetta";
  src: url("../fonts/Gambetta-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gambetta";
  src: url("../fonts/Gambetta-LightItalic.woff2") format("woff2");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Gambetta";
  src: url("../fonts/Gambetta-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --paper: #F5F1EA;
  --text: #000000;
  --burgundy: #15063A;
  --charcoal: #1E1E1E;
  --blue: #D3E9FC;
  --yellow: #FFFB4D;
  --pink: #FF67FF;
  --peach: #FFA068;
  --mint: #D4FCBC; /* Lime. One definition for the whole theme (the About hero accent line). */
  --green: #89A376; /* Lugn grön, the About invitation's calm green: the default of the Campus image band (.sub-band--green). */

  --serif: "Gambetta", "Iowan Old Style", Georgia, serif;
  --sans:  "Satoshi", -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Wordmark size targets. Set here so JS/CSS can interpolate. */
  --wm-hero-width: min(72vw, 960px);
  --wm-nav-width: 148px;

  /* Progress state, driven by JS. */
  --intro-progress: 0;
  --handoff: 0;

  /* Motion tokens */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------- Normalize (minimal) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }

/* Focus styles: always visible, never removed. */
:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}
.nav a:focus-visible { outline-color: currentColor; }

/* ---------- Wordmark (inline SVG, inherits colour via `color` on the element) ---------- */
.wordmark {
  display: block;
  aspect-ratio: 1810 / 239;
}
.wordmark svg {
  display: block;
  width: 100%;
  height: 100%;
}
.wordmark__asset { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity 260ms var(--ease); }
.wordmark__asset--white { opacity: 1; }
.wordmark__asset--black { opacity: 0; }
html[data-nav-docked="1"] .wordmark__asset--white { opacity: 0; }
html[data-nav-docked="1"] .wordmark__asset--black { opacity: 1; }

/* ---------- Nav ----------
   Visible from frame 1. Transparent over the hero video (paper-coloured text),
   fades into a paper bar once the wordmark has docked.
   No desktop Menu button. On mobile, a generous dropdown panel. */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  padding: 22px 32px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  color: var(--paper);
  background: transparent;
  transition: background-color 260ms var(--ease), color 260ms var(--ease), border-color 260ms var(--ease);
  border-bottom: 0;
  pointer-events: auto;
}
html[data-nav-docked="1"] .nav {
  color: var(--text);
  background: var(--paper);
}

.nav__links {
  display: flex;
  gap: clamp(16px, 2vw, 28px);
  justify-content: flex-end;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.02em;
  /* Subtle text shadow for legibility over the moving video; removed on paper. */
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  transition: text-shadow 260ms var(--ease);
}
html[data-nav-docked="1"] .nav__links { text-shadow: none; }

.nav__links a {
  text-decoration: none;
  padding: 6px 2px;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms var(--ease);
}
.nav__links a:hover,
.nav__links a:focus-visible { border-color: currentColor; }
.nav__links .nav__engage {
  padding: 8px 17px;
  margin: -2px 0;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: rgba(245,241,234,.14);
  transition: background-color 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease), transform 180ms var(--ease);
}
.nav__links .nav__engage:hover,
.nav__links .nav__engage:focus-visible { background: var(--paper); color: var(--text); border-color: var(--paper); }
html[data-nav-docked="1"] .nav__links .nav__engage { background: var(--text); color: var(--paper); border-color: var(--text); }
html[data-nav-docked="1"] .nav__links .nav__engage:hover,
html[data-nav-docked="1"] .nav__links .nav__engage:focus-visible {
  background: var(--yellow);
  color: var(--text);
  border-color: var(--text);
  transform: translateY(-2px);
}
.nav__links .nav__apply {
  padding: 7px 16px;
  margin: -1px 0;
  border: 1px solid currentColor;
  border-radius: 999px;
}
.nav__links .nav__apply:hover,
.nav__links .nav__apply:focus-visible { background: var(--paper); color: var(--text); border-color: var(--paper); }
html[data-nav-docked="1"] .nav__links .nav__apply:hover,
html[data-nav-docked="1"] .nav__links .nav__apply:focus-visible { background: var(--text); color: var(--paper); border-color: var(--text); }

/* Toggle hidden on desktop. Shown on mobile only. */
.nav__toggle {
  display: none;
  min-width: 72px;
  min-height: 44px;
  background: rgba(0,0,0,.22);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 10px 16px;
  font: inherit;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: currentColor;
  cursor: pointer;
  text-shadow: inherit;
}
html[data-nav-docked="1"] .nav__toggle { background: transparent; }

/* Mobile navigation: Satoshi, a modest size, and a real tap target per row,
   instead of the previous oversized serif list. More links are intentional
   (the visitor should reach any page in one tap), so rows stay compact and
   clearly separated rather than huge; the panel scrolls on its own if a
   small screen can't fit every row, with the Close toggle staying put in
   the fixed header above it. Revised per Thomas's review (2 Oct 2026). */
.nav-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 12px;
  width: min(480px, calc(100vw - 24px));
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--lf-menu-bg, #F5F1EA);
  color: var(--lf-menu-ink, #000000);
  border-radius: 26px;
  padding: 10px;
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
  -webkit-overflow-scrolling: touch;
}
.nav-panel[hidden] { display: none; }
.nav-panel__links {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* Gambetta again, per Thomas's review (2 Oct 2026): keeps the Lakefront
     feel, but at a modest size rather than the original display scale, so
     the spacing and tap-target work from 2.8.4 still holds. Close and Apply
     stay on Satoshi (var(--sans), set separately below). */
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 5.2vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -.01em;
}
.nav-panel__links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  box-sizing: border-box;
  padding: 14px 14px;
  border-radius: 14px;
  text-decoration: none;
  color: var(--lf-menu-ink, #000000);
  transition: background-color 160ms var(--ease);
}
.nav-panel__links a + a { margin-top: 4px; }
.nav-panel__links a:hover,
.nav-panel__links a:focus-visible {
  background: rgba(0,0,0,.08);
}
@supports (background: color-mix(in srgb, red 10%, transparent)) {
  .nav-panel__links a:hover,
  .nav-panel__links a:focus-visible {
    background: color-mix(in srgb, currentColor 10%, transparent);
  }
}
/* The focus ring follows the menu's text colour, so it shows on any menu background. */
.nav-panel__links a:focus-visible {
  outline: 2px solid var(--lf-menu-ink, #000000);
  outline-offset: -2px;
}
/* Active page: the same thin underline as the desktop navigation, in the menu's text colour. */
.nav-panel__links a[aria-current="page"]:not(.nav-panel__apply) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}
.nav-panel__links .nav-panel__apply {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  min-height: 52px;
  padding: 14px 18px;
  border-radius: 999px;
  background: var(--lf-apply-bg, #000000);
  color: var(--lf-apply-ink, #F5F1EA);
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1;
}
/* Hover and keyboard focus keep the existing yellow; the text turns black so it stays readable on it. */
.nav-panel__links .nav-panel__apply:hover,
.nav-panel__links .nav-panel__apply:focus-visible {
  background: var(--yellow);
  color: var(--text);
}

/* ---------- Mobile menu overlay and open state ----------
   The overlay is its own element, a sibling of the header, so its colour and opacity can never reach the menu.
   z-index 29 sits above the page content (28 and below) and under the header (30), which holds the menu. */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 29;
  background: var(--lf-overlay-bg, rgba(51,51,51,.4));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  touch-action: none;
  overscroll-behavior: contain;
  transition: opacity 220ms var(--ease), visibility 0s linear 220ms;
}
html.lf-menu-open .nav-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 220ms var(--ease), visibility 0s;
}
/* The page behind the open menu does not scroll. */
html.lf-menu-open,
html.lf-menu-open body { overflow: hidden; }
/* Menu/Close while the menu is open: the menu's text colour on the menu's own background, so it reads on the dimmed video as well as on the paper bar. */
body .nav .nav__toggle[aria-expanded="true"] {
  background: var(--lf-menu-bg, #F5F1EA);
  color: var(--lf-menu-ink, #000000);
  text-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  .nav-overlay,
  html.lf-menu-open .nav-overlay { transition: none; }
}
@media (min-width: 721px) {
  .nav-overlay { display: none; }
}

@media (max-width: 720px) {
  :root { --wm-nav-width: 108px; }
  .nav { padding: 16px 16px; }
  .nav__links { display: none; }
  .nav__toggle { display: block; }
}

/* ---------- Intro section ---------- */
.intro {
  /* One screen (the stage). Since 2.24.0 the hero does not hold the page: it scrolls away at once. */
  height: auto;
  position: relative;
}
.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: #000;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Video fades slightly during handoff so paper takeover reads. */
  opacity: calc(1 - var(--handoff) * 0.15);
  transition: opacity 200ms var(--ease);
}
/* Local scrim behind the fragments only. Stronger than v1 in its lower band,
   still fully transparent above 55% so the video remains its own subject. */
.scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      rgba(0,0,0,0.55) 0%,
      rgba(0,0,0,0.32) 22%,
      rgba(0,0,0,0.00) 55%
    );
  pointer-events: none;
  opacity: calc(1 - var(--handoff));
}

/* Paper rise — a full-viewport panel that slides up from below during handoff. */
.paper-rise {
  position: absolute;
  inset: 0;
  background: var(--paper);
  transform: translateY(calc(100% - (var(--handoff) * 100%)));
  transition: transform 40ms linear;
  will-change: transform;
}

/* Keep mobile story text above the cue and inside the visible browser area.
   Scope to the animated intro so the reduced-motion reading layout is intact. */
@media (max-width: 720px) and (prefers-reduced-motion: no-preference) {
  .stage { height: 100svh; height: 100dvh; }
  .stage .fragments { bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
  html .scroll-cue { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Fragments ---------- */
.fragments {
  position: absolute;
  left: clamp(24px, 5vw, 80px);
  right: clamp(24px, 5vw, 80px);
  bottom: clamp(48px, 12vh, 140px);
  color: var(--paper);
  pointer-events: none;
}
.fragment {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: min(20ch, 92%);
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(2rem, 1rem + 4vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 500ms var(--ease),
    transform 700ms var(--ease);
  text-wrap: balance;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35), 0 2px 12px rgba(0,0,0,0.25);
}

/* Fragment visibility is set by the hero timer (see the Hero block at the end of this file). */

/* ---------- Hero wordmark (the migrating element) ---------- */
/* The wordmark performs both the "reveal" (fade in over video) and the migration
   (translate + scale from centre to nav position). CSS calc interpolates against
   --handoff for the migration; opacity ties to fragment state. */

.wordmark--hero {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--wm-hero-width);
  height: calc(var(--wm-hero-width) * 239 / 1810);

  /* Interpolate position and scale between hero (centred) and nav (top-left dock).
     At handoff=0: translate to viewport centre and rest.
     At handoff=1: translate to nav position (32px, 32px) and scale down to nav width. */
  --scale: calc(1 - var(--handoff) * (1 - (var(--wm-nav-width) / var(--wm-hero-width))));
  --hero-x: calc(50vw - (var(--wm-hero-width) / 2));
  --hero-y: calc(50vh - (var(--wm-hero-width) * 239 / 1810 / 2));
  /* Docked position: matches vertical centre of nav bar (nav padding-top 22px + a nudge
     so wordmark caps sit visually on the same baseline as nav link caps). */
  --nav-x: 32px;
  --nav-y: 26px;
  --x: calc(var(--hero-x) + (var(--nav-x) - var(--hero-x)) * var(--handoff));
  --y: calc(var(--hero-y) + (var(--nav-y) - var(--hero-y)) * var(--handoff));

  transform: translate(var(--x), var(--y)) scale(var(--scale));
  transform-origin: 0 0;
  text-decoration: none;

  /* Reveal: fully hidden until we hit the sixth beat. */
  opacity: 0;
  transition:
    opacity 700ms var(--ease),
    color 400ms var(--ease);

  /* Colour: paper on video, flips to black once the paper has actually risen
     to meet the docked wordmark (near end of handoff). */
  color: var(--paper);
  will-change: transform, opacity, color;
  z-index: 25;
  pointer-events: none;
}
html[data-fragment="5"] .wordmark--hero { opacity: 1; }
/* Colour flip triggered when the paper edge has reached the docked wordmark. */
html[data-paper-covers-wm="1"] .wordmark--hero { color: var(--text); }
/* Once docked, wordmark is interactive as the permanent home link. */
html[data-nav-docked="1"] .wordmark--hero { pointer-events: auto; }

/* ---------- Main content sections ---------- */
.section {
  padding: clamp(80px, 12vw, 180px) clamp(24px, 6vw, 96px);
}
.section--paper { background: var(--paper); color: var(--text); }
.section--burgundy { background: var(--burgundy); color: var(--paper); }

.eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 clamp(24px, 4vw, 40px);
  color: currentColor;
}
.eyebrow--light { color: var(--paper); opacity: 0.72; }

.display {
  font-family: var(--serif);
  font-weight: 300;
  font-style: normal;
  font-size: clamp(2.75rem, 1rem + 8vw, 8rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0 0 clamp(24px, 3vw, 48px);
  text-wrap: balance;
  max-width: 20ch;
}

.lede {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.35rem);
  line-height: 1.5;
  max-width: 52ch;
  margin: 0 0 1em;
}

.manifesto {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(2.25rem, 1rem + 5.5vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 64px);
}
@media (min-width: 800px) {
  .two-col {
    grid-template-columns: minmax(180px, 240px) minmax(0, 700px);
  }
}

.foot {
  padding: 40px clamp(24px, 6vw, 96px);
  font-family: var(--sans);
  font-size: 13px;
  color: var(--charcoal);
  border-top: 1px solid rgba(0,0,0,0.12);
}
.foot p { margin: 0; letter-spacing: 0.02em; }

/* ---------- Section additions ---------- */
.display--md {
  font-size: clamp(2.25rem, 1rem + 5vw, 5.5rem);
  max-width: 22ch;
}
.lede--light { color: var(--paper); opacity: 0.9; }
.section--space { padding-top: clamp(60px, 8vw, 120px); }
#live, #events, #space, #people, #institute, #about, #visit, #apply { scroll-margin-top: 80px; }

/* ---------- Scroll cue ---------- */
.scroll-cue {
  position: fixed;
  left: 50%;
  bottom: clamp(20px, 3.5vh, 36px);
  transform: translateX(-50%);
  z-index: 26;
  background: none;
  border: 0;
  padding: 10px 14px;
  color: var(--paper);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  opacity: 1;
  transition: opacity 300ms var(--ease);
  width: clamp(238px, 20vw, 276px);
  min-height: 68px;
  padding: 14px 32px 12px;
  gap: 10px;
}
.scroll-cue__label { white-space: nowrap; }
.scroll-cue[data-visible="0"] { opacity: 0; pointer-events: none; }
.scroll-cue__arrow {
  font-size: 16px;
  line-height: 1;
  animation: cueBob 1.8s var(--ease) infinite;
}
@keyframes cueBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

/* ---------- Progress rail ---------- */
.progress {
  position: fixed;
  right: clamp(16px, 2.4vw, 32px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 26;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--paper);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  opacity: 1;
  transition: opacity 300ms var(--ease);
  pointer-events: none;
}
.progress[data-visible="0"] { opacity: 0; }
.progress__line {
  display: block;
  width: 1px;
  height: 56px;
  background: currentColor;
  opacity: 0.55;
}
.progress__num,
.progress__total { font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .progress { right: 12px; font-size: 11px; }
  .progress__line { height: 40px; }
  .scroll-cue {
    width: min(252px, calc(100vw - 48px));
    min-height: 68px;
    padding-inline: 26px;
    font-size: 11px;
    letter-spacing: 0.14em;
  }
}

/* ---------- Community section (editorial, horizontal, art-directed) ---------- */
.community {
  background: var(--paper);
  color: var(--text);
  padding: clamp(80px, 10vw, 140px) 0 clamp(80px, 10vw, 140px);
  position: relative;
}
.community__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 0 clamp(24px, 6vw, 96px);
  margin-bottom: clamp(20px, 3vw, 40px);
  flex-wrap: wrap;
}
.community__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.5rem, 1rem + 6vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 14ch;
  text-wrap: balance;
}
.community__controls {
  display: flex;
  gap: 8px;
}
.ctrl {
  width: 74px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--text);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  border-radius: 999px;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.ctrl span {
  display: block;
  font-size: 22px;
  line-height: 1;
  transform: translateY(-1px);
}
.ctrl:hover { background: var(--text); color: var(--paper); }
.ctrl:disabled { opacity: 0.35; cursor: default; }

/* Horizontal rail. Desktop: overlapping, broken-grid, subtle rotation.
   Mobile: horizontal scroll-snap with peek. */
.community__rail {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
  padding: 40px clamp(24px, 6vw, 96px) 40px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.community__rail::-webkit-scrollbar { display: none; }
/* Start page, desktop only: the four portrait cards sit as one group, centred in the row.
   Intro and button keep their left alignment. Below 1280 px the row is unchanged.
   The group (up to 1296 px) is wider than the gutter box at 1440 px, so the side padding
   is dropped here; otherwise the row overflows and scroll-snap pulls the group off centre. */
@media (min-width: 1280px) {
  .community__rail { justify-content: center; padding-inline: 0; }
}

.member {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.member--sm { width: clamp(180px, 20vw, 260px); }
.member--md { width: clamp(220px, 26vw, 340px); }
.member--lg { width: clamp(280px, 34vw, 460px); }

/* Vertical offsets — broken grid on desktop. */
@media (min-width: 800px) {
  .member--drop  { transform: translateY(56px); }
  .member--raise { transform: translateY(-40px); }
  .member--tilt-l { transform: rotate(-1.2deg); }
  .member--tilt-r { transform: rotate(1.4deg); }
  .member--drop.member--tilt-r { transform: translateY(56px) rotate(1.4deg); }
  .member--raise.member--tilt-r { transform: translateY(-40px) rotate(1.4deg); }
  /* Deliberate overlap: pull adjacent items slightly under the anchor. */
  .member--anchor { margin: 0 -20px; z-index: 2; }
}

.member__portrait {
  aspect-ratio: 3 / 4;
  background: var(--burgundy);
  color: var(--paper);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 14px;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.member__portrait span {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 3vw, 3.5rem);
  line-height: 1;
  opacity: 0.5;
}
/* Anchor member — larger, burgundy stays but a different aspect + emphasis. */
.member--anchor .member__portrait--anchor {
  aspect-ratio: 4 / 5;
  background: var(--burgundy);
}
/* One accent portrait — yellow, used once (not stacked with pink/peach). */
.member__portrait--accent {
  background: var(--yellow);
  color: var(--text);
}

.member__meta { padding: 0 2px; }
.member__name {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  margin: 0 0 2px;
  letter-spacing: 0.01em;
}
.member__role {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 14px; /* 14px / 21px: clearly below the name (15px, weight 500) */
  line-height: 1.5;
  color: var(--charcoal);
  opacity: 0.72;
  margin: 0;
  letter-spacing: 0.02em;
}
.member--anchor .member__name { font-size: 17px; }
.member__quote {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.05rem, 0.9rem + 0.4vw, 1.25rem);
  line-height: 1.35;
  color: var(--text);
  margin: 12px 0 0;
  max-width: 32ch;
}

@media (max-width: 800px) {
  .community__rail {
    padding: 24px 20px 24px;
    /* Show peek of next card via right-hand inset. */
    scroll-padding-inline: 20px;
  }
  .member--sm { width: 68vw; }
  .member--md { width: 72vw; }
  .member--lg { width: 78vw; }
  .community__controls { order: 3; width: 100%; justify-content: flex-start; }
}

/* ---------- Reduced motion: intro degrades to a static editorial spread ---------- */
@media (prefers-reduced-motion: reduce) {
  .nav {
    color: var(--text);
    background: var(--paper);
    border-bottom-color: rgba(0,0,0,0.08);
  }
  .nav__links { text-shadow: none; }
  .scroll-cue { display: none; }
  .progress { display: none; }
  .scroll-cue__arrow { animation: none; }
  .member--drop, .member--raise, .member--tilt-l, .member--tilt-r,
  .member--drop.member--tilt-r, .member--raise.member--tilt-r { transform: none; }
  .community__rail { scroll-behavior: auto; }
}

/* ---------- Meeting demo refinements ---------- */
.brand-cue {
  position: fixed;
  top: 22px;
  left: 32px;
  z-index: 34;
  color: var(--paper);
  width: 122px;
  text-decoration: none;
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
  transition: opacity 360ms var(--ease), color 260ms var(--ease);
}
.brand-cue img { display: block; width: 100%; height: auto; }

.nav::before {
  content: "";
  position: absolute;
  inset: 0 0 -32px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.48), rgba(0,0,0,0));
  transition: opacity 260ms var(--ease);
}
html[data-nav-docked="1"] .nav::before { opacity: 0; }

/* The content now follows the hero directly. There is no empty paper viewport. */
.paper-rise { display: none; }
.hero-video { opacity: 1; }
/* Stacking is explicit, in the order the markup already has: video, scrim, story lines. A playing video layer (iOS Safari) can then never sit above the text. */
.stage .hero-video { z-index: 0; }
.stage .scrim { z-index: 1; }
.stage .fragments { z-index: 2; }
.wordmark--hero { z-index: 33; }
html[data-paper-covers-wm="1"] .wordmark--hero { color: var(--paper); }
html[data-nav-docked="1"] .wordmark--hero { color: var(--text); }

.statement {
  min-height: 100svh;
  padding: clamp(110px, 14vw, 210px) clamp(24px, 6vw, 96px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.statement__copy {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3.2rem, 8.1vw, 9.4rem);
  line-height: .9;
  letter-spacing: -.045em;
}
.statement__copy span { display: block; }
.statement__indent { padding-left: clamp(0px, 9vw, 150px); }

.invitation {
  min-height: 100svh;
  padding: clamp(90px, 10vw, 150px) clamp(24px, 6vw, 96px);
  background: var(--burgundy);
  color: var(--paper);
  display: grid;
  grid-template-rows: auto 1fr;
}
.invitation__setup {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1.6rem, 2.5vw, 2.8rem);
  line-height: 1.02;
}
.invitation__payoff {
  align-self: end;
  margin: 80px 0 0;
  font-family: var(--serif);
  font-size: clamp(4rem, 10vw, 11rem);
  line-height: .82;
  letter-spacing: -.05em;
}
.invitation__payoff span { margin-left: clamp(0px, 8vw, 130px); }

.program-grid {
  margin-top: clamp(56px, 8vw, 110px);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: start;
}
.program-card {
  min-height: clamp(410px, 37vw, 560px);
  padding: clamp(24px, 3vw, 42px);
  border-radius: 32px;
  display: flex;
  flex-direction: column;
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease);
  position: relative;
  overflow: hidden;
}
.program-card::before {
  content: attr(data-day);
  position: absolute;
  top: -0.16em;
  right: -0.04em;
  font-family: var(--serif);
  font-size: clamp(7rem, 13vw, 13rem);
  line-height: 1;
  letter-spacing: -.08em;
  opacity: .09;
  pointer-events: none;
}
.program-card:nth-child(1) { grid-column: 1 / 5; grid-row: 1; --card-rotation: -1.1deg; --entry-rotation: -3deg; transform: rotate(var(--card-rotation)); }
.program-card:nth-child(2) { grid-column: 5 / 9; grid-row: 1; margin-top: 44px; --card-rotation: .9deg; --entry-rotation: 2.6deg; transform: rotate(var(--card-rotation)); }
.program-card:nth-child(3) { grid-column: 9 / 13; grid-row: 1; margin-top: -8px; --card-rotation: -.5deg; --entry-rotation: -2deg; transform: rotate(var(--card-rotation)); }
.program-card--yellow { background: var(--yellow); color: var(--text); }
.program-card--blue { background: var(--blue); color: var(--text); }
.program-card--burgundy { background: var(--burgundy); color: var(--paper); }
.program-card time { position: relative; z-index: 1; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.program-card h3 { position: relative; z-index: 1; margin: auto 0 20px; font-family: var(--serif); font-weight: 400; font-size: clamp(3.5rem, 5.2vw, 6.5rem); line-height: .78; letter-spacing: -.045em; }
.program-card p { position: relative; z-index: 1; margin: 0; max-width: 25ch; font-size: clamp(1.15rem, 1.5vw, 1.45rem); line-height: 1.3; }

.display--sm { font-size: clamp(2.75rem, 1rem + 8vw, 8rem); max-width: 12ch; }
.text-link { display: inline-block; margin-top: 28px; color: inherit; font-weight: 500; }

.member__portrait { border-radius: clamp(24px, 3vw, 40px); transition: transform 340ms var(--ease), box-shadow 340ms var(--ease); }
.member__portrait img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .member:hover .member__portrait { transform: translateY(-10px) rotate(-1.4deg); box-shadow: 0 22px 40px rgba(0,0,0,.16); }
  .member:nth-child(even):hover .member__portrait { transform: translateY(-10px) rotate(1.4deg); }
  .program-card:hover { box-shadow: 0 24px 50px rgba(0,0,0,.14); }
  .program-card:nth-child(1):hover { transform: translateY(-9px) rotate(-2deg); }
  .program-card:nth-child(2):hover { transform: translateY(-9px) rotate(2deg); }
  .program-card:nth-child(3):hover { transform: translateY(-9px) rotate(-1.5deg); }
  .story:hover { transform: translateY(-10px) rotate(-.8deg); box-shadow: 0 24px 50px rgba(0,0,0,.14); }
  .story:nth-child(even):hover { transform: translateY(-10px) rotate(.8deg); }
}

.stories { padding-top: clamp(100px, 12vw, 180px); }
.stories__head { max-width: 1050px; margin: 0 auto clamp(60px, 8vw, 120px); }
.stories__head .eyebrow { margin-bottom: clamp(20px, 3vw, 34px); }
.stories__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; align-items: start; }
.story { border-radius: 32px; padding: 32px; min-height: 320px; display: flex; flex-direction: column; background: var(--blue); transition: transform 320ms var(--ease), box-shadow 320ms var(--ease); }
.story--wide { grid-column: 1 / 8; min-height: 460px; }
.story--tall { grid-column: 8 / 13; min-height: 600px; margin-top: 90px; background: var(--charcoal); color: white; }
.story--small { grid-column: 3 / 8; margin-top: -110px; background: var(--yellow); transform: rotate(-1.2deg); }
.story__type { margin: 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.story h3 { margin: auto 0 12px; max-width: 12ch; font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 4vw, 5rem); line-height: .92; }
.story p:last-child { margin-bottom: 0; max-width: 34ch; }

.section--space { display: grid; grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); gap: clamp(50px, 8vw, 120px); align-items: center; }
.space__mosaic { min-height: 650px; display: grid; grid-template-columns: 1.25fr .75fr; grid-template-rows: 1fr .75fr; gap: 16px; }
.space-tile { position: relative; margin: 0; border-radius: 32px; padding: 24px; display: flex; align-items: flex-end; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; background: var(--blue); overflow: hidden; transition: transform 300ms var(--ease); }
.space-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.space-tile::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(to bottom, transparent, rgba(0,0,0,.55)); }
.space-tile figcaption { position: relative; z-index: 1; color: white; text-shadow: 0 1px 5px rgba(0,0,0,.45); }
.space-tile--wide { grid-row: 1 / 3; background: linear-gradient(155deg, var(--burgundy), #7b285d); color: var(--paper); }
.space-tile--small { background: var(--yellow); transform: rotate(1.2deg); }
.space-tile--tall { background: var(--charcoal); color: var(--paper); transform: rotate(-1deg); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .space-tile:hover { transform: translateY(-8px) rotate(0); }
}

.day { background: var(--blue); color: var(--text); padding: clamp(100px, 12vw, 180px) clamp(24px, 6vw, 96px); overflow: hidden; }
.day__head { display: grid; grid-template-columns: minmax(190px, .4fr) 1fr; gap: 40px; align-items: start; margin-bottom: clamp(80px, 10vw, 150px); }
.day__head h2 { max-width: 15ch; margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(3rem, 7.5vw, 8.5rem); line-height: .9; letter-spacing: -.04em; }
.day__moments { min-height: 1450px; position: relative; }
.day-moment { position: absolute; margin: 0; }
.day-moment img { width: 100%; height: 100%; object-fit: cover; border-radius: 34px; display: block; }
.day-moment figcaption { margin-top: 14px; max-width: 25ch; font-size: clamp(1rem, 1.4vw, 1.3rem); }
.day-moment figcaption span { display: block; margin-bottom: 4px; font-size: 12px; letter-spacing: .12em; }
.day-moment--morning { top: 0; left: 0; width: min(38vw, 500px); transform: rotate(-1.5deg); }
.day-moment--morning img { aspect-ratio: 4 / 5; }
.day-moment--work { top: 250px; right: -2vw; width: min(47vw, 650px); transform: rotate(1.2deg); }
.day-moment--work img { aspect-ratio: 4 / 5; }
.day-moment--work figcaption { margin-left: auto; text-align: right; }
.day-moment--dinner { top: 840px; left: 15%; width: min(48vw, 680px); transform: rotate(-.8deg); }
.day-moment--dinner img { aspect-ratio: 4 / 3; }
.day__closing { max-width: 15ch; margin: clamp(70px, 9vw, 140px) 0 0 auto; font-family: var(--serif); font-size: clamp(3.4rem, 7vw, 8rem); line-height: .9; letter-spacing: -.04em; }
.day__closing span { display: block; margin-left: clamp(0px, 7vw, 120px); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .day-moment { transition: transform 320ms var(--ease), z-index 0ms; }
  .day-moment:hover { transform: translateY(-12px) rotate(0); z-index: 2; }
}

.institute { min-height: 88svh; padding: clamp(100px, 12vw, 180px) clamp(24px, 6vw, 96px); background: var(--charcoal); color: var(--paper); display: grid; grid-template-columns: minmax(180px, .35fr) 1fr; gap: clamp(40px, 7vw, 110px); align-items: start; }
/* Emerge logo: drawn by CSS on the section itself, so it works with whatever
   content is saved (original placeholders, Thomas's own edits, a fresh
   install) and needs no content change. Left margin, level with the photo
   row. It is a decorative image: the "Emerge Institute" label and heading
   in the section already say the name in text. Brand yellow comes from the
   SVG file itself. Replaces an earlier block-based logo that could only
   reach a site through a content update. */
.institute::before {
  content: "";
  display: block;
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  margin-top: clamp(70px, 9vw, 130px);
  /* 20px closer to the photo row, per Thomas's review (3 Oct 2026). */
  margin-left: 20px;
  width: clamp(74px, 8vw, 128px);
  aspect-ratio: 114 / 93;
  background: url("../brand/emerge-yellow-logo.svg") no-repeat center / contain;
  pointer-events: none;
}
@media (max-width: 720px) {
  .institute::before { margin-top: 0; margin-left: 0; }
}
.institute__body h2 { margin: 0 0 50px; max-width: 15ch; font-family: var(--serif); font-weight: 400; font-size: clamp(3.1rem, 7.2vw, 8.2rem); line-height: .9; letter-spacing: -.04em; }
.institute__body p { max-width: 53ch; font-size: clamp(1.1rem, 1.5vw, 1.45rem); }
.institute__body a { display: inline-block; margin-top: 26px; color: inherit; }

.about { padding: clamp(100px, 12vw, 180px) clamp(24px, 6vw, 96px); background: var(--yellow); color: var(--text); }
.about__head { display: grid; grid-template-columns: minmax(180px, .35fr) 1fr; gap: 40px; margin-bottom: clamp(70px, 9vw, 130px); }
.about__head h2 { margin: 0; max-width: 12ch; font-family: var(--serif); font-weight: 400; font-size: clamp(3rem, 7vw, 8rem); line-height: .9; letter-spacing: -.04em; }
.about__pillars { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid currentColor; }
.about__pillars article { min-height: 360px; padding: 22px 24px 30px 0; border-right: 1px solid currentColor; display: flex; flex-direction: column; transition: transform 280ms var(--ease); transform-origin: center bottom; }
.about__pillars article + article { padding-left: 24px; }
.about__pillars article:last-child { border-right: 0; }
.about__pillars .about__number { font-size: 12px; letter-spacing: .12em; }
.about__pillars h3 { margin: auto 0 18px; font-family: var(--serif); font-weight: 400; line-height: .8; letter-spacing: -.055em; }
.about__pillars h3 small { display: block; margin: 0 0 14px 3px; font-family: var(--sans); font-size: clamp(.78rem, .9vw, .95rem); font-weight: 500; line-height: 1; letter-spacing: .12em; text-transform: uppercase; }
.about__pillars h3 strong { display: block; font-family: inherit; font-size: clamp(4rem, 5.7vw, 7rem); font-weight: 400; }
.about__pillars p { margin: 0; max-width: 21ch; font-size: clamp(1rem, 1.25vw, 1.2rem); line-height: 1.35; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .about__pillars article:nth-child(odd):hover { transform: translateY(-10px) rotate(-.7deg); }
  .about__pillars article:nth-child(even):hover { transform: translateY(-10px) rotate(.7deg); }
}

.foot { padding: 0; border: 0; background: var(--burgundy); color: var(--paper); }
.foot__newsletter { padding: clamp(90px, 10vw, 150px) clamp(24px, 6vw, 96px); display: grid; grid-template-columns: minmax(180px, .35fr) 1fr; column-gap: 40px; row-gap: 34px; align-items: start; }
.foot__newsletter p:nth-child(2) { margin: 0; max-width: 11ch; font-family: var(--serif); font-size: clamp(3rem, 6vw, 7rem); line-height: .9; letter-spacing: -.04em; }
.foot__newsletter a { grid-column: 2; justify-self: start; color: var(--burgundy); background: var(--paper); padding: 14px 24px; border-radius: 999px; text-decoration: none; font-size: clamp(1rem, 1.3vw, 1.2rem); font-weight: 500; }
/* Newsletter subscribe form: its own item in the newsletter grid, next to the
   headline and above the "Read the newsletter" link. Min-height only (never a
   fixed/max height), so a taller confirmation or error message inside the form
   is not clipped; Beehiiv can also ask for a specific height via postMessage
   (see lakefront.js). The iframe's own internal styling is not touched. */
.foot__newsletter .foot__subscribe { grid-column: 2; justify-self: stretch; width: 100%; max-width: 440px; margin: 0; }
.foot__subscribe iframe { display: block; width: 100%; height: 58px; min-height: 58px; border: 0; } /* a sensible default instead of the browser's 150px; JS grows it if Beehiiv reports a taller height */
.foot__subscribe-fallback { margin: 12px 0 0; font-size: .95rem; }
.foot__subscribe-fallback a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.foot__subscribe-fallback a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }
@media (max-width: 720px) {
  .foot__newsletter .foot__subscribe { grid-column: 1; max-width: none; }
}
.foot__brand { padding: clamp(70px, 8vw, 120px) clamp(24px, 6vw, 96px) clamp(50px, 6vw, 90px); }
.foot__brand img { display: block; width: min(100%, 1500px); height: auto; }
.foot__grid { padding: 0 clamp(24px, 6vw, 96px) clamp(70px, 8vw, 120px); display: grid; grid-template-columns: 1fr 1.4fr 1.25fr .8fr; gap: clamp(34px, 5vw, 80px); }
.foot__grid nav, .foot__grid > div { display: flex; flex-direction: column; align-items: flex-start; }
.foot__grid a { color: inherit; text-decoration: none; margin-bottom: 7px; }
.foot__grid a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot__label { margin: 0 0 20px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .62; }
.foot address { font-style: normal; line-height: 1.6; }
.foot__social { display: flex; flex-direction: column; margin-top: 22px; }
.foot__apply .foot__label { margin-bottom: 34px; }
.foot__apply > a { padding: 14px 22px; border-radius: 999px; background: var(--paper); color: var(--burgundy); font-weight: 500; }
.foot__bottom {
  padding: 24px clamp(24px, 6vw, 96px);
  display: flex; flex-wrap: wrap; justify-content: space-between;
  column-gap: 30px; row-gap: 8px;
  font-size: 12px; opacity: .7;
}
.foot__bottom p { margin: 0; }
/* The credit takes its own full-width row under the copyright line, so the
   existing two-column line (copyright / Stockholm · Sweden) is untouched. */
.foot__credit { order: 3; flex-basis: 100%; }
.foot__heart {
  display: inline-block;
  width: .85em; height: .85em;
  margin: 0 .05em -.05em;
  vertical-align: baseline;
}
.foot__credit .screen-reader-text {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.foot__credit a { color: inherit; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color 150ms; }
.foot__credit a:hover { text-decoration-color: currentColor; }
.foot__credit a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }
@media (max-width: 720px) {
  .foot__credit a { padding: 6px 0; margin: -6px 0; } /* larger tap target on mobile without shifting the line */
}

@media (max-width: 720px) {
  .brand-cue { top: 19px; left: 16px; width: 104px; }
  .statement { min-height: 82svh; }
  .statement__copy { font-size: clamp(2.75rem, 13vw, 5rem); line-height: .92; }
  .statement__indent { padding-left: 0; }
  .invitation__payoff { font-size: clamp(3.7rem, 17vw, 6.5rem); }
  .invitation__payoff span { margin-left: 0; }
  .program-grid { display: flex; overflow-x: auto; gap: 24px; padding: 8px 2px 32px; scroll-snap-type: x mandatory; }
  .program-card, .program-card:nth-child(n) { flex: 0 0 82vw; min-height: 380px; margin-top: 0; padding: 30px 28px; grid-row: auto; transform: none; scroll-snap-align: start; }
  .program-card h3 { font-size: clamp(2.65rem, 13vw, 3.4rem); line-height: .82; }
  .section--space { display: block; }
  .space__mosaic { min-height: 520px; margin-top: 56px; }
  .day__head { grid-template-columns: 1fr; }
  .day__moments { min-height: auto; display: flex; align-items: flex-start; gap: 18px; overflow-x: auto; padding: 8px 2px 30px; scroll-snap-type: x mandatory; }
  .day-moment, .day-moment--morning, .day-moment--work, .day-moment--dinner { position: relative; inset: auto; flex: 0 0 82vw; width: auto; transform: none; scroll-snap-align: start; }
  .day-moment img, .day-moment--morning img, .day-moment--work img, .day-moment--dinner img { height: auto; aspect-ratio: 4 / 5; }
  .day__closing { margin-top: 70px; }
  .day__closing span { margin-left: 0; }
  .institute, .about__head { grid-template-columns: 1fr; }
  .about__pillars { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .about__pillars article { flex: 0 0 76vw; min-height: 350px; scroll-snap-align: start; }
  .about__pillars h3 strong { font-size: clamp(4.8rem, 21vw, 7rem); }
  .foot__newsletter { grid-template-columns: 1fr; align-items: start; }
  .foot__newsletter a { grid-column: 1; }
  .foot__brand img { width: 100%; }
  .foot__grid {
    grid-template-columns: 1fr;
    gap: 52px;
  }
  .foot__grid nav,
  .foot__grid > div { width: 100%; }
  .foot address {
    line-height: 1.85;
    letter-spacing: .01em;
  }
  .foot__apply .foot__label { margin-bottom: 20px; }
  .foot__apply > a {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 54px;
    padding: 15px 22px;
    text-align: center;
    white-space: nowrap;
  }
  .stories__head { padding-inline: clamp(24px, 6vw, 96px); }
  .stories__grid { display: flex; overflow-x: auto; gap: 16px; padding-bottom: 24px; scroll-snap-type: x mandatory; }
  .story, .story--wide, .story--tall, .story--small { flex: 0 0 82vw; min-height: 430px; margin-top: 0; transform: none; scroll-snap-align: start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .member__portrait, .program-card, .story, .space-tile, .about__pillars article { transition: none; }
}

/* ---------- Post-workshop direction, September 2026 ---------- */
/* A shorter three-beat hero. The logo no longer migrates across the viewport. */
.wordmark--hero { display: none; }
html[data-nav-docked="1"] .brand-cue {
  opacity: 1;
  pointer-events: auto;
  filter: invert(1);
  text-shadow: none;
}
.fragments {
  inset-inline: clamp(24px, 9vw, 150px);
  bottom: clamp(130px, 18vh, 210px);
  display: flex;
  justify-content: center;
  text-align: center;
}
.fragment {
  left: 50%;
  width: min(100%, 22ch);
  max-width: 22ch;
  transform: translate(-50%, 18px);
  font-size: clamp(3rem, 7.2vw, 8.5rem);
  line-height: .9;
  letter-spacing: -.035em;
}

.progress {
  right: clamp(18px, 3vw, 42px);
  padding: 12px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.34);
  backdrop-filter: blur(8px);
  text-shadow: 0 1px 5px rgba(0,0,0,.8);
}
.scroll-cue {
  padding: 14px 32px 12px;
  border: 1px solid rgba(245,241,234,.7);
  border-radius: 999px;
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(8px);
}
.scroll-cue__arrow { margin-top: 3px; }
html[data-fragment="3"] .scroll-cue,
html[data-fragment="2"] .scroll-cue {
  background: var(--paper);
  color: var(--text);
  border-color: var(--paper);
  text-shadow: none;
}
.stage::after {
  content: "";
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18px;
  background: var(--paper);
  transform: translateY(100%);
  transition: transform 420ms var(--ease);
}
html[data-fragment="3"] .stage::after { transform: translateY(0); }

.statement {
  min-height: auto;
  padding-top: clamp(100px, 11vw, 160px);
  padding-bottom: clamp(100px, 11vw, 160px);
}

/* Events are now a primary homepage destination. */
.events-head {
  display: block;
  margin-bottom: clamp(60px, 8vw, 110px);
}
.events-head .display { margin-bottom: 0; }
.events-head .lede {
  max-width: 52ch;
  margin: clamp(28px, 4vw, 48px) 0 0;
}
.event-kicker {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 12px !important;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.event-meta {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
  padding-bottom: 13px;
  border-bottom: 1px solid currentColor;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.events-actions {
  margin-top: clamp(50px, 7vw, 90px);
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}
.pill-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 14px 24px;
  border: 1px solid currentColor;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 500;
  transition: background-color 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease), transform 180ms var(--ease);
}
.pill-link--dark:hover { background: var(--text); color: var(--paper); }
.pill-link--filled { background: var(--text); color: var(--paper); border-color: var(--text); }
.pill-link--filled:hover,
.pill-link--filled:focus-visible {
  background: var(--yellow);
  color: var(--text);
  border-color: var(--text);
  transform: translateY(-2px);
}
.pill-link--outline { background: transparent; color: var(--text); }
.pill-link--outline:hover { background: var(--text); color: var(--paper); }
.text-link--dark { color: var(--text); }

/* A single destination module keeps Visit from becoming a loose text/image sequence. */
.visit > .eyebrow { margin-bottom: clamp(30px, 4vw, 54px); }
/* Visit: text first, full-width photo below, in the photo's own natural
   proportions. No forced crop and no upscaling past the photo's own resolution:
   max-width only (never width:100%), so a wide panorama is never stretched or
   cut to fit a box, on any screen. */
.visit__card {
  overflow: hidden;
  background: var(--blue);
  color: var(--text);
  border-radius: clamp(28px, 4vw, 54px);
}
.visit__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(42px, 6vw, 88px);
}
.visit__content .display { margin-bottom: 28px; }
.visit__content .lede { margin: 0; }
.visit__content address {
  margin: 34px 0 0;
  font-style: normal;
  font-size: 1rem;
  line-height: 1.75;
}
.visit__directions { margin-top: 30px; }
.visit__image {
  position: relative;
  margin: 0;
}
.visit__image img {
  display: block; /* inline-block left a few pixels of the card's blue showing below the photo */
  max-width: 100%; /* shrinks on small screens, never grows past its own resolution */
  height: auto;
  margin: 0 auto; /* centres the photo when it is narrower than the card */
}
.visit__image figcaption {
  position: absolute;
  left: 22px;
  bottom: 18px;
  z-index: 1;
  margin: 0;
  padding: 8px 12px;
  border-radius: 5px; /* editorial label, not a pill button */
  background: rgba(245,241,234,.88);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Consistent text-link affordance. Colour adds energy without obscuring copy. */
.text-link,
.institute__body a {
  font-weight: 700;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
  text-decoration-color: rgba(30,30,30,.48);
  transition: color 180ms var(--ease), text-decoration-color 180ms var(--ease), text-underline-offset 180ms var(--ease);
}
.text-link:hover,
.text-link:focus-visible {
  color: var(--text);
  text-decoration-color: currentColor;
  text-underline-offset: 10px;
}
.institute__body a { text-decoration-color: rgba(245,241,234,.48); }
.institute__body a:hover,
.institute__body a:focus-visible {
  color: var(--paper);
  text-decoration-color: currentColor;
  text-underline-offset: 10px;
}
.section--burgundy .text-link {
  color: var(--paper);
  text-decoration-color: rgba(245,241,234,.48);
}
.section--burgundy .text-link:hover,
.section--burgundy .text-link:focus-visible {
  color: var(--paper);
  text-decoration-color: currentColor;
}

/* Newsletter is a CTA button, never an underlined text link. */
.foot__newsletter a,
.foot__newsletter a:hover,
.foot__newsletter a:focus-visible {
  font-weight: 700;
  text-decoration: none;
}

/* Residency closes one chapter; newsletter starts another. */
.foot__newsletter {
  background: var(--paper);
  color: var(--text);
}
.foot__newsletter .eyebrow--light { color: var(--text); }
.foot__newsletter a {
  background: var(--text);
  color: var(--paper);
}
.foot__newsletter a:hover,
.foot__newsletter a:focus-visible {
  background: var(--yellow);
  color: var(--text);
}

/* Footer navigation stays quiet. No repeated underline treatment. */
.foot__grid a,
.foot__grid a:hover,
.foot__grid a:focus-visible {
  font-weight: 500;
  text-decoration: none;
}
.foot__grid a:hover,
.foot__grid a:focus-visible { color: var(--yellow); }
.foot__apply > a:hover,
.foot__apply > a:focus-visible {
  background: var(--yellow);
  color: var(--text);
}

/* Scroll entrance for the large event cards. */
@media (prefers-reduced-motion: no-preference) {
  .program-card[data-reveal] {
    opacity: 0;
    transform: translateY(88px) rotate(var(--entry-rotation, 0deg)) scale(.965);
    transition: opacity 480ms var(--ease), transform 650ms cubic-bezier(.16,1,.3,1), box-shadow 280ms var(--ease);
    will-change: transform, opacity;
  }
  .program-card[data-reveal]:nth-child(2) { transition-delay: 80ms; }
  .program-card[data-reveal]:nth-child(3) { transition-delay: 160ms; }
  .program-card[data-reveal].is-inview {
    opacity: 1;
    transform: translateY(0) rotate(var(--card-rotation, 0deg));
  }

  .event-life__images figure[data-reveal] {
    opacity: 0;
    transform: translateY(42px);
    transition: opacity 650ms var(--ease), transform 800ms var(--ease);
  }
  .event-life__images figure[data-reveal]:nth-child(2) { transition-delay: 110ms; }
  .event-life__images figure[data-reveal]:nth-child(3) { transition-delay: 220ms; }
  .event-life__images figure[data-reveal].is-inview {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .program-card[data-reveal].is-inview:hover {
    transform: translateY(-10px) rotate(var(--card-rotation, 0deg)) scale(1.01);
    box-shadow: 0 20px 45px rgba(0,0,0,.12);
  }
  .event-life__images figure.is-inview:hover img { transform: scale(1.025); }
}
.event-life {
  margin-top: clamp(100px, 13vw, 190px);
  padding-top: clamp(55px, 7vw, 90px);
  border-top: 1px solid rgba(0,0,0,.22);
}
.event-life__copy {
  display: grid;
  grid-template-columns: minmax(180px,.35fr) 1fr;
  gap: clamp(32px, 6vw, 90px);
  margin-bottom: clamp(55px, 7vw, 90px);
}
.event-life__copy .eyebrow { margin: 8px 0 0; }
.event-life__copy h3 {
  max-width: 14ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3rem, 6vw, 7rem);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.04em;
}
.event-life__copy > p:last-child {
  grid-column: 2;
  max-width: 40ch; /* about the same width as 50ch had at body size, now that the text is at lead size */
  margin: -38px 0 0;
  font-size: var(--lf-lead-size); /* lead level, as About Lakefront and Visit */
  line-height: var(--lf-lead-lh);
}
.event-life__images {
  display: grid;
  grid-template-columns: 1.15fr .85fr .75fr;
  gap: 18px;
  align-items: end;
}
.event-life__images figure { margin: 0; }
.event-life__images figure:nth-child(2) { margin-bottom: 70px; }
.event-life__images img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: clamp(22px, 3vw, 38px);
  transition: filter 420ms var(--ease), transform 420ms var(--ease);
}
.event-life__images figure:first-child img { aspect-ratio: 5 / 4; }
.event-life__images figure:last-child img { filter: grayscale(1); }
.event-life__images figcaption {
  margin-top: 11px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Straight community portrait system, with selective B&W only. */
.member,
.member--drop,
.member--raise,
.member--tilt-l,
.member--tilt-r,
.member--drop.member--tilt-r,
.member--raise.member--tilt-r { transform: none; }
.member--bw .member__portrait img { filter: grayscale(1); }
.member--bw .member__portrait img,
.tone-shift,
.event-life__images figure:last-child img {
  transition: filter 420ms var(--ease), transform 420ms var(--ease);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .member--bw:hover .member__portrait img,
  .institute-people article:hover .tone-shift,
  .event-life__images figure:last-child:hover img {
    filter: grayscale(0);
  }
}

/* A clear participation ladder before the secondary residency CTA. */
.get-involved {
  padding: clamp(100px, 12vw, 180px) clamp(24px, 6vw, 96px);
  background: var(--blue);
  color: var(--text);
}
.get-involved__head {
  display: grid;
  grid-template-columns: minmax(180px, .35fr) 1fr;
  gap: clamp(36px, 6vw, 90px);
  margin-bottom: clamp(70px, 9vw, 130px);
}
.get-involved__head h2 {
  max-width: 15ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3.2rem, 7vw, 8rem);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.045em;
}
.get-involved__grid { border-top: 1px solid currentColor; }
.get-involved__grid a {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 28px 0;
  border-bottom: 1px solid currentColor;
  color: inherit;
  text-decoration: none;
  transition: padding 220ms var(--ease), background 220ms var(--ease);
}
.get-involved__grid a:hover { padding-inline: 18px; background: rgba(245,241,234,.45); }
.get-involved__grid span { font-size: 12px; letter-spacing: .12em; }
.get-involved__grid strong { font-family: var(--serif); font-size: clamp(2rem, 4vw, 4.8rem); font-weight: 400; line-height: 1; }
.get-involved__grid em { max-width: 26ch; font-style: normal; text-align: right; }

.institute-people {
  grid-column: 2;
  /* The left column is sized for the heading's small eyebrow label, far
     wider than the logo actually needs (confirmed against the approved
     composition, 2 Oct 2026): reclaiming some of that width here gives the
     photo row real room to read as wide, without touching the heading
     column itself or the logo's own position. */
  --institute-reclaim: clamp(70px, 9vw, 130px);
  margin-left: calc(-1 * var(--institute-reclaim));
  width: calc(100% + var(--institute-reclaim));
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  align-items: end;
  gap: clamp(30px, 3.25vw, 52px);
  margin-top: clamp(70px, 9vw, 130px);
}
.institute-people article { min-width: 0; margin: 0; }
.institute-people img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: clamp(20px, 2.5vw, 34px);
  filter: grayscale(1);
}
/* The colour photo: its own natural landscape ratio (not cropped to the 4:5
   used by the other two), always in colour, never grayscale. Bottom-aligned
   with the other two cards by .institute-people's own align-items: end, so
   it simply reads as taller, starting higher, exactly as in the approved
   composition. */
/* The wide treatment keys off the theme's own existing "colour" block style
   (is-style-lakefront-colour), which Thomas already applies himself from
   the block editor's Styles panel, rather than a class only Claude's own
   markup produces: whichever card an editor marks that way gets the wider
   column and its photo's own natural shape, no separate step needed.
   Corrected 2 Oct 2026: the earlier version only matched Claude-authored
   markup, so a hand-edited card kept the narrow 4:5 ratio at the new wider
   column width -- wide box, tall forced crop, which is what read as "much
   too big". */
/* A fixed 4:3 (the sketch's own ratio, and what the group photo is within
   1.5%) rather than aspect-ratio: auto. "auto" cannot work out a shape for
   a lazy-loaded image that has not loaded yet, so the box came out
   hundreds of pixels too tall until it did (seen on the live site, 3 Oct
   2026); a fixed ratio is the same before and after loading. */
.institute-people article:first-child:has(.is-style-lakefront-colour) img {
  aspect-ratio: 4 / 3;
}
/* Desktop: every card spans the same two rows (photo row, caption row), so
   the photos' bottom edges and the first line of every caption line up
   whatever the length of the captions, as in the approved composition. The
   photo row is as tall as the tallest photo; shorter photos sit at its
   bottom, which is what makes the wide one start higher. */
@media (min-width: 721px) {
  .institute-people {
    grid-template-rows: auto auto;
    align-items: start;
    row-gap: 0;
  }
  .institute-people article {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
  }
  .institute-people article > figure { align-self: end; }
}
.institute-people p {
  max-width: 28ch;
  margin: 22px 0 0;
  font-size: 1rem;
  line-height: 1.55;
}
.institute-people p span {
  display: block;
  margin-bottom: 9px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .66;
}

@media (max-width: 900px) {
  .nav__links { gap: 12px; font-size: 13px; }
  .nav__links .nav__engage { display: none; }
  .events-head { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .stage .fragments {
    inset-inline: 24px;
    bottom: calc(142px + env(safe-area-inset-bottom, 0px));
  }
  .fragment { font-size: clamp(3rem, 15vw, 5.6rem); line-height: .9; }
  .progress { right: 10px; }
  html .scroll-cue { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  .statement { min-height: auto; padding-top: 100px; padding-bottom: 100px; }
  .events-actions {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }
  .events-actions .pill-link,
  .visit__directions,
  .foot__newsletter a {
    width: 100%;
    min-height: 54px;
    padding: 15px 22px;
    justify-content: center;
    text-align: center;
  }
  .visit__content { padding: 34px 24px 38px; }
  .visit__content .display { margin-bottom: 20px; }
  .visit__content address { margin-top: 26px; }
  .event-life__copy { grid-template-columns: 1fr; }
  .event-life__copy > p:last-child { grid-column: 1; margin: 0; }
  .event-life__images {
    display: flex;
    overflow-x: auto;
    gap: 14px;
    padding-bottom: 22px;
    scroll-snap-type: x mandatory;
  }
  /* Start page "The place in use" row: hide the browser's scroll indicator (iOS/Safari shows a white line while swiping). Scrolling and snapping are unchanged. */
  #events .event-life__images { scrollbar-width: none; -ms-overflow-style: none; }
  #events .event-life__images::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .event-life__images figure,
  .event-life__images figure:nth-child(2) { flex: 0 0 78vw; margin-bottom: 0; scroll-snap-align: start; }
  .event-life__images img,
  .event-life__images figure:first-child img { aspect-ratio: 4 / 5; }
  .get-involved__head { grid-template-columns: 1fr; }
  .get-involved__grid a { grid-template-columns: 42px 1fr; }
  .get-involved__grid em { grid-column: 2; text-align: left; }
  /* This section reads top to bottom on mobile (logo, then the colour photo
     and its line, then the other two), not as a side-swiped row like the
     carousels elsewhere, so it gets its own stacked layout here instead of
     the shared horizontal-scroll pattern. */
  .institute-people {
    grid-column: 1;
    /* The negative margin that widens the photo row on desktop is a
       deliberate reach into that row's own unusually wide left column; on
       this single-column mobile layout there is no such column to reach
       into, and left unreset it clipped the caption text at the screen
       edge (caught in testing, 2 Oct 2026). */
    margin-left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow-x: visible;
    scroll-snap-type: none;
    gap: clamp(36px, 9vw, 56px);
  }
  .institute-people article { flex: 1 1 auto; width: 100%; scroll-snap-align: none; }
}

/* ============================================================
   WordPress adapter
   The demo stylesheet above is kept intact. Rules below map it onto
   the core block markup the editor produces. Keep changes here.
   ============================================================ */

/* Base */
img { height: auto; }
.wp-block-image, .wp-block-group figure { margin: 0; }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 999px; background: var(--text); color: var(--paper); text-decoration: none; }
.skip-link:focus { top: 12px; }
body.admin-bar .nav, body.admin-bar .brand-cue { margin-top: 32px; }
@media (max-width: 782px) { body.admin-bar .nav, body.admin-bar .brand-cue { margin-top: 46px; } }

/* Statement: the italic line is the indented line */
.statement__copy em { font-style: normal; display: inline-block; padding-left: clamp(0px, 9vw, 150px); }
@media (max-width: 720px) {
  /* v2.21.5: on a phone the line breaks of the desktop layout are dropped and the words flow naturally.
     The italic part is inline, so a comma after it stays with the word instead of dropping to its own line.
     (The server adds a space after each line break, so the words never run together; see inc/markup.php.) */
  .statement__copy em { display: inline; padding-left: 0; }
  body.lakefront .statement__copy br { display: none; }
  .statement__copy { text-wrap: pretty; } /* avoids a lone short word on the last lines, where the browser supports it */
}

/* Event cards */
.program-card .event-meta p { margin: 0; max-width: none; font-size: 12px; line-height: 1.55; }

/* Pill buttons: style the link, not the wrapper */
.wp-block-button.pill-link,
.wp-block-button.pill-link:hover,
.wp-block-button.pill-link:focus-within { display: inline-flex; padding: 0; border: 0; background: none; transform: none; }
.pill-link > a {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  padding: 14px 24px; border: 1px solid currentColor; border-radius: 999px;
  text-decoration: none; font-weight: 500; color: inherit;
  transition: background-color 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease), transform 180ms var(--ease);
}
.pill-link--filled > a { background: var(--text); color: var(--paper); border-color: var(--text); }
.pill-link--filled > a:hover,
.pill-link--filled > a:focus-visible { background: var(--yellow); color: var(--text); border-color: var(--text); transform: translateY(-2px); }
.pill-link--outline > a { background: transparent; color: var(--text); }
.pill-link--outline > a:hover { background: var(--text); color: var(--paper); }
.visit__directions { margin-top: 30px; }

/* Text links: the paragraph carries the class, the link carries the look */
/* Padding, not margin: the demo link is inline-block, so its 28px adds to the lede margin instead of collapsing. */
p.text-link { display: block; margin: 0; padding-top: 28px; font-weight: 400; text-decoration: none; }
.text-link a {
  color: inherit; font-weight: 700;
  text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 7px;
  text-decoration-color: rgba(30,30,30,.48);
  transition: color 180ms var(--ease), text-decoration-color 180ms var(--ease), text-underline-offset 180ms var(--ease);
}
.text-link a:hover, .text-link a:focus-visible { color: var(--text); text-decoration-color: currentColor; text-underline-offset: 10px; }
.section--burgundy .text-link a { color: var(--paper); text-decoration-color: rgba(245,241,234,.48); }
.section--burgundy .text-link a:hover, .section--burgundy .text-link a:focus-visible { color: var(--paper); text-decoration-color: currentColor; }

/* Community */
.member__portrait { margin: 0; }

/* Institute */
.institute__body p.institute__link { margin: 0; font-size: inherit; }
.institute-people figure { margin: 0; }
.institute-people p strong { display: block; margin-bottom: 9px; font-size: 11px; font-weight: inherit; letter-spacing: .12em; text-transform: uppercase; opacity: .66; }

/* Get involved: each row is a group, the link stretches over the whole row */
.gi-item {
  position: relative; display: grid; grid-template-columns: 70px 1fr auto; gap: 24px; align-items: center;
  padding: 28px 0; border-bottom: 1px solid currentColor;
  transition: padding 220ms var(--ease), background 220ms var(--ease);
}
.gi-item:hover { padding-inline: 18px; background: rgba(245,241,234,.45); }
.gi-item:focus-within { outline: 2px solid var(--text); outline-offset: 3px; }
.gi-item p { margin: 0; }
.gi-num { font-size: 12px; letter-spacing: .12em; }
.gi-title { font-family: var(--serif); font-size: clamp(2rem, 4vw, 4.8rem); font-weight: 400; line-height: 1; }
.gi-link { max-width: 26ch; text-align: right; }
.get-involved__grid .gi-item a { display: inline; padding: 0; border: 0; background: none; color: inherit; text-decoration: none; }
.get-involved__grid .gi-item a:hover { padding: 0; background: none; }
.get-involved__grid .gi-item a:focus-visible { outline: none; }
.get-involved__grid .gi-item a::after { content: ""; position: absolute; inset: 0; }

/* About: "The" small, the word large */
.about__pillars .about__number { margin: 0; }
.about__pillars h3 { font-family: var(--sans); font-size: clamp(.78rem, .9vw, .95rem); font-weight: 500; line-height: 1; letter-spacing: .12em; text-transform: uppercase; padding-left: 3px; }
.about__pillars h3 strong { display: block; margin: 14px 0 0 -3px; font-family: var(--serif); font-weight: 400; line-height: .8; text-transform: none;
  /* The demo inherits -.055em computed at the h3 size, not the word size. */
  letter-spacing: calc(-.055 * 1.17 * clamp(1rem, 0.94rem + 0.3vw, 1.125rem)); }

/* Visit */
.visit__address { margin: 34px 0 0; font-size: 1rem; line-height: 1.75; }

/* Footer */
.foot__newsletter .foot__cta { grid-column: 2; justify-self: start; margin: 0; }
.foot__cta a {
  display: inline-block; padding: 14px 24px; border-radius: 999px; background: var(--text); color: var(--paper);
  text-decoration: none; font-size: clamp(1rem, 1.3vw, 1.2rem); font-weight: 700;
}
.foot__cta a:hover, .foot__cta a:focus-visible { background: var(--yellow); color: var(--text); }
.foot__brand figure { margin: 0; }
.foot__grid p:not(.foot__label) { margin: 0; }
/* Demo: block links, line-height 1.55 plus 7px margin each. */
.foot__links { line-height: calc(1.55em + 7px); }
.foot__grid .foot__links a { margin: 0; }
.foot__social { display: block; margin-top: 22px !important; }
.foot__cta, .foot__apply-cta { display: flex; }
.foot__address { font-style: normal; line-height: 1.6; }
.foot__apply-cta a {
  display: inline-block; padding: 14px 22px; border-radius: 999px; background: var(--paper); color: var(--burgundy);
  font-weight: 700; text-decoration: none;
}
.foot__apply-cta a:hover, .foot__apply-cta a:focus-visible { background: var(--yellow); color: var(--text); }

@media (max-width: 720px) {
  .events-actions .pill-link, .events-actions .pill-link > a,
  .visit__directions, .visit__directions .pill-link, .visit__directions .pill-link > a { width: 100%; }
  .events-actions .pill-link > a, .visit__directions .pill-link > a { min-height: 54px; padding: 15px 22px; }
  .visit__address { margin-top: 26px; }
  .wp-block-buttons.visit__directions { min-height: 0; padding: 0; }
  .gi-item { grid-template-columns: 42px 1fr; }
  .gi-link { grid-column: 2; text-align: left; }
  .foot__newsletter .foot__cta { grid-column: 1; width: 100%; }
  .foot__cta a, .foot__apply-cta a { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; padding: 15px 22px; box-sizing: border-box; }
  .foot__apply-cta { width: 100%; }
  .foot__address { line-height: 1.85; letter-spacing: .01em; }
}

/* Footer wordmark printed inline as SVG (see inc/wordmark.php). */
.foot__brand svg { display: block; width: min(100%, 1500px); height: auto; }
@media (max-width: 720px) { .foot__brand svg { width: 100%; } }

/* Start page: people preview (four portraits), from the linked prototype. */
.community__intro { max-width: 34ch; margin: 0; padding: 0 clamp(24px,6vw,96px); font-size: clamp(1.05rem,1.4vw,1.3rem); }
.community__more { padding: 2rem clamp(24px, 6vw, 96px) 5rem; margin: 0; }
.community__controls[hidden] { display: none; }
.lf-portrait img { filter: grayscale(1); }

/* Calm palette: images on Lakefront pages are shown in black and white.
   Environment images (lake, nature, buildings, rooms) keep their colour with
   the image style "Colour". Upload images in colour; the site converts them. */
.lakefront-page img { filter: grayscale(1); }
/* "Colour" always wins over the black-and-white defaults from the prototype
   (e.g. the last image in "The place in use", the Institute images).
   Portraits are not image blocks and stay black and white. */
.lakefront-page figure.wp-block-image.is-style-lakefront-colour img,
.lakefront-page figure.wp-block-image.is-style-lakefront-colour:hover img { filter: none; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .institute-people article:hover img,
  .event-life__images figure:last-child:hover img { filter: grayscale(0); }
}

/* Portraits: always black and white; colour on hover/focus for the People
   page's Residents/Alumni/Collaborators cards only when the admin has turned
   it on (Appearance > Customize > Lakefront display). Off by default: those
   portraits stay black and white always, hover and keyboard focus included.
   Covers both the People page's cards (.profile-card) and the "Meet the
   community" widget on the start page (.member--person): one setting, both
   places, at Thomas's request (30 Sept 2026). The focus variant covers the
   portrait becoming part of a clickable card in the future; these cards are
   not clickable today, so it has nothing to attach to yet, but costs
   nothing to have ready. */
.lakefront-page .lf-portrait img, .lf-portrait img { filter: grayscale(100%) brightness(1.08) contrast(0.96); transition: filter 420ms var(--ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  body.has-portrait-hover-colour .member--person:hover .lf-portrait img { filter: grayscale(0); }
  body.has-portrait-hover-colour .profile-card:hover .lf-portrait img { filter: grayscale(0); }
}
body.has-portrait-hover-colour .profile-card:focus-within .lf-portrait img,
body.has-portrait-hover-colour .member--person:focus-within .lf-portrait img { filter: grayscale(0); }
/* A clear focus indicator that does not depend on the colour setting.
   .profile-card's own focus ring now comes from .profile-card__link itself
   (the card's real link, added just above); this stays for the "Meet the
   community" widget, which has no link of its own. */
.member--person:focus-within { outline: 2px solid currentColor; outline-offset: 4px; }

/* Scroll cue: the word "Scroll" and an arrow, no pill. Client decision,
   24 September 2026. Same look through every step of the intro. */
.scroll-cue,
html[data-fragment="2"] .scroll-cue,
html[data-fragment="3"] .scroll-cue {
  width: auto;
  min-height: 0;
  padding: 8px 12px;
  gap: 8px;
  border: 0;
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--paper);
  font-size: 12px;
  letter-spacing: .18em;
  text-shadow: 0 1px 3px rgba(0,0,0,.45);
}
.scroll-cue:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.scroll-cue__arrow { margin-top: 0; font-size: 18px; }
@media (max-width: 720px) {
  .scroll-cue { width: auto; min-height: 0; padding: 8px 12px; font-size: 11px; }
}

/* Toned down further: still there to signal the hero continues, but it should
   not compete with the headline. Smaller and quieter at rest, full strength
   on hover and keyboard focus so it stays easy to find and use. */
.scroll-cue {
  font-size: 10px;
  letter-spacing: .15em;
  opacity: .55;
  transition: opacity 220ms var(--ease);
}
.scroll-cue:hover,
.scroll-cue:focus-visible {
  opacity: 1;
}
.scroll-cue[data-visible="0"] { opacity: 0; }
.scroll-cue__arrow { font-size: 14px; }
@keyframes cueBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(2px); }
}
@media (max-width: 720px) {
  .scroll-cue { font-size: 9px; }
}

/* Image and text: a quieter pause between the statement and Events.
   Text group left (limited width, vertically centred on the image), image right.
   No padding of its own: the statement above and Events below give the spacing. */
.moment {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 6vw, 110px);
  align-items: center;
  padding: 0 clamp(24px, 6vw, 96px);
  background: var(--paper);
}
.moment__copy { max-width: 30rem; }
.moment__copy .eyebrow { margin-bottom: clamp(18px, 2.4vw, 28px); }
.moment__title {
  margin: 0 0 clamp(16px, 2vw, 24px);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.5rem, 1.2rem + 3vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.moment__text {
  max-width: 36ch;
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.35rem);
  line-height: 1.5;
}
.moment__image { margin: 0; }
.moment__image img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: clamp(22px, 3vw, 38px); }
@media (max-width: 720px) {
  .moment { grid-template-columns: 1fr; gap: 32px; }
}

/* Meet the community: hidden candidates, card links, initials when no portrait. */
.community__rail .member[hidden] { display: none; }
.member__link { display: block; color: inherit; text-decoration: none; border-radius: clamp(20px, 2.5vw, 34px); }
.member__link:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.member__initials { display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(140deg, #a9aaa9, #5f6262); color: var(--paper); font: 300 clamp(2.5rem, 4vw, 5rem)/1 var(--serif); }
/* Space between the portrait and the name/role block: 12 px. The section grows by the same amount. */
.community__rail .member__meta { margin-top: 12px; }
/* Name and role read as one group: no margin between them, tighter line box on the name (1.2 instead of the inherited 1.55). */
.community__rail .member__name { margin-bottom: 0; line-height: 1.2; }

/* Footer links: readable text, a separate tap target of at least 44 × 44 px for
   every link, more space between links, and a focus ring that shows on the dark
   background. Same content and layout; no markup changes. */
.foot__links br { display: none; } /* each link on its own line instead */
.foot__grid .foot__links a {
  display: flex;
  align-items: center;
  width: fit-content;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  font-size: 15px;
  line-height: 1.3;
}
.foot__grid .foot__links a ~ a { margin-top: 6px; } /* the <br> between links sits in between, so ~ not + */
.foot__apply-cta a { font-size: 15px; }
/* Apply now: 20px more padding each side from 1024px (about 40px wider), kept on one line. Below 1024px the earlier padding stays; height, type, colours and the full-width mobile button are untouched. */
@media (min-width: 1024px) {
  .foot__apply-cta a { padding-inline: 42px; white-space: nowrap; }
}
.foot__social { margin-top: 14px !important; }
/* Column labels (Explore / Visit / Contact / Residency): larger and at full strength. Letter-spacing and uppercase stay as before. */
.foot__label { font-size: 14px; font-weight: 500; opacity: 1; }
/* `.foot .foot__label`, not `.foot__label` alone: `.foot p { margin: 0 }` is more specific and would otherwise cancel the spacing on desktop and mobile. */
.foot .foot__label { margin-bottom: 14px; }
/* Explore and Contact are followed by .foot__links, whose links already have tall tap targets (44px, text centred), so these two labels need only 4px to look as far from their first text line as Visit does. */
.foot__grid > :has(> .foot__links) > .foot__label { margin-bottom: 4px; }
.foot__apply .foot__label { margin-bottom: 18px; }
.foot__address { font-size: 15px; line-height: 1.65; }
.foot__bottom { font-size: 13px; opacity: .8; }
.foot a:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
  border-radius: 6px;
}
.foot__cta a:focus-visible,
.foot__apply-cta a:focus-visible { outline-offset: 4px; border-radius: 999px; }
.foot__newsletter a:focus-visible { outline-color: var(--text); } /* light background */

@media (max-width: 720px) {
  .foot__grid { gap: 44px; }
  .foot__grid .foot__links a { min-height: 48px; font-size: 17px; }
  .foot__grid .foot__links a ~ a { margin-top: 8px; }
  .foot__apply-cta a { font-size: 16px; }
  .foot__address { font-size: 16px; line-height: 1.7; }
  /* Bottom bar: more air between the rows and below the last line. Text, order and the shared copyright / Stockholm row are unchanged. */
  .foot__bottom {
    row-gap: 18px;
    padding-top: 32px;
    padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px));
  }
}

/* "The place in use" on mobile: the images scroll sideways only. The slide-in
   (translateY 42px) made the row taller than its box, so it also scrolled up and
   down, and images outside the screen could stay hidden. On mobile the images
   are shown at once; the slide-in stays on larger screens. */
@media (max-width: 720px) {
  .event-life__images { overflow-y: hidden; }
  .event-life__images figure[data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Text slot, pilot in About Lakefront: supporting text under the heading, in the
   start page's body text style, limited width. An empty slot is not output. */
.about__head { column-gap: 40px; row-gap: 0; margin-bottom: clamp(48px, 6vw, 88px); }
.about__head .lf-text {
  grid-column: 2;
  max-width: 33rem; /* 528 px, about 44 characters of body text per line, as in the approved example */
  margin: clamp(18px, 2vw, 28px) 0 0;
  font-family: var(--sans);
  font-size: var(--lf-lead-size); /* same lead level as the other intro texts */
  line-height: var(--lf-lead-lh);
}
.about__head .lf-text:empty { display: none; }
@media (max-width: 720px) {
  .about__head { row-gap: 0; }
  .about__head .lf-text { grid-column: 1; }
}

/* Lakefront cursor (assets/js/cursor.js). Yellow on dark surfaces, black on
   light ones. The system cursor is hidden only once the script runs
   (html.has-lf-cursor), only for a fine pointer, and never in text fields. */
.lakefront-cursor { display: none; }
@media (pointer: fine) {
  html.has-lf-cursor, html.has-lf-cursor body,
  html.has-lf-cursor a, html.has-lf-cursor button, html.has-lf-cursor [role="button"],
  html.has-lf-cursor summary, html.has-lf-cursor label, html.has-lf-cursor select { cursor: none; }
  html.has-lf-cursor input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
  html.has-lf-cursor textarea, html.has-lf-cursor [contenteditable="true"] { cursor: text; }
  /* The dot is drawn in currentColor: yellow on dark surfaces, black on light ones.
     On links and buttons it becomes a thin ring, so the label stays readable. */
  .lakefront-cursor {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: var(--yellow);
    background: currentColor;
    box-shadow: inset 0 0 0 2px currentColor;
    pointer-events: none;
    z-index: 99999;
    opacity: 0;
    transform: translate3d(-100px, -100px, 0);
    transition: width 180ms ease, height 180ms ease, background-color 180ms ease, color 180ms ease, opacity 180ms ease;
    will-change: transform;
  }
  .lakefront-cursor.is-visible { opacity: 1; }
  .lakefront-cursor.is-dark { color: var(--yellow); }
  .lakefront-cursor.is-light { color: #000; }
  .lakefront-cursor.is-media { box-shadow: inset 0 0 0 2px currentColor, 0 0 0 1px rgba(0, 0, 0, .55); }
  .lakefront-cursor.is-hovering { width: 48px; height: 48px; background: transparent; }
  .lakefront-cursor.is-hovering.is-media { box-shadow: inset 0 0 0 2px currentColor, 0 0 0 1px rgba(0, 0, 0, .55), inset 0 0 0 3px rgba(0, 0, 0, .55); }
  .lakefront-cursor.is-text { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lakefront-cursor { transition: none; }
}

/* About Lakefront columns with text links (p.text-link, the site's link style).
   The links sit below the descriptions without moving anything else: each column
   grows by exactly one link row, and The Ecosystem (no link) keeps the same empty
   row, so the four titles and descriptions stay where they were and on one line. */
/* The link paragraph takes the site's text size and line height, like every other
   text link (not the smaller column text); one link row = 28px padding + one line. */
.about__pillars p.about__link { font-size: inherit; line-height: inherit; }
.about__pillars { --lf-link-row: calc(28px + 1.55em); }
.about__pillars:has(.about__link) article { min-height: calc(360px + var(--lf-link-row)); }
.about__pillars:has(.about__link) article:not(:has(.about__link))::after { content: ""; display: block; flex: none; height: var(--lf-link-row); }
@media (max-width: 720px) {
  .about__pillars:has(.about__link) article { min-height: calc(350px + var(--lf-link-row)); }
}
@media (min-width: 721px) and (max-width: 1400px) {
  /* Here the first column is too narrow for "Explore the place →" on one line, so the
     link may wrap like any text, and every link row reserves two lines. The titles and
     descriptions stay where they were and on one line; no link crosses a divider. */
  .about__pillars { --lf-link-row: calc(28px + 3.1em); }
  .about__pillars p.about__link { box-sizing: border-box; min-height: var(--lf-link-row); }
}

/* About Lakefront: each large serif heading stays inside its own column, whole
   (never hyphenated). From 1100 px the four columns are as wide as their words
   (unequal: Programme widest, Place narrowest). The words keep their current size
   unless the four of them would not fit the section; then they take the largest size
   that fits: the four words measure 14.6 × the font size together, and the column
   padding takes 168 px (14.75 includes a 1 % margin). Between 721 and 1279 px the
   row swipes, like the existing mobile layout, and the words keep their size. */
.about__pillars { container-type: inline-size; }
@media (min-width: 1280px) {
  .about__pillars h3 strong { font-size: min(clamp(4rem, 5.7vw, 7rem), calc((100cqi - 168px) / 14.75)); white-space: nowrap; }
}
@media (min-width: 721px) and (max-width: 1279px) {
  .about__pillars { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .about__pillars article { flex: 0 0 44%; scroll-snap-align: start; }
}
/* Start page About row: hide the browser's scroll indicator (iOS/Safari shows a white line while swiping). Scrolling and snapping are unchanged. */
#about .about__pillars {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#about .about__pillars::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Hover tilt on the column's content, not on the column itself: the text tilts as
   before, while the column's divider stays put and ends exactly at the top rule. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .about__pillars article:nth-child(n):hover { transform: none; }
  .about__pillars article > * { transition: transform 280ms var(--ease); transform-origin: center bottom; }
  .about__pillars article:nth-child(odd):hover > * { transform: translateY(-10px) rotate(-.7deg); }
  .about__pillars article:nth-child(even):hover > * { transform: translateY(-10px) rotate(.7deg); }
}

/* About Lakefront on mobile: a carousel of four complete panels, like People.
   Every panel is 76vw wide and never grows with its word, so one panel is readable
   and the next one peeks in. Each serif word keeps its current mobile size if it
   fits its panel, and otherwise shrinks just enough to fit whole on one line
   (never hyphenated). Word widths per font size: place 2.21, people 2.85,
   programme 5.10, ecosystem 4.44 (divisors below add a 1.5 % margin).
   Panel text width: 76vw minus padding (24px on the first panel, 48px on the others). */
@media (max-width: 720px) {
  .about__pillars article { flex: 0 0 76vw; min-width: 0; }
  .about__pillars article:nth-child(1) h3 strong { font-size: min(clamp(4.8rem, 21vw, 7rem), calc((76vw - 24px) / 2.25)); }
  .about__pillars article:nth-child(2) h3 strong { font-size: min(clamp(4.8rem, 21vw, 7rem), calc((76vw - 48px) / 2.9)); }
  .about__pillars article:nth-child(3) h3 strong { font-size: min(clamp(4.8rem, 21vw, 7rem), calc((76vw - 48px) / 5.18)); }
  .about__pillars article:nth-child(4) h3 strong { font-size: min(clamp(4.8rem, 21vw, 7rem), calc((76vw - 48px) / 4.51)); }
  .about__pillars h3 strong { white-space: nowrap; }
}

/* Mobile carousels: one shared control pattern for Events, The place in use, Meet the
   community and Four things make the place work (markup is created in lakefront.js).
   Left: position as "01 / 03". Right: previous and next together, always both there,
   the one that cannot move is disabled (dimmed, still recognisable). Round 56 px
   buttons with a clear outline, visible without hover or focus. Colours are inherited,
   so every section keeps its own palette. Up to 1023 px (phones and small tablets),
   and only when the row really overflows; the script hides the controls otherwise.
   Desktop layouts and the carousels' content are untouched. */
.lf-rail-nav { display: none; }
@media (max-width: 1023px) {
  .lf-rail-nav:not([hidden]) {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin-top: 16px;
  }
  .lf-rail-nav__count {
    margin: 0; font: 500 15px/1 var(--sans); letter-spacing: .08em;
    font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .lf-rail-nav__status {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .lf-rail-nav__buttons { display: flex; gap: 12px; margin-left: auto; }
  .lf-rail-nav .lf-rail-nav__btn,
  .lf-rail-nav .lf-rail-nav__btn:hover,
  .lf-rail-nav .lf-rail-nav__btn:focus {
    display: grid; place-items: center; flex: none; box-sizing: border-box;
    width: 56px; height: 56px; min-width: 0; margin: 0; padding: 0;
    border: 1.5px solid currentColor; border-radius: 50%;
    background: transparent; color: inherit; box-shadow: none; line-height: 1;
    cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    transition: background-color 160ms var(--ease), opacity 160ms var(--ease);
  }
  .lf-rail-nav .lf-rail-nav__btn:active:not(:disabled) { background: color-mix(in srgb, currentColor 14%, transparent); }
  .lf-rail-nav .lf-rail-nav__btn:disabled { opacity: .3; cursor: default; }
  .lf-rail-nav__btn svg { display: block; width: 24px; height: 24px; }

  /* A row with nothing focusable inside is itself reachable by keyboard. */
  .program-grid[tabindex]:focus-visible,
  .event-life__images[tabindex]:focus-visible,
  .about__pillars[tabindex]:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

  /* Meet the community: the controls sit in the page gutter, like its heading. */
  .community .lf-rail-nav { padding-inline: clamp(24px, 6vw, 96px); }
  /* The desktop arrows in the heading are replaced by the shared controls. */
  .community__controls { display: none; }

  /* The controls sit 16 px below each row's content (rows have their own bottom padding). */
  .program-grid + .lf-rail-nav { margin-top: -16px; }        /* the row has 32 px bottom padding */
  .event-life__images + .lf-rail-nav { margin-top: -6px; }   /* the row has 22 px bottom padding */
  .community__rail + .lf-rail-nav { margin-top: -8px; }      /* the row has 24 px bottom padding */

  /* Every item snaps, and fast swipes stop at every item. */
  .about__pillars article,
  .community__rail .member { scroll-snap-stop: always; }
}
@media (max-width: 720px) {
  .program-grid > *,
  .event-life__images figure,
  .institute-people article { scroll-snap-stop: always; }

  /* Item widths, from each component's existing size: just enough to show the next item. */
  .program-grid { gap: 16px; }                                                    /* was 24px */
  /* Start page events row: hide the browser's scroll indicator (iOS/Safari shows a white line while swiping). Scrolling and snapping are unchanged. */
  #events .program-grid { scrollbar-width: none; -ms-overflow-style: none; }
  #events .program-grid::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .program-card, .program-card:nth-child(n) { flex-basis: calc(100vw - 86px); }  /* was 82vw: about 20 px of the next card shows */
  .event-life__images figure,
  .event-life__images figure:nth-child(2) { flex-basis: 70vw; }                  /* was 78vw */
  .institute-people article { flex-basis: 68vw; }                                /* unchanged from before: Emerge Institute stacks, no controls */
  /* Event cards are shown in their finished state at once on mobile (as the first card
     already is): the entrance animation only starts once a card is well on screen, so a
     card that only peeks in would otherwise stay invisible. Desktop keeps the animation. */
  .program-card[data-reveal] { opacity: 1; transform: rotate(var(--card-rotation, 0deg)); transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lf-rail-nav .lf-rail-nav__btn { transition: none; }
}

/* Events on the start page: cards filled from Lakefront's Luma calendar (inc/luma.php).
   Remaining cards keep their demo content and carry the same "Demo" mark as on the
   Events page. The title of a live card links to the event on Luma. */
.program-card .program-card__badge { max-width: none; font-size: .68rem; line-height: 1.2; }
.program-card__badge { align-self: flex-start; margin: 0 0 18px !important; padding: 5px 11px; border: 1px dashed currentColor; border-radius: 999px; font-size: .68rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.program-card__link { color: inherit; text-decoration: none; }
.program-card__link:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .12em; }
.program-card__link:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 2px; }
/* Long Luma titles (over 40 characters) get a smaller title size, so the card keeps its
   proportions; short titles keep the full size. */
.program-card.is-long-title h3 { font-size: clamp(2rem, 2.4vw, 2.8rem); line-height: .95; letter-spacing: -.03em; }
@media (max-width: 720px) {
  .program-card.is-long-title h3 { font-size: 1.9rem; line-height: .95; }
}

/* Global text-selection colour, all Lakefront pages. */
::selection {
  background: #FFFF54;
  color: #160835;
}

/* On persistent yellow surfaces the default selection colour (yellow) would be
   almost invisible, so it inverts there: dark background, yellow text. Scoped to
   the site's existing yellow-section classes and everything inside them (not
   yellow only on hover/focus, which stays with the default selection colour). */
.about ::selection,
.about-editorial--yellow ::selection,
.program-card--yellow ::selection,
.event-card--yellow ::selection,
.sub-band--yellow ::selection,
.people-directory--yellow ::selection,
.story--small ::selection,
.space-tile--small ::selection,
.member__portrait--accent ::selection {
  background: #160835;
  color: #FFFF54;
}

/* "Text link" block style (registered in inc/editor.php): reproduces
   text-link + text-link--dark exactly -- same spacing, weight, underline,
   hover and focus -- as one selectable style, including the same automatic
   switch to paper-coloured text on dark burgundy sections. A new class;
   none of the existing .text-link rules above are changed. */
p.is-style-text-link {
  display: block;
  margin: 0;
  padding-top: 28px;
  font-weight: 400;
  text-decoration: none;
  color: var(--text);
  /* A chosen style must look the same everywhere it's used, including inside
     containers (like a pull-quote) that set their own large paragraph font.
     Reasserts the site's base type explicitly, the same way it already
     renders where no such container rule existed. */
  font-family: var(--sans) !important;
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.125rem) !important;
  line-height: 1.55 !important;
  max-width: none !important;
}
.is-style-text-link a {
  color: inherit;
  font-weight: 700;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
  text-decoration-color: rgba(30, 30, 30, .48);
  transition: color 180ms var(--ease), text-decoration-color 180ms var(--ease), text-underline-offset 180ms var(--ease);
}
.is-style-text-link a:hover,
.is-style-text-link a:focus-visible {
  color: var(--text);
  text-decoration-color: currentColor;
  text-underline-offset: 10px;
}
.section--burgundy .is-style-text-link a {
  color: var(--paper);
  text-decoration-color: rgba(245, 241, 234, .48);
}
.section--burgundy .is-style-text-link a:hover,
.section--burgundy .is-style-text-link a:focus-visible {
  color: var(--paper);
  text-decoration-color: currentColor;
}

/* Back to top: one fixed button, bottom-right, on every page that uses this
   design system. Hidden at the top of the page and again near the footer
   (toggled by lakefront.js), so it never sits over footer content or the
   Apply button; [hidden] gets display:none for free from the browser. */
.back-to-top {
  position: fixed;
  right: 20px;
  right: clamp(16px, 2.4vw, 28px);
  /* Same simple form as `right` above, which is known to hold in Safari.
     Nothing here uses calc(), env(), max() or var(): a declaration with
     var() cannot fall back to the line before it (it is only found invalid
     later and becomes `auto`), which is how the button ended up flush with
     the bottom of the Safari window. The iPhone home-indicator inset goes in
     its own property, so if a browser ever rejects it only that is lost,
     not the position. back-to-top.js raises the button above the footer's
     bottom bar by setting `bottom` in pixels. */
  bottom: 24px;
  bottom: clamp(16px, 2.4vw, 28px);
  margin-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 28;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: var(--paper);
  color: var(--text);
  box-shadow: 0 2px 10px rgba(0,0,0,.22);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 220ms var(--ease), transform 220ms var(--ease), background 180ms var(--ease), color 180ms var(--ease);
}
.back-to-top[data-visible="1"] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top svg { width: 20px; height: 20px; }
.back-to-top:hover { background: var(--yellow); }
.back-to-top:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: opacity 1ms linear; transform: none; }
}
@media (max-width: 720px) {
  .back-to-top { width: 46px; height: 46px; }
  .back-to-top svg { width: 18px; height: 18px; }
}

/* ---------- Footer links: 16px on desktop (17px on mobile), underlined like the site's text links ----------
   Only the clickable text links in the footer grid (Explore, and the email,
   LinkedIn and Instagram under Contact). Everything else in the footer is
   untouched: the column headings (.foot__label) are plain paragraphs and stay
   as they are, with no underline, hover or pointer; the Apply now pill is its
   own button style (.foot__apply-cta).
   The underline is the site's own text-link expression: 1px solid, 7px below
   the text, at 48% strength, going full strength and 10px below on hover and
   keyboard focus (as .text-link a and .is-style-text-link a do elsewhere).
   The 48% is taken from the text colour itself, so it follows light or dark
   footer text; the plain rgba line first is the fallback for a browser
   without color-mix(). The yellow hover colour and the focus ring that were
   already here are kept. */
.foot__grid .foot__links a {
  font-size: 16px;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
  text-decoration-color: rgba(245, 241, 234, .48);
  text-decoration-color: color-mix(in srgb, currentColor 48%, transparent);
  transition: color 180ms var(--ease), text-decoration-color 180ms var(--ease), text-underline-offset 180ms var(--ease);
}
.foot__grid .foot__links a:hover,
.foot__grid .foot__links a:focus-visible {
  text-decoration-color: currentColor;
  text-underline-offset: 10px;
}
/* Contact: the email, LinkedIn and Instagram read as one list, spaced exactly
   like the Explore links (6px between, 8px on mobile). LinkedIn and Instagram
   sit in their own paragraph, which used to add an extra 14px before them. */
.foot__grid .foot__links + .foot__links { margin-top: 6px !important; }
@media (max-width: 720px) {
  .foot__grid .foot__links + .foot__links { margin-top: 8px !important; }
  /* 16px is the desktop size; on mobile the links stay at the 17px they had before. */
  .foot__grid .foot__links a { font-size: 17px; }
}

/* ---------- Hero story lines (v2.24.0) ----------
   lakefront.js changes the lines on a timer (Customize > Hero, default 10 seconds) and sets --o
   (opacity) and --t (-1 above, 0 resting, +1 below) on each one. The line that arrives waits for
   the one that leaves, so two lines are never on screen on top of each other. The text can take
   the pointer and keyboard focus because hover and focus pause the timer; the focus ring is drawn
   on the visible line. Reduced motion keeps its own static layout below. */
@media (prefers-reduced-motion: no-preference) {
  .fragment {
    --o: 0;
    --t: 1;
    --lift: .32em;
    opacity: var(--o);
    transform: translate(-50%, calc(var(--t) * var(--lift)));
    transition: opacity 360ms var(--ease), transform 700ms var(--ease);
    will-change: opacity, transform;
  }
  .fragment.is-active {
    pointer-events: auto;
    transition: opacity 600ms var(--ease) 360ms, transform 800ms var(--ease) 360ms;
  }
  .fragment[data-i="0"] { --o: 1; --t: 0; }
  .fragments:focus { outline: none; }
  .fragments:focus-visible .fragment.is-active { outline: 1px solid var(--paper); outline-offset: 14px; }
  .paper-rise,
  .hero-video { transition: none; }
}

/* ---------- Hero progress + scroll cue: three clear steps (v2.22.4) ----------
   The rail fills one third per story line (JS sets --fill and data-last in render(), the
   same place that sets data-fragment, so rail, number, cue text and story line always agree).
   Only transform and opacity animate. Nothing here changes any box size. */
.progress {
  --fill: .3333;
  background: rgba(0,0,0,.52);                 /* was .34: too weak over bright video frames */
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
}
.progress__num { display: inline-block; }
.progress__line {
  position: relative;
  width: 2px;                                    /* 1px was too thin to read a partial fill */
  overflow: hidden;
  opacity: 1;
  background: rgba(245,241,234,.38);            /* the unfilled track */
}
.progress__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--paper);
  transform-origin: top;
  transform: scaleY(var(--fill));
  transition: transform 420ms var(--ease);
}

/* Both labels share one grid cell: the button keeps the width of the longer one.
   Older rules (html[data-fragment="2"] .scroll-cue, from the pill design) still enlarged the
   cue to 12px on the last step, which made it jump in size. One size on every step. */
html[data-fragment] .scroll-cue { font-size: 10px; letter-spacing: .15em; padding: 8px 12px; }
@media (max-width: 720px) {
  /* 12px: readable on a phone. The longer label is about 245px wide at this size, so it fits down to 320px screens. */
  html[data-fragment] .scroll-cue { font-size: 12px; letter-spacing: .12em; max-width: calc(100vw - 32px); }
  .scroll-cue__arrow { font-size: 16px; }
}
.scroll-cue { opacity: .85; }
.scroll-cue:hover,
.scroll-cue:focus-visible { opacity: 1; }
.scroll-cue[data-visible="0"] { opacity: 0; }
.scroll-cue__label { display: grid; justify-items: center; }
.scroll-cue__text {
  grid-area: 1 / 1;
  transition: opacity 260ms var(--ease), transform 260ms var(--ease), visibility 0s linear 0s;
}
.scroll-cue__text[data-state="last"],
.scroll-cue[data-last="1"] .scroll-cue__text[data-state="next"] {
  opacity: 0;
  visibility: hidden;                           /* also keeps the hidden text out of the accessible name */
  transform: translateY(4px);
  transition-delay: 0s, 0s, 260ms;
}
.scroll-cue[data-last="1"] .scroll-cue__text[data-state="last"] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
  .progress__line::after,
  .scroll-cue__text { transition: none; }
}

/* ---------- Reduced motion: the static hero ----------
   With "Reduce motion" on (an iPhone or Android accessibility setting) the scroll story is skipped and the
   intro is a static spread: the video (paused by lakefront.js), then the three story lines as plain text
   below it, before the next section. This is the only place that describes that layout. It sits after every
   other hero rule, including the Post-workshop direction block, so it wins by order. It uses only the media
   query: no data-fragment, no scroll state, no JavaScript. */
@media (prefers-reduced-motion: reduce) {
  html .intro { height: auto; } /* html: a later plain .intro rule (e.g. in Additional CSS) cannot bring a tall hero back */
  .stage {
    position: relative;
    height: auto;
    min-height: 100vh;
    background: var(--paper);
  }
  .hero-video { position: relative; height: 60vh; }
  .scrim { display: none; }
  .stage .fragments {
    display: block;
    position: relative;
    inset: auto;
    padding: 56px clamp(24px, 6vw, 96px) 72px;
    color: var(--text);
    text-align: left;
  }
  .stage .fragment {
    position: relative;
    left: auto;
    width: auto;
    max-width: 22ch;
    margin: 0 0 .6em;
    opacity: 1;
    transform: none;
    font-size: clamp(2.25rem, 1rem + 5vw, 4.5rem);
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--text);
    text-shadow: none;
    text-wrap: balance;
  }
  /* The header is a paper bar here, so the white logo has to be black, whatever the scroll state says. */
  .brand-cue {
    opacity: 1;
    pointer-events: auto;
    filter: invert(1);
    text-shadow: none;
  }
}

/* ==========================================================================
   Typography system (approved after the visual comparison, v2.22.9)
   Lead paragraph level, shared by the start page and the subpages. Body text
   keeps its base size. Eyebrows and other small labels are deliberately NOT
   touched here. Heading levels for subpages are in subpages.css.
   ========================================================================== */
:root {
  --lf-lead-size: clamp(1.15rem, 1.05rem + .4vw, 1.4rem); /* 22.6px at 1440, 18.4px at 390 */
  --lf-lead-lh: 1.5;
}
.lede:not(.eyebrow),
.moment__text,
.about__text,
.community__intro,
.institute__body p:not(.eyebrow) { font-size: var(--lf-lead-size); line-height: var(--lf-lead-lh); }

/* ---------- Start page typography alignment (scoped to the start page only) ----------
   Brings the start page onto the same type scale as the subpages. Every selector is
   prefixed with the start page wrapper (.lakefront-page without --sub), so subpages,
   the footer and the shared rules above are untouched.
   Body:    clamp(1.05rem,1.4vw,1.3rem) / 1.5 / 400   (About)
   Editorial heading: clamp(4.2rem,7vw,9rem) / .9      (About "Our invitation" scale)
   Section heading:   clamp(3rem,6vw,7rem) / .92 / 400 */
.lakefront-page:not(.lakefront-page--sub) :is(
	.moment__text,
	.events-head .lede,
	.event-life__copy > p:last-child,
	.space__copy .lede,
	.community__intro,
	.institute__body p:not(.institute__link),
	.about__head .about__text,
	.visit__content .lede
) { font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.5; font-weight: 400; }
/* Residency body: size and line-height only; it keeps the weight (500) set by the section colour CSS. */
.lakefront-page:not(.lakefront-page--sub) #apply .lede { font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.5; }

/* Editorial display headings (Events, Emerge Institute): exact "Our invitation" spec, Light 300.
   Deliberate exception; ordinary section headings below stay Regular 400. */
.lakefront-page:not(.lakefront-page--sub) :is(
	.events-head .display,
	.institute__body h2
) { font-size: clamp(4.2rem, 7vw, 9rem); line-height: .9; font-weight: 300; letter-spacing: -.055em; }
/* Events: the width limit gives the desktop shape "Come for an event. / Leave with a new / connection"
   (16ch is about 9.4em here, between the 7.1em of the first line and the 11em of the full second line).
   On a phone the column is narrower than this, so the limit has no effect there. */
.lakefront-page:not(.lakefront-page--sub) .events-head .display { max-width: 16ch; }
@media (max-width: 640px) {
	.lakefront-page:not(.lakefront-page--sub) :is(
		.events-head .display,
		.institute__body h2
	) { font-size: clamp(3.2rem, 13vw, 4.2rem); }
}

.lakefront-page:not(.lakefront-page--sub) :is(
	.moment__title,
	.space__copy .display,
	.get-involved__head h2,
	.about__head h2,
	.visit__content .display,
	#apply .display
) { font-size: clamp(3rem, 6vw, 7rem); line-height: .92; font-weight: 400; }

.lakefront-page:not(.lakefront-page--sub) .institute__body p.institute__link,
.lakefront-page:not(.lakefront-page--sub) .institute__body p.institute__link a { font-size: 18px; font-weight: 500; }

/* Residency: closer link under the body text. The .lede bottom margin and the text-link top padding
   used to add up; the gap is now the link padding only. Heading-to-body spacing is untouched. */
.lakefront-page:not(.lakefront-page--sub) #apply .lede { margin-bottom: 0; }
.lakefront-page:not(.lakefront-page--sub) #apply p.text-link { padding-top: clamp(18px, 2vw, 24px); }

/* ---------- Life is better shared (start page, after Living at Lakefront) ----------
   Same quiet paper ground, type and image language as "The place in use": serif heading at the
   section heading size, lead text beside it, rounded image corners, small uppercase labels.
   Desktop: three photographs in an asymmetric row. The left one starts lower and is medium tall, the
   middle one starts highest and is the tallest, the right one starts lower and is a little shorter
   than the middle one. Shapes belong to the position in the row (images are cropped to the frame, the
   focus point set per image keeps the subject in view). Mobile: stacked in the same order, each image
   in its own proportions with nothing cropped. No carousel, no shadows, no extra colour. */
.life-shared {
  padding: clamp(24px, 4vw, 64px) clamp(24px, 6vw, 96px) clamp(40px, 6vw, 96px);
}
.life-shared__copy {
  display: grid;
  grid-template-columns: minmax(180px, .35fr) 1fr;
  gap: clamp(32px, 6vw, 90px);
  margin-bottom: clamp(55px, 7vw, 90px);
}
.life-shared__copy .eyebrow { margin: 8px 0 0; }
.life-shared__title {
  max-width: 14ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3rem, 6vw, 7rem);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.04em;
}
.life-shared__lede {
  grid-column: 2;
  max-width: 40ch;
  margin: -38px 0 0;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  line-height: 1.5;
  font-weight: 400;
}
.life-shared__images {
  display: grid;
  grid-template-columns: 1.25fr .9fr 1.2fr;
  column-gap: clamp(24px, 4.2vw, 64px);
  align-items: end;
}
.life-shared__images figure { margin: 0; }
.life-shared__images img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(22px, 3vw, 38px);
  object-fit: cover;
}
.life-shared__images figcaption {
  margin-top: 11px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* Images are black and white like every image on the start page (.lakefront-page img); the B&W / Colour button
   in the editor switches one to colour (rule further up). The shape belongs to the slot (position in the row):
   the bottoms share one line (and so do the captions), the different heights make the tops step. The left one
   starts lowest, the middle one highest, the right one in between. */
@media (min-width: 721px) {
  .life-shared .life-slot-1 img { aspect-ratio: 6 / 5; }
  .life-shared .life-slot-2 img { aspect-ratio: 2 / 3; }
  .life-shared .life-slot-3 img { aspect-ratio: 1 / 1; }
}
@media (max-width: 900px) {
  .life-shared__copy { grid-template-columns: 1fr; }
  .life-shared__lede { grid-column: 1; margin: 0; }
}
@media (max-width: 720px) {
  .life-shared__images { display: flex; flex-direction: column; gap: clamp(32px, 9vw, 48px); }
  /* No aspect-ratio here: each picture keeps its own proportions, nothing is cropped. */
}

/* Life is better shared: the same motion as "The place in use" (entrance as the images scroll into view, a slight
   zoom on hover), only for visitors who have not asked for reduced motion. The entrance state is set by lakefront.js
   (data-reveal), so without script the images are simply visible. */
.life-shared__images img { transition: transform 420ms var(--ease); }
@media (prefers-reduced-motion: no-preference) {
  .life-shared__images figure[data-reveal] {
    opacity: 0;
    transform: translateY(42px);
    transition: opacity 650ms var(--ease), transform 800ms var(--ease);
  }
  .life-shared__images figure[data-reveal]:nth-child(2) { transition-delay: 110ms; }
  .life-shared__images figure[data-reveal]:nth-child(3) { transition-delay: 220ms; }
  .life-shared__images figure[data-reveal].is-inview { opacity: 1; transform: translateY(0); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .life-shared__images figure.is-inview:hover img { transform: scale(1.025); }
}


/* Footer newsletter: "Read the newsletter →" is the secondary CTA. Outlined pill on the cream
   band, solid black on hover. Scoped to .foot__cta so the Beehiiv subscribe form (and its
   fallback link) are untouched. The 2px border is taken out of the padding, so the pill keeps
   its previous outer size (desktop and the 54px mobile tap target). */
.foot__newsletter .foot__cta a {
  box-sizing: border-box;
  padding: 12px 22px;
  background: transparent;
  color: var(--text);
  border: 2px solid var(--text);
}
.foot__newsletter .foot__cta a:hover {
  background: var(--text);
  color: #fff;
}
.foot__newsletter .foot__cta a:focus-visible {
  background: transparent;
  color: var(--text);
  outline: 3px solid var(--text);
  outline-offset: 4px;
}
.foot__newsletter .foot__cta a:hover:focus-visible {
  background: var(--text);
  color: #fff;
}
@media (max-width: 720px) {
  .foot__newsletter .foot__cta a { padding: 13px 20px; }
}