/* ==========================================================================
   ANRIA Qatar — editorial layout layer
   --------------------------------------------------------------------------
   Loaded after main.css. Everything here exists to move the site off the
   equal-column grid it was built on. The rule of thumb throughout: nothing
   that can be off-centre should be centred, and nothing that can be uneven
   should be even.

   Constraints that still hold:
     · no inline styles, no inline script (strict CSP)
     · reveal states live inside @media (scripting: enabled) so the page
       renders complete with JavaScript blocked
     · every asymmetric offset collapses below 64rem
   ========================================================================== */

:root {
  /* One easing for everything that moves. Decelerating, never linear. */
  --ease-editorial: cubic-bezier(0.16, 1, 0.3, 1);
  --rule-hair: rgba(58, 26, 36, 0.10);
  --rule-hair-dark: rgba(255, 255, 255, 0.09);
  --gold-line: rgba(169, 129, 47, 0.32);
}

/* ---------------------------------------------------------- 1. atmosphere */
/* Flat colour reads as a template. Grain plus two off-axis washes give the
   page depth without adding a single visible gradient band. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("/assets/img/grain.svg");
  background-size: 220px 220px;
  opacity: 0.055;
  mix-blend-mode: multiply;
}
body > * { position: relative; z-index: 1; }

.band-sand,
.band-warm {
  position: relative;
  isolation: isolate;
  /* `clip` on one axis only: it stops the wash below from widening the page
     while still letting story insets and overlapping panels hang vertically.
     `hidden` here would turn these into scroll containers and cut them off. */
  overflow-x: clip;
}
/* Washes bleed vertically past the section edge so no seam lines up with the
   band boundary. Horizontally they stay inside — extending them sideways added
   10% to the page width and broke the layout at every breakpoint. */
.band-sand::before,
.band-warm::before {
  content: "";
  position: absolute;
  inset: -20% 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 44% at 12% 18%, rgba(122, 28, 52, 0.055), transparent 70%),
    radial-gradient(32% 38% at 88% 76%, rgba(169, 129, 47, 0.075), transparent 72%);
}

/* Dark sections carry the lattice as a large, cropped watermark rather than a
   neat repeating tile. */
.band-dark { position: relative; isolation: isolate; overflow: hidden; }
.band-dark::after {
  content: "";
  position: absolute;
  right: -14vw;
  bottom: -30%;
  width: min(62vw, 52rem);
  aspect-ratio: 1;
  z-index: -1;
  background: url("/assets/img/lattice.svg") center / contain no-repeat;
  opacity: 0.07;
  pointer-events: none;
  transform: rotate(-8deg);
}

/* ------------------------------------------------- 2. section index numerals */
/* A running index down the page. Pure CSS counter — no markup, no JS. */
body { counter-reset: sectionIndex; }
.section { counter-increment: sectionIndex; }

@media (min-width: 64rem) {
  .section > .shell { position: relative; }
  /* Sits in the section's own top whitespace, hard-right against the measure.
     Anchoring it outside the shell clipped it off-screen at wide viewports —
     the shell is already at max-width, so there is no room to hang into. */
  .section > .shell::before {
    content: counter(sectionIndex, decimal-leading-zero);
    position: absolute;
    top: clamp(-5.5rem, -4vw, -3rem);
    right: 0;
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 5vw, 6rem);
    line-height: 1;
    letter-spacing: 0.03em;
    color: transparent;
    -webkit-text-stroke: 1px var(--gold-line);
    pointer-events: none;
    user-select: none;
  }
  .band-dark > .shell::before { -webkit-text-stroke-color: rgba(227, 206, 158, 0.28); }
  /* The hero and CTA band are not numbered chapters. */
  .hero > .shell::before,
  .cta-band .shell::before,
  .page-hero > .shell::before,
  .article-hero > .shell::before { content: none; }
}

/* ------------------------------------------------------ 3. headings, off-axis */
/* Nothing centred. The aside drops below the heading baseline and hangs off a
   hairline, the way a standfirst sits in print. */
