/* Just Show Up Club, Phase 1 prototype.
   Tokens are locked in ../BRAND-DNA.md. Mobile first; desktop rules live in min-width queries. */

:root {
  /* Ashley's working color foundation (audit, September 2026): ink, bone, concrete, pure white for contrast only */
  --ink: #0A0A0A;
  --paper: #FFFFFF;
  --bone: #F1EFE9;
  --concrete: #8C8B87;      /* utility lines, ticks, and large secondary type; too light for small body text */
  --grey: #6B6A66;          /* secondary body text, warm, 4.6:1 on bone */
  --grey-light: var(--bone);
  --azure: #4863A0;
  --azure-on-dark: #5B75B5; /* the same azure, lifted just enough to read on black (4.7:1) */

  --font-display: "Archivo", "Helvetica Neue", Helvetica, sans-serif;
  --font-body: "Instrument Sans", "Helvetica Neue", Helvetica, sans-serif;

  --gutter: clamp(16px, 5vw, 72px);
  --max: 1440px;
  --nav-h: 64px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 900px) { :root { --nav-h: 76px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 900px) { body { font-size: 1.0625rem; } }
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
picture { display: contents; }
source { display: none; }   /* inside a grid a source tag would otherwise take a cell of its own */
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; font-stretch: 112%; letter-spacing: -.02em; margin: 0; }
h1 { font-size: clamp(2.5rem, 9vw, 5.25rem); line-height: .95; }
h2 { font-size: clamp(2rem, 5.5vw, 3.75rem); line-height: 1.02; }
h3 { font-size: 1.25rem; line-height: 1.2; font-stretch: 108%; font-weight: 700; }
p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--azure); outline-offset: 3px; }
.wrap { max-width: var(--max); margin: 0 auto; }
.section { padding: clamp(72px, 10vw, 136px) var(--gutter); }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 14px; text-decoration: none; }
.skip:focus { top: 8px; }

/* ---------- motif: the slant ---------- */
.tick, .eyebrow::before {
  content: "";
  display: inline-block;
  width: 14px; height: 9px;
  background: currentColor;
  transform: skewX(-28deg);
  flex: none;
}
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 20px;
  font: 600 .75rem/1 var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px;
  border: 1px solid currentColor; background: transparent; color: inherit;
  font: 600 .8125rem/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: transform .15s var(--ease), filter .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--azure); border-color: var(--azure); color: var(--paper); }
.btn--primary:hover { filter: brightness(.92); }
.btn:disabled {
  color: var(--grey); border-color: var(--grey-light); background: var(--grey-light);
  cursor: not-allowed; transform: none;
}
.link {
  font: 600 .8125rem/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 4px;
}
.link:hover { border-bottom-color: transparent; }

/* ---------- labeled seams (placeholder content) ---------- */
.seam {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 24px; padding: 8px 10px;
  border: 1px dashed var(--grey); color: var(--grey);
  font: 600 .6875rem/1.3 var(--font-display); letter-spacing: .1em; text-transform: uppercase;
}
.seam-inline {
  display: inline-block; margin-right: 8px; padding: 3px 6px; vertical-align: middle;
  border: 1px dashed var(--grey); color: var(--grey);
  font: 600 .625rem/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase;
}

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter);
  color: var(--paper);
  border-bottom: 1px solid transparent;
  transition: background .25s, color .25s, border-color .25s;
}
.nav.is-solid { background: rgba(255, 255, 255, .97); color: var(--ink); border-bottom-color: var(--grey-light); }
.nav.is-open { background: var(--ink); color: var(--paper); border-bottom-color: transparent; }
.nav__logo { display: block; line-height: 0; }
/* The lockup is a mask filled with the nav's current colour, so a light band can glint across the mark itself */
.nav__mark {
  position: relative; display: block; width: 60px; height: 30px; background-color: currentColor;
  -webkit-mask: url("assets/brand/logo-white.png") center / contain no-repeat; mask: url("assets/brand/logo-white.png") center / contain no-repeat;
  transition: background-color .25s;
}
.nav__mark::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(105deg, rgba(0,0,0,0) 38%, rgba(140, 166, 228, .95) 50%, rgba(0,0,0,0) 62%);
  background-size: 260% 100%; background-repeat: no-repeat; background-position: 130% 0;
  animation: logo-glint 7s ease-in-out infinite;
}
.nav.is-solid:not(.is-open) .nav__mark::after { background-image: linear-gradient(105deg, rgba(0,0,0,0) 38%, rgba(72, 99, 160, .85) 50%, rgba(0,0,0,0) 62%); }
@keyframes logo-glint { 0%, 76% { background-position: 130% 0; } 100% { background-position: -130% 0; } }
@supports not ((mask: url("x")) or (-webkit-mask: url("x"))) {
  .nav__mark { background: url("assets/brand/logo-white.png") center / contain no-repeat; }
  .nav.is-solid:not(.is-open) .nav__mark { background-image: url("assets/brand/logo-black.png"); }
  .nav__mark::after { display: none; }
}
.nav__links { display: none; align-items: center; gap: 32px; }
.nav__links a, .nav__member {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0;
  font: 600 .75rem/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; background: none; border: 0; cursor: pointer;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 10px; height: 1px;
  background: currentColor; transition: right .2s var(--ease);
}
.nav__links a:hover::after { right: 0; }
.nav__member { border: 1px solid currentColor; padding: 0 16px; }
.nav__burger {
  display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
  width: 48px; height: 48px; margin-right: -12px;
  background: none; border: 0; cursor: pointer;
}
.nav__burger span { display: block; width: 24px; height: 2px; background: currentColor; transition: transform .2s var(--ease); }
.nav.is-open .nav__burger span:first-child { transform: translateY(4px) rotate(45deg); }
.nav.is-open .nav__burger span:last-child { transform: translateY(-4px) rotate(-45deg); }
.nav.is-open .nav__mark { background-color: var(--paper); }
@media (min-width: 900px) {
  .nav__links { display: flex; }
  .nav__burger { display: none; }
  .nav__mark { width: 72px; height: 36px; }
}

