/* ---------------------------------------------------------------
   Ripples in AIMC — CSCW 2026 workshop

   Type.   Lato throughout, including the page title. The serif is not a
           heading style at all — it belongs to the word "Ripples", which
           is the mark, and travels with it. "in AIMC" is the qualifier
           and is set apart from the name so a future workshop can swap
           it. Lato ships 100/300/400/700/900 and no 500 or 600, so
           anything asking for those synthesises; the hierarchy here is
           built from size, colour and case, with weight only 400 or 700.

   Space.  One scale, and the rule that separation between sections must
           read as clearly larger than separation within them. Sections
           sit 144px apart; blocks inside a section, 44px.

   Colour. Teal carries the page, a muted amber marks two things, and the
           running text is dark enough to be read rather than skimmed
           past. Warm paper, cool ink.
   --------------------------------------------------------------- */

:root {
  /* --- colour ------------------------------------------------- */
  --teal: #09708b;
  --teal-deep: #05566d;
  --teal-line: rgba(9, 112, 139, 0.22);
  --teal-wash: rgba(9, 112, 139, 0.07);
  --amber: #bf7a33;
  --amber-wash: rgba(191, 122, 51, 0.14);

  --ink: #22292e;        /* headings, and anything emphasised */
  --body: #333d44;       /* running text */
  --muted: #57626a;      /* affiliations, captions, nav at rest */
  --line: rgba(34, 41, 46, 0.13);

  --ground: #fefdfb;   /* barely warm, close to white */
  --surface: #ffffff;

  /* --- type ---------------------------------------------------- */
  --sans: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  --t-micro: 12px;   /* the one letterspaced label */
  --t-meta: 14px;    /* nav, dates, affiliations, footer */
  --t-body: 17px;    /* prose, lists, bios — one size, no near-misses */
  --t-h4: 19px;
  --t-h3: 24px;
  --t-h2: 32px;
  --t-hero: clamp(28px, 3.7vw, 46px);

  /* --- space --------------------------------------------------- */
  --s-section: 92px;   /* top and bottom, so 184px between sections */
  --s-block: 44px;     /* between blocks within a section */
  --s-head: 26px;      /* a heading to its own content */
  --s-tight: 16px;

  --page: 1060px;
  --nav-h: 62px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 28px);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--ground);
  color: var(--body);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--teal-wash); }

.inner { width: 88%; max-width: var(--page); margin: 0 auto; }

.label {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
}


/* ================= THE MARK =================

   "Ripples" is the identity and carries the serif wherever it appears.
   "in AIMC" is context, not name — set in the sans, small and spaced, so
   the same lockup works for whatever the next one is in. Everything is
   sized in em, so the whole mark scales from one font-size. */

.ripples-mark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.42em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}

.rm-glyph {
  flex: none;
  width: 1.05em;
  height: 1.05em;
  align-self: center;
  margin-right: 0.06em;
}

.rm-glyph circle { fill: none; stroke: var(--teal); stroke-width: 1.7; }
.rm-glyph circle:first-child { fill: var(--amber); stroke: none; }
.rm-glyph circle:last-child { stroke: var(--teal-line); }

.rm-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1em;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.rm-qual {
  font-family: var(--sans);
  font-size: 0.48em;
  font-weight: 700;
  color: var(--muted);
  transform: translateY(-0.14em);
}

/* ================= HEADER ================= */

.nav {
  position: fixed;
  top: 0; left: 0;
  z-index: 100;
  width: 100%;
  background: rgba(254, 253, 251, 0.9);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.nav .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  height: var(--nav-h);
}

.wordmark { font-size: 25px; }

.nav ul { display: flex; gap: 26px; list-style: none; }

