/* ==========================================================================
   Home page — section geometry transcribed from Figma "Home - Page" 461:16270
   Canvas 1920 x 14479.  Section offsets:
     hero        0      → 2018
     wines       2018   → 3378   (1360)
     territory   3378   → 7586   (4208 of a 4547 frame; Experience overlaps)
     experience  7586   → 11489  (3903)
     journal     11489  → 13918  (2429)
     footer      13918  → 14480  (562)
   ========================================================================== */

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

/* ==========================================================================
   1. HERO
   ========================================================================== */
/* --u is the hero's own unit.  It equals 1rem at the 1920 x 1080 design
   ratio and shrinks on shorter windows so the film, the wordmark and the
   frog always land inside the first screen instead of being cropped by the
   fold.  --drop is how much the film lost, which the copy below it slides up
   by so no gap opens between the film and the manifesto. */
.hero {
  --u: min(1rem, 0.9259259vh);
  --drop: min(0rem, calc(0.9259259vh - 1rem));
  position: relative;
  height: calc(201.8rem + 108 * var(--drop));
  background: var(--c-page);
}

/* Frog film — 1920 x 1080 at top 0 */
.hero__media {
  position: absolute;
  left: 50%;
  top: 0;
  width: 100vw;
  max-width: none;
  height: calc(108 * var(--u));
  transform: translateX(-50%);
  object-fit: cover;
  object-position: center bottom;
  z-index: var(--z-hero-media);
}

/* ÉZOUSA wordmark — 1920 x 712 at top 220, multiply.

   The wordmark is full bleed at the client's request: its glyphs run edge to
   edge of the SVG box, so a 100% width puts the É and the A against the two
   sides of the screen at any width.  That is what Figma draws at exactly
   1920 x 1080 (192 * --u == 100%); it stops being true only on a shorter
   window, where --u shrinks the rest of the hero, so the width is pinned to
   the viewport instead of scaling with --u.

   `top` is the wordmark's centre rather than its top edge, which keeps it at
   53.3% of the film height — where Figma puts it — while the height follows
   the width.  The min() caps the width at the point where the wordmark would
   grow taller than the film (291.2 == 108 / 0.370833), so an ultrawide window
   centres it inside the film instead of spilling out of it. */
.hero__wordmark {
  position: absolute;
  left: 50%;
  top: calc(57.6 * var(--u));
  width: min(100%, calc(291.2 * var(--u)));
  height: auto;
  max-width: none;
  transform: translate(-50%, -50%);
  mix-blend-mode: multiply;
  z-index: var(--z-hero-mark);
  pointer-events: none;
}

/* Scroll pill — left 1635, top 911 */
/* "A winery rooted in place" — centred, top 1131 */
.hero__eyebrow {
  position: absolute;
  left: 50%;
  top: calc(113.1rem + 108 * var(--drop));
  transform: translateX(-50%);
  color: var(--c-black);
  text-align: center;
  white-space: nowrap;
  z-index: var(--z-content);
}

/* Manifesto paragraph — left 65, top 1235, 1707 wide */
.hero__manifesto {
  position: absolute;
  left: 6.5rem;
  top: calc(123.5rem + 108 * var(--drop));
  width: 170.7rem;
  z-index: var(--z-content);
}

/* ==========================================================================
   2. FEATURE WINES SLIDER  (Figma 47:152)
   ========================================================================== */
.wines {
  position: relative;
  height: 136rem;
  background: var(--c-page);
  overflow: hidden;
}

/* Colour band — 1920 x 824 at top 0 */
.wines__band {
  position: absolute;
  left: 50%;
  top: 0;
  width: 100vw;
  height: 82.4rem;
  transform: translateX(-50%);
  background: var(--c-giannoudi);
  transition: background-color 0.9s var(--ease-inout),
              height 0.9s var(--ease-inout);
}

/* The closing slide is the one panel with nothing standing on the page below
   the band — no bottle, no copy, only the button — so the band takes the whole
   screen there and the pour reaches the bottom edge.

   It used to stop at its 824px like every other state, on the reading that the
   design leaves a thin strip at the bottom.  That only holds at the 900px-tall
   viewport the frame was drawn at: the band is a fixed height while the screen
   is not, so at 1080 the "thin strip" was 256px of page colour under the
   picture.  Asked for by the client, and it travels with the colour on the
   same 0.9s clock so the dark grows into the screen rather than snapping. */