/* mobile menu */
.menu {
  position: fixed; inset: 0; z-index: 55;
  background: var(--ink); color: var(--paper);
  padding: calc(var(--nav-h) + 24px) var(--gutter) 40px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.menu[hidden] { display: none; }
.menu__links { display: flex; flex-direction: column; gap: 4px; }
.menu__links a, .menu__links button {
  font-family: var(--font-display); font-weight: 800; font-stretch: 112%;
  font-size: clamp(2.25rem, 10vw, 3.5rem); line-height: 1.05; letter-spacing: -.02em;
  text-decoration: none; background: none; border: 0; padding: 8px 0; text-align: left; cursor: pointer; color: inherit;
}
.menu__foot { display: flex; flex-direction: column; gap: 12px; font-size: .9375rem; color: rgba(255, 255, 255, .7); }
.menu__foot a { color: var(--paper); }

@media (min-width: 900px) and (max-width: 1199px) { .nav__links { gap: 18px; } }   /* seven items need a tighter gap on narrow desktops */

/* ---------- hero ---------- */
.hero {
  position: relative; isolation: isolate;
  height: min(100svh, 820px); min-height: 560px;
  background: var(--ink); color: var(--paper);
  overflow: hidden;
}
@supports not (height: 1svh) { .hero { height: min(100vh, 820px); } }
@media (min-width: 900px) { .hero { height: min(100svh, 940px); min-height: 640px; } }
.hero__viewport { position: absolute; inset: 0; overflow: hidden; }
.hero__track { display: flex; height: 100%; width: max-content; will-change: transform; animation: hero-scroll var(--hero-loop, 120s) linear infinite; }
.hero.is-paused .hero__track, .welcome.is-playing ~ main .hero__track { animation-play-state: paused; }   /* also still while the loading graphic covers it */
@keyframes hero-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.hero__slide { flex: none; height: 100%; aspect-ratio: 2 / 3; margin: 0; position: relative; overflow: hidden; background: #000; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.hero__slide--fallback { display: flex; align-items: center; justify-content: center; border-right: 1px solid rgba(255,255,255,.15); }
.hero__slide--fallback img { width: 40%; height: auto; object-fit: contain; opacity: .5; }
.hero__shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.48) 36%, rgba(0,0,0,.08) 62%, rgba(0,0,0,.38) 100%);
}
.hero__content {
  position: absolute; left: 0; right: 0; bottom: 48px; z-index: 2;
  padding: 0 var(--gutter);
  pointer-events: none;
}
.hero__content a, .hero__content button { pointer-events: auto; }
.hero__content .eyebrow { margin-bottom: 18px; color: rgba(255, 255, 255, .85); }
.hero__content h1 { margin: 0 0 20px; text-transform: uppercase; font-size: clamp(2rem, 7.4vw, 5rem); }
.hero__content .type { white-space: pre-line; display: inline-block; padding-bottom: .12em; }
@media (max-width: 599px) { .hero__content h1 { font-stretch: 100%; letter-spacing: -.015em; } }
.btn__arrow { font-weight: 400; margin-left: 2px; }
.hero__sub { max-width: 42ch; font-size: 1.0625rem; line-height: 1.5; color: rgba(255, 255, 255, .86); margin: 0 0 28px; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; }
.hero__actions .link { margin-left: 8px; }
/* Cebu: the Saturday run on the first screen */
.hero__run { display: grid; gap: 4px; max-width: 420px; margin: -8px 0 26px; padding: 14px 18px; border-left: 3px solid var(--azure); background: rgba(10, 10, 10, .55); color: var(--paper); text-decoration: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .15s; }
.hero__run:hover { background: rgba(10, 10, 10, .75); }
.hero__run-when { font-size: 1rem; }
.hero__run-when strong { display: block; margin-bottom: 2px; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: .8125rem; color: rgba(255, 255, 255, .8); }
.hero__run-when { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; }
.hero__run-where { font-size: .9375rem; color: rgba(255, 255, 255, .8); }
.hero__run-go { margin-top: 6px; font: 600 .75rem/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--paper); }
/* sprint-in headline */
.type .w { display: inline-block; will-change: transform, opacity, filter; -webkit-text-stroke: 1px rgba(10, 10, 10, .45); paint-order: stroke fill; }
.type:not(.is-done) .w { text-shadow: 0 2px 4px rgba(0, 0, 0, .45), 0 14px 40px rgba(0, 0, 0, .45); }
.type .w--accent { color: var(--azure); }
/* once the sprint has landed the headline joins the page-wide shimmer: white words take the gradient fill, the azure line stays azure over it */
.type.is-done .line {
  display: inline-block; padding-bottom: .12em; margin-bottom: -.12em;
  background-image:
    linear-gradient(100deg, rgba(255,255,255,0) 40%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 60%),
    linear-gradient(120deg, #FFFFFF 0%, #ECEAE4 55%, #C4C2BC 100%);
  background-size: 250% 100%, 100% 100%; background-position: 0% 0, 0 0; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px rgba(10, 10, 10, .35); paint-order: stroke fill;
}
.type.is-done .line.is-lit { animation: sheen 5.5s ease-in-out infinite; }
.type.is-done .line--accent {
  background: none; color: var(--azure); -webkit-text-fill-color: var(--azure);
  -webkit-text-stroke: 1.5px var(--ink); text-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.type.is-sprint .w { opacity: 0; animation: sprint-in .72s var(--ease) both; }
@keyframes sprint-in {
  0% { opacity: 0; transform: translateX(-72px) skewX(-18deg); filter: blur(8px); }
  62% { opacity: 1; transform: translateX(10px) skewX(5deg); filter: blur(0); }
  100% { opacity: 1; transform: translateX(0) skewX(0); filter: blur(0); }
}
@media (min-width: 900px) {
  .hero__content { bottom: 72px; }
  .hero__sub { font-size: 1.125rem; }
}

/* ---------- gradient headings with a shine sweep (client request; monochrome, off under reduced motion) ---------- */
.shine {
  background-image:
    linear-gradient(100deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 58%),
    linear-gradient(120deg, var(--ink) 0%, var(--ink) 45%, var(--grey) 100%);
  background-size: 250% 100%, 100% 100%;
  background-position: 0% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  padding-bottom: .12em;   /* room for descenders: the fill paints only inside the box */
}
.shine.is-lit { animation: sheen 5.5s ease-in-out infinite; }   /* lit by app.js while the heading is on screen */
.story .shine, .break .shine, .statement .shine, .apparel .shine, .archive .shine {
  background-image:
    linear-gradient(100deg, rgba(255,255,255,0) 40%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 60%),
    linear-gradient(120deg, var(--bone) 0%, #CFCDC7 55%, var(--concrete) 100%);
}
@keyframes sheen { 0% { background-position: 0% 0, 0 0; } 45%, 100% { background-position: 100% 0, 0 0; } }

/* ---------- schedule ---------- */
.schedule__grid { display: grid; gap: 48px; }
@media (min-width: 900px) { .schedule__grid { grid-template-columns: 5fr 7fr; gap: clamp(48px, 6vw, 112px); align-items: start; } }
.schedule__intro h2 { margin-bottom: 20px; max-width: 14ch; }
.schedule__intro > p { max-width: 40ch; color: var(--grey); }
/* week strip: one day at a time, hover on desktop, tap on phones */
.week { display: grid; gap: 14px; }
.week__next { display: flex; align-items: center; gap: 16px; padding: 14px 16px; background: var(--grey-light); border-left: 4px solid var(--azure); }
.runarrow { flex: none; line-height: 0; }
.runarrow svg { width: 72px; height: 24px; overflow: visible; }
.runarrow__bar { fill: var(--ink); transform-box: fill-box; transform-origin: center; animation: run-dash 1.4s ease-in-out infinite; }
.runarrow__bar:nth-child(2) { animation-delay: .14s; }
.runarrow__bar:nth-child(3) { animation-delay: .28s; }
.runarrow__head { fill: var(--azure); transform-box: fill-box; transform-origin: center; animation: run-nudge 1.4s ease-in-out infinite; }
@keyframes run-dash { 0% { opacity: .15; transform: translateX(-8px); } 45% { opacity: 1; transform: translateX(0); } 100% { opacity: .15; transform: translateX(8px); } }
@keyframes run-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
.week__next-text { display: grid; gap: 2px; min-width: 0; }
.week__next-label { font: 600 .6875rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--grey); }
.week__next strong { font-family: var(--font-display); font-weight: 800; font-stretch: 110%; font-size: 1.375rem; line-height: 1.1; letter-spacing: -.01em; }
.week__next-when { color: var(--grey); font-size: .9375rem; }
.week__strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.week__day {
  min-height: 58px; padding: 8px 2px; display: grid; gap: 5px; justify-items: center; align-content: center;
  border: 1px solid var(--grey-light); background: var(--paper); color: var(--grey); cursor: pointer;
  font-family: var(--font-display); transition: background .15s, color .15s, border-color .15s;
}
.week__day.has-run { color: var(--ink); border-color: var(--ink); }
.week__day:hover { background: var(--grey-light); }
.week__day.is-selected, .week__day.is-selected:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.week__day.is-next { box-shadow: inset 0 -3px 0 var(--azure); }
.week__dow { font-weight: 800; font-stretch: 110%; font-size: .8125rem; line-height: 1; text-transform: uppercase; letter-spacing: .03em; }
.week__meta { font-weight: 600; font-size: .625rem; line-height: 1; text-transform: uppercase; white-space: nowrap; letter-spacing: .02em; }
.week__panel { border-top: 1px solid var(--ink); padding-top: 12px; min-height: 96px; }
.day__head { font: 600 .6875rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--grey); margin-bottom: 4px; }
.day__run { display: grid; grid-template-columns: auto 1fr; gap: 2px 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--grey-light); }
.day__time { font-family: var(--font-display); font-weight: 800; font-stretch: 112%; font-size: 1.5rem; line-height: 1; letter-spacing: -.01em; }
.day__where { font-size: 1rem; }
.day__note { grid-column: 2; color: var(--grey); font-size: .875rem; }
.day__where { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.day__map { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; font: 600 .6875rem/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); text-decoration: none; white-space: nowrap; }
.day__map:hover { color: var(--azure); }
@media (hover: none) { .day__map { min-height: 44px; padding-right: 6px; } }
/* the map pin: the one red on the site, drawn, not an emoji; drops in when the day renders, then bobs gently */
.pin { position: relative; display: inline-block; width: 14px; height: 21px; }
.pin svg { position: relative; z-index: 1; display: block; width: 14px; height: 19px; transform-origin: 50% 100%; animation: pin-drop .9s var(--ease) both, pin-bob 3.2s ease-in-out 1.3s infinite; }
.pin__body { fill: #E5322D; }
.pin__dot { fill: #FFFFFF; }
.pin__shadow { position: absolute; left: 50%; bottom: 0; width: 10px; height: 3px; margin-left: -5px; border-radius: 50%; background: rgba(0, 0, 0, .28); animation: pin-shadow .9s var(--ease) both, pin-shadow-bob 3.2s ease-in-out 1.3s infinite; }
.day__map:hover .pin svg { animation: none; transform: translateY(-2px); }
@keyframes pin-drop { 0% { opacity: 0; transform: translateY(-10px) scale(.9); } 60% { opacity: 1; transform: translateY(1px) scale(1); } 80% { transform: translateY(-2px); } 100% { transform: translateY(0); } }
@keyframes pin-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes pin-shadow { 0% { opacity: 0; transform: scaleX(.4); } 60% { opacity: 1; transform: scaleX(1.05); } 100% { transform: scaleX(1); } }
@keyframes pin-shadow-bob { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(.8); opacity: .7; } }
.day__rest { color: var(--grey); padding: 12px 0; }
/* Add to calendar: a summary styled like the Map link, opening two plain links */
.day__cal { position: relative; }
.day__cal > summary { list-style: none; cursor: pointer; }
.day__cal > summary::-webkit-details-marker { display: none; }
.day__cal-icon { width: 13px; height: 13px; flex: none; }
.day__cal[open] > summary { color: var(--azure); }
.day__cal-menu { position: absolute; left: 0; top: 100%; z-index: 5; display: grid; min-width: 200px; background: var(--paper); border: 1px solid var(--ink); }
.day__cal-menu a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; color: var(--ink); text-decoration: none; font: 600 .75rem/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; }
.day__cal-menu a + a { border-top: 1px solid var(--grey-light); }
.day__cal-menu a:hover, .day__cal-menu a:focus-visible { background: var(--ink); color: var(--paper); }
@media (max-width: 599px) { .day__cal[open] { flex-basis: 100%; } .day__cal-menu { position: static; margin: 4px 0 6px; } }   /* phones: the menu opens in place, never off the edge */

/* Cebu: how to get there. The map box holds a button until tapped, then Google's map. */
.getthere { margin-top: 40px; border: 1px solid var(--ink); padding: 24px; }
.getthere h3 { margin-bottom: 8px; }
.getthere__addr, .getthere__when { color: var(--grey); font-size: .9375rem; max-width: 52ch; }
.getthere__map { position: relative; display: grid; place-items: center; align-content: center; gap: 10px; margin-top: 18px; aspect-ratio: 16 / 10; overflow: hidden;
  background-color: var(--grey-light);
  background-image: linear-gradient(var(--paper) 1px, transparent 1px), linear-gradient(90deg, var(--paper) 1px, transparent 1px);
  background-size: 28px 28px; }