/* Hidden until the phone breakpoint, where the five links stop fitting.
   The middle bar is short at rest — three unequal lengths, like the
   rings — and the outer two cross into an X when the menu is open. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: -8px;
  padding: 0;
  background: none;
  border: none;
  color: var(--ink);
  cursor: pointer;
}

.nav-toggle .bars {
  position: relative;
  display: block;
  width: 20px;
  height: 14px;
}

.nav-toggle .bars i {
  position: absolute;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.3s cubic-bezier(0.3, 0.7, 0.3, 1),
              opacity 0.2s, width 0.3s;
}

.nav-toggle .bars i:nth-child(1) { top: 0; width: 20px; }
.nav-toggle .bars i:nth-child(2) { top: 6px; width: 13px; }
.nav-toggle .bars i:nth-child(3) { top: 12px; width: 20px; }

.nav.open .nav-toggle { color: var(--teal); }
.nav.open .nav-toggle .bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav.open .nav-toggle .bars i:nth-child(2) { opacity: 0; transform: translateX(-6px); }
.nav.open .nav-toggle .bars i:nth-child(3) { width: 20px; transform: translateY(-6px) rotate(-45deg); }

.nav ul a {
  display: block;
  padding: 6px 0;
  color: var(--muted);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  transition: color 0.22s;
}

/* One dot under the label — the centre of the ripple, nothing around it.
   The section you are in gets it solid; hovering any other link brings up
   a lighter one, so the two states stay distinguishable. */
.nav ul a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--teal);
  opacity: 0;
  transform: scale(0.3);
  transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.3s;
}

.nav ul a.current { color: var(--ink); }
.nav ul a.current::after { opacity: 1; transform: scale(1); }
.nav .short { display: none; }

/* ================= HERO ================= */

.hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--nav-h) + 78px) 0 var(--s-section);
  text-align: center;
}

/* The title sits at the epicentre. */
.ripple-field {
  position: absolute;
  top: calc(var(--nav-h) + 210px);
  left: 50%;
  translate: -50% -50%;
  width: min(190vw, 1600px);
  aspect-ratio: 1;
  pointer-events: none;
  z-index: 0;
}

.ripple-field svg { width: 100%; height: 100%; overflow: visible; }

.ripple-field circle {
  fill: none;
  stroke: var(--teal);
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
}

/* Resting values, which is what shows under reduced motion. --peak is the
   same number, for the loop to animate up to. Stroke thins as the rings
   widen, the way a real ripple loses energy on its way out. */
.ripple-field circle:nth-of-type(1) { opacity: 0.48; --peak: 0.48; stroke-width: 3.6; }
.ripple-field circle:nth-of-type(2) { opacity: 0.41; --peak: 0.41; stroke-width: 3.0; }
.ripple-field circle:nth-of-type(3) { opacity: 0.34; --peak: 0.34; stroke-width: 2.5; }
.ripple-field circle:nth-of-type(4) { opacity: 0.26; --peak: 0.26; stroke-width: 2.1; }
.ripple-field circle:nth-of-type(5) { opacity: 0.20; --peak: 0.20; stroke-width: 1.7; }
.ripple-field circle:nth-of-type(6) { opacity: 0.14; --peak: 0.14; stroke-width: 1.4; }

.hero .inner { position: relative; z-index: 1; }

.hero .ripples-mark { font-size: 31px; margin-bottom: 24px; }
.hero .rm-qual { color: var(--teal); }

/* Sans, like everything else — the serif belongs to the mark, not to
   headings. Size and weight carry this instead. */
/* No cap — the title runs the full content width, so it lines up with the
   sections below rather than sitting in a narrower well of its own. */
.hero h1 {
  margin: 0 auto 20px;
  font-size: var(--t-hero);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.022em;
  color: var(--ink);
}

.hero h1 .mark { color: var(--teal); }

.hero .venue {
  color: var(--muted);
  font-size: 16px;
  font-weight: 700;
}

/* Fills the content width, like every other block on the page. */
.hero img {
  display: block;
  width: 100%;
  height: auto;
  margin: 44px auto 0;
  border-radius: 18px;
}

.actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 44px; }

