/* ==========================================================================
   sections.css — per-section composition. Mobile layout only; the min-width
   layers that turn these into desktop compositions live in responsive.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

/* The hero is dark, and that is what makes the photograph work: it was taken
   at night on the ghats, so its own background is already close to
   --stillwater and the two meet without a seam. The header sits transparently
   on top of this band rather than cutting a pale line across it.

   On a phone the photograph is a band across the top and the copy sits below
   it on solid teal — legibility beats overlap at 390px wide. From 1024px the
   photograph moves into the right half and bleeds off the edge of the
   viewport; see responsive.css. */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding-block: 0 var(--sp-8);
  background: var(--stillwater);
  overflow: hidden;
  isolation: isolate;
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--sp-5);
  width: 100%;
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: flex-start;
}

.hero__title {
  max-width: 14ch;
}

.hero__title .line {
  display: block;
}

.hero__lead {
  max-width: 40ch;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  width: 100%;
}

.hero__note {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9375rem;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.hero__note::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sandalwood);
  flex: none;
}

/* The photograph.

   On a phone it runs under the transparent header — the top of the frame is
   night sky, so the wordmark and the burger stay readable over it — and its
   lower edge is faded into the teal by ::after rather than stopped with a
   line. */
.hero__visual {
  position: relative;
  width: 100%;
  height: clamp(320px, 50svh, 480px);
  flex: none;
  margin-block-end: var(--sp-5);
}

.hero__portrait {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The square crop is centred on the face; 30% from the top keeps it out of
     the fade at the bottom on the shortest phones. */
  object-position: 50% 30%;
}

/* The fade into the teal. Tall on a phone, because the copy starts right
   under it. */
.hero__visual::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 45%;
  background: linear-gradient(
    to bottom,
    rgb(var(--stillwater-rgb) / 0),
    rgb(var(--stillwater-rgb) / 0.65) 55%,
    var(--stillwater)
  );
  pointer-events: none;
}

/* The photographer is credited on the page rather than cropped off it. */
.hero__credit {
  position: absolute;
  inset: auto var(--gutter) var(--sp-2) auto;
  z-index: 2;
  margin: 0;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--mineral-rgb) / 0.5);
}

/* Ambient wash behind the hero. Warmer and stronger than on a light ground,
   because on --stillwater it reads as depth rather than as haze. */
.hero__wash {
  position: absolute;
  inset: -25% -30% auto;
  height: 110%;
  z-index: 0;
  background: radial-gradient(
      55% 55% at 68% 42%,
      rgb(var(--sandalwood-rgb) / 0.22),
      transparent 72%
    ),
    radial-gradient(
      55% 55% at 18% 60%,
      rgb(var(--dusk-rgb) / 0.2),
      transparent 72%
    );
  pointer-events: none;
}

/* A quiet fade into whatever section follows, so the dark band does not end
   on a hard horizontal edge. */
.hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: clamp(60px, 12vh, 140px);
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgb(var(--stillwater-rgb) / 0),
    rgb(var(--stillwater-rgb) / 0.55)
  );
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Ticker band
   -------------------------------------------------------------------------- */

.ticker {
  background: var(--paper);
}

/* --------------------------------------------------------------------------
   About intro — collage
   -------------------------------------------------------------------------- */

.about-intro__grid {
  display: grid;
  gap: var(--sp-6);
}

.collage {
  position: relative;
  display: grid;
  gap: var(--sp-3);
  padding-block-end: var(--sp-5);
}

.collage__main {
  position: relative;
  z-index: 1;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

.collage__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* On phones the overlap becomes a modest inset offset instead of a corner
   overlap, so nothing crops and nothing collides. */
.collage__sub {
  position: relative;
  z-index: 2;
  width: 78%;
  margin-inline-start: auto;
  margin-block-start: calc(var(--sp-4) * -1);
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 6px solid var(--mineral);
}

.collage__sub img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Experience badge sits in the flow on phones, overlapping only on desktop. */
.collage__badge {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  align-self: flex-start;
  margin-block-start: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--stillwater);
  color: var(--mineral);
}

.collage__badge b {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 2.75rem;
  line-height: 1;
  color: var(--sandalwood);
}

.collage__badge span {
  font-size: 0.9375rem;
  line-height: 1.35;
  max-width: 11ch;
  color: rgb(var(--mineral-rgb) / 0.85);
}

/* Kept inside the gutter on phones — pulled to -14% only at 1024px, where the
   container has margin to spare and it cannot reach the viewport edge. */