.getthere__load { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 22px; background: var(--paper); color: var(--ink); border: 1px solid var(--ink); cursor: pointer;
  font: 600 .8125rem/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; transition: background .15s, color .15s; }
.getthere__load:hover { background: var(--ink); color: var(--paper); }
.getthere__fine { font-size: .75rem; color: var(--grey); text-align: center; padding: 0 16px; }
.getthere__map.is-loaded { display: block; background: none; }
.getthere__map iframe { display: block; width: 100%; height: 100%; border: 0; }
.getthere .cta { text-decoration: none; }
.getthere__actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin-top: 22px; }
.cta--ghost { background: var(--paper); color: var(--ink); }
.cta--ghost:hover { color: var(--paper); }
.getthere__cal .day__cal > summary.cta { list-style: none; }
.getthere__cal .day__cal[open] > summary.cta { background: var(--ink); color: var(--paper); }
.getthere__cal .day__cal-icon { width: 15px; height: 15px; }
@media (max-width: 599px) { .getthere__actions > * { flex: 1 1 100%; } .getthere__actions .cta { width: 100%; justify-content: center; } .getthere__cal .day__cal-menu { position: static; margin-top: 6px; } }
@media (max-width: 599px) { .getthere { padding: 20px 16px; } .getthere__map { aspect-ratio: 4 / 3; } }
@media (min-width: 900px) {
  .week__day { min-height: 64px; }
  .week__dow { font-size: .9375rem; }
  .week__meta { font-size: .6875rem; }
  .day__time { font-size: 1.75rem; }
}
@media (prefers-reduced-motion: reduce) { .runarrow__bar, .runarrow__head { animation: none; opacity: 1; } .week__day { transition: none; } }

.status { margin-top: 16px; display: flex; align-items: center; gap: 10px; font-size: .9375rem; color: var(--grey); }
.status .tick { width: 10px; height: 7px; }
.runs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.run { display: grid; grid-template-columns: 64px 1fr; gap: 4px 16px; padding: 20px 0; border-bottom: 1px solid var(--grey-light); align-items: baseline; }
.run__day { grid-row: span 3; font-family: var(--font-display); font-weight: 800; font-stretch: 112%; font-size: 1.5rem; line-height: 1; text-transform: uppercase; display: flex; align-items: baseline; gap: 8px; }
.run__time { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; line-height: 1.2; }
.run__where { font-size: 1rem; }
.run__note { color: var(--grey); font-size: .875rem; }
@media (min-width: 900px) {
  .run { grid-template-columns: 96px 130px 1fr 1fr; gap: 16px; padding: 24px 0; }
  .run__day { grid-row: auto; font-size: 1.75rem; }
}
.events { margin-top: 48px; }
.event { border: 1px solid var(--ink); padding: 24px; }
.event__date { display: block; margin-bottom: 10px; font: 600 .6875rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--grey); }
.event h3 { margin-bottom: 8px; }
.event p { color: var(--grey); font-size: .9375rem; max-width: 52ch; }

/* ---------- section heads ---------- */
.section__head { margin-bottom: 40px; max-width: 60ch; }
.section__head h2 { margin-bottom: 16px; }
.section__lede { color: var(--grey); max-width: 44ch; }
.section__head--row { display: grid; gap: 16px; max-width: none; }
@media (min-width: 900px) { .section__head--row { grid-template-columns: 1fr 1fr; align-items: end; } }

/* ---------- community gallery ---------- */
.gallery { background: var(--grey-light); }
.gallery__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.gallery__item { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: rgba(0, 0, 0, .06); }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 700px) { .gallery__grid { grid-template-columns: repeat(3, 1fr); gap: 8px; } }
@media (min-width: 1100px) {
  .gallery__grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .gallery__item:nth-child(7n + 1) { grid-column: span 2; grid-row: span 2; }
}
.gallery__scroll {
  position: relative; max-height: min(78svh, 900px); overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--grey) transparent;
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 8px 0;
}
@supports not (max-height: 1svh) { .gallery__scroll { max-height: min(78vh, 900px); } }
.gallery__scroll::after {
  content: ""; position: sticky; bottom: -8px; display: block; height: 72px; margin-top: -72px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(241, 239, 233, 0), var(--bone));
}
.gallery__hint { margin-top: 16px; display: flex; align-items: center; gap: 10px; font-size: .875rem; color: var(--grey); }
.gallery__hint .tick { width: 10px; height: 7px; }

