/* ==========================================================================
   responsive.css — every min-width layer, in one place, loaded last.

   Everything above this file describes the phone. Nothing here reduces or
   undoes a mobile rule; it only adds what a wider viewport can afford.
   Breakpoints: 480 · 768 · 1024 · 1280 · 1536, plus pointer and orientation.
   ========================================================================== */

/* ==========================================================================
   ≥ 480px — small phone landscape and large phones
   ========================================================================== */

@media (min-width: 480px) {
  .hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .hero__actions .btn {
    flex: 1 1 auto;
    min-width: 12rem;
  }

  .letters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-4,
  .practices__grid,
  .pillars__grid,
  .checklist-grid,
  .questions__grid,
  .locations,
  .suitability,
  .includes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-6) var(--sp-5);
  }

  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

  .info-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .marquee__word {
    font-size: 1.625rem;
  }

  .form {
    padding: var(--sp-6) var(--sp-5);
  }

  .banner__actions .btn {
    width: auto;
  }
}

/* ==========================================================================
   ≥ 768px — tablets
   ========================================================================== */

@media (min-width: 768px) {
  :root {
    --topbar-h: 44px;
  }

  /* Topbar returns; its contents no longer need to live in the drawer. */
  .topbar {
    display: block;
  }

  .wordmark__tag {
    display: inline;
  }

  .section-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-5);
  }

  .section-head__group {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }

  .section-head__aside {
    flex: none;
    padding-block-end: 0.35rem;
  }

  .hero__visual {
    height: clamp(380px, 52svh, 520px);
  }

  .films {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .journal__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .journal__item:first-child {
    grid-column: span 2;
  }

  .journal__item:first-child .article__media {
    aspect-ratio: 21 / 9;
  }

  /* Offerings leave carousel mode for a real grid. */
  .offerings__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    scroll-snap-type: none;
  }

  .offerings__progress {
    display: none;
  }

  .why__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
  }

  .why__bars {
    grid-column: span 2;
  }

  .story__grid,
  .about-intro__grid,
  .contact__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-7);
    align-items: center;
  }

  .values__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--sp-6);
  }

  .value:nth-child(2) {
    border-block-start: 1px solid var(--rule);
  }

  .value:nth-last-child(2) {
    border-block-end: 1px solid var(--rule);
  }

  .banner__inner {
    max-width: 40rem;
  }

  .quiet__inner {
    align-items: center;
    text-align: center;
  }

  .quiet__heading {
    margin-inline: auto;
  }

  .collage__badge span {
    max-width: none;
  }
}

/* ==========================================================================
   ≥ 1024px — desktop. Smooth scroll, WebGL, custom cursor and parallax all
   begin here; below this line the site runs on native scrolling.
   ========================================================================== */