.collage .shape--leaf {
  inset-block-start: -4%;
  inset-inline-start: -2%;
  width: 40%;
  aspect-ratio: 3 / 4;
  z-index: 0;
}

.about-intro__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: flex-start;
}

/* --------------------------------------------------------------------------
   Practices
   -------------------------------------------------------------------------- */

.practices {
  background: var(--paper);
  position: relative;
  overflow: hidden;
}

.practices .shape--blob {
  inset-block-start: -10%;
  inset-inline-end: -25%;
  width: 70vw;
  max-width: 560px;
  aspect-ratio: 1;
}

.practices__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--sp-3);
}

.practices .card {
  background: var(--mineral);
  border-color: transparent;
}

/* --------------------------------------------------------------------------
   Sliding strip
   -------------------------------------------------------------------------- */

.strip-band {
  background: var(--stillwater);
  color: var(--mineral);
}

/* --------------------------------------------------------------------------
   Why people stay
   -------------------------------------------------------------------------- */

.why__grid {
  display: grid;
  gap: var(--sp-6);
}

.why__media {
  position: relative;
  border-radius: var(--r-lozenge);
  overflow: hidden;
  aspect-ratio: 5 / 4;
}

.why__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.why__blocks {
  display: grid;
  gap: var(--sp-4);
}

.why-block {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  align-items: start;
}

.why-block__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgb(var(--sandalwood-rgb) / 0.14);
  color: var(--accent-ink);
}

.why-block__icon .icon {
  width: 22px;
  height: 22px;
}

.why-block h3 {
  font-size: var(--fs-card);
  margin-block-end: 0.3rem;
}

.why-block p {
  font-size: var(--fs-small);
  color: var(--muted);
}

.why__bars {
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--rule);
}

/* The three levels the course works on. Not percentages — see content.php. */
.levels {
  display: grid;
  gap: var(--sp-4);
}

.level__n {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  letter-spacing: 0.05em;
  color: var(--sandalwood);
}

.level__label {
  font-size: var(--fs-card);
  margin-block: 0.2rem 0.3rem;
}

.level__note {
  font-size: var(--fs-small);
  color: var(--muted);
  max-width: 44ch;
}

.why__bars-note {
  margin-block-start: var(--sp-4);
  font-size: 0.9375rem;
  color: var(--muted);
  max-width: 52ch;
}

/* --------------------------------------------------------------------------
   Counters
   -------------------------------------------------------------------------- */

.counters {
  background: var(--stillwater);
}

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

.counters__item + .counters__item {
  position: relative;
}

/* --------------------------------------------------------------------------
   Offerings
   -------------------------------------------------------------------------- */

.offerings {
  background: var(--paper);
}

.offerings__grid {
  display: grid;
  gap: var(--sp-4);
}

/* --------------------------------------------------------------------------
   Guides
   -------------------------------------------------------------------------- */

.guides {
  position: relative;
  overflow: hidden;
}

.guides .shape--blob {
  inset-block-end: -20%;
  inset-inline-start: -20%;
  width: 70vw;
  max-width: 520px;
  aspect-ratio: 1;
}

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */

.testimonials {
  position: relative;
  background: var(--mineral);
  overflow: hidden;
}

.testimonials .shape--blob {
  inset-block-start: 8%;
  inset-inline-end: -22%;
  width: 76vw;
  max-width: 620px;
  aspect-ratio: 1;
  color: rgb(var(--dusk-rgb) / 0.09);
}

/* A sub-heading inside a section, for the two bands the testimonials are
   split into. The rule above it does the separating, so the type does not
   have to shout to mark a new band. */
.band-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  margin-block: var(--sp-6) var(--sp-4);
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--rule);
}

.band-head--spaced {
  margin-block-start: var(--sp-8);
}

.band-head__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-card);
  font-weight: 500;
  color: var(--accent-ink);
}

.band-head__note {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Films — the recorded messages
   -------------------------------------------------------------------------- */

.films {
  display: grid;
  gap: var(--sp-4);
}

.film {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
}

/* Letterboxed on purpose. Some of them were filmed on a phone held upright,
   so they arrive with their own black margins; a matching black field behind
   every player makes that read as a frame rather than as a fault. */
.film__player {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: var(--ink);
}

.film__caption {
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
}

.film__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--accent-ink);
}

