/* ═══════════════════════════════════════════════════════════════════════════
   06 - SECTIONS
   The homepage, in order (§8), plus the footer. Anything that appears on more
   than one page lives in 05-components.css; anything specific to an inner page
   lives in 07-pages.css.
   ═══════════════════════════════════════════════════════════════════════════ */

@layer sections {

/* ───────────────────────────────────────────────────────────────────────────
   H1 · HERO "AROHA"
   ─────────────────────────────────────────────────────────────────────────── */

/* The film holds the page.
   
   While a scrubbed film is running the hero stays put and the sections below
   wait: the hero is sticky inside a container several screens tall, so the
   scroll is spent on the film before it is spent on the page. This is done
   with sticky positioning rather than by intercepting the wheel, which keeps
   the browser's own smooth scrolling, its inertia, the keyboard, the
   scrollbar and find-in-page all working exactly as they should.

   --pin-span is set by hero-video.js and ONLY once the film is really running.
   Left at one screen, the container is the hero and nothing has changed - which
   is what a phone, a blocked script or a reader who asked for less motion get. */
.hero-pin {
  height: var(--pin-span, 100svh);
}

.hero {
  position: relative;
  min-height: max(100svh, 680px);
  display: flex;
  align-items: flex-end;
  padding-block: calc(var(--header-h) + var(--sp-7)) var(--sp-7);
  isolation: isolate;
  overflow: clip;
}

/* Doubled class on purpose: .hero sets `position: relative` and is written
   below this in the file, so a single .hero--pinned would lose the cascade to
   it and the hero would scroll away instead of holding. */
.hero.hero--pinned {
  position: sticky;
  top: 0;
  height: 100svh;
  /* A pinned hero cannot grow: whatever does not fit the window can never be
     scrolled to, because the window is held still. So the vertical rhythm
     tightens to buy the room back - measured against the design at 780px, the
     shortest laptop window this is likely to meet. hero-video.js checks the
     result and unpins rather than clipping if it still does not fit. */
  padding-block: calc(var(--header-h) + var(--sp-5)) var(--sp-5);
}


.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* img() puts this class on the <picture>, which is the element in the layout;
   the <img> inside simply fills it. */
.hero__poster,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__poster > img,
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__video { z-index: 1; }

/* The film layer sits over the photograph and starts invisible: hero-video.js
   adds .is-playing only once there is a frame to show. So a slow connection, a
   blocked third party, a broken file or reduced motion all end up showing the
   photograph rather than a black rectangle where it used to be. */
.hero__film {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
  pointer-events: none;
  /* The crop. The iframe inside is deliberately larger than this box, so its
     edges - and everything YouTube draws along them - fall outside it. */
  overflow: hidden;
}

.hero__film.is-playing { opacity: 1; }

/* The shield.
   A full-surface layer over the film, so a pointer moving across the hero
   never lands on the video itself: no hover chrome, no click reaching the
   player, no context menu on it. It is a pseudo-element rather than a real
   one - the hero is the first thing that paints, and this costs no markup. */
.hero__film::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: auto;         /* the parent turns them off; this takes them */
}

/* A 16:9 frame covering a full-height hero has to be scaled up and centred,
   the same job object-fit: cover does for an image - an iframe cannot be told
   to crop itself.

   It is then grown by --yt-crop beyond that, and the parent hides what spills.
   That overspill is the point: YouTube's title bar rides the top edge of the
   player and its watermark the bottom, and neither can be turned off by any
   parameter. Pushing both edges outside the visible box is what removes them.
   The width grows by 16/9 of the height so the picture keeps its shape - a
   taller box alone would stretch the film. */
.hero__film iframe {
  --yt-crop: 140px;           /* how much of the top and bottom edge to lose */

  position: absolute;
  top: 50%;
  left: 50%;
  /* The reset gives every iframe max-width: 100% - a sane ceiling everywhere
     except here, where the whole point is to be wider than the box and let the
     frame hide the rest. Without this the width below is silently capped at
     the hero's own width and the film stops covering it on a tall window. */
  max-width: none;
  width: calc(100vw + (var(--yt-crop) * 16 / 9));
  height: calc(56.25vw + var(--yt-crop));         /* 16:9 of the width */
  min-height: calc(100% + var(--yt-crop));
  min-width: calc(177.78vh + (var(--yt-crop) * 16 / 9));   /* 16:9 of height */
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}

