/*
  Yes & Ja: the page's own CSS, on top of the kit's system (assets/system.css, motion.css, layout.css).
  It holds only what the kit lacks: the school's type and colours, the word board, the level path,
  the timetable boards, the sample tag, the map and the three-part phone bar.
  Every motion below moves transform and opacity only, and rests under prefers-reduced-motion.
*/

/* ---------------------------------------------------------------- tokens */
:root {
  --yellow: #ffd23f;
  --red: #d0351d;
  --blue: #0a4fd6;
  --navy: #0e1b3f;
  --cream: #fff8ea;
  --e-out: cubic-bezier(.22, 1, .36, 1);      /* an entrance settling: the kit's --m-ease-enter */
  --e-ui: cubic-bezier(.2, .8, .2, 1);        /* every UI step: the kit's --ease */
  --d-ui: 180ms;
  --d-step: 320ms;
  --strip: 92px;                              /* the route strip on a phone */
}
html {
  font-synthesis: none; color-scheme: light;
  -webkit-tap-highlight-color: color-mix(in oklab, var(--p-action) 16%, transparent);
  scrollbar-color: color-mix(in oklab, var(--p-ink) 55%, var(--p-bg)) var(--p-bg);
}
/* the parts the browser draws: caret, form marks and selection in the page's colours */
:root { caret-color: var(--p-action); accent-color: var(--p-action); }
::selection { background: var(--yellow); color: var(--navy); }
.ground-surface ::selection, .booking__panel ::selection, .boards__note ::selection { background: var(--navy); color: var(--cream); }
a, button, summary, select, input, textarea, label { touch-action: manipulation; }
a[href^="tel:"], .nb { white-space: nowrap; }
::placeholder { color: var(--p-muted); opacity: 1; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------------- type: Syne + Manrope
   Syne's 800 is far wider than its 700 (Γερμανικά: 8.35em against 5.78em), so 800 is kept for the
   hero on a wide screen and for short poster words (the level codes, the figure, the name);
   every other headline is 700. Its figures are old-style by default: lining ones everywhere. */
h1, h2, h3, h4 { hyphens: manual; -webkit-hyphens: manual; font-variant-numeric: lining-nums; }
h2 { letter-spacing: -0.02em; }
/* one size for every h3 (a tile's title, a name, a stop, a question): the card size, in the display face */
h3, .faq .faq__item > h3 { font: 700 var(--t-card)/1.25 var(--font-display); letter-spacing: -0.01em; }
.t-stat { font-variant-numeric: lining-nums; }
.amp { color: var(--red); }

/* the hero's h1 is sized from its own column, so its longest line ("στον Πειραιά") always fits */
.hero--split .hero__text { container-type: inline-size; }
@media (max-width: 1023px) { .hero--split .hero__text { align-self: stretch; width: 100%; } }
.hero--split h1 { font-weight: 700; font-size: min(var(--ly-h1), 100cqw / 7.3); }
@media (min-width: 1280px) {
  .hero--split h1 { font-weight: 800; font-size: min(var(--ly-h1), 100cqw / 10.45); }
}
.hero .hero__lead { max-width: 46ch; }
/* a phone: the photograph gives way first, so a longer headline still ends on the first screen */
@media (max-width: 639px) { .hero--split .hero__media { min-height: 200px; } }
/* three facts at the foot of the words' column, on the photograph's bottom line (from 1024px);
   below that the secretary's hours stand as one line beside the call button */
.hero__hours { display: none; }
@media (min-width: 1024px) {
  .hero--split .hero__text { align-self: stretch; display: flex; flex-direction: column; }
  .hero--split .hero__text > .hero-facts { margin-top: auto; padding-top: var(--s-5); border-top: 1px solid var(--line); }
}
@media (max-width: 1023px) {
  .hero--split .hero__text > .hero__hours { display: block; margin-top: var(--s-3); font-size: var(--t-small); line-height: 1.45; }
}

/* ---------------------------------------------------------------- the name and its two flags */
.nav__logo { gap: 10px; }
.nav__logo .flags { height: 22px; width: auto; overflow: visible; }
.logo__word { font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; }
.flags__y, .flags__j { transform-box: fill-box; transform-origin: 0 50%; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .nav__logo:hover .flags__y { animation: flag-wave 620ms var(--e-ui) 1; }
  .nav__logo:hover .flags__j { animation: flag-wave 620ms var(--e-ui) 90ms 1; }
}
@keyframes flag-wave {
  30% { transform: skewY(-9deg) scaleX(.94); }
  62% { transform: skewY(5deg) scaleX(1.02); }
}
@media (max-width: 1279px) { .nav__tel { display: none; } }
@media (min-width: 1024px) {
  .nav__item--more { display: none; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .nav--split .nav__logo { font-size: 22px; }
  .nav--split .nav__logo .flags { height: 18px; }
  .nav__actions .btn { padding-inline: var(--s-4); }
}
@media (max-width: 639px) { .nav__logo .flags { height: 18px; } }

/* ---------------------------------------------------------------- shared small parts */
/* the kit's link arrow is the character U+2192, which neither Syne nor Manrope carries: drawn instead */
.link::after {
  content: ""; flex: none; width: 12px; height: 12px; background: currentColor;
  -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat;
}
:root { --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6h8.5M6.5 2.5 10 6l-3.5 3.5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.credits > summary::after { content: "Λεπτομέρειες"; }
.credits[open] > summary::after { content: "Κλείσιμο"; }

/* an icon beside a button's word (call, Viber) */
.ico { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* call and Viber as a pair of buttons */
.reach { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: var(--s-3); }
.reach .btn { padding-inline: var(--s-4); }
.reach--hero { display: none; }
@media (max-width: 639px) {
  .reach { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reach .btn { height: 48px; }
  .hero__text > .reach--hero { display: grid; margin-top: var(--s-3); }
  .hero__call { display: none; }
}

/* the sample tag: every invented figure, review and person carries one */
.sample {
  display: inline-block; flex: none; vertical-align: 0.12em; margin-left: 0.2em;
  padding: 3px 7px 2px; border: 1.5px dashed var(--red); border-radius: 6px; background: var(--bg); color: var(--ink);
  font: 700 13px/1.2 var(--font-text); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}

/* ---------------------------------------------------------------- hero: the word board
   A float card on the photograph: one word in two languages on flap tiles. site.js builds the tiles,
   turns three words on load and then one on every tap of the button. Without script it reads as two
   plain lines. On a phone it is a slim strip across the photograph's foot. */
.flap { width: min(316px, calc(100% - 2 * var(--s-5))); gap: var(--s-2); padding: var(--s-4) var(--s-4) var(--s-3); }
.flap__row { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; gap: var(--s-3); margin: 0; }
.flap__lang { font-size: var(--t-label); font-weight: 600; color: var(--muted); }
.flap__word { display: flex; gap: 3px; font: 800 20px/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; perspective: 300px; }
.flap__t {
  display: inline-grid; place-items: center; flex: none; width: 27px; height: 34px; border-radius: 5px;
  background: var(--ink); color: var(--bg); font-size: 17px; letter-spacing: 0; backface-visibility: hidden;
}
.flap__t.is-blank { opacity: .14; }
.flap__next {
  justify-self: start; display: inline-flex; align-items: center; gap: var(--s-2); min-height: 32px; margin-top: 2px; padding: 0;
  border: 0; background: none; cursor: pointer; font: 600 var(--t-small)/1 var(--font-text); color: var(--action);
}
.flap__next-t { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: color-mix(in oklab, var(--action) 35%, transparent); }
.flap__next::after {
  content: ""; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: var(--turn) center / contain no-repeat; mask: var(--turn) center / contain no-repeat;
  transition: transform var(--d-step) var(--e-out);
}
:root { --turn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.5 8a5.5 5.5 0 1 1-1.7-4M13.5 2v3h-3' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.flap__next:active::after { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .flap__next:hover .flap__next-t { text-decoration-color: currentColor; } }
@media (max-width: 639px) {
  .flap {
    left: 10px; right: 10px; bottom: 10px; width: auto; padding: 10px 6px 10px 12px;
    grid-template-columns: minmax(0, 1fr) 44px; column-gap: 6px; row-gap: 6px; align-items: center;
  }
  .flap__row { grid-column: 1; grid-template-columns: 70px minmax(0, 1fr); gap: var(--s-2); }
  .flap__word { font-size: 16px; }
  .flap__t { width: 23px; height: 28px; font-size: 14px; border-radius: 4px; }
  /* the button keeps its words for a screen reader and shows its turning arrow alone, on a 44px target */
  .flap__next { grid-column: 2; grid-row: 1 / span 2; justify-self: center; justify-content: center; width: 44px; height: 44px; margin: 0; }
  .flap__next-t { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .flap__next::after { width: 20px; height: 20px; }
}
@media (max-width: 359px) { .flap__lang { display: none; } .flap__row { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- ages: three tiles that open the timetable */
.ages .section-head { max-width: none; }
.ages .section-head p { max-width: 90ch; }
.age { align-content: start; }
.age .tile__media { aspect-ratio: 7 / 4; }
.age__go { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 600; color: var(--action); }
.age__go::after {
  content: ""; width: 12px; height: 12px; background: currentColor;
  -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat;
  transition: transform var(--d-ui) var(--e-ui);
}
@media (hover: hover) and (pointer: fine) { a.age:hover .age__go::after { transform: translateX(3px); } }
/* the scene: as the section comes up the tiles rise into place and their photographs settle from a
   slight zoom, scrubbed to the scroll (site.js writes both transforms); at rest neither is set */
.age.is-rising { will-change: transform; }
.age.is-rising .tile__media > img { transition: none; will-change: transform; }
@media (max-width: 639px) {
  .ages .grid > .tile.age { grid-column: 1 / -1; }
  .age .tile__media { aspect-ratio: 1.57; }
}

/* ---------------------------------------------------------------- the level path
   At rest (no script, reduced motion, 640 to 1023px): six cards. From 1024px site.js adds .is-live:
   the stage is held on screen (position: sticky inside a three-screen section) while the ferry sails
   the route and one stop at a time stands large. On a phone the route is a strip that stays under the
   header while the stops scroll beneath it. */
.path { --stop-bg: var(--cream); }
/* the head on one line each (from 1280px), so the six cards at rest fit the one screen */
.path .section-head { max-width: none; }
.path .section-head p { max-width: 104ch; }
.path__stops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--card-gap); margin: 0; }
.stop { scroll-margin-top: calc(var(--nav) + var(--s-4)); display: grid; align-content: start; gap: var(--s-3); padding: var(--s-5); border-radius: var(--r-lg); background: var(--stop-bg); }
.stop__id { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-1) var(--s-3); }
.stop__code { font: 800 40px/1 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: lining-nums; color: var(--blue); }
.stop__name { font: 700 var(--t-card)/1.2 var(--font-display); letter-spacing: -0.01em; }
.stop__facts { display: grid; gap: 6px; margin: 0; }
.stop__facts > div { display: grid; grid-template-columns: 10.5em minmax(0, 1fr); column-gap: var(--s-3); }
.stop__facts dt { font-size: var(--t-small); line-height: 24px; color: var(--muted); }
.stop__facts dd { margin: 0; font-weight: 500; line-height: 24px; text-wrap: balance; }
.route { display: none; }

@media (min-width: 640px) and (max-width: 1023px) { .path__stops { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the route's parts (shown on a phone and in the live scene) */
.route__line { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; fill: none; }
.route__line path { fill: none; stroke-linecap: round; }
.route__line--todo path { stroke: var(--ink); stroke-width: 3; stroke-dasharray: 2 10; opacity: .55; }
.route__line--done path { stroke: var(--ink); stroke-width: 5; }
/* the sailed part of the route: a wipe by two transforms (the window moves left, its picture moves right) */
.route__done, .route__done-in { position: absolute; inset: 0; }
.route__done { overflow: hidden; }
.path:is(.is-live, .is-strip) :is(.route__done, .route__done-in) { will-change: transform; }
/* a port: a marker (decoration) and, over it, a plain link with the level's name */
.pdot, .port { position: absolute; left: var(--px); top: var(--py); width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; }
.pdot { background: var(--cream); border: 2px solid var(--ink); overflow: hidden; }
.pdot::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; background: var(--ink); opacity: 0; transform: scale(.4); transition: opacity 140ms linear, transform var(--d-step) var(--e-out); }
.pdot.is-done::after { opacity: 1; transform: scale(1); }
.pdot.is-on { border-color: var(--blue); }
.pdot.is-on::after { background: var(--blue); }
.port { z-index: 1; display: grid; place-items: center; font: 800 14px/1 var(--font-display); font-variant-numeric: lining-nums; color: var(--ink); transition: transform 120ms var(--e-ui); }
.port:active { transform: scale(.94); }
.port.is-done { color: var(--cream); }
.ferry { position: absolute; left: 0; top: 0; z-index: 2; width: 64px; height: 40px; margin: -66px 0 0 -32px; pointer-events: none; }
.path:is(.is-live, .is-strip) .ferry { will-change: transform; }
.ferry svg { width: 100%; height: 100%; overflow: visible; }
.ferry__hull { fill: var(--blue); }
.ferry__deck { fill: var(--cream); stroke: var(--ink); stroke-width: 1.5; }
.ferry__win { fill: var(--ink); }
.ferry__funnel { fill: var(--red); }
.ferry__flag { fill: var(--red); stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }

/* a phone: the route is a strip under the header for the length of the list; its ports jump to the stops */
@media (max-width: 639px) {
  .path .route {
    display: block; position: sticky; top: var(--nav); z-index: 4; height: var(--strip);
    margin: 0 calc(-1 * var(--gut)) var(--s-5); background: var(--bg);
    border-bottom: 1px solid color-mix(in oklab, var(--ink) 18%, transparent);
    overflow-x: clip;   /* the last port's 44px target would reach past the screen's edge */
  }
  .pdot, .port { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
  .port { font-size: 12px; }
  .port::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; }   /* a 44px target */
  .ferry { width: 40px; height: 25px; margin: -42px 0 0 -20px; }
  .path__stops { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .stop {
    scroll-margin-top: calc(var(--nav) + var(--strip) + var(--s-4)); padding: var(--s-4) 0; background: none; border-radius: 0; gap: var(--s-2);
    border-top: 1px solid color-mix(in oklab, var(--ink) 18%, transparent);
  }
  .stop:first-child { padding-top: 0; border-top: 0; }
  .stop:last-child { padding-bottom: 0; }
  .stop__code { font-size: 30px; }
  .stop__facts { gap: 2px; }
  .stop__facts > div { display: block; }
  .stop__facts dt, .stop__facts dd { display: inline; font-size: var(--t-body); line-height: 24px; }
  .stop__facts dt::after { content: ": "; }
  /* with the strip running, the stop the ferry is at keeps the blue; the others wait in the ink */
  .path.is-strip .stop__code { color: var(--ink); }
  .path.is-strip .stop.is-on .stop__code { color: var(--blue); }
}

/* live, from 1024px */
.path.is-live { --h: 3; }
.path.is-live .path__stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; margin-top: calc(-1 * var(--padt)); padding: var(--padt) 0 var(--padb);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; row-gap: var(--s-5);
}
.path.is-live .path__head { grid-row: 1; margin-bottom: 0; }
.path.is-live .path__list { grid-row: 2; display: grid; align-items: center; min-height: 0; }
.path.is-live .path__stops { grid-template-columns: minmax(0, 1fr); gap: 0; }
.path.is-live .stop {
  grid-area: 1 / 1; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center;
  padding: 0; background: none; border-radius: 0;
  opacity: 0; transform: translate3d(0, 28px, 0); pointer-events: none;
  transition: opacity 160ms linear, transform 360ms var(--e-out);
}
.path.is-live .stop.is-past { transform: translate3d(0, -28px, 0); }
.path.is-live .stop.is-on { opacity: 1; transform: none; pointer-events: auto; transition: opacity 240ms linear 70ms, transform 480ms var(--e-out) 50ms; }
.path.is-live .stop__id { grid-column: 1 / span 5; display: grid; gap: var(--s-2); }
.path.is-live .stop__code { font-size: clamp(120px, 16.5vw, 232px); line-height: .86; letter-spacing: -0.04em; margin-left: -0.04em; }
.path.is-live .stop__name { font-size: var(--t-card); }
.path.is-live .stop__facts { grid-column: 7 / -1; gap: 0; }
.path.is-live .stop__facts > div { grid-template-columns: 13em minmax(0, 1fr); align-items: baseline; padding-block: var(--s-3); border-bottom: 1px solid color-mix(in oklab, var(--ink) 22%, transparent); }
.path.is-live .stop__facts > div:first-child { border-top: 1px solid color-mix(in oklab, var(--ink) 22%, transparent); }
.path.is-live .stop__facts dt { font-size: var(--t-body); }
.path.is-live .stop__facts dd { font-size: var(--t-lead); line-height: 1.4; }
.path.is-live .route { grid-row: 3; display: block; position: relative; height: clamp(110px, 16vh, 150px); }

/* ---------------------------------------------------------------- the timetable boards */
.tt-head { max-width: none; }
.tt-filter { display: grid; gap: var(--s-2); }
.tt-count { min-height: 21px; font-size: var(--t-small); color: var(--muted); }
@media (min-width: 1024px) {
  .tt-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--s-6); }
  .tt-head > h2 { grid-column: 1 / -1; }
  /* the chips on the right of the lead, the count under the lead on the page's left line */
  .tt-filter:not([hidden]) { display: contents; }
  .tt-head > p { grid-column: 1; grid-row: 2; }
  .tt-filter .chips { grid-column: 2; grid-row: 2; }
  .tt-count { grid-column: 1; grid-row: 3; min-height: 0; margin-top: calc(var(--s-2) - var(--s-4)); }
}
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  height: 40px; padding: 0 var(--s-4); border-radius: 999px; border: 1.5px solid var(--ink); background: none; color: var(--ink);
  font: 600 15px/1 var(--font-text); cursor: pointer; transition: transform var(--d-ui) var(--e-ui);
}
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
@media (hover: hover) and (pointer: fine) { .chip:not([aria-pressed="true"]):hover { background: color-mix(in oklab, var(--ink) 9%, transparent); } }
.chip:active { transform: scale(.97); }
@media (max-width: 639px) {
  .chips { display: grid; grid-template-columns: repeat(4, minmax(0, auto)); justify-content: space-between; width: 100%; gap: 6px; }
  .chip { height: 44px; padding: 0 var(--s-3); font-size: var(--t-small); }
  /* the pressed chip shows the filter; the count stays for a screen reader */
  .tt-count { position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.boards { row-gap: var(--s-5); }
.boards__side { display: grid; gap: var(--s-5); align-content: start; }
.board {
  --row: 38px; display: grid; align-content: start; padding: var(--s-4) 0 var(--s-2); border-radius: var(--r-lg);
  background: var(--navy); color: var(--cream); font-variant-numeric: tabular-nums lining-nums; perspective: 900px;
}
.board__cap { padding: 0 var(--s-5) var(--s-3); font: 800 22px/1 var(--font-display); letter-spacing: -0.01em; color: var(--yellow); }
.board__row {
  display: grid; grid-template-columns: minmax(0, 1.25fr) 56px minmax(0, 1.9fr) 104px; align-items: center; column-gap: var(--s-3);
  min-height: var(--row); padding: 0 var(--s-5); border-top: 1px solid color-mix(in oklab, var(--cream) 16%, transparent);
  transform-origin: 50% 0;
}
.board__row--head { min-height: 32px; border-top: 0; font-size: var(--t-label); font-weight: 500; color: color-mix(in oklab, var(--cream) 74%, var(--navy)); }
.board__name { font-weight: 600; }
.board__time { text-align: right; white-space: nowrap; }
.board__row--head > :last-child { text-align: right; }
.lvl {
  display: inline-grid; place-items: center; min-width: 36px; height: 24px; padding: 0 6px; border-radius: 5px;
  background: var(--yellow); color: var(--navy); font: 800 13px/1 var(--font-display); font-variant-numeric: lining-nums;
}
.boards__note { display: grid; gap: var(--s-3); justify-items: start; padding: var(--s-5); border-radius: var(--r-lg); background: var(--yellow); }
.boards__note p { max-width: 44ch; font-weight: 500; }
@media (max-width: 639px) {
  .boards, .boards__side { row-gap: var(--s-4); gap: var(--s-4); }
  .board { position: relative; padding-top: var(--s-4); }
  .board__cap { padding: 0 var(--s-4) var(--s-2); }
  .board__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name lvl" "days time"; row-gap: 0; padding: 5px var(--s-4); line-height: 1.3; }
  .board__row--head { position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
  .board__name { grid-area: name; } .board__lvl { grid-area: lvl; justify-self: end; }
  .board__days { grid-area: days; font-size: var(--t-small); color: color-mix(in oklab, var(--cream) 80%, var(--navy)); }
  .board__time { grid-area: time; font-size: var(--t-small); }
  .boards__note { padding: var(--s-4); }
}
@media (min-width: 640px) and (max-width: 1023px) { .boards > * { grid-column: 1 / -1; } }
/* a board's rows turn up once as it comes on screen (site.js adds .will-in before, .is-in then) */
.board.will-in .board__row:not(.board__row--head) { opacity: 0; transform: rotateX(-82deg); }
.board.is-in .board__row:not(.board__row--head) {
  opacity: 1; transform: none;
  transition: opacity 220ms linear calc(var(--i, 0) * 42ms), transform 520ms var(--e-out) calc(var(--i, 0) * 42ms);
}
.board.is-in.is-done .board__row { transition: none; }

/* ---------------------------------------------------------------- teachers */
.teachers .section-head { max-width: none; }
.teachers .section-head p { max-width: 90ch; }
.teacher.tile--portrait { --tile-ratio: 1 / 1; }
.teacher .tile__media > img { object-position: 50% 22%; }
.teacher .tile__head { align-items: center; justify-content: flex-start; gap: var(--s-2); }
.teacher .tile__facts { margin-top: calc(-1 * var(--s-3)); font-weight: 600; color: var(--ink); font-size: var(--t-small); }
/* a phone: each teacher is a row, the portrait beside the name, the subject and the two lines */
@media (max-width: 639px) {
  .teachers .grid { row-gap: var(--s-5); }
  .teachers .grid > .tile.teacher { grid-column: 1 / -1; grid-template-columns: 120px minmax(0, 1fr); column-gap: var(--s-4); row-gap: var(--s-1); align-items: start; }
  .teacher .tile__media { grid-column: 1; grid-row: 1 / span 3; aspect-ratio: 4 / 5; border-radius: var(--r-md); }
  .teacher .tile__head, .teacher .tile__facts, .teacher > p { grid-column: 2; }
  .teacher .tile__facts { margin-top: 0; }
  .teacher > p:not(.tile__facts) { font-size: 15px; line-height: 1.45; }
}

/* ---------------------------------------------------------------- proof */
.proof__text { display: grid; gap: var(--s-4); align-content: start; }
.ratio { display: grid; gap: var(--s-4); }
.ratio__dots { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.ratio__dots i { width: 28px; height: 28px; border-radius: 50%; background: var(--blue); }
.ratio__dots i.off { background: none; border: 2px solid color-mix(in oklab, var(--ink) 40%, transparent); }
.ratio__line { max-width: 44ch; font-size: var(--t-lead); line-height: 1.5; }
.ratio__line .t-stat { display: block; margin-bottom: var(--s-2); font-weight: 800; color: var(--blue); }
.review { display: grid; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.review blockquote { max-width: 48ch; font-size: var(--t-lead); line-height: 1.5; font-weight: 500; }
.review figcaption { font-size: var(--t-small); color: var(--muted); }
.proof__photo { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--r-lg); background: var(--yellow); }
@media (min-width: 1024px) { .proof__photo { align-self: stretch; aspect-ratio: auto; min-height: 420px; } }
.proof__photo > img { width: 100%; height: 100%; object-fit: cover; }
/* the photograph is uncovered from its foot by a yellow sheet while it settles from a slight zoom; the dots fill */
.proof__photo::after { content: ""; position: absolute; inset: -1px; background: var(--yellow); transform: translate3d(0, -102%, 0); }
.proof__photo.will-in::after { transform: none; }
.proof__photo.will-in > img { transform: scale(1.14); }
.proof__photo.is-in::after { transform: translate3d(0, -102%, 0); transition: transform 900ms var(--e-out); }
.proof__photo.is-in > img { transform: none; transition: transform 1400ms var(--e-out); }
.ratio.will-in .ratio__dots i { opacity: 0; transform: scale(.5); }
.ratio.is-in .ratio__dots i { opacity: 1; transform: none; transition: opacity 160ms linear calc(var(--i, 0) * 55ms), transform 420ms var(--e-out) calc(var(--i, 0) * 55ms); }
@media (max-width: 639px) {
  .ratio__dots { gap: 6px; }
  .ratio__dots i { width: 24px; height: 24px; }
  .proof__text > .review:nth-of-type(n + 3) { display: none; }
}

/* ---------------------------------------------------------------- booking */
.booking__text { display: grid; gap: var(--s-5); align-content: start; }
.booking__text > .t-lead { max-width: 50ch; }
.steps { display: grid; gap: var(--s-3); max-width: 50ch; counter-reset: step; }
.steps > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--s-3); align-items: start; counter-increment: step; }
.steps > li::before {
  content: counter(step); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--ink); color: var(--bg); font: 800 13px/1 var(--font-display); font-variant-numeric: lining-nums;
}
.booking__photo { order: 1; overflow: hidden; width: 100%; aspect-ratio: 3 / 1; border-radius: var(--r-lg); background: var(--surface); }
.booking__photo > img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.booking__panel { padding: clamp(var(--s-5), 3vw, var(--s-7)); border-radius: var(--r-lg); background: var(--yellow); }
.booking__panel .form { row-gap: var(--s-5); }
.booking__panel .field { align-content: start; font-weight: 600; }
.booking__panel .field :is(input, select, textarea) { border-color: color-mix(in oklab, var(--ink) 45%, transparent); scroll-margin-top: calc(var(--nav) + var(--s-8)); }
.booking__panel .field :is(input, select) { height: 48px; }
.booking__panel .field textarea { min-height: 104px; }
.form__note { color: var(--ink); }
.form__note .sample { margin: 0 6px 0 0; }
@media (max-width: 1023px) { .booking__panel { margin-top: var(--s-5); } }
@media (max-width: 639px) { .booking__photo { aspect-ratio: 2.7 / 1; } }

/* ---------------------------------------------------------------- questions and the visit */
@media (max-width: 1023px) {
  .faq-section > .wrap > .grid { row-gap: var(--s-7); }
  .visit-sec > .wrap > .grid { row-gap: var(--s-6); }
}
.visit-sec__text { display: grid; gap: var(--s-5); align-content: start; justify-items: start; }
/* the address in the text face: the visit footer right below sets it large in the display face */
.visit-sec__address { font: 600 var(--t-lead)/1.4 var(--font-text); font-style: normal; }
.visit-sec__text > p { font-size: var(--t-lead); max-width: 40ch; }
.visit-sec__text .hours { min-width: min(100%, 340px); font-size: var(--t-card); row-gap: var(--s-3); }
.hours dd { white-space: nowrap; }
.map { position: relative; overflow: hidden; aspect-ratio: 800 / 660; border-radius: var(--r-lg); background: var(--surface); }
@media (min-width: 1024px) {
  [data-visit] > .wrap > .grid { flex: 1 1 0; min-height: 0; height: 100%; }
  .map { align-self: stretch; aspect-ratio: auto; min-height: 480px; }
}
.map__img { width: 100%; height: 100%; object-fit: cover; }
.map__pin { position: absolute; left: 50%; top: 40.15%; width: 40px; height: 52px; margin: -52px 0 0 -20px; transform-origin: 50% 100%; }
.map__pin svg { width: 100%; height: 100%; overflow: visible; }
.map__pin path { fill: var(--red); stroke: var(--navy); stroke-width: 2; }
.map__pin circle { fill: var(--cream); stroke: var(--navy); stroke-width: 2; }
.map__link { position: absolute; left: var(--s-4); bottom: var(--s-4); min-height: 44px; padding: 0 var(--s-3); border-radius: var(--r-sm); background: var(--bg); }
.map.will-in .map__pin { opacity: 0; transform: translate3d(0, -56px, 0); }
.map.is-in .map__pin { opacity: 1; transform: none; transition: opacity 180ms linear 200ms, transform 620ms var(--e-out) 200ms; }

/* ---------------------------------------------------------------- the phone bar: call, Viber, the trial lesson */
@media (max-width: 639px) {
  .actionbar--three { grid-auto-flow: row; grid-template-columns: 84px 84px minmax(0, 1fr); gap: var(--s-2); }
  .actionbar--three .btn { padding-inline: var(--s-2); gap: 6px; font-size: var(--t-small); }
  .actionbar--three .btn--primary { white-space: normal; text-align: center; line-height: 1.15; }
}
/* a narrow phone: call and Viber keep their icons (their words stay for a screen reader), so the trial lesson has room */
@media (max-width: 379px) {
  .actionbar--three { grid-template-columns: 48px 48px minmax(0, 1fr); }
  .actionbar--three .bar__t { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------------------------------------------------------------- the close and the footer */
.closing__cta h2 { max-width: none; }
footer.closing > .wrap { grid-template-columns: minmax(0, 1fr); }
/* the visit footer holds the close, the address, the hours and the nav on one screen: the nav row sits one step closer */
.footer--visit .footer__nav { margin-top: var(--s-6); column-gap: var(--s-5); }
/* the phone number closes the nav row at its right end */
@media (min-width: 640px) { .footer--visit .footer__nav > a[href^="tel:"] { margin-left: auto; } }
.footer__tel { font-weight: 600; font-size: var(--t-lead); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-strong); }
@media (hover: hover) and (pointer: fine) { .footer__tel:hover { text-decoration-color: currentColor; } }
@media (max-width: 639px) {
  .footer__tel { display: inline-flex; align-items: center; min-height: 44px; }
  /* the hours' day column wraps before its times do */
  .hours { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-4); }
  .hours dd { text-align: right; }
}
/* the narrowest phones (320px): the long button wraps instead of pushing the page sideways */
@media (max-width: 359px) {
  .btn--xl, .hero .btn--primary { white-space: normal; height: auto; min-height: 48px; padding-block: 10px; text-align: center; line-height: 1.2; }
}

/* ---------------------------------------------------------------- reduced motion: everything rests */
@media (prefers-reduced-motion: reduce) {
  .board.will-in .board__row:not(.board__row--head), .map.will-in .map__pin { opacity: 1; transform: none; }
  .proof__photo.will-in::after { transform: translate3d(0, -102%, 0); }
  .proof__photo.will-in > img { transform: none; }
  .ratio.will-in .ratio__dots i { opacity: 1; transform: none; }
  .pdot::after, .port, .chip, .flap__next::after, .age__go::after { transition: none; }
}
@media print {
  .board.will-in .board__row, .map.will-in .map__pin, .ratio.will-in .ratio__dots i { opacity: 1 !important; transform: none !important; }
  .proof__photo::after { display: none; }
}

/* a visitor who asks for more contrast: the quiet greys go to the ink, the dashed parts go solid */
@media (prefers-contrast: more) {
  :root { --p-muted: var(--p-ink); }
  .sample { border-style: solid; }
  .route__line--todo path { opacity: 1; }
}