.film__meta {
  margin-block-start: 0.2rem;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Letters — the handwritten pages, matted rather than cropped
   -------------------------------------------------------------------------- */

.letters {
  display: grid;
  gap: var(--sp-4);
}

.letter {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
}

/* Every letter was framed by hand at its own proportions, so none of them is
   cropped to match the others. They sit centred on a warm mat instead, the
   way a framer would hang five different pages on one wall. */
.letter__open {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  padding: var(--sp-2);
  border: 0;
  cursor: zoom-in;
  background: rgb(var(--sandalwood-rgb) / 0.09);
  box-shadow: inset 0 0 0 1px rgb(var(--sandalwood-rgb) / 0.12);
}

.letter__page {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgb(var(--ink-rgb) / 0.18));
  transition: transform var(--t-std) var(--ease);
}

.letter__open:hover .letter__page,
.letter__open:focus-visible .letter__page {
  transform: scale(1.02);
}

.letter__zoom {
  position: absolute;
  inset-block-end: var(--sp-3);
  inset-inline-end: var(--sp-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgb(var(--paper-rgb) / 0.92);
  color: var(--stillwater);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--t-micro) var(--ease), transform var(--t-micro) var(--ease);
}

.letter__open:hover .letter__zoom,
.letter__open:focus-visible .letter__zoom {
  opacity: 1;
  transform: none;
}

/* A touch device has no hover to reveal the affordance with, so it is simply
   always there. */
@media (hover: none) {
  .letter__zoom {
    opacity: 1;
    transform: none;
  }
}

.letter__caption {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
}

.letter__quote {
  flex: 1;
  margin: 0;
}

.letter__quote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--fg);
}

.letter__quote p::before {
  content: '“';
}

.letter__quote p::after {
  content: '”';
}

.letter__by {
  margin: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.4;
}

.letter__by b {
  font-weight: 600;
}

.letter__by span {
  font-size: 0.875rem;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Journal
   -------------------------------------------------------------------------- */

.journal {
  background: var(--paper);
}

.journal__grid {
  display: grid;
  gap: var(--sp-4);
}

/* --------------------------------------------------------------------------
   Quiet band
   -------------------------------------------------------------------------- */

/* Finished state is the default, so a visitor without JavaScript gets the dark
   band as designed. With JavaScript the band starts light and the motion layer
   scrubs --band-bg and --band-fg together on enter — they never separate, so
   contrast holds through every frame of the transition. */
.quiet {
  --band-bg: var(--stillwater);
  --band-fg: var(--mineral);
  position: relative;
  background: var(--band-bg);
  color: var(--band-fg);
  overflow: hidden;
}

.js .quiet {
  --band-bg: #e9e7df;
  --band-fg: #16211e;
}

/* The band's colour is scrubbed onto the section by GSAP, so anything inside
   it inherits rather than naming a colour of its own — an eyebrow fixed at
   --accent-ink would disappear the moment the band finished going dark. */
.quiet .eyebrow {
  color: inherit;
  opacity: 0.85;
}

/* Inherits, so it follows the colour GSAP scrubs onto the section itself. */
.quiet__note {
  font-size: var(--fs-small);
  color: inherit;
  opacity: 0.7;
}

.quiet__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: flex-start;
  text-align: left;
  position: relative;
  z-index: 1;
}

.quiet__heading {
  font-size: clamp(1.75rem, 1.3rem + 2.2vw, 3rem);
  max-width: 22ch;
}

.quiet .shape--ring {
  inset-block-start: -30%;
  inset-inline-end: -20%;
  width: 80vw;
  max-width: 560px;
  aspect-ratio: 1;
  color: rgb(var(--mineral-rgb) / 0.09);
}

/* --------------------------------------------------------------------------
   Breadcrumb banner (about + contact + 404)
   -------------------------------------------------------------------------- */

.banner {
  position: relative;
  background: var(--stillwater);
  color: var(--mineral);
  padding-block: calc(var(--section-y) * 0.8 + var(--header-h) + var(--topbar-h))
    calc(var(--section-y) * 0.8);
  overflow: hidden;
}

.banner__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: flex-start;
}

.banner__lead {
  max-width: 48ch;
  color: rgb(var(--mineral-rgb) / 0.76);
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: rgb(var(--mineral-rgb) / 0.62);
}

/* min-width as well as min-height: "Home" is only 34px of text, so the height
   alone did not make a 44px target. */
.crumbs a {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  transition: color var(--t-micro) var(--ease);
}

.crumbs a:hover {
  color: var(--sandalwood);
}

.crumbs .icon {
  width: 0.75rem;
  height: 0.75rem;
  opacity: 0.6;
}

.crumbs [aria-current] {
  color: var(--mineral);
}

.banner .shape--ring {
  inset-block-start: -40%;
  inset-inline-end: -25%;
  width: 90vw;
  max-width: 520px;
  aspect-ratio: 1;
  color: rgb(var(--mineral-rgb) / 0.1);
}