.action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-width: 262px;
  height: 54px;
  padding: 0 26px;
  border-radius: 12px;
  font-size: var(--t-body);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.action svg {
  flex: none; width: 21px; height: 21px;
  fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}

.action.primary { background: var(--teal); border: 2px solid var(--teal); color: #fff; }
.action.secondary { background: var(--surface); border: 2px solid var(--teal-line); color: var(--teal); }

/* ================= SECTIONS ================= */

.section { padding: var(--s-section) 0; }

/* A fleuron rather than a rule: the mark itself, centred in the gap
   between sections, the way a printer punctuates a break. */
.section + .section { position: relative; }

.section + .section::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  translate: -50%;
  width: 26px;
  height: 26px;
  opacity: 0.5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2309708b' stroke-width='1.3'%3E%3Ccircle cx='12' cy='12' r='2.4'/%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Ccircle cx='12' cy='12' r='11.2'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The largest and darkest thing in its section. */
.section h2 {
  margin-bottom: var(--s-head);
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
}

/* Clearly smaller, and teal, so it never competes with the h2 above it. */
.section h3 {
  margin: 0 0 var(--s-tight);
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.008em;
  color: var(--teal);
}

/* No measure cap: a narrower column read as misalignment against the
   full-width sections around it. */
.prose { display: flex; flex-direction: column; gap: 18px; }
.prose strong { color: var(--ink); font-weight: 700; }

a.inline {
  color: var(--teal);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--teal-line);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s;
}

/* ================= RIPPLES ================= */

.ripples { margin-top: var(--s-head); list-style: none; }

.ripple {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 24px;
  padding: 24px 0 26px;
  border-top: 1px solid var(--line);
}

.ripple:first-child { border-top: none; padding-top: 4px; }

.ripple[data-ring="2"] { margin-left: 22px; }
.ripple[data-ring="3"] { margin-left: 44px; }
.ripple[data-ring="4"] { margin-left: 66px; }

.ripple .mark { width: 70px; height: 70px; }
.ripple .mark circle { fill: none; stroke: var(--teal); stroke-width: 1.5; }
.ripple .mark circle:first-child { fill: var(--amber); stroke: none; }

.ripple[data-ring="1"] .mark circle:nth-of-type(n + 2),
.ripple[data-ring="2"] .mark circle:nth-of-type(n + 3),
.ripple[data-ring="3"] .mark circle:nth-of-type(n + 4) { display: none; }

.ripple .mark circle:nth-of-type(3) { stroke: rgba(9, 112, 139, 0.55); }
.ripple .mark circle:nth-of-type(4) { stroke: rgba(9, 112, 139, 0.3); }

.ripple h4 {
  margin-bottom: 10px;
  font-size: var(--t-h4);
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
}

.ripple h4 strong { font-weight: 700; }

.ripple ul { display: flex; flex-direction: column; gap: 6px; list-style: none; }
.ripple ul li { position: relative; padding-left: 17px; }

.ripple ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.68em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--teal-line);
}

/* ================= AGENDA TRACKS ================= */

/* The two subsections of Themes are substantial blocks in their own right,
   so they need real air between them — nearly a section's worth, but with
   no rule, so they still read as belonging together. Needs the .section
   prefix to outrank the generic h3 margin. */
.section h3.tracks-title { margin-top: 78px; }

.tracks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;   /* equal heights from content, not a fixed number */
  margin-top: var(--s-head);
}

/* The one place cards are used, so they read as a device rather than as
   the page's only texture. White on warm paper, lifting on hover. */
.track {
  padding: 26px 26px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(34, 41, 46, 0.045);
  transition: transform 0.26s, box-shadow 0.26s, border-color 0.26s;
}

.track h4 {
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--teal);
  font-size: var(--t-h4);
  font-weight: 700;
  line-height: 1.32;
  color: var(--ink);
}

.track ul { display: flex; flex-direction: column; gap: 15px; list-style: none; }
.track li { position: relative; padding-left: 25px; line-height: 1.62; }