.wines.is-closing .wines__band {
  height: 100vh;
  height: 100svh;
}

/* On the last panel the band goes to black, and the black is not empty: the
   pour runs behind it on the same 0.9s clock the colour changes on, graded to
   the overlay menu's treatment — greyscale, luminance at 15% — so it reads as
   the dark having depth rather than as a video playing. */
.wines__film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s var(--ease-inout);
}

.wines[data-wine="end"] .wines__film { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .wines__film { transition: none; }
}

/* Wine-name track — CF Din Condensed Bold 526.222px, #ececec, multiply.
   Names are pinned at their Figma x positions and the whole track slides. */
.wines__names {
  position: absolute;
  left: 0;
  top: 0.2rem;
  height: 60rem;
  width: 0;
  z-index: 1;
  pointer-events: none;
  transition: transform 0.9s var(--ease-inout);
  /* The blend lives on the track, not the names: z-index + transform make
     this element a stacking context, so a mix-blend-mode on a child would
     have no backdrop to find and the name would render as flat #ececec
     instead of darkening the colour band (Figma 47:152). */
  mix-blend-mode: multiply;
}

.wines__name {
  position: absolute;
  top: 0;
  font-family: var(--f-ui);
  letter-spacing: var(--ls-ui);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-wine-name);
  line-height: normal;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-grey-150);
  /* The stand-in face is ~10% wider than CF Din Condensed Bold at this size;
     the squeeze restores the word's designed width (1753px at 1920). */
  transform: translate(calc(-50% + var(--wine-nudge-x)), var(--wine-nudge-y)) scaleX(var(--wine-squeeze));
  transform-origin: 50% 50%;
}

.wines__name--giannoudi { left: 95.85rem; }
.wines__name--xynisteri { left: 289.35rem; }
.wines__name--viognier  { left: 469.9rem; }

/* Bottles ---------------------------------------------------------------- */
/* The stage sits ABOVE the copy (z 4 against the copy's 3) so a bottle
   swinging in or out passes in front of the paragraph rather than being cut
   in half by it — at the client's request.  It keeps `pointer-events: none`,
   so the "Discover" link underneath is still clickable through it. */
.wines__stage {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.wines__bottle {
  position: absolute;
  transform-origin: 50% 50%;
  transition: transform 0.9s var(--ease-inout), opacity 0.9s var(--ease-inout);
}

.wines__bottle img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Active bottle geometry (Figma 47:123 / 72:1211) */
.wines__bottle--giannoudi { left: 50%; top: 3.3rem; width: 40.3rem; height: 86.3rem; margin-left: -20.15rem; filter: drop-shadow(-3rem 2.5rem 4rem rgba(0,0,0,0.3)); }
.wines__bottle--xynisteri { left: 50%; top: 3.3rem; width: 40.3rem; height: 86.3rem; margin-left: -20.15rem; filter: drop-shadow(-3rem 2.5rem 4rem rgba(0,0,0,0.3)); }
.wines__bottle--viognier  { left: 72.5rem; top: -2.5rem; width: 45.8rem; height: 97.9rem; filter: drop-shadow(-3rem 2.5rem 4rem rgba(0,0,0,0.3)); }

/* Parked states — 305 x 653 rotated 30°, off-canvas left / right */
.wines__bottle.is-next  { transform: translateX(140rem) rotate(30deg) scale(0.757); opacity: 1; }
.wines__bottle.is-prev  { transform: translateX(-140rem) rotate(30deg) scale(0.757); opacity: 1; }
.wines__bottle.is-active{ transform: translateX(0) rotate(0deg) scale(1); opacity: 1; }

/* Copy ------------------------------------------------------------------- */
.wines__copy { position: absolute; inset: 0; z-index: 3; }

.wines__panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.55s var(--ease-out), visibility 0s linear 0.55s;
}

.wines__panel.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.55s var(--ease-out) 0.25s, visibility 0s;
}