@media (min-width: 1024px) {
  :root {
    --header-h: 84px;
  }

  /* Header: real nav, no hamburger. */
  .nav {
    display: block;
  }

  /* Specificity matched to the .header__cta.btn rule that hides it in layout.css. */
  .header__cta.btn {
    display: inline-flex;
  }

  .burger {
    display: none;
  }

  .wordmark {
    font-size: 1.75rem;
  }

  /* Hero becomes a two-column composition: copy in the left half, the
     photograph filling the right half and running off the edge of the
     viewport. The fade moves from the bottom of the frame to its left edge,
     so the photograph dissolves into the teal instead of ending on a line. */
  .hero {
    min-height: 100svh;
    padding-block: calc(var(--sp-8) + var(--header-h) + var(--topbar-h)) var(--sp-8);
    justify-content: center;
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__content {
    max-width: 33rem;
  }

  .hero__visual {
    position: absolute;
    inset: 0 0 0 auto;
    z-index: 1;
    width: 52%;
    height: 100%;
    margin-block-end: 0;
  }

  .hero__portrait {
    object-position: 50% 34%;
  }

  /* The wash is pulled into the left half here. It sits behind the
     photograph, so any part of it that reached the panel's edge was cut off
     by it and drew a vertical seam down the hero; kept clear of the edge,
     both sides of that line are plain teal and the join disappears. */
  .hero__wash {
    background: radial-gradient(
        48% 52% at 20% 36%,
        rgb(var(--sandalwood-rgb) / 0.16),
        transparent 70%
      ),
      radial-gradient(
        44% 48% at 6% 76%,
        rgb(var(--dusk-rgb) / 0.18),
        transparent 72%
      );
  }

  .hero__visual::after {
    inset: 0;
    height: auto;
    background: linear-gradient(
        to right,
        var(--stillwater),
        rgb(var(--stillwater-rgb) / 0.55) 22%,
        rgb(var(--stillwater-rgb) / 0) 52%
      ),
      linear-gradient(
        to bottom,
        rgb(var(--stillwater-rgb) / 0.55),
        rgb(var(--stillwater-rgb) / 0) 26%,
        rgb(var(--stillwater-rgb) / 0) 70%,
        rgb(var(--stillwater-rgb) / 0.6)
      );
  }

  .hero__actions {
    width: auto;
  }

  .hero__actions .btn {
    flex: 0 0 auto;
    min-width: 0;
  }

  /* Four films sit as a clean 2x2 at every width from the mid breakpoint up;
     a third column would leave the fourth stranded on its own row. */
  .letters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Collage regains its real overlap and its overlapping badge. */
  .about-intro__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-9);
  }

  .collage {
    padding-block-end: var(--sp-8);
    padding-inline-end: var(--sp-6);
  }

  .collage .shape--leaf {
    inset-block-start: -6%;
    inset-inline-start: -14%;
    width: 46%;
  }

  .collage__main {
    width: 82%;
    aspect-ratio: 4 / 5;
  }

  .collage__sub {
    position: absolute;
    inset-block-end: var(--sp-6);
    inset-inline-end: 0;
    width: 52%;
    margin: 0;
    border-width: 10px;
    aspect-ratio: 1;
  }

  .collage__badge {
    position: absolute;
    inset-block-end: calc(var(--sp-3) * -1);
    inset-inline-start: var(--sp-5);
    margin: 0;
    padding: var(--sp-4) var(--sp-5);
  }

  .collage__badge span {
    max-width: 11ch;
  }

  .grid-4,
  .practices__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-4);
  }

  .pillars__grid,
  .checklist-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .questions__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-5);
  }

  .includes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-5) var(--sp-6);
  }

  /* The three roots gain a wider number column and more air, and everything
     returns to a single row. */
  .root {
    grid-template-columns: 5rem auto 1fr;
    gap: var(--sp-5);
    padding-block: var(--sp-6);
    align-items: center;
  }

  .root__body {
    grid-column: 3;
    grid-row: 1;
  }

  .root__n {
    font-size: 2.5rem;
  }

  /* Five nav items plus a CTA is tight at exactly 1024px. */
  .nav__list {
    gap: var(--sp-4);
  }

  .topbar__item--hours {
    display: inline-flex;
  }

  .steps--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .story__aside {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-4));
  }

  .counters__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-5);
  }

  /* Hairline rules between counters, desktop only. */
  .counters__item + .counters__item::before {
    content: '';
    position: absolute;
    inset-block: 0.5rem;
    inset-inline-start: calc(var(--sp-5) / -2);
    width: 1px;
    background: rgb(var(--mineral-rgb) / 0.18);
  }

  .offerings__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .journal__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .journal__item:first-child {
    grid-column: auto;
  }

  .journal__item:first-child .article__media {
    aspect-ratio: 16 / 9;
  }

  .why__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--sp-8);
    align-items: start;
  }

  .why__media {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-4));
    aspect-ratio: 4 / 5;
  }

  .why__bars {
    grid-column: 2;
    padding-block-start: var(--sp-5);
  }

  .levels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-5);
  }

  .story__grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--sp-8);
    align-items: start;
  }

  /* A landscape photograph needs its half of the split to be the wider one. */
  .story__grid--wide {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
  }

  .senses__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-8);
  }

  .course__intro {
    max-width: 68ch;
  }

  .contact__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--sp-8);
    align-items: start;
  }

  .info-cards {
    grid-template-columns: 1fr;
    position: sticky;
    top: calc(var(--header-h) + var(--sp-4));
  }

  /* Timeline gains a year column beside the rail. */
  .timeline {
    padding-inline-start: 0;
  }

  .timeline__rail {
    inset-inline-start: 7.5rem;
  }

  .timeline__item {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: var(--sp-6);
    align-items: start;
  }

  .timeline__item::before {
    inset-inline-start: 7rem;
  }

  .timeline__year {
    text-align: right;
    padding-inline-end: var(--sp-4);
    font-size: 1.5rem;
  }

  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-6);
  }

  .step {
    border-block-start: 1px solid var(--rule);
    border-block-end: 0;
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }

  .step:last-child {
    border-block-end: 0;
  }

  .step__n {
    font-size: 2.5rem;
  }

  .swiper-nav {
    display: inline-flex;
  }

  .marquee__word {
    font-size: 2rem;
    padding-inline: var(--sp-5);
  }

  .footer__grid {
    grid-template-columns: 1.35fr 0.85fr 1fr 1fr;
    gap: var(--sp-6);
  }

  .drawer,
  .drawer-backdrop {
    display: none;
  }
}

