/* =========================================================================
   v6 — THE RISING PANELS
   The scroll rig, promoted to the build. This is the mechanic on its own,
   with placeholder copy only: no real content has been written for it yet.

   style.css still supplies the foundation — colour tokens, the type scale,
   the buttons and the hero. Everything below the hero is here.

   THE MECHANIC
   Each panel is a screen tall with a coloured block behind it that is far
   TALLER than the panel and hangs down over everything that follows. The
   next panel owns a block of its own which, being later in the document,
   paints over the one before. The join you see between them is that
   block's curved top edge. Nothing is animated and nothing is pinned —
   ordinary scrolling brings each panel up over the last.

   Two conditions, both easy to break by accident:
     1. Panels must NOT clip vertically, or a block cannot reach past its
        own panel. They clip sideways only.
     2. Content must sit on a layer above its own block.
   ====================================================================== */

/* THE ARC COLOURS
   Every ground is white; these are the colours of the drawn dome edges, and
   nothing else on the page uses them. So they only have to do two things:
   be distinguishable from each other in sequence, and be visible as a 3px
   line on white.

   Panel 02 was #FFFFFF, which left its arc white on white and its join
   unmarked — five arcs for six panels. It takes the logo orange, which
   makes the first arc anyone sees the brand's own colour. At 4.10:1 on
   white it reads clearly as a line; it would not have been usable as TYPE
   at that ratio, which is why the orange panel below it still uses the
   deeper tone.

   The tokens are numbered in the order they were written, not the order
   they appear: Threats and Impact swapped, so the forest now lands on
   Impact and the deep ember on Threats. Read the panel's own style
   attribute to see which colour it takes. Doing it that way round keeps
   each name honest — --p3 is still the forest — rather than leaving a
   token called forest holding a red.

   The two oranges now sit next to each other, with the forest after them
   instead of between: Threats reads as the darker end of the brand orange
   the panel above it opens with, and the green arrives on Impact, which is
   the one section on the page with something good to report. */
:root {
  /* the soft corner, used by every rectangle on the page: the buttons and
     the photographs both take it, so the two read as one family */
  --soft: 6px;

  /* how far the hero's photograph reaches into the panel below. Declared
     here rather than on .hero because that panel has to allow for it. */
  --spill: clamp(140px, 22vh, 280px);

  --p1: #06231A;   /* canopy — hidden under the hero's spill */
  --p2: #D4551F;   /* the logo orange */
  --p3: #0B8043;   /* forest */
  --p4: #A83D12;   /* ember, the deep one */
  --p5: #8B1A1A;   /* brick */
  --p6: #0A3324;   /* canopy 2 */
}

/* ------------------------------------------------------------- the hero */
/* Full height, and the photograph runs on past the bottom edge into the
   panel below. Fading it out at the hero's own edge still read as a line,
   because the fade finished exactly where the hero finished and the eye
   takes that coincidence for a join. Letting the picture leave the hero
   removes the coincidence: there is no longer an edge and a fade in the
   same place. */
.hero {
  min-height: 100vh;
  min-height: 100svh;          /* a collapsing phone bar must not crop it */
  overflow: visible;           /* style.css clips it; the spill needs out */
  z-index: 2;                  /* nav is 80, overlays higher, so this is safe */
}
.hero .hero__media { bottom: calc(-1 * var(--spill)); }
/* the fade belongs to the photograph, so it travels with it and finishes
   inside the green rather than at the boundary */
.hero .hero__media::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--spill) + clamp(90px, 16vh, 200px));
  z-index: 1;
  /* the panel below is the same forest as the hero, so the spill arrives at
     that colour and there is nothing left to read as a join */
  background: linear-gradient(180deg,
    rgba(6, 35, 26, 0) 0%,
    rgba(6, 35, 26, .55) 45%,
    #06231A 92%);
  pointer-events: none;
}
/* the spill is the transition now; the hero's own curve would be a second
   one doing the same job */
.hero > .seam { display: none; }

/* ----------------------------------------------------------- the panels */
.panel {
  position: relative;
  /* min-height, not height: the panel grows when its drawer opens */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;            /* sideways only: the block must reach past */
  overflow-y: visible;
  color: var(--ink);
}

/* The block. Taller than its own panel on purpose.

   The dome is drawn by the WASH alone now — there is no stroke. The curve
   still comes from border-radius, which clips the background to it, so the
   edge you see is where the tint stops rather than a line laid over it.
   Because each block covers the one before, what is left on screen is a
   white page with a coloured arc of colour washing down at every join.

   The tint starts at the top of the block, which is the apex of the dome,
   and fades out to white below it.

   Two things learned the hard way. A var() is accepted in color-mix's
   COLOUR slot but REJECTED in its percentage slot, so the 15% cannot be a
   custom property — it invalidated the whole declaration. And the white is
   set as background-COLOR with the gradient layered over it as
   background-IMAGE: written as one `background` shorthand, that single
   invalid token took the white floor down with it and the body's dark
   canopy showed through every panel on the page.

   The fade is set in vh, not a percentage. A percentage is measured against
   the block's own 320vh height, so the wash would still be going at the
   foot of the screen; 58vh ends it just over half a screen below the arc
   whatever the panel is doing. */
.panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 320vh;
  z-index: 0;
  background-color: #fff;
  background-image: linear-gradient(180deg,
    color-mix(in srgb, var(--c) 15%, #fff) 0px,
    #fff 58vh);
  /* a cap of radius half the viewport is exactly a half circle across a
     full-width box, and stays one at every width */
  border-radius: 50vw 50vw 0 0;
}

/* Each panel names its colour inline in the markup. It was done with
   :nth-of-type once and broke the moment the hero arrived, because
   nth-of-type counts SECTIONS and the hero is one — every panel took the
   colour meant for the panel before it, and the last got none at all.
   Inline is blunt but it cannot drift when the document changes. */


/* ------------------------------------------------- the line on the arc */
/* The sentence is set along the curve of this panel's own dome, so it sits
   in the green of the panel ABOVE and traces the edge that is rising into
   it.

   The path is the same semicircle the dome is cut from: radius half the
   width, sprung from the two top corners. Because the viewBox is 2:1 and
   the box is too, the SVG scales without distorting, so the text keeps its
   proportions at every width and the curve stays exactly on the dome's.

   The whole SVG is then lifted a few pixels off that curve, which is the
   only nudge it needs: the path keeps its radius, so the lift is the same
   at the apex as it is at the two ends, and the words sit just clear of
   the white instead of riding the edge of it. */
.domearc {
  position: absolute;
  /* the lift. Pixels, not a percentage of the panel: it is answering to the
     weight of the type, which does not change with the height of the box */
  top: -7px;
  left: 0; right: 0;
  /* Behind the cards, which climb up through this space. The line has been
     read by the time they reach it, so it does not need to hold precedence
     over them — letting the deck pass in front keeps the depth. */
  z-index: 1;
  aspect-ratio: 2 / 1;
  overflow: visible;        /* the apex sits a little above the panel */
  pointer-events: none;
}
/* the same voice it had as a line of copy: the body serif, light, sentence
   case. It was briefly set in the kicker's style — uppercase, letterspaced,
   heavy — which read as a label rather than as something said.
   The size is in viewBox units and scales with the curve; 2.9 lands at
   roughly the 18px the paragraph had. */
.domearc__t {
  fill: #fff;
  font-family: var(--f-body);
  font-weight: 300;
  font-size: 2.9px;
  letter-spacing: normal;
}
.domearc textPath { dominant-baseline: auto; }

@media (max-width: 720px) {
  /* The arc is far too tight at this width for type to sit on it. The LINE
     still has to appear though: hiding the curve was leaving the panel with
     nothing above it on a phone, and the sentence only existed for screen
     readers. The paragraph that was carrying it for them comes out of
     hiding and is set straight instead of on a curve.

     It is lifted above this panel's own top edge, which is where the dome
     begins, so it lands on the green of the panel above - the same ground
     the curve sat on, and the only one this white type reads against. */
  .domearc { display: none; }

  .domearc + .sr-only {
    position: absolute;
    top: -2.5rem;
    left: 0; right: 0;
    z-index: 1;
    width: auto; height: auto;
    margin: 0; padding: 0 1.5rem;
    overflow: visible;
    clip: auto;
    white-space: normal;
    text-align: center;
    color: #fff;
    font-family: var(--f-util);
    font-weight: 800;
    font-size: .62rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    line-height: 1.4;
  }
}


/* ---------------------------------------------------------- the content */
.pcontent {
  position: relative; z-index: 1;
  /* Sized by its content, not by the panel. It used to hold a full screen
     less the control strip, which pinned the control to the very bottom
     edge and left a long gap between the copy and it. Now the whole column
     — pictures, heading, copy, button, and the control below them — is one
     compact group at the top of the panel.

     The space that leaves at the foot is not waste: it is where the NEXT
     panel's dome rises into view, and where its pictures climb to. */
  flex: 0 0 auto;
  padding: clamp(3.25rem, 7.5vh, 5.5rem) 0 0;
  /* Top-weighted, not centred. With the photographs leading the block, a
     centred group put them a third of the way down and the panel opened on
     empty space; starting at the top means the row is the first thing that
     arrives as the dome rises, which is the point of having it. The gap
     that falls below the copy is where the control sits. */
  display: flex; flex-direction: column; justify-content: flex-start;
  align-items: center;
  text-align: center;
  gap: .55rem;
  width: min(1180px, calc(100% - 3rem));
  margin-inline: auto;
}

.pk {
  margin: 0;
  font-family: var(--f-util);
  font-size: .72rem; font-weight: 800;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ember-deep);
}
.ph {
  margin: 0; max-width: 18ch;
  font-family: var(--f-display);
  font-weight: 800; font-size: clamp(2.2rem, 5vw, 3.8rem);
  line-height: .98; letter-spacing: -.03em;
}
/* For a headline that is a whole sentence rather than a phrase. At the full
   display size a 90-character heading ran to four lines, stood 238px tall,
   and pushed the copy and the button down into the control strip — the panel
   grew past a screen to fit it. A wider measure and a step down in size
   brings it back inside. */
.ph--long {
  max-width: 30ch;
  font-size: clamp(1.75rem, 3.5vw, 2.85rem);
  line-height: 1.04;
}

.pp {
  margin: .35rem auto 0; max-width: 46ch;
  font-family: var(--f-body);
  font-weight: 300; font-size: clamp(1.05rem, 1.2vw, 1.24rem); line-height: 1.55;
  opacity: .75;
}
.pbtn {
  display: inline-block; margin-top: .9rem;
  /* never underlined, whatever element it is written on. A button that is
     marked up as a link inherits the browser's underline, and it read as a
     text link rather than as a button. */
  text-decoration: none;
  font-family: var(--f-util);
  font-size: .74rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  padding: .85rem 1.5rem; border-radius: var(--soft);
  background: var(--brick); color: #fff;
}

/* ---- the bleed panel ----
   The first panel alone keeps a solid ground, and it is the hero's own
   forest. The two colours being identical is the whole point: the dome
   between them has nothing to describe, so the photograph simply continues
   into it. Every other panel is white with a wash.

   It takes the colour flat, with the gradient switched off — a wash here
   would put a lighter band under the hero and give the join the edge this
   arrangement exists to avoid. */