/* Heading — left 122, top 553, 60px / 70px */
.wines__title {
  position: absolute;
  left: 12.2rem;
  top: 55.3rem;
  width: 75rem;
  font-family: var(--f-editorial);
  font-weight: var(--fw-light);
  font-size: var(--fs-slide-title);
  line-height: var(--lh-slide-title);
  font-variation-settings: 'opsz' 14, 'wdth' 100;
  font-optical-sizing: none;
  color: var(--c-ink);
}

.wines__panel--viognier .wines__title { width: 63.1rem; }

/* Description — left calc(50% + 283.5), top 529, 590 wide */
.wines__desc {
  position: absolute;
  left: calc(50% + 28.35rem);
  top: 52.9rem;
  width: 59rem;
  font-family: var(--f-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink);
}

/* Discover link — Figma has it at left 1242, the paragraph above it at 1243.5,
   and the panel is drawn on a 1920 canvas where those are the same edge.  Past
   1920 they are not: the rem ladder stops growing there, so a left in rem is a
   fixed distance from the left edge while the paragraph's calc(50% + …) keeps
   travelling with the middle of the screen.  At 2048 that had opened a 64px
   gap between them; at 2560 the link had slid behind the bottle with only its
   arrow showing.  It takes the paragraph's own anchor, so the two share an
   edge at every width. */
.wines__link { position: absolute; left: calc(50% + 28.35rem); top: 74.8rem; }

/* Meet-our-wines CTA on the closing slide — centred, top 333 */
.wines__cta {
  position: absolute;
  left: 50%;
  top: 33.3rem;
  transform: translateX(-50%);
}

/* 333 is the middle of the 824px band the frame was drawn with.  Now that the
   band takes the whole screen on this slide, the middle moved with it, and a
   fixed 333 would leave the oval riding high — 128px above centre on a
   1080-tall screen.  It centres in the band instead, which is what the narrow
   widths already do. */
.wines.is-closing .wines__cta {
  /* Measured from the screen, not from the copy box: that box is inset 0 of
     the whole 1360px section, so a 50% there lands at 680 — half the section,
     nowhere near the middle of the screen. */
  top: 50vh;
  top: 50svh;
  transform: translate(-50%, -50%);
}

/* Closing (black) slide inverts the slider chrome */

/* ==========================================================================
   3. TERRITORY  (Figma 461:16307)
   ========================================================================== */
.territory {
  position: relative;
  height: 420.8rem;
  background: var(--c-white);
  overflow: hidden;
  /* Territory stacks over the wine slider: the slider stays pinned and this
     section rides up and covers it (Figma prototype 461:16270).  The offset
     that makes that happen is the slider's own height, so js/wine-slider.js
     sets margin-top; this only has to be opaque and paint on top. */
  z-index: 2;
}

/* Valley film — the Figma frame is 1920 x 2249 at top −231, clipped by the
   section, so the visible plate is 1920 x 2018 anchored at the top. */
.territory__media {
  position: absolute;
  left: 50%;
  top: 0;
  width: 100vw;
  max-width: none;
  height: 201.8rem;
  transform: translateX(-50%);
  object-fit: cover;
}

/* White fade over the top of the film — 1920 x 1594 at top 0 */
.territory__fade-top {
  position: absolute;
  left: 50%;
  top: 0;
  width: 100vw;
  height: 159.4rem;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, var(--c-page) 0%, var(--c-page) 5.965%, rgba(252, 252, 252, 0) 100%);
  pointer-events: none;
}

.territory__eyebrow {
  position: absolute;
  left: 11.4rem;
  top: 13rem;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
  z-index: var(--z-content);
}

/* Display statement — left 64, top 215, #a7a7a7 */
.territory__display {
  position: absolute;
  left: 6.4rem;
  top: 21.5rem;
  color: var(--c-grey-500);
  white-space: nowrap;
  z-index: var(--z-content);
}

/* Lead — left 64, top 685, 825 wide, justified */
.territory__lead {
  position: absolute;
  left: 6.4rem;
  top: 68.5rem;
  width: 82.5rem;
  text-align: justify;
  z-index: var(--z-content);
}

/* Dark band: fade-in 1402→2018, solid 2018→2694, fade-out 2671→3287 */
.territory__dark { position: absolute; inset: 0; pointer-events: none; z-index: 2; }

