/* ============================================================
   Full-bleed headers.

   Every page used to open with its photograph in a frame: the
   interior pages a 11:10 tile ~490px wide beside the headline,
   the homepage a 2:1 plate under it. The photograph is now the
   header itself — run edge to edge behind the copy, with a
   granite wash carrying white type over it.

   Loads after the page bundle and before mobile.css, because all
   44 bundles redeclare .pagehead, .hero, .hero-grid and .btn-ghost.
   The markup hook is `has-bg` on the <section> plus a
   `<figure class="pagehead-bg">` as its first child; anything
   without both (the /book/ form header) is untouched.

   Shared rules are `section.has-bg`; `.pagehead.has-bg` and
   `.hero.has-bg` carry what the two headers do differently. The
   interior header lights from the left, because its copy sits in
   a left column. The homepage keeps its full-column layout —
   headline across the measure, lede and CTAs on one line under
   it — so it lights from the floor instead.
   ============================================================ */

/* --- The header box ------------------------------------------------- */
/* Copy sits on the floor of the header, breadcrumb at the ceiling, so
   the band of photograph above the headline is the part that reads. */
section.has-bg{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding-top:clamp(1.75rem,3.5vw,2.5rem);
  padding-bottom:clamp(2.75rem,5vw,4.25rem);
  background:var(--granite);
  color:var(--bone);
}
/* The height is what decides whether anyone's head survives. The band crop is
   2.6:1; once the header box is flatter than that, object-fit:cover throws away
   the top and bottom of the photograph, and the people stand in the top third
   of every frame. 40vw keeps the box at 2.5:1 — narrower than the band, so
   nothing is cropped vertically at all — and the 44rem ceiling puts the first
   vertical crop at ~1760px. Above that the loss is small and taken mostly off
   the bottom; see object-position below. */
.pagehead.has-bg{min-height:clamp(26rem,40vw,44rem);}
/* The homepage headline is the largest type on the site and the frame
   behind it is the widest; it earns the extra height. */
.hero.has-bg{min-height:clamp(30rem,50vw,44rem);}

/* width:100% is load-bearing: .wrap carries `margin:0 auto`, and a flex item
   with auto margins on the cross axis is never stretched — it shrinks to fit
   its widest line and the auto margins then centre that. Without this the
   headline floats in the middle of the header instead of sitting on the
   content column. */
section.has-bg > .wrap{position:relative;z-index:2;width:100%;}
section.has-bg > .wrap:last-child{margin-top:auto;}

/* .hero-grid was a two-column split. There is no second column now. */
.pagehead.has-bg .hero-grid{display:block;}
.pagehead.has-bg .hero-grid > div{max-width:44rem;}
/* The lede and the CTAs share a line under the homepage headline; the
   padding under them was spacing for the plate that used to follow. */
.hero.has-bg .hero-foot{padding-bottom:0;}

/* The homepage copy sits in the middle of the frame rather than on its floor.
   The rule above sends every header's copy to the bottom with margin-top:auto;
   adding the matching bottom margin splits the slack in two and centres the
   block vertically. Left alignment is untouched — the wash is still densest
   at the left, which is where the headline reads. Interior headers keep the
   floor: theirs carry a breadcrumb above and much shorter copy. */
.hero.has-bg > .wrap:last-child{margin-bottom:auto;}

/* --- The photograph ------------------------------------------------- */
/* Deliberately over-specific: the bundles set `.gridbg > *{position:relative;
   z-index:1}`, which would put the background in flow above the copy. */
section.has-bg > .pagehead-bg{
  position:absolute;inset:0;z-index:0;margin:0;
  overflow:hidden;pointer-events:none;
}
section.has-bg > .pagehead-bg picture{position:absolute;inset:0;display:block;}
section.has-bg > .pagehead-bg .studio-photo{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:50% 50%;
}
/* Anchor near the top of the band, not the bottom. Wherever the header box is
   flatter than the 2.6:1 crop, cover has to lose a horizontal slice; 58% took
   that slice off the top, which is where the people are — on a 2560px screen it
   cut the heads off three of them. The bottom of the band is the near
   foreground of the projected plan, sitting under the .95 black of the wash, so
   it is the cheap end to lose. 12% leaves a hairline of movement rather than
   pinning the crop hard to the ceiling, and holds every head down to a 5K
   viewport (the crops carry ~15% of headroom above the highest one — see
   tools/build-photos.sh). */
.pagehead.has-bg > .pagehead-bg .studio-photo{object-position:50% 12%;}
/* Same trade on the homepage, gentler: hero-walkthrough-wide is an elevated
   frame, so its heads sit ~29% down and the plan runs to the bottom edge. */
.hero.has-bg > .pagehead-bg .studio-photo{object-position:50% 34%;}

/* The wash on the interior headers. Dense at the left where the headline
   lands, thinning to the right so the studio is still visible as a room;
   a second pass up from the floor so the projected plan — the brightest
   thing in the frame — does not fight the buttons sitting on it. */
