/* =========================================================
   Opening — the home page's first screen.
   Headline and dek sit on the page ground; under
   them the October 7 satellite image is set as a plate on the
   content edge, and widens to full bleed as it scrolls in.
   Follows the product theme (light and dark) from ui.css.
   Self-contained: nothing here overrides the old .hero layers,
   which the Iraq page still uses.
   ========================================================= */

/* ---------- Tokens ---------- */
.opening {
  --opening-display: clamp(2.75rem, 1.5rem + 4.6vw, 6.25rem);
  --opening-dek:     clamp(1.0625rem, 0.96rem + 0.42vw, 1.3125rem);
  --opening-beat:    clamp(var(--s-48), 7vh, var(--s-64));   /* the one vertical interval */
  --opening-radius:  var(--r-xl);
}

/* ---------- Layout ---------- */
.opening {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  column-gap: var(--s-64);
  padding-block: var(--page-top) 0;   /* the page stack owns the space after it */
}
.opening-dateline { grid-column: 1 / -1; }
/* Headline and dek share a last baseline, so the dek's final line sits on the headline's */
.opening-title { grid-column: 1; align-self: last baseline; }
.opening-dek   { grid-column: 2; align-self: last baseline; }
.opening-plate {
  grid-column: 1 / -1;
  margin: var(--opening-beat) calc(50% - 50vw) 0;   /* full bleed; the frame's clip sets the inset */
}

/* ---------- Typography ---------- */
.opening-dateline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--s-8);
  margin: 0 0 var(--s-24);
  font: 500 0.875rem/var(--lh-label) var(--font-body);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.opening-dateline time { color: var(--text); }
.opening-live {
  width: 6px;
  height: 6px;
  margin-right: var(--s-4);
  border-radius: 50%;
  background: var(--pal);
}
.opening-sep { color: var(--text-4); }

.opening-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--opening-display);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  color: var(--text);
}
/* Each line is its own clip box for the entrance; the padding keeps descenders inside it */
.opening-line {
  display: block;
  overflow: clip;
  padding-bottom: 0.14em; /* floor-ignore: optical offset in em, scales with the type it adjusts */
  margin-bottom: -0.14em; /* floor-ignore: optical offset in em, scales with the type it adjusts */
}
/* Optical edge: the E's serifs and the a's bowl sit inside their sidebearings */
.opening-line > span { display: inline-block; margin-left: -0.04em; } /* floor-ignore: optical offset in em, scales with the type it adjusts */

.opening-dek {
  max-width: 32em;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--opening-dek);
  line-height: var(--lh-caption);
  color: var(--text-2);
  text-wrap: pretty;
}
.opening-dek em { color: var(--text); }

.opening-credit {
  padding: var(--s-16) var(--edge) 0;
  font: 400 0.75rem/var(--lh-caption) var(--font-body);
  color: var(--text-3);
  text-wrap: pretty;
}
.opening-firekey {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  margin-right: var(--s-8);
  color: var(--text);
  font-weight: 600;
}
.opening-firekey i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f2d34b;   /* the fire colour in the image itself */
  box-shadow: 0 0 0 1px var(--rule-2);
}

/* ---------- Colour and surface ---------- */
.opening-frame {
  aspect-ratio: 2400 / 959;
  overflow: clip; /* clip, not hidden: hidden makes a scroll container, which captures scroll-driven timelines */
  background: var(--surface-3);   /* holds the shape while the image loads */
  clip-path: inset(0 var(--edge) round var(--opening-radius));
}
.opening-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.opening-credit a {
  color: var(--text-2);
  text-decoration: underline;
  text-decoration-color: var(--rule-3);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  border-radius: 2px;
  transition: color var(--dur-ui) var(--ease-out), text-decoration-color var(--dur-ui) var(--ease-out);
}
.opening-credit a:hover { color: var(--text); text-decoration-color: currentColor; }
.opening-credit a:active { color: var(--text-3); }
.opening-credit a:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* ---------- Motion: the page's one orchestrated moment ----------
   Load, in reading order one stagger apart: the dateline fades; the headline
   lines rise inside their own clip boxes and settle without bounce; the dek
   lifts; the plate fades up last. Scroll: the plate widens from the content
   edge to full bleed. Reduced motion: everything rests in its final place. */
@media (prefers-reduced-motion: no-preference) {
  .opening-dateline        { animation: opening-fade var(--dur-ui) var(--ease-out) both; }
  .opening-line > span     { animation: opening-rise var(--dur-scene) var(--ease-spring-gentle) var(--stagger) both; }
  .opening-line + .opening-line > span { animation-delay: calc(var(--stagger) * 2); }
  .opening-dek             { animation: opening-lift var(--dur-reveal) var(--ease-out) calc(var(--stagger) * 4) both; }
  .opening-plate           { animation: opening-fade var(--dur-reveal) var(--ease-out) calc(var(--stagger) * 6) both; }

  @supports (animation-timeline: scroll()) {
    .opening-frame {
      animation: opening-widen linear both; /* floor-ignore: scroll-driven, progress maps 1:1 to scroll */
      animation-timeline: scroll(root);
      animation-range: 0 55vh;
    }
    .opening-img {
      animation: opening-settle linear both, develop-tone linear both; /* floor-ignore: scroll-driven, progress maps 1:1 to scroll */
      animation-timeline: scroll(root), scroll(root);
      animation-range: 0 55vh, 0 55vh;
    }
  }
}
@keyframes opening-rise   { from { transform: translateY(105%); } to { transform: none; } }
@keyframes opening-lift   { from { opacity: 0; transform: translateY(var(--s-16)); } to { opacity: 1; transform: none; } }
@keyframes opening-fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes opening-widen  { to { clip-path: inset(0 0 round 0); } }
@keyframes opening-settle { from { transform: scale(1.04); } to { transform: none; } }

