/* ==========================================================================
   Ju-Jitsu Warriors Academy
   Palette taken from their own material: the red is the exact red of their
   logo disc (#CE0019); the bone is the wall of the Bikfaya dojo (#D5DAE4)
   lifted for text contrast.
   ========================================================================== */

:root{
  --ink:      #0B0B0D;
  --ink-2:    #131317;
  --ink-3:    #1D1E23;
  --red:      #CE0019;   /* brand fill, and small text on the light grounds */
  --red-hot:  #E8102A;   /* hover fill only, never small text */
  --red-txt:  #FF3B4E;   /* small text and links on the dark grounds (AA) */
  --bone:     #EDEFF3;
  --paper:    #FFFFFF;
  --slate:    #8A9099;
  --slate-lt: #A7ACB6;

  --wrap: 1240px;
  --gut: clamp(20px, 5vw, 56px);

  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 40px;
  --s5: 64px; --s6: 96px; --s7: 136px;

  --disp: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --body: 'Barlow', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--ink); color:var(--bone);
  font:400 17px/1.62 var(--body);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
h1,h2,h3{ margin:0; font-family:var(--disp); font-weight:800;
  text-transform:uppercase; line-height:.92; letter-spacing:-.006em; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--red); color:#fff; padding:16px 20px;
  font:700 13px/1 var(--disp); letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
}
.skip:focus{ left:0; }

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--red-hot); outline-offset:3px; border-radius:2px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:14px 24px;
  font:700 13.5px/1 var(--disp); letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.btn--red{ background:var(--red); color:#fff; }
.btn--red:hover{ background:var(--red-hot); }
/* State both sides of the hovered pair outright. This was once
   `background:currentColor; color:var(--ink)`, and a same-specificity rule
   later in the file set the hero copy of this button to #fff, so currentColor
   resolved to white and painted white text on a white fill. Any hover fill
   taken from currentColor can be silently inverted by a later colour rule. */
.btn--ghost{ border-color:currentColor; background:none; color:inherit; }
.btn--ghost:hover,
.btn--ghost:focus-visible{ background:var(--bone); border-color:var(--bone); color:var(--ink); }
.btn--big{ min-height:60px; padding:18px 34px; font-size:15px; width:100%; }

/* Standalone action links need a 44px hit area, but a border-bottom on a padded
   box paints the rule at the bottom of the box rather than under the words.
   Underline the text itself and grow the box around it instead. */
.lnk{
  display:inline-flex; align-items:center; min-height:44px;
  margin-top:calc(var(--s2) - 12px); margin-bottom:-12px;
  font:700 12.5px/1 var(--disp); letter-spacing:.16em; text-transform:uppercase;
  color:var(--red-txt);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px;
}
.lnk:hover{ color:#fff; }

.eyebrow{
  font:700 12px/1 var(--disp); letter-spacing:.28em; text-transform:uppercase;
  color:var(--red-txt); margin-bottom:var(--s2);
}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; gap:var(--s4);
  padding:14px var(--gut); color:#fff;
  transition:background .3s ease, backdrop-filter .3s ease;
}
.nav.is-stuck{ background:rgba(11,11,13,.94); }
.nav__brand{
  display:flex; align-items:center; gap:12px; text-decoration:none;
  font:700 14px/.94 var(--disp); letter-spacing:.06em; text-transform:uppercase;
  flex:0 0 auto;
}
.nav__brand img{ width:44px; height:44px; }
.nav__menu{ display:flex; align-items:center; gap:var(--s4); margin-left:auto; }
.nav__menu a{
  font:600 13px/1 var(--disp); letter-spacing:.15em; text-transform:uppercase;
  text-decoration:none; color:#fff; opacity:.82;
  min-height:44px; display:inline-flex; align-items:center;
}
.nav__menu a:hover{ opacity:1; }
.nav__menu a.nav__cta{ opacity:1; }
.nav__toggle{
  display:none; margin-left:auto; width:48px; height:48px;
  background:none; border:1px solid rgba(255,255,255,.35); color:#fff; cursor:pointer;
  align-items:center; justify-content:center;
}
.nav__bars, .nav__bars::before, .nav__bars::after{
  display:block; width:20px; height:2px; background:currentColor;
  transition:transform .24s cubic-bezier(.16,.84,.3,1), background-color .16s ease, opacity .16s ease;
}
.nav__bars::before,.nav__bars::after{ content:''; position:relative; }
.nav__bars::before{ top:-6px; }
.nav__bars::after{ top:4px; }
.nav__toggle[aria-expanded="true"] .nav__bars{ background:transparent; }
.nav__toggle[aria-expanded="true"] .nav__bars::before{ transform:translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__bars::after{ transform:translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; min-height:100svh; overflow:hidden;
  display:flex; align-items:center; background:var(--ink);
}
.hero__photo{
  position:absolute; inset:0;
  background:url(../img/hero-lineup.jpg) center 24%/cover no-repeat;
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(5,5,7,.92) 0%, rgba(5,5,7,.46) 40%, rgba(5,5,7,.72) 74%, rgba(5,5,7,.97) 100%),
    linear-gradient(90deg, rgba(5,5,7,.86) 0%, rgba(5,5,7,.30) 52%, rgba(5,5,7,.60) 100%);
}
.hero__body{
  position:relative; z-index:3;
  width:100%; max-width:var(--wrap); margin:0 auto;
  padding:0 var(--gut);
}
.hero__title{
  font-size:clamp(58px, 10.4vw, 142px);
  line-height:.83; letter-spacing:-.014em; color:#fff;
  text-shadow:0 2px 40px rgba(0,0,0,.5);
}
.hero__title em{ font-style:italic; color:var(--red); font-weight:800; }
.hero__sub{
  margin:var(--s3) 0 var(--s4); max-width:46ch;
  font-size:clamp(16px, 1.35vw, 19px); color:#CDD0D7;
}
.hero__acts{ display:flex; flex-wrap:wrap; gap:var(--s2); }

.hero__now{
  /* Pin to the edge of the content column, not the viewport. At the gutter the
     two are the same; past --wrap the card would otherwise drift off on its own
     while the headline stayed centred. */
  position:absolute; z-index:4; top:50%; transform:translateY(-50%);
  right:max(var(--gut), calc(50vw - var(--wrap) / 2));
  text-align:right; border-right:3px solid var(--red);
  padding:var(--s3) var(--s3) var(--s3) var(--s4);
  background:rgba(5,5,7,.72);
  backdrop-filter:saturate(120%) blur(2px);
}
.now__lab{ font:700 11px/1 var(--disp); letter-spacing:.24em; text-transform:uppercase; color:var(--slate-lt); }
.now__time{ font:500 clamp(24px,2.4vw,34px)/1 var(--mono); font-variant-numeric:tabular-nums; color:#fff; margin:12px 0 8px; }
.now__what{ font:700 19px/1.2 var(--disp); text-transform:uppercase; letter-spacing:.03em; color:#fff; }

.hero__rail{
  position:absolute; z-index:3; left:0; right:0; bottom:0;
  display:flex; flex-wrap:wrap; align-items:center;
  padding:22px var(--gut); border-top:1px solid rgba(255,255,255,.13);
  font:600 11.5px/1.7 var(--disp); letter-spacing:.19em; text-transform:uppercase; color:rgba(255,255,255,.72);
}
.hero__rail li{ padding-right:26px; margin-right:26px; position:relative; }
.hero__rail li+li::before{
  content:''; position:absolute; left:-26px; top:2px; bottom:2px; width:1px;
  background:currentColor; opacity:.3;
}
/* Once the rail wraps, the divider on the first item of each new row is left
   hanging in space. Below the width where all five fit on one line, drop the
   dividers and lay it out as a grid instead. */
@media (max-width:1239px){
  .hero__rail{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px 26px; }
  .hero__rail li{ padding-right:0; margin-right:0; }
  .hero__rail li+li::before{ display:none; }
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.sec{ padding:var(--s7) 0; }
.sec--week{ background:var(--bone); color:var(--ink); }
.sec--dark{ background:var(--ink-2); }
.sec--grades{ background:var(--ink); }
.sec--ask{ background:var(--bone); color:var(--ink); }

.sechead{ max-width:74ch; margin-bottom:var(--s5); }
.sechead__h{ font-size:clamp(32px, 4.1vw, 56px); line-height:.98; }
.nowrap{ white-space:nowrap; }
@media (max-width:760px){ .nowrap{ white-space:normal; } }
.sechead__p{ margin-top:var(--s3); max-width:62ch; color:var(--slate-lt); font-size:17.5px; }
.sec--week .sechead__p, .sec--ask .sechead__p{ color:#4B505B; }

/* On the two light sections the brand red is the accessible one; the lighter
   text red is tuned for the dark grounds and drops to 4.0:1 on bone. */
.sec--week .eyebrow, .sec--ask .eyebrow,
.sec--week .lnk, .sec--ask .lnk{ color:var(--red); }
.sec--week .lnk:hover, .sec--ask .lnk:hover{ color:var(--ink); }

/* ---------- the week ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:var(--s4); }
.filters__sp{ flex:1 1 24px; min-width:24px; }
.chip{
  min-height:44px; padding:11px 18px; cursor:pointer;
  font:700 12.5px/1 var(--disp); letter-spacing:.14em; text-transform:uppercase;
  background:none; color:#3A3F49; border:1px solid rgba(11,11,13,.24);
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.chip:hover{ border-color:var(--ink); }
.chip.is-on{ background:var(--ink); color:#fff; border-color:var(--ink); }
.chip--who.is-on{ background:var(--red); border-color:var(--red); }

.week{ display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:rgba(11,11,13,.16); border:1px solid rgba(11,11,13,.16); }
.day{ background:var(--bone); padding:var(--s3) var(--s2) var(--s4); min-height:250px; }
.day.is-today{ background:var(--paper); box-shadow:inset 0 4px 0 var(--red); }
.day__n{
  font:700 13px/1 var(--disp); letter-spacing:.2em; text-transform:uppercase;
  padding-bottom:14px; margin-bottom:var(--s2); border-bottom:1px solid rgba(11,11,13,.18);
  display:flex; justify-content:space-between; align-items:baseline; gap:8px;
}
.day.is-today .day__n{ color:var(--red); }
.day__today{ font:700 10px/1 var(--disp); letter-spacing:.16em; color:var(--red); }
.slot{ padding:14px 0; border-bottom:1px dotted rgba(11,11,13,.22); }
.slot:last-child{ border-bottom:0; }
.slot__t{ font:500 14px/1.2 var(--mono); font-variant-numeric:tabular-nums; color:var(--ink); }
.slot__c{ font:700 16.5px/1.2 var(--disp); text-transform:uppercase; letter-spacing:.02em; margin-top:7px; }
.slot__b{ font:500 11.5px/1 var(--disp); letter-spacing:.14em; text-transform:uppercase; color:#5B616D; margin-top:6px; }
.slot__b i{ font-style:normal; display:inline-block; width:7px; height:7px; margin-right:7px; vertical-align:1px; }
.slot--bik i{ background:var(--red); }
.slot--jde i{ background:var(--ink); }
.day.is-empty{ opacity:.4; }
.week__note{ margin-top:var(--s3); font-size:14.5px; color:#5B616D; }

.week__extra{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); margin-top:var(--s4); }
.xcard{ background:var(--paper); padding:var(--s4); border-left:3px solid var(--red); }
.xcard h3{ font-size:23px; }
.xcard p{ margin-top:12px; color:#4B505B; font-size:16px; }

/* ---------- programs ---------- */
.progs{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.11); }
.prog{ background:var(--ink-2); padding:var(--s4); }
.prog--wide{ grid-column:1 / -1; display:grid; grid-template-columns:1.15fr .85fr; gap:var(--s4); align-items:center; background:var(--ink-3); }
.prog__n{ font:700 11px/1 var(--disp); letter-spacing:.26em; text-transform:uppercase; color:var(--red-txt); margin-bottom:var(--s2); }
.prog h3{ font-size:26px; }
.prog--wide h3{ font-size:clamp(28px,2.8vw,40px); }
.prog__p{ margin-top:var(--s2); color:var(--slate-lt); font-size:16.5px; }

/* ---------- plates ---------- */
.plate{ margin:0; position:relative; background:var(--ink-3); }
.plate img{ width:100%; height:100%; object-fit:cover; }
.plate figcaption{
  margin-top:10px; font:600 11px/1.5 var(--disp); letter-spacing:.2em;
  text-transform:uppercase; color:var(--slate);
}
.plate--todo{
  aspect-ratio:var(--ar,4/3);
  border:2px dashed rgba(232,16,42,.55); background:rgba(232,16,42,.05);
  display:flex; align-items:center; justify-content:center; padding:var(--s3);
}
.plate--todo figcaption{
  margin:0; text-transform:none; letter-spacing:0; text-align:center;
  font:400 14.5px/1.55 var(--body); color:#C2C6CE; max-width:44ch;
}
.plate--todo b{
  display:block; margin-bottom:10px;
  font:700 11.5px/1 var(--disp); letter-spacing:.22em; text-transform:uppercase; color:var(--red-txt);
}

/* ---------- grades ---------- */
.grades{ display:grid; grid-template-columns:1.05fr .95fr; gap:var(--s6); align-items:center; }
.belts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--s4); }
.belts li{
  background:var(--b); color:var(--t); padding:10px 15px;
  font:700 12px/1 var(--disp); letter-spacing:.14em; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.16);
}
.belts__note{ margin-top:var(--s2); font-size:14px; color:var(--slate); }
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3); margin-top:var(--s6); }
.gallery .plate img{ aspect-ratio:1; }

