@layer components {
  /* Shared clearance below the floating hamburger/theme-toggle controls
     (nav-bar.css, theme-toggle.css). The theme toggle sits deepest
     (1rem + safe-area-inset-top + 3rem toggle), so it is the binding
     constraint; 0.75rem is added as breathing room. Used by every masthead
     at every width, since the hamburger's size and position never change
     with viewport, so there is nothing here that needs re-tuning per
     device class. */
  :root {
    --tgk-mobile-masthead-clearance: calc(4.75rem + env(safe-area-inset-top));
  }

  /* Opt-in editorial masthead and section rhythm for pillar landing pages.
     Content-sized and normal-flow at every width: no absolute positioning,
     no fixed cinematic viewport height, and no per-breakpoint offsets to
     re-tune. Each pillar's own page CSS (e.g. gallery-landing.css,
     teachings.css) sets the concrete header-main/hero-overlay-top rules;
     these are the shared typography defaults reused across them.

     This component loads after site-header.css, so its equally specific
     pillar mode overrides the generic full-viewport hero through ordinary
     cascade order. The body.is-landing non-home rule does not match these
     headers because topbar.njk supplies their existing is-home class. */
  body.pillar-editorial-masthead .site-header.minimal.with-hero-media {
    min-height: 0;
    height: auto;
    margin-top: 0;
    padding: 0;
    justify-content: flex-start;
    border-bottom: 1px solid var(--header-rule);
    box-shadow: none;
  }

  /* Crop position and colour filtering are intentionally not set here:
     forty-plus pillar/series/season pages each use distinct artwork (see
     heroImage in each page's front matter), so a single blanket
     object-position or filter cannot be correct for all of them.
     site-masthead.css's canonical .hero-media-image rule reads
     object-position: var(--hero-image-position, center) and
     filter: var(--hero-image-filter, none) — a page that needs a
     non-default crop or a muted/darkened treatment should set
     --hero-image-position and/or --hero-image-filter on its own
     bodyClass-scoped selector once that specific image has actually been
     reviewed, the same way pages/home.css already does for the homepage's
     own hero image (its --hero-image-filter uses the same saturate/
     contrast/brightness shape as --masthead-image-saturate below, kept
     here for any pillar page that opts in the same way). */
  body.pillar-editorial-masthead {
    --masthead-image-saturate: 0.62;
  }

  /* Identical gradient to the homepage's own hero (home.css:
     .home-editorial-masthead ... .hero-media-scrim) rather than the
     generic --hero-overlay-default token, since the homepage opts into
     this exact darker, left-biased treatment via its own class and does
     not use the plain default variant. */
  body.pillar-editorial-masthead .site-header.minimal.with-hero-media .hero-media-scrim {
    display: block;
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--bg-primary) 94%, transparent), color-mix(in srgb, var(--bg-primary) 74%, transparent) 58%, color-mix(in srgb, var(--bg-primary) 35%, transparent)),
      linear-gradient(0deg, color-mix(in srgb, var(--bg-primary) 76%, transparent), transparent 55%);
  }

  /* topbar.njk supplies an is-home class to every hero-media header. These
     selectors intentionally include that state, giving the editorial mode
     higher specificity than the generic full-screen hero rules without
     relying on priority declarations. */
  body.pillar-editorial-masthead .site-header.minimal.is-home.with-hero-media .header-main {
    position: relative;
    inset: auto;
    max-width: var(--header-content-max);
    margin-inline: auto;
    padding: var(--tgk-mobile-masthead-clearance) var(--header-gutter) clamp(1.5rem, 4vw, 2.5rem);
    pointer-events: auto;
  }

  body.pillar-editorial-masthead .site-header.minimal.with-hero-media .hero-overlay-top {
    position: relative;
    top: auto;
    left: auto;
    bottom: auto;
    width: auto;
    padding-top: 0;
    text-align: left;
    transform: none;
  }

  body.pillar-editorial-masthead .pillar-landing-masthead__breadcrumbs {
    position: static;
    margin: 0 0 0.75rem;
    pointer-events: auto;
  }

  body.pillar-editorial-masthead .pillar-landing-masthead__breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  body.pillar-editorial-masthead .pillar-landing-masthead__breadcrumbs li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--hero-overlay-subtext);
    font-family: var(--font-ui);
    font-size: var(--type-breadcrumb-size-masthead, clamp(0.66rem, 0.9vw, 0.74rem));
    letter-spacing: var(--type-breadcrumb-tracking-masthead, 0.06em);
    text-transform: uppercase;
  }

  body.pillar-editorial-masthead .pillar-landing-masthead__breadcrumbs li + li::before {
    content: "/";
    color: var(--text-accent);
  }

  body.pillar-editorial-masthead .pillar-landing-masthead__breadcrumbs a {
    color: var(--hero-overlay-text);
  }

  body.pillar-editorial-masthead .site-header.minimal.is-home.with-hero-media .hero-title {
    display: block;
    max-width: none;
    margin: 0;
    color: var(--hero-overlay-text);
    font-family: var(--page-title);
    font-size: clamp(2.05rem, 4.2vw, 4.2rem);
    font-weight: var(--type-weight-bold, 700);
    line-height: 1.02;
    letter-spacing: var(--type-tracking-heading, 0.04em);
    text-align: left;
    text-transform: none;
    text-shadow: var(--hero-overlay-shadow-title);
    white-space: normal;
    text-wrap: balance;
  }

  body.pillar-editorial-masthead .site-header.minimal.is-home.with-hero-media .hero-title::after { display: none; }

  .pillar-landing-masthead__eyebrow {
    margin: 0 0 0.75rem;
    color: var(--text-accent);
    font-family: var(--font-ui);
    font-size: var(--type-eyebrow-size-masthead, clamp(0.66rem, 0.9vw, 0.74rem));
    font-weight: var(--type-weight-bold, 700);
    letter-spacing: var(--type-tracking-eyebrow, 0.12em);
    line-height: var(--type-eyebrow-line, 1.35);
    text-transform: uppercase;
  }

  .pillar-landing-masthead__lead,
  .pillar-landing-masthead__copy {
    margin: 0;
    text-align: left;
    text-shadow: var(--hero-overlay-shadow-copy);
  }

  .pillar-landing-masthead__lead {
    max-width: 62ch;
    margin-top: 0.9rem;
    color: var(--hero-overlay-text, var(--text-primary));
    font-family: var(--font-display, inherit);
    font-size: clamp(1.15rem, 2vw, 1.8rem);
    line-height: 1.28;
  }

  .pillar-landing-masthead__copy {
    max-width: 72ch;
    margin-top: 0.7rem;
    color: var(--hero-overlay-subtext, var(--text-secondary));
    font-size: clamp(1rem, 1.2vw, 1.16rem);
    line-height: 1.65;
  }

  .pillar-landing-masthead__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
  }

  .pillar-landing-masthead__secondary {
    color: var(--hero-overlay-subtext, var(--text-secondary));
    background: color-mix(in srgb, var(--bg-primary) 38%, transparent);
    border-color: color-mix(in srgb, var(--hero-overlay-rule, var(--section-border)) 66%, transparent);
    box-shadow: none;
    opacity: 0.7;
  }

  body.pillar-editorial-masthead .pillar-landing-section {
    margin-block: clamp(1.5rem, 4vw, 3rem);
  }

  body.pillar-editorial-masthead
  .site-main
  .content-container:has(> .landing-pitch) {
    padding-top: 0;
  }

  body.pillar-editorial-masthead
  .content-container
  > .landing-pitch:first-child {
    margin-top: 0;
  }

  body.pillar-editorial-masthead .pillar-landing-section__header {
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
  }

  body.pillar-editorial-masthead .pillar-landing-section__header .section-heading {
    margin: 0 0 0.75rem;
  }

  body.pillar-editorial-masthead .pillar-landing-section__lead {
    max-width: 68ch;
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.6;
  }
}