/* ---------- Responsive ---------- */
/* Below 1200 the dek's column is too narrow to stay shorter than the headline,
   and baseline alignment would push the headline down; stack them instead. */
@media (max-width: 1199px) {
  .opening { grid-template-columns: minmax(0, 1fr); }
  .opening-title, .opening-dek { grid-column: 1; align-self: auto; }
  .opening-dek { max-width: 34em; margin-top: var(--s-24); }
}
@media (max-width: 900px) {
  .opening-frame { aspect-ratio: 2 / 1; }
  .opening-img { object-position: 72% 100%; }
}
@media (max-width: 640px) {
  .opening {
    --opening-display: clamp(2.75rem, 1.2rem + 7.6vw, 3.5rem);
    --opening-beat: var(--s-48);
    --opening-radius: var(--r-lg);
    padding-top: var(--s-48);
  }
  .opening-dateline { font-size: var(--text-xs); }
  .opening-title { letter-spacing: var(--track-display); }
  .opening-frame { aspect-ratio: 4 / 3; }
  .opening-img { object-position: 50% 100%; }

  /* The plate sits below the first screen here, so it widens as it comes into view */
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .opening-frame { animation-timeline: view(); animation-range: entry 30% cover 55%; }
      .opening-img { animation-timeline: view(), view(); animation-range: entry 30% cover 55%, entry 30% cover 55%; }
    }
  }
}

/* =========================================================
   Page opener (--page): the same opening for the other pages.
   Their photographs are 1,000–1,600px wide, too small to run
   full bleed, so the plate sits beside the copy at its native
   quality and settles as it scrolls in instead of widening.
   --below puts a pair of plates under the copy instead.
   ========================================================= */
.opening--page {
  --opening-display: clamp(2.5rem, 1.6rem + 3.4vw, 4.75rem);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr;
  column-gap: var(--s-64);
  align-items: start;
}
.opening--page > :not(.opening-plate) { grid-column: 1; }
.opening--page .opening-title { align-self: auto; }
.opening--page .opening-dek { align-self: auto; max-width: 34em; margin-top: var(--s-24); }
.opening-sources {
  margin: var(--s-16) 0 0;
  font: 400 0.875rem/var(--lh-caption) var(--font-body);
  color: var(--text-3);
  text-wrap: pretty;
}
.opening--page .opening-plate { grid-column: 2; grid-row: 1 / -1; margin: 0; }
.opening--page .opening-frame { aspect-ratio: auto; clip-path: none; border-radius: var(--opening-radius); }
.opening--page .opening-img { height: auto; }
.opening--page .opening-credit { padding: var(--s-12) 0 0; }
/* A document rather than a photograph (the Balfour Declaration): shown in greyscale, as paper, not cream */
.opening-plate--doc .opening-img { --develop-rest: grayscale(1) contrast(1.05); filter: var(--develop-rest); }

/* Two plates under the copy, at equal size (Destruction: both sides of the fence) */
.opening--below { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
.opening--below > :not(.opening-plate) { max-width: 46rem; }
.opening--below .opening-plate { grid-column: 1; grid-row: auto; margin-top: var(--opening-beat); }
.opening-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-16); }
.opening-pair .opening-frame { aspect-ratio: 4 / 3; }
.opening-pair .opening-img { height: 100%; }

@media (prefers-reduced-motion: no-preference) {
  .opening--page .opening-title { animation: opening-lift var(--dur-reveal) var(--ease-out) both; }
  .opening--page .opening-frame { animation: none; }
  @supports (animation-timeline: view()) {
    .opening--page .opening-img {
      animation: opening-settle linear both, develop-tone linear both; /* floor-ignore: scroll-driven, progress maps 1:1 to scroll */
      animation-timeline: view(), view();
      animation-range: entry 0% cover 45%, entry 0% cover 45%;
    }
  }
}

@media (max-width: 900px) {
  .opening--page { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .opening--page .opening-plate { grid-column: 1; grid-row: auto; margin-top: var(--opening-beat); }
}
@media (max-width: 640px) {
  .opening-pair { grid-template-columns: minmax(0, 1fr); }
}

/* The record's way back to its story */
.opening-story { grid-column: 1; display: flex; margin: var(--s-24) 0 0; }
.opening-story a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--s-24);
  border-radius: 999px;
  background: var(--brand);
  color: var(--on-brand);
  font: 600 var(--text-note)/var(--lh-figure) var(--font-ui);
  text-decoration: none;
  transition: transform var(--dur-micro) var(--ease-press), opacity var(--dur-micro) var(--ease-out);
}
.opening-story a:active { transform: scale(var(--press-scale)); }
.opening-story a:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .opening-story a:hover { opacity: 0.88; } }