/* ============================================================
   AV-CORE · the Alice Vortex design system
   v1.0 · 2026-07-01
   One vocabulary, two layers:
     · KRAFT  — the device you hold (warm blueprint chrome)
     · NIGHT  — what you see through the lens (the vortex dark)
   Loaded site-wide from /wp-content/uploads/vortex/av/av-core.css
   All classes namespaced .av-* so nothing fights Genesis.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* -- KRAFT · the device -- */
  --av-ink:#0E0D0A;
  --av-ink-warm:#1A1714;
  --av-kraft:#C9B98F;
  --av-kraft-dim:#7C7459;
  --av-glow:#E9DCB4;
  --av-amber:#D9B25A;
  --av-mustard:#D99E2B;          /* provenance mustard */

  /* -- NIGHT · through the lens -- */
  --av-night:#0b0c12;
  --av-panel:#14141d;
  --av-panel-2:#1b1b27;
  --av-edge:#2a2a3a;
  --av-edge-2:#2e2e40;
  --av-paper:#e9e6df;            /* ink-on-dark body text */
  --av-mist:#9a96a6;             /* muted */
  --av-screen-bg:#0c0d08;
  --av-screen-edge:#2c2a18;

  /* -- THE NINE (LUME tints, canonical 2026-06-22) -- */
  --av-nocturne:#9ab4ff;
  --av-glasslands:#7fd4c9;
  --av-tea:#e0a86a;
  --av-garden:#b5d98a;
  --av-unbirthday:#f2a7c3;
  --av-cats:#b89cff;
  --av-glimmerward:#39f5c8;
  --av-wallspeak:#ff8a4c;
  --av-loom:#f0c674;

  /* -- the current world (retinted by JS) -- */
  --av-world:#f0c674;

  /* -- TYPE · one system across both layers -- */
  --av-display:"Fraunces",Georgia,serif;
  --av-body:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --av-mono:"IBM Plex Mono",ui-monospace,"Courier New",Menlo,monospace;

  /* -- rhythm -- */
  --av-r-lg:26px; --av-r-md:14px; --av-r-sm:8px;
  --av-tap:44px;                 /* minimum touch target */
}

/* ============ PRIMITIVES ============ */

