/* Photo header for the landing page (V1 Editorial).
   The page opens with the Oxford photo as an inset rounded card: the menu sits on
   the photo, the headline sits in the flat sky on the left, and one thin line is
   drawn across the sky as the page loads. Everything is scoped to .hero--photo and
   the two header modifiers, so the old flat hero and the country pages are untouched.

   ---- The two numbers to change if the photo is ever swapped ----
   1. The crop. assets/header-oxford.jpg is box (1816, 0, 8256, 3622) of the 8256x6192
      original "photo for the header.jpg" — the left 22% cut away, the top 58.5% kept.
      That box is exactly 16:9, and so is the card, so nothing is cropped at any width.
   2. The lines, and the two silhouettes they hide behind. All four paths live in the
      page's <svg viewBox="0 0 1200 675">, which maps one-to-one onto the photo, so every
      number in them is a place in the picture. The one <mask> holds two black shapes,
      both traced off the photograph column by column and both used by the long line
      alone: the far building — roofs, spire, tree, and the blurred stone at the bottom
      left — which ends at x 690, and the rotunda, the near mass, from its left edge at
      x 714 up over the dome. That is the whole depth trick: the long line runs behind
      the college and behind the rotunda, and the rotunda is what it ends inside.
      Nothing drawn reaches the menu's band any more. The line that did — hl-1, out
      through the top between «Ціни» and FAQ — has been taken off, and the long one had
      already stopped inside the rotunda, so the clearance that used to be re-checked in
      both languages on every menu-label change is gone with it. The two lines that stay
      keep their old names, hl-2 and hl-3.
      A new photograph needs all four paths traced again. */

.hero--photo {
  --gutter: 24px;          /* cream showing around the card */
  --radius: 40px;          /* same as the dark section and the final call to action */
  --veil: .08;             /* cream laid over the whole photo, to warm it to the page */
  --wash: .72;             /* cream under the menu, so the links stay readable */
  --hero-accent: var(--terracotta);
  --hero-line: var(--terracotta);

  padding: var(--gutter) 0 0;
  margin-bottom: 96px;
}

/* ---------- The card ---------- */
.hero-card {
  container-type: inline-size;   /* text sizes below are in cqw, so they track the photo */
  position: relative;
  margin: 0 var(--gutter);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;              /* this is what clips both ends of the line */
  background: var(--cream-2);
}
.hero-card picture img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  /* Lifted blacks and a touch of warmth, so the stone sits next to the cream page */
  filter: brightness(1.03) contrast(.94) saturate(1.08) sepia(.06);
}
/* Cream veil over everything, and a stronger one fading down from under the menu.
   The layers stack by z-index: photo 0, veil and wash 1, line 2, menu 3, words 4. */
.hero-card::before,
.hero-card::after { content: ''; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.hero-card::before { top: 0; bottom: 0; background: var(--cream); opacity: var(--veil); }
.hero-card::after  { top: 0; height: 32%; background: linear-gradient(rgba(246,241,232,var(--wash)), rgba(246,241,232,0)); }

/* ---------- The lines ---------- */
/* Two of them, both the same 2px line — the depth comes from the mask, not from the
   drawing. .hl-2 is the one that goes behind the college roofs and then behind the
   rotunda, where it ends; .hl-3, the corner sweep, stays in front of everything. Both
   silhouettes hl-2 hides behind live in the page's <mask>. */
.hero-line { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
/* Direct children only. The silhouette inside <mask> is a <path> too, and it has to
   keep its fill — styling it like a line turns the mask into a hairline and the
   ribbon stops going behind anything. */
.hero-line > path {
  fill: none;
  stroke: var(--hero-line);
  stroke-width: 1.72;      /* user units: reads as 2px at a 1440 window, and thins with the photo */
  stroke-linecap: round;
}
/* Drawn once on load, one after another. Without .anim (reduced motion) they are
   simply already there. --len is each path's own measured length. */
.anim .hero-line > path {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  animation: hero-line-draw var(--dur) var(--ease) var(--delay) forwards;
}
/* Delays are unchanged from when there were three, so the pair still draws in the
   order and at the moments it always did — the header now simply starts at .70s
   instead of .45s, because the line that opened it is gone. */
.hero-line .hl-2 { --len: 1019; --dur: 2s;   --delay: .70s; }   /* measures 1011 */
.hero-line .hl-3 { --len: 454;  --dur: .9s;  --delay: 1.35s; }  /* measures  446 */
@keyframes hero-line-draw { to { stroke-dashoffset: 0; } }

/* ---------- The menu, on the photo ---------- */
/* Same markup and same spacing as the cream bar; only the background is gone. */
.hdr--on-photo {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  background: none; backdrop-filter: none;
}
.hdr--on-photo.is-scrolled { box-shadow: none; }   /* the shadow belongs to the cream bar */
/* The menu keeps the ordinary .wrap. Because the card is inset by exactly the same
   24px on both sides, a .wrap inside it lands on the very same column as a .wrap on
   the page — so the links do not shift when the cream bar takes over. */

/* The cream bar takes over once the card has scrolled past. It is fixed and hidden
   until then, so it costs no space and never shows up twice. */
.hdr--float {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  visibility: hidden;
  box-shadow: 0 1px 0 rgba(42,29,20,.1), 0 10px 30px -18px rgba(42,29,20,.35);
}
.past-hero .hdr--float { visibility: visible; }

/* ---------- The words ---------- */
/* Also a .wrap, for the same reason: the headline starts on the page's own column. */
/* The block sits midway between the logo above it and the line below it. At 11%, where
   it started, it hung off the menu: measured at a 1440 window there were 24px above it
   and 100px of sky under it before the line. 15.3% splits that — the two gaps come out
   within about 9px of each other from 1280 to 1600, and the line never comes closer than
   35px to a letter (that nearest point is the right-hand end of the standfirst's second
   line, not the button, and it is the number to re-check if the standfirst is rewritten
   longer). It is a percentage of the card, so it tracks the photo rather than the text. */
.hero-text { position: absolute; z-index: 4; left: 0; right: 0; top: 15.3%; }
.hero--photo h1, .hero--photo .hero-sub { max-width: 44cqw; }
.hero--photo .mono { display: block; color: var(--hero-accent); }
.hero--photo h1 {
  font-size: 3.45cqw; line-height: 1.03; letter-spacing: -0.02em;
  margin: 12px 0 14px;
}
.hero--photo h1 em { color: var(--hero-accent); }
.hero--photo .hero-sub { margin: 0 0 16px; font-size: 16px; line-height: 1.5; max-width: 36cqw; }
.hero--photo .hero-text .btn { width: fit-content; }
.hero--photo .btn { background: var(--hero-accent); }

/* ---------- The brown version ---------- */
/* Everything terracotta becomes ink; the line drops to a whisper. */
[data-hero="brown"] .hero--photo {
  --hero-accent: var(--ink);
  --hero-line: rgba(42, 29, 20, .35);
}

/* The words rise into place with the rest of the hero (animations.css does the
   eyebrow and the headline; these two are new here). */
.hero-load .hero--photo .hero-sub { animation: rise .9s var(--ease) .55s both; }
.hero-load .hero--photo .btn      { animation: rise .9s var(--ease) .7s both; }

/* The photo carries the top of the page now, so the section below it starts closer,
   and jumping to a section has to clear the fixed cream bar. */
.hero--photo + .intro { padding-top: 0; }
.anim section[id] { scroll-margin-top: 100px; }