/* Approved Display 1.0 is reserved for headings. Body uses EB Garamond; controls use Manrope.
   Specificity replaces the earlier section-specific sans-serif typography. */
:root body :is(h1,h2,h3,h4,h5,h6),
:root body :is(h1,h2,h3,h4,h5,h6) em {
  font-family: "AstroMagic Display", Georgia, serif;
  font-weight: 400;
  font-style: normal;
  font-synthesis: none;
  font-kerning: normal;
  letter-spacing: 0;
  line-height: 1.3;
}

/* The flourished capitals need room, including in narrow reading panels. */
:root body :is(h1,h2,h3,h4,h5,h6) {
  overflow-wrap: break-word;
  text-wrap: balance;
}

.approach-step h3 { font-size: 22px; }
.interpretation h2, .journal-entry h2 { font-size: 26px; }

.type-effects { position: absolute; pointer-events: none; }

/* Static foil texture from the approved gold specimen. Text remains selectable.
   Small type uses just the material; large type also gets an inset bevel. */
:root[data-palette] body :is(h1,h2,h3,h4,h5,h6) {
  color: #e8c98c;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  :root[data-palette] body :is(h1,h2,h3,h4,h5,h6) {
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.13' numOctaves='3' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.8' intercept='-.9'/%3E%3CfeFuncG type='linear' slope='2.8' intercept='-.9'/%3E%3CfeFuncB type='linear' slope='2.8' intercept='-.9'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
      linear-gradient(112deg, #b9853e 0%, #efd293 16%, #fff0c3 27%, #c99b53 40%, #f2d79b 54%, #bc8d47 68%, #f9e4af 82%, #d3ab66 100%);
    background-size: 110px 110px, 100% 100%;
    background-blend-mode: soft-light, normal;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 1px 1px #08041090);
  }
  :root[data-palette][data-theme] body :is(h1,h2,h3,h4,h5,h6) em {
    background: none;
    color: inherit;
    -webkit-text-fill-color: inherit;
  }
  :root[data-palette] body :is(h1,h2) {
    filter: url(#gold-type-relief) drop-shadow(0 1.5px 1px #080410a0);
  }
  /* Keep the approved Chromium material and filter unchanged. The Gecko
     variant uses opposing offsets, not an eroded outline around every edge. */
  @supports (-moz-appearance: none) {
    :root[data-palette] body :is(h1,h2) {
      filter: url(#gold-type-relief-gecko) drop-shadow(0 1.5px 1px #080410a0);
    }
  }
}

/* Modal-only Gecko paint path: no HTML clipping or external CSS SVG filter.
   The native SVG contains its own material and relief, and scales with type. */
:root[data-palette] body h2.card-title-svg {
  background: none;
  filter: none;
  color: #e8c98c;
  -webkit-text-fill-color: initial;
}
.card-title-svg .card-title-label {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}
.card-title-art { display:block; height:1.3em; max-width:100%; overflow:visible; margin:0 auto; }
@media(max-width:650px){.card-title-art{margin-left:0;margin-right:0}}

@media (forced-colors: active) {
  .card-title-art { display:none; }
  .card-title-svg .card-title-label { position:static; width:auto; height:auto; overflow:visible; clip-path:none; white-space:normal; }
  :root[data-palette][data-theme] body :is(h1,h2,h3,h4,h5,h6),
  :root[data-palette][data-theme] body :is(h1,h2,h3,h4,h5,h6) em {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
    filter: none;
  }
}

@media (max-width: 700px) {
  .approach-step h3 { font-size: 21px; }
  .interpretation h2, .journal-entry h2 { font-size: 24px; }
  .compact-panel.legal h1 { font-size: clamp(26px, 7vw, 38px); }
}