.track li::before {
  content: "\2192";
  position: absolute;
  left: 0; top: 0;
  color: var(--teal);
  font-weight: 700;
}

/* ================= CALL FOR PARTICIPATION ================= */

/* The two formats are alternatives, so they sit side by side with a rule
   between them rather than stacked behind accent bars. */
.formats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  margin-top: var(--s-head);
  list-style: none;
}

.format { padding: 0 38px; }
.format:first-child { padding-left: 0; }
.format:last-child { padding-right: 0; }
.format + .format { border-left: 1px solid var(--line); }

.format h4 {
  margin-bottom: 5px;
  font-size: var(--t-h4);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}

.format p { line-height: 1.72; }
.format strong { color: var(--ink); font-weight: 700; }

.apply-wrap { margin-top: var(--s-block); text-align: center; }

.apply {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 30px;
  background: var(--teal);
  border: 2px solid var(--teal);
  border-radius: 12px;
  color: #fff;
  font-size: var(--t-body);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s;
}

/* ================= TIMELINE ================= */

.timeline { position: relative; margin-top: var(--s-head); padding-left: 38px; list-style: none; }

.timeline::before {
  content: "";
  position: absolute;
  left: 8px; top: 11px; bottom: 34px;
  width: 2px;
  background: var(--teal-line);
}

/* Date and what happens on it, side by side, aligned on the baseline. */
.timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 208px 1fr;
  gap: 24px;
  align-items: baseline;
  padding-bottom: 28px;
}

.timeline li:last-child { padding-bottom: 0; }

.timeline li::before {
  content: "";
  position: absolute;
  left: -38px; top: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--ground);
  border: 2.5px solid var(--teal);
}

.timeline li.undated::before {
  border-style: dashed;
  border-color: var(--muted);
}

.timeline li.undated .date { color: var(--muted); }

.timeline li.arrival::before {
  background: var(--amber);
  border-color: var(--amber);
  box-shadow: 0 0 0 6px var(--amber-wash);
}

/* Dates read as written — "July 31th, 2026 (AoE)" — not shouted in caps. */
.timeline .date {
  color: var(--body);
  font-size: var(--t-body);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.timeline .event {
  font-size: var(--t-h4);
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
}

/* Which round this is, carried by weight inside the line. */
.timeline .key { font-weight: 700; }

.timeline li.arrival .event { color: var(--amber); }

/* A qualifier under the event, for rounds that need naming. */
.timeline .sub {
  display: block;
  max-width: 52ch;
  margin-top: 5px;
  color: var(--body);
  font-size: var(--t-meta);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
}



/* ================= ORGANIZERS ================= */

.roster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 52px; margin-top: var(--s-head); }

.member { padding: 24px 0 26px; border-top: 1px solid var(--line); }
.member:nth-child(1), .member:nth-child(2) { border-top: none; padding-top: 2px; }

.member h4 { font-size: var(--t-h4); font-weight: 700; line-height: 1.35; }

.member h4 a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.member .affil { margin-top: 1px; color: var(--muted); font-size: var(--t-meta); }
/* A step under body copy — these are supporting detail, not the page. */
.member .bio { margin-top: 11px; font-size: 15.5px; line-height: 1.7; }

/* Folded to three lines until asked. The class is applied by script, so
   with JS off every bio is simply whole. max-height rather than
   line-clamp, because a clamp cannot be animated. */
.member.clamped .bio {
  max-height: calc(3 * 1.7 * 15.5px);
  overflow: hidden;
  transition: max-height 0.42s cubic-bezier(0.3, 0.7, 0.3, 1);
}