/* --------------------------------------------------------------------------
   About page — story
   -------------------------------------------------------------------------- */

.story__grid {
  display: grid;
  gap: var(--sp-6);
}

.story__media {
  position: relative;
  border-radius: var(--r-arch);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

.story__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

/* Landscape frame for a real 4:3 photograph — a portrait crop would cut the
   lake and the mountain range out of it. */
.story__media--landscape {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
}

.story__caption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: var(--sp-6) var(--sp-4) var(--sp-3);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--mineral);
  background: linear-gradient(
    to top,
    rgb(var(--stillwater-rgb) / 0.78),
    rgb(var(--stillwater-rgb) / 0) 100%
  );
}

.story__signature {
  margin-block-start: var(--sp-2);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--stillwater);
}

/* --------------------------------------------------------------------------
   About page — pillars
   -------------------------------------------------------------------------- */

.pillars {
  background: var(--paper);
}

.pillars__grid {
  display: grid;
  gap: var(--sp-3);
}

.pillar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-4);
  background: var(--mineral);
  border-radius: var(--r-md);
}

.pillar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgb(var(--sandalwood-rgb) / 0.5);
  background: rgb(var(--sandalwood-rgb) / 0.14);
  color: var(--accent-ink);
  margin-block-end: var(--sp-1);
}

.pillar__icon .icon {
  width: 24px;
  height: 24px;
}

.pillar p {
  font-size: var(--fs-small);
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   About page — how we work
   -------------------------------------------------------------------------- */

.steps {
  display: grid;
  gap: 0;
  counter-reset: step;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  border-block-start: 1px solid var(--rule);
}

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

.step__n {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--sandalwood);
  line-height: 1.2;
}

.step h3 {
  font-size: var(--fs-card);
  margin-block-end: 0.4rem;
}

.step p {
  font-size: var(--fs-small);
  color: var(--muted);
  max-width: 56ch;
}

/* --------------------------------------------------------------------------
   Home — the three questions
   -------------------------------------------------------------------------- */

.questions {
  background: var(--paper);
}

.questions__grid {
  display: grid;
  gap: var(--sp-4);
}

.question {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-4);
  background: var(--mineral);
  border-radius: var(--r-md);
}

.question__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-block-end: var(--sp-1);
  border-radius: 50%;
  border: 1px solid rgb(var(--sandalwood-rgb) / 0.5);
  background: rgb(var(--sandalwood-rgb) / 0.14);
  color: var(--accent-ink);
}

.question__icon .icon {
  width: 24px;
  height: 24px;
}

.question__q {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-h3);
  color: var(--stillwater);
}

.question__a {
  font-size: var(--fs-small);
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Facts list (About)
   -------------------------------------------------------------------------- */

.facts {
  display: grid;
  gap: 0;
  margin-block-start: var(--sp-4);
}

.fact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem var(--sp-3);
  justify-content: space-between;
  padding-block: var(--sp-2);
  border-block-end: 1px solid var(--rule);
  font-size: var(--fs-small);
}

.fact dt {
  color: var(--muted);
}

.fact dd {
  font-weight: 500;
  text-align: right;
}

/* --------------------------------------------------------------------------
   Checklist cards — used for the curriculum, work highlights and suitability
   -------------------------------------------------------------------------- */

.checklist-grid {
  display: grid;
  gap: var(--sp-3);
}

.check-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-4);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}

.pillars .check-card,
.practices .check-card {
  background: var(--mineral);
  border-color: transparent;
}

.check-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-block-end: var(--sp-1);
  border-radius: 50%;
  border: 1px solid rgb(var(--sandalwood-rgb) / 0.5);
  background: rgb(var(--sandalwood-rgb) / 0.14);
  color: var(--accent-ink);
}

.check-card__icon .icon {
  width: 22px;
  height: 22px;
}

.check-card__title {
  font-size: var(--fs-card);
}

.check-card__note {
  margin-block-start: var(--sp-2);
  padding-block-start: var(--sp-3);
  border-block-start: 1px solid var(--rule);
  font-size: 0.9375rem;
  color: var(--muted);
}

.check-card--no .check-card__icon {
  color: #a4462f;
}

.checklist--no .icon {
  color: #a4462f;
}

.checklist--lg li {
  font-size: 1.0625rem;
  padding-block: var(--sp-2);
  border-block-end: 1px solid var(--rule);
}

.suitability {
  display: grid;
  gap: var(--sp-4);
}