.section-head--center {
  margin-inline: 0;
  text-align: left;
  max-width: 30rem;
}
.section-head--center .eyebrow { justify-content: flex-start; }

@media (min-width: 64rem) {
  .head-split {
    grid-template-columns: minmax(0, 6.6fr) minmax(0, 4.2fr);
    gap: clamp(2rem, 1rem + 5vw, 6.5rem);
    align-items: start;
  }
  /* Never size a condensed face in `ch` — Oswald's zero is narrow, so 20ch
     collapsed this column to about 200px and broke the heading one word per
     line. Rem keeps the measure predictable across the whole font stack. */
  .head-split > div:first-child { max-width: 34rem; }
  .head-split__aside {
    padding-top: 1.6rem;
    margin-top: 0.7rem;
    border-top: 1px solid var(--rule-hair);
  }
  .band-dark .head-split__aside { border-top-color: var(--rule-hair-dark); }
  /* Push the standfirst down so the two columns never start on the same line. */
  .head-split__aside { transform: translateY(2.2rem); }
}

/* --------------------------------------------------------- 4. hero, asymmetric */
@media (min-width: 62rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 6.8fr) minmax(0, 5.2fr);
    align-items: center;
    gap: 0;
  }
  .hero__grid > div:first-child {
    grid-column: 1;
    grid-row: 1;
    z-index: 2;
    padding-right: clamp(1rem, 4vw, 5rem);
  }
  /* The photograph is a supporting element, not the subject: the video is.
     It used to fill its column and bleed off the right edge of the page,
     which left the footage with nowhere to be seen. Now it is a bounded
     portrait card held to the right, with open video above, below and
     outboard of it. Still off-centre and still overlapping the text column,
     so the composition keeps its asymmetry — it just stopped dominating. */
  .hero__media {
    grid-column: 2;
    grid-row: 1;
    width: clamp(17rem, 25vw, 25rem);
    justify-self: end;
    margin-right: calc(var(--gutter) * -.35);
    margin-left: 0;
  }
  .hero__frame { border-radius: var(--r-lg); }
  /* Scaled with the frame — at the old size it would now be over half the
     width of the card it is supposed to be an accent on. */
  .hero__inset {
    left: auto;
    right: 82%;
    bottom: -2rem;
    width: clamp(6rem, 8.5vw, 8.5rem);
    z-index: 3;
  }
}
/* Above ~1600px the column stops growing, so pull the card back in rather
   than letting a gap open between it and the page edge. */
@media (min-width: 100rem) {
  .hero__media { margin-right: 0; }
}

/* The headline is three statements, not one sentence. It was set at 1.02 —
   a display-type convention that suited Fraunces, whose ascenders and
   descenders are long enough to hold lines apart on their own. Fjalla One is
   condensed with short extenders, so at 1.02 the lines very nearly touched.
   1.14 plus a beat between the colour changes gives each statement its own
   air without loosening it into body copy. */
.hero__title { line-height: 1.14; }
.hero__title span + span { margin-top: 0.1em; }
.hero__title span:nth-child(3) { margin-top: 0.22em; }

/* Hairline that runs under the hero copy and out to the page edge. */
.hero__lead { position: relative; }
@media (min-width: 62rem) {
  .hero__lead::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1.4rem;
    width: 42%;
    height: 1px;
    background: linear-gradient(90deg, var(--gold-line), transparent);
  }
}

/* ------------------------------------------------- 5. uneven content grids */
/* The single biggest change: no set of cards sits on a shared baseline. */
@media (min-width: 64rem) {
  .cards--3 {
    grid-template-columns: 1.12fr 0.94fr 1.02fr;
    align-items: start;
    column-gap: clamp(1rem, 0.4rem + 1.4vw, 2.1rem);
  }
  .cards--3 > *:nth-child(3n + 2) { margin-top: 4.25rem; }
  .cards--3 > *:nth-child(3n + 3) { margin-top: 1.6rem; }
  /* A feature card takes the full left run and pulls the next card down. */
  .cards--3 .card--feature { grid-column: span 2; margin-top: 0; }

  .cards--2 { grid-template-columns: 1.18fr 0.9fr; align-items: start; }
  .cards--2 > *:nth-child(2n) { margin-top: 3rem; }
}