/* A 34% ink scrim, then a left-weighted one, then the fade-up gradient (§8 H1).
   The left wedge is what keeps the name and lead legible over ANY photograph
   the client supplies: the copy sits in the left ~42rem, so that side is held
   dark while the right stays open for the subject. Tuning object-position to
   one particular image would break the next time the image changes. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    90deg,
    rgba(7, 6, 5, .88) 0%,
    rgba(7, 6, 5, .70) 32%,
    rgba(7, 6, 5, .26) 60%,
    rgba(7, 6, 5, .06) 100%
  );
}

/* Below the split point the photograph sits behind the text either way, so the
   wedge gives way to an even wash. */
@media (max-width: 767px) {
  .hero__scrim {
    background: rgba(7, 6, 5, .55);
  }
}

/* The shared --grad-fade-up reaches .92 by 72% of the height, which buries the
   performer in any photograph where they are not standing at the very top.
   The hero gets its own, later and gentler: dark enough to seat the stat rail
   and meet the marquee, clear enough to let the picture be a picture. */
.hero__fade {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(
    180deg,
    rgba(10, 9, 8, .55) 0%,
    rgba(10, 9, 8, .10) 26%,
    rgba(10, 9, 8, .10) 58%,
    rgba(10, 9, 8, .82) 88%,
    #0A0908 100%
  );
}

/* The copy sits on the floor of the hero.
   There is nothing under it any more - the figures are their own section - so
   the block is not one row of a stack with a gap beneath it. The scroll cue is
   lifted out of the flow entirely and pinned to the right edge, which is where
   it was drawn anyway, so it cannot push the name up off the bottom. */
.hero__inner {
  position: relative;
  display: grid;
  width: 100%;
}

.hero__content { max-width: 42rem; }

/* The name is one line and stays one line.
   --title-chars is written by hero.php: it is the length of the name. The width
   available is the container, or the window less its gutters on a narrow
   screen, and .52em is about what a character of this face costs at display
   size in this weight. Dividing one by the other gives the largest size that
   still fits; --fs-display caps it so a short name does not grow absurd. The
   nowrap is the guarantee - the arithmetic only keeps it from overflowing. */
.hero__title {
  margin-block: var(--sp-4) var(--sp-3);
  max-width: none;
  white-space: nowrap;
  font-size: min(
    var(--fs-display),
    calc(min(var(--container), 100vw - var(--gutter) * 2) / (var(--title-chars, 16) * .52))
  );
}

.hero__title-line { display: block; }

.hero__lead { margin-bottom: var(--sp-6); }

.hero__actions { gap: var(--sp-4); }

/* ── The scroll cue ──
   Out of the flow, against the right edge, level with the copy's last line. */

.hero__rail {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

.hero__scroll {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}

@media (min-width: 768px) {
  .hero__scroll { display: flex; }
}

.hero__scroll-label {
  writing-mode: vertical-rl;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ivory-500);
}

.hero__scroll-line {
  position: relative;
  width: 1px;
  height: 48px;
  background: var(--hairline);
  overflow: hidden;
}

.hero__scroll-line::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  height: 16px;
  background: var(--gold-500);
  animation: scroll-cue 2.4s var(--ease-in-out) infinite;
}

@keyframes scroll-cue {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(300%); }
}

/* ───────────────────────────────────────────────────────────────────────────
   H3 · INTRODUCTION
   ─────────────────────────────────────────────────────────────────────────── */

.intro__figure {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
}