.panel--invert::before {
  background-color: var(--c);
  background-image: none;
}
.panel--invert { color: #fff; }
/* white rather than leaf: 16.6:1 on the canopy, and it holds if this panel
   is ever pointed at a different colour */
.panel--invert .pk { color: #fff; }
.panel--invert .pk::before { background: currentColor; }
/* nothing translucent on a colour — the size carries the hierarchy */
.panel--invert .pp,
.panel--invert .pmore__cols p { opacity: 1; }
/* a brick button on a dark ground is legible, but white reads as the
   primary action here */
.panel--invert .pbtn { background: #fff; color: var(--ink); }

/* This panel is the only one with something painted OVER its top: the hero
   sits at z-index 2 and its photograph spills --spill into here. Content in
   the top of the panel therefore does not scroll off the screen, it
   disappears behind the hero, which happens sooner and reads as a fault.

   So the block starts below the spill, with room to spare, and the heading
   drifts less than it does elsewhere — the two together have to stay clear:
   at 180px of spill and 180px of drift the heading was vanishing while the
   panel was still half in view. */
.panel--invert .pcontent {
  padding-top: calc(var(--spill) + clamp(6.5rem, 14vh, 10rem));
}


/* ---------------------------------------------------------- photographs */
/* Two photographs at the head of each panel, both the same size. An earlier
   version scattered them at different scales and it read as accidental
   rather than composed; identical cards in a row read as a set.

   They are IN THE FLOW at the top of the content block, not positioned
   over the panel. That means they can never collide with the type or the
   control below — the thing that had to be measured for every card before
   — and they reflow on a narrow screen for free.

   THE SHAPE IS THE POINT. Each card is arched: a semicircular cap on
   straight sides, which is the panel's own dome at card size. A very large
   radius on the top two corners is clamped by the browser to half the
   card's width, so it is a true semicircle whatever the card measures, and
   the whole page is then built from one curve at three scales — the dome,
   the card, and the heart in the mark. */
.pshots {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  /* no gap: the cards overlap instead, like a hand fanned out */
  gap: 0;
  margin: 0 0 clamp(.7rem, 1.6vh, 1.3rem);
  padding: 0;
  list-style: none;
  /* The deck rises over the section above, which puts it across that
     section's control. It is decorative and already aria-hidden, so it must
     never swallow a click meant for the button underneath it. */
  pointer-events: none;
  /* the vanishing point the tilts are read against. Set on the row, so both
     cards share one viewpoint and the deck reads as a single object rather
     than two separately-skewed pictures. */
  perspective: 1500px;
}
.pshot {
  margin: 0;
  flex: none;
  width: clamp(150px, 21vw, 312px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  /* the same soft corner the buttons carry, not an arch: the dome is the
     page's curve and repeating it at card size made every photograph read
     as another dome rather than as a picture */
  border-radius: var(--soft);
  background: rgba(20, 33, 27, .06);
}
.pshot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ---- the deck ----
   The two cards lean away from each other about a shared vanishing point
   and overlap at the middle, so they sit at the head of the panel like a
   dealt hand rather than a pair of thumbnails. The origin is the bottom
   edge: they splay from their base, which is how cards actually fan.

   The tilt lives in `transform` and the reveal in `translate`. That split
   is deliberate — these are separate properties that compose, so the cards
   can rise into place without the arriving animation flattening the tilt.
   Writing both as `transform` means whichever runs last wins and the deck
   collapses. */
.pshot {
  transform-origin: 50% 100%;
  box-shadow: 0 22px 44px -20px rgba(20, 33, 27, .42);
  opacity: 0;
  translate: 0 46px;
  transition:
    opacity .9s cubic-bezier(.16, 1, .3, 1),
    translate 1.15s cubic-bezier(.16, 1, .3, 1);
}
.pshot:nth-child(1) {
  transform: rotateX(7deg) rotateY(13deg) rotate(-4deg);
  margin-right: clamp(-3.2rem, -3vw, -1.6rem);
  z-index: 2;
}
.pshot:nth-child(2) {
  transform: rotateX(7deg) rotateY(-13deg) rotate(4deg);
  margin-bottom: clamp(.8rem, 1.8vh, 1.6rem);
}
.is-in .pshot { opacity: 1; translate: 0 0; }
.is-in .pshot:nth-child(1) { transition-delay: .06s; }
.is-in .pshot:nth-child(2) { transition-delay: .14s; }

@media (max-width: 560px) {
  .pshot { width: clamp(124px, 40vw, 190px); }
}

/* ---- a lone card ----
   One panel shows a single photograph. With nothing to fan against, the
   deck's splay reads as a fault: the overlap nudge pushes the card off
   centre and the strong rotateY leans it away from a partner that is not
   there. So it keeps the family's slight tip forward and drops the fan.

   It also takes its shape FROM THE PICTURE rather than from the 4:5 the
   pair share. Two portrait cards side by side fill the head of a panel; one
   portrait card is a narrow column with air either side of it. Letting the
   image set its own height means whatever photograph goes in reads at the
   aspect it was shot at, and it runs wide enough to hold the same footprint
   the pair did. */
.pshot:only-child {
  width: clamp(240px, 44vw, 600px);
  aspect-ratio: auto;
  margin-right: 0;
  transform: rotateX(6deg) rotate(-1.5deg);
}
.pshot:only-child img { height: auto; }

@media (max-width: 560px) {
  .pshot:only-child { width: clamp(200px, 84vw, 420px); }
}

/* ------------------------------------------------- content arriving */
/* Held below its resting place and released when the panel is far enough
   into the viewport, one line after another. The stagger is the whole
   trick: four things moving together read as a block sliding, four things
   moving 90ms apart read as a page assembling.

   Triggered rather than scroll-linked, so a fast flick still gets the full
   arrival rather than a smear. */
[data-anim] {
  opacity: 0;
  transform: translateY(44px);
  transition:
    opacity .85s cubic-bezier(.16, 1, .3, 1),
    transform 1.05s cubic-bezier(.16, 1, .3, 1);
}
.is-in [data-anim] { opacity: 1; transform: none; }
.is-in [data-anim]:nth-child(1) { transition-delay: .06s; }
.is-in [data-anim]:nth-child(2) { transition-delay: .15s; }
.is-in [data-anim]:nth-child(3) { transition-delay: .24s; }
.is-in [data-anim]:nth-child(4) { transition-delay: .33s; }


/* ------------------------------------------------------------- parallax */
/* Each line travels at its own rate as the panel crosses the viewport, so
   the block has depth rather than moving as one slab. The heading shifts
   furthest, the button least.

   This uses the `translate` property, NOT `transform`, on purpose. The
   arrival stagger above animates `transform`; the two are separate
   properties and compose, so a line can be drifting with the scroll and
   arriving at the same time without either cancelling the other.

   Scroll-linked rather than triggered, because parallax has to track the
   scroll to read as depth. Browsers without view() timelines simply get no
   drift, which costs nothing. */
@keyframes prise {
  from { translate: 0 0; }
  to   { translate: 0 calc(-1 * var(--rise)); }
}

@keyframes pdrift {
  from { translate: 0 var(--drift); }
  to   { translate: 0 calc(-1 * var(--drift)); }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* THE PANEL DRIVES EVERYTHING, not each line its own progress.

       `view()` gives every element a timeline of ITS OWN passage, so two
       elements at different heights are at different points at the same
       moment — a shared number still produced different movement and the
       block pulled apart. A named timeline declared on the panel is read by
       all of its descendants, so they share one clock and the group holds
       its shape.

       The cards rise furthest. Everything below them rises too, at a little
       over half the rate: enough that the copy stays tucked under the cards
       instead of being left behind as they climb, while still moving slowly
       enough against them to read as depth. The control is in the same group
       as the copy, so the gap between them never changes and the two can
       never collide. */
    .panel { view-timeline-name: --panelview; }

    .pshots,
    .pk, .ph, .pp, .pbtn, .wlogo, .pmore__btn {
      animation: prise linear both;
      animation-timeline: --panelview;
      /* `cover`, not `entry`..`exit`. These panels are a full screen tall,
         and when the subject is as large as the scrollport the entry and
         exit ranges overlap: progress reached only about 45% of the way
         through, so a 311px rise was delivering 140px and the parallax read
         as far weaker than the numbers said. `cover` spans the whole
         passage, from the panel first touching the viewport to leaving it. */
      animation-range: cover 0% cover 100%;
    }

    /* A rate for each band, and the ONE rule that keeps it safe: the rise
       must never increase as you go DOWN the page. If something lower rises
       further than what sits above it, the gap between them shrinks and
       they eventually meet — which is exactly how the button ended up
       inside the control before. Ordered this way the gaps can only ever
       open, never close, so the text can move against itself freely. */
    .pshots { --rise: clamp(450px, 68vh, 810px); }   /* the pictures, furthest */
    .pk     { --rise: clamp(325px, 49vh, 580px); }
    .ph     { --rise: clamp(245px, 37vh, 435px); }
    .pp,
    .pbtn,
    .wlogo,
    .pmore__btn { --rise: clamp(100px, 15vh, 180px); }

    /* the hero is painted over the top of this panel, so its group moves
       less and cannot ride up behind the photograph */
    /* the same order, scaled down: the hero is painted over the top of this
       panel, so nothing here may ride up far enough to slide behind it */
    .panel--invert .pk { --rise: clamp(165px, 23vh, 275px); }
    .panel--invert .ph { --rise: clamp(115px, 16vh, 190px); }
    .panel--invert .pp,
    .panel--invert .pbtn,
    .panel--invert .wlogo,
    .panel--invert .pmore__btn { --rise: clamp(48px, 7vh, 85px); }
  }
}


/* ========================================================== the drawer */
/* Each panel keeps almost nothing on screen and hides the detail behind a
   'click for more'. Opening it expands the panel downward — everything
   below simply moves down with it, which is why .panel is min-height and
   not height.

   The open/close is a grid-template-rows transition from 0fr to 1fr. That
   is the one reliable way to animate to an unknown, content-defined height:
   max-height guesses a number and either clips tall content or eases
   through empty space, and animating height needs JavaScript to measure.
   The child carries overflow:hidden, which is what makes the 0fr row clip
   rather than spill. */
.pmore {
  position: relative; z-index: 1;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .85s cubic-bezier(.16, 1, .3, 1);
}
.pmore > div { overflow: hidden; }
.panel.is-open .pmore { grid-template-rows: 1fr; }

.pmore__in {
  width: min(1180px, calc(100% - 3rem));
  margin-inline: auto;
  /* a screen's worth of room for the real section content */
  min-height: 78vh;
  padding: clamp(2rem, 5vh, 4rem) 0 clamp(3rem, 6vh, 5rem);
  text-align: left;
}
/* the detail fades up once the drawer has begun opening, so the words are
   not sliding while the box is still growing */
.pmore__in > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s ease, transform .6s cubic-bezier(.16, 1, .3, 1);
}
.panel.is-open .pmore__in > * { opacity: 1; transform: none; }
.panel.is-open .pmore__in > *:nth-child(1) { transition-delay: .26s; }
.panel.is-open .pmore__in > *:nth-child(2) { transition-delay: .34s; }
.panel.is-open .pmore__in > *:nth-child(3) { transition-delay: .42s; }


/* ------------------------------------------------------ donation mosaic */
/* Every way of helping, in one block inside the Donate drawer. Six columns
   with most tiles one column wide and four of them two, so the run breaks
   up rather than reading as a plain grid. Dense packing lets a later narrow
   tile drop into any hole a wide one leaves at a smaller width, so the
   block stays solid instead of stranding a gap.

   Every tile is labelled. An unlabelled photograph is decoration; these are
   fourteen different things a person can actually do, and the label is the
   whole point of showing them.

   Corners take --soft, the same radius as the buttons and the header
   photographs, so the mosaic belongs to the same family. */
.gmos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: clamp(48px, 6vw, 84px);
  grid-auto-flow: row dense;
  gap: clamp(6px, .7vw, 10px);
}
.gmos__i {
  position: relative;
  grid-row: span 2;
  overflow: hidden;
  border-radius: var(--soft);
  background: rgba(20, 33, 27, .08);
}
.gmos__i img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}
.gmos__i:hover img { transform: scale(1.06); }

