/* L04 — Hero Spread
 * Magazine cover treatment for .page-header. Additive only.
 * Structure unchanged; everything intensified around portrait + halo.
 */

/* --- Thracian frieze: engraved background pattern ---------------------- */
/* Inline SVG, ~200px tile, stylised gold-work meander + rosette.
 * Opacity 0.06, layered between bg and content via ::after.            */
.page-header {
  position: relative;
  isolation: isolate;
}

.page-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><g fill='none' stroke='%23B8894A' stroke-width='1.1'><path d='M0 60 H40 V20 H80 V60 H120 V20 H160 V60 H200'/><path d='M0 140 H40 V180 H80 V140 H120 V180 H160 V140 H200'/><circle cx='100' cy='100' r='18'/><circle cx='100' cy='100' r='10'/><path d='M100 76 L104 92 L120 92 L107 101 L112 117 L100 108 L88 117 L93 101 L80 92 L96 92 Z' fill='%23B8894A' fill-opacity='0.35' stroke='none'/><path d='M20 100 H70 M130 100 H180'/><path d='M100 20 V60 M100 140 V180'/></g></svg>");
  background-size: 200px 200px;
  background-repeat: repeat;
  mix-blend-mode: normal;
}

/* Ensure real content sits above the frieze. */
.page-header > * { position: relative; z-index: 1; }

/* Dark mode: frieze must survive — lift it slightly. */
@media (prefers-color-scheme: dark) {
  .page-header::after { opacity: 0.08; }
}

/* --- Name: cover-type scale ------------------------------------------- */
.page-header .name {
  font-size: clamp(2.75rem, 9vw + 1rem, 13.75rem); /* ~220px at XL */
  letter-spacing: -0.035em;
  line-height: 0.92;
  text-wrap: balance;
  -webkit-text-wrap: balance;
  hyphens: manual;
}

@media (min-width: 1100px) {
  .page-header .name {
    letter-spacing: -0.045em;
    text-shadow: 0 0 14px rgba(184, 137, 74, 0.08);
  }
}

/* --- Italic secondary line: small-caps flourish ----------------------- */
.page-header .name-sub {
  font-variant: small-caps;
  font-feature-settings: "smcp" 1, "c2sc" 1, "onum" 1;
  letter-spacing: 0.08em;
}

.page-header .name-sub::before,
.page-header .name-sub::after {
  content: "\00a0\2766\00a0"; /* floral heart ornament */
  color: var(--accent, #B8894A);
  font-style: normal;
  font-size: 0.72em;
  opacity: 0.7;
  vertical-align: 0.08em;
}

/* --- Header meta: leading gold square bullet -------------------------- */
.page-header .header-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}

.page-header .header-meta::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  background: var(--accent, #B8894A);
  box-shadow: 0 0 0 1px rgba(184, 137, 74, 0.25);
  transform: translateY(-0.05em);
  flex: 0 0 auto;
}

/* --- Gilded horizontal rule at header foot ---------------------------- */
.page-header {
  padding-bottom: calc(var(--space-8, 2.5rem) + 28px);
}

.page-header::before {
  /* augment existing ::before without fighting it: add rule via outline layer */
}

/* Dedicated rule layer — does not collide with existing ::before/::after
 * because we attach to the header-meta parent via a sibling pseudo on
 * .page-header > :last-child. Safer: use an extra absolutely-positioned
 * element through a nested marker. We stamp it on .page-header itself
 * using a background-image at the bottom edge.                         */
.page-header {
  background-image:
    linear-gradient(
      to right,
      transparent 0%,
      rgba(184, 137, 74, 0.0) 8%,
      rgba(184, 137, 74, 0.55) 28%,
      rgba(184, 137, 74, 0.9) 50%,
      rgba(184, 137, 74, 0.55) 72%,
      rgba(184, 137, 74, 0.0) 92%,
      transparent 100%
    ),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'><g fill='none' stroke='%23B8894A' stroke-width='1'><path d='M0 7 H9'/><path d='M19 7 H28'/><path d='M14 2 L17 7 L14 12 L11 7 Z' fill='%23B8894A' fill-opacity='0.9'/><circle cx='14' cy='7' r='1.2' fill='%23F4F0E6' stroke='none'/></g></svg>");
  background-repeat: no-repeat, no-repeat;
  background-position:
    left calc(100% - 14px) / 100% 1px,
    center calc(100% - 7px);
  background-size:
    100% 1px,
    28px 14px;
}

/* --- Portrait halo: scroll-driven saturate ---------------------------- */
.portrait--hero::before {
  transition: filter 600ms ease-out, opacity 600ms ease-out;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .portrait--hero::before {
      animation: L04-halo-saturate linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
  }

  @keyframes L04-halo-saturate {
    from { filter: saturate(0.85) brightness(1.0); }
    to   { filter: saturate(1.35) brightness(1.08); }
  }
}