/* =====================================================================
   Phone layout (Bar, 2026-10-13): keep the desktop motion, but build the
   page for a thumb that scrolls. Shorter hero and sections, centred logo
   with the menu on the right, the ages
   as a stack of cards, the schedule as a swipe row, smaller moving
   testimonials and a compact footer. Desktop is untouched.
   ===================================================================== */
.days-hint { display: none; } /* phones only */
@property --fade-l { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --fade-r { syntax: '<length>'; inherits: false; initial-value: 0px; }
@media (max-width: 899px) {
  :root { --gutter: 18px; }
  .section { padding-block: 3.6rem; }
  .h2 { margin-block-end: .45em; }
  .lead { font-size: 1.08rem; }

  /* ---------- Header: menu on the right, logo in the middle, no button ---------- */
  .header-inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; }
  .site-header .menu-toggle { grid-column: 1; grid-row: 1; justify-self: start; }
  .site-header .brand { grid-column: 2; grid-row: 1; }
  .site-header .header-cta { display: none; }
  .site-header .menu-toggle { width: 48px; height: 48px; }
  .site-header .brand img { width: 48px; height: 48px; }
  /* (Bar 2026-10-18) the logo is an oval, so at 48px it looked smaller than the round menu button: drawn a little larger */
  .site-header .brand img, .is-scrolled .brand img { transform: scale(1.14); }

  /* ---------- Home hero: a shorter photo, the text right under it ---------- */
  /* photo height: --hx-h0 and the sky crop are in hero-x.css */
  .hero:not(.hero-about) .hero-row { min-height: calc(100svh - var(--hx-h)); padding-block: 1.8rem 1.4rem; gap: .9rem; }
  .hero-question { font-size: 2rem !important; }
  .hero-text { font-size: 1.08rem; margin-block-end: .6rem; }
  .hero-about { padding-block-start: 1.6rem; }
  .hero-about .hero-media { margin-block-start: 1.4rem; aspect-ratio: 4 / 3; }

  /* ---------- Intro: the circle still opens, without a full screen of red ---------- */
  .intro .intro-panel { min-height: 0; padding: 3.4rem var(--gutter); }
  .intro .intro-inner { gap: 1.2rem; }
  .intro .intro-logo img { width: 104px; }
  .intro .intro-p { font-size: 1.08rem; margin-block-end: .7em; }
  .intro .intro-big { font-size: 2.6rem; margin-block: .2em .5em; }

  /* ---------- School + Ran ---------- */
  .school { padding-block: 3.6rem; }
  .school-grid { gap: 1.8rem; }
  :root .since { font-size: 5rem; }
  .school-photo { aspect-ratio: 16 / 10; }
  .ran-photo { aspect-ratio: 1 / 1; }
  :root .ran-name { font-size: 3.6rem; }
  .ran-body { padding-block: 2rem 1.6rem; }
  .ran-grid { gap: 1.8rem; }
  .ran-bio p, .ran-method-label, .ran-method-text { font-size: 1.08rem; }
  .facts { margin-block-start: 1.4rem; padding-block-start: 1.2rem; }

  /* ---------- What's special: four compact tiles ---------- */
  .special-head { margin-block-end: 1.6rem; }
  .elements { gap: .6rem; }
  .el { padding: .9rem .6rem 1rem; }
  .el-art { width: 84px; margin-block-end: .5rem; }
  :root .elements h3 { font-size: 1.8rem; }
  .el p { font-size: .92rem; line-height: 1.35; }

  /* ---------- Ages: a stack of cards; each new one slides over the last ---------- */
  .activities-title { margin-block-end: 1.2rem; }
  .ages-list { gap: 1rem; }
  .ages-list .age {
    position: sticky; inset-block-start: calc(var(--header-h) + 10px);
    background: var(--white); border-radius: var(--radius); padding: .6rem .6rem 1.2rem;
    box-shadow: 0 -10px 30px -18px rgb(80 10 10 / .35); transform-origin: 50% 0; will-change: transform;
  }
  .age-shade { position: absolute; inset: 0; border-radius: inherit; background: rgb(20 20 20 / .18); opacity: 0; pointer-events: none; z-index: 2; }
  .ages-list .age:nth-child(2) { inset-block-start: calc(var(--header-h) + 18px); }
  .ages-list .age:nth-child(3) { inset-block-start: calc(var(--header-h) + 26px); }
  .ages-list .age:nth-child(4) { inset-block-start: calc(var(--header-h) + 34px); }
  .ages-list .age:first-child .age-media { aspect-ratio: 1 / 1; } /* the portrait clip, zoomed out */
  .ages-list .age-media { aspect-ratio: 16 / 10; margin-block-end: .9rem; border-radius: calc(var(--radius) * .7); }
  .ages-list .age-body { padding-inline: .5rem; }
  :root .age-body h3 { font-size: 2.6rem; margin-block-end: .25em; }
  .age-body p { font-size: 1.02rem; line-height: 1.55; margin-block-end: .7em; }

  /* ---------- Schedule: days in one swipe row (today first), chips in one row ---------- */
  .sched-head { margin-block-end: 1.2rem; }
  .filters {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); padding-block: 2px; margin-block-end: 1rem;
  }
  .filters::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
  /* more chips hidden on that side: they fade out at the screen edge (js/mobile.js sets the classes) */
  .filters { --fade-l: 0px; --fade-r: 0px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent); transition: --fade-l .3s var(--ease), --fade-r .3s var(--ease); }
  .filters.more-end { --fade-l: 72px; }
  .filters.more-start { --fade-r: 48px; }
  :root .days {
    display: flex; gap: .7rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    overscroll-behavior-x: contain; margin: 0 calc(-1 * var(--gutter)); padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter); row-gap: 0;
  }
  :root .days::-webkit-scrollbar { display: none; }
  :root .day { flex: 0 0 74%; scroll-snap-align: start; display: flex; margin: 0; }
  :root .day-in { display: contents; }
  :root .day.is-out { display: none; }
  .days-hint { display: flex; justify-content: center; gap: 6px; margin-block-start: .9rem; }
  .days-hint i { width: 6px; height: 6px; border-radius: 3px; background: var(--line); transition: width .3s var(--ease), background-color .3s; }
  .days-hint i.on { width: 18px; background: var(--red); }
  .sched-note { font-size: .9rem; gap: .4rem 1.2rem; }
  .schedule-strip { margin-block-start: 1.6rem; padding: 1.3rem; gap: 1rem; }
  .schedule-strip .btn { width: 100%; }

  /* ---------- More activities (Bar: already fine), a little tighter ---------- */
  .tile-body { padding: 1.2rem; }

  /* ---------- Testimonials: smaller cards that keep moving, like on desktop ---------- */
  .rail { overflow: hidden; scroll-snap-type: none; padding: 1.6rem 0 .6rem; }
  .rail-track { padding-inline-end: 0; }
  .quote-card { width: min(290px, 76vw); padding: 20px 20px 22px; gap: .6rem; }
  .quote-card:first-child { margin-inline-start: 1.2rem; }
  .quote-card[aria-hidden="true"] { display: flex; }
  .quote-card .mark { font-size: 84px; height: 30px; }
  .quote-card blockquote { font-size: 1rem; line-height: 1.55; }
  .js-motion .rail-track { animation: rail 60s linear infinite reverse; }
  .rail.rail-js { touch-action: pan-y; } /* sideways finger moves the rail, up and down still scrolls the page */
  .rail.rail-js .rail-track { animation: none !important; will-change: transform; }
  .rail-controls { display: flex; }
  .final-cta { display: none; }

  /* ---------- About page ---------- */
  .story-body p[data-read] { font-size: 1.12rem; }
  .why-grid { gap: 1.8rem; }
  .method { padding-block-start: 3.6rem; }
  .method-grid { gap: 1.6rem; }
  .method-media { width: min(100%, 230px); }
  .gallery-head { margin-block-end: 1.2rem; }
  .others-block { margin-block-start: 2.6rem; }
  .others .h3 { margin-block-end: .8rem; }
  .letter { grid-template-columns: 92px 1fr; padding: .9rem; gap: .9rem; }
  .letter-page { max-width: none; }
  .letter blockquote { font-size: 1rem; }
  /* certificates in one swipe row instead of a tall grid */
  .certs {
    display: flex; gap: .7rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
  }
  .certs::-webkit-scrollbar { display: none; }
  .certs li { flex: 0 0 44%; scroll-snap-align: start; }

  /* ---------- Footer: one short block ---------- */
  .site-footer { padding-block-start: 2.6rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.6rem 1rem; padding-block-end: 1.6rem; }
  .footer-brand { grid-column: 1 / -1; display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: 1rem; text-align: start; }
  .footer-brand img { width: 76px; margin: 0; grid-row: span 2; }
  :root .footer-motto { font-size: 1.7rem; margin: 0; }
  .footer-area { margin: 0; font-size: .95rem; }
  .footer-h { margin-block-end: .5rem; }
  .site-footer ul { gap: .3rem; }
  :root .footer-word { font-size: 23vw; margin-block-start: 0; } /* sits a little cut by the bottom edge, like on desktop (no safe-area padding: Bar 2026-10-14) */
  .footer-bottom { padding-block: .9rem .2rem; }
}