/* four of them run double width, spread through the run */
.gmos__w { grid-column: span 2; }

/* a scrim under every label: these sit on photography that varies from
   bright sky to dark forest, and white type has to hold on all of it */
.gmos__i::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(6, 35, 26, 0) 40%,
    rgba(6, 35, 26, .58) 70%,
    rgba(6, 35, 26, .9) 100%);
}
.gmos__l {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: clamp(.5rem, .9vw, .8rem) clamp(.55rem, 1vw, .9rem);
  color: #fff;
  text-align: left;
  font-family: var(--f-util);
  font-weight: 800; font-size: clamp(.62rem, .72vw, .74rem);
  letter-spacing: .1em; text-transform: uppercase;
  line-height: 1.25;
}

@media (max-width: 860px) {
  .gmos { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 9vw; }
}
@media (max-width: 560px) {
  .gmos { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 17vw; }
  .gmos__w { grid-column: span 2; }
}

/* ---- the control ---- */
.pmore__btn {
  position: relative;
  /* Above the panel BELOW this one, whose photographs rise up across this
     part of the page. Panel content sits at 1 and later panels paint over
     earlier ones, so at 1 this control was being covered by the next
     section's deck as it climbed. */
  z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  /* Directly beneath the copy now rather than pinned to the panel's foot.
     It was a fixed-height strip at the bottom, which is what put a screen's
     worth of gap between the writing and it. */
  margin: clamp(1.4rem, 3vh, 2.4rem) auto 0;
  padding: 0;
  background: none; border: 0; cursor: pointer;
  font-family: var(--f-util);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: inherit;
}
.pmore__btn svg {
  width: 16px; height: 9px; overflow: visible;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.panel.is-open .pmore__btn svg { transform: rotate(180deg); }
.pmore__btn span {
  border-bottom: 1px solid currentColor;
  padding-bottom: .45rem;
  transition: opacity .25s ease;
}
.pmore__btn:hover span { opacity: .6; }
.pmore__btn:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }

/* the label swaps without the markup having to change */
.pmore__btn .lbl-less { display: none; }
.panel.is-open .pmore__btn .lbl-more { display: none; }
.panel.is-open .pmore__btn .lbl-less { display: inline; }

/* ---- the control, once the drawer is open ----
   TWO THINGS MOVE IT UP, and only one of them was on purpose.

   The parallax is the other one. This control is in the rising group, which
   is right while you are scrolling past a closed panel: it drifts against
   the copy and reads as depth. With the drawer open it is no longer part of
   that passage - it is the full stop at the end of a page of reading - and
   the rise was pulling it as much as 129px UP toward the block above, by an
   amount that changed with the scroll position. So the distance between the
   writing and the control was never the same twice. Held still while open,
   it sits where it is put.

   Then the resting gap itself, which was set for a closed panel where the
   control follows three lines of copy. After a screen of detail it wants
   considerably more air above it. */