@media (min-width: 900px) {
  /* Slightly taller than its column, as specified. */
  .intro__figure {
    margin-block: calc(var(--sp-6) * -1) 0;

    /* The pin itself, repeated here rather than left to .sticky-col.
       That utility lives in @layer layout and this rule in @layer sections,
       and a later layer wins whatever the specificity - so the
       `position: relative` above was quietly overruling the utility's
       `position: sticky` and the portrait scrolled away like anything else.
       The offset still comes from the utility. */
    position: sticky;
  }

  /* The portrait is pinned while the copy scrolls past it, so it has to be
     shorter than the window: a sticky box taller than the screen has nowhere
     left to stick to and simply scrolls away with everything else. Capping the
     height is what guarantees that on a laptop screen as well as a tall one,
     and it is what buys the pin its travel - the shorter the portrait, the
     longer it stands still beside the text.

     Both sides are stated, and that matters. With only a height, the 4/5 ratio
     takes over the other side and narrows the picture to 455px inside a 498px
     column - leaving the ornate frame and the caption, which do fill the
     column, drawn around nothing. The img inside covers rather than stretches
     (02-base.css), so the crop is the picture's, not the layout's. */
  .intro__figure .ar-portrait {
    width: 100%;
    height: min(76svh, 700px);
  }
}

.intro__figure .frame-caption {
  position: relative;
  z-index: 3;
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border-top: 0;
  background: linear-gradient(180deg, transparent, rgba(7, 6, 5, .92));
  margin-top: -3.4rem;
}

.intro__pillars { margin-top: var(--sp-3); }

/* ───────────────────────────────────────────────────────────────────────────
   H4 · COLLABORATORS "SANGAT"
   ─────────────────────────────────────────────────────────────────────────── */

.sangat__rail {
  margin-top: var(--sp-7);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
  /* Mask the edges so items enter and leave rather than being cut. */
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.sangat__rail::-webkit-scrollbar { display: none; }
.sangat__rail.is-dragging { cursor: grabbing; }

.sangat__track {
  display: flex;
  gap: clamp(var(--sp-5), 4vw, var(--sp-8));
  padding-inline: var(--gutter);
  width: max-content;
}

/* Names, not portraits (see the note in index.php). Each one is a plate:
   a hairline card with the name in the display face and the role beneath it. */
.sangat__item {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--sp-2);
  width: clamp(190px, 20vw, 250px);
  min-height: 128px;
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--ink-800) 55%, transparent);
  transition: border-color var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}

.sangat__item:hover {
  border-color: var(--hairline-hot);
  background: var(--ink-800);
  transform: translateY(-4px);
}

/* A mizrab at the top edge, so the row reads as a strung line of plates. */
.sangat__item::before {
  content: '';
  position: absolute;
  top: calc(var(--dot) / -2);
  left: 50%;
  width: var(--dot);
  height: var(--dot);
  background: var(--ink-850);
  border: 1px solid var(--gold-600);
  transform: translateX(-50%) rotate(45deg);
  transition: background-color var(--dur) var(--ease-out);
}

.sangat__item:hover::before { background: var(--gold-500); }

/* The portrait square.
   Square rather than round, and large enough to be a picture rather than an
   avatar: these are the faces the credits are about. Every plate has one,
   filled or not, so the names below them all sit on the same line. */
.sangat__portrait {
  display: block;
  width: clamp(108px, 9vw, 132px);
  aspect-ratio: 1 / 1;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--hairline);
  filter: grayscale(92%);
  transition: filter var(--dur) var(--ease-out);
}

/* The picture inside fills the square and crops to it, so a portrait shot in
   any shape sits the same way as every other. */
.sangat__portrait > * {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

/* The placeholder is a quiet square, not a hole: no border of its own - the
   wrapper already draws one - and none of the grayscale warming on hover,
   because there is nothing there to warm. */
.sangat__portrait .img-missing {
  border: 0;
  border-radius: inherit;
}

.sangat__item:hover .sangat__portrait { filter: grayscale(0); }

.sangat__name {
  font-family: var(--ff-display);
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.3125rem);
  line-height: 1.2;
  color: var(--ivory-100);
  text-wrap: balance;
}

.sangat__role {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ivory-500);
}

.sangat__note {
  margin-top: var(--sp-6);
  text-align: center;
  color: var(--ivory-500);
}

.sangat__note a { color: var(--gold-500); }

/* ───────────────────────────────────────────────────────────────────────────
   H5 · RELEASES
   ─────────────────────────────────────────────────────────────────────────── */