/* ---------- where ---------- */
.places{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); }
.place{ background:var(--ink-3); padding:var(--s4); }
.place h3{ font-size:clamp(26px,2.6vw,36px); }
.place__addr{ margin-top:10px; font:500 12.5px/1.5 var(--disp); letter-spacing:.16em; text-transform:uppercase; color:var(--red-txt); }
.place__list{ margin:var(--s3) 0 var(--s3); border-top:1px solid rgba(255,255,255,.13); }
.place__list li{
  display:flex; gap:var(--s2); padding:11px 0; border-bottom:1px solid rgba(255,255,255,.09);
  font-size:15.5px; color:#C7CAD2;
}
.place__list span{
  flex:0 0 104px; font:700 11.5px/1.5 var(--disp); letter-spacing:.16em;
  text-transform:uppercase; color:var(--slate);
}
.place__todo{
  margin:var(--s2) 0 var(--s3); padding:12px 14px; font-size:14.5px; color:#C2C6CE;
  border-left:2px solid var(--red-hot); background:rgba(232,16,42,.07);
}
.place__shot{ grid-column:auto; }
.place__shot img{ aspect-ratio:3/2; }

/* ---------- ask / router ---------- */
.router{ display:grid; grid-template-columns:.9fr 1.1fr; gap:var(--s5); align-items:start; }
.router__reasons{ border:0; margin:0; padding:0; }
.router__lg{ padding:0; font:700 12px/1 var(--disp); letter-spacing:.24em; text-transform:uppercase; color:#5B616D; margin-bottom:var(--s3); }
.reason{ display:block; margin-bottom:12px; cursor:pointer; }
.reason input{ position:absolute; opacity:0; width:0; height:0; }
.reason__box{
  display:block; padding:20px 22px; background:var(--paper);
  border:1px solid rgba(11,11,13,.16); border-left:3px solid rgba(11,11,13,.16);
  transition:border-color .16s ease, box-shadow .16s ease;
}
.reason:hover .reason__box{ border-color:rgba(11,11,13,.4); }
.reason input:checked + .reason__box{ border-left-color:var(--red); border-color:rgba(11,11,13,.3); box-shadow:0 2px 0 rgba(11,11,13,.1); }
.reason input:focus-visible + .reason__box{ outline:3px solid var(--red-hot); outline-offset:3px; }
.reason__t{ display:block; font:800 20px/1.1 var(--disp); text-transform:uppercase; }
.reason__d{ display:block; margin-top:8px; font-size:15px; color:#5B616D; }
.reason__n{ display:block; margin-top:12px; font:500 14px/1 var(--mono); color:var(--red); }

.router__form{ background:var(--paper); padding:var(--s4); border:1px solid rgba(11,11,13,.14); }
.field{ margin-bottom:var(--s3); }
.field label{ display:block; margin-bottom:8px; font:700 12px/1 var(--disp); letter-spacing:.18em; text-transform:uppercase; color:#3A3F49; }
.field .opt{ font-weight:500; color:#8A909B; letter-spacing:.1em; }
.field input, .field select, .field textarea{
  width:100%; min-height:52px; padding:14px 15px;
  font:400 16px/1.5 var(--body); color:var(--ink);
  background:var(--bone); border:1px solid rgba(11,11,13,.18); border-radius:0;
}
.field textarea{ resize:vertical; }
.field input::placeholder, .field textarea::placeholder{ color:#8A909B; }

.preview{ margin:var(--s3) 0; padding:18px 20px; background:var(--bone); border-left:3px solid var(--red); }
.preview__lab{ font:700 11px/1 var(--disp); letter-spacing:.22em; text-transform:uppercase; color:#5B616D; margin-bottom:10px; }
.preview__msg{ font-size:15.5px; line-height:1.6; color:#2B3039; white-space:pre-wrap; }
.router__foot{ margin-top:14px; font-size:14px; color:#6E7480; }

/* ---------- footer ---------- */
.foot{ background:var(--ink); padding:var(--s6) 0 var(--s4); border-top:1px solid rgba(255,255,255,.11); }
.foot__grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr .7fr; gap:var(--s4); }
.foot__brand img{ width:72px; height:72px; }
.foot__name{ margin-top:var(--s2); font:800 22px/1 var(--disp); text-transform:uppercase; }
.foot__tag{ margin-top:10px; font-size:15px; color:var(--slate); max-width:26ch; }
.foot__col h3{ font-size:15px; letter-spacing:.18em; color:var(--slate); margin-bottom:var(--s3); }
.foot__nums li{ margin-bottom:14px; }
.foot__nums a{ text-decoration:none; display:block; min-height:44px; }
.foot__nums b{ display:block; font:500 17px/1.2 var(--mono); color:#fff; }
.foot__nums span{ display:block; margin-top:3px; font:600 11px/1.4 var(--disp); letter-spacing:.16em; text-transform:uppercase; color:var(--slate); }
.foot__nums a:hover b{ color:var(--red-txt); }
.foot__mail{ margin-top:2px; }
.foot__mail a{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:15px; color:var(--red-txt);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px;
}
.foot__mail a:hover{ color:#fff; }
.foot__hours{ font-size:16px; color:#C7CAD2; }
.foot__small{ margin-top:12px; font-size:14px; color:var(--slate); }
.foot__small a, .foot__mail a{ color:var(--red-txt); }
.foot__links li{ margin-bottom:12px; }
.foot__links a{ font:600 12.5px/1 var(--disp); letter-spacing:.16em; text-transform:uppercase; text-decoration:none; color:#C7CAD2; min-height:44px; display:inline-flex; align-items:center; }
.foot__links a:hover{ color:var(--red-txt); }
.foot__rule{
  margin-top:var(--s5); padding-top:var(--s3); border-top:1px solid rgba(255,255,255,.11);
  font:600 11px/1 var(--disp); letter-spacing:.24em; text-transform:uppercase; color:var(--slate);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1100px){
  .week{ grid-template-columns:repeat(3,1fr); }
  .progs{ grid-template-columns:repeat(2,1fr); }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .foot__grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:980px){
  :root{ --s7:88px; --s6:64px; }
  .nav__toggle{ display:inline-flex; }
  body.nav-open{ overflow:hidden; }
  /* The panel wipes down from under the header rule, then the rows arrive from
     the left. The base rule carries the closing timings and .is-open carries the
     opening ones, so the two directions get different curves with no JS.

     clip-path rather than scaleY or a height transition: tools/test.js measures
     tap targets with the menu closed, and these links are still laid out then.
     Scaling the panel would shrink every child box under 44px and fail that
     check; a clip leaves layout boxes alone. Same reason the rows translate
     rather than scale.

     opacity is only insurance for a browser without clip-path, so it must never
     fade mid-wipe: instant on open, held back until the wipe ends on close. */
  .nav__menu{
    position:fixed; inset:76px 0 0 0; overflow-y:auto; flex-direction:column; align-items:stretch;
    gap:0; background:rgba(11,11,13,.985); padding:var(--s2) var(--gut) var(--s4);
    border-top:1px solid rgba(255,255,255,.13);
    clip-path:inset(0 0 100% 0); opacity:0; pointer-events:none;
    transition:clip-path .18s cubic-bezier(.4,0,1,1), opacity 0s linear .18s;
  }
  .nav__menu.is-open{
    clip-path:inset(0 0 0 0); opacity:1; pointer-events:auto;
    transition:clip-path .28s cubic-bezier(.45,.25,.2,1), opacity 0s;
  }
  .nav__menu a{ min-height:56px; font-size:16px; border-bottom:1px solid rgba(255,255,255,.09); }
  .nav__menu a,
  .nav__menu a.nav__cta{
    opacity:0; transform:translateX(-16px);
    transition:opacity .12s ease, transform .12s ease;
  }
  .nav__menu.is-open a,
  .nav__menu.is-open a.nav__cta{
    opacity:1; transform:none;
    transition:opacity .22s ease, transform .22s cubic-bezier(.3,.7,.25,1);
  }
  /* The stagger sits on .is-open only, so dropping the class drops the delays and
     every row leaves together. A staggered exit makes a menu feel slow to dismiss.
     These must stay after the rule above: a transition shorthand resets the delay. */
  .nav__menu.is-open a:nth-child(1){ transition-delay:.05s; }
  .nav__menu.is-open a:nth-child(2){ transition-delay:.08s; }
  .nav__menu.is-open a:nth-child(3){ transition-delay:.11s; }
  .nav__menu.is-open a:nth-child(4){ transition-delay:.14s; }
  .nav__menu.is-open a:nth-child(5){ transition-delay:.18s; }
  .nav__cta{ margin-top:var(--s3); justify-content:center; border-bottom:0 !important; }
  .nav.is-stuck{ background:rgba(11,11,13,.94); }

  /* the hero is a flex row on desktop only. Once the readout and the rail come
     back into flow they must stack, not become columns beside the headline. */
  .hero{ display:block; min-height:0; padding:120px 0 0; }
  .hero__photo{ background-position:center 20%; }
  .hero__body{ padding-top:var(--s4); padding-bottom:var(--s5); }

  .hero__now{
    position:relative; transform:none; top:auto; right:auto;
    width:100%; max-width:var(--wrap); margin:0 auto;
    text-align:left; border-right:0; border-left:3px solid var(--red);
    padding:var(--s3) var(--gut);
    background:rgba(5,5,7,.72);
  }
  .hero__now{ margin-left:var(--gut); margin-right:var(--gut); width:auto; padding-left:var(--s3); }
  .hero__rail{ position:relative; margin-top:var(--s5); }
  .grades{ grid-template-columns:1fr; gap:var(--s4); }
  .places{ grid-template-columns:1fr; }
  .router{ grid-template-columns:1fr; gap:var(--s4); }
  .prog--wide{ grid-template-columns:1fr; }
}

@media (max-width:720px){
  :root{ --s7:72px; --s6:56px; --s5:44px; }
  body{ font-size:16px; }
  .week{ grid-template-columns:1fr; }
  .day{ min-height:0; }
  .day:not(.is-today){ background:var(--bone); }
  .week__extra{ grid-template-columns:1fr; }
  .progs{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:1fr 1fr; gap:12px; }
  .foot__grid{ grid-template-columns:1fr; gap:var(--s4); }
  .hero__rail{ font-size:10.5px; letter-spacing:.16em; }
  .hero__rail li{ padding-right:16px; margin-right:16px; }
  .hero__rail li+li::before{ left:-16px; }
  .hero__acts .btn{ flex:1 1 100%; }
  .place__list span{ flex-basis:88px; }
  .filters__sp{ flex-basis:100%; min-width:0; height:0; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; transition-duration:.01ms !important;
    animation-delay:0s !important; transition-delay:0s !important;
  }
}