/* --------------------------------------------------------------------------
   Course page — the three roots
   -------------------------------------------------------------------------- */

.roots {
  display: grid;
  gap: 0;
}

/* On a phone the number and icon share the first row and the text takes the
   full width below. Three columns at 320px would leave the paragraph about
   170px wide, which is two or three words a line. */
.root {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-2) var(--sp-3);
  align-items: center;
  padding-block: var(--sp-5);
  border-block-start: 1px solid var(--rule);
}

.root__n {
  grid-column: 1;
  grid-row: 1;
}

.root__icon {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
}

.root__body {
  grid-column: 1 / -1;
  grid-row: 2;
}

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

.root__n {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.3;
  color: rgb(var(--ink-rgb) / 0.28);
}

.root__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgb(var(--sandalwood-rgb) / 0.14);
  color: var(--accent-ink);
}

.root__icon .icon {
  width: 22px;
  height: 22px;
}

.root h3 {
  font-size: var(--fs-card);
  margin-block-end: 0.35rem;
}

.root p {
  font-size: var(--fs-small);
  color: var(--muted);
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   Course page — what is included, and the fee
   -------------------------------------------------------------------------- */

.price {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.price b {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.25rem, 1.8rem + 2vw, 3rem);
  color: var(--sandalwood);
}

.price span {
  font-size: 0.9375rem;
  color: rgb(var(--mineral-rgb) / 0.7);
}

.includes {
  display: grid;
  gap: var(--sp-4);
}

.include {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  align-items: start;
}

.include__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgb(var(--mineral-rgb) / 0.28);
  color: var(--sandalwood);
}

.include__icon .icon {
  width: 20px;
  height: 20px;
}

.include h3 {
  font-size: 1.0625rem;
  font-family: var(--font-body);
  font-weight: 600;
  margin-block-end: 0.2rem;
}

.include p {
  font-size: var(--fs-small);
  color: rgb(var(--mineral-rgb) / 0.68);
}

.excludes {
  margin-block-start: var(--sp-6);
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid rgb(var(--mineral-rgb) / 0.2);
}

.excludes__title {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sandalwood);
  margin-block-end: var(--sp-2);
}

.excludes ul {
  display: grid;
  gap: 0.4rem;
  font-size: var(--fs-small);
  color: rgb(var(--mineral-rgb) / 0.72);
}

.excludes li::before {
  content: '— ';
  color: var(--sandalwood);
}

/* --------------------------------------------------------------------------
   Course page — where and when
   -------------------------------------------------------------------------- */

.locations {
  display: grid;
  gap: var(--sp-4);
}

.location {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: var(--sp-5) var(--sp-4);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
}

.location__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-block-end: var(--sp-2);
  border-radius: 50%;
  background: rgb(var(--stillwater-rgb) / 0.07);
  color: var(--stillwater);
}

.location__place {
  font-size: var(--fs-h3);
}

.location__area {
  font-size: var(--fs-small);
  color: var(--muted);
}

.location__season {
  margin-block-start: var(--sp-1);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sandalwood);
}

.location__note {
  margin-block-start: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Banner actions
   -------------------------------------------------------------------------- */

.banner__actions {
  margin-block-start: var(--sp-3);
  width: 100%;
}

/* Full width on the narrowest phones — "Enquire about the course" plus its
   icon is within a few pixels of the 320px content box otherwise. */
.banner__actions .btn {
  width: 100%;
}

/* A single teacher renders as a centred card rather than a one-item carousel. */
.guides__solo {
  display: grid;
  justify-content: center;
}

.guides__solo > * {
  max-width: 380px;
}

/* --------------------------------------------------------------------------
   About page — the ten indriyas
   -------------------------------------------------------------------------- */

.senses__title {
  max-width: 24ch;
}

.senses__lead {
  margin-block-end: var(--sp-6);
}

.senses__columns {
  display: grid;
  gap: var(--sp-7);
}

.senses__column-title {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  padding-block-end: var(--sp-2);
  border-block-end: 1px solid var(--rule-strong);
}

.senses__column-note {
  margin-block: var(--sp-3) var(--sp-4);
  font-size: var(--fs-small);
  color: var(--muted);
  max-width: 46ch;
}

.senses__list {
  display: grid;
  gap: var(--sp-4);
  counter-reset: sense;
}

.sense {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  align-items: start;
}

.sense__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgb(var(--sandalwood-rgb) / 0.5);
  background: rgb(var(--sandalwood-rgb) / 0.14);
  color: var(--accent-ink);
}