.releases__more { margin-top: var(--sp-8); }

/* ── The typographic sleeve, used when a release has no cover artwork ──── */

.sleeve {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--ink-700), var(--ink-850) 72%);
  overflow: hidden;
}

/* A hairline frame inset from the edge, like a printed sleeve. */
.sleeve::before {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid var(--hairline);
  pointer-events: none;
}

.sleeve__rule {
  width: 44px;
  height: 1px;
  background: var(--grad-gold);
}

.sleeve__type {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--gold-500);
}

.sleeve__title {
  max-width: 14ch;
  font-family: var(--ff-display);
  font-size: clamp(1.375rem, 1.1rem + 1.4vw, 2rem);
  line-height: 1.1;
  color: var(--ivory-100);
  text-wrap: balance;
}

.sleeve__deva {
  font-size: .9375rem;
  color: var(--ivory-500);
}

.sleeve__meta {
  font-size: var(--fs-micro);
  letter-spacing: .08em;
  color: var(--ivory-500);
}

.sleeve__dot {
  width: var(--dot);
  height: var(--dot);
  margin-top: var(--sp-2);
  background: var(--gold-600);
  transform: rotate(45deg);
}

.card:hover .sleeve::before { border-color: var(--hairline-hot); }

.card__listen {
  display: inline-flex;
  align-items: center;
  /* Tight, because each mark already carries a 44px target around it and two
     of those side by side are far enough apart without help. */
  gap: var(--sp-1);
}

/* The words that introduce the marks. Set as meta - the platform is the
   information here, not the invitation - so it reads quietly beside them. */
.card__listen-label {
  margin-right: var(--sp-2);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ivory-500);
  white-space: nowrap;
}

/* A 44px target, still, with the mark inside it large enough to be read as the
   platform it is rather than as a smudge (§14).

   The size is set HERE, as a font-size, and that is not a stylistic choice:
   .icon is `width: 1em; height: 1em` (02-base.css), so an icon takes its size
   from the font-size it inherits and the width/height on the <svg> tag are
   overruled by that rule every time. The foot sets --fs-micro, 12px, which is
   what these marks were being drawn at no matter what number the template
   asked for. */
.card__listen a {
  display: grid;
  place-items: center;
  width: var(--touch);
  height: var(--touch);
  margin-block: calc(var(--sp-2) * -1);
  font-size: 26px;              /* the mark's size - see the note above */
  color: var(--ivory-300);
  transition: color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

.card__listen a:hover,
.card__listen a:focus-visible {
  color: var(--gold-400);
  transform: translateY(-2px);
}

/* In a narrow column the words are the first thing to go: the marks and their
   aria-labels still say everything, and a wrapped two-word label would cost
   the card a line. The container query matches the card body's (05-components
   .css), because these cards appear at three different widths. */
@container (max-width: 280px) {
  .card__listen-label { display: none; }
}

/* ───────────────────────────────────────────────────────────────────────────
   H6 · SHOWREEL
   ─────────────────────────────────────────────────────────────────────────── */

.showreel {
  position: relative;
  min-height: clamp(420px, 78vh, 820px);
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: clip;
  background: var(--ink-950);
}

.showreel__still {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
}

.showreel__still img { width: 100%; height: 100%; }

.showreel__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(7, 6, 5, .5), rgba(7, 6, 5, .2) 40%, rgba(7, 6, 5, .88));
}

.showreel__ghost {
  top: clamp(var(--sp-5), 5vw, var(--sp-8));
  left: 50%;
  transform: translateX(-50%);
  opacity: .6;
  font-size: clamp(6rem, 18vw, 16rem);
}

.showreel__play { z-index: 2; }

.showreel__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(var(--sp-5), 5vw, var(--sp-8));
  z-index: 2;
}

.showreel__caption h2 { margin-bottom: var(--sp-2); }

/* ───────────────────────────────────────────────────────────────────────────
   H7 · CONCERTS "BAITHAK"
   ─────────────────────────────────────────────────────────────────────────── */

.concert-list {
  border-top: 1px solid var(--hairline);
}

