/* ============================================================
   AV WORLD PAGE · shared styles for all nine worlds
   v1.0 · 2026-07-01 · requires av-core.css (tokens)
   Each page sets its tint inline: <section class="av-world"
   style="--world:#9ab4ff">. Everything else lives here.
   World-specific glows derive from var(--world) via color-mix.
   ============================================================ */

.av-world{
  --bg:var(--av-night); --panel:var(--av-panel); --edge:var(--av-edge);
  --ink:var(--av-paper); --muted:var(--av-mist);
  --av-world:var(--world);            /* av-core components inherit the tint */
  background:radial-gradient(1100px 500px at 50% -8%,
    color-mix(in srgb, var(--world) 10%, var(--bg)) 0%, var(--bg) 60%);
  color:var(--ink); font-family:var(--av-body);
  padding:clamp(18px,4vw,30px) clamp(12px,3vw,18px) 50px; margin:0 auto; max-width:1000px;
}
.av-world *{box-sizing:border-box}
.av-world p{font-style:normal}      /* guard: Genesis italicizes entry-content p */

/* -- hero postcard -- */
.av-hero{
  position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--edge);
  background:linear-gradient(180deg, color-mix(in srgb, var(--world) 9%, #0c0e1a), #0c0e1a);
  box-shadow:0 24px 60px rgba(0,0,0,.55),
    inset 0 0 60px color-mix(in srgb, var(--world) 8%, transparent);
}
.av-hero-art{position:relative; height:clamp(210px,40vw,300px); display:block; width:100%}
.av-banner{
  position:absolute; top:16px; left:0; right:0; text-align:center; z-index:2;
  font-family:var(--av-mono); text-transform:uppercase; letter-spacing:.28em;
  font-size:clamp(10px,2.6vw,12px); color:var(--world);
  text-shadow:0 0 10px color-mix(in srgb, var(--world) 50%, transparent);
}
.av-hero-title{position:absolute; left:0; right:0; bottom:54px; text-align:center; z-index:2;}
.av-hero-title h1{margin:0; font-family:var(--av-display); font-weight:600;
  font-size:clamp(30px,8vw,46px); letter-spacing:.01em; text-shadow:0 2px 24px rgba(0,0,0,.6)}
.av-hero-title .sub{color:var(--world); font-size:clamp(12px,3vw,15px); letter-spacing:.2em;
  text-transform:uppercase; font-family:var(--av-mono)}
.av-sense{position:absolute; left:0; right:0; bottom:24px; text-align:center; z-index:2;
  color:var(--muted); font-style:italic; font-size:clamp(12px,3vw,14px)}
.av-stamp{
  position:absolute; top:16px; right:18px; z-index:3; width:74px; height:74px; border-radius:50%;
  border:2px dashed var(--world); display:flex; flex-direction:column; align-items:center;
  justify-content:center; color:var(--world); background:rgba(8,10,22,.5); gap:2px;
}
.av-stamp .eye{font-size:24px; line-height:1}
.av-stamp small{font-size:7px; letter-spacing:.1em; font-family:var(--av-mono); color:var(--muted)}
.av-postmark{
  position:absolute; top:78px; right:30px; z-index:3; width:50px; height:50px; border-radius:50%;
  border:1px solid var(--muted); color:var(--muted); transform:rotate(-12deg);
  display:flex; align-items:center; justify-content:center; text-align:center; line-height:1.05;
  font-size:8px; font-family:var(--av-mono); background:rgba(8,10,22,.35);
}
@media(max-width:480px){
  .av-stamp{width:60px; height:60px; top:12px; right:12px}
  .av-stamp .eye{font-size:19px}
  .av-postmark{width:42px; height:42px; top:66px; right:22px; font-size:7px}
}

/* -- mythology -- */
.av-myth{max-width:680px; margin:26px auto 8px; font-size:clamp(16px,4.4vw,18px); line-height:1.7}
.av-myth p{margin:0 0 14px}

/* -- souvenir shelf -- */
.av-world .av-shelf-label{max-width:680px; margin:30px auto 14px; font-family:var(--av-mono);
  text-transform:uppercase; letter-spacing:.18em; font-size:12px; color:var(--muted);
  display:flex; align-items:center; gap:12px}
.av-world .av-shelf-label::after{content:""; flex:1; height:1px; background:var(--edge)}
.av-world .av-shelf{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px}
.av-world .av-souv{
  background:var(--panel); border:1px solid var(--edge); border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column; padding:0; transition:transform .14s, border-color .2s;
}
.av-world .av-souv:hover{transform:translateY(-4px); border-color:var(--world)}
@media(hover:none){ .av-world .av-souv:hover{transform:none} }
.av-world .av-souv .thumb{height:140px; width:100%;  /* theme sets align-items:center on the card — don't let the thumb shrink */
  background:repeating-linear-gradient(45deg,#171a2c,#171a2c 10px,#14182a 10px,#14182a 20px);
  display:flex; align-items:center; justify-content:center; color:#3c4366; position:relative}
.av-world .av-souv .thumb span{font-size:34px; opacity:.5}
/* gumball glass: shelf souvenirs rest behind a gentle tinted veil —
   arriving at the product page is the bright reveal (Nicole, 2026-07-03) */
.av-world .av-souv .thumb img.av-thumb-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(.72) sepia(.12) brightness(.8) contrast(1.03); transition:filter .35s}
.av-world .av-souv .thumb::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--world); mix-blend-mode:soft-light; opacity:.35; transition:opacity .35s}
.av-world .av-souv:hover .thumb img.av-thumb-img{filter:saturate(.88) sepia(.06) brightness(.9) contrast(1.02)}
.av-world .av-souv:hover .thumb::after{opacity:.18}
.av-world .av-souv.av-gone .claim{color:var(--muted); border-color:var(--edge); font-style:italic}
.av-world .av-souv.av-gone .thumb img.av-thumb-img{filter:grayscale(.6) brightness(.75)}
.av-world .av-souv .body{padding:12px 14px 14px; display:flex; flex-direction:column; gap:8px; flex:1}
.av-world .av-souv h3{margin:0; font-size:16px; font-family:var(--av-display); font-weight:600}
.av-world .av-souv .price{color:var(--world); font-size:14px; font-family:var(--av-mono)}
.av-world .av-souv .claim{
  margin-top:auto; text-align:center; background:transparent; border:1px solid var(--world);
  color:var(--world); padding:10px 8px; min-height:var(--av-tap); border-radius:22px;
  text-decoration:none; font-size:13px; font-family:inherit;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s,color .2s; cursor:pointer;
}
.av-world .av-souv .claim:hover{background:var(--world); color:#0c0e1a}
.av-world .av-souv.head{grid-column:span 2; border-color:var(--world);
  box-shadow:0 0 0 1px var(--world), 0 16px 40px color-mix(in srgb, var(--world) 12%, transparent)}
.av-world .av-souv.head .thumb{height:170px}
.av-world .av-souv.head .badge{position:absolute; top:10px; left:10px; background:var(--world);
  color:#0c0e1a; font-family:var(--av-mono); font-size:10px; letter-spacing:.12em;
  padding:3px 8px; border-radius:20px}
/* duplicate headliner card hidden — the flip postcard IS the headliner */
.av-world .av-souv.head{display:none}
@media(max-width:520px){ .av-world .av-souv.head{grid-column:span 1} }
@media(max-width:380px){ .av-world .av-shelf{grid-template-columns:1fr 1fr; gap:10px}
  .av-world .av-souv .thumb{height:110px} }

/* -- doors + passport -- */
.av-doors{max-width:680px; margin:34px auto 0; display:flex; gap:12px; flex-wrap:wrap; justify-content:center}
.av-world .av-btn{background:var(--world); color:#0c0e1a; border:none;
  padding:12px 24px; min-height:var(--av-tap); border-radius:28px;
  font-family:var(--av-body); font-size:15px; font-weight:700; cursor:pointer; text-decoration:none;
  transition:transform .12s,filter .2s; display:inline-flex; align-items:center; justify-content:center}
.av-world .av-btn:hover{transform:translateY(-2px); filter:brightness(1.08)}
.av-world .av-btn.ghost{background:transparent; color:var(--muted); border:1px solid var(--edge); font-weight:500}
@media(max-width:480px){ .av-doors{flex-direction:column} .av-world .av-btn{width:100%} }
.av-passport{max-width:680px; margin:36px auto 0; text-align:center; color:var(--muted); font-size:13px}
.av-passport .pm{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  width:96px; height:96px; border-radius:50%; border:2px solid var(--world); color:var(--world);
  transform:rotate(-8deg); margin-bottom:8px; font-family:var(--av-mono); gap:2px;
  text-transform:uppercase; letter-spacing:.1em; font-size:10px; text-align:center;
}
.av-passport .pm b{font-size:13px; letter-spacing:.04em}

/* ============================================================
   THE FLIP POSTCARD (headliner) — shared, tinted by --pc-world
   (pages set --pc-world inline; defaults to the world tint)
   ============================================================ */
.pc-stage{font-family:var(--av-body); padding:6px 18px 2px;
  display:flex; flex-direction:column; align-items:center; gap:10px}
.pc-feature-label{font-family:var(--av-mono); text-transform:uppercase; letter-spacing:.18em;
  font-size:12px; color:var(--muted,#9a96a6); margin:22px auto 2px; text-align:center}
.pc{--pc-world:var(--world,#f0c674); --pc-stock:#efe7d3; --pc-ink:#3a3326; --pc-faint:#8a7f63;
  width:380px; max-width:92vw; aspect-ratio:7/5; perspective:1400px; cursor:pointer}
.pc-inner{position:relative; width:100%; height:100%;
  transition:transform .7s cubic-bezier(.3,.8,.25,1); transform-style:preserve-3d}
.pc.flipped .pc-inner{transform:rotateY(180deg)}
/* back-Claim fix: only the VISIBLE face is interactive — the rotated-away
   front face otherwise keeps capturing taps (3D stacking beats z-index) */
.pc .pc-front{pointer-events:auto}
.pc .pc-back{pointer-events:none}
.pc.flipped .pc-front{pointer-events:none}
.pc.flipped .pc-back{pointer-events:auto}
/* iOS Safari fix: WebKit ignores backface-visibility on composited children
   (the z-indexed stamps/banners), so the hidden face bleeds through mirrored.
   Hide the away-facing side outright, swapping at the flip's half-turn. */
.pc .pc-face{visibility:visible; transition:visibility 0s .35s}
.pc:not(.flipped) .pc-back{visibility:hidden}
.pc.flipped .pc-front{visibility:hidden}
/* 2026-07-24 (v7) blank-flip fix: backface-visibility REMOVED from .pc-face.
   The visibility swap above already guarantees only one face is ever shown,
   so backface-visibility was redundant where it worked — and harmful where
   it didn't: Firefox in software rendering (HW accel off/blocklisted GPU)
   flattens preserve-3d, judges .pc-back "facing away" via its own
   rotateY(180deg), and blanks it. Both faces hidden = the blank flip. */
.pc-face{position:absolute; inset:0; border-radius:7px; overflow:hidden;
  background:var(--pc-stock);
  box-shadow:0 18px 40px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.08),
    inset 0 0 0 6px var(--pc-stock), inset 0 0 0 7px rgba(58,51,38,.18)}
.pc-photo{position:absolute; inset:14px; border-radius:4px; overflow:hidden; background:#141019;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.pc-photo img{width:100%; height:100%; object-fit:cover; display:block;
  filter:contrast(1.06) saturate(.78) sepia(.16) brightness(.96)}
.pc-tint{position:absolute; inset:0; mix-blend-mode:soft-light; opacity:.55; background:var(--pc-world)}
.pc-vig{position:absolute; inset:0; box-shadow:inset 0 0 46px 8px rgba(20,12,16,.6); pointer-events:none}
.pc-scrim{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(16,10,14,.82) 0%,rgba(16,10,14,.42) 26%,rgba(16,10,14,0) 50%)}
.pc-banner{position:absolute; left:0; right:0; top:20px; text-align:center; z-index:3;
  font-family:var(--av-display); font-size:23px; letter-spacing:.04em; color:var(--pc-stock);
  text-shadow:0 1px 3px rgba(0,0,0,.9), 0 2px 20px rgba(0,0,0,.75)}
.pc-banner small{display:block; font:600 9px var(--av-mono); letter-spacing:.32em;
  text-transform:uppercase; color:var(--pc-world); margin-bottom:1px}
.pc-caption{position:absolute; left:14px; right:14px; bottom:14px; z-index:3;
  display:flex; justify-content:space-between; align-items:flex-end;
  color:var(--pc-stock); font-size:13px; text-shadow:0 1px 3px rgba(0,0,0,.8)}
.pc-caption b{font-size:15px; font-weight:600}
.pc-caption .ty{font:600 9px var(--av-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--pc-world)}
.pc-stamp{position:absolute; top:14px; right:14px; z-index:4; width:50px; height:58px;
  background:var(--pc-stock); padding:3px; border-radius:2px; box-shadow:0 1px 4px rgba(0,0,0,.4);
  -webkit-mask:radial-gradient(circle at 3px 3px,transparent 2.2px,#000 2.3px) -3px -3px/8px 8px;
  mask:radial-gradient(circle at 3px 3px,transparent 2.2px,#000 2.3px) -3px -3px/8px 8px}
.pc-stamp .in{width:100%; height:100%; border:1px solid var(--pc-world); border-radius:1px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:var(--pc-world)}
.pc-stamp .eye{font-size:20px; line-height:1}
.pc-stamp small{font:600 5.5px var(--av-mono); letter-spacing:.08em; color:var(--pc-faint)}
.pc-postmark{position:absolute; top:30px; right:54px; z-index:5; width:50px; height:50px;
  border-radius:50%; border:1.5px solid rgba(58,51,38,.5); color:rgba(58,51,38,.62);
  transform:rotate(-14deg); display:flex; align-items:center; justify-content:center;
  text-align:center; line-height:1.05; font:600 7px var(--av-mono); letter-spacing:.06em}
.pc-back{transform:rotateY(180deg);
  background:repeating-linear-gradient(0deg,transparent 0 27px,rgba(58,51,38,.10) 27px 28px),var(--pc-stock)}
.pc-back .divide{position:absolute; left:50%; top:18px; bottom:18px; width:1px; background:rgba(58,51,38,.3)}
.pc-back .note{position:absolute; left:16px; top:18px; width:46%; color:var(--pc-ink);
  font-size:13px; line-height:1.55; font-style:italic}
.pc-back .bstamp{position:absolute; top:16px; right:16px; width:46px; height:54px;
  border:1px dashed var(--pc-world); border-radius:2px; display:flex; align-items:center;
  justify-content:center; color:var(--pc-world); font-size:18px}
.pc-back .meta{position:absolute; left:16px; right:16px; bottom:14px;
  display:flex; justify-content:space-between; align-items:center}
.pc-back .meta b{color:var(--pc-ink); font-size:15px}
.pc-back .claim{background:var(--pc-world); color:#1a1209; border:none; border-radius:20px;
  padding:9px 16px; min-height:38px; font:600 12px var(--av-mono); letter-spacing:.06em;
  cursor:pointer; text-decoration:none; display:inline-flex; align-items:center;
  position:relative; z-index:6}   /* back-Claim fix: sits above flip surface */
.pc-hint{font:600 10px var(--av-mono); letter-spacing:.18em; text-transform:uppercase; color:#6f6a60}
.pc-back .addr{position:absolute; right:16px; top:74px; width:44%; color:var(--pc-ink);
  font-size:12px; line-height:1.5}
.pc-back .addr .to{font:700 8.5px var(--av-mono); letter-spacing:.2em; text-transform:uppercase;
  color:var(--pc-faint); margin-bottom:3px}
.pc-back .addr .who{font-size:13px}
.pc-back .addr .epi{font-style:italic; color:var(--pc-faint)}
.pc-back .addr .wld{font:700 9px var(--av-mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--pc-ink); margin-top:3px}
.pc-back .frank{position:absolute; top:34px; right:22px; z-index:5; width:52px; height:52px;
  border-radius:50%; border:1.5px solid rgba(58,51,38,.4); color:rgba(58,51,38,.5);
  transform:rotate(-17deg); display:flex; align-items:center; justify-content:center;
  text-align:center; line-height:1.05; font:700 6.5px var(--av-mono); letter-spacing:.08em}

/* ============================================================
   v8 · 2026-08-07 · S1 postcard heroes (architecture dept)
   Real painted art in the hero frame: <img class="av-hero-art">
   replaces the placeholder SVG on world pages. Optional inline
   --hero-pos on the img tunes the cover-crop. A scrim keeps the
   banner/title legible over bright art; overlays sit above it.
   ============================================================ */
img.av-hero-art{object-fit:cover; object-position:var(--hero-pos,50% 45%)}
.av-hero-scrim{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(12,14,26,.5) 0%, rgba(12,14,26,0) 26%,
    rgba(12,14,26,0) 48%, rgba(12,14,26,.74) 100%)}