/* ------------------------------------------------------------------ *
 * Awakin AI — light page header (reference / utility pages)
 * A parchment opener that keeps the kicker + display title + thesis but
 * drops the dark "threshold" hero and its gradient seam, so the whole
 * page reads as one continuous parchment field.
 * Loaded via {$EXTRA_CSS}; the page also sets NAV_SOLID so the fixed nav
 * renders in light mode (no .hero on the page means the nav-scroll JS
 * leaves it light throughout).
 * Left-aligned to hang on the same axis as the body's .wrap sections.
 * ------------------------------------------------------------------ */

.pagehead{position:relative;overflow:hidden;
  padding:clamp(7.5rem,14vh,10rem) 0 clamp(2rem,4vw,3rem)}

/* barely-there warmth from the top-left — the quiet stand-in for the hero glow */
.pagehead::before{content:"";position:absolute;inset:0 0 auto 0;height:440px;pointer-events:none;
  background:radial-gradient(58% 72% at 22% -6%,rgba(177,123,46,.11),transparent 62%)}

/* match .wrap (max 800px + same inline padding) so the header aligns with the body */
.pagehead .ph-inner{position:relative;max-width:800px;margin:0 auto;padding:0 clamp(1.2rem,5vw,2rem)}

.pagehead .kicker{color:var(--brass-deep);margin-bottom:1.5rem}
.pagehead .kicker::before{background:var(--brass-deep)}

.pagehead .ph-title{font-family:var(--display);font-optical-sizing:auto;font-weight:335;
  font-size:clamp(2.5rem,6.4vw,4.1rem);line-height:1.03;letter-spacing:-.02em;
  color:var(--ink);margin:0;max-width:16ch}
.pagehead .ph-title em{font-style:italic;font-weight:360;color:var(--clay)}

.pagehead .ph-thesis{color:var(--ink-soft);font-size:clamp(1.05rem,1.6vw,1.22rem);
  line-height:1.6;max-width:54ch;margin:1.4rem 0 0}
.pagehead .ph-thesis b{color:var(--ink);font-weight:500}

/* controlled gap into the first dwelling section (neutralises the big
   :first-of-type top padding that was tuned for a full-height hero) */
.pagehead + .seg.light .moment{padding-top:clamp(2.6rem,5vw,3.6rem)}

/* quiet page-load rise */
@media(prefers-reduced-motion:no-preference){
  @keyframes phRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .pagehead .kicker,.pagehead .ph-title,.pagehead .ph-thesis{animation:phRise .7s cubic-bezier(.2,.7,.2,1) both}
  .pagehead .ph-title{animation-delay:.06s}
  .pagehead .ph-thesis{animation-delay:.13s}
}