.concert-row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    'date where'
    'date time'
    'status cta';
  gap: var(--sp-3) var(--sp-5);
  align-items: center;
  padding: var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--hairline);
  transition: background-color var(--dur) var(--ease-out);
}

@media (min-width: 900px) {
  .concert-row {
    grid-template-columns: 108px minmax(0, 1fr) auto auto auto;
    grid-template-areas: 'date where time status cta';
    gap: var(--sp-6);
    padding-inline: var(--sp-5);
  }
}

/* A row with footage gives it its own area: a line of its own on a phone,
   and the stretch between the venue and the time on a wide screen. Only
   rows that have some get the area, so the others keep their spacing. */
.concert-row--footage {
  grid-template-areas:
    'date where'
    'date time'
    'footage footage'
    'status cta';
}

@media (min-width: 900px) {
  .concert-row--footage {
    grid-template-columns: 108px minmax(0, 1fr) auto auto auto auto;
    grid-template-areas: 'date where footage time status cta';
  }
}

.concert-row__footage {
  grid-area: footage;
  position: relative;
  z-index: 2;   /* above the link that makes the whole row clickable */
}

/* Three frames to a line: a third of the row each on a phone, where three at
   full size do not fit, and a little smaller where the columns get tight. */
@media (max-width: 899px) {
  .concert-row__footage { --footage-w: calc((100% - var(--sp-2) * 2) / 3); }
}

@media (min-width: 900px) and (max-width: 1199px) {
  .concert-row__footage { --footage-w: 84px; }
}

.concert-row:hover { background: var(--ink-800); }

.concert-row__date {
  grid-area: date;
  display: grid;
  justify-items: start;
  padding-right: var(--sp-5);
  border-right: 1px solid var(--hairline);
  transition: color var(--dur) var(--ease-out);
}

.concert-row__day {
  font-family: var(--ff-display);
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  line-height: 1;
  color: var(--ivory-100);
  transition: color var(--dur) var(--ease-out);
}

.concert-row__month {
  font-size: var(--fs-micro);
  letter-spacing: .18em;
  color: var(--ivory-500);
}

.concert-row__year {
  font-size: var(--fs-micro);
  color: var(--gold-500);
  letter-spacing: .1em;
}

.concert-row:hover .concert-row__day { color: var(--gold-400); }

.concert-row__where { grid-area: where; min-width: 0; }

.concert-row__venue {
  margin: 0;
  font-size: clamp(1.125rem, 1rem + .6vw, 1.375rem);
  line-height: 1.2;
  max-width: none;
}

.concert-row__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.concert-row__city { margin-top: var(--sp-1); }

.concert-row__time { grid-area: time; margin: 0; }
.concert-row__doors { color: var(--ivory-700); }

.concert-row__status { grid-area: status; }

.concert-row__cta {
  grid-area: cta;
  position: relative;
  z-index: 2;
  justify-self: end;
}

/* Sold-out rows are muted and carry the one signal colour on site. */
.concert-row--sold-out { opacity: .68; }
.concert-row--sold-out .concert-row__day { color: var(--ivory-500); }
.concert-row--sold-out:hover .concert-row__day { color: var(--ivory-500); }

/* The 180×120 thumbnail that follows the cursor. */
.concert-row__thumb {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-sticky);
  width: 180px;
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: var(--shadow-pop);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.94);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

.concert-row__thumb.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

@media (hover: none), (pointer: coarse) {
  .concert-row__thumb { display: none; }
}

.concerts__empty .subscribe { margin-top: var(--sp-2); }

/* Programme / ensemble disclosure on the concerts page. */
.concert-row__more {
  grid-column: 1 / -1;
  margin-top: var(--sp-2);
}

.concert-row__more-summary {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--touch);
  font-size: var(--fs-meta);
  letter-spacing: .06em;
  color: var(--ivory-500);
  position: relative;
  z-index: 2;
  transition: color var(--dur) var(--ease-out);
}

.concert-row__more-summary:hover { color: var(--gold-400); }
.concert-row__more[open] .concert-row__more-summary .icon { transform: rotate(180deg); }
.concert-row__more-summary .icon { transition: transform var(--dur) var(--ease-out); }

