/*****************************************************
PAGE HEADER

The header studio — the dark, typographic header drawn above page content when
a page has `header-image` in its front matter.

Three tiers:  hero (full screen), section (~60vh), banner (~22vh)
Five filters: botanical, sketch, woodcut, etching, photo

Loads:    only on pages with `header-image` in front matter
Used by:  layout/page-header.html
Needs:    base.css tokens (--bg-page-header, --page-header-*)
Not here: the home hero, which is placed in the page body and can carry
          buttons (home.css)

Editing guide:
  - Colors:   Edit the page-header variables in assets/css/base.css
  - Tiers:    Scroll to "Tier" sections to adjust heights and spacing
  - Filters:  Scroll to "Filter system" to adjust image treatments

The accent color (vertical bar + eyebrow text) comes from --accent-primary in
base.css. Override it here inside .page-header if you want a different accent
color just for headers.
*****************************************************/

/* =====================================================
   BASE STRUCTURE
   ===================================================== */

.page-header {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--bg-page-header);
}



/* The photo/image layer — set via inline style from page front matter */
.page-header-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center right;
  opacity: 0.28;
}

/* Mirrored background. For images whose subject sits on the same side as the
   header text: the section tier puts its text on the left, so a figure working
   at the left of a woodcut ends up underneath it. Only this layer is flipped,
   so the title, subtitle and caption stay the right way round. */
.page-header-bg--flip {
  transform: scaleX(-1);
}

/* Subtle grid overlay for visual texture */
.page-header-grid {
  position: absolute;
  inset: 0;
  opacity: 0.025;
  background-image:
    linear-gradient(var(--page-header-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--page-header-grid-line) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Accent color bar along the left edge.
   z-index puts it above the text scrim below, which otherwise washes over it —
   the scrim is at its most opaque exactly where this bar sits. */
.page-header-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--accent-primary);
  z-index: 7;
}

/* Text scrim: a wash of the header's own background color across the side the
   text sits on, fading out before the image's focal point.

   This is the fix for a header whose title and standfirst are hard to read.
   The obvious alternative — turning .page-header-bg opacity down until the
   text reads — dims the picture everywhere, including the two-thirds of the
   header that has nothing on top of it, and on this site that means paying for
   legibility with the only image on the page. A one-sided gradient quiets the
   image only under the type and leaves it at full strength elsewhere.

   The stops are sized to the text column: content is inset about 8rem from the
   left and the subtitle is capped at 580px, so full strength to 28% covers the
   type, and by 62% the linework is back untouched. bg-position defaults to
   "center right", which puts the subject on the side the scrim has let go.

   Banner tier is left out: at 22vh and 0.10 image opacity it carries a single
   line of heading and has no legibility problem to solve. */
.page-header--hero::after,
.page-header--section::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(
    to right,
    var(--page-header-text-scrim) 0%,
    var(--page-header-text-scrim) 28%,
    transparent 62%
  );
}

/* Text content box — sits above the image and grid layers */
.page-header-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 3rem 5rem;
  margin-left: 3rem;
}


/* =====================================================
   TYPOGRAPHY INSIDE PAGE HEADERS

   These rules override the bare h1/p/etc. rules in
   typography.css. No !important needed: .page-header h1
   has higher specificity than h1, and this file loads
   after typography.css.
   ===================================================== */

/* Large serif title — used by hero tier, inherited by section/banner */
.page-header h1 {
  font-family: var(--font-heading);
  font-size: clamp(3rem, 7vw, 5.4rem);
  font-weight: 700;
  color: var(--page-header-title, var(--text-on-dark));
  line-height: 1.05;
  margin-bottom: 0.6rem;
  margin-top: 0;
  text-shadow: var(--page-header-title-shadow);
  text-indent: -0.06em;
  letter-spacing: 0;
}

/* Subtitle paragraph below the title */
.page-header p {
  font-size: 1.4rem;
  color: var(--page-header-subtitle);
  line-height: 1.6;
  font-weight: 300;
  letter-spacing: 0.03em;
  margin-bottom: 0;
  max-width: 580px;
  text-shadow: var(--page-header-subtitle-shadow);
}


/* =====================================================
   TIER: HERO  (full-screen landing pages)
   ===================================================== */

.page-header--hero {
  display: flex;
  align-items: center;
  padding-bottom: 15vh; /* shifts optical center upward from true middle */
}