/* ---------- story ---------- */
.story { background: var(--ink); color: var(--paper); }
.story .eyebrow { color: var(--paper); }
.story__feature { display: grid; gap: clamp(40px, 6vw, 72px); }
.story__head h2 { margin-bottom: 24px; max-width: 16ch; }
.story__open { font-size: clamp(1.25rem, 2.4vw, 1.75rem); line-height: 1.35; max-width: 30ch; color: var(--paper); }
.story__figure { margin: 0; overflow: hidden; background: #111; aspect-ratio: 16 / 9; }
.story__figure--tall { aspect-ratio: 4 / 5; }
.story__figure img { width: 100%; height: 100%; object-fit: cover; }
.story__row { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) {
  .story__row { grid-template-columns: 7fr 5fr; gap: clamp(48px, 6vw, 112px); }
  .story__row--flip > .story__col { order: 2; }
  .story__figure--tall { max-width: 520px; }
  .story__row--flip .story__figure--tall { justify-self: start; }
  .story__row:not(.story__row--flip) .story__figure--tall { justify-self: end; }
}
.story__col { display: grid; gap: 22px; align-content: center; }
.story__kicker { margin: 0; color: var(--concrete); }
.story__beat { max-width: 12ch; margin: 0; }
.story__copy { max-width: 46ch; border-top: 1px solid rgba(255, 255, 255, .18); padding-top: 22px; }
.story__copy p { color: rgba(255, 255, 255, .82); margin: 0 0 16px; }
.story__copy p:last-child { margin-bottom: 0; }
.story__end { display: grid; gap: 22px; }
.story__close { max-width: 18ch; }
.story__end .cta-row { margin-top: 6px; }

/* ---------- grain and utility type (Ashley's visual system: huge display type, tiny utility type, grain used on purpose) ---------- */
.grain { position: relative; isolation: isolate; }
.grain::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
.grain > * { position: relative; z-index: 1; }
.utility { font: 600 .6875rem/1.7 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--concrete); }
.statement__data { margin: 0; max-width: 40ch; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; z-index: 0; background: #000; }
.hero.has-video .hero__track { visibility: hidden; animation: none; }

/* ---------- display lines and the new editorial sections (Ashley's creative direction, 2026-09-22) ---------- */
.display { font-family: var(--font-display); font-weight: 800; font-stretch: 116%; font-size: clamp(2.5rem, 8vw, 6.5rem); line-height: .95; letter-spacing: -.03em; text-transform: uppercase; margin: 0; }
.display--md { font-size: clamp(2rem, 5.5vw, 4.25rem); }
h2.display { margin-bottom: 0; }
.statement { background: var(--ink); color: var(--paper); }
.statement .eyebrow { color: rgba(255, 255, 255, .85); }
.statement__box { display: grid; gap: 32px; }
.statement__text { display: grid; gap: 40px; align-content: space-between; min-width: 0; }   /* min-width 0 so the huge word cannot widen the column and squeeze the slider */
.statement__text .eyebrow { margin-bottom: 22px; }
.statement__text h2 { max-width: none; overflow-wrap: normal; hyphens: none; font-size: clamp(2rem, 10.5vw, 5.5rem); }   /* EVERYTHING. is about 8 times the font size wide; sized to its column at every width */
.statement__foot { display: grid; gap: 22px; }
.statement__lines { margin: 0; font-size: clamp(1.125rem, 2vw, 1.5rem); line-height: 1.5; color: rgba(255, 255, 255, .82); max-width: 30ch; }
.statement__slider { aspect-ratio: 4 / 5; }
@media (min-width: 900px) {
  .statement__box { grid-template-columns: 7fr 5fr; gap: clamp(48px, 6vw, 112px); align-items: stretch; }
  .statement__slider { aspect-ratio: auto; height: 100%; min-height: 560px; width: 100%; max-width: 520px; justify-self: end; }
  .statement__text h2 { font-size: min(5.9vw, 5.5rem); }   /* the 7fr column is about 48vw; the widest word stays inside it */
}
.slider { position: relative; overflow: hidden; background: #111; touch-action: pan-y; }
.slider__track { display: flex; height: 100%; width: 100%; transition: transform .8s var(--ease); will-change: transform; }
.slider__slide { flex: 0 0 100%; margin: 0; height: 100%; }
.slider__slide img { width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; pointer-events: none; }
.slider__ticks { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 6px; }
.slider__tick { width: 14px; height: 8px; background: rgba(255, 255, 255, .42); transform: skewX(-28deg); transition: background .3s var(--ease); }
.slider__tick.is-on { background: var(--azure); }
.pillar__media { margin: 0 0 16px; aspect-ratio: 4 / 5; overflow: hidden; background: rgba(0, 0, 0, .05); }
.pillar__media img { width: 100%; height: 100%; object-fit: cover; }
.formmodal__sign { font: 600 .6875rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--concrete); margin: 10px 0 16px; }
.community__body { display: grid; gap: 10px; max-width: 44ch; color: var(--grey); }
.community__body p:last-child { color: var(--ink); font-weight: 600; }
.pillars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); }
@media (min-width: 900px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillar { padding: 22px 16px 26px 0; border-bottom: 1px solid var(--grey-light); }
.pillar__index { display: block; font: 600 .6875rem/1 var(--font-display); letter-spacing: .18em; color: var(--grey); margin-bottom: 14px; }
.pillar__name { font-family: var(--font-display); font-weight: 800; font-stretch: 118%; font-size: clamp(1.5rem, 3.4vw, 2.25rem); line-height: 1; letter-spacing: -.02em; text-transform: uppercase; margin: 0 0 8px; }
.pillar__role { color: var(--grey); font-size: .9375rem; max-width: 22ch; }
@media (max-width: 359px) { .pillar__name { font-size: 1.25rem; } }   /* the longest names fit two columns on a 320 wide phone */
.apparel { background: var(--ink); color: var(--paper); }
.apparel .eyebrow { color: rgba(255, 255, 255, .85); }
.apparel__grid { display: grid; gap: 32px; }
@media (min-width: 900px) { .apparel__grid { grid-template-columns: 5fr 7fr; gap: clamp(48px, 6vw, 112px); align-items: center; } }
.apparel__photo { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: #111; }
.apparel__photo img { width: 100%; height: 100%; object-fit: cover; }
.apparel__text h2 { margin-bottom: 16px; max-width: 12ch; }
.apparel__text p { max-width: 40ch; color: rgba(255, 255, 255, .82); }
.apparel .cta { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.apparel .cta:hover { background: var(--azure); color: var(--paper); border-color: var(--azure); }
.partners__cards { position: relative; z-index: 1; display: grid; gap: 20px; }
@media (min-width: 900px) { .partners__cards { grid-template-columns: 1fr 1fr; align-items: start; } }
.partners__cards .partners__over { max-width: none; }
.membership { background: var(--paper); }
.membership__grid { display: grid; gap: 40px; }
@media (min-width: 900px) { .membership__grid { grid-template-columns: 7fr 5fr; gap: clamp(48px, 6vw, 112px); align-items: start; } }
.membership__text h2 { margin-bottom: 20px; }
.membership__lines { font-size: clamp(1.125rem, 2vw, 1.375rem); line-height: 1.5; max-width: 34ch; }
.membership__note { margin-top: 16px; color: var(--grey); max-width: 40ch; }
.membership__app { position: relative; }
.phone { width: min(100%, 300px); margin: 0 auto; border: 2px solid var(--ink); padding: 14px; background: var(--paper); filter: blur(5px); opacity: .92; pointer-events: none; user-select: none; }
.phone__screen { background: var(--bone); padding: 16px; display: grid; gap: 14px; min-height: 440px; align-content: start; }
.idcard { background: var(--ink); color: var(--paper); padding: 18px; display: grid; gap: 6px; }
.idcard img { height: 22px; width: auto; margin-bottom: 10px; }
.idcard__label { font: 600 .625rem/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .7); margin: 0; }
.idcard__name { font-family: var(--font-display); font-weight: 800; font-stretch: 112%; font-size: 1.25rem; line-height: 1; text-transform: uppercase; margin: 0; }
.idcard__meta { font: 600 .625rem/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--concrete); margin: 0; }
.idcard__qr { display: block; width: 64px; height: 64px; margin-top: 10px; background: repeating-conic-gradient(var(--paper) 0 25%, var(--ink) 0 50%) 0 0 / 16px 16px; }
.phone__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.phone__list li { font: 600 .6875rem/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; padding: 12px; background: var(--paper); border: 1px solid rgba(0, 0, 0, .08); }
.membership__veil { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 24px; }
.membership__veil .eyebrow { margin: 0; }
.membership__veil-word { font-family: var(--font-display); font-weight: 800; font-stretch: 118%; font-size: clamp(1.75rem, 5vw, 3rem); line-height: .95; letter-spacing: -.03em; text-transform: uppercase; margin: 0; background: var(--paper); padding: .1em .25em; }
.teasers { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 12px; }
@media (min-width: 900px) { .teasers { grid-template-columns: repeat(4, 1fr); gap: 32px 20px; } }
.teaser__media { margin: 0 0 14px; aspect-ratio: 4 / 5; overflow: hidden; background: rgba(0, 0, 0, .06); }
.teaser__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35); transition: filter .4s var(--ease), transform .6s var(--ease); }
.teaser:hover .teaser__media img { filter: none; transform: scale(1.03); }
.teaser__kicker { margin: 0 0 8px; }
.teaser__title { font-family: var(--font-display); font-weight: 800; font-stretch: 114%; font-size: clamp(1.125rem, 2vw, 1.5rem); line-height: 1.05; letter-spacing: -.02em; text-transform: uppercase; margin: 0 0 6px; }
.teaser__sub { color: var(--grey); font-size: .9375rem; margin: 0; }
/* ---------- visual break ---------- */
.break { position: relative; isolation: isolate; height: min(85svh, 820px); min-height: 480px; background: var(--ink); color: var(--paper); overflow: hidden; }
@supports not (height: 1svh) { .break { height: min(85vh, 820px); } }
.break__media { position: absolute; inset: 0; margin: 0; overflow: hidden; }
.break__track { display: flex; height: 100%; width: max-content; will-change: transform; animation: hero-scroll var(--break-loop, 130s) linear infinite reverse; }
.break.is-paused .break__track { animation-play-state: paused; }
.break__slide { flex: none; height: 100%; aspect-ratio: 2 / 3; margin: 0; position: relative; overflow: hidden; background: #000; }
.break__slide img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.break__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,.74) 0%, rgba(0,0,0,.48) 45%, rgba(0,0,0,.34) 100%); }
.break__lines { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 var(--gutter); }
.break__city { font: 600 .8125rem/1 var(--font-display); letter-spacing: .28em; text-transform: uppercase; margin-bottom: 22px; color: rgba(255, 255, 255, .85); }
.break__line { font-family: var(--font-display); font-weight: 800; font-stretch: 116%; font-size: clamp(2.5rem, 9vw, 7.5rem); line-height: .95; letter-spacing: -.025em; text-transform: uppercase; -webkit-text-stroke: 1px rgba(10, 10, 10, .5); paint-order: stroke fill; }
@media (max-width: 599px) { .break__line { font-stretch: 104%; font-size: clamp(2.25rem, 11vw, 4rem); } }

/* ---------- team ---------- */
.team__grid { display: grid; gap: 64px; }
.member { display: grid; gap: 32px; }
@media (min-width: 900px) { .member { grid-template-columns: 5fr 6fr; gap: clamp(40px, 6vw, 96px); align-items: start; } }
.member__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.member__photo { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; background: var(--grey-light); }
.member__photo--alt { margin-top: 48px; }
.member__name { font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: 8px; }
.member__role { margin-bottom: 24px; font: 600 .75rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--grey); }
.member__quote { font-family: var(--font-display); font-weight: 700; font-stretch: 108%; font-size: clamp(1.5rem, 3.2vw, 2.25rem); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 24px; max-width: 22ch; }
.member__body p { max-width: 52ch; margin-bottom: 12px; }
.member__sign { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--grey-light); }
.member__sign strong { display: block; font: 600 .8125rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px; }
.member__sign span { color: var(--grey); font-size: .9375rem; }