.concert-row__more-body {
  display: grid;
  gap: var(--sp-5);
  padding: var(--sp-4) 0 var(--sp-2);
}

@media (min-width: 768px) {
  .concert-row__more-body { grid-template-columns: 1fr 1fr; }
}

.concert-row__more-footage { grid-column: 1 / -1; }

/* Footage: frames from a concert, each opening the lightbox. Three small ones
   in a concert row, and all of them, larger, under its disclosure. The
   concert's own page has its gallery carousel instead (07-pages.css). */
.footage {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footage > li { width: var(--footage-w, 104px); }
.footage--lg { --footage-w: 176px; }

@media (max-width: 479px) {
  .footage--lg { --footage-w: calc(50% - var(--sp-1)); }
}

.footage__item {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--ink-850);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-out);
}

.footage__item:hover,
.footage__item:focus-visible { border-color: var(--gold-500); }

.footage__item .picture { width: 100%; height: 100%; }

.footage__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.footage__item:hover img { transform: scale(1.05); }

.footage__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--ink-950) 28%, transparent);
  color: var(--on-action);
}

.footage__play svg {
  box-sizing: content-box;
  padding: 7px;
  border-radius: 50%;
  background: var(--action);
}

.footage__more {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--ink-950) 64%, transparent);
  font-family: var(--ff-display);
  font-size: 1.125rem;
  color: var(--ivory-100);
}

/* ───────────────────────────────────────────────────────────────────────────
   H8 · GALLERY MOSAIC "JHALAK"
   ─────────────────────────────────────────────────────────────────────────── */

.mosaic {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
  grid-auto-rows: minmax(180px, auto);
}

@media (min-width: 900px) {
  .mosaic {
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 200px;
  }
  .mosaic__tile {
    grid-column: span var(--col, 4);
    grid-row: span var(--row, 1);
  }
}

.mosaic__tile { position: relative; }

.mosaic__btn {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--ink-850);
}

.mosaic__img,
.mosaic__btn .picture,
.mosaic__btn img {
  width: 100%;
  height: 100%;
}

.mosaic__btn img {
  transition: transform var(--dur-slow) var(--ease-out);
}

.mosaic__btn:hover img,
.mosaic__btn:focus-visible img { transform: scale(1.06); }

/* A gold hairline inset appearing on hover. */
.mosaic__btn::before {
  content: '';
  position: absolute;
  inset: 10px;
  z-index: 2;
  border: 1px solid var(--hairline-hot);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
  pointer-events: none;
}

.mosaic__btn:hover::before,
.mosaic__btn:focus-visible::before { opacity: 1; }

.mosaic__caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 3;
  padding: var(--sp-7) var(--sp-4) var(--sp-4);
  background: linear-gradient(180deg, transparent, rgba(7, 6, 5, .92));
  font-size: var(--fs-micro);
  line-height: 1.4;
  text-align: left;
  color: var(--ivory-200);
  transform: translateY(101%);
  transition: transform var(--dur) var(--ease-out);
}

.mosaic__btn:hover .mosaic__caption,
.mosaic__btn:focus-visible .mosaic__caption { transform: translateY(0); }

.gallery-preview__more {
  margin-top: var(--sp-6);
  text-align: right;
}

/* ───────────────────────────────────────────────────────────────────────────
   H9 · PRESS "PRASHANSA"
   ─────────────────────────────────────────────────────────────────────────── */

.press__mark { color: var(--gold-500); opacity: .9; }

.press__carousel { margin-top: var(--sp-6); }

.press__pub {
  display: block;
  font-family: var(--ff-display);
  font-size: var(--fs-h4);
  color: var(--ivory-200);
  margin-bottom: var(--sp-1);
}

a.press__pub {
  text-decoration: underline;
  text-decoration-color: var(--hairline-hot);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: color var(--dur) var(--ease-out), text-decoration-color var(--dur) var(--ease-out);
}

a.press__pub:hover,
a.press__pub:focus-visible {
  color: var(--gold-400);
  text-decoration-color: currentColor;
}