.territory__dark span {
  position: absolute;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  display: block;
}

.territory__dark span:nth-child(1) {
  top: 140.2rem; height: 61.6rem;
  background: linear-gradient(179.7386deg, rgba(0,0,0,0) 0.70107%, rgb(0,0,0) 98.843%);
}
.territory__dark span:nth-child(2) { top: 201.8rem; height: 67.6rem; background: var(--c-black); }
.territory__dark span:nth-child(3) {
  top: 267.1rem; height: 61.6rem;
  background: linear-gradient(-0.2614deg, rgba(0,0,0,0) 0.70107%, rgb(0,0,0) 98.843%);
}

/* Statement over the dark band — left 178, top 2111, 1565 wide */
.territory__statement {
  position: absolute;
  left: 17.8rem;
  top: 211.1rem;
  width: 156.5rem;
  color: var(--c-ink-soft);
  line-height: var(--lh-statement);
  text-align: center;
  z-index: 3;
}

/* Explore button — left 775, top 2667 */
.territory__cta { position: absolute; left: 77.5rem; top: 266.7rem; z-index: 4; }

/* Satellite map — 1925 x 1648 at top 2560.  Internal coordinates are
   expressed relative to the map centre (963, 886) so the composition holds
   at any viewport width. */
.territory__map {
  position: absolute;
  left: 50%;
  top: 256rem;
  width: 100vw;
  height: 164.8rem;
  transform: translateX(-50%);
  background: var(--c-black);
  overflow: hidden;
  z-index: 1;
}

.map__frame { position: absolute; inset: 0; overflow: hidden; }
.territory__facts { position: absolute; inset: 0; pointer-events: none; }
.territory__facts > * { pointer-events: auto; }

.map__layer { position: absolute; inset: 0; }

.map__layer img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: bottom;
}

/* Blurred + dimmed base (Figma "Map - Blur": blur 15px over rgba(0,0,0,.4)).

   The negative inset is not decoration.  `filter: blur()` samples everything
   outside the element as transparent, so the outer ~15px of a blurred layer
   fades out — and with the sharp base sitting underneath, that fade let a
   crisp strip show along the frame's edges.  Bleeding the layer 30px past the
   frame (which clips) puts the soft edge outside the picture. */
.map__layer--blur {
  inset: -3rem;
  filter: blur(1.5rem);
  opacity: 0;
  transition: opacity 0.9s var(--ease-out);
}
.map__layer--blur::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); }

/* The mirrored tail only exists in the stacked layout, where the facts sit
   BELOW the plate instead of on top of it.  Desktop keeps them overlaid, so
   there is no band to fill. */
.map__layer--tail { display: none; }

/* Three layers, bottom to top: the map as it is, the blurred-and-dimmed copy
   that washes in over it, and the sharp copy again punched through a circle.

   The circle OPENS.  It starts at 0.31 of its final radius — the same
   fraction the Figma "Circle" node starts at — and grows to r=331 in step
   with the dotted ring below, so the spotlight and the ring are one movement.
   Earlier this ran the other way, the sharp window collapsing from 140% while
   the ring expanded, which read as two contradictory shapes rather than one
   circle opening.

   The base layer is what makes that possible: at rest the blur is invisible
   and the little sharp circle sits on an identical sharp image, so the map
   simply looks like a map — exactly the Figma default variant. */
.map__layer--sharp {
  clip-path: circle(10.3rem at 50% 88.6rem);
  transition: clip-path 1s var(--ease-inout);
}

.territory__map.is-focused .map__layer--blur { opacity: 1; }
.territory__map.is-focused .map__layer--sharp { clip-path: circle(33.1rem at 50% 88.6rem); }

/* Focus ring — 706 x 706 centred on (963, 886) */
.map__ring {
  position: absolute;
  left: 50%;
  top: 88.6rem;
  width: var(--ring-d);
  height: var(--ring-d);
  transform: translate(-50%, -50%) scale(0.31);
  opacity: 0;
  transition: transform 1s var(--ease-inout), opacity 0.7s var(--ease-out);
  pointer-events: none;
}