.sense__icon .icon {
  width: 20px;
  height: 20px;
}

.sense__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 400;
  margin-block-end: 0.3rem;
}

.sense__arrow {
  color: var(--sandalwood);
}

.sense__action {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.sense__body p {
  font-size: var(--fs-small);
  color: var(--muted);
  max-width: 52ch;
}

/* --------------------------------------------------------------------------
   About page — lineage timeline
   -------------------------------------------------------------------------- */

.timeline {
  position: relative;
  display: grid;
  gap: var(--sp-6);
  padding-inline-start: var(--sp-5);
}

/* The rail and the progress line that fills it as you scroll. */
.timeline__rail {
  position: absolute;
  inset-block: 0.6rem 0;
  inset-inline-start: 5px;
  width: 1px;
  background: var(--rule-strong);
}

.timeline__progress {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: 100%;
  background: var(--sandalwood);
  transform-origin: top;
  transform: scaleY(0);
}

html:not(.js) .timeline__progress {
  transform: scaleY(1);
}

.timeline__item {
  position: relative;
}

.timeline__item::before {
  content: '';
  position: absolute;
  inset-block-start: 0.55rem;
  inset-inline-start: calc(var(--sp-5) * -1);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--mineral);
  border: 1.5px solid var(--sandalwood);
}

.timeline__year {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--sandalwood);
  line-height: 1.4;
}

.timeline__item h3 {
  font-size: var(--fs-card);
  margin-block: 0.2rem 0.4rem;
}

.timeline__item p {
  font-size: var(--fs-small);
  color: var(--muted);
  max-width: 46ch;
}

/* --------------------------------------------------------------------------
   About page — values
   -------------------------------------------------------------------------- */

.values {
  background: var(--paper);
}

.values__list {
  display: grid;
  gap: 0;
}

.value {
  display: grid;
  gap: var(--sp-2);
  padding-block: var(--sp-5);
  border-block-start: 1px solid var(--rule);
}

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

.value h3 {
  font-size: var(--fs-card);
}

.value p {
  font-size: var(--fs-small);
  color: var(--muted);
  max-width: 60ch;
}

/* --------------------------------------------------------------------------
   Contact page
   -------------------------------------------------------------------------- */

.contact__grid {
  display: grid;
  gap: var(--sp-6);
}

.info-cards {
  display: grid;
  gap: var(--sp-3);
}

/* minmax(0, 1fr), not 1fr: a bare 1fr floors at the track's min-content, and
   the longest value here is an unbreakable email address. At 320px and again
   in the two-column layout at 768px that floor pushed the whole card wider
   than the viewport. */
.info-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-4);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  transition: border-color var(--t-micro) var(--ease);
}

.info-card:hover {
  border-color: rgb(var(--sandalwood-rgb) / 0.5);
}

.info-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgb(var(--stillwater-rgb) / 0.07);
  color: var(--stillwater);
}

.info-card__icon .icon {
  width: 20px;
  height: 20px;
}

.info-card__title {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-block-end: 0.35rem;
}

.info-card__value {
  font-size: 1.0625rem;
  line-height: 1.5;
  /* An email address is one long unbreakable token. Let it break rather than
     set the width of everything around it. */
  overflow-wrap: anywhere;
}

.info-card__value a {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 44px;
  border-block-end: 1px solid rgb(var(--sandalwood-rgb) / 0.5);
  transition: border-color var(--t-micro) var(--ease);
}

.info-card__value a:hover {
  border-block-end-color: var(--sandalwood);
}

.info-card__value--small {
  font-size: var(--fs-small);
  color: var(--muted);
}

/* The map frame moved into .place__map, one per address. */
.place__map {
  border-radius: var(--r-md);
  overflow: hidden;
}

.faq-section {
  background: var(--paper);
}

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

.notfound {
  display: grid;
  place-items: center;
  min-height: calc(100svh - var(--header-h) - 120px);
  padding-block: var(--section-y);
  text-align: center;
}

.notfound__code {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(5rem, 3rem + 14vw, 11rem);
  line-height: 1;
  color: rgb(var(--stillwater-rgb) / 0.16);
  letter-spacing: -0.04em;
}

.notfound__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  max-width: 46ch;
}

/* --------------------------------------------------------------------------
   Box headings — every card, panel and list box on the site
   --------------------------------------------------------------------------
   These are the labels a page is scanned by, so they carry the accent and the
   weight. --accent-ink is a darkened sandalwood on paper and plain sandalwood
   inside .on-dark, which is what keeps the dark bands legible.
   -------------------------------------------------------------------------- */