.panel.is-open .pmore__btn {
  animation: none;
  translate: 0 0;
  margin-top: clamp(3rem, 7vh, 5.5rem);
  /* and room BELOW it. A closed panel is min-height a screen and the space
     under the control comes free; an open one is sized by its contents, so
     without this the control is the last pixel of the panel and butts
     straight into whatever follows - the footer, in the case of the last
     one. */
  margin-bottom: clamp(2.5rem, 6vh, 4.5rem);
}

/* ---- placeholder detail, until the real writing arrives ---- */
.pmore__h {
  margin: 0 0 1.4rem;
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 1.04; letter-spacing: -.028em;
}
.pmore__cols {
  margin: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.4rem, 3vw, 3rem);
}
.pmore__cols p {
  margin: 0;
  font-family: var(--f-body); font-weight: 300;
  font-size: 1.06rem; line-height: 1.6;
  opacity: .75;
}

@media (max-width: 720px) {
  .pmore__cols { grid-template-columns: minmax(0, 1fr); }
  .pmore__in { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pmore { transition: none; }
  .pmore__in > * { opacity: 1; transform: none; transition: none; }
  .pmore__btn svg { transition: none; }
}

/* a fixed readout of where the scroll is, for talking about the feel.
   Delete the element in the markup to be rid of it. */
.hud {
  position: fixed; right: 12px; bottom: 12px; z-index: 99;
  background: rgba(6, 35, 26, .82); color: #BFE8CC;
  padding: 7px 11px; border-radius: 6px;
  font: 600 11px/1 ui-monospace, Consolas, monospace;
  letter-spacing: .06em; pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-anim] { opacity: 1; transform: none; transition: none; }
}

/* =====================================================================
   THE FOUR STAGES — carried over from canopy5, now living inside the
   What We Do drawer rather than out in a section of its own.

   Unchanged in substance: a list where each row summons its own card, and
   no script behind it. The card sits inside its own list item and is
   positioned against .stagewrap, so `.sl:hover .sl__card` is the whole of
   the wiring; :focus-within gives keyboard users the same thing.

   Two adjustments for its new home. The reserve is shallower, because the
   drawer already opens into a screen's worth of room. And the first row
   loses its top rule, since the drawer has a heading directly above it.
   ===================================================================== */
/* ---- the four, as a stacked list that summons a card ------------------
   The list is the section. Each row is a number over a name and nothing
   else; the picture and the writing live in a card that is not on the page
   until a row is pointed at, and which occupies the empty right-hand half.

   Linking a row to its own card needs no script and no :has(). The card
   sits inside its own list item and is positioned against .stagewrap, so
   `.sl:hover .sl__card` is the whole of the wiring. Keyboard users get the
   same thing through :focus-within, which is why each row is focusable.
   ---- */
.stagewrap {
  position: relative;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  /* The card is out of flow, so the section reserves its height here rather
     than growing and shrinking as the pointer moves. It clears the TALLEST
     card outright rather than the average, so no card can hang past the
     section into whatever follows it. */
  min-height: clamp(600px, 53vw, 740px);
}
/* No position here on purpose. The cards are absolute and must resolve
   against .stagewrap, which spans the full width; making the list a
   containing block would trap every card inside the 390px column. */
.stagelist {
  list-style: none; margin: 0; padding: 0;
  width: min(390px, 38%);
}

.sl { border-top: 1px solid var(--rule); }
.sl:last-child { border-bottom: 1px solid var(--rule); }

.sl__row {
  display: block; cursor: pointer;
  padding: clamp(1.2rem, 2.2vw, 1.9rem) 0;
  outline-offset: 6px;
  transition: padding-left .5s cubic-bezier(.16, 1, .3, 1);
}
.sl__n {
  display: block;
  font-family: var(--f-util); font-weight: 800; font-size: .78rem;
  letter-spacing: .2em; color: var(--ember-deep);
  margin-bottom: .45rem;
  transition: color .35s ease, opacity .35s ease;
}
.sl__t {
  display: block;
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1.08;
  letter-spacing: -.025em; color: var(--ink);
  transition: opacity .35s ease;
}
/* the row steps aside as it is pointed at */
.sl:hover .sl__row,
.sl:focus-within .sl__row { padding-left: clamp(.6rem, 1.4vw, 1.1rem); }

/* everything the pointer is NOT on recedes, so the list has one subject */
.stagelist:hover .sl:not(:hover) .sl__t,
.stagelist:hover .sl:not(:hover) .sl__n { opacity: .32; }

/* ---- the card ------------------------------------------------------
   Four things move at once and none of them at the same speed: it fades,
   it lifts, it comes into focus, and it opens from its own middle. The
   slowest is the picture inside, still settling after the card itself has
   arrived — that lag is what makes it read as something materialising
   rather than a box being switched on.
   ---- */
.sl__card {
  position: absolute;
  top: 0; left: 46%; right: 0;
  z-index: 1;
  background: var(--white);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 30px 60px -22px rgba(20, 33, 27, .3), 0 8px 20px -10px rgba(20, 33, 27, .16);

  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 30px, 0) scale(.965);
  filter: blur(12px);
  /* it opens from its middle outward rather than simply appearing */
  clip-path: inset(16% 0% 16% 0% round 10px);

  transition:
    opacity .46s cubic-bezier(.16, 1, .3, 1),
    transform .78s cubic-bezier(.16, 1, .3, 1),
    filter .46s cubic-bezier(.16, 1, .3, 1),
    clip-path .78s cubic-bezier(.16, 1, .3, 1),
    visibility 0s linear .78s;
}
.sl:hover .sl__card,
.sl:focus-within .sl__card {
  opacity: 1;
  visibility: visible;
  transform: none;
  filter: blur(0);
  clip-path: inset(0% 0% 0% 0% round 10px);
  transition-delay: 0s;
}

.sl__pic { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--wash); }
.sl__pic img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.16);
  transition: transform 1.5s cubic-bezier(.16, 1, .3, 1);
}
.sl:hover .sl__card img,
.sl:focus-within .sl__card img { transform: scale(1); }