.member.clamped:not(.open) .bio {
  -webkit-mask-image: linear-gradient(to bottom, #000 52%, transparent);
  mask-image: linear-gradient(to bottom, #000 52%, transparent);
}

.member.clamped.open .bio { max-height: 46em; }

/* Icon only — the label lives in aria-label, so it is announced without
   being drawn. Centred under the bio it opens. */
.bio-toggle {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-top: 11px;
  padding: 0;
  background: none;
  border: 1px solid var(--teal-line);
  border-radius: 50%;
  color: var(--teal);
  cursor: pointer;
  transition: background-color 0.22s, border-color 0.22s;
}

.bio-toggle svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.36s cubic-bezier(0.3, 0.7, 0.3, 1);
}

.member.open .bio-toggle svg { transform: rotate(180deg); }



/* ================= FOOTER ================= */

.foot {
  position: relative;
  padding: 36px 0 46px;
  text-align: center;
}

.foot::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  translate: -50%;
  width: 26px;
  height: 26px;
  opacity: 0.5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2309708b' stroke-width='1.3'%3E%3Ccircle cx='12' cy='12' r='2.4'/%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Ccircle cx='12' cy='12' r='11.2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.foot p { color: var(--muted); font-size: var(--t-meta); }


/* ================= MOTION =================

   Two things move. The rings expand outward once on load, which is the
   thing the workshop is named after. And blocks rise as they arrive, so
   the page assembles rather than appearing. Both are gated behind
   prefers-reduced-motion, and the reveal class is only ever applied by
   script, so nothing is hidden if that never runs. */

@media (prefers-reduced-motion: no-preference) {
  /* Rings keep emanating rather than settling after one pass. Seven
     seconds a cycle, staggered so one is always on its way out while the
     next is arriving — slow enough to read as ambient, not as a widget. */
  .ripple-field circle {
    transform-box: fill-box;
    transform-origin: center;
    animation: ripple-out 7s cubic-bezier(0.25, 0.6, 0.35, 1) infinite;
  }

  .ripple-field circle:nth-of-type(1) { animation-delay: 0s; }
  .ripple-field circle:nth-of-type(2) { animation-delay: -1.15s; }
  .ripple-field circle:nth-of-type(3) { animation-delay: -2.3s; }
  .ripple-field circle:nth-of-type(4) { animation-delay: -3.45s; }
  .ripple-field circle:nth-of-type(5) { animation-delay: -4.6s; }
  .ripple-field circle:nth-of-type(6) { animation-delay: -5.75s; }

  @keyframes ripple-out {
    0%   { transform: scale(0.42); opacity: 0; }
    14%  { opacity: var(--peak); }
    72%  { opacity: calc(var(--peak) * 0.55); }
    100% { transform: scale(1.22); opacity: 0; }
  }

  .rise {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }

  .rise.in { opacity: 1; transform: none; }
}

/* ================= INTERACTION ================= */

:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 3px; }
a, button { -webkit-tap-highlight-color: transparent; }

@media (hover: hover) and (pointer: fine) {
  .nav ul a:hover { color: var(--ink); }
  .nav ul a:hover::after { opacity: 0.45; transform: scale(1); }
  .nav ul a.current:hover::after { opacity: 1; }
  .wordmark:hover em { color: var(--teal-deep); }
  a.inline:hover { text-decoration-color: var(--teal); }
  .action.primary:hover, .apply:hover { background: var(--teal-deep); border-color: var(--teal-deep); }
  .action.secondary:hover { border-color: var(--teal); background: var(--teal-wash); }
  .member h4 a:hover { color: var(--teal); border-bottom-color: var(--teal-line); }
  .bio-toggle:hover { background: var(--teal-wash); border-color: var(--teal); }

  .track:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(9, 112, 139, 0.13);
    border-color: var(--teal-line);
  }
}