.pagehead.has-bg > .pagehead-bg::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(102deg,
      rgba(16,16,16,.94) 0%,
      rgba(16,16,16,.88) 26%,
      rgba(16,16,16,.62) 58%,
      rgba(16,16,16,.34) 84%,
      rgba(16,16,16,.28) 100%),
    linear-gradient(to top,
      rgba(16,16,16,.72) 0%,
      rgba(16,16,16,.20) 42%,
      rgba(16,16,16,0) 68%);
}

/* The homepage copy runs the full column, so its wash comes straight up
   from the floor and leaves the top of the room open. */
.hero.has-bg > .pagehead-bg::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(to top,
      rgba(16,16,16,.95) 0%,
      rgba(16,16,16,.90) 28%,
      rgba(16,16,16,.70) 56%,
      rgba(16,16,16,.40) 86%,
      rgba(16,16,16,.32) 100%);
}

/* Blueprint grid, flipped to the bone ink the .dark sections use, and
   lifted above the photograph — .gridbg::before sits at z-index 0, which
   the figure would otherwise paint over. */
section.has-bg::before{
  z-index:1;
  background-image:
    linear-gradient(var(--grid-bone) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-bone) 1px,transparent 1px);
  -webkit-mask-image:radial-gradient(120% 110% at 15% 0%,#000 30%,transparent 80%);
  mask-image:radial-gradient(120% 110% at 15% 0%,#000 30%,transparent 80%);
}

/* Contour rings: granite at 6% is invisible on a photograph. */
section.has-bg .contour{color:var(--bone);opacity:.11;}

/* The projector sweep runs over the photograph, not the copy. */
section.has-bg > .pagehead-bg .hero-scan{z-index:3;}

/* --- Type on the wash ----------------------------------------------- */
section.has-bg h1{color:var(--bone);}
.pagehead.has-bg h1{max-width:17ch;}
section.has-bg .lede{color:rgba(244,242,238,.88);}
.pagehead.has-bg .lede{max-width:48ch;}
section.has-bg .muted{color:rgba(244,242,238,.78);}
section.has-bg .eyebrow{color:var(--ember-bright);}
section.has-bg .eyebrow::before{background:var(--ember-bright);}
/* The homepage eyebrow starts halfway up the frame, right on the projected
   plan — the brightest thing in the photograph — where ember measures under
   2:1. The flood CTA sets the precedent: on a ground the ember cannot hold,
   the eyebrow goes bone. The interior headers keep ember; theirs sits in a
   left column washed nearly to black. */
.hero.has-bg .eyebrow{color:var(--bone);}
.hero.has-bg .eyebrow::before{background:var(--bone);opacity:.6;}
/* --rule is a hairline meant for bone; on the wash it reads as a bright bar. */
.pagehead.has-bg .hero-meta{color:rgba(244,242,238,.72);border-top-color:rgba(244,242,238,.2);}
.pagehead.has-bg .hero-meta .dot{color:rgba(244,242,238,.34);}

section.has-bg .btn-ghost{color:var(--bone);border-color:rgba(244,242,238,.8);}
section.has-bg .btn-ghost:hover{background:var(--bone);color:var(--granite);border-color:var(--bone);}
section.has-bg .textlink{border-bottom-color:var(--ember-bright);}
section.has-bg .textlink:hover{color:rgba(244,242,238,.85);}

/* Breadcrumb: it used to sit on bone above the header. It reads as part
   of the header now, so it moved inside it. */
.pagehead.has-bg > .crumb{
  z-index:2;padding-top:0;margin-bottom:1.25rem;
  color:rgba(244,242,238,.68);
}
.pagehead.has-bg > .crumb a:hover{color:var(--ember-bright);}
.pagehead.has-bg > .crumb .sep{color:rgba(244,242,238,.3);}

/* Figure caption: a marginal note in the top-right corner, opposite the
   breadcrumb, rather than the dark chip it wore inside the framed slot. */
section.has-bg .ph-tag{
  left:auto;right:var(--pad);top:clamp(1.75rem,3.5vw,2.5rem);bottom:auto;z-index:4;
  display:inline-flex;align-items:center;gap:.5rem;
  color:rgba(244,242,238,.66);
}
section.has-bg .ph-tag::before{
  content:"";flex:none;width:7px;height:7px;border-radius:50%;
  background:var(--ember-bright);
}

/* --- Phones ---------------------------------------------------------- */
/* Below 700px the markup swaps in a portrait crop of the same frame: a
   wide band in a portrait box shows a quarter of its width. Both headers
   light from the floor here — there is no left column on a phone. */
@media (max-width:700px){
  .pagehead.has-bg{min-height:clamp(24rem,84vw,30rem);}
  .hero.has-bg{min-height:clamp(28rem,105vw,36rem);}
  .pagehead.has-bg > .pagehead-bg .studio-photo{object-position:50% 50%;}
  .pagehead.has-bg > .pagehead-bg::after{
    background:
      linear-gradient(to top,
        rgba(16,16,16,.95) 0%,
        rgba(16,16,16,.86) 34%,
        rgba(16,16,16,.58) 62%,
        rgba(16,16,16,.42) 100%);
  }
  .pagehead.has-bg h1{max-width:none;}
  section.has-bg .ph-tag{display:none;}
}