/* Top scrim: protects nav links on bright or busy images.
   Invisible on dark images; adds just enough shadow on light ones. */
.page-header--hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to bottom, var(--page-header-top-scrim), transparent);
  z-index: 6;
  pointer-events: none;
}

/* Small caps label above the title */
.page-header-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  color: var(--accent-primary);
  text-transform: uppercase;
  margin-bottom: 1rem;
}

/* Decorative divider between title and subtitle */
.page-header-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0 1.5rem;
}

.page-header-divider-line {
  height: 1px;
  width: 60px;
  background: var(--page-header-divider-line);
}

.page-header-divider span {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  color: var(--page-header-divider-text);
  text-transform: uppercase;
}

/* Image caption: sits over the bottom of the hero with a gradient scrim behind it */
.page-header-caption {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 10;
  padding: 1.4rem 1rem 0.45rem 3rem;
  background: linear-gradient(to top, var(--page-header-caption-scrim), transparent);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--page-header-caption);
  text-align: right;
  pointer-events: none;
}

.page-header-caption a {
  color: inherit;
  text-decoration: none;
  pointer-events: auto;
}

.page-header-caption a:hover {
  color: var(--page-header-caption-hover);
}

/* Space between header bottom edge and page content */
.page-header ~ .container {
  margin-top: 3rem;
}


/* =====================================================
   TIER: SECTION  (~60vh, mid-level pages)
   ===================================================== */

.page-header--section {
  height: 60vh;
  padding-bottom: 60px;
}

.page-header--section .page-header-content {
  margin-left: 2rem;
  padding: 2rem 3rem;
  max-width: 40%;
}

/* A section header carrying a subtitle needs room for a paragraph: 40% is
   sized for a title alone and turns prose into a column of two-word lines.
   The subtitle is also smaller than the hero's 1.4rem — this tier is 60vh,
   so a standfirst set at hero size crowds out the image it sits on. */
.page-header--section:has(p) .page-header-content {
  max-width: 58%;
}

/* Full-strength text, not the hero's translucent standfirst: on a session
   page this paragraph carries the session's argument, and it sits over the
   busiest part of a line-art header. --page-header-subtitle is mixed to 82%
   for the hero, which is a shade too faint against hatching. */
.page-header--section p {
  font-size: 1.08rem;
  line-height: 1.55;
  max-width: 46ch;
  margin-top: 0.9rem;
  color: var(--page-header-ink, var(--text-body));
}

/* Smaller title for section tier — overrides .page-header h1 above */
.page-header--section h1 {
  font-size: clamp(2.4rem, 3.2vw, 3.5rem);
  margin-bottom: 0;
  margin-top: 0;
  text-shadow: var(--page-header-section-title-shadow);
}

.page-header--section .page-header-grid {
  opacity: 0.015;
}

.page-header--section .page-header-bg {
  opacity: 0.18;
}

/* Reduce gap between section header and first h2 in page content */
.page-header--section ~ .container h2:first-child {
  margin-top: 1.5rem;
}


/* =====================================================
   TIER: BANNER  (~22vh, internal/utility pages)
   ===================================================== */

.page-header--banner {
  height: 22vh;
  padding-bottom: 0;
}

.page-header--banner .page-header-content {
  margin-left: 2rem;
  padding: 1rem 2rem;
  max-width: none;
}

/* Compact heading for banner tier — uses heading font instead of serif */
.page-header--banner h1 {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-indent: 0;
  margin-bottom: 0;
  margin-top: 0;
}

.page-header--banner .page-header-grid {
  opacity: 0.01;
}

.page-header--banner .page-header-bg {
  opacity: 0.10;
}

.page-header--banner .page-header-bar {
  width: 3px;
}

/* Reduce gap between banner header and first h2 in page content */
.page-header--banner ~ .container h2:first-child {
  margin-top: 1.5rem;
}


/* =====================================================
   FILTER SYSTEM

   Controls how the background image is processed.
   Set via the filter parameter in page front matter.

   botanical  Line-art engravings on white background.
              Inverts the image so dark lines glow as
              accent-colored lines; white background
              becomes transparent via mix-blend-mode: screen.
              Requires: dark lines on white/near-white bg.

   sketch     Like botanical but with a contrast pre-boost
              to darken faint lines before inverting.
              Use when botanical produces dim results.
              Tune: contrast (2–4, higher = thicker lines).

   woodcut    Historical images with natural color preserved.
              Slight darken only, no color transformation.
              Use for manuscripts, illuminations, woodcuts.

   etching    Color photos → high-contrast silhouette + tint.
              Produces bold shapes, not fine lines.
              For photos needing a line-art look, pre-process
              the image and use botanical instead.

   photo      Color photos kept photographic (default).
              Darkened and desaturated slightly for legibility.
   ===================================================== */