/* ==========================================================================
   ≥ 1280px
   ========================================================================== */

@media (min-width: 1280px) {
  .hero__inner {
    gap: var(--sp-8);
  }

  .practices__grid {
    gap: var(--sp-5);
  }

  .offerings__grid,
  .journal__grid {
    gap: var(--sp-5);
  }

  .section-head {
    margin-block-end: var(--sp-7);
  }
}

/* ==========================================================================
   ≥ 1536px — stop growing the type, start growing the canvas
   ========================================================================== */

@media (min-width: 1536px) {
  :root {
    --container: 1420px;
    --gutter: 3.5rem;
  }

  .why__grid,
  .story__grid {
    gap: var(--sp-9);
  }
}

/* ==========================================================================
   Pointer capability — hover effects exist only where hover exists.
   On touch, everything hover reveals is visible by default (set in the base
   layer); these rules hide it again only for a genuine mouse.
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
  .guide__socials {
    opacity: 0;
    transform: translate(-50%, 8px);
    transition: opacity var(--t-micro) var(--ease),
      transform var(--t-micro) var(--ease);
  }

  .guide:hover .guide__socials,
  .guide:focus-within .guide__socials {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  .card:hover {
    border-color: var(--rule-strong);
  }

  .info-card:hover {
    transform: translateY(-2px);
  }
}

/* Coarse pointers get bigger tap targets in dense clusters. */
@media (pointer: coarse) {
  .footer__links a,
  .footer__legal a,
  .crumbs a {
    min-height: 46px;
  }
}

/* ==========================================================================
   Landscape phones — short viewports must not be given a full-height hero
   ========================================================================== */

@media (orientation: landscape) and (max-height: 560px) {
  .hero {
    min-height: 0;
    padding-block: var(--sp-6);
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__visual {
    height: 42svh;
    margin-block-end: var(--sp-4);
  }

  .hero__title {
    font-size: clamp(1.75rem, 1.2rem + 3vw, 2.75rem);
  }

  .hero__lead {
    display: none;
  }

  .drawer__link {
    min-height: 52px;
    font-size: 1.375rem;
  }

  .notfound {
    min-height: 0;
  }
}

/* ==========================================================================
   Print — the site should still be readable on paper
   ========================================================================== */

@media print {
  .topbar,
  .header,
  .drawer,
  .drawer-backdrop,
  .marquee,
  .strip,
  .hero__visual,
  .cursor,
  .veil,
  .swiper-controls,
  .facade {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .section {
    padding-block: 1.5rem;
    break-inside: avoid;
  }
}

/* ==========================================================================
   Sections added with the gallery, the fees and the calendar
   ========================================================================== */

@media (min-width: 640px) {
  .gallery {
    columns: 2;
  }

  .calendar__months {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .fees {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sessions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .places {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery-strip__track {
    grid-auto-columns: 38%;
  }
}

@media (min-width: 1024px) {
  .gallery {
    columns: 3;
  }

  .calendar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }

  .calendar__months {
    grid-template-columns: minmax(0, 1fr);
  }

  .places {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Six photographs, no scrolling: the whole strip at once. */
  .gallery-strip__track {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }

  .viewer__nav {
    inset-block-start: 50%;
    inset-block-end: auto;
    transform: translateY(-50%);
  }

  .viewer__nav--prev {
    inset-inline-start: var(--sp-4);
  }

  .viewer__nav--next {
    inset-inline-start: auto;
    inset-inline-end: var(--sp-4);
  }
}

@media (min-width: 1280px) {
  .gallery-strip__track {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}