/* ---------- partners: blurred moving wordmark strip behind a frosted card ---------- */
.partners { position: relative; isolation: isolate; overflow: hidden; background: var(--grey-light); padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); }
.partners__strip { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; overflow: hidden; pointer-events: none; filter: blur(6px); opacity: .45; }
.partners__track { display: flex; align-items: center; gap: clamp(48px, 7vw, 120px); width: max-content; padding-left: clamp(48px, 7vw, 120px); will-change: transform; animation: hero-scroll 70s linear infinite; }
.partners__mark { font-family: var(--font-display); font-weight: 800; font-stretch: 118%; font-size: clamp(2.75rem, 7vw, 5.5rem); line-height: 1; text-transform: uppercase; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.partners__mark--1 { font-stretch: 75%; font-weight: 700; letter-spacing: .08em; }
.partners__mark--2 { font-weight: 500; font-stretch: 100%; font-style: italic; }
.partners__mark--3 { -webkit-text-stroke: 2px var(--ink); color: transparent; }
.partners__mark--4 { font-weight: 900; font-stretch: 125%; font-size: clamp(2.25rem, 5.5vw, 4.5rem); }
.partners__over { position: relative; z-index: 1; margin: 0; max-width: 620px; padding: clamp(22px, 4vw, 36px); background: rgba(241, 239, 233, .84); }
.partners__over h2 { margin-bottom: 12px; }
.partners__over p { max-width: 44ch; }
.updates__note { margin-top: 12px; font-size: .8125rem; color: var(--grey); }
.updates__note a { color: var(--ink); }

/* ---------- section CTAs: solid buttons that open the sign-up modal ---------- */
.cta-row { margin: 22px 0 0; }
.cta {
  display: inline-flex; align-items: center; gap: 12px; min-height: 50px; padding: 0 22px;
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink); cursor: pointer;
  font: 600 .8125rem/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase;
  transition: background .15s, border-color .15s, color .15s, transform .15s var(--ease);
}
.cta .tick { width: 12px; height: 8px; background: var(--azure); transition: transform .2s var(--ease); }
.cta:hover { background: var(--azure); border-color: var(--azure); transform: translateY(-1px); }
.cta:hover .tick { background: var(--paper); transform: skewX(-28deg) translateX(3px); }
.cta-row--light .cta, .story .cta { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.cta-row--light .cta:hover, .story .cta:hover { background: var(--azure); color: var(--paper); border-color: var(--azure); }
.shop__veil .cta { padding: 0 22px; }
body.modal-open { overflow: hidden; }

/* ---------- sign-up modal: logo splash, then the form ---------- */
.formmodal { border: 0; padding: 0; margin: auto; width: calc(100% - 32px); max-width: 480px; max-height: 92vh; background: var(--paper); color: var(--ink); overflow: hidden; }
.formmodal::backdrop { background: rgba(0, 0, 0, .78); }
.formmodal__body { position: relative; max-height: 92vh; overflow: auto; }
.formmodal__content { padding: 28px 24px 24px; }
.formmodal__content .eyebrow { margin-bottom: 12px; }
.formmodal__content h2 { font-size: clamp(1.5rem, 4.5vw, 2rem); margin-bottom: 8px; }
.formmodal__sub { color: var(--grey); font-size: .9375rem; margin-bottom: 18px; }
.formmodal__frame { border: 1px solid var(--grey-light); min-height: 420px; }
.formmodal__frame iframe { display: block; width: 100%; border: 0; min-height: 420px; }
.formmodal__close { z-index: 3; }
.formmodal.is-splash .formmodal__close { color: var(--paper); }
.formmodal__splash {
  position: absolute; inset: 0; z-index: 2; background: var(--ink); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility 0s linear .5s;
}
.formmodal.is-splash .formmodal__splash { opacity: 1; visibility: visible; transition: opacity .15s; }
.formmodal__mosaic { position: absolute; inset: -4%; display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 1fr; gap: 4px; transform: rotate(-4deg) scale(1.08); }
.formmodal__mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; filter: grayscale(1) contrast(1.05); }
.formmodal.is-splash .formmodal__mosaic img, .welcome.is-playing .formmodal__mosaic img { animation: tile-in .7s var(--ease) both; }
@keyframes tile-in { from { opacity: 0; transform: scale(.7); } to { opacity: .42; transform: scale(1); } }
.formmodal__splash::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,.15) 0%, rgba(0,0,0,.75) 75%); }
.formmodal__mark {
  position: relative; z-index: 1; display: block; width: 46%; max-width: 220px; aspect-ratio: 2373 / 1112;
  -webkit-mask: url("assets/brand/mark.png") center / contain no-repeat; mask: url("assets/brand/mark.png") center / contain no-repeat;
  background-image:
    linear-gradient(100deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.95) 50%, rgba(255,255,255,0) 58%),
    linear-gradient(120deg, var(--paper) 0%, var(--paper) 45%, var(--grey) 100%);
  background-size: 250% 100%, 100% 100%; background-position: 0% 0, 0 0; background-repeat: no-repeat;
  filter: drop-shadow(0 0 24px rgba(0,0,0,.6));
}
.formmodal.is-splash .formmodal__mark, .welcome.is-playing .formmodal__mark { animation: mark-in 1s var(--ease) both, sheen 1.6s ease-in-out .5s both; }
.welcome { position: fixed; inset: 0; z-index: 90; background: var(--ink); display: flex; align-items: center; justify-content: center; overflow: hidden; opacity: 1; transition: opacity .6s var(--ease); }
.welcome[hidden] { display: none; }
.welcome.is-leaving { opacity: 0; }
.welcome__splash { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; overflow: hidden; }
.welcome.is-playing .welcome__splash { display: flex; }
.welcome__splash::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,.15) 0%, rgba(0,0,0,.75) 75%); }
.welcome .formmodal__mark { width: 100%; max-width: 340px; }
.welcome__lockup { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 26px; width: min(80vw, 420px); }
.welcome__line { font-family: var(--font-display); font-weight: 800; font-stretch: 118%; font-size: clamp(2rem, 7vw, 4rem); line-height: 1; letter-spacing: -.02em; text-transform: uppercase; color: var(--paper); opacity: 0; white-space: nowrap; }
.welcome.is-playing .welcome__line { animation: sprint-in .8s var(--ease) .75s both; }
.welcome .formmodal__mosaic { inset: -6%; grid-auto-rows: auto; align-content: start; gap: 4px; }
.welcome .formmodal__mosaic img { aspect-ratio: 4 / 5; height: auto; }
.welcome.is-instant .formmodal__mosaic img { animation-duration: .45s; }
.welcome.is-instant .formmodal__mark { animation-duration: .6s, 1.2s; animation-delay: 0s, .25s; }
.welcome.is-instant .welcome__line { animation-duration: .5s; animation-delay: .35s; }
.welcome.is-settled .formmodal__mosaic img { animation: none; opacity: .42; transform: none; }
.welcome.is-settled .formmodal__mark { animation: none; opacity: 1; transform: none; background-position: 100% 0, 0 0; }
.welcome.is-settled .welcome__line { animation: none; opacity: 1; transform: none; filter: none; }
@keyframes mark-in {
  0% { opacity: 0; transform: translateX(-56px) skewX(-16deg) scale(.7); }
  55% { opacity: 1; transform: translateX(8px) skewX(0) scale(1.04); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
@media (min-width: 600px) { .formmodal__content { padding: 32px 32px 28px; } }

/* ---------- nav dropdown (Teams) ---------- */
.nav__drop { position: relative; }
.nav__drop-trigger { display: inline-flex; align-items: center; gap: 7px; }
.nav__caret { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s var(--ease); }
.nav__menu {
  position: absolute; top: 100%; left: -16px; min-width: 210px; padding: 6px 0;
  background: var(--paper); color: var(--ink); border: 1px solid var(--ink);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s linear .18s; z-index: 5;
}
.nav__drop:hover .nav__menu, .nav__drop:focus-within .nav__menu, .nav__drop.is-open .nav__menu { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }
.nav__drop:hover .nav__caret, .nav__drop:focus-within .nav__caret, .nav__drop.is-open .nav__caret { transform: translateY(1px) rotate(225deg); }
.nav__links .nav__menu a { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 0 16px; min-height: 44px; }
.nav__links .nav__menu a::after { display: none; }
.nav__links .nav__menu a:hover { background: var(--grey-light); }
.nav__menu em { font-style: normal; font-size: .625rem; letter-spacing: .12em; color: var(--grey); }
.nav__menu em.is-live { color: var(--azure); }
.menu__links .menu__sub { display: grid; gap: 0; margin: -4px 0 8px 6px; padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, .3); }
.menu__links .menu__sub a { font-weight: 600; font-stretch: 100%; font-size: .9375rem; letter-spacing: .1em; text-transform: uppercase; line-height: 1; padding: 11px 0; color: rgba(255, 255, 255, .85); }

/* ---------- train and stories pages ---------- */
section.team { background: var(--bone); }
.textbtn { background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); font: 600 .75rem/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 5px; }
.textbtn:hover { color: var(--azure); }

/* ---------- homepage summaries: each section says it short and links to its page ---------- */
.more { margin-top: 14px; }
a.textbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
@media (hover: none), (max-width: 899px) { .textbtn { min-height: 44px; } }
.story__summary { display: grid; gap: 32px; }
@media (min-width: 900px) { .story__summary { grid-template-columns: 1fr 1fr; gap: clamp(48px, 6vw, 112px); align-items: center; } }
.pillar__link { display: block; color: inherit; text-decoration: none; }

