/* Photography layer: full-bleed heads, banded page titles, in-content figures. */

/* ---------- shared full-bleed frame ---------- */
.bleed{
  position:relative;
  width:100%;
  overflow:hidden;
  background:var(--navy);
  isolation:isolate;
}
.bleed > img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  z-index:0;
}
.bleed .scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  /* Two gradients. Between them the text column still has to come out near
     black — the emphasised red word in the home headline needs 3:1 and that
     red is deep — but only the text column. The earlier pair held .90 or more
     across nearly half the frame and buried the photograph with it. This one
     is just as dark where the words are and then falls away fast, roughly
     doubling how much of each picture you can actually see. */
  background:
    linear-gradient(100deg, rgba(6,10,20,.93) 0%, rgba(6,10,20,.80) 26%,
                    rgba(6,10,20,.30) 54%, rgba(6,10,20,.06) 100%),
    linear-gradient(to bottom, rgba(6,10,20,.58) 0%, rgba(6,10,20,.34) 45%,
                    rgba(6,10,20,.05) 80%, rgba(6,10,20,0) 100%);
}
.bleed .inner{position:relative;z-index:2}
/* Text over a photograph is always light, in either theme. */
.bleed .inner,
.bleed .inner h1,
.bleed .inner h2{color:#F2F5FA}
/* The standfirst over a photograph is a caption, not body copy. It is set
   smaller and tighter than the page's .lede so the eyebrow, headline and
   standfirst read as one block under the title rather than as a paragraph
   drifting away from it. The headline's leading closes up with it. */
.bleed .inner .lede{
  color:rgba(242,245,250,.86);
  font-size:clamp(.98rem,1.28vw,1.12rem);
  line-height:1.4;
}
.bleed .inner h1{line-height:1.02}
/* Not red: at this size it would need 4.5:1, and no red that bright belongs
   in this palette. The light ink carries it, and the red goes to the
   emphasised words in the headline where 3:1 is enough. */
.bleed .inner .eyebrow{color:rgba(242,245,250,.88)}
.bleed .inner .btn.ghost{border-color:rgba(242,245,250,.5);color:#F2F5FA}
.bleed .inner .btn.ghost:hover{border-color:#F2F5FA;background:rgba(242,245,250,.1)}

/* ---------- home hero ---------- */
.hero-photo{
  min-height:clamp(500px,62vh,660px);
  display:flex;align-items:center;
  padding-block:clamp(44px,6vw,72px);
  border-bottom:1px solid var(--rule);
}
.hero-photo .inner{width:100%}
.hero-photo h1{margin-top:12px;max-width:15ch}
.hero-photo h1 em{font-style:normal;color:var(--red-on-dark)}
.hero-photo .lede{margin-top:14px;max-width:58ch}
.hero-photo .go{margin-top:28px;display:flex;gap:10px;flex-wrap:wrap}
.hero-photo .credit{
  position:absolute;right:14px;bottom:10px;z-index:2;
  font-family:var(--f-display);font-size:.6rem;letter-spacing:.06em;
  color:rgba(242,245,250,.5);
}
@media (max-width:760px){
  .hero-photo{min-height:clamp(440px,74vh,600px);align-items:flex-start}
  .hero-photo .scrim{
    background:
      linear-gradient(to bottom, rgba(6,10,20,.90) 0%, rgba(6,10,20,.76) 42%,
                      rgba(6,10,20,.38) 74%, rgba(6,10,20,.12) 100%);
  }
}

/* ---------- banded page title ----------
   Built to the home hero's proportions on purpose: same minimum height, same
   alignment, same padding, same headline scale, same lede measure. An inner
   page and the home page should read as one template, not two. The lede sits
   inside the band rather than in a strip underneath it.

   Aligned to the TOP, not the bottom. Bottom-aligning made the text start at a
   different height on every page, because the headlines are different lengths:
   the History page's four-line title reached almost to the top of the band
   while the Problem page's two-line title left a hole above it. From the top,
   every page's eyebrow begins at the same place and the photograph takes up
   whatever slack is left underneath. */
.pagehead{
  min-height:var(--bandh);
  display:flex;align-items:flex-start;
  padding-block:clamp(48px,6vw,76px);
  border-bottom:1px solid var(--rule);
}
.pagehead .inner{width:100%}
.pagehead .eyebrow{letter-spacing:.22em}
.pagehead h1{
  margin-top:11px;max-width:16ch;
  font-size:clamp(2.2rem,6vw,4.1rem);
}
.pagehead h1 em{font-style:normal;color:var(--red-on-dark)}
.pagehead .lede{margin-top:14px;max-width:54ch}

@media (max-width:760px){
  .pagehead h1{max-width:none}
  .pagehead .scrim{
    background:
      linear-gradient(to bottom, rgba(6,10,20,.91) 0%, rgba(6,10,20,.78) 42%,
                      rgba(6,10,20,.40) 74%, rgba(6,10,20,.14) 100%);
  }
}

/* ---------- in-content figure ---------- */
.shot{margin:0}
.shot img{
  display:block;width:100%;height:auto;
  border:1px solid var(--rule);
  background:var(--surface-2);
}
.shot figcaption{
  margin-top:11px;
  font-family:var(--f-display);font-size:.82rem;font-weight:500;letter-spacing:0;line-height:1.6;
  color:var(--ink-3);
}
.shot figcaption b{color:var(--ink-2);font-weight:500}

/* a figure that sits beside prose */
.shot.aside{margin-top:6px}

/* two photographs that carry a before/after or out/back pairing */
.shotpair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
@media (max-width:640px){ .shotpair{grid-template-columns:1fr} }

/* photo inside a history era, in the right-hand column */
.era .shot img{border-color:var(--rule)}
.era .facts + .shot{margin-top:14px}

/* ---------- wide strip used between sections ---------- */
/* The interstitial photo bands. These were a 260px letterbox sliver, too thin to
   read as a photograph; they are now tall enough to be one. min-height rather
   than height so a line that wraps on a narrow screen can never be clipped, and
   the content is centred rather than sitting at the top edge. */
.strip{
  min-height:clamp(340px,36vw,520px);
  display:flex;align-items:center;
  padding-block:clamp(30px,4vw,48px);
  border-block:1px solid var(--rule);
}
.strip .inner{width:100%}
.strip .line{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.3rem,2.9vw,2.15rem);line-height:1.2;
  max-width:24ch;color:#F2F5FA;letter-spacing:-.02em;
}
.strip .sub{
  margin-top:14px;font-family:var(--f-display);font-size:.8rem;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:rgba(242,245,250,.66);
}