@media (min-width: 62rem) {
  .wwd {
    grid-template-columns: 1.18fr 0.92fr 1fr;
    align-items: start;
  }
  .wwd > *:nth-child(2) { margin-top: 3.6rem; }
  .wwd > *:nth-child(3) { margin-top: 1.2rem; }
}

@media (min-width: 52rem) {
  .pillars { grid-template-columns: 1.14fr 0.92fr 1.04fr; align-items: start; }
  .pillars > *:nth-child(2) { margin-top: 3.2rem; }
  .pillars > *:nth-child(3) { margin-top: 1.1rem; }
}

/* Statistics become a measured band with hairline rules, not four boxes. */
@media (min-width: 62rem) {
  .stats {
    grid-template-columns: 1.42fr 1fr 1fr 1.2fr;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--rule-hair);
    border-bottom: 1px solid var(--rule-hair);
    border-radius: 0;
    gap: 0;
  }
  .stat {
    background: transparent;
    border-left: 1px solid var(--rule-hair);
    padding-block: clamp(2rem, 1rem + 2.4vw, 3.25rem);
  }
  .stat:first-child { border-left: 0; padding-left: 0; }
  .stat:hover { background: transparent; }
  .stat:first-child .stat__value { font-size: clamp(3.2rem, 2rem + 3.4vw, 5rem); }
}

/* Values and differentiators: uneven columns, hairlines instead of a box. */
@media (min-width: 64rem) {
  .values, .diff {
    grid-template-columns: 1.1fr 0.95fr 1.05fr;
    background: transparent;
    border: 0;
    gap: 1px;
  }
  .value, .diff__item {
    background: transparent;
    border-top: 1px solid var(--rule-hair);
    padding-inline: 0 clamp(1rem, 2vw, 2.4rem);
  }
  .value:hover, .diff__item:hover { background: transparent; }
  .diff__item:nth-child(3n + 2) { margin-top: 2.4rem; }
  .team { grid-template-columns: repeat(4, 1fr); align-items: start; }
  .team > *:nth-child(4n + 2) { margin-top: 2.6rem; }
  .team > *:nth-child(4n + 4) { margin-top: 1.4rem; }
}

/* Mission / vision: overlapping panels rather than two matched boxes. */
@media (min-width: 62rem) {
  .mv { grid-template-columns: 1.06fr 0.94fr; align-items: start; }
  .mv__card:first-child { z-index: 2; }
  .mv__card:last-child { margin-top: 4.5rem; margin-left: -3.5rem; }
}

/* Story blocks: media overlaps the text column instead of sitting beside it. */
@media (min-width: 62rem) {
  .story { grid-template-columns: 1.02fr 1.14fr; align-items: center; gap: 0; }
  .story__media { margin-left: -6%; }
  .story--reverse .story__media { margin-left: 0; margin-right: -6%; }
  .story > div:first-child { padding-right: clamp(1.5rem, 4vw, 4rem); z-index: 2; }
  .story--reverse > div:last-child { padding-left: clamp(1.5rem, 4vw, 4rem); }
}

/* ------------------------------------------------------------ 6. hairlines */
.card,
.pillar,
.wwd__card,
.quote-card,
.team__card,
.mv__card {
  border-color: var(--rule-hair);
}
.band-dark .card,
.band-dark .pillar { border-color: var(--rule-hair-dark); }

/* A single gold hairline that draws itself across the top of a card on hover. */
.card, .pillar, .wwd__card, .team__card { position: relative; }
.card::before,
.pillar::before,
.wwd__card::after,
.team__card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent 70%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease-editorial);
  pointer-events: none;
  z-index: 3;
}
.card:hover::before,
.card:focus-within::before,
.pillar:hover::before,
.wwd__card:hover::after,
.team__card:hover::before { transform: scaleX(1); }