.action.primary:active, .apply:active { background: var(--teal-deep); border-color: var(--teal-deep); }
.action.secondary:active { background: var(--teal-wash); }
.member h4 a:active, a.inline:active { color: var(--teal); }
.bio-toggle:active { background: var(--teal-wash); border-color: var(--teal); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ================= TABLET ================= */

@media (max-width: 940px) {
  .tracks { grid-template-columns: 1fr; }
  .roster { grid-template-columns: 1fr; gap: 0; }
  .member:nth-child(2) { border-top: 1px solid var(--line); padding-top: 24px; }
}

/* ================= PHONE ================= */

@media (max-width: 768px) {
  :root {
    --nav-h: 56px;
    --t-h2: 26px;
    --t-h3: 21px;
    --t-h4: 18px;
    --s-section: 62px;
    --s-block: 34px;
    --s-head: 22px;
  }

  .nav .inner { gap: 10px; }
  .wordmark { font-size: 21px; }
  .hero .ripples-mark { font-size: 23px; }

  .hero { padding: calc(var(--nav-h) + 44px) 0 var(--s-section); }
  .hero img { margin-top: 32px; border-radius: 14px; }
  .actions { flex-direction: column; align-items: center; gap: 12px; margin-top: 34px; }
  .action { width: min(100%, 320px); }

  /* The stepped indent costs more room than it conveys at this width. */
  .ripple { grid-template-columns: 34px 1fr; gap: 13px; }
  .ripple .mark { width: 34px; height: 34px; }
  .ripple[data-ring="2"], .ripple[data-ring="3"], .ripple[data-ring="4"] { margin-left: 0; }

  .section h3.tracks-title { margin-top: 52px; }

  .track { padding: 22px 22px 24px; }
  .track:hover { transform: none; }

  .formats { grid-template-columns: 1fr; }
  .format { padding: 0; }
  .format + .format {
    border-left: none;
    border-top: 1px solid var(--line);
    padding-top: 26px;
    margin-top: 26px;
  }

  .timeline { padding-left: 32px; }
  .timeline li { grid-template-columns: 1fr; gap: 3px; padding-bottom: 24px; }
  .timeline li::before { left: -32px; width: 16px; height: 16px; }
}

/* ================= PHONE MENU =================
   Below this width the five links stop reading as a row and start reading
   as a wall of words, so they fold into a panel behind a button. The panel
   is part of the bar, not an overlay: it drops out from under it and the
   page stays where it was. */

@media (max-width: 640px) {
  .nav-toggle { display: inline-flex; }
  .nav .long { display: none; }
  .nav .short { display: inline; }

  .nav ul {
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 4px 5% 12px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 14px 28px rgba(34, 41, 46, 0.1);
    /* Collapsed rather than removed, so the panel can be animated and so
       the links stay reachable to assistive tech through the button. */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.36s cubic-bezier(0.3, 0.7, 0.3, 1),
                opacity 0.24s, visibility 0s linear 0.36s;
  }

  .nav.open ul {
    max-height: 320px;
    opacity: 1;
    visibility: visible;
    transition: max-height 0.36s cubic-bezier(0.3, 0.7, 0.3, 1),
                opacity 0.2s, visibility 0s;
  }

  .nav ul li + li { border-top: 1px solid var(--line); }

  .nav ul a {
    padding: 14px 0 14px 22px;   /* room at the left for the ring */
    font-size: 16px;
  }

  /* Stacked, the dot belongs beside the label rather than under it. */
  .nav ul a::after {
    left: 2px;
    top: 50%;
    bottom: auto;
    margin: -2.5px 0 0;
    opacity: 0.28;
    transform: scale(1);
  }

  .nav ul a.current::after { opacity: 1; }

  /* The field is drawn at 190vw, so on a phone every stroke is magnified
     against far less type. Thinner keeps it ambient. */
  .ripple-field circle:nth-of-type(1) { stroke-width: 1.9; }
  .ripple-field circle:nth-of-type(2) { stroke-width: 1.7; }
  .ripple-field circle:nth-of-type(3) { stroke-width: 1.5; }
  .ripple-field circle:nth-of-type(4) { stroke-width: 1.3; }
  .ripple-field circle:nth-of-type(5) { stroke-width: 1.1; }
  .ripple-field circle:nth-of-type(6) { stroke-width: 0.9; }
}

@media (max-width: 480px) {
  :root { --t-body: 16px; }
  .inner { width: 90%; }
  .wordmark { font-size: 20px; }
}