.press__author { color: var(--ivory-300); }

/* The separator belongs between a name and a role; with no name there is
   nothing for it to separate. */
.press__author + .press__role::before { content: ' · '; }

/* ───────────────────────────────────────────────────────────────────────────
   H10 · JOURNAL
   ─────────────────────────────────────────────────────────────────────────── */

.journal-list {
  display: grid;
  gap: var(--sp-5);
  border-top: 1px solid var(--hairline);
}

.post-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--hairline);
}

@media (min-width: 640px) {
  .post-row {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: center;
  }
}

.post-row__thumb {
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--ink-850);
}

.post-row__thumb img { transition: transform var(--dur-slow) var(--ease-out); }
.post-row:hover .post-row__thumb img { transform: scale(1.04); }

.post-row__body { display: grid; gap: var(--sp-2); }
.post-row__title { margin: 0; }
.post-row__excerpt { color: var(--ivory-300); max-width: 60ch; }

/* ───────────────────────────────────────────────────────────────────────────
   H11 · BOOKING CTA "AAMANTRAN"
   ─────────────────────────────────────────────────────────────────────────── */

.cta-booking { position: relative; }

.cta-booking__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(900px, 90vw);
  aspect-ratio: 2 / 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--gold-glow), transparent 72%);
  opacity: .5;
  pointer-events: none;
}

.cta-booking__frame {
  position: relative;
  z-index: 1;
  padding: clamp(var(--sp-7), 7vw, var(--sp-10)) var(--gutter);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--ink-850) 72%, transparent);
}

.cta-booking__inner { max-width: 56ch; margin-inline: auto; }
.cta-booking__copy { max-width: 48ch; }
.cta-booking__actions { margin-top: var(--sp-3); }

/* ───────────────────────────────────────────────────────────────────────────
   FOOTER
   ─────────────────────────────────────────────────────────────────────────── */

.footer {
  position: relative;
  padding-top: clamp(var(--sp-8), 8vw, var(--sp-10));
  background: var(--ink-950);
  border-top: 1px solid var(--hairline);
  overflow: clip;
  isolation: isolate;
}

.footer__ghost {
  bottom: -.34em;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
}

.footer__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(var(--sp-6), 5vw, var(--sp-8));
  padding-bottom: clamp(var(--sp-7), 6vw, var(--sp-9));
}

@media (min-width: 640px) {
  .footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .footer__inner { grid-template-columns: 3fr 2fr 2fr 3fr; }
}

.footer__col { display: grid; gap: var(--sp-4); align-content: start; }

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

.footer__statement {
  font-size: var(--fs-meta);
  line-height: 1.7;
  color: var(--ivory-500);
  max-width: 34ch;
}

.footer__heading {
  font-family: var(--ff-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--gold-500);
  max-width: none;
}

.footer__list { display: grid; gap: 2px; }

.footer__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  /* A standalone nav link, not a link inside a sentence - so it takes the
     full 44px target rather than the inline-link exception (§14). */
  min-height: var(--touch);
  font-size: var(--fs-meta);
  color: var(--ivory-300);
  transition: color var(--dur) var(--ease-out);
}

.footer__link:hover,
.footer__link:focus-visible { color: var(--gold-300); }
.footer__link[aria-current='page'] { color: var(--ivory-100); }
.footer__link--icon .icon { color: var(--ivory-500); }

.footer__news-note { max-width: 32ch; }

.footer__legal {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
  padding-block: var(--sp-5);
  border-top: 1px solid var(--hairline);
}

.footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
}

.footer__legal-links a { color: var(--ivory-500); transition: color var(--dur) var(--ease-out); }
.footer__legal-links a:hover { color: var(--gold-400); }

/* ───────────────────────────────────────────────────────────────────────────
   PRINT
   ─────────────────────────────────────────────────────────────────────────── */

@media print {
  .hero { min-height: 0; padding-block: 0 12pt; }
  .hero__media, .hero__scroll, .showreel__play, .cta-booking__glow { display: none; }
  .showreel { min-height: 0; }
  .footer__ghost { display: none; }
}

}