/* ---------- team page: a tree. The founder at the top, three branches beneath. Each node opens on a click. ---------- */
.tree { display: grid; }
.node { border: 1px solid var(--ink); background: var(--paper); scroll-margin-top: calc(var(--nav-h) + 16px); }
.node--root { width: 100%; max-width: 760px; margin: 0 auto; }
.node__head { list-style: none; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "tier cue" "name cue"; gap: 8px 16px; align-items: center; min-height: 76px; padding: 16px 20px; cursor: pointer; }
.node__head::-webkit-details-marker { display: none; }
.node__tier { grid-area: tier; display: flex; align-items: center; gap: 8px; font: 600 .6875rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--grey); }
.node__tier .tick { width: 10px; height: 7px; background: var(--azure); }
.node__name { grid-area: name; font-family: var(--font-display); font-weight: 800; font-stretch: 114%; font-size: clamp(1.25rem, 2.6vw, 1.75rem); line-height: 1; letter-spacing: -.02em; text-transform: uppercase; }
.node__cue { grid-area: cue; width: 12px; height: 12px; margin-right: 6px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateY(-3px) rotate(45deg); transition: transform .3s var(--ease); }
.node[open] > .node__head { border-bottom: 1px solid var(--grey-light); }
.node[open] > .node__head .node__cue { transform: translateY(3px) rotate(225deg); }
.node__head:hover .node__name { color: var(--azure); }
.node__body { padding: 24px 20px 28px; animation: node-open .35s var(--ease) both; }
@keyframes node-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.node__body .member__quote { font-size: clamp(1.25rem, 2.4vw, 1.75rem); }
.node__note { margin-top: 16px; max-width: 46ch; color: var(--grey); font-size: .9375rem; }
/* the lines of the tree: a trunk from the founder, a bar, a stem to each branch */
.tree__branches { position: relative; display: grid; gap: 14px; margin-top: 40px; }
.tree__branches::before { content: ""; position: absolute; left: 50%; top: -40px; width: 1px; height: 40px; background: var(--ink); }
.tree__branches > .node { position: relative; }
.tree__branches > .node + .node::before { content: ""; position: absolute; left: 50%; top: -15px; width: 1px; height: 14px; background: var(--ink); }
@media (min-width: 900px) {
  .tree__branches { grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; padding-top: 28px; }
  .tree__branches::after { content: ""; position: absolute; top: 0; left: calc((100% - 40px) / 6); right: calc((100% - 40px) / 6); height: 1px; background: var(--ink); }
  .tree__branches > .node::before, .tree__branches > .node + .node::before { content: ""; position: absolute; left: 50%; top: -29px; width: 1px; height: 28px; background: var(--ink); }
}
.seats { list-style: none; margin: 0; padding: 0; display: grid; }
.seat { display: grid; grid-template-columns: 56px 1fr; grid-template-areas: "photo name" "photo role"; column-gap: 14px; row-gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--grey-light); }
.seat:first-child { padding-top: 0; }
.seat__photo { grid-area: photo; position: relative; width: 56px; height: 70px; overflow: hidden; background: var(--grey-light); }
.seat__photo::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 9px; margin: -4.5px 0 0 -7px; background: var(--concrete); transform: skewX(-28deg); opacity: .6; }   /* the tick stands in until the portrait arrives */
.seat__photo.has-photo::after { display: none; }
.seat__photo img { width: 100%; height: 100%; object-fit: cover; }
.seat__name { grid-area: name; align-self: end; font: 700 .9375rem/1.15 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.seat__role { grid-area: role; align-self: start; color: var(--grey); font-size: .875rem; line-height: 1.3; }

/* ---------- stories page: chapters as a category row, a lead story, cards with a label, a headline and a photo ---------- */
.hub { padding-bottom: clamp(28px, 4vw, 48px); }
.chapters { display: flex; gap: 8px; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.chapters::-webkit-scrollbar { display: none; }
.chapters a { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--ink); color: var(--ink); text-decoration: none; font: 600 .6875rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; transition: background .15s, color .15s; }
.chapters .tick { width: 10px; height: 7px; background: var(--azure); }
.chapters a:hover { background: var(--ink); color: var(--paper); }
.chapter, .story, .archive, #founder-note { scroll-margin-top: var(--nav-h); }
.chapter--alt { background: var(--bone); }
.chapter .teasers { margin-bottom: 0; }
.teaser--invite { display: grid; align-content: end; gap: 8px; padding: 18px; border: 1px solid var(--ink); background: var(--paper); }
.teaser--invite .teaser__sub { margin-bottom: 10px; }
.teaser--invite .cta { justify-self: start; }
.archive { background: var(--ink); color: var(--paper); }
.archive .eyebrow { color: rgba(255, 255, 255, .85); }
.archive__inner { display: grid; gap: 22px; justify-items: start; }
.archive__inner h2 { max-width: 14ch; }
.archive__lede { max-width: 46ch; color: rgba(255, 255, 255, .82); font-size: clamp(1.0625rem, 1.8vw, 1.25rem); }
.archive .cta-row { margin-top: 4px; }
.archive .cta { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.archive .cta:hover { background: var(--azure); color: var(--paper); border-color: var(--azure); }

/* ---------- train page: program cards. The founder block (section.team) keeps the same compact card look it has had since 2026-09-21. ---------- */
.teams__title { font-size: clamp(2.25rem, 6vw, 4rem); }
.teams__grid { display: grid; gap: 14px; }
@media (min-width: 700px) { .teams__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .teams__grid { grid-template-columns: repeat(4, 1fr); } }
.program, section.team { border: 1px solid var(--ink); padding: 24px; display: grid; gap: 12px; align-content: start; scroll-margin-top: calc(var(--nav-h) + 16px); }
.program--soon { border-color: var(--grey-light); background: var(--grey-light); }
.program__status { display: flex; align-items: center; gap: 8px; font: 600 .6875rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--grey); }
.program__status .tick { width: 10px; height: 7px; }
.program__status--live { color: var(--ink); }
.program__status--live .tick { background: var(--azure); }
.program h2, section.team h2 { font-size: 1.5rem; }
.program p, section.team p { color: var(--grey); font-size: .9375rem; }
.program .cta, .program .link, section.team .cta, section.team .link { justify-self: start; margin-top: 4px; }
.teams__note { margin-top: 24px; color: var(--grey); font-size: .875rem; }

/* ---------- thank-you page ---------- */
.thanks__wrap { max-width: 640px; }
.thanks h1 { font-size: clamp(2.25rem, 6vw, 4rem); margin-bottom: 16px; }
.thanks__telegram { margin: 28px 0 20px; }
.thanks__telegram .btn { min-height: 54px; }
.thanks__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.thanks__note { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--grey-light); color: var(--grey); font-size: .9375rem; max-width: 46ch; }

/* ---------- inner pages (shop) ---------- */
.page > .section:first-child { padding-top: calc(var(--nav-h) + clamp(40px, 6vw, 72px)); }
.nav__links a[aria-current="page"]::after { right: 0; }
.shop__title { font-size: clamp(2.25rem, 6vw, 4.25rem); }
.shop__back { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 40px; }

/* ---------- shop preview ---------- */
.products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 12px; }
@media (min-width: 900px) { .products { grid-template-columns: repeat(4, 1fr); gap: 32px 20px; } }
.product__tile { position: relative; aspect-ratio: 4 / 5; background: var(--grey-light); display: flex; align-items: flex-end; padding: 16px; overflow: hidden; }
.product__word {
  font-family: var(--font-display); font-weight: 800; font-stretch: 120%;
  font-size: clamp(1.75rem, 3.6vw, 2.75rem); line-height: .9; letter-spacing: -.03em; text-transform: uppercase;
  color: rgba(0, 0, 0, .2); white-space: nowrap;
}
@media (max-width: 359px) { .product__word { font-size: 1.25rem; } }
.product__mark { position: absolute; top: 16px; right: 16px; width: 18px; height: 11px; background: var(--ink); transform: skewX(-28deg); opacity: .45; }
.product__meta { padding-top: 12px; }
.product__meta h3 { font-size: 1rem; margin-bottom: 4px; }
.product__price { color: var(--grey); font-size: .9375rem; margin-bottom: 12px; }
.product .btn { width: 100%; min-height: 44px; }
.shop__preview { position: relative; }
.shop__preview .products { filter: blur(9px); pointer-events: none; user-select: none; opacity: .85; }
.shop__veil {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  text-align: center; padding: 24px;
}
.shop__veil-word {
  font-family: var(--font-display); font-weight: 800; font-stretch: 118%;
  font-size: clamp(2.25rem, 8vw, 5.5rem); line-height: .95; letter-spacing: -.03em; text-transform: uppercase;
  background: var(--paper); padding: .1em .2em; box-decoration-break: clone;
}
.shop__note { margin-top: 32px; color: var(--grey); font-size: .9375rem; }

/* ---------- footer ---------- */
.footer { background: var(--ink); color: var(--paper); padding: clamp(56px, 8vw, 96px) var(--gutter) 32px; }
.footer__grid { display: grid; gap: 40px; }
@media (min-width: 900px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr; gap: 48px; } }
.footer__brand img { height: 40px; width: auto; margin-bottom: 20px; }
.footer__brand p { color: rgba(255, 255, 255, .7); max-width: 32ch; }
.footer__links { display: flex; flex-direction: column; gap: 0; align-items: flex-start; }
.footer__links a, .footer__links button {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0;
  font: 600 .75rem/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; background: none; border: 0; cursor: pointer; color: inherit;
}
.footer__links .tick { width: 10px; height: 7px; opacity: .5; }
.footer__social p { color: rgba(255, 255, 255, .7); margin-bottom: 12px; }
.footer__legal {
  margin-top: 56px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .2);
  display: flex; flex-wrap: wrap; gap: 8px 32px; font-size: .8125rem; color: rgba(255, 255, 255, .6);
}