.territory__map.is-focused .map__ring { transform: translate(-50%, -50%) scale(1); opacity: 1; }

/* Frog pin — 89 x 89 centred on the winery */
.territory__pin {
  position: absolute;
  left: 50%;
  top: 88.55rem;
  width: 8.9rem;
  height: 8.9rem;
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* Map facts — parked off-canvas right (x 1925), slide to x 1294.

   The travel is a transform, not `left`: each card is laid out at its final
   x and pushed 63.1rem (1925 - 1294) to the right until its turn, so the
   slide runs on the compositor and the resting position is exactly the Figma
   one.  Each card has its own ScrollTrigger keyed to its own y, so the three
   arrive one at a time as the map scrolls past (js/animations.js). */
.map-fact {
  --fact-x: 33.15rem;                       /* resting x, right of the centre */
  position: absolute;
  left: calc(50% + var(--fact-x));
  width: var(--fact-w);
  color: var(--c-white);
  opacity: 0;
  z-index: 3;
  /* parked at x 1925 whatever the resting x is, so all three enter together
     from off-canvas right */
  transform: translateX(calc(96.25rem - var(--fact-x)));
  transition: transform 0.8s var(--ease-out), opacity 0.5s var(--ease-out);
}

.map-fact.is-in { transform: none; opacity: 1; }

/* The three points arc around the ring, and the block they make is centred on
   it.  The home map is where this shape was set and the other two follow it.

   Vertically: the tops are 29.2rem apart, and the first sits 29.2rem + half the
   last card's height above the ring's centre, which puts the middle of the
   whole block on the middle of the circle.  The last card's height is the only
   per-scene number here, because the copy is the only thing that differs.

   Horizontally: x is the ring's own horizontal reach at the point's NEAREST
   INK — its bottom line if it sits above the centre, its top if below, the full
   radius if it straddles — plus a shared 8rem standoff.  Nearest ink is what
   makes the arc symmetric: the first and last points come out close to each
   other and the middle one steps out, which is the circle's own curve.
   Anchoring on the ICON instead looks right on paper and is wrong on screen —
   the icon sits at the top of its card, so the top card's icon is high on the
   ring where the reach has collapsed and the bottom card's is only halfway
   down.  That leans the whole group instead of bowing it, and it forces a huge
   standoff to keep the top card's sentence off the ring, which pushes all three
   away from the circle they are supposed to be hugging. */
.map-fact--location { top: 52.8rem;  --fact-x: 38.37rem; }
.map-fact--vineyard { top: 82rem;    --fact-x: 43.3rem; }
.map-fact--altitude { top: 111.2rem; --fact-x: 35.12rem; }

.map-fact__icon { display: block; }
.map-fact--location .map-fact__icon { width: 3rem;   height: 4.2rem; }
.map-fact--vineyard .map-fact__icon { width: 4.2rem; height: 4.2rem; }
.map-fact--altitude .map-fact__icon { width: 3.7rem; height: 2.6rem; }

/* The gap under the icon is the shared token, so this scene, the Terrain frog
   and the sustainability marks present a point identically. */
.map-fact__body {
  margin-top: var(--fact-gap);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
}

.map-fact__body b { font-weight: var(--fw-extrabold); display: block; text-transform: uppercase; }

/* ==========================================================================
   4. EXPERIENCE  (Figma 461:16323)
   ========================================================================== */
.experience {
  position: relative;
  height: 390.3rem;
  background: var(--c-white);
  overflow: hidden;
}

/* Winery illustration film — 1920 x 1278 at top 2625 */
.experience__media {
  position: absolute;
  left: 50%;
  top: 262.5rem;
  width: 100vw;
  max-width: none;
  height: 127.8rem;
  transform: translateX(-50%);
  object-fit: cover;
}

/* Decorative plate stacks span the whole band; they must not swallow the
   hover/---click targets that sit underneath them. */
.gallery { position: absolute; inset: 0; pointer-events: none; }
.gallery__item { pointer-events: auto; }

.gallery__item {
  position: absolute;
  overflow: hidden;
}

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

/* Experience gallery — origin left 85, top 111 */
.experience__gallery .gallery__item:nth-child(1) { left: 8.5rem;  top: 11.1rem;  width: 85.5rem; height: 104.7rem; }
.experience__gallery .gallery__item:nth-child(2) { left: 98rem;   top: 11.1rem;  width: 52.3rem; height: 26.2rem; }
.experience__gallery .gallery__item:nth-child(3) { left: 98rem;   top: 41.3rem;  width: 85.5rem; height: 104.7rem; }
.experience__gallery .gallery__item:nth-child(4) { left: 41.7rem; top: 119.8rem; width: 52.3rem; height: 26.2rem; }

/* Display statement — left 70, top 1620, #eaeaea */
.experience__display {
  position: absolute;
  left: 7rem;
  top: 162rem;
  color: var(--c-grey-200);
  white-space: nowrap;
  z-index: var(--z-content);
}

/* Editorial paragraph — left 70, top 2140, 1750 wide */
.experience__copy {
  position: absolute;
  left: 7rem;
  top: 214rem;
  width: 175rem;
  z-index: var(--z-content);
}

/* Our manifest button — left 775, top 2950 */
.experience__cta { position: absolute; left: 77.5rem; top: 295rem; z-index: var(--z-content); }

/* ==========================================================================
   5. JOURNAL  (Figma 461:16275)
   ========================================================================== */
.journal {
  position: relative;
  height: 242.9rem;
  background: var(--c-page);
  overflow: hidden;
}

.journal__heading {
  position: absolute;
  left: 6.5rem;
  top: 8.9rem;
  font-family: var(--f-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-display-md);
  line-height: normal;
  letter-spacing: var(--ls-display-md);
  text-transform: uppercase;
  color: var(--c-ink);
}

.journal__intro {
  position: absolute;
  left: 6.5rem;
  top: 18.7rem;
  width: 56rem;
}

/* Post list — left 711, 1144 wide */
.journal__list {
  position: absolute;
  left: 71.1rem;
  top: 8rem;
  width: 114.4rem;
  list-style: none;
  z-index: var(--z-content);
}

.journal__row { position: absolute; left: 0; width: 100%; height: 16.7rem; }
.journal__row:nth-child(1) { top: 0; }
.journal__row:nth-child(2) { top: 20rem; }
.journal__row:nth-child(3) { top: 41.6rem; }
.journal__row:nth-child(4) { top: 62.4rem; }

.journal__title  { position: absolute; left: 0; top: 0; }
.journal__meta   { position: absolute; left: 0; top: 10.2rem; }
.journal__excerpt{ position: absolute; left: 0; top: 13.7rem; width: 56rem; }

.journal__rule { position: absolute; left: 71.1rem; width: 114.4rem; }
.journal__rule:nth-of-type(1) { top: 26.9rem; }
.journal__rule:nth-of-type(2) { top: 48.1rem; }
.journal__rule:nth-of-type(3) { top: 68.7rem; }

/* Journal gallery — origin left 85, top 1000 */
.journal__gallery .gallery__item:nth-child(1) { left: 8.5rem;  top: 100rem;   width: 85.5rem; height: 104.7rem; }
.journal__gallery .gallery__item:nth-child(2) { left: 98rem;   top: 100rem;   width: 52.3rem; height: 26.2rem; }
.journal__gallery .gallery__item:nth-child(3) { left: 98rem;   top: 130.2rem; width: 85.5rem; height: 104.7rem; }
.journal__gallery .gallery__item:nth-child(4) { left: 41.7rem; top: 208.7rem; width: 52.3rem; height: 26.2rem; }

/* Reduced motion: the map jumps straight to its informative state. */
.territory__map.is-static .map__layer--blur,
.territory__map.is-static .map__layer--sharp,
.territory__map.is-static .map__ring,
.territory__map.is-static .map-fact { transition: none; }

/* The monochrome strips do not swell from their middle — each is pinned by one
   corner and opens away from it, and the two in a collage mirror each other:
   the upper one climbs out of its bottom-left corner towards the top right,
   the lower one falls out of its top-right corner towards the bottom left.
   js/animations.js drives the scale; the corner it turns about is here. */
[data-grow="bottom-left"] { transform-origin: 0% 100%; }
[data-grow="top-right"]   { transform-origin: 100% 0%; }