.practice__title,
.check-card__title,
.info-card__title,
.offering__title,
.senses__column-title,
.sense__name,
.level__label,
.question__q,
.location__place,
.excludes__title,
.why-block h3,
.pillar h3,
.value h3,
.step h3,
.root h3,
.include h3,
.timeline__item h3 {
  color: var(--accent-ink);
  font-weight: 600;
}

/* The arrow and the verb after it stay quiet — the organ is the heading. */
.sense__name .sense__arrow,
.sense__name .sense__action {
  font-weight: 500;
}

/* ==========================================================================
   Daily schedule — three sessions, an hour and a half each
   ========================================================================== */

.sessions {
  display: grid;
  gap: var(--sp-3);
  counter-reset: session;
}

.session {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}

.session__n {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--accent-ink);
}

.session__title {
  font-size: var(--fs-card);
  color: var(--accent-ink);
  font-weight: 600;
}

.session__time {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-block: 0.25rem 0.35rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stillwater);
}

.session__time .icon {
  width: 1rem;
  height: 1rem;
  flex: none;
}

.session__text {
  color: var(--muted);
}

/* ==========================================================================
   Fees — three ways to take the same seven days
   ========================================================================== */

.fees {
  display: grid;
  gap: var(--sp-4);
}

.fee {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-4);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  transition: border-color var(--t-micro) var(--ease),
    transform var(--t-micro) var(--ease);
}

.fee:hover {
  border-color: rgb(var(--sandalwood-rgb) / 0.55);
}

.fee__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid rgb(var(--sandalwood-rgb) / 0.5);
  background: rgb(var(--sandalwood-rgb) / 0.14);
  color: var(--accent-ink);
}

.fee__icon .icon {
  width: 24px;
  height: 24px;
}

.fee__title {
  font-size: var(--fs-card);
  color: var(--accent-ink);
  font-weight: 600;
}

.fee__price {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.fee__price b {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
  color: var(--stillwater);
}

.fee__price span {
  margin-block-start: 0.25rem;
  font-size: 0.9375rem;
  color: var(--muted);
}

.fee__note {
  color: var(--muted);
  flex: 1;
}

.fees__note {
  margin-block-start: var(--sp-4);
  max-width: 68ch;
  color: var(--muted);
  font-size: var(--fs-small);
}

/* ==========================================================================
   Event calendar — fixed seven-day windows, one card per place
   ========================================================================== */

.calendar {
  display: grid;
  gap: var(--sp-4);
}

.calendar__place {
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}

.calendar__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: center;
  padding-block-end: var(--sp-3);
  border-block-end: 1px solid var(--rule);
}

.calendar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgb(var(--sandalwood-rgb) / 0.14);
  color: var(--accent-ink);
}

.calendar__icon .icon {
  width: 20px;
  height: 20px;
}

.calendar__title {
  font-size: var(--fs-card);
  color: var(--accent-ink);
  font-weight: 600;
}

.calendar__area {
  font-size: 0.9375rem;
  color: var(--muted);
}

.calendar__season {
  grid-column: 1 / -1;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stillwater);
}

.calendar__months {
  display: grid;
  gap: var(--sp-3);
  padding-block-start: var(--sp-3);
}

.calendar__month-name {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-block-end: 0.4rem;
}

.calendar__dates {
  display: grid;
  gap: 0.35rem;
}

.calendar__dates li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-body);
  color: var(--fg);
}

.calendar__dates .icon {
  width: 1rem;
  height: 1rem;
  flex: none;
  color: var(--accent-ink);
}

/* ==========================================================================
   Places — an address that opens in a map, and the map under it
   ========================================================================== */

.places {
  display: grid;
  gap: var(--sp-4);
}

.place {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}

.place__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: center;
}

.place__title {
  font-size: var(--fs-card);
  color: var(--accent-ink);
  font-weight: 600;
}

.place__season {
  font-size: 0.9375rem;
  color: var(--muted);
}

/* The whole address is the link — it is the thing a visitor wants to tap. */
.place__address,
.location__address {
  display: block;
  padding: var(--sp-3);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--bg);
  transition: border-color var(--t-micro) var(--ease),
    background-color var(--t-micro) var(--ease);
}

.place__address:hover,
.place__address:focus-visible,
.location__address:hover,
.location__address:focus-visible {
  border-color: rgb(var(--sandalwood-rgb) / 0.55);
  background: rgb(var(--sandalwood-rgb) / 0.08);
}

.place__address address,
.location__address address {
  font-style: normal;
  line-height: 1.6;
  color: var(--fg);
}