/* ---------- under-construction gate: a card over the live site, which stays blurred until Enter ---------- */
.gate {
  position: fixed; inset: 0; margin: auto; padding: 0; border: 1px solid rgba(255, 255, 255, .18);
  width: min(calc(100% - 32px), 560px); height: fit-content; max-height: calc(100% - 32px); max-width: none; overflow: auto;
  background: rgba(0, 0, 0, .9); color: var(--paper);
}
.gate::backdrop { background: rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
body:not(.gate-open) > *:not(dialog):not(.welcome):not(.jc) { transition: filter .6s var(--ease); }
body.gate-open > *:not(dialog):not(.welcome):not(.jc), html.pre-gate body > *:not(dialog):not(.welcome):not(.jc) { filter: blur(14px); transition: none; }   /* pre-gate: set in the head, so the first paint is already blurred */
.welcome { filter: none !important; }
.gate__inner { display: grid; gap: 22px; padding: 28px 24px 24px; }
.gate__logo img { height: 32px; width: auto; }
.gate__body .eyebrow { color: rgba(255, 255, 255, .85); margin-bottom: 14px; }
.gate__body h2 { font-size: clamp(1.75rem, 6vw, 2.5rem); }
.gate__body p:not(.eyebrow) { max-width: 46ch; color: rgba(255, 255, 255, .82); margin: 14px 0 22px; font-size: 1rem; }
.gate__actions { display: flex; flex-wrap: wrap; gap: 12px 16px; }
.gate__actions .btn { min-height: 50px; }
.gate__foot { font: 600 .6875rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
body.gate-open { overflow: hidden; }
@media (min-width: 600px) { .gate__inner { padding: 32px 32px 28px; } .gate__logo img { height: 36px; } }

/* ---------- city picker: opens after the entry card, over the blurred site. Built by app.js from the CITIES map. ----------
   Two city names side by side on a rail. One thing moves: the slanted bone block that slides under the city the pointer or the focus is on.
   The words never move. With two cities nothing scrolls; a third makes the same rail scroll sideways with snap. */
.citypick { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--paper); overflow: hidden; }
.citypick::backdrop { background: rgba(10, 10, 10, .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.citypick[open] { animation: citypick-in .4s var(--ease) both; }
@keyframes citypick-in { from { opacity: 0; } to { opacity: 1; } }
.citypick__inner { height: 100%; display: grid; align-content: center; justify-items: center; gap: clamp(20px, 4vw, 36px); padding: 24px var(--gutter); }
.citypick .eyebrow { color: rgba(255, 255, 255, .85); margin: 0; }
.citypick__rail { position: relative; display: flex; align-items: stretch; gap: clamp(8px, 3vw, 40px); max-width: 100%; padding: 0 clamp(10px, 2vw, 24px); overflow: visible; }
.citypick__rail--scroll { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none; }   /* three cities or more */
.citypick__rail--scroll::-webkit-scrollbar { display: none; }
.citypick__wash { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--bone); transform: translate3d(0, 0, 0) skewX(-12deg); transition: transform .3s var(--ease), width .3s var(--ease); pointer-events: none; }
.citypick__opt {
  position: relative; z-index: 1; flex: none; scroll-snap-align: center;
  display: grid; gap: 10px; align-content: center; justify-items: start; text-align: left;
  min-height: 120px; padding: 18px clamp(12px, 3vw, 40px);
  background: none; border: 0; cursor: pointer; color: rgba(255, 255, 255, .88); transition: color .3s var(--ease);
}
.citypick__name { font-family: var(--font-display); font-weight: 800; font-stretch: 116%; font-size: clamp(2rem, 9vw, 6rem); line-height: .95; letter-spacing: -.03em; text-transform: uppercase; }
.citypick__meta { display: inline-flex; align-items: center; gap: 8px; font: 600 .6875rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.citypick__meta .tick { width: 10px; height: 7px; background: currentColor; }
.citypick__opt.is-active { color: var(--ink); }
.citypick__opt.is-active .citypick__meta { color: var(--grey); }
.citypick__opt.is-active .citypick__meta .tick { background: var(--azure); }
.citypick__opt:focus { outline: none; }
.citypick__opt:focus-visible { outline: 2px solid var(--paper); outline-offset: -5px; }
.citypick__opt.is-active:focus-visible { outline-color: var(--ink); }   /* on the bone block the ring is ink */
.citypick__foot { margin: 0; font: 600 .6875rem/1.5 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .85); text-align: center; }
@media (max-height: 480px) { .citypick__opt { min-height: 76px; padding-top: 10px; padding-bottom: 10px; } }
/* phones: the two cities share the width evenly, so neither one sits past the edge */
@media (max-width: 599px) {
  .citypick__rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; padding: 0 12px; overflow: visible; }
  .citypick__opt { min-width: 0; padding: 16px 10px; }
  .citypick__name { font-size: clamp(1.375rem, 7.4vw, 2.5rem); }
  .citypick__meta { font-size: .625rem; letter-spacing: .1em; flex-wrap: nowrap; align-items: flex-start; min-height: 20px; line-height: 1; }
  .citypick__meta .tick { flex: none; margin-top: 1.5px; }
}

/* ---------- city: everything marked data-city-only follows the one attribute on <html>. No attribute means Manila. ---------- */
html[data-city]:not([data-city="manila"]) [data-city-only="manila"] { display: none; }
html:not([data-city="cebu"]) [data-city-only="cebu"] { display: none; }

/* the switch above the next-run box: two words, the azure tick marks the city that is on */
.cityswitch { display: flex; align-items: center; gap: 12px; margin-bottom: -4px; }
.cityswitch[hidden] { display: none; }
.cityswitch__opt { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 2px; background: none; border: 0; cursor: pointer; color: var(--grey); font: 600 .75rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; transition: color .15s; }
.cityswitch__opt .tick { width: 10px; height: 7px; background: var(--azure); visibility: hidden; }
.cityswitch__opt:hover { color: var(--ink); }
.cityswitch__opt[aria-pressed="true"] { color: var(--ink); }
.cityswitch__opt[aria-pressed="true"] .tick { visibility: visible; }
.cityswitch__sep { color: var(--concrete); font: 600 .75rem/1 var(--font-display); }

.week__next-text[data-city-only="cebu"] strong { text-wrap: balance; }

/* loops stand still off screen */
.partners.is-paused .partners__track, .week.is-paused .runarrow__bar, .week.is-paused .runarrow__head, .week.is-paused .pin svg, .week.is-paused .pin__shadow { animation-play-state: paused; }

/* ---------- legal pages ---------- */
.legal__wrap { max-width: 76ch; }
.legal h1 { font-size: clamp(2.25rem, 6vw, 4rem); margin-bottom: 12px; }
.legal__meta { color: var(--grey); font-size: .875rem; margin-bottom: 32px; }
.legal__summary { background: var(--grey-light); border-left: 4px solid var(--ink); padding: 20px 22px; margin: 0 0 32px; }
.legal__summary-title { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font: 600 .75rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.legal__summary ul { margin: 0; padding-left: 18px; }
.legal__summary li { margin-bottom: 8px; }
.legal__summary-note { margin-top: 12px; font-size: .8125rem; color: var(--grey); }
.legal__toc { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 24px; padding-bottom: 24px; border-bottom: 1px solid var(--grey-light); font-size: .875rem; }
.legal__toc a { color: var(--grey); text-decoration: none; border-bottom: 1px solid transparent; }
.legal__toc a:hover { color: var(--ink); border-bottom-color: currentColor; }
.legal h2 { font-size: 1.375rem; margin: 40px 0 12px; scroll-margin-top: calc(var(--nav-h) + 16px); }
.legal p { margin-bottom: 14px; line-height: 1.65; }
.legal ul { margin: 0 0 16px; padding-left: 20px; }
.legal li { margin-bottom: 8px; line-height: 1.6; }
.legal a { color: inherit; }
.legal__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--grey-light); }

.footer__legal-links a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .3); }
.footer__legal-links a:hover { border-bottom-color: currentColor; }
.gate__legal { margin-top: 12px; font-size: .8125rem; color: rgba(255, 255, 255, .55); max-width: 46ch; }
.gate__legal a { color: rgba(255, 255, 255, .8); }

/* ---------- Staffly credit: quiet line, the name in azure like a link ---------- */
.footer__credit { margin: 10px auto 0; }
.footer__credit, .gate__credit { font-size: .6875rem; color: rgba(255, 255, 255, .38); }
.footer__credit a, .gate__credit a { color: var(--azure); text-decoration: underline; text-decoration-color: rgba(72, 99, 160, .55); text-underline-offset: 3px; }
.footer__credit a:hover, .gate__credit a:hover { color: var(--azure-on-dark); text-decoration-color: currentColor; }
.gate__credit { margin-top: 8px; }

/* ---------- member login placeholder modal ---------- */
.modal { border: 0; padding: 0; max-width: 520px; width: calc(100% - 32px); background: var(--paper); color: var(--ink); margin: auto; }
.modal::backdrop { background: rgba(0, 0, 0, .72); }
.modal__body { padding: 32px; }
.modal__body .eyebrow { margin-bottom: 16px; }
.modal__body h2 { font-size: clamp(1.75rem, 5vw, 2.5rem); margin-bottom: 16px; }
.modal__body p { color: var(--grey); margin-bottom: 24px; }
.modal__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.modal__close { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; font-size: 1.75rem; line-height: 1; }
@media (min-width: 600px) { .modal__body { padding: 40px; } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn, .nav, .nav__mark, .nav__links a::after { transition: none; }
  .nav__mark::after { animation: none; }
  .hero__track, .break__track { animation: none; }
  .shine { animation: none; background-position: -100% 0, 0 0; }
  .type .w { animation: none !important; opacity: 1; }
  .type.is-done .line { animation: none; background-position: -100% 0, 0 0; }
  .pin svg, .pin__shadow { animation: none !important; opacity: 1; transform: none; }
  .citypick[open], .node__body { animation: none; }
  .node__cue, .chapters a { transition: none; }
  .teaser__go .tick { transition: none; }
  .teaser__anchor:hover .teaser__go .tick, .teaser__anchor:focus-visible .teaser__go .tick { transform: skewX(-28deg); }
  .citypick__wash, .citypick__opt, .cityswitch__opt { transition: none; }
  .slider__track { transition: none; }
  .partners__track { animation: none; }
  .formmodal__mosaic img, .formmodal__mark { animation: none; opacity: .42; }
  .welcome__line { animation: none !important; opacity: 1; }
  .nav__menu, .nav__caret, .cta .tick { transition: none; }
}

/* ---------- cursor companion (cursor.js; ported from the Staffly Technologies site and dressed for JSU) ----------
   Rest: the JSU mark trails the pointer, faint. Hint: a slanted tag with one word, centred, and the system pointer hides.
   Quiet: the brand tick beside the pointer, over ordinary links and buttons. Mouse devices only; the script builds it on the first real move.
   Off switch: data-cursor="off" on <html>, or ?sc=off on any address. */
.jc { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 9999; pointer-events: none; opacity: 0; transition: opacity .22s ease; will-change: transform; color: var(--ink); }
.jc.is-on { opacity: 1; }
.jc.is-dark { color: var(--paper); }
.jc-c {
  --dx: 30px; --dy: 22px; --skew: 0deg;
  position: absolute; left: 0; top: 0; width: 46px; height: 22px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) skewX(var(--skew));
  transition: width .3s var(--ease), height .3s var(--ease), transform .3s var(--ease), background-color .25s ease, opacity .25s ease;
}
/* at rest: the mark, trailing the pointer */
.jc-i { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: currentColor; opacity: .32; -webkit-mask: url("assets/brand/mark.png") center / contain no-repeat; mask: url("assets/brand/mark.png") center / contain no-repeat; transition: opacity .25s ease; }
.jc.is-dark .jc-i { opacity: .5; }
.jc-w { position: relative; font: 700 .6875rem/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; color: var(--paper); opacity: 0; transform: skewX(0deg); transition: opacity .11s ease; -webkit-user-select: none; user-select: none; }
/* with a hint: a slanted ink tag, centred on the pointer, one word inside standing upright */
.jc.is-hint .jc-c { --dx: 0px; --dy: 0px; --skew: -14deg; width: 96px; height: 36px; background: var(--ink); box-shadow: 0 0 0 1px rgba(255, 255, 255, .22); }
.jc.is-hint .jc-i { opacity: 0; }
.jc.is-hint .jc-w { opacity: 1; transform: skewX(14deg); }
.jc.is-dark.is-hint .jc-c { background: var(--bone); box-shadow: 0 0 0 1px rgba(10, 10, 10, .3); }
.jc.is-dark .jc-w { color: var(--ink); }
/* over ordinary links and buttons: the tick, beside the pointer */
.jc.is-quiet .jc-c { --dx: 16px; --dy: 18px; --skew: -28deg; width: 14px; height: 9px; background: var(--azure); opacity: .85; }
.jc.is-dark.is-quiet .jc-c { background: var(--azure-on-dark); }
.jc.is-quiet .jc-i, .jc.is-quiet .jc-w, .jc.is-swap .jc-w { opacity: 0; }
/* while a hint shows, the tag is the pointer. form controls are left out: a cursor rule on a select changes its height */
html.jc-hint, html.jc-hint *:not(select):not(option):not(input):not(textarea):not(label) { cursor: none !important; }
@media print { .jc { display: none; } }

