/* Canonical semantic-neutral frames. site_theme.css + ds_tokens.css first.
   Hero selectors are compatibility aliases; typography belongs to ds_patterns.
   Every surface requires a direct .ps-surface-in (legacy .ps-phero-in) well. */
:is(.ps-surface, .ps-surface--plinth, .ps-phero) {
  display: block;
  position: relative;
  padding: 7px;
  border-radius: 6px;
  background: linear-gradient(180deg, #e4c078, #a9761f 52%, #6d4611);
  box-shadow:
    0 26px 60px -20px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(255, 251, 232, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}


:is(.ps-surface-in, .ps-phero-in) {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  min-width: 0;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(28, 46, 76, 0.95), rgba(10, 17, 32, 0.98));
  box-shadow:
    inset 0 2px 12px rgba(0, 0, 0, 0.85),
    inset 0 0 0 1px rgba(255, 236, 176, 0.16),
    inset 0 -20px 40px -20px rgba(0, 0, 0, 0.8);
}


:is(.ps-surface-in, .ps-phero-in)::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 120% at 12% -10%, rgba(232, 196, 111, 0.13), transparent 60%),
    radial-gradient(70% 130% at 92% 0%, rgba(36, 115, 126, 0.2), transparent 64%);
  pointer-events: none;
}


:is(.ps-surface-in, .ps-phero-in)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 34%;
  background: linear-gradient(180deg, rgba(255, 244, 214, 0.07), transparent);
  pointer-events: none;
}


:is(.ps-surface--bevel, .ps-phero--bevel) {
  padding:0;
  border-radius:12px;
  background:linear-gradient(168deg,rgba(38,60,96,.62) 0%,rgba(18,30,52,.9) 44%,rgba(10,17,32,.96) 100%);
  box-shadow:0 30px 70px -22px rgba(0,0,0,.85),0 2px 0 rgba(255,244,214,.10),inset 0 1px 0 rgba(255,244,214,.22),inset 0 -18px 34px -18px rgba(0,0,0,.7),inset 0 0 0 1px rgba(232,196,111,.5),inset 0 0 0 6px rgba(6,11,21,.55),inset 0 0 0 7px rgba(213,177,101,.28);
}


:is(.ps-surface--bevel, .ps-phero--bevel)::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:12px;
  background:radial-gradient(78% 130% at 88% 4%,rgba(120,169,255,.14),transparent 62%),radial-gradient(50% 90% at 8% 0%,rgba(232,196,111,.14),transparent 66%);
  pointer-events:none;
  z-index:2;
}


:is(.ps-surface--bevel, .ps-phero--bevel)>:is(.ps-surface-in, .ps-phero-in) {
  border-radius:12px;
  background:none;
  box-shadow:none;
}


:is(.ps-surface--bevel, .ps-phero--bevel)>:is(.ps-surface-in, .ps-phero-in)::before,:is(.ps-surface--bevel, .ps-phero--bevel)>:is(.ps-surface-in, .ps-phero-in)::after {
  content:none;
}



:is(.ps-surface--bracket, .ps-phero--bracket) {
  padding:6px;
  border:1px solid rgba(232,196,111,.5);
  border-radius:4px;
  background:linear-gradient(180deg,rgba(24,40,68,.9),rgba(9,15,29,.96));
  box-shadow:0 24px 56px -20px rgba(0,0,0,.82),inset 0 1px 0 rgba(255,244,214,.14),inset 0 0 60px rgba(0,0,0,.55);
}


:is(.ps-surface--bracket, .ps-phero--bracket)>:is(.ps-surface-in, .ps-phero-in) {
  border-radius:0;
  border:1px solid rgba(213,177,101,.26);
  background:none;
  box-shadow:none;
}


:is(.ps-surface--bracket, .ps-phero--bracket)>:is(.ps-surface-in, .ps-phero-in)::before {
  background:radial-gradient(64% 150% at 26% -18%,rgba(232,196,111,.18),transparent 62%),repeating-linear-gradient(90deg,rgba(255,236,176,.022) 0 1px,transparent 1px 5px);
}


:is(.ps-surface--bracket, .ps-phero--bracket)>:is(.ps-surface-in, .ps-phero-in)::after {
  content:none;
}


.ps-phero-bracket-mark {
  position:absolute;
  width:22px;
  height:22px;
  z-index:3;
  pointer-events:none;
}


.ps-phero-bracket-mark:nth-of-type(1) {
  top:6px;
  left:6px;
  border-top:3px solid var(--gold-300);
  border-left:3px solid var(--gold-300);
}