.sl__body { padding: clamp(1.4rem, 2.4vw, 2.1rem) clamp(1.5rem, 2.6vw, 2.3rem) clamp(1.7rem, 2.8vw, 2.4rem); }
/* the writing arrives a beat after the card, one line at a time */
.sl__body > * {
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1);
}
.sl:hover .sl__body > *,
.sl:focus-within .sl__body > * { opacity: 1; transform: none; }
.sl:hover .sl__body > *:nth-child(1), .sl:focus-within .sl__body > *:nth-child(1) { transition-delay: .13s; }
.sl:hover .sl__body > *:nth-child(2), .sl:focus-within .sl__body > *:nth-child(2) { transition-delay: .19s; }
.sl:hover .sl__body > *:nth-child(3), .sl:focus-within .sl__body > *:nth-child(3) { transition-delay: .25s; }
.sl:hover .sl__body > *:nth-child(4), .sl:focus-within .sl__body > *:nth-child(4) { transition-delay: .31s; }

.sl__k {
  font-family: var(--f-util); font-weight: 800; font-size: .74rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ember-deep);
  margin: 0 0 .7rem;
}
.sl__h {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.04;
  letter-spacing: -.028em; color: var(--ink); margin: 0;
}
.sl__c {
  font-size: 1.08rem; line-height: 1.55; font-weight: 300;
  color: var(--ink-soft); margin: .9rem 0 0; max-width: 44ch;
}
.sl__w {
  font-family: var(--f-util); font-weight: 700; font-size: .74rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
  margin: 1.1rem 0 0;
}

/* ---- No pointer, no hover. Below this every card is simply open under its
   own row, and each transition that made the reveal is switched off, so a
   touch screen can never be left looking at something stuck half way. ---- */