/* ---------- story articles (story-*.html) and clickable story cards ----------
   Tokens only, nothing new: ink, bone, paper, grey, concrete, Archivo, Instrument Sans. Azure appears once, as the
   primary button and the small tick that marks a link, the same jobs it has everywhere else on the site. */
.article__layout { display: grid; gap: 40px; }
.article__main { display: grid; gap: 28px; }
.article__title { font-size: clamp(2.25rem, 6.5vw, 4.5rem); line-height: .98; max-width: 14ch; }
.article__meta { margin: 20px 0 0; color: var(--grey); }
.article__crumb { margin: 0 0 18px; color: var(--grey); }
.article__crumb a { text-decoration: none; border-bottom: 1px solid currentColor; }
.article__crumb a:hover { border-bottom-color: transparent; }
.article__figure { margin: 0; }
.article__figure img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 52%; background: #111; }
.article__figure figcaption { margin-top: 10px; color: var(--grey); }
.article__body p { max-width: 58ch; margin: 0 0 1.15em; font-size: 1.0625rem; line-height: 1.65; }
.article__body .article__lede { font-family: var(--font-display); font-weight: 700; font-stretch: 108%; font-size: clamp(1.5rem, 3.4vw, 2.25rem); line-height: 1.12; letter-spacing: -.02em; max-width: 24ch; margin-bottom: 1em; }
.article__quote { margin: 1.5em 0; padding: 18px 0 0; border-top: 1px solid var(--ink); max-width: 20ch; font-family: var(--font-display); font-weight: 700; font-stretch: 108%; font-size: clamp(1.5rem, 3.2vw, 2.25rem); line-height: 1.1; letter-spacing: -.02em; }
.article__body .article__beat { font-family: var(--font-display); font-weight: 800; font-stretch: 112%; font-size: clamp(1.5rem, 3.4vw, 2.25rem); line-height: 1.05; letter-spacing: -.02em; max-width: none; margin: 1.1em 0; }
.article__body .article__lines { font-size: 1.1875rem; line-height: 1.5; font-weight: 500; }
.article__end { display: grid; gap: 22px; }
.article__end .article__end-lead { color: rgba(255, 255, 255, .82); max-width: 40ch; margin: 0; }
.article__end .display { margin: 0; text-wrap: balance; }
.article__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 6px; }
.article__back { margin: 36px 0 0; }
.teaser__anchor { display: block; color: inherit; text-decoration: none; }
.teaser__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font: 600 .6875rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.teaser__go .tick { width: 10px; height: 7px; background: var(--azure); transition: transform .2s var(--ease); }
.teaser__anchor:hover .teaser__go .tick, .teaser__anchor:focus-visible .teaser__go .tick { transform: skewX(-28deg) translateX(3px); }
@media (min-width: 900px) {
  .article__layout { grid-template-columns: minmax(0, 1fr) 300px; column-gap: clamp(40px, 6vw, 96px); align-items: start; }
  .article__figure img { aspect-ratio: 3 / 2; }
  .article__rail { position: sticky; top: calc(var(--nav-h) + 24px); }
}

/* ---------- stories front page (2026-10-01): a lead story, then chapter blocks beside a rail. Studied from wheninmanila.com, built
   on the site's own tokens: ink, bone, paper, grey, concrete, Archivo, Instrument Sans. Azure only on the ticks and the CTA hover. ---------- */
.lead { padding-top: 0; padding-bottom: clamp(48px, 6vw, 88px); }
.lead__label { margin: 0 0 14px; color: var(--ink); }
.lead__anchor { display: grid; gap: 20px; }
.lead__media { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: #111; }
.lead__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; filter: grayscale(.35); transition: filter .4s var(--ease), transform .6s var(--ease); }
.lead__anchor:hover .lead__media img, .lead__anchor:focus-visible .lead__media img { filter: none; transform: scale(1.02); }
.lead__text { display: grid; gap: 14px; align-content: center; }
.lead__kicker { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.lead__chapter { color: var(--ink); }
.lead__title { font-size: clamp(2rem, 5vw, 3.75rem); line-height: 1; max-width: 16ch; margin: 0; }
.lead__sub { color: var(--grey); font-size: clamp(1.0625rem, 1.8vw, 1.25rem); line-height: 1.5; max-width: 40ch; margin: 0; }
.lead__by { margin: 0; }
.lead__anchor .teaser__go { margin-top: 2px; }
@media (min-width: 900px) {
  .lead__anchor { grid-template-columns: 7fr 5fr; gap: clamp(32px, 5vw, 72px); }
  .lead__media { aspect-ratio: 3 / 2; }
}
.front { padding-top: 0; }
.front__grid { display: grid; gap: 56px; }
@media (min-width: 900px) {
  .front__grid { grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(40px, 6vw, 96px); align-items: start; }
  .front__side { position: sticky; top: calc(var(--nav-h) + 24px); }
}
/* a chapter block: a rule, its label and headline, then its rows */
.edition { padding-top: 24px; border-top: 1px solid var(--ink); scroll-margin-top: calc(var(--nav-h) + 16px); }
.edition + .edition { margin-top: 48px; }
.edition__head { display: grid; gap: 10px; margin-bottom: 20px; }
.edition__head .eyebrow { margin: 0; }
.edition__head h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); margin: 0; max-width: 20ch; }
.edition__lede { color: var(--grey); margin: -8px 0 18px; max-width: 44ch; }
.rows { list-style: none; margin: 0; padding: 0; display: grid; }
.rows--more { margin-bottom: 0; }
.row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; padding: 18px 0; border-top: 1px solid var(--bone); }
.row:first-child { border-top: 0; padding-top: 0; }
.row:last-child { padding-bottom: 0; }
@media (min-width: 600px) { .row { grid-template-columns: 140px minmax(0, 1fr); gap: 24px; } }
.row__media { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: rgba(0, 0, 0, .06); }
.row__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35); transition: filter .4s var(--ease), transform .6s var(--ease); }
.row__anchor { display: contents; color: inherit; text-decoration: none; }
.row__anchor:hover .row__media img, .row__anchor:focus-visible .row__media img { filter: none; transform: scale(1.03); }
.row__text { display: grid; gap: 6px; align-content: center; }
.row__kicker { margin: 0; }
.row__title { font-family: var(--font-display); font-weight: 800; font-stretch: 114%; font-size: clamp(1.125rem, 2vw, 1.5rem); line-height: 1.05; letter-spacing: -.02em; text-transform: uppercase; margin: 0; }
.row__sub { color: var(--grey); font-size: .9375rem; margin: 0; }
.row--coming .row__media { opacity: .85; }
/* the rail: small ruled cards. The dark one is The Archive, the same black as its band. */
.rail { display: grid; gap: 14px; }
.rail__card { border: 1px solid var(--ink); background: var(--paper); padding: 20px; display: grid; gap: 10px; align-content: start; }
.rail__card .eyebrow { margin: 0; }
.rail__card p { margin: 0; color: var(--grey); font-size: .9375rem; line-height: 1.5; }
.rail__card .cta, .rail__card .textbtn { justify-self: start; margin-top: 4px; }
.rail__title { font-family: var(--font-display); font-weight: 800; font-stretch: 114%; font-size: 1.375rem; line-height: 1.05; letter-spacing: -.02em; text-transform: uppercase; margin: 0; color: var(--ink); }
.rail__card .rail__quote { font-family: var(--font-display); font-weight: 700; font-stretch: 108%; font-size: 1.25rem; line-height: 1.15; letter-spacing: -.02em; color: var(--ink); }
.rail__card--dark { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.rail__card--dark .eyebrow, .rail__card--dark .rail__title { color: var(--paper); }
.rail__card--dark p { color: rgba(255, 255, 255, .82); }
.rail__card--dark .textbtn { color: var(--paper); }
.rail__card--dark .textbtn:hover { color: var(--azure-on-dark); }
/* the writer box on a story page */
.rail__author { grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: start; }
.rail__author > div { display: grid; gap: 8px; }
.rail__portrait { width: 72px; height: 90px; object-fit: cover; background: var(--grey-light); }
.rail__card .rail__name { font-family: var(--font-display); font-weight: 800; font-stretch: 114%; font-size: 1.125rem; line-height: 1.05; letter-spacing: -.01em; text-transform: uppercase; color: var(--ink); }
/* share links: plain links to the person's own apps, no scripts from anyone else */
.share { display: flex; flex-wrap: wrap; gap: 8px; }
.share__link { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--ink); background: transparent; color: var(--ink); text-decoration: none; cursor: pointer; font: 600 .6875rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; transition: background .15s, color .15s; }
.share__link:hover, .share__link:focus-visible { background: var(--ink); color: var(--paper); }
.share__address { width: 100%; min-height: 40px; margin-top: 6px; padding: 0 10px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); font: 500 .8125rem/1 var(--font-body); }