.ps-phero-bracket-mark:nth-of-type(2) {
  top:6px;
  right:6px;
  border-top:3px solid var(--gold-300);
  border-right:3px solid var(--gold-300);
}


.ps-phero-bracket-mark:nth-of-type(3) {
  bottom:6px;
  left:6px;
  border-bottom:3px solid var(--gold-300);
  border-left:3px solid var(--gold-300);
}


.ps-phero-bracket-mark:nth-of-type(4) {
  bottom:6px;
  right:6px;
  border-bottom:3px solid var(--gold-300);
  border-right:3px solid var(--gold-300);
}



:is(.ps-surface--rail, .ps-phero--rail) {
  padding:0;
  border:1px solid rgba(213,177,101,.44);
  border-top:0;
  border-radius:10px;
  background:linear-gradient(180deg,rgba(30,49,80,.86),rgba(10,17,32,.97));
  box-shadow:0 28px 64px -22px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,236,176,.06),inset 0 -26px 46px -26px rgba(0,0,0,.8);
  overflow:hidden;
}


:is(.ps-surface--rail, .ps-phero--rail)::before {
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:6px;
  z-index:3;
  background:linear-gradient(180deg,#fbe6a8,#dfb45f 45%,#9a6a1c);
  box-shadow:0 1px 0 rgba(255,251,232,.5),0 4px 14px rgba(232,196,111,.35);
}


:is(.ps-surface--rail, .ps-phero--rail)>:is(.ps-surface-in, .ps-phero-in) {
  border-radius:0;
  background:none;
  box-shadow:none;
}


:is(.ps-surface--rail, .ps-phero--rail)>:is(.ps-surface-in, .ps-phero-in)::before {
  inset:6px 0 0;
  background:radial-gradient(56% 120% at 18% -10%,rgba(232,196,111,.16),transparent 60%),radial-gradient(64% 130% at 88% 4%,rgba(36,115,126,.24),transparent 62%),linear-gradient(180deg,rgba(255,244,214,.08),transparent 42%);
}


:is(.ps-surface--rail, .ps-phero--rail)>:is(.ps-surface-in, .ps-phero-in)::after {
  content:none;
}

/* Isolated negative decoration layers stay behind even bare text nodes.
   No positioning or z-index is imposed on user content. */
:is(.ps-surface, .ps-surface--plinth, .ps-phero) {
  isolation:isolate;
}

:is(.ps-surface-in, .ps-phero-in) {
  isolation:isolate;
  box-sizing:border-box;
}

:is(.ps-surface-in, .ps-phero-in)::before,
:is(.ps-surface-in, .ps-phero-in)::after {
  z-index:-1;
  pointer-events:none;
}

:is(.ps-surface--bevel, .ps-phero--bevel)::before {
  z-index:-1;
  pointer-events:none;
}

:is(.ps-surface--rail, .ps-phero--rail)::before {
  pointer-events:none;
  z-index:-1;
}

/* Reserve the six-pixel rail above generic content; legacy heroes already
   reserve it in their body padding. */
.ps-surface--rail > .ps-surface-in {
  margin-top:6px;
}

/* The generic well already starts below the reserved rail. Do not offset its
   decorative wash a second time; legacy wells still start at the outer top. */
.ps-surface--rail > .ps-surface-in::before {
  inset:0;
}

/* Paint the cap glow after the well wash, but still behind arbitrary content.
   The cap itself stays outside the well; its clipped shadow is painted here so
   the safety stacking does not dim the canonical lit edge. */
.ps-surface--rail::before {
  box-shadow:none;
}

.ps-surface--rail > .ps-surface-in::after {
  content:"";
  top:-6px;
  height:6px;
  background:none;
  box-shadow:0 1px 0 rgba(255,251,232,.5),0 4px 14px rgba(232,196,111,.35);
}

/* Generic corners use explicit positions, never nth-of-type or tag names.
   Place these empty aria-hidden spans outside the inner content well. */
.ps-surface-mark {
  z-index:-1;
  position:absolute;
  width:22px;
  height:22px;
  pointer-events:none;
}

.ps-surface-mark--tl {
  top:6px;
  left:6px;
  border-top:3px solid var(--gold-300);
  border-left:3px solid var(--gold-300);
}

.ps-surface-mark--tr {
  top:6px;
  right:6px;
  border-top:3px solid var(--gold-300);
  border-right:3px solid var(--gold-300);
}

.ps-surface-mark--bl {
  bottom:6px;
  left:6px;
  border-bottom:3px solid var(--gold-300);
  border-left:3px solid var(--gold-300);
}

.ps-surface-mark--br {
  bottom:6px;
  right:6px;
  border-bottom:3px solid var(--gold-300);
  border-right:3px solid var(--gold-300);
}

/* ---- Opt-in accents (documented in docs/DESIGN_SYSTEM.md) ----------------
   Carved ornate frame, stone band and large image close. These are accents,
   not defaults: sanctioned uses are the Compendium detail modal window and
   its masthead portrait. Consumers own content padding and typography. */

/* Nine-slice carved frame. border-image ignores border-radius, so the framed
   box is square. The fill paints inside the frame only (padding-box); the
   transparent margin of the art shows whatever sits behind it. */
.ps-ornate-frame {
  --ps-ornate-frame-width:26px;
  --ps-ornate-frame-fill:rgba(5,8,18,.66);
  box-sizing:border-box;
  border:var(--ps-ornate-frame-width) solid transparent;
  border-image:url("../assets/optimized/images/homepage/Gods_Portrait_Window.03573be47bb4.webp") 88 round;
  border-radius:0;
  background-color:var(--ps-ornate-frame-fill);
  background-clip:padding-box;
}

.ps-ornate-frame--sm {
  --ps-ornate-frame-width:20px;
}

/* Window: an inner well with a 1px gold hairline and a dark/gold double
   inset. The 1px padding keeps the hairline visible beside child bands; the
   double inset sits behind children, like any inset shadow. The radius only
   rounds the inner well (outer radius minus frame width = 12px): border-image
   itself is never clipped by border-radius. */
.ps-ornate-frame--window {
  --ps-ornate-frame-fill:rgba(16,23,38,.95);
  padding:1px;
  overflow:hidden;
  border-radius:calc(var(--ps-ornate-frame-width) + var(--site-radius-lg));
  box-shadow:
    inset 0 0 0 1px var(--site-border-strong),
    inset 0 0 0 4px var(--ps-ornate-frame-inset, rgba(5,8,18,.85)),
    inset 0 0 0 5px rgba(213,177,101,.3);
}

@media (max-width:760px) {
  .ps-ornate-frame {
    --ps-ornate-frame-width:12px;
  }

  .ps-ornate-frame--sm {
    --ps-ornate-frame-width:10px;
  }
}

/* Phones: the carved art cannot scale down legibly; fall back to a hairline. */
@media (max-width:620px) {
  .ps-ornate-frame {
    border:1px solid var(--site-border-strong);
    border-image:none;
  }

  .ps-ornate-frame--window {
    padding:0;
    border-radius:var(--site-radius-lg);
    box-shadow:
      inset 0 0 0 3px var(--ps-ornate-frame-inset, rgba(5,8,18,.85)),
      inset 0 0 0 4px rgba(213,177,101,.3);
  }
}

/* Textured stone band for a header strip. Darkened by a full inset overlay so
   text on it keeps contrast; closes with the strong gold hairline. */
.ps-stone-band {
  background-color:var(--ps-stone-band-fill, rgba(9,14,25,.82));
  background-image:url("../assets/optimized/images/brand/prostagma_stone.91b7fd4f037c.webp");
  background-repeat:repeat;
  box-shadow:inset 0 0 0 9999px var(--ps-stone-band-overlay, rgba(12,18,31,.7));
  border-bottom:1px solid var(--site-border-strong);
}

/* Large image close: 40px sprite in a 44px target. Uses <img> (not a CSS
   background) so the glyph survives forced-colors mode. Markup:
   <button class="ps-close-lg" aria-label="Close">
     <img class="ps-close-lg-rest" alt=""><img class="ps-close-lg-hover" alt="">
   </button> */
.ps-close-lg {
  display:inline-grid;
  place-items:center;
  width:44px;
  height:44px;
  flex:none;
  padding:0;
  border:0;
  border-radius:var(--site-radius-sm);
  background:transparent;
  cursor:pointer;
}

.ps-close-lg > img {
  grid-area:1 / 1;
  width:40px;
  height:40px;
  transition:opacity 160ms ease;
}

.ps-close-lg > .ps-close-lg-hover {
  opacity:0;
}

.ps-close-lg:is(:hover, :focus-visible) > .ps-close-lg-hover {
  opacity:1;
}

.ps-close-lg:focus-visible {
  outline:2px solid var(--site-gold-strong);
  outline-offset:2px;
}

@media (prefers-reduced-motion:reduce) {
  .ps-close-lg > img {
    transition:none;
  }
}