.place__address .link__label,
.location__address .link__label {
  display: inline-block;
  margin-block-start: var(--sp-2);
  font-weight: 600;
  color: var(--accent-ink);
  border-block-end: 1px solid rgb(var(--sandalwood-rgb) / 0.5);
}

/* svg is display:block in the reset, which would put the arrow on its own
   line inside the label. Here it belongs beside the words. */
.place__address .icon,
.location__address .icon {
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  margin-inline-start: 0.3rem;
  vertical-align: -0.12em;
  color: var(--accent-ink);
}

.location__address {
  margin-block-start: var(--sp-3);
}

.place__map .facade,
.place__map .facade iframe {
  aspect-ratio: 16 / 10;
  min-height: 0;
}

/* ==========================================================================
   Gallery — masonry columns, because the photographs arrive in every shape
   ========================================================================== */

.gallery {
  columns: 1;
  column-gap: var(--sp-4);
}

.gallery__item {
  break-inside: avoid;
  margin-block-end: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
}

.gallery__open {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  cursor: zoom-in;
  background: rgb(var(--ink-rgb) / 0.04);
}

.gallery__open img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform var(--t-std) var(--ease), opacity var(--t-micro) var(--ease);
}

.gallery__open:hover img,
.gallery__open:focus-visible img {
  transform: scale(1.03);
}

.gallery__zoom {
  position: absolute;
  inset-block-end: var(--sp-3);
  inset-inline-end: var(--sp-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgb(var(--paper-rgb) / 0.92);
  color: var(--stillwater);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--t-micro) var(--ease), transform var(--t-micro) var(--ease);
}

.gallery__open:hover .gallery__zoom,
.gallery__open:focus-visible .gallery__zoom {
  opacity: 1;
  transform: none;
}

.gallery__caption {
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
}

.gallery__place {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.gallery__place .icon {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--accent-ink);
}

.gallery__title {
  margin-block-start: 0.3rem;
  font-size: var(--fs-card);
  color: var(--accent-ink);
  font-weight: 600;
}

.gallery__text {
  margin-block-start: 0.3rem;
  color: var(--muted);
}

/* ==========================================================================
   Gallery strip on the home page — a snap row on a phone, a grid above
   ========================================================================== */

.gallery-strip__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 62%;
  gap: var(--sp-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-block-end: var(--sp-2);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.gallery-strip__track::-webkit-scrollbar {
  display: none;
}

.gallery-shot {
  scroll-snap-align: start;
  display: block;
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid var(--rule);
  background: rgb(var(--ink-rgb) / 0.04);
}

.gallery-shot img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--t-std) var(--ease);
}

.gallery-shot:hover img,
.gallery-shot:focus-visible img {
  transform: scale(1.04);
}

/* ==========================================================================
   Image viewer — opened from the gallery, empty until then
   ========================================================================== */

.viewer {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: none;
  place-items: center;
  padding: var(--sp-4);
  background: rgb(var(--ink-rgb) / 0.96);
  backdrop-filter: blur(3px);
}

.viewer.is-open {
  display: grid;
}

.viewer__figure {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: min(1200px, 100%);
  max-height: 100%;
}

.viewer__figure img {
  display: block;
  max-width: 100%;
  max-height: 76svh;
  margin-inline: auto;
  object-fit: contain;
  border-radius: var(--r-sm);
  background: rgb(var(--ink-rgb) / 0.4);
}

.viewer__caption {
  color: rgb(var(--mineral-rgb) / 0.92);
  text-align: center;
  font-size: var(--fs-small);
  max-width: 68ch;
  margin-inline: auto;
}

.viewer__caption b {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-card);
  color: var(--sandalwood);
  margin-block-end: 0.2rem;
}

.viewer__close,
.viewer__nav {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgb(var(--mineral-rgb) / 0.3);
  background: rgb(var(--ink-rgb) / 0.5);
  color: var(--mineral);
  transition: background-color var(--t-micro) var(--ease),
    border-color var(--t-micro) var(--ease);
}

.viewer__close:hover,
.viewer__nav:hover {
  background: var(--stillwater);
  border-color: var(--sandalwood);
}

.viewer__close {
  inset-block-start: var(--sp-3);
  inset-inline-end: var(--sp-3);
}

.viewer__nav {
  inset-block-end: var(--sp-3);
}

.viewer__nav--prev {
  inset-inline-start: calc(50% - 56px);
}

.viewer__nav--prev .icon {
  transform: rotate(180deg);
}

.viewer__nav--next {
  inset-inline-start: calc(50% + 10px);
}