/* ---------- Phones, Bar 2026-10-13 ---------- */
@media (max-width: 899px) {
  /* galleries are swiped with a finger; no arrows on phones */
  .carousel-nav { display: none; }
  /* Method text centred under its title, also the part that opens with "read more" */
  .method-text p { text-align: center; }
}

/* iPhone Safari tints its top bar from a solid header; a see-through one left it red after the menu closed */
@media (max-width: 899px) { .site-header { background: var(--paper); } }

/* ---------- Phone menu open: the header melts into the red menu, the close button a white circle (Bar chose this, 2026-10-13) ---------- */
@media (max-width: 899px) {
  .menu-open .site-header { background: var(--red) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; transition: background-color .3s var(--ease); }
  .menu-open .menu-toggle { background: var(--white); color: var(--red); }
  /* the links start right under the header instead of the middle of the screen (Bar 2026-10-16) */
  .mobile-menu { justify-content: flex-start; gap: clamp(1.2rem, 4vh, 2rem); padding-block-start: calc(var(--header-h) + 1.4rem); }
}

/* ---------- Activities + contact pages on phones (2026-10-13) ---------- */
@media (max-width: 899px) {
  .hero-page { padding-block: 1.6rem 2.4rem; }
  /* the five activities: one swipe row of small picture cards */
  .act-index {
    display: flex; gap: .7rem; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); margin-block-start: 1.6rem;
  }
  .act-index::-webkit-scrollbar { display: none; }
  .act-index a { flex: 0 0 136px; scroll-snap-align: start; gap: .45rem; font-size: .98rem; }
  .act-index img, .act-index-heart { aspect-ratio: 1 / 1; border-radius: 18px; }

  .act-grid { gap: 1.4rem; }
  .act-photo { aspect-ratio: 4 / 3; }
  .act-tall .act-photo { aspect-ratio: 1 / 1; width: 100%; }
  .act-text .tag { margin-block-end: .6rem; }
  :root .act-lead { font-size: 1.85rem; margin-block-end: .7rem; }
  .act-text p, .act-list { font-size: 1.04rem; line-height: 1.6; }
  .act-text .more-btn { display: flex; margin-block: .1rem 1rem; }
  .act-cta { margin-block-start: .2rem; }

  .act-edu { padding-block: 3.6rem; }
  .edu-panel { padding: 2.6rem 1.25rem; }
  .edu-text p:not(.edu-visual) { font-size: 1.04rem; line-height: 1.6; }
  .edu-text .edu-visual { margin-block-end: 1.1rem; }
  .edu-plan { padding: 1.4rem 1.2rem; }
  :root .edu-plan-big { font-size: 2.3rem; }

  .act-end-in .lead { margin-block-end: 1.4rem; }

  .contact-cta { flex-direction: column; align-items: stretch; gap: .9rem; }
  .contact-cta .btn { justify-content: center; }
  .contact-phone { text-align: center; }
  .where-head { margin-block-end: 1.2rem; }
  .places { gap: .5rem; }
  .place { padding: .8rem 1rem; }
  :root .place-name { font-size: 1.6rem; }
  .map-frame { aspect-ratio: 1 / 1; }
  .map-links .btn { flex: 1 1 0; justify-content: center; }
  .follow-card { padding: 1.4rem 1.3rem; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: center; }
  .follow-icon { grid-row: span 2; margin: 0; width: 50px; height: 50px; padding: 12px; }
  :root .follow-name { font-size: 2.3rem; }
  .follow-arrow { inset-block-start: 50%; translate: 0 -50%; width: 26px; height: 26px; }
  .follow-card { padding-inline-end: 3.6rem; }
  .act-edu .edu-name { white-space: nowrap; font-size: clamp(2.1rem, 11.5vw, 2.7rem); }
}