/* ---------------------------------------------------------- 7. scroll motion */
@media (scripting: enabled) {
  /* Sections lift in as a unit; children stagger inside them. */
  [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
    transition:
      opacity 0.9s var(--ease-editorial),
      transform 1.05s var(--ease-editorial);
    transition-delay: var(--reveal-delay, 0ms);
  }
  [data-reveal="right"] { transform: translate3d(-34px, 0, 0); }
  [data-reveal="scale"] { transform: translate3d(0, 26px, 0) scale(0.972); }
  [data-reveal="fade"] { transform: none; }
  [data-reveal].is-in { opacity: 1; transform: none; }

  /* Headings wipe up behind their own edge rather than simply fading. */
  .section-head h2,
  .head-split h2 {
    clip-path: inset(0 0 110% 0);
    transition: clip-path 1.15s var(--ease-editorial);
    transition-delay: 60ms;
  }
  [data-reveal].is-in .section-head h2,
  .section-head[data-reveal].is-in h2,
  .head-split[data-reveal].is-in h2 { clip-path: inset(-25% -10% -10% -2%); }
}

/* Scroll progress — a gold hairline across the very top of the viewport. */
.scroll-rail {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 120;
  pointer-events: none;
  background: transparent;
}
.scroll-rail__fill {
  height: 100%;
  width: 100%;
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  background: linear-gradient(90deg, var(--maroon), var(--gold-bright));
}

/* ------------------------------------------------------------- 8. mobile */
/* Every offset above is desktop-only; below 64rem the page is a clean stack.
   Asymmetry is a large-screen luxury, not something to inflict on a phone. */
@media (max-width: 63.99rem) {
  .cards--3 > *, .cards--2 > *, .wwd > *, .pillars > *,
  .diff__item, .team > *, .mv__card:last-child {
    margin-top: 0;
    margin-left: 0;
  }
  .story__media, .story--reverse .story__media { margin-left: 0; margin-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .section-head h2, .head-split h2 { clip-path: none !important; transition: none !important; }
  .scroll-rail { display: none; }
  .card::before, .pillar::before, .wwd__card::after, .team__card::before { transition: none; }
}

/* Drift is applied via a custom property so it composes with existing
   transforms instead of overwriting them. */
.has-drift { transform: translate3d(0, var(--drift, 0px), 0); will-change: transform; }
@media (prefers-reduced-motion: reduce) { .has-drift { transform: none; } }

/* ------------------------------------------------- hero photo cross-fade */
/* The framed photograph cycles. Slides are stacked in the same grid cell so
   the frame never changes height, and only opacity animates — the one property
   the compositor can handle without touching layout. */
.hero__frame[data-hero-slideshow] { display: grid; }
.hero__shot {
  grid-area: 1 / 1;
  display: block;
  opacity: 0;
  transition: opacity 1.6s var(--ease-editorial);
  will-change: opacity;
}
.hero__shot.is-active { opacity: 1; }
.hero__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* A very slow drift on the active slide, so a still photograph does not sit
   completely dead between fades. */
@media (prefers-reduced-motion: no-preference) {
  .hero__shot.is-active img { animation: heroDrift 18s var(--ease-in-out) infinite alternate; }
}
@keyframes heroDrift {
  from { transform: scale(1.005); }
  to   { transform: scale(1.055); }
}

/* With motion reduced the first slide simply stays put. */
@media (prefers-reduced-motion: reduce) {
  .hero__shot { transition: none; }
  .hero__shot:first-child { opacity: 1; }
  .hero__shot:not(:first-child) { opacity: 0; }
  .hero__shot img { animation: none; transform: none; }
}

/* No JavaScript: show the first slide rather than an empty frame. */
@media (scripting: none) {
  .hero__shot:first-child { opacity: 1; }
}