/* ============================================================================
   THE PAGE HERO — one system across Courses, Research, Newsletter, The Model
   and Free Pick.

   Five pages opened with the same three things (an eyebrow, a headline, a
   sentence) styled five different ways under five sets of class names. Five
   near-identical designs read as five pages that happen to share a logo.

   TYPE IS THE HOMEPAGE'S. The h1 here is the same face, size, weight, colour
   and tracking as the homepage hero, and the sentence under it matches
   .hero-sub. A site whose headline changes weight between the front page and
   the section pages has two typographic voices and sounds like two companies.

   NO TEXTURE. The first version laid a grain sheet and a radial glow behind
   this, which is the look that has become the default for generated pages —
   and a texture you can see is a texture that is competing with the type. What
   is left is architecture, not decoration:

     - one hairline under the eyebrow, running the column, as a masthead rule
     - two faint vertical rules on the page rail, so the hero sits inside a
       structure rather than floating on a flat fill
     - a single directional wash, top-left to bottom-right, a few per cent
       strong — light falling across the page, not a glow pinned behind the
       headline
     - a bottom edge that resolves into the content below

   All of it is CSS. Nothing downloads, nothing animates after first paint.
   ============================================================================ */

.phero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Sized to hold the type with room, not to fill a viewport. The first version ran
     570–667px; a section header that takes most of a laptop screen before the page
     begins is an announcement, not a heading. */
  padding: clamp(92px, 8.5vw, 122px) 0 clamp(34px, 3.4vw, 50px);
}
.phero-wrap {
  position: relative;
  z-index: 1;
  max-width: var(--page, 1240px);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 32px);
}

/* ── the ground: structure, not texture ───────────────────────────────────── */
.phero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.phero-bg span { position: absolute; display: block; }

/* Light falling across the page. A wide linear wash rather than a circle behind the
   words — a radial blob reads as a graphic sitting on the page, a gradient this broad
   reads as the page being lit. */
.phero-wash {
  inset: 0;
  background:
    linear-gradient(152deg,
      color-mix(in srgb, var(--accent) 7%, transparent) 0%,
      transparent 46%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--text) 3%, transparent) 0%,
      transparent 60%);
}

/* Two hairlines on the page rail. They mark where the column is and give the hero an
   architecture to sit in; at this weight they register as structure rather than as
   lines you look at. Hidden below the rail width, where there is no margin to draw in. */
.phero-rails {
  inset: 0;
  opacity: .6;
}
.phero-rails::before,
.phero-rails::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--border) 22%, var(--border) 72%, transparent);
}
.phero-rails::before { left: max(calc(50% - var(--page, 1240px) / 2), 0px); }
.phero-rails::after { right: max(calc(50% - var(--page, 1240px) / 2), 0px); }
@media (max-width: 1320px) { .phero-rails { display: none; } }

/* The bottom edge resolves rather than stopping. A hard 1px rule under a hero says
   "section ends"; a short fade says the page continues. */
.phero-edge {
  left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong) 18%, var(--border-strong) 82%, transparent);
}

/* ── masthead ─────────────────────────────────────────────────────────────
   Metrics from the homepage eyebrow; the accent and the rule are the one thing
   that marks a section page as a section page. */
.phero-eyebrow {
  margin: 0 0 clamp(20px, 2.2vw, 28px);
  padding-bottom: 13px;
  border-bottom: 1px solid var(--border-strong);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Identical to .hero h1 on the homepage. If that one changes, change this with it. */
.phero-title {
  margin: 0;
  font-family: var(--body);
  font-size: clamp(36px, 4.25vw, 57px);
  font-weight: 640;
  line-height: 1.04;
  letter-spacing: -.036em;
  color: var(--ink-display);
  /* No character cap: the <br> in each headline owns the break, and a ch-based
     max-width fights it — the same note the homepage carries. */
}
/* The second clause, lighter and quieter. Two voices in one headline without a second
   colour or a highlight; the pages already marked that clause with <em>. */
.phero-title em {
  font-style: normal;
  font-weight: 400;
  color: var(--text-muted);
}

/* Matches .hero-sub. */
.phero-dek {
  margin: 26px 0 0;
  max-width: 46ch;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-muted);
}
.phero-dek strong { color: var(--text); font-weight: 600; }

.phero-actions { margin-top: 30px; }

/* ── entrance ─────────────────────────────────────────────────────────────
   The homepage's own timing — riseIn, staggered — so arriving on a section page
   feels like the same site. It moves TOWARD the resting state, so reduced motion
   shows the finished hero rather than an empty box. */
@media (prefers-reduced-motion: no-preference) {
  .phero-eyebrow, .phero-title, .phero-dek, .phero-actions {
    animation: phero-rise .6s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: calc(var(--i, 0) * 110ms + 100ms);
  }
  .phero-title { --i: 1; }
  .phero-dek { --i: 2; }
  .phero-actions { --i: 3; }
}
@keyframes phero-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 720px) {
  .phero { padding: clamp(86px, 20vw, 108px) 0 30px; }
  .phero-dek { max-width: none; font-size: 16.5px; margin-top: 20px; }
}