@media (max-width: 900px) {
  .stagewrap { min-height: 0; }
  .stagelist { width: 100%; }
  .sl__card {
    position: static;
    opacity: 1; visibility: visible; transform: none; filter: none;
    clip-path: none; transition: none;
    box-shadow: none; border-radius: 0;
    margin: 0 0 clamp(1.4rem, 3vw, 2rem);
  }
  .sl__card img { transform: none; transition: none; }
  .sl__body > * { opacity: 1; transform: none; transition: none; }
  .sl__body { padding: 1.3rem 0 0; }
  .sl:hover .sl__row, .sl:focus-within .sl__row { padding-left: 0; }
  .stagelist:hover .sl:not(:hover) .sl__t,
  .stagelist:hover .sl:not(:hover) .sl__n { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .sl__card {
    transform: none; filter: none; clip-path: none;
    transition: opacity .2s linear, visibility 0s linear .2s;
  }
  .sl:hover .sl__card, .sl:focus-within .sl__card { transition-delay: 0s; }
  .sl__card img, .sl__body > *, .sl__row { transition: none; transform: none; }
}


/* ---- the reveal stays up ------------------------------------------
   Hover alone cannot hold a selection: the card vanished the moment the
   pointer left the row, so moving the mouse to read the writing took the
   writing away. A small script marks the pointed-at row .is-active and
   never clears it — it only moves to another row — so what is on screen
   stays until a different stage is chosen.

   The original :hover and :focus-within rules are deliberately left in
   place below. They are the fallback when the script does not run, and
   they cannot double up: whatever is hovered is also what the script has
   just made active. */
.sl.is-active .sl__row { padding-left: clamp(.6rem, 1.4vw, 1.1rem); }

.stagelist.has-active .sl:not(.is-active) .sl__t,
.stagelist.has-active .sl:not(.is-active) .sl__n { opacity: .32; }

.sl.is-active .sl__card {
  opacity: 1;
  visibility: visible;
  transform: none;
  filter: blur(0);
  clip-path: inset(0% 0% 0% 0% round 10px);
  transition-delay: 0s;
}
.sl.is-active .sl__card img { transform: scale(1); }
.sl.is-active .sl__body > * { opacity: 1; transform: none; }
.sl.is-active .sl__body > *:nth-child(1) { transition-delay: .13s; }
.sl.is-active .sl__body > *:nth-child(2) { transition-delay: .19s; }
.sl.is-active .sl__body > *:nth-child(3) { transition-delay: .25s; }
.sl.is-active .sl__body > *:nth-child(4) { transition-delay: .31s; }

/* opening inside a drawer, it needs less reserve of its own */
.pmore__in .stagewrap {
  min-height: clamp(520px, 46vw, 660px);
  margin-top: clamp(1.4rem, 3vh, 2.2rem);
}
.pmore__in .sl:first-child { border-top: 0; }

/* The card has to fit the window whole — picture and writing together —
   without the reader scrolling to finish it. The picture is therefore sized
   in vh rather than by aspect ratio, taking whatever is left once the copy
   beneath it has been allowed for. */
.pmore__in .sl__pic {
  aspect-ratio: auto;
  height: clamp(170px, 38vh, 380px);
}

/* The box stays wide — roughly 2:1 across the card. Sources are expected to
   be landscape to suit it; a near-square photograph will lose its top and
   bottom here rather than the box narrowing to accommodate it. */


/* ------------------------------------------------ the threats, in a drawer */
/* The list itself is canopy4's and needs nothing: style.css is the same file
   here, so .tlist and .threat arrive already dressed for a white ground.
   These are only the adjustments for its new home.

   The top margin went with the section it came from, where it had to clear a
   heading that straddled the join; in here .pmore__in already sets the space.
   The corner takes --soft rather than the 6px it was written with, so if the
   family radius ever moves these pictures move with the buttons and the
   header cards. */
.pmore__in .tlist {
  margin-top: clamp(1.8rem, 4vh, 2.8rem);
  /* CLOSE, NOT SPREAD. Canopy4 set these four a third of a picture apart,
     which reads as four separate cards on a page rather than as one set.
     Everything else in these drawers - the mosaic, the header decks - sits
     nearly edge to edge, and the width the gap gives back goes into the
     photographs. */
  gap: clamp(10px, 1.1vw, 16px);
}
.pmore__in .threat { gap: clamp(.75rem, 1.4vh, 1rem); }

/* FOUR BY FIVE, the same upright crop the header cards take. At 4:3 in a
   270px column each picture was 203px tall - a thumbnail above a paragraph.
   Upright at the same width it is 354px, which is the size at which a
   photograph carries a section rather than illustrating it. */
.pmore__in .threat__pic {
  aspect-ratio: 4 / 5;
  border-radius: var(--soft);
}
/* the lift went with the gift cards: nothing in these drawers rises to meet
   a pointer any more, because nothing in them is clickable. The slow push
   into the frame stays - it is the same move the mosaic tiles make. */
.pmore__in .threat:hover { transform: none; }
.pmore__in .threat:hover .threat__pic img { transform: scale(1.06); }

/* The words were set for a full-page column and are being asked to hold a
   270px one, where 1.12rem runs to about five words a line and the eye has
   nowhere to rest. Everything comes down a step, the rhythm tightens, and
   the key takes the utility face at the size the panel eyebrows use, so the
   four read as a caption block rather than as four small articles. */
.pmore__in .threat__body { gap: .34rem; }
.pmore__in .threat__k {
  font-size: .67rem;
  letter-spacing: .15em;
}
.pmore__in .threat h3 {
  font-size: clamp(1.02rem, 1.28vw, 1.2rem);
  line-height: 1.16;
  letter-spacing: -.015em;
}
.pmore__in .threat__body > p:not(.threat__k) {
  font-size: .94rem;
  line-height: 1.5;
}
.pmore__in .lede { margin: 0; }

/* four across is right in a 1180px drawer, but the drawer is narrower than
   the page was, so the fold to two comes a little earlier */
@media (max-width: 1140px) {
  .pmore__in .tlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------- the impact, in a drawer */
/* The figures are canopy4's and style.css is the same file here, so .stats
   and .stat arrive fully dressed. What does NOT arrive is the colour: those
   rules are written as `.impact .stat__num` and this panel is a .panel with
   an id of impact, not a .impact, so the list would have kept its dark-ground
   palette and put white labels on a white drawer. They are restated here
   against the drawer instead of borrowing the class, because .impact also
   carries the old section's background, padding and flow and none of that
   belongs inside a drawer.

   Three across is the base and stays: it is the shape the six were written
   for, two rows of three. */
.pmore__in .stats { margin-top: clamp(1.8rem, 4vh, 2.8rem); }
.pmore__in .stat__num { color: var(--forest); }
.pmore__in .stat__label { color: var(--ink); }
.pmore__in .stat__desc { color: var(--ink-soft); }
/* the drop shadow under each icon was lifting it off a dark ground; on white
   it reads as grime */
.pmore__in .stat__icon img { filter: none; }

@media (max-width: 1040px) {
  .pmore__in .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .pmore__in .stats { grid-template-columns: 1fr; }
}

/* -------------------------------------------------- what a gift buys */
/* Canopy4's three gift cards, at the head of the Give drawer with the
   fourteen ways to help beneath them. Same story as the stats: style.css
   dresses .gift for a dark ground and the light-ground colours are written
   as `.donate .gift`, which this panel is not, so they are restated here.

   The corner takes --soft like every other rectangle on the page. In
   canopy4 these were organic blobs, then 10px; neither belongs in a drawer
   that already holds a mosaic and a row of header cards at 6px. */
.pmore__in .gifts { margin-top: clamp(1.8rem, 4vh, 2.8rem); }
.pmore__in .gift { color: var(--ink); }
.pmore__in .gift b { color: var(--ink); }
.pmore__in .gift span span { color: var(--ink-soft); }
.pmore__in .gift__pic {
  border-radius: var(--soft);
  background: var(--wash);
}
/* it is a card now, not a link: the lift on hover would promise a click */
.pmore__in .gift:hover { transform: none; }
.pmore__in .gift:hover .gift__pic img { transform: scale(1.04); }

/* the second heading, for the mosaic under the gifts */
.pmore__sub {
  margin: clamp(2.4rem, 5.5vh, 3.6rem) 0 1.1rem;
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  line-height: 1.1; letter-spacing: -.02em;
}

@media (max-width: 620px) {
  .pmore__in .gifts { grid-template-columns: 1fr; }
}

/* ================================================== the mark, and its film */
/* Why Us ends on the mark rather than on a button: the orangutan held in the
   heart, the same file the nav carries beside the wordmark, at several times
   the size it is up there so it reads as the thing you are meant to look at
   rather than as a second logo.

   It has no transform of its own: [data-anim] owns transform for the arrival
   and the parallax owns translate, so a third claim on either would cancel
   one of them. What is left is opacity and a filter, which is plenty. */
.wlogo {
  display: inline-block;
  margin-top: clamp(1.1rem, 2.4vh, 1.8rem);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.wlogo img {
  display: block;
  height: clamp(92px, 10.5vw, 152px);
  width: auto;
  transition: filter .45s ease;
}
.wlogo:hover img,
.wlogo:focus-visible img { filter: brightness(1.14); }
.wlogo:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 10px;
  border-radius: var(--soft);
}

/* ---- the film ----
   THE SWING IS SPLIT ACROSS TWO ELEMENTS, and that is the whole trick. The
   outer box carries the slide in from off the right edge as a TRANSITION, so
   a pointer that enters and leaves quickly reverses smoothly from wherever it
   had got to. The inner span carries the pendulum as an ANIMATION, because a
   damped swing - past the mark, back, past again, smaller each time - is a
   sequence of positions and a transition can only ever describe one move.

   Interrupting is the reason for the split. Take the class off and the
   animation goes with it; the inner span's own rotate transition then carries
   whatever angle it was caught at back to rest, instead of the snap you get
   when an animation is cut off mid-flight.

   The pivot sits ABOVE the top right corner, not on it: the film hangs from a
   grip somewhere off-frame, the way an arm reaches a branch it is not
   standing on. */
.whyfilm {
  position: absolute;
  /* MEASURED OFF THE FOOT OF THE PANEL, not the middle of it. The headline
     here is the long one and runs 877px across a centred 1180px column, so
     there is no clear band beside it at any width worth using: a film in the
     middle of the panel covered the last third of the words. Below them
     there is nothing but the space the next dome rises into.

     The third term in the width is what keeps it there. Tied only to vw, a
     short window would have kept a 470px film — 264px tall — and pushed its
     top back up into the headline, which sits at much the same height
     whatever the window does. Capping the width at 53vh caps the height at
     about 30vh, so the film gets smaller exactly when the room does. */
  bottom: clamp(56px, 8vh, 110px);
  right: clamp(12px, 2.5vw, 40px);
  z-index: 2;
  width: min(38vw, 470px, 53vh);
  translate: 118% 0;
  opacity: 0;
  visibility: hidden;
  transition:
    translate .8s cubic-bezier(.32, 0, .67, 0),
    opacity .3s ease .1s,
    visibility 0s linear .8s;
}
.whyfilm.is-out {
  translate: 0 0;
  opacity: 1;
  visibility: visible;
  transition:
    translate 1s cubic-bezier(.16, 1, .3, 1),
    opacity .3s ease,
    visibility 0s;
}

.whyfilm__sw {
  display: block;
  transform-origin: 84% -14%;
  rotate: 11deg;
  transition: rotate .75s cubic-bezier(.33, 1, .68, 1);
}
.whyfilm.is-out .whyfilm__sw {
  rotate: 0deg;
  animation: brachiate 1.6s cubic-bezier(.36, 0, .34, 1) both;
}
/* three swings, each a little under half the one before, which is roughly
   what a real pendulum loses to the air and to a shoulder */
@keyframes brachiate {
  0%   { rotate: 17deg; }
  26%  { rotate: -7.6deg; }
  45%  { rotate: 3.4deg; }
  62%  { rotate: -1.5deg; }
  78%  { rotate: .7deg; }
  90%  { rotate: -.3deg; }
  100% { rotate: 0deg; }
}

/* the window itself: the same corner and the same crop as every photograph on
   the page, so it belongs with the header cards and the mosaic tiles */
.whyfilm__v,
.dfilm__v {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--soft);
  background: rgba(255, 255, 255, .07);
  box-shadow: 0 34px 64px -26px rgba(0, 0, 0, .75);
}

@media (max-width: 900px) {
  /* no room for it beside the copy, and nothing to hover with */
  .whyfilm { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .whyfilm { translate: 0 0; opacity: 0; visibility: hidden;
             transition: opacity .25s ease, visibility 0s linear .25s; }
  .whyfilm.is-out { opacity: 1; visibility: visible;
                    transition: opacity .25s ease, visibility 0s; }
  .whyfilm__sw,
  .whyfilm.is-out .whyfilm__sw { rotate: 0deg; animation: none; transition: none; }
}

/* ------------------------------------------------- the map, in a drawer */
/* The plate, the pins, the filter chips and the site card are canopy4's and
   the script that drives them is already in main.js: it looks for #mapPins
   and #mapDetail and wires itself up the moment they exist. So this is only
   what has to change about the map's SURROUNDINGS.

   Canopy4 stood the map on a photograph of rainforest, and three things were
   built around that photograph which make no sense without it. The card was
   frosted so the forest read through it - on white that is a blur of
   nothing, so it goes back to being a solid card with a real edge. And the
   card carried a hand-measured nudge, 128px down and 53px left, to line it
   up with a plate that sat differently in that section; in here it simply
   starts level with the plate, which is what the nudge was reaching for.

   The forest itself is not brought across. Every other drawer on this page
   opens onto white, and one that opens onto a full-bleed photograph would
   read as a different site. */
/* THE PLATE SETS THE HEIGHT OF THE WHOLE DRAWER, and it is square: the
   viewBox is 108 by 108, so every pixel of width is a pixel of height. The
   only way to make it shorter is to make it narrower, and the width it loses
   is not lost at all - it goes to the site card beside it, which is the part
   with the reading in it. At .8fr against 1fr the plate comes down from
   627px to 507px, which is 120px off the section for nothing given up. */
.pmore__in .map__grid {
  margin-top: clamp(1.8rem, 4vh, 2.8rem);
  grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
}

/* THE CHIPS ARE CUT TO THE PLATE. They sit in the plate's column, so the row
   has 507px to work in and at canopy4's size it wanted 706 - which is why
   the fourth one used to drop to a second line and cost the drawer a whole
   row of height for one chip.

   Every measurement in a chip had to come down together, not just the type:
   four chips carry eight lots of horizontal padding and three gaps between
   them, so the space around the words was costing nearly as much as the
   words. At .6rem with the padding and the dots tightened to match, the four
   measure 484 and sit on one line with 23px to spare. Wrapping stays ON, so
   a narrow window folds them rather than pushing the drawer sideways. */
.pmore__in .map__filters { gap: .32rem; }
.pmore__in .map__filters .chip {
  font-size: .6rem;
  letter-spacing: .08em;
  padding: .4rem .56rem;
  gap: .32rem;
}
.pmore__in .map__filters .chip .dot { width: 6px; height: 6px; }
.pmore__in .lede { margin: 0; }

.pmore__in .map__detail {
  margin: 0;
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--rule);
  border-radius: var(--soft);
  box-shadow: 0 18px 44px -22px rgba(6, 35, 26, .32);
}
/* the plate was stripped bare to sit on the photograph; on white it wants
   the faintest ground so the island is not floating in the page */
.pmore__in .map__plate {
  background: color-mix(in srgb, var(--forest) 4%, #fff);
  border: 1px solid var(--rule);
  border-radius: var(--soft);
  padding: clamp(.8rem, 1.6vw, 1.3rem);
}
/* the graticule was hidden for the same reason: it disappeared against the
   forest. On a pale plate it is the thing that makes it read as a map */
.pmore__in .map__grat { display: block; }

@media (max-width: 900px) {
  /* the card drops under the plate rather than beside it */
  .pmore__in .map__grid { grid-template-columns: minmax(0, 1fr); }
  .pmore__in .map__plate,
  .pmore__in .map__detail { grid-column: 1; }
  .pmore__in .map__detail { grid-row: 3; margin-top: clamp(1rem, 2.5vh, 1.6rem); }
}

/* --------------------------------------------- the film, filling a drawer */
/* Why Us opens onto the film and nothing else. It takes the same window as
   the one the mark swings out - the shared rule is up with .whyfilm__v, so
   the corner, the crop and the shadow cannot drift apart - and only the
   things that answer to a white ground rather than a dark one are restated
   here.

   THE HEIGHT IS CAPPED, not just the aspect. Sixteen by nine across a 1180px
   drawer is 664px tall, which is fine on a large screen and taller than the
   whole window on a laptop in a browser with a couple of toolbars. The cap
   leaves room for the bar and the control, and because the crop is `cover`
   the film loses a little top and bottom rather than letterboxing. */
.dfilm { display: flex; justify-content: center; }
.dfilm__v {
  background: var(--canopy);
  box-shadow: 0 26px 56px -28px rgba(6, 35, 26, .55);
  /* THE WIDTH IS CAPPED, NOT THE HEIGHT, and the difference matters now
     there is a player on it. Sixteen by nine across a 1180px drawer is 664px
     tall, which is taller than the window on a laptop with a couple of
     toolbars. Capping the height would leave the box wider than the film and
     `cover` would take the top and bottom off it - fine for a silent loop
     behind a heading, not fine for something someone is sitting and
     watching, with a control bar that has to be reachable. Capping the width
     instead derives the largest 16:9 that fits the room there is, so the
     whole frame is on screen and nothing is cropped. */
  width: min(100%, calc((100svh - clamp(150px, 24vh, 240px)) * 16 / 9));
  /* the source is 16:9 and fills this exactly; contain is here so that a
     replacement of some other shape letterboxes on the dark ground rather
     than losing its edges */
  object-fit: contain;
}
/* ---- finger-sized ----
   The site filter chips are 31px tall, which is fine for a cursor and under
   the 44px a fingertip needs. Keyed on the POINTER rather than the width,
   because a tablet in landscape is wide and still touched. */
@media (pointer: coarse) {
  .pmore__in .map__filters .chip { padding: .82rem .78rem; }
}