/* --- Filter: Botanical ---
     invert+screen glows the linework over a dark page-header background.
     Themes with a light page-header (e.g. rubric) override
     --page-header-tint-filter/--page-header-tint-blend to drop the
     invert and multiply the ink directly onto the paper-colored bg instead —
     screen washes a light background out to near-white. */
.page-header-bg--botanical {
  filter: var(--page-header-tint-filter, invert(1) sepia(0.6) hue-rotate(340deg) saturate(2.5));
  mix-blend-mode: var(--page-header-tint-blend, screen);
}

/* --- Filter: Sketch
     Tune: contrast (2–4, higher = thicker lines), final brightness (1.5–2.5) --- */
.page-header-bg--sketch {
  filter: grayscale(1) contrast(2.5) invert(1) sepia(0.6) hue-rotate(340deg) saturate(3) brightness(2);
  mix-blend-mode: screen;
}

.page-header--section .page-header-bg--sketch {
  opacity: 0.55;
}

.page-header--banner .page-header-bg--sketch {
  opacity: 0.35;
}

/* --- Filter: Woodcut
     Tune brightness and opacity to balance image vs. text readability --- */
.page-header-bg--woodcut {
  filter: saturate(1.05) brightness(0.85);
  mix-blend-mode: normal;
  opacity: 0.75;
}

.page-header--section .page-header-bg--woodcut {
  opacity: 0.65;
}

.page-header--banner .page-header-bg--woodcut {
  opacity: 0.45;
}

/* --- Filter: Etching
     Ink on paper: dark brown lines, the sheet left as a muted field.

     Deliberately NOT inverted. botanical and sketch invert their line art and
     composite with mix-blend-mode: screen, which is why their lines come out
     pale. On this site that goes double: the rubric theme sets
     --bg-page-header to parchment, and screening onto a light ground can
     barely darken anything,
     so an inverted etching washes out to near-white. Keeping the image the way
     round it was printed, with a normal composite, leaves the marks dark on
     both light and dark grounds.

     Opacity is the trade-off, and it is set low here on purpose: session
     headers carry a subtitle, and this woodcut is dense enough to fight it.
     Raise it per page with the bg-opacity front-matter parameter on a sparser
     image; drop it if a header's text stops reading.

     Tune: contrast (2–3) for how hard the lines bite, hue-rotate (340–355)
     for the brown's warmth, brightness (1.05–1.25) for the paper's tone. --- */
.page-header-bg--etching {
  filter: grayscale(1) brightness(1.15) contrast(2.2) sepia(1) hue-rotate(348deg) saturate(2.4);
  mix-blend-mode: normal;
  opacity: 0.30;
}

.page-header--section .page-header-bg--etching {
  opacity: 0.26;
}

.page-header--banner .page-header-bg--etching {
  opacity: 0.20;
}

/* --- Filter: Photo (default)
     saturate(1.05) gives a slight color lift; brightness(0.85) darkens for legibility.
     Tune opacity up if image is too faint, down if text becomes hard to read. --- */
.page-header-bg--photo {
  filter: saturate(1.05) brightness(0.85);
  mix-blend-mode: normal;
  opacity: 0.80;
}

.page-header--section .page-header-bg--photo {
  opacity: 0.72;
}

.page-header--banner .page-header-bg--photo {
  opacity: 0.50;
}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 768px) {
  .page-header-content {
    padding: 2rem 1.5rem;
  }

  /* Grow to fit rather than clip. A fixed 30vh is sized for a title alone;
     a session header also carries a subtitle, and on a phone that paragraph
     is several times taller than it is on a laptop. min-height keeps the
     proportions for short headers and lets long ones push down. */
  .page-header--section {
    min-height: 30vh;
    height: auto;
  }

  .page-header--section .page-header-content {
    padding: 1.5rem 1.5rem;
    margin-left: 1rem;
  }

  .page-header--banner .page-header-content {
    padding: 0.75rem 1rem;
    margin-left: 1rem;
  }
}