.av-device{
  box-sizing:border-box;
  width:min(680px,100%); margin-inline:auto;
  background:linear-gradient(180deg,#1a1a26,var(--av-panel));
  border:1px solid var(--av-edge); border-radius:var(--av-r-lg);
  padding:clamp(14px,3.5vw,22px);
  box-shadow:0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
  position:relative; transition:box-shadow .8s ease;
  color:var(--av-paper); font-family:var(--av-body);
}
.av-device *{box-sizing:border-box}
.av-device p{font-style:normal}   /* guard: Genesis italicizes entry-content paragraphs */

/* readout screen — the "you are here" voice, everywhere */
.av-screen{
  background:var(--av-screen-bg); border:1px solid var(--av-screen-edge);
  border-radius:var(--av-r-sm); padding:9px 13px;
  font-family:var(--av-mono); letter-spacing:.12em;
  color:var(--av-world); font-size:12px;
  text-shadow:0 0 8px color-mix(in srgb, var(--av-world) 45%, transparent);
  display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
  transition:color .8s, text-shadow .8s;
}

/* LUME dot */
.av-lume{
  width:46px; height:46px; border-radius:50%; flex:none;
  background:radial-gradient(circle at 35% 30%, #2c2c3a, #0c0c12);
  border:1px solid #33334a; position:relative;
  box-shadow:0 0 0 4px rgba(0,0,0,.3);
}
.av-lume::after{content:""; position:absolute; inset:0; border-radius:50%;
  box-shadow:0 0 14px 2px var(--av-world); opacity:0; transition:opacity .8s}
.av-lit .av-lume::after{opacity:.85}
.av-lume-dot{position:absolute; top:5px; left:50%; width:3px; height:9px; border-radius:2px;
  background:var(--av-world); transform:translateX(-50%)}

/* buttons */
.av-btn{
  display:inline-block; background:var(--av-world); color:#1a1406; border:none;
  min-height:var(--av-tap); padding:12px 26px; border-radius:30px;
  font-family:var(--av-body); font-size:16px; font-weight:700; cursor:pointer;
  letter-spacing:.02em; text-decoration:none; text-align:center;
  transition:transform .12s, filter .2s;
}
.av-btn:hover{transform:translateY(-2px); filter:brightness(1.08)}
.av-btn.av-ghost{background:transparent; color:var(--av-world);
  border:1px solid var(--av-world); font-weight:600}
.av-link{background:none; border:none; color:var(--av-mist); cursor:pointer;
  font-family:var(--av-body); font-size:13px; text-decoration:underline dotted;
  padding:12px 8px; min-height:var(--av-tap)}

/* answer cards (quiz + beats) */
.av-answer{
  display:block; width:100%; text-align:left; background:var(--av-panel-2);
  border:1px solid var(--av-edge-2); color:var(--av-paper);
  min-height:var(--av-tap); padding:14px 16px; border-radius:var(--av-r-md);
  font-size:16px; line-height:1.45; font-family:var(--av-body); cursor:pointer;
  transition:transform .12s, border-color .2s, background .2s;
}
.av-answer:hover{transform:translateY(-2px); border-color:var(--av-world); background:#22222f}
@media(hover:none){ .av-answer:hover{transform:none} }

/* progress pips */
.av-pips{display:flex; gap:7px; margin-top:22px; justify-content:center}
.av-pip{width:8px; height:8px; border-radius:50%; background:#33334a; transition:background .3s}
.av-pip.done{background:var(--av-world)}
.av-pip.active{background:var(--av-world); box-shadow:0 0 8px var(--av-world)}

/* type roles */
.av-kicker{font-family:var(--av-mono); font-size:11px; letter-spacing:.18em;
  color:var(--av-mist); text-transform:uppercase}
.av-title{font-family:var(--av-display); font-weight:600;
  font-size:clamp(20px,5.2vw,26px); line-height:1.3; margin:0}
.av-banner{font-family:var(--av-mono); letter-spacing:.18em; text-transform:uppercase;
  font-size:12px; color:var(--av-world); text-align:center}
.av-provenance{color:var(--av-mustard); font-style:italic}

/* ============ THE POSTCARD ============ */

.av-postcard{
  background:linear-gradient(180deg,#161620,#10101a);
  border:1px solid var(--av-edge); border-radius:var(--av-r-md);
  padding:16px; display:flex; gap:16px; align-items:stretch;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}
.av-stamp{
  width:104px; flex:none; border:2px dashed var(--av-world); border-radius:10px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; color:var(--av-world); background:rgba(255,255,255,.02);
  position:relative; padding:8px 8px 14px; text-align:center;
}
.av-stamp .av-eye{font-size:30px; line-height:1}
.av-stamp small{font-size:9px; letter-spacing:.12em; font-family:var(--av-mono); color:var(--av-mist)}
.av-postmark{position:absolute; bottom:6px; right:6px; font-size:8px; color:var(--av-mist);
  border:1px solid var(--av-mist); border-radius:50%; width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  transform:rotate(-12deg); text-align:center; line-height:1.05; font-family:var(--av-mono)}
.av-insight{flex:1; font-size:16px; line-height:1.6}
@media(max-width:480px){
  .av-postcard{flex-direction:column; align-items:center; text-align:center}
  .av-stamp{width:100%; max-width:220px; flex-direction:row; justify-content:center;
    gap:10px; padding:10px 40px 10px 10px}
  .av-insight{text-align:left}
}

/* flip-postcard back-Claim fix: the claim link must win over the flip handler */
.av-postcard-flip .av-claim{position:relative; z-index:5; pointer-events:auto}

/* ============ SOUVENIR SHELF ============ */

.av-shelf-label{font-family:var(--av-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--av-mist); margin:6px 0 10px}
.av-shelf{display:flex; flex-wrap:wrap; gap:8px}
.av-souv{
  background:var(--av-panel-2); border:1px solid var(--av-edge-2);
  border-left:3px solid var(--av-world); border-radius:var(--av-r-sm);
  padding:10px 12px; font-size:14px; color:var(--av-paper); text-decoration:none;
  min-height:var(--av-tap); display:inline-flex; align-items:center;
}
.av-souv.av-head{background:var(--av-world); color:#1a1406; font-weight:700;
  border-color:var(--av-world)}
.av-growing{color:var(--av-mist); font-size:13px; font-style:italic; margin-top:8px}

/* ============ FIND GRID (skip the nonsense) ============ */

.av-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px}
.av-wcard{background:var(--av-panel-2); border:1px solid var(--av-edge-2);
  border-radius:var(--av-r-md); padding:14px; border-top:4px solid var(--av-world);
  cursor:pointer; transition:transform .12s; min-height:var(--av-tap)}
.av-wcard:hover{transform:translateY(-2px)}
.av-wcard h3{margin:0 0 4px; font-size:16px; font-family:var(--av-display); font-weight:600}
.av-wcard small{color:var(--av-mist); font-size:12px; line-height:1.35; display:block}
@media(max-width:400px){ .av-grid{grid-template-columns:1fr 1fr} }

/* ============ THE WAYPOINT STRIP ============
   Lost-but-findable: a slim readout carried on every page.
   <nav class="av-waypoint" style="--av-world:#9ab4ff">
     <span class="av-wp-slot">SLOT: NOCTURNE</span>
     <span class="av-wp-links"><a href="/worlds/">ATLAS</a>
       <a href="/world/the-unbirthday/" class="av-wp-home">⌂ HOME</a></span>
   </nav>                                                    */
.av-waypoint{
  position:sticky; top:0; z-index:60;
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  background:color-mix(in srgb, var(--av-screen-bg) 92%, transparent);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border-bottom:1px solid var(--av-screen-edge);
  padding:8px 14px; font-family:var(--av-mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--av-world);
}
.av-waypoint a{color:var(--av-mist); text-decoration:none; padding:8px 6px}
.av-waypoint a:hover{color:var(--av-world)}
.av-waypoint .av-wp-home{color:var(--av-unbirthday)}   /* the needle points home */
@media(max-width:480px){ .av-wp-mode{display:none} }   /* phones: SLOT only */

/* ============ UTILITIES ============ */
.av-hidden{display:none !important}
.av-fade{animation:av-fade .8s ease}
@keyframes av-fade{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}