/* ============================================================
   PE LETTERFORMS — "each letter worth a trillion dollars"
   Hyper-detailed dimensional champagne-metal lettering system.
   Pure letterform work: engraved extrusion, machined bevel bands,
   top-edge hairline highlight, brushed grain, luminous material.
   Layout and copy are untouched — this file only dresses glyphs.
   Loaded LAST in <head> so it wins ties; JS adds .pe-metal classes
   and data-text (for the extrusion/highlight layers).
   Barry 2026-09-24: NEVER flatten to fix darkness — brighten metal.
   PHASE 2 (2026-10-17): the fill is now a LAYERED SOLID — a real gold
   color on the glyphs, depth carried by layered text-shadow + the solid
   cast layer. The clipped-gradient text technique is BANNED on this
   estate; no gradient is clipped into these letters in this file anymore.
   ============================================================ */

/* ---- core metal: layered SOLID champagne — real gold fill, shadow depth ----
   The glyph fill is a real color (house --gold-bright #edc66d, hardcoded so
   this file never depends on pe-main loading first). Depth is light, not a
   fill effect: crown highlight above, bronze engraved step, dark cast,
   ambient drop, restrained warm aura — plus the ::before cast layer. */
.pe-metal{
  position:relative!important;
  z-index:0!important;
  color:#edc66d!important;
  -webkit-text-fill-color:#edc66d!important;
  /* engraved edge: dark bronze hairline around every glyph */
  -webkit-text-stroke:1px rgba(74,48,12,.62)!important;
  /* layered light, crown to ground: top bevel light (the retired ::after's
     job) · bronze engraved step · dark cast · ambient drop · warm aura */
  text-shadow:0 -1px 1px rgba(255,251,235,.55), 0 1px 0 rgba(74,48,12,.55), 0 2px 0 rgba(18,10,1,.92), 0 14px 30px rgba(0,0,0,.72), 0 0 38px rgba(240,214,150,.30)!important;filter:none!important;
}

/* ---- engraved extrusion: dark bronze cast layer behind the metal ----
   Gives real dimensional depth — the letter sits IN the page, not on it. */
.pe-metal::before{
  content:attr(data-text);
  position:absolute;inset:0;z-index:-1;
  color:#2b1a05;-webkit-text-fill-color:#2b1a05;
  -webkit-text-stroke:0;
  background:none!important;filter:none;animation:none;
  transform:translate(.018em,.048em);
  filter:blur(.7px);
  opacity:.96;
  pointer-events:none;white-space:pre-wrap;
}
/* ---- top bevel light: RETIRED as a layer (Phase 2, 2026-10-17) ----
   This highlight used to be a second copy of the text with a gradient
   clipped into it — the banned technique. Its job (light kissing each
   glyph's crown) is now layer 1 of the .pe-metal text-shadow stack. */
.pe-metal::after{content:none!important}

/* ---- hero grade: deeper cast + stronger aura for flagship headlines ---- */
.pe-metal--hero::before{transform:translate(.02em,.062em);filter:blur(1px)}
.pe-metal--hero{
  filter:
    drop-shadow(0 -1px 1px rgba(255,251,235,.55))
    drop-shadow(0 3px 0 rgba(18,10,1,.92))
    drop-shadow(0 18px 36px rgba(0,0,0,.78))
    drop-shadow(0 0 52px rgba(240,214,150,.4))!important;
}

/* ---- soft grade: quiet pages (privacy/legal) — metal, no depth tricks ---- */
.pe-metal--soft{
  color:#f6db9c!important;
  -webkit-text-fill-color:#f6db9c!important;
  -webkit-text-stroke:0!important;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.7))!important;
  animation:none!important;
}
.pe-metal--soft::before,.pe-metal--soft::after{content:none!important}

/* ---- heritage kickers: engraved-plaque eyebrows, hairline rules both sides ---- */
.pe-kicker{
  letter-spacing:.22em!important;
  font-weight:800!important;
}
.pe-kicker::before,.pe-kicker::after{
  content:""!important;
  display:inline-block!important;
  width:30px!important;height:5px!important;
  border-top:1px solid currentColor!important;
  border-bottom:1px solid currentColor!important;
  opacity:.75!important;
  vertical-align:middle!important;
  background:none!important;
}
.pe-kicker::before{margin-right:.8em!important}
.pe-kicker::after{margin-left:.8em!important}

/* ---- JS wrapper span: the companion script nests a heading's inline
   content in span.pe-metal, so the host element keeps its own ::before /
   ::after decorations (underline sweeps, badges) and its own layout.
   inline-block gives the extrusion/highlight layers an exact glyph box. ---- */
span.pe-metal{display:inline-block;max-width:100%;vertical-align:baseline}

/* ---- reduced motion: sheen and breathing stop, letterforms stay dressed ---- */
@media (prefers-reduced-motion:reduce){
  .pe-metal{animation:none!important}
}

/* ---- fallback note (Phase 2, 2026-10-17) ----
   The old @supports no-clip fallback block is gone: its solid-champagne
   pattern was promoted into the base .pe-metal rule itself, so every
   browser gets the same layered-solid treatment — no second colorway. */

/* ---- mobile: kill the 3D extrusion layers — they cram and ghost on small
   screens. Keep the solid metal with a simplified shadow (2026-09-29 rule,
   Phase 2 wording). ---- */
@media (max-width:700px){
  .pe-metal::before,.pe-metal::after{content:none!important}
  .pe-metal{
    text-shadow:0 2px 8px rgba(0,0,0,.6),0 0 20px rgba(240,214,150,.25)!important;
    -webkit-text-stroke:0!important;
  }
}


/* ===== Lettering landing slots (finish pass FP-G9) =====
   Every page's H1 carries [data-drawn-lettering-slot]: the slot IS the live
   headline's own box — same markup, same sizing — so the finished drawn
   lettering replaces the slot's contents in one move per page, with no
   layout change. No artwork is placed by this rule; it only guarantees the
   landing contract. */
[data-drawn-lettering-slot]{position:relative}