/* ═══════════════════════════════════════════════════════
   PYYROS · standalone stylesheet for Neocities (remaster)
   Pure black + gold. No Tailwind, no build, one file.
   Theme tokens unchanged from the original site.
═══════════════════════════════════════════════════════ */

:root {
  --font-heading: "Cinzel", Georgia, serif;
  --font-body: "Inter", -apple-system, system-ui, sans-serif;
  --nav-h: 66px;
  --wip-h: 30px;
}

/* ── RESET ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }

body {
  background: #000000;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.78;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-width: thin;
  scrollbar-color: #d29c3c transparent;
}

:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #f6d47c, 0 0 18px rgba(210,156,60,.35); }
/* Inset ring survives the cut-corner clip-path on cards/tiles */
.card:focus-visible, .style-card:focus-visible, .gallery-item:focus-visible,
.showcase-tile:focus-visible, .guide-card:focus-visible, .path-card:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px #f6d47c, 0 0 18px rgba(210,156,60,.35);
}
::selection { background: #d29c3c; color: #000; }

a    { color: #ffffff; text-decoration: none; transition: color 0.2s; }
strong { color: #ffffff; font-weight: 600; }
button { font: inherit; }
/* Custom cursor removed: native OS cursor only. */

/* ── SKIP LINK ── */
.skip-link {
  position: fixed;
  top: -100px;
  left: 1rem;
  z-index: 9600;
  background: #000;
  border: 1px solid #d29c3c;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 0.7rem 1.2rem;
  transition: top 0.25s ease;
}
.skip-link:focus { top: 1rem; }

/* ── ATMOSPHERIC LAYERS ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 55% at 50% -5%,  rgba(255,255,255,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 45% 60% at 0%   100%, rgba(255,255,255,0.09) 0%, transparent 50%),
    radial-gradient(ellipse 35% 45% at 100% 55%,  rgba(255,255,255,0.06) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 50% 110%, rgba(210,156,60,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 30% 50% at 92% 92%,  rgba(210,156,60,0.07) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}
/* forge ember sparks - denser, more cinematic */
.forge-embers { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; opacity: 0.85; }
.forge-embers span {
  position: absolute;
  bottom: -10px;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: #f6d47c;
  box-shadow: 0 0 6px rgba(210,156,60,0.8);
  opacity: 0;
  animation: emberRise linear infinite;
}
.forge-embers span:nth-child(3n+1) { background: #fff2d0; box-shadow: 0 0 8px rgba(246,212,124,0.8); }
.forge-embers span:nth-child(5n+2) { width: 3px; height: 3px; box-shadow: 0 0 10px rgba(210,156,60,0.9); }
@keyframes emberRise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 0.9; }
  50%  { opacity: 0.7; transform: translateY(-50vh) translateX(15px); }
  90%  { opacity: 0.5; }
  100% { transform: translateY(-100vh) translateX(25px); opacity: 0; }
}

/* ── PRELOADER ── */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: radial-gradient(ellipse 50% 40% at 50% 55%, rgba(210,156,60,0.10) 0%, transparent 60%), #000000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  transition: opacity 0.9s ease, visibility 0.9s ease;
}
#preloader.done { opacity: 0; visibility: hidden; pointer-events: none; }

.preloader-stage {
  position: relative;
  width: 140px; height: 140px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  animation: fadeIn 0.6s ease 0.15s forwards;
}
/* Preloader gate: title card + temple ring around the mark */
.preloader-kicker {
  font-family: var(--font-heading);
  font-size: 0.58rem;
  letter-spacing: 0.6em;
  text-transform: uppercase;
  color: #d29c3c;
  opacity: 0;
  animation: fadeIn 0.7s ease 0.05s forwards;
  text-shadow: 0 0 14px rgba(210,156,60,0.4);
  margin-left: 0.6em;
}
.preloader-logo {
  position: relative;
  z-index: 2;
  width: 110px; height: 110px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(210,156,60,0.5)) drop-shadow(0 0 4px rgba(210,156,60,0.4));
  animation: logoRise 1s cubic-bezier(0.16,1,0.3,1) 0.2s both;
}
@keyframes logoRise {
  from { opacity: 0; transform: scale(0.8) translateY(8px); filter: blur(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}
.preloader-name {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  letter-spacing: 0.65em;
  color: #ffffff;
  opacity: 0;
  animation: fadeIn 0.6s ease 1.1s forwards;
  text-shadow: 0 0 24px rgba(210,156,60,0.35);
}
.preloader-bar {
  width: 90px; height: 1px;
  background: linear-gradient(90deg, transparent, #d29c3c, transparent);
  transform: scaleX(0);
  animation: scaleIn 0.7s ease 1.3s forwards;
}
.preloader-rune {
  font-family: var(--font-heading);
  font-size: 0.55rem;
  letter-spacing: 0.6em;
  color: #ededed;
  opacity: 0;
  animation: fadeIn 0.6s ease 1.6s forwards;
}
@keyframes scaleIn { to { transform: scaleX(1); } }
@keyframes fadeIn  { to { opacity: 1; } }

#preloader.ready { cursor: pointer; }
#preloader.done { cursor: default; }
.preloader-enter { margin-top: 1.4rem; opacity: 0; animation: fadeIn 0.6s ease 0.1s forwards; }
.preloader-enter-text {
  position: relative;
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.55em;
  text-transform: uppercase;
  color: #f6d47c;
  padding: 0.85rem 1.4rem 0.85rem calc(1.4rem + 0.55em);
  border: 1px solid #d29c3c;
  outline: 1px solid rgba(210,156,60,0.25);
  outline-offset: 5px;
  border-radius: 2px;
  background: rgba(210,156,60,0.06);
  text-shadow: 0 0 12px rgba(210,156,60,0.4);
  box-shadow: 0 0 22px rgba(210,156,60,0.16), inset 0 0 18px rgba(210,156,60,0.06);
  overflow: hidden;
  animation: enterPulse 1.8s ease-in-out infinite;
  transition: color 0.35s, box-shadow 0.35s;
}
.preloader-enter-text::before {
  content: '';
  position: absolute; inset: 0;
  background: #d29c3c;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.4,0,0.2,1);
  z-index: 0;
}
.preloader-enter-text:hover::before,
.preloader-enter-text:focus-visible::before { transform: scaleX(1); }
.preloader-enter-text:hover, .preloader-enter-text:focus-visible { color: #000000; box-shadow: 0 0 32px rgba(210,156,60,0.35); outline: none; }
.preloader-enter-text > span { position: relative; z-index: 1; }
#preloader.ready:hover .preloader-enter-text {
  color: #ffffff; border-color: #ffffff; text-shadow: 0 0 18px rgba(210,156,60,0.7);
}
@keyframes enterPulse { 0%, 100% { opacity: 0.65; } 50% { opacity: 1; } }

/* ── SCROLL PROGRESS ── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, #ffffff, #d29c3c 50%, #f6d47c);
  z-index: 500;
  transition: width 0.1s linear;
  box-shadow: 0 0 12px rgba(210,156,60,0.5), 0 0 30px rgba(210,156,60,0.2);
}

/* ── NAVIGATION ── */
nav.py-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 400;
  padding: 0.9rem 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: rgba(0,0,0,0.94);
  border-bottom: 1px solid rgba(210,156,60,0.12);
}
nav.py-nav::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 5%; right: 5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(210,156,60,0.35), transparent);
}
.nav-brand {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  transition: text-shadow 0.3s ease;
  flex-shrink: 0;
}
.nav-brand:hover, .nav-links a:hover { text-shadow: 0 0 8px rgba(210,156,60,0.6); }
.nav-brand .brand-logo {
  width: 26px; height: 26px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(210,156,60,0.4));
}
.nav-links { display: flex; gap: 2.2rem; list-style: none; }
.nav-links a {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #e8e8e8;
  transition: color 0.3s;
  position: relative;
  display: inline-block;
  padding: 0.4rem 0;
}
/* 7 nav links: tighten up before the burger takes over */
@media (max-width: 1120px) { .nav-links { gap: 1.15rem; } }
@media (max-width: 960px) {
  .nav-links { gap: 0.6rem; }
  .nav-links a { letter-spacing: 0.16em; }
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #d29c3c, #f6d47c);
  box-shadow: 0 0 8px rgba(210,156,60,0.6);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s;
}
.nav-links a:hover { color: #ffffff; }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-links a.active { color: #f6d47c; text-shadow: 0 0 10px rgba(210,156,60,0.5); }
.nav-links a.active::after { transform: scaleX(1); transform-origin: left; }

.nav-actions { display: flex; align-items: center; gap: 0.6rem; }

.nav-library-btn {
  font-family: var(--font-heading);
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(210,156,60,0.08);
  border: 1px solid rgba(210,156,60,0.4);
  padding: 0.55rem 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
  white-space: nowrap;
}
.nav-library-btn:hover {
  background: rgba(210,156,60,0.2);
  border-color: #d29c3c;
  box-shadow: 0 0 22px rgba(210,156,60,0.25);
  color: #ffffff;
}
.nav-library-btn .lib-key { font-size: 0.8rem; line-height: 1; color: #d29c3c; }

.nav-burger {
  display: none;
  width: 38px; height: 38px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(210,156,60,0.4);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;
}
.nav-burger span { width: 18px; height: 1.5px; background: #d29c3c; transition: transform 0.3s, opacity 0.3s; }
.nav-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── WORK IN PROGRESS BANNER ── */
.wip-banner {
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  min-height: 30px;
  z-index: 390;
  background: linear-gradient(180deg, #f7cf3a 0%, #eec10f 100%);
  border-top: 1px solid rgba(0,0,0,0.4);
  border-bottom: 1px solid rgba(0,0,0,0.5);
  overflow: hidden;
  display: flex;
  align-items: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}
/* police-tape edges: hazard stripes march while the headline scrolls */
.wip-banner::before, .wip-banner::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 5px;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(-45deg, #141414 0 10px, rgba(20,20,20,0) 10px 20px);
  background-size: 28px 100%;
  animation: tapeMarch 2.4s linear infinite;
}
.wip-banner::before { top: 0; }
.wip-banner::after { bottom: 0; }
@keyframes tapeMarch { to { background-position: 28px 0; } }
.wip-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: wip-scroll 32s linear infinite;
  will-change: transform;
}
.wip-copy { display: flex; align-items: center; flex-shrink: 0; }
.wip-item {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-heading);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #141414;
  white-space: nowrap;
}
/* construction separator: plain type, no icon */
.wip-sep { margin: 0 1.6rem; letter-spacing: 0.2em; opacity: 0.7; flex-shrink: 0; }
/* gallery tiles carry absolute badges (set numbers) */
.gallery-item { position: relative; }
/* set number tag (organizing aid) - bottom-left, on the black */
.tile-num {
  position: absolute; left: 0.6rem; bottom: 0.5rem; z-index: 3;
  font-family: var(--font-heading);
  font-size: 1rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #f6d47c;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.9), 0 0 4px #000;
  pointer-events: none;
}
/* vote flash: green = saved, red = failed. Short hue instead of a popup. */
.vote-flash-ok { border-color: #35d07f !important; box-shadow: 0 0 16px rgba(53,208,127,0.55) !important; }
.vote-flash-err { border-color: #ff5d5d !important; box-shadow: 0 0 16px rgba(255,93,93,0.55) !important; }
@keyframes wip-scroll { from { transform: translateX(-50%); } to { transform: translateX(0); } }

@media (max-width: 900px) {
  nav.py-nav { padding: 0.9rem 1.1rem; flex-wrap: wrap; }
  .nav-links {
    order: 5;
    width: 100%;
    flex-direction: column;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
  }
  .nav-links.open {
    max-height: calc(100vh - 120px);
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    margin-top: 0.9rem;
  }
  .nav-links li { border-top: 1px solid rgba(255,255,255,0.08); }
  .nav-links a { display: block; padding: 0.85rem 0.25rem; }
  .nav-burger { display: flex; }
  .nav-library-btn span:not(.lib-key) { display: none; }
  .nav-library-btn { padding: 0.55rem 0.7rem; }
}

/* ── HERO ── */
#hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  z-index: 1;
  contain: layout paint;
}
#hero::before {
  content: ''; position: absolute; top: 10%; left: 50%;
  transform: translateX(-50%);
  width: 60%; height: 50%;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(210,156,60,0.06), transparent 70%);
  pointer-events: none; z-index: 0;
}
#hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero-content { position: relative; z-index: 2; padding: 7rem 2rem 5rem; }

.hero-name {
  font-family: var(--font-heading);
  font-size: clamp(3.5rem, 11vw, 9rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  color: #ffffff;
  opacity: 0;
  animation: heroReveal 1.3s cubic-bezier(0.16,1,0.3,1) 0.7s forwards;
  margin-bottom: 1.25rem;
}
.hero-eyebrow {
  font-family: var(--font-heading);
  font-size: clamp(0.7rem, 2.5vw, 0.95rem);
  font-weight: 400;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: #ededed;
  opacity: 0;
  animation: fadeUp 0.9s ease 0.2s forwards;
  margin-bottom: 0.5rem;
}
/* PYYROS stays marble white - Greek monument, gold temple around it. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-name {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    background: none;
  }
}

/* ── CINEMATIC (Greek temple epic, vanilla, transform/opacity only) ── */
/* Letterbox bars: closed on load, slide away on Enter */
.cine-bar { position: fixed; left: 0; right: 0; height: 8vh; min-height: 44px; background: #000; z-index: 8500; pointer-events: none; transition: transform 1.4s cubic-bezier(0.16,1,0.3,1); }
.cine-top { top: 0; transform: translateY(0); border-bottom: 1px solid rgba(210,156,60,0.4); }
.cine-bottom { bottom: 0; transform: translateY(0); border-top: 1px solid rgba(210,156,60,0.4); }
body.cine-open .cine-top { transform: translateY(-101%); }
body.cine-open .cine-bottom { transform: translateY(101%); }
/* God rays above hero canvas */
.hero-rays {
  position: absolute; inset: 0;
  background: conic-gradient(from 180deg at 50% 0%, transparent 42%, rgba(246,212,124,0.10) 47%, rgba(255,255,255,0.08) 50%, rgba(246,212,124,0.10) 53%, transparent 58%);
  filter: blur(3px);
  pointer-events: none; z-index: 1;
}
/* Temple torch flicker on corner brackets */
.gk-bracket { animation: torchFlicker 4.5s ease-in-out infinite; }
.gk-bracket.gk-tr { animation-delay: -1.2s; }
.gk-bracket.gk-bl { animation-delay: -2.3s; }
.gk-bracket.gk-br { animation-delay: -3.1s; }
@keyframes torchFlicker { 0%, 100% { opacity: 0.95; } 30% { opacity: 1; } 45% { opacity: 0.88; } 60% { opacity: 0.98; } }
/* Scroll camera: hero drifts + fades as you descend */
.hero-content { will-change: transform, opacity; }
body.cine-open .hero-content { transform: translateY(calc(var(--scroll, 0) * -0.12px)); opacity: calc(1 - var(--scroll, 0) / 900); }
/* Chapter glow: section label ignites in spotlight */
section.py-section.in-spot .section-label { text-shadow: 0 0 18px rgba(210,156,60,0.8); }
/* Enter flash: white-gold strike on click-through */
body.cine-flash #hero::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 50% 45%, rgba(255,242,208,0.55), transparent 70%);
  animation: flashFade 0.9s ease forwards;
}
@keyframes flashFade { from { opacity: 1; } to { opacity: 0; } }
@keyframes heroReveal {
  from { opacity: 0; transform: translateY(28px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}
.hero-rule {
  display: flex; align-items: center; gap: 1.2rem;
  width: min(480px, 90%);
  margin: 0 auto 1.6rem;
  opacity: 0;
  animation: fadeUp 0.9s ease 1.1s forwards;
}
.hero-rule-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #d29c3c, transparent); }
.hero-rule-orn { font-size: 0.65rem; color: #d29c3c; flex-shrink: 0; }
/* Greek motto below name - sacred, not decorative */
.motto-heart {
  display: inline-block;
  background: linear-gradient(115deg, #c81e1e 20%, #ff5d5d 38%, #ffd9d9 50%, #ff5d5d 62%, #c81e1e 80%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 5px rgba(255, 70, 70, 0.65));
  animation: heartShine 3.2s linear infinite, heartGlow 3.2s ease-in-out infinite;
}
@keyframes heartShine {
  from { background-position: 200% 0; }
  to { background-position: -120% 0; }
}
@keyframes heartGlow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 70, 70, 0.55)); }
  50% { filter: drop-shadow(0 0 14px rgba(255, 90, 90, 0.95)); }
}
.hero-motto {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 3.2vw, 1.7rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #ffffff;
  text-align: center;
  opacity: 0;
  animation: fadeUp 0.9s ease 1.3s forwards;
  margin-bottom: 3.6rem;
}
/* (motto stands alone: no flanking marks) */
.stat { text-align: center; }
.stat-num {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.8rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 30px rgba(255,255,255,0.32), 0 0 60px rgba(210,156,60,0.38);
}
.stat-lbl {
  font-family: var(--font-heading);
  font-size: 0.56rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #d4d4d4;
  margin-top: 0.4rem;
  display: block;
}
.stat-divider { font-size: 1.2rem; color: #d29c3c; opacity: 0.85; text-shadow: 0 0 12px rgba(210,156,60,0.4); }
.hero-stats {
  display: flex; align-items: center; gap: 2.5rem;
  flex-wrap: wrap; justify-content: center;
  opacity: 0;
  animation: fadeUp 0.9s ease 1.5s forwards;
  margin-bottom: 3.8rem;
  padding: 1.8rem 2.5rem;
  border: 1px solid rgba(210,156,60,0.15);
  background: linear-gradient(180deg, rgba(210,156,60,0.04) 0%, transparent 60%);
  position: relative;
}
.hero-stats::before {
  content: '';
  position: absolute; top: 0; left: 15%; right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d29c3c, transparent);
}
.hero-cta {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.9rem 2.4rem;
  color: #ededed;
  font-family: var(--font-heading);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid rgba(210,156,60,0.45);
  background: rgba(210,156,60,0.04);
  opacity: 0;
  animation: fadeUp 0.9s ease 1.85s forwards;
  transition: color 0.3s, border-color 0.3s, background 0.3s, box-shadow 0.4s;
}
.hero-cta svg { width: 16px; color: #d29c3c; transition: color 0.3s; animation: bobDown 2.2s ease infinite; }
.hero-cta:hover { color: #ffffff; border-color: #d29c3c; background: rgba(210,156,60,0.1); box-shadow: 0 0 30px rgba(210,156,60,0.28), inset 0 0 20px rgba(210,156,60,0.1); }
.hero-cta:hover svg { color: #f6d47c; }
@keyframes bobDown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
/* ctaGlow keyframes (kept: the force-motion restatement below uses them) */
@keyframes ctaGlow {
    0%, 100% { box-shadow: 0 0 0 rgba(210,156,60,0); }
    50%      { box-shadow: 0 0 28px rgba(210,156,60,0.45); }
}

/* blink kept: used by #music-btn.loading .note */
@keyframes blink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.6); } }

/* ── LAYOUT ── */
.section-wrap { position: relative; z-index: 1; }
section.py-section {
  max-width: 880px; margin: 0 auto; padding: 5.5rem 2rem;
  position: relative;
}
section.py-section.wide { max-width: 1060px; }
section[id], div[id="hero"] { scroll-margin-top: 104px; }

/* ── TYPOGRAPHY ── */
.section-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.61rem;
  letter-spacing: 0.56em;
  text-transform: uppercase;
  color: #e8b34a;
  margin-bottom: 0.65rem;
  text-shadow: 0 0 16px rgba(210,156,60,0.6);
}
h2.py-h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.15;
  margin-bottom: 1.5rem;
  letter-spacing: 0.05em;
  text-shadow: 0 0 20px rgba(210,156,60,0.3), 0 0 40px rgba(210,156,60,0.12);
}
h3.py-h3 {
  font-family: var(--font-heading);
  font-size: 0.87rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 0.65rem;
  margin-top: 2rem;
  text-shadow: 0 0 15px rgba(210,156,60,0.25);
}
p.py-p { color: #ffffff; margin-bottom: 1.1rem; }

/* ── ORNAMENT ── */
.ornament { display: flex; align-items: center; gap: 1rem; margin: 3rem 0; }
.ornament-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(210,156,60,0.35), transparent); }
.ornament-mark { font-size: 0.75rem; color: #d29c3c; text-shadow: 0 0 8px rgba(210,156,60,0.4); }
.hr-subtle { border: none; height: 1px; background: linear-gradient(90deg, transparent, rgba(210,156,60,0.4), transparent); margin: 2.5rem 0; }

/* ── CALLOUT ── */
.callout {
  border-left: 2px solid #d29c3c;
  padding: 1.1rem 1.6rem;
  background: rgba(210,156,60,0.05);
  font-style: italic;
  color: #e8e8e8;
  margin: 1.5rem 0;
  font-size: 1rem;
}

/* ── ABOUT CARDS ── */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2rem; }
@media (max-width: 620px) { .two-col { grid-template-columns: 1fr; } }

.card {
  background: linear-gradient(180deg, rgba(10,10,10,0.92), rgba(0,0,0,0.92));
  border: 1px solid rgba(210,156,60,0.28);
  padding: 1.75rem;
  position: relative;
  transition: transform 0.5s ease, border-color 0.3s, box-shadow 0.4s;
  overflow: hidden;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.card:hover { border-color: rgba(210,156,60,0.55); box-shadow: 0 0 28px rgba(210,156,60,0.12), inset 0 0 30px rgba(210,156,60,0.05); }
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 1.5rem;
  width: 54px; height: 2px;
  background: linear-gradient(90deg, #d29c3c, #f6d47c, transparent);
}
.card::after {
  content: '';
  position: absolute;
  top: 8px; right: 8px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #d29c3c;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
  pointer-events: none;
  opacity: 0.7;
}
.card h3 { margin-top: 0; font-size: 0.78rem; text-shadow: 0 0 10px rgba(210,156,60,0.15); }
.card p  { font-size: 0.93rem; margin: 0; color: #ffffff; }

/* ── GIFT BLOCK ── */
.gift-block {
  display: flex; gap: 1rem; align-items: flex-start;
  background: rgba(210,156,60,0.05);
  border: 1px solid rgba(210,156,60,0.22);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
}
.gift-icon { font-size: 1rem; color: #d29c3c; flex-shrink: 0; padding-top: 0.2rem; }
.gift-block p { margin: 0; font-size: 0.95rem; color: #ffffff; text-shadow: 0 0 10px rgba(255,255,255,0.3); }
.gift-block em { color: #f6d47c; font-style: normal; font-family: var(--font-heading); font-size: 0.84em; letter-spacing: 0.05em; }

/* ── WHO IS WHO (PYYROS vs the Guild) ── */
.who-is-who {
  margin-top: 2rem;
  padding: 1.75rem 1.9rem;
  background:
    radial-gradient(ellipse 80% 90% at 50% 0%, rgba(210,156,60,0.06), transparent 70%),
    linear-gradient(180deg, rgba(10,10,10,0.85), rgba(0,0,0,0.85));
  border: 1px solid rgba(210,156,60,0.3);
  position: relative;
}
.who-is-who::before {
  content: '';
  position: absolute;
  top: 0; left: 2rem; right: 2rem;
  height: 2px;
  background: linear-gradient(90deg, transparent, #d29c3c, transparent);
}
.who-is-who::after {
  content: '✦';
  position: absolute;
  top: -0.55rem;
  left: 50%;
  transform: translateX(-50%);
  background: #000;
  color: #d29c3c;
  font-size: 0.7rem;
  padding: 0 0.6rem;
  text-shadow: 0 0 12px rgba(210,156,60,0.6);
}
.who-is-who h3 { margin-top: 0; }
.who-is-who p { font-size: 0.95rem; margin-bottom: 0.9rem; color: #e8e8e8; text-shadow: 0 0 10px rgba(255,255,255,0.3); }
.who-is-who p:last-child { margin-bottom: 0; }
.who-is-who em { color: #f6d47c; font-style: normal; font-family: var(--font-heading); font-size: 0.86em; letter-spacing: 0.04em; }

/* ── WORKED WITH (the record) ── */
.worked-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2rem; }
@media (max-width: 760px) { .worked-grid { grid-template-columns: 1fr; } }
/* One fixed pattern for every card: the studio link on its own
   row, the verdict chip always on the row below it. No wrapping
   surprises, identical geometry card to card. */
.worked-head { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.worked-link { display: inline-flex; align-items: center; gap: 0.85rem; color: #ffffff; min-width: 0; max-width: 100%; }
.worked-link:hover .worked-name, .worked-link:hover .worked-ext { color: #f6d47c; }
.worked-logo {
  width: 56px; height: 56px;
  object-fit: contain;
  border: 1px solid rgba(210,156,60,0.25);
  background: rgba(255,255,255,0.04);
  padding: 0.4rem;
  flex-shrink: 0;
  transition: border-color 0.3s;
}
.worked-link:hover .worked-logo { border-color: rgba(210,156,60,0.55); }
.worked-logo.on-light { background: #efe9dd; border-color: rgba(210,156,60,0.35); }
/* The waylesssad mark is a wide wordmark (about 6.3:1). It gets a
   wide ivory plate the same height as the square logo boxes, and
   object-fit: contain letterboxes it inside - never a squashed
   sliver, never an empty bar. Explicit width + height only: no
   aspect-ratio (border-box + padding + height:auto collapsed the
   image area to ~3px before). */
.worked-logo.wide { width: 190px; height: 56px; padding: 0.45rem 0.7rem; }
.worked-name {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d29c3c;
  transition: color 0.25s;
}
.worked-ext { font-size: 0.7rem; color: #adadad; transition: color 0.25s; flex-shrink: 0; }
.worked-chip {
  align-self: flex-start;
  font-family: var(--font-heading);
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #f6d47c;
  border: 1px solid rgba(210,156,60,0.38);
  padding: 0.34rem 0.66rem;
  white-space: nowrap;
}
.worked-quote { margin: 1.05rem 0 0; font-size: 0.93rem; color: #ededed; }
.worked-card.negative { border-color: rgba(225,90,90,0.26); }
.worked-card.negative:hover { border-color: rgba(225,90,90,0.5); box-shadow: 0 0 28px rgba(225,90,90,0.1), inset 0 0 30px rgba(225,90,90,0.04); }
.worked-card.negative::before { background: linear-gradient(90deg, #c76e6e, #e0a0a0, transparent); }
.worked-card.negative .worked-chip { color: #d99a9a; border-color: rgba(225,90,90,0.42); }
.worked-card.negative .worked-logo { filter: grayscale(1) opacity(0.75); }
.worked-card.negative .worked-name { color: #b98a8a; }

/* ── PRICING ── */
.price-banner {
  background: linear-gradient(135deg, rgba(210,156,60,0.12), rgba(210,156,60,0.04) 50%, rgba(255,255,255,0.06));
  border: 1px solid rgba(210,156,60,0.4);
  padding: 2.75rem 2rem;
  text-align: center;
  position: relative;
  margin: 2rem 0;
  overflow: hidden;
  transition: transform 0.5s ease;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.price-banner::before, .price-banner::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #d29c3c 30%, #f6d47c 50%, #d29c3c 70%, transparent);
}
.price-banner::before { top: 0; }
.price-banner::after  { bottom: 0; }
.price-banner-bg { position: absolute; inset: 0; pointer-events: none; }
.price-big {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 6.5vw, 4.4rem);
  font-weight: 700;
  color: #ffffff;
  display: block;
  line-height: 1;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 30px rgba(210,156,60,0.3), 0 2px 0 rgba(0,0,0,0.5);
}
.price-note { font-family: var(--font-heading); font-size: 0.69rem; letter-spacing: 0.3em; text-transform: uppercase; color: #e8e8e8; margin: 0; }
.lego-block {
  background: linear-gradient(180deg, rgba(10,10,10,0.92), rgba(0,0,0,0.92));
  border: 1px solid rgba(210,156,60,0.2);
  padding: 1.5rem 1.75rem 1.5rem 2rem;
  margin: 1.5rem 0;
  position: relative;
  font-style: italic;
  color: #e8e8e8;
  font-size: 1rem;
}
.lego-block::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(to bottom, #d29c3c, #f6d47c, #d29c3c); }
.price-foot { font-size: 0.93rem; color: #ededed; }

/* ── STYLE CARDS ── */
.style-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 1.25rem; margin-top: 2rem; }
.style-card {
  background: linear-gradient(180deg, rgba(10,10,10,0.92), rgba(0,0,0,0.92));
  border: 1px solid rgba(210,156,60,0.2);
  padding: 1.75rem;
  position: relative;
  transition: transform 0.5s ease, border-color 0.3s, box-shadow 0.4s;
  overflow: hidden;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.style-card:hover { border-color: rgba(210,156,60,0.5); box-shadow: 0 0 26px rgba(210,156,60,0.1); }
.style-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, #d29c3c, transparent); }
.style-tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.55rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #000000;
  background: #d29c3c;
  padding: 0.2rem 0.65rem;
  margin-bottom: 0.75rem;
}
.style-card h3 { margin-top: 0.5rem; font-size: 0.87rem; text-shadow: 0 0 10px rgba(210,156,60,0.15); }
.style-card > p { font-size: 0.92rem; color: #ededed; }
.caveats { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(210,156,60,0.2); }
.cav { font-size: 0.87rem; color: #ededed; padding-left: 1.1rem; position: relative; margin-bottom: 0.45rem; line-height: 1.55; }
.cav::before { content: '✦'; position: absolute; left: 0; color: #d29c3c; font-size: 0.6rem; top: 0.28em; }
.style-common { margin-top: 0.75rem; font-size: 0.77rem; color: #d29c3c; font-family: var(--font-heading); letter-spacing: 0.05em; font-style: italic; }

/* ── GALLERY ── */
/* Two layers: the front showcase shows ten teaser tiles in three
   style groups (.showcase-tile); every real tile (.gallery-item,
   31 sets, no reserved frames left) lives inside the gallery
   room overlay. Both share the same tile look. */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 210px; gap: 1.25rem; margin-top: 2rem; }
@media (max-width: 980px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; } }
@media (max-width: 680px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; } }
@media (max-width: 440px) { .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 200px; } }
.showcase-front { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; gap: 1.25rem; margin-top: 2rem; }
@media (max-width: 980px) { .showcase-front { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 170px; } }
@media (max-width: 680px) { .showcase-front { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; } }
@media (max-width: 440px) { .showcase-front { grid-template-columns: 1fr; grid-auto-rows: 200px; } }

.gallery-item, .showcase-tile {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(210,156,60,0.22);
  background: rgba(10,10,10,0.8);
  transition: border-color 0.35s, transform 0.4s, box-shadow 0.35s;
}
.showcase-tile { padding: 0; font: inherit; text-align: left; display: block; width: 100%; height: 100%; }
.gallery-item:hover, .showcase-tile:hover {
  border-color: rgba(210,156,60,0.65);
  transform: scale(1.01);
}
.gallery-item:focus-visible, .showcase-tile:focus-visible {
  border-color: rgba(210,156,60,0.65);
  transform: scale(1.01);
  outline: none;
  box-shadow: inset 0 0 0 2px #f6d47c, 0 0 22px rgba(210,156,60,0.35);
}
.gallery-item.featured { grid-column: span 2; grid-row: span 2; }
@media (max-width: 440px) {
  .gallery-item.featured { grid-column: span 1; grid-row: span 1; }
}
.gallery-inner { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; }
.gallery-inner img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform 0.55s ease; padding: 6px; }
.gallery-item:hover img, .showcase-tile:hover img { transform: scale(1.05); }

/* ── GALLERY LUXE (shine + masterwork + filter + edge-light + grain) ── */
.gallery-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 42%, rgba(246,212,124,0.16) 50%, transparent 58%);
  transform: translateX(-150%);
  transition: transform 0.7s ease;
  pointer-events: none;
  z-index: 2;
}
.gallery-item:hover .gallery-inner::before, .showcase-tile:hover .gallery-inner::before,
.gallery-item:focus-visible .gallery-inner::before, .showcase-tile:focus-visible .gallery-inner::before { transform: translateX(150%); }
.gallery-item.vacant .gallery-inner::before { content: none; }
@media (hover: none) { .gallery-inner::before { display: none; } }
.gallery-filter { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; margin-top: 1.25rem; }
.gallery-filter button {
  font-family: var(--font-heading);
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #ededed;
  background: rgba(10,10,10,0.6);
  border: 1px solid rgba(210,156,60,0.35);
  padding: 0.55rem 1rem;
}
.gallery-filter button[aria-pressed="true"] { background: #d29c3c; color: #000; border-color: #d29c3c; }
.gallery-count { width: 100%; text-align: center; color: #d4d4d4; font-size: 0.75rem; margin-top: 0.5rem; min-height: 1.2em; }
.card, .style-card, .worked-card, .guide-card, .path-card { --mx: 50%; --my: 50%; }
.tilt-card:hover {
  border-color: rgba(246,212,124,0.65);
  box-shadow: 0 0 0 1px rgba(246,212,124,0.25), 0 0 26px rgba(210,156,60,0.15);
  background-image: radial-gradient(240px at var(--mx) var(--my), rgba(246,212,124,0.12), transparent 60%);
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.07;
  /* vignette only: the SVG noise tile is retired - on weak GPUs the
     extra fullscreen texture sample per composite cost more than the film feel */
  background-image:
    radial-gradient(ellipse 110% 80% at 50% 35%, transparent 50%, rgba(0,0,0,0.65));
}
@media (max-width: 680px) { body::after { opacity: 0.05; } }
section.py-section::before {
  content: attr(data-num);
  position: absolute;
  top: -1.2rem; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-heading);
  font-size: clamp(4rem, 14vw, 11rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(210,156,60,0.07);
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
  transition: -webkit-text-stroke 0.8s ease;
}
section.py-section.in-spot::before { -webkit-text-stroke: 1px rgba(210,156,60,0.14); }
section.py-section::after {
  content: '';
  position: absolute;
  inset: -2rem 0;
  pointer-events: none;
  background: radial-gradient(50% 30% at 50% 0%, rgba(210,156,60,0.12), transparent 70%);
  opacity: 0;
  transition: opacity 0.8s ease;
}
section.py-section.in-spot::after { opacity: 1; }
/* Card ignite cascade: when a section reveals, its cards catch fire in sequence.
   Backwards fill only - hover styles reclaim the cards the instant it ends. */
@keyframes cardIgnite {
  from { border-color: rgba(246,212,124,0.75); box-shadow: 0 0 26px rgba(210,156,60,0.22), inset 0 0 24px rgba(210,156,60,0.08); }
  to   { border-color: rgba(210,156,60,0.28); box-shadow: none; }
}
/* (card ignite cascade lives only in the force-motion restatement below) */

/* ── GALLERY DOOR (front showcase -> gallery room) ── */
.gallery-door {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  width: 100%;
  margin-top: 1.75rem;
  padding: 1.45rem 2rem;
  background: linear-gradient(135deg, rgba(210,156,60,0.1), rgba(210,156,60,0.03) 50%, rgba(255,255,255,0.04));
  border: 1px solid rgba(210,156,60,0.4);
  transition: border-color 0.35s, box-shadow 0.35s;
}
.gallery-door:hover {
  border-color: #d29c3c;
  box-shadow: 0 0 26px rgba(210,156,60,0.14), inset 0 0 30px rgba(210,156,60,0.05);
}
.gallery-door:focus-visible {
  border-color: #d29c3c;
  outline: none;
  box-shadow: inset 0 0 0 2px #f6d47c, 0 0 26px rgba(210,156,60,0.35);
}
.gd-orn { color: #d29c3c; font-size: 0.7rem; text-shadow: 0 0 8px rgba(210,156,60,0.7); }
.gd-text { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.gd-main {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #ffffff;
}
.gd-sub { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: #8a8a8a; }
@media (max-width: 640px) {
  .gallery-door { flex-direction: column; gap: 0.9rem; padding: 1.3rem 1rem; }
  .gd-orn.gd-top { display: none; }
}

/* ── GALLERY ROOM (overlay holding the full grid) ── */
#gallery-overlay {
  position: fixed;
  inset: 0;
  z-index: 700;
  background: rgba(0,0,0,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
#gallery-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transition: opacity 0.5s ease, visibility 0s;
}
.gallery-view {
  position: relative;
  width: min(1100px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(10,10,10,0.95), rgba(0,0,0,0.98));
  border: 1px solid rgba(210,156,60,0.3);
  padding: 2.75rem 2.25rem 2.5rem;
  transform: translateY(24px) scale(0.985);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1), opacity 0.5s ease;
}
#gallery-overlay.active .gallery-view { transform: translateY(0) scale(1); opacity: 1; }
.gallery-view::before, .gallery-view::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; }
.gallery-view::before, .gallery-view::after { content: none; }
.gallery-view-head { text-align: center; margin-bottom: 0.4rem; }
.gallery-view-title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3.6vw, 2.2rem);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.1em;
}
.gallery-view-sub { font-size: 0.9rem; color: #dedede; margin: 0.65rem auto 0; max-width: 520px; }
@media (max-width: 640px) {
  .gallery-view { padding: 2.5rem 1.1rem 2rem; }
  #gallery-overlay { padding: 1rem; }
}

/* ── VACANT SHOWCASE SLOTS ──
   Tiles reserved for future uploads: the referenced
   images/<slot>.png does not exist yet, so JS turns the
   tile into this numbered placeholder. Uploading the
   file fills the tile back in. */
.gallery-item.vacant {
  cursor: default;
  border: 1px dashed rgba(210,156,60,0.2);
  background: rgba(8,8,8,0.85);
}
.gallery-item.vacant:hover, .gallery-item.vacant:focus-visible {
  border-color: rgba(210,156,60,0.32);
  transform: none;
  box-shadow: none;
}
.gallery-item.vacant::after { content: none; }
.gallery-item.vacant .gallery-inner { flex-direction: column; gap: 0.35rem; }
.vacant-no {
  font-family: var(--font-heading);
  font-size: 1.55rem;
  color: rgba(210,156,60,0.7);
  letter-spacing: 0.1em;
  line-height: 1;
}
.vacant-file {
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #c8c8c8;
  line-height: 1;
}

/* ── LIGHTBOX ── */
/* No backdrop-filter anywhere on the overlays: blurring the
   whole viewport every frame is what made the page crawl (and
   over content-visibility sections it painted the backdrop
   flat black). A plain translucent dim is indistinguishable at
   these opacities and costs nothing. Closed overlays also get
   visibility:hidden so they leave the render tree entirely. */
#lightbox {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: rgba(0,0,0,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.5rem 4.5rem 5rem;
  padding: 2rem max(1rem, env(safe-area-inset-right)) 3rem max(1rem, env(safe-area-inset-left));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
#lightbox.active { opacity: 1; visibility: visible; pointer-events: all; transition: opacity 0.4s ease, visibility 0s; }
.lb-figure {
  max-width: min(1100px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  transform: scale(0.97);
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
#lightbox.active .lb-figure { transform: scale(1); }
#lb-img {
  max-width: min(92vw, 100%);
  max-height: calc(100vh - 9rem);
  object-fit: contain;
  image-rendering: pixelated;
  border: 1px solid rgba(210,156,60,0.5);
  outline: 4px double rgba(210,156,60,0.5);
  outline-offset: 6px;
  background: #050505;
  box-shadow: 0 0 80px rgba(210,156,60,0.18);
}
.lb-caption {
  display: flex; align-items: center; gap: 0.9rem;
  font-family: var(--font-heading);
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #ededed;
}
.lb-orn { color: #d29c3c; }
#lb-count { color: #f6d47c; font-variant-numeric: tabular-nums; }
#lb-style { color: #d29c3c; letter-spacing: 0.28em; font-size: 0.58rem; }
.lb-close {
  position: absolute;
  top: 1.2rem; right: 1.2rem;
  background: none;
  border: 1px solid rgba(210,156,60,0.35);
  color: #ededed;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem;
  transition: color 0.2s, border-color 0.2s, transform 0.2s;
}
.lb-close:hover { color: #ffffff; border-color: #d29c3c; transform: rotate(90deg); }
.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(10,10,10,0.7);
  border: 1px solid rgba(210,156,60,0.3);
  color: #d29c3c;
  width: 46px; height: 46px;
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.lb-nav svg { width: 20px; }
.lb-nav:hover { color: #ffffff; border-color: #d29c3c; background: rgba(210,156,60,0.12); }
.lb-prev { left: 1.2rem; }
.lb-next { right: 1.2rem; }
@media (max-width: 640px) {
  #lightbox { padding: calc(3rem + env(safe-area-inset-top)) max(0.5rem, env(safe-area-inset-right)) calc(5rem + env(safe-area-inset-bottom)) max(0.5rem, env(safe-area-inset-left)); }
  .lb-nav { top: auto; bottom: 1rem; transform: none; }
  .lb-prev { left: calc(50% - 60px); }
  .lb-next { right: calc(50% - 60px); }
}

/* ── GROUND RULES ── */
.rules { list-style: none; margin-top: 2rem; }
.rules li {
  padding: 1.35rem 1.5rem;
  border-left: 2px solid rgba(210,156,60,0.4);
  margin-bottom: 0.75rem;
  background: rgba(10,10,10,0.5);
  transition: border-color 0.3s, background 0.3s;
}
.rules li:hover { border-left-color: #d29c3c; background: rgba(10,10,10,0.75); }
.rule-title {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.71rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #f6d47c;
  margin-bottom: 0.35rem;
}
.rules li p { font-size: 0.93rem; color: #ededed; margin: 0 0 0.5rem; }
.rules li p:last-child { margin-bottom: 0; }

/* ── PRO BLOCK (red accent, professional tier) ── */
.pro-block { background: rgba(80,80,80,0.07); border: 1px solid rgba(80,80,80,0.24); padding: 1.75rem; margin-top: 2rem; position: relative; }
.pro-block::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #ff3333, transparent); }
.pro-block .section-label { color: #ededed; }

/* ── READER'S MARK ── */
.reader-mark {
  margin-top: 2rem;
  padding: 1.6rem 1.75rem;
  background: radial-gradient(ellipse 70% 80% at 50% 40%, rgba(210,156,60,0.06), transparent 70%), linear-gradient(180deg, rgba(10,10,10,0.6), rgba(0,0,0,0.6));
  border: 1px dashed rgba(210,156,60,0.3);
  text-align: center;
  position: relative;
}
.reader-mark::before {
  content: '';
  position: absolute;
  top: -6px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px; height: 10px;
  background: #d29c3c;
  box-shadow: 0 0 12px rgba(210,156,60,0.6);
}
.reader-mark-eyebrow { display: block; font-family: var(--font-heading); font-size: 0.56rem; letter-spacing: 0.4em; text-transform: uppercase; color: #d29c3c; margin-bottom: 0.5rem; }
.reader-mark-line { font-family: var(--font-body); font-style: italic; color: #e8e8e8; margin: 0 0 1rem; font-size: 0.92rem; }
.reader-mark-code { display: inline-flex; align-items: center; gap: 0.85rem; padding: 0.6rem 1.4rem; border: 1px solid rgba(210,156,60,0.35); background: rgba(0,0,0,0.6); }
.reader-mark-num { font-family: var(--font-heading); font-size: 2.2rem; font-weight: 700; color: #f6d47c; line-height: 1; text-shadow: 0 0 18px rgba(210,156,60,0.4); }
.reader-mark-sep { color: #d29c3c; font-size: 1.4rem; line-height: 1; }
.reader-mark-foot { font-family: var(--font-heading); font-size: 0.56rem; letter-spacing: 0.28em; text-transform: uppercase; color: #dedede; margin: 1rem 0 0; }

/* ── CTA SECTION - the final threshold ── */
.cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(210,156,60,0.05);
  border: 1px solid #d29c3c;
  outline: 1px solid rgba(210,156,60,0.25);
  outline-offset: 5px;
  padding: 1.35rem 3.2rem;
  text-shadow: 0 0 14px rgba(210,156,60,0.35);
  box-shadow: 0 0 28px rgba(210,156,60,0.16), inset 0 0 24px rgba(210,156,60,0.06);
  transition: transform 0.3s ease, box-shadow 0.3s, color 0.35s;
  overflow: hidden;
}
.cta-btn::before { content: ''; position: absolute; inset: 0; background: #d29c3c; transform: scaleX(0); transform-origin: left; transition: transform 0.45s cubic-bezier(0.4,0,0.2,1); z-index: 0; }
.cta-btn:hover::before { transform: scaleX(1); }
.cta-btn:hover { color: #000000; box-shadow: 0 0 35px rgba(210,156,60,0.3); }
.cta-btn-text { position: relative; z-index: 1; }
.cta-btn-ripple { position: absolute; inset: -50%; background: rgba(255,255,255,0.18); border-radius: 50%; transform: scale(0); z-index: 2; pointer-events: none; }
.cta-btn-ripple.active { animation: ripple 0.65s ease-out forwards; }
@keyframes ripple { to { transform: scale(3); opacity: 0; } }
.cta-sub { font-size: 0.8rem; color: #d4d4d4; margin-top: 0.9rem; }
.cta-sub .cta-user { color: #d29c3c; font-family: var(--font-heading); letter-spacing: 0.08em; }
.cta-blessing { font-family: var(--font-heading); font-size: 0.63rem; letter-spacing: 0.52em; text-transform: uppercase; color: #dedede; margin-top: 0; }

/* ── FOOTER - monumental ── */
footer.py-footer {
  position: relative; z-index: 1; text-align: center;
  padding: 6rem 2rem 3.5rem;
  border-top: 1px solid rgba(210,156,60,0.15);
  margin-top: auto;
  background: linear-gradient(180deg, transparent 0%, rgba(210,156,60,0.02) 50%, transparent 100%);
}
.footer-name {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.25em;
  margin-bottom: 0.6rem;
  text-shadow: 0 0 40px rgba(255,255,255,0.2), 0 0 100px rgba(210,156,60,0.35);
  animation: torchFlicker 5s ease-in-out infinite;
}
#footer-links { display: flex; justify-content: center; gap: 2.5rem; flex-wrap: wrap; margin: 1.5rem 0; }
.footer-fine { font-family: var(--font-heading); font-size: 0.57rem; letter-spacing: 0.22em; text-transform: uppercase; color: #c8c8c8; margin-top: 2rem; }

/* ── MUSIC BTN ── */
#music-btn {
  position: fixed;
  bottom: 1.75rem; right: 1.75rem;
  z-index: 300;
  background: rgba(10,10,10,0.92);
  border: 1px solid rgba(210,156,60,0.28);
  color: #ededed;
  font-family: var(--font-heading);
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  padding: 0.7rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: border-color 0.3s, color 0.3s, box-shadow 0.3s;
}
#music-btn:hover, #music-btn.playing { border-color: #d29c3c; color: #f6d47c; box-shadow: 0 0 18px rgba(210,156,60,0.2); }
#music-btn .note { font-size: 0.85rem; color: #d29c3c; }
/* ── SVG ICON SYSTEM ──
   Stroke icons in currentColor: they inherit gold/white from
   their button and scale with surrounding type. No emoji, no
   missing-glyph boxes, identical on every device. */
.ic { width: 1em; height: 1em; flex-shrink: 0; vertical-align: -0.12em; }
.lib-key .ic { width: 1.3em; height: 1.3em; vertical-align: -0.28em; }
.guild-close .ic, .lb-close .ic { width: 1.1em; height: 1.1em; }
#music-btn.loading .note { animation: blink 1s ease infinite; }
/* Playing pulse: the note breathes with the forge while music runs */
#music-btn.playing .note { animation: notePulse 1.6s ease-in-out infinite; }
@keyframes notePulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.28); opacity: 0.7; } }
@media (max-width: 600px) { #music-btn { bottom: 1.1rem; right: 1.1rem; padding: 0.6rem 0.9rem; } }

/* ── BACK TO TOP ── */
#to-top {
  position: fixed;
  bottom: 1.75rem; left: 1.75rem;
  z-index: 300;
  width: 42px; height: 42px;
  background: rgba(10,10,10,0.92);
  border: 1px solid rgba(210,156,60,0.28);
  color: #d29c3c;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.35s, transform 0.35s, border-color 0.3s, color 0.3s;
}
#to-top svg { width: 17px; }
#to-top.show { opacity: 1; transform: translateY(0); pointer-events: all; }
#to-top:hover { border-color: #d29c3c; color: #f6d47c; box-shadow: 0 0 18px rgba(210,156,60,0.2); }
@media (max-width: 600px) { #to-top { bottom: 1.1rem; left: 1.1rem; width: 38px; height: 38px; } }

/* ── TOASTS ── */
#toast-layer {
  position: fixed;
  bottom: 5.5rem; left: 50%;
  transform: translateX(-50%);
  z-index: 9500;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  pointer-events: none;
}
.toast {
  font-family: var(--font-heading);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #e8e8e8;
  background: rgba(10,10,10,0.96);
  border: 1px solid rgba(210,156,60,0.45);
  padding: 0.75rem 1.5rem;
  box-shadow: 0 0 24px rgba(210,156,60,0.15);
  animation: toastIn 0.4s cubic-bezier(0.16,1,0.3,1) both;
  max-width: min(420px, 90vw);
  text-align: center;
}
.toast.gold { border-color: #d29c3c; color: #f6d47c; }
.toast.leaving { animation: toastOut 0.35s ease both; }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateY(10px); } }

/* ── SCROLL REVEAL ──
   Progressive enhancement: visible by default; only hidden when
   JS is present (html.js, added by script.js) until .visible fires. */
.reveal {
  opacity: 1;
  transform: none;
  transition: opacity 0.85s cubic-bezier(0.4,0,0.2,1), transform 0.85s cubic-bezier(0.4,0,0.2,1);
}
html.js .reveal {
  opacity: 0;
  transform: translateY(28px);
}
html.js .reveal.visible { opacity: 1; transform: translateY(0); }

/* ── KEYFRAMES ── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
/* Tilt is softened restraint: no perspective abuse, no 0.5s drift.
   JS perspective hook stays, but the transition is short so cards
   settle fast. heroReveal/fadeUp/fadeDown are the only kept entrances. */
.tilt-card { transition: transform 0.3s ease, border-color 0.3s; }

/* ═══════════════════════════════════════════════════════
   GUILD LIBRARY / GUILD MEMBERS / LIGHTBOX chrome
═══════════════════════════════════════════════════════ */
#guild-overlay, #members-overlay {
  position: fixed;
  inset: 0;
  z-index: 700;
  background: rgba(0,0,0,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
#guild-overlay.active, #members-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transition: opacity 0.5s ease, visibility 0s;
}

.guild-temple {
  position: relative;
  width: min(720px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(10,10,10,0.95), rgba(0,0,0,0.98));
  border: 1px solid rgba(210,156,60,0.3);
  padding: 3rem 2.75rem;
  transform: translateY(24px) scale(0.97);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1), opacity 0.5s ease;
}
#guild-overlay.active .guild-temple,
#members-overlay.active .guild-temple { transform: translateY(0) scale(1); opacity: 1; }
.guild-temple::before, .guild-temple::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; }
.guild-temple::before { top: 0; background: linear-gradient(90deg, transparent, #d29c3c 30%, #d29c3c 70%, transparent); }
.guild-temple::after { bottom: 0; background: linear-gradient(90deg, transparent, #d29c3c 30%, #d29c3c 70%, transparent); }

.guild-pediment { display: flex; justify-content: center; margin-bottom: 1.5rem; }
.guild-pediment svg { width: 100%; max-width: 320px; height: auto; }

.guild-title { text-align: center; font-family: var(--font-heading); font-size: clamp(1.8rem, 4.5vw, 2.6rem); font-weight: 700; color: #ffffff; letter-spacing: 0.1em; margin-bottom: 0.5rem; }
.guild-sub { text-align: center; font-family: var(--font-body); font-style: italic; font-size: 0.98rem; color: #e8e8e8; margin-bottom: 2rem; max-width: 460px; margin-left: auto; margin-right: auto; }

.guild-form { display: flex; gap: 0.75rem; max-width: 420px; margin: 0 auto 1rem; }
@media (max-width: 520px) { .guild-form { flex-direction: column; } }
.guild-input {
  flex: 1;
  background: rgba(0,0,0,0.7);
  border: 1px solid rgba(210,156,60,0.35);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  letter-spacing: 0.45em;
  text-align: center;
  padding: 0.95rem 1rem;
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.guild-input::placeholder { color: #dedede; letter-spacing: 0.12em; }
.guild-input:focus { border-color: #f6d47c; box-shadow: 0 0 22px rgba(210,156,60,0.18); }
.guild-submit {
  background: rgba(210,156,60,0.12);
  border: 1px solid #d29c3c;
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 0 1.4rem;
  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}
.guild-submit:hover { background: #d29c3c; color: #000000; box-shadow: 0 0 22px rgba(210,156,60,0.3); }

.guild-close {
  position: absolute;
  top: 1.1rem; right: 1.1rem;
  background: none;
  border: 1px solid rgba(210,156,60,0.3);
  color: #ededed;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  transition: color 0.2s, border-color 0.2s, transform 0.2s;
}
.guild-close:hover { color: #ffffff; border-color: #d29c3c; transform: rotate(90deg); }

.guild-shake { animation: guildShake 0.45s ease; }
@keyframes guildShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

.guild-result { text-align: center; animation: resultRise 0.7s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes resultRise { from { opacity: 0; transform: translateY(24px); filter: blur(8px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
.guild-result-eyebrow { font-family: var(--font-heading); font-size: 0.6rem; letter-spacing: 0.45em; text-transform: uppercase; color: #d29c3c; margin-bottom: 0.5rem; }
.guild-result-title { font-family: var(--font-heading); font-size: clamp(1.6rem, 4vw, 2.2rem); color: #ffffff; letter-spacing: 0.08em; margin-bottom: 1.5rem; }

.guild-scroll {
  text-align: left;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(210,156,60,0.25);
  border-left: 2px solid #d29c3c;
  padding: 1.5rem 1.75rem;
  margin: 1.5rem 0;
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.7;
  color: #e8e8e8;
}
.guild-scroll p { margin-bottom: 0.85rem; }
.guild-scroll p:last-child { margin-bottom: 0; }

.guild-boons { list-style: none; margin: 1rem 0; }
.guild-boons li { padding: 0.7rem 0 0.7rem 1.6rem; border-bottom: 1px solid rgba(210,156,60,0.18); position: relative; color: #e8e8e8; font-size: 0.95rem; }
.guild-boons li:last-child { border-bottom: none; }
.guild-boons li::before { content: '✦'; position: absolute; left: 0; top: 0.7rem; color: #d29c3c; font-size: 0.8rem; }

.guild-back {
  margin-top: 1.5rem;
  background: none;
  border: 1px solid rgba(210,156,60,0.3);
  color: #ededed;
  font-family: var(--font-heading);
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 0.7rem 1.5rem;
  transition: color 0.3s, border-color 0.3s;
}
.guild-back:hover { color: #ffffff; border-color: #d29c3c; }
.guild-copy {
  margin: 1.5rem 0.75rem 0 0;
  background: none;
  border: 1px solid rgba(210,156,60,0.3);
  color: #ededed;
  font-family: var(--font-heading);
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 0.7rem 1.5rem;
  transition: color 0.3s, border-color 0.3s;
}
.guild-copy:hover { color: #ffffff; border-color: #d29c3c; }

.guild-temple::-webkit-scrollbar { width: 6px; }
.guild-temple::-webkit-scrollbar-track { background: transparent; }
.guild-temple::-webkit-scrollbar-thumb { background: rgba(210,156,60,0.3); border-radius: 3px; }

/* guild members roster list */
.members-list { list-style: none; padding: 0; margin: 1.6rem 0 0.5rem; display: flex; flex-direction: column; gap: 0.9rem; width: 100%; max-width: 360px; margin-left: auto; margin-right: auto; }
.members-list li {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  letter-spacing: 0.18em;
  color: #ffffff;
  text-align: center;
  padding: 0.85rem 1.2rem;
  border: 1px solid rgba(210,156,60,0.32);
  background: rgba(210,156,60,0.04);
  display: flex; align-items: center; justify-content: center; gap: 0.85rem;
  transition: border-color 0.3s, background 0.3s;
}
.members-list li:hover { border-color: rgba(210,156,60,0.7); background: rgba(210,156,60,0.08); }
/* (roster reads clean without bullets) */
.members-footnote { font-family: var(--font-heading); font-size: 0.62rem; letter-spacing: 0.32em; text-transform: uppercase; color: #d4d4d4; text-align: center; margin-top: 1.6rem; }

@media (max-width: 600px) {
  #guild-overlay, #members-overlay { padding: 1rem; }
  .guild-temple { padding: 2.25rem 1.4rem; }
}

/* ═══════════════════════════════════════════════════════
   GREEK BACKGROUND (decorative frame)
═══════════════════════════════════════════════════════ */
.greek-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.gk-meander { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.7; }
.gk-bracket { position: absolute; width: clamp(150px, 18vw, 230px); height: clamp(150px, 18vw, 230px); opacity: 0.95; filter: drop-shadow(0 0 12px rgba(210, 156, 60, 0.25)); }
.gk-tl { top: 6px; left: 6px; }
.gk-tr { top: 6px; right: 6px; transform: scaleX(-1); }
.gk-bl { bottom: 24px; left: 6px; transform: scaleY(-1); }
.gk-br { bottom: 24px; right: 6px; transform: scale(-1,-1); }
.gk-column { position: absolute; top: 0; bottom: 0; width: clamp(40px, 5vw, 70px); opacity: 0.85; filter: drop-shadow(0 0 10px rgba(210, 156, 60, 0.18)); }
.gk-column.gk-left { left: 0; }
.gk-column.gk-right { right: 0; transform: scaleX(-1); }
.gk-column svg { width: 100%; height: 100%; display: block; }
.gk-architrave { position: absolute; top: 0; left: 0; right: 0; height: 20px; opacity: 0.9; }
.gk-architrave svg { display: block; width: 100%; }
.gk-wave { position: absolute; bottom: 0; left: 0; right: 0; height: 18px; opacity: 0.85; }
.gk-wave svg { display: block; width: 100%; }
@media (max-width: 720px) {
  .gk-column { display: none; }
  .gk-meander { opacity: 0.3; }
  .gk-bracket { width: clamp(110px, 38vw, 150px); height: clamp(110px, 38vw, 150px); opacity: 0.75; }
  .gk-bl, .gk-br { bottom: 20px; }
}

/* ═══════════════════════════════════════════════════════
   THE GUIDE LIBRARY + GUIDE READING PAGES
   (guides.html and guides/roleplay-groups.html)
═══════════════════════════════════════════════════════ */

/* Sub-page hero: same throne, smaller crown than the index hero */
.page-hero {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 7rem 2rem 3.25rem;
  max-width: 880px;
  margin: 0 auto;
}
.crumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  font-family: var(--font-heading);
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #d4d4d4;
  margin-bottom: 1.7rem;
  opacity: 0;
  animation: fadeDown 0.9s ease 0.15s forwards;
}
.crumbs a { color: #d29c3c; transition: color 0.3s; }
.crumbs a:hover { color: #f6d47c; }
.crumbs .crumb-sep { color: #adadad; }

.page-hero .ph-eyebrow {
  font-family: var(--font-heading);
  font-size: 0.67rem;
  letter-spacing: 0.52em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 1.1rem;
  text-shadow: 0 0 12px rgba(255,255,255,0.3);
  opacity: 0;
  animation: fadeDown 0.9s ease 0.3s forwards;
}
.page-hero .ph-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 6vw, 3.7rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.12;
  color: #ffffff;
  text-shadow: 0 0 60px rgba(255,255,255,0.4), 0 0 160px rgba(210,156,60,0.3), 0 2px 0 rgba(0,0,0,0.6);
  margin-bottom: 1.25rem;
  opacity: 0;
  animation: heroReveal 1.1s cubic-bezier(0.16,1,0.3,1) 0.45s forwards;
}
.page-hero .ph-rule {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  width: min(440px, 90%);
  margin: 0 auto 1.5rem;
  opacity: 0;
  animation: fadeUp 0.9s ease 0.85s forwards;
}
.page-hero .ph-rule-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #d29c3c, transparent); }
.page-hero .ph-rule-orn { font-size: 0.65rem; color: #d29c3c; flex-shrink: 0; text-shadow: 0 0 10px rgba(210,156,60,0.5); }
.page-hero .ph-sub {
  max-width: 660px;
  margin: 0 auto;
  color: #ededed;
  font-size: 1rem;
  line-height: 1.8;
  opacity: 0;
  animation: fadeUp 0.9s ease 1.05s forwards;
}
.page-hero .ph-sub em { color: #f6d47c; font-style: normal; font-family: var(--font-heading); font-size: 0.9em; letter-spacing: 0.05em; }
.page-hero .ph-meta {
  margin-top: 1.5rem;
  font-family: var(--font-heading);
  font-size: 0.56rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #dedede;
  opacity: 0;
  animation: fadeUp 0.9s ease 1.2s forwards;
}

/* Library shelf (guides.html) */
.library-shelf {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 2rem 5.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
.guide-card {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 0 1.9rem;
  align-items: start;
  background: linear-gradient(180deg, rgba(10,10,10,0.92), rgba(0,0,0,0.92));
  border: 1px solid rgba(210,156,60,0.32);
  padding: 2.1rem 2.2rem;
  position: relative;
  transition: border-color 0.35s, box-shadow 0.4s, transform 0.5s ease;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.guide-card:hover {
  border-color: rgba(210,156,60,0.65);
  box-shadow: 0 0 30px rgba(210,156,60,0.14), inset 0 0 40px rgba(210,156,60,0.04);
  transform: translateY(-3px);
}
.guide-card::before {
  content: '';
  position: absolute;
  top: 0; left: 2rem;
  width: 64px; height: 2px;
  background: linear-gradient(90deg, #d29c3c, #f6d47c, transparent);
}
.guide-card .vol-side { text-align: center; padding-top: 0.15rem; }
.guide-card .vol-big {
  font-family: var(--font-heading);
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1;
  color: #d29c3c;
  text-shadow: 0 0 26px rgba(210,156,60,0.45);
  display: block;
}
.guide-card .vol-word {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.54rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #d4d4d4;
  margin-top: 0.55rem;
}
.guide-card .vol-side::after {
  content: '';
  display: block;
  width: 34px; height: 1px;
  margin: 1rem auto 0;
  background: linear-gradient(90deg, transparent, #d29c3c, transparent);
}
.vol-tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.55rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #000000;
  background: #d29c3c;
  padding: 0.22rem 0.72rem;
  margin-bottom: 0.95rem;
}
.guide-card .vol-title {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 3vw, 1.65rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #ffffff;
  margin: 0 0 0.75rem;
  line-height: 1.3;
  text-shadow: 0 0 18px rgba(210,156,60,0.25);
}
.guide-card .vol-summary {
  font-size: 0.95rem;
  color: #ededed;
  line-height: 1.75;
  margin: 0 0 1.15rem;
  text-shadow: 0 0 10px rgba(255,255,255,0.2);
}
.vol-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.35rem; }
.vol-chip {
  font-family: var(--font-heading);
  font-size: 0.52rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #d29c3c;
  border: 1px solid rgba(210,156,60,0.35);
  padding: 0.34rem 0.72rem;
  white-space: nowrap;
}
.vol-read {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  font-family: var(--font-heading);
  font-size: 0.62rem;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: #ffffff;
  border: 1px solid #d29c3c;
  padding: 0.9rem 2rem;
  position: relative;
  overflow: hidden;
  transition: color 0.35s, box-shadow 0.35s;
}
.vol-read::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #d29c3c;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.4,0,0.2,1);
  z-index: 0;
}
.vol-read:hover::before { transform: scaleX(1); }
.vol-read:hover { color: #000000; box-shadow: 0 0 26px rgba(210,156,60,0.3); }
.vol-read span { position: relative; z-index: 1; }

.guide-slot {
  border: 1px dashed rgba(210,156,60,0.28);
  padding: 1.6rem 1.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  background: rgba(10,10,10,0.35);
}
.guide-slot .slot-vol {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #adadad;
  white-space: nowrap;
}
.guide-slot .slot-note { font-size: 0.85rem; color: #d4d4d4; font-style: italic; text-align: right; }
@media (max-width: 620px) {
  .guide-card { grid-template-columns: 1fr; padding: 1.7rem 1.4rem; gap: 1.1rem; }
  .guide-card .vol-side { display: flex; align-items: baseline; gap: 0.75rem; text-align: left; padding: 0; }
  .guide-card .vol-side::after { display: none; }
  .guide-card .vol-word { margin-top: 0; }
  .guide-slot { flex-direction: column; align-items: flex-start; }
  .guide-slot .slot-note { text-align: left; }
}

/* Guide reading layout (guides/roleplay-groups.html) */
.guide-layout {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  padding: 1.5rem 2rem 5.5rem;
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 3.5rem;
  align-items: start;
}
.guide-toc { position: sticky; top: 102px; padding-top: 0.4rem; }
.guide-toc .toc-head {
  font-family: var(--font-heading);
  font-size: 0.58rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #d29c3c;
  margin: 0 0 0.9rem;
  padding-left: 1.15rem;
  text-shadow: 0 0 10px rgba(210,156,60,0.35);
}
.guide-toc a {
  display: block;
  position: relative;
  font-size: 0.82rem;
  color: #dedede;
  padding: 0.55rem 0.4rem 0.55rem 1.15rem;
  border-left: 1px solid rgba(210,156,60,0.25);
  line-height: 1.45;
  transition: color 0.25s, border-color 0.25s, text-shadow 0.25s;
}
.guide-toc a .toc-num {
  font-family: var(--font-heading);
  color: #adadad;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  margin-right: 0.55rem;
  transition: color 0.25s;
}
.guide-toc a:hover { color: #ffffff; }
.guide-toc a.active {
  color: #f6d47c;
  border-left: 2px solid #d29c3c;
  padding-left: 1.1rem;
  text-shadow: 0 0 10px rgba(210,156,60,0.3);
}
.guide-toc a.active .toc-num { color: #d29c3c; }
@media (max-width: 940px) {
  .guide-layout { grid-template-columns: 1fr; gap: 0; padding-top: 0.5rem; }
  .guide-toc {
    position: static;
    padding: 0 0 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    border-bottom: 1px solid rgba(210,156,60,0.16);
  }
  .guide-toc .toc-head { width: 100%; padding: 0 0 0.4rem; margin: 0; }
  .guide-toc a, .guide-toc a.active {
  border: 1px solid rgba(210,156,60,0.15);
    padding: 0.42rem 0.75rem;
    background: rgba(10,10,10,0.6);
  }
  .guide-toc a.active { border-color: #d29c3c; background: rgba(210,156,60,0.08); }
}

/* Guide body */
.guide-body { max-width: 780px; }
.guide-body .chapter { margin-top: 3.6rem; padding-top: 0.3rem; }
.guide-body .chapter.first { margin-top: 0; }
.guide-body .chapter[id] { scroll-margin-top: 132px; }

/* path cards (chapter I) */
.path-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.7rem 0 1.8rem; }
@media (max-width: 720px) { .path-grid { grid-template-columns: 1fr; } }
.path-card {
  display: block;
  background: linear-gradient(180deg, rgba(10,10,10,0.92), rgba(0,0,0,0.92));
  border: 1px solid rgba(210,156,60,0.26);
  padding: 1.35rem 1.3rem 1.2rem;
  position: relative;
  transition: border-color 0.3s, box-shadow 0.35s, transform 0.4s ease;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.path-card:hover {
  border-color: rgba(210,156,60,0.6);
  box-shadow: 0 0 22px rgba(210,156,60,0.12);
  transform: translateY(-2px);
}
.path-card .pc-tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.5rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #d29c3c;
  border: 1px solid rgba(210,156,60,0.45);
  padding: 0.2rem 0.6rem;
}
.path-card .pc-title {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0.75rem 0 0.45rem;
  line-height: 1.45;
}
.path-card .pc-sub { display: block; font-size: 0.82rem; color: #dedede; line-height: 1.55; }
.path-card .pc-read {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.55rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #d29c3c;
  margin-top: 0.9rem;
  transition: padding-left 0.25s;
}
.path-card:hover .pc-read { padding-left: 0.4rem; color: #f6d47c; }

/* stat strip inside the guide */
.guide-stat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.4rem;
  flex-wrap: wrap;
  margin: 2.1rem 0;
  padding: 1.7rem 1.2rem;
  background: rgba(10,10,10,0.55);
  border-top: 1px solid rgba(210,156,60,0.22);
  border-bottom: 1px solid rgba(210,156,60,0.22);
}
.guide-stat .stat { text-align: center; }
.guide-stat .stat-num {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 4.5vw, 2.5rem);
  font-weight: 700;
  color: #eeeeee;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 22px rgba(255,255,255,0.25);
}
.guide-stat .stat-lbl {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.56rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #d4d4d4;
  margin-top: 0.5rem;
}

/* small price banner (Path Two hourly math) */
.price-banner.mini { padding: 2rem 1.5rem 1.8rem; }
.price-banner.mini .price-big { font-size: clamp(1.7rem, 5vw, 2.7rem); }

/* guide close */
.guide-end {
  text-align: center;
  margin-top: 3.6rem;
  padding-top: 2.6rem;
  border-top: 1px solid rgba(210,156,60,0.16);
}
.guide-end .ge-note { font-size: 0.9rem; color: #dedede; margin: 0 0 1.5rem; }
.guide-next { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.guide-btn {
  font-family: var(--font-heading);
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-transform: uppercase;
  color: #ffffff;
  padding: 0.95rem 1.9rem;
  border: 1px solid #d29c3c;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  transition: color 0.35s, box-shadow 0.35s;
}
.guide-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #d29c3c;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.4,0,0.2,1);
  z-index: 0;
}
.guide-btn:hover::before { transform: scaleX(1); }
.guide-btn:hover { color: #000000; box-shadow: 0 0 26px rgba(210,156,60,0.3); }
.guide-btn span { position: relative; z-index: 1; }
.guide-btn.ghost { border-color: rgba(210,156,60,0.35); color: #ededed; }

/* current-page marker in the nav (used on guide pages) */
.nav-links a.current { color: #f6d47c; text-shadow: 0 0 10px rgba(210,156,60,0.5); }
.nav-links a.current::after { transform: scaleX(1); transform-origin: left; }

/* ── ROBUX GROWTH POPUP (hero, above "Robux in Commissions") ──
   Robux-green badge: counts up +350K, then adds it to
   the main number and fades away. */
.robux-stat { position: relative; }
.robux-pop {
  position: absolute;
  bottom: calc(100% + 0.8rem);
  left: 50%;
  transform: translate(-50%, 12px) scale(0.9);
  opacity: 0;
  pointer-events: none;
  z-index: 40;
  display: flex; flex-direction: column; align-items: center; gap: 0.18rem;
  padding: 0.55rem 1rem 0.5rem;
  background: linear-gradient(180deg, #4dff8f 0%, #1fec5e 100%);
  color: #06130b;
  border: 1px solid #d8ffe4;
  border-radius: 10px;
  box-shadow: 0 0 18px rgba(77,255,143,.55), 0 0 46px rgba(77,255,143,0.22), 0 6px 18px rgba(0,0,0,0.55);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.34,1.56,0.64,1);
  will-change: opacity, transform;
}
.robux-pop[hidden] { display: none; }
.robux-pop.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
.robux-pop.hide {
  opacity: 0;
  transform: translate(-50%, -10px) scale(0.94);
  animation: none;
}
.rp-num {
  font-family: var(--font-heading);
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
  white-space: nowrap;
}
.rp-lbl {
  font-family: var(--font-heading);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.78;
  white-space: nowrap;
}
.rp-notch {
  position: absolute;
  bottom: -5px; left: 50%;
  width: 10px; height: 10px;
  background: #1fec5e;
  border-right: 1px solid #d8ffe4;
  border-bottom: 1px solid #d8ffe4;
  transform: translateX(-50%) rotate(45deg);
}
/* main number flashes robux-green while the +350K lands on it */
.stat-num { transition: color 0.5s ease, text-shadow 0.5s ease; }
.stat-num.bumped {
  color: #2bff6e;
  text-shadow: 0 0 20px rgba(43,255,110,0.6);
  transition: color 0.15s ease, text-shadow 0.15s ease;
}
@media (max-width: 560px) {
  .robux-pop { padding: 0.45rem 0.8rem 0.42rem; }
  .rp-num { font-size: 1rem; }
  .rp-lbl { font-size: 0.44rem; letter-spacing: 0.14em; }
}

/* ── Soft navigation ──────────────────────────────────────────
   Internal links swap only what lives inside #page-root, so the
   nav, the music embed and the overlays are never destroyed and
   the track keeps playing across pages. The swap is a quick fade:
   the old page-root fades out, the new content fades back in. */
#page-root { transition: opacity 0.16s ease; overflow-x: hidden; overflow-x: clip; }
body.page-out #page-root { opacity: 0; }

/* ── OVERLAY AMBIENT PAUSE ─────────────────────────────
   While any dialog is open, the idle animations behind the dim
   layer pause: the marquee, the embers, the brand pulse, the
   heart, the hero arrows. Nothing the visitor
   can see changes (they all sit under the overlay), but the
   main thread stops paying for them every frame. The hero
   canvas stops too (from script.js). */
body.overlay-open .wip-track,
body.overlay-open .forge-embers span,
body.overlay-open .brand-logo,
body.overlay-open .hero-cta svg { animation-play-state: paused; }

/* ── WORK IN PROGRESS BANNER: mobile offsets ──
   The nav is taller than 66px below 900px, so the banner rides
   lower and page content needs a deeper clearance. These rules
   live at the end of the file so they win the cascade over the
   base .page-hero / section[id] rules declared above. */
@media (max-width: 900px) {
  .wip-banner { top: 84px; }
  .hero-content { padding-top: 8.5rem; }
  .page-hero { padding-top: 7.9rem; }
  section[id], div[id="hero"] { scroll-margin-top: 124px; }
}

/* ── FORCE MOTION (always on) ─────────────────────────
   The site runs full motion unconditionally: this block
   re-states every animation the OS reduce blocks take away.
   Lives last so it wins ties; the html prefix wins the rest. */
html.force-motion { scroll-behavior: smooth; }
/* marquee + police-tape edges */
html.force-motion .wip-track { animation: wip-scroll 18s linear infinite; width: max-content; justify-content: flex-start; }
html.force-motion .wip-copy + .wip-copy { display: flex; }
html.force-motion .wip-banner::before, html.force-motion .wip-banner::after { animation: tapeMarch 1.1s linear infinite; }
/* embers + grain + spotlights + shine */
html.force-motion .forge-embers { display: block; }
html.force-motion body::after { display: block; }
html.force-motion section.py-section::after { display: block; }
html.force-motion .gallery-inner::before { display: block; }
/* preloader gate choreography */
html.force-motion .preloader-kicker { animation: fadeIn 0.7s ease 0.05s forwards; }
html.force-motion .preloader-stage { animation: fadeIn 0.6s ease 0.15s forwards; }
html.force-motion .preloader-logo { animation: logoRise 1s cubic-bezier(0.16,1,0.3,1) 0.2s both; }
html.force-motion .preloader-name { animation: fadeIn 0.6s ease 1.1s forwards; }
html.force-motion .preloader-bar { animation: scaleIn 0.7s ease 1.3s forwards; }
html.force-motion .preloader-rune { animation: fadeIn 0.6s ease 1.6s forwards; }
html.force-motion .preloader-enter { animation: fadeIn 0.6s ease 0.1s forwards; }
html.force-motion .preloader-enter-text { animation: enterPulse 1.8s ease-in-out infinite; }
/* hero */
html.force-motion.js .hero-name { animation: heroReveal 1.3s cubic-bezier(0.16,1,0.3,1) 0.7s forwards; }
html.force-motion.js .hero-cta { animation: fadeUp 0.9s ease 1.85s forwards, ctaGlow 2.6s ease-in-out 2.8s infinite; }
/* (rays stay frozen: see .hero-rays above) */
html.force-motion .gk-bracket { animation: torchFlicker 4.5s ease-in-out infinite; }
html.force-motion body.cine-open .hero-content { transform: translateY(calc(var(--scroll, 0) * -0.12px)); opacity: calc(1 - var(--scroll, 0) / 900); }
html.force-motion .cine-bar { display: block; }
html.force-motion body.cine-flash #hero::after { display: block; }
/* reveal + card cascade */
html.force-motion.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.85s cubic-bezier(0.4,0,0.2,1), transform 0.85s cubic-bezier(0.4,0,0.2,1);
}
html.force-motion.js .reveal.visible { opacity: 1; transform: translateY(0); }
html.force-motion.js .py-section.visible .card,
html.force-motion.js .py-section.visible .style-card,
html.force-motion.js .py-section.visible .worked-card,
html.force-motion.js .py-section.visible .path-card,
html.force-motion.js .py-section.visible .guide-card { animation: cardIgnite 0.7s ease backwards; }
html.force-motion.js .py-section.visible .card:nth-child(2),
html.force-motion.js .py-section.visible .style-card:nth-child(2),
html.force-motion.js .py-section.visible .worked-card:nth-child(2),
html.force-motion.js .py-section.visible .path-card:nth-child(2),
html.force-motion.js .py-section.visible .guide-card:nth-child(2) { animation-delay: 0.09s; }
html.force-motion.js .py-section.visible .card:nth-child(3),
html.force-motion.js .py-section.visible .style-card:nth-child(3),
html.force-motion.js .py-section.visible .worked-card:nth-child(3),
html.force-motion.js .py-section.visible .path-card:nth-child(3),
html.force-motion.js .py-section.visible .guide-card:nth-child(3) { animation-delay: 0.18s; }
html.force-motion.js .py-section.visible .card:nth-child(4),
html.force-motion.js .py-section.visible .style-card:nth-child(4),
html.force-motion.js .py-section.visible .worked-card:nth-child(4),
html.force-motion.js .py-section.visible .path-card:nth-child(4),
html.force-motion.js .py-section.visible .guide-card:nth-child(4) { animation-delay: 0.27s; }
/* music pulse + robux popup + page fade */
html.force-motion #music-btn.playing .note { animation: notePulse 1.6s ease-in-out infinite; }
html.force-motion .robux-pop { transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.34,1.56,0.64,1); }
html.force-motion .robux-pop.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
html.force-motion .robux-pop.hide { opacity: 0; transform: translate(-50%, -10px) scale(0.94); animation: none; }
html.force-motion #page-root { transition: opacity 0.16s ease; }

/* ── MOBILE DECLUTTER (≤640px) ──────────────────────
   Lives last so it wins the cascade. Goals: breathe room,
   no side overflow, one calm column where the desktop
   crowds three-across, big touch targets for votes. */
@media (max-width: 640px) {
  section.py-section { padding: 2.25rem 1.25rem; }
  h2.py-h2 { font-size: 1.35rem; margin-bottom: 1rem; line-height: 1.2; }
  p.py-p { line-height: 1.6; margin-bottom: 0.9rem; }
  h3.py-h3 { margin-top: 1.1rem; margin-bottom: 0.5rem; font-size: 0.78rem; letter-spacing: 0.16em; }
  .section-label { font-size: 0.58rem; letter-spacing: 0.32em; margin-bottom: 0.5rem; }
  .hero-content { padding-left: 1.25rem; padding-right: 1.25rem; padding-top: 6.75rem; padding-bottom: 2.25rem; }
  /* hero type: stop the wrap-sprawl */
  .hero-name { font-size: clamp(2.4rem, 13vw, 3.5rem); letter-spacing: 0.08em; margin-bottom: 0.75rem; }
  .hero-eyebrow { letter-spacing: 0.22em; line-height: 1.6; }
  .hero-motto { font-size: 1.2rem; letter-spacing: 0.18em; margin-bottom: 1.5rem; }
  .hero-rule { margin-bottom: 0.9rem; width: min(320px, 70%); }
  .hero-cta { padding: 0.75rem 1.6rem; letter-spacing: 0.32em; }
  .hero-cta svg { animation: none; }
  /* hero stats: slimmer stacked rows */
  .hero-stats { flex-direction: column; gap: 0.7rem; padding: 0.9rem 0.75rem; margin-bottom: 1.6rem; background: none; border-color: rgba(210,156,60,0.12); }
  .hero-stats::before { display: none; }
  .stat-num { font-size: 1.7rem; }
  .stat-lbl { font-size: 0.5rem; letter-spacing: 0.16em; }
  .stat-divider { display: none; }
  /* decorative hero layers off on phones: calmer + faster */
  .hero-rays, #hero::before, .gk-bracket { display: none; }
  html.force-motion .forge-embers, html.force-motion .gk-bracket { display: none; }
  body::after { opacity: 0.03; }
  /* green robux badge hides on phones (final number still shows) */
  .robux-pop { display: none; }
  html.force-motion .robux-pop { display: none; }
  /* slim noisy banner edges */
  .wip-banner { min-height: 24px; }
  .wip-banner::before, .wip-banner::after { display: none; }
  html.force-motion .wip-banner::before, html.force-motion .wip-banner::after { display: none; }
  .wip-item { font-size: 0.52rem; letter-spacing: 0.28em; }
  /* hire-me button: fits 360px without clipping */
  .cta-btn { padding: 1.1rem 1.25rem; letter-spacing: 0.24em; font-size: 0.68rem; max-width: 100%; justify-content: center; text-align: center; }
  .cta-blessing { letter-spacing: 0.28em; font-size: 0.58rem; }
  /* gallery: shorter rows on phones */
  .gallery-grid, .showcase-front { grid-auto-rows: 150px; gap: 0.75rem; }
  /* cards + rules: tighter, less wall-of-text */
  .card, .style-card, .worked-card { padding: 1.1rem 1rem; }
  .rules li { padding: 0.9rem 0.9rem; margin-bottom: 0.6rem; }
  .reader-mark, .pro-block { padding: 1.1rem 1rem; margin-top: 1.5rem; }
  .reader-mark-num { font-size: 1.6rem; }
  .price-banner { padding: 1.5rem 1rem; margin: 1.25rem 0; }
  .price-big { font-size: 1.9rem; }
  /* dividers: slimmer, still there */
  .ornament { margin: 1.25rem auto; gap: 0.75rem; }
  .hr-subtle { margin: 1.5rem 0; }
  section.py-section::before { font-size: 3rem; top: -0.6rem; }
  footer.py-footer { padding: 3rem 1.25rem 2rem; }
  /* bottom chrome: slimmer */
  #toast-layer { bottom: 4.25rem; }
  /* slim overlays */
  .gallery-view { padding: 1.5rem 0.9rem 1.25rem; }
  .guild-temple { padding: 1.75rem 1rem; }
  .guild-pediment svg { max-width: 220px; }
  .gallery-view-title { font-size: 1.4rem; }
  .guild-input { font-size: 0.95rem; letter-spacing: 0.2em; }
}

/* ── MOBILE AGGRESSIVE round 3 (≤640px) ─────────────
   Five-auditor pass. ALL mobile-only; desktop untouched.
   Lives last so it wins the cascade. */
@media (max-width: 640px) {
  /* fixed chrome: tighter stack, slimmer letterbox */
  nav.py-nav { padding: 0.6rem 0.9rem; }
  .wip-banner { top: 64px; }
  .cine-bar { height: 4vh; min-height: 28px; }
  html.force-motion .cine-bar { height: 4vh; min-height: 28px; }
  html.force-motion.js .hero-cta { animation: fadeUp 0.9s ease 1.85s forwards; }
  /* hero: compact rhythm + smaller type */
  .hero-content { padding-top: 5.5rem; padding-bottom: 1.25rem; }
  .hero-eyebrow { font-size: 0.62rem; margin-bottom: 0.3rem; }
  .hero-name { font-size: clamp(2rem, 11vw, 2.9rem); margin-bottom: 0.5rem; }
  .hero-rule { display: none; }
  .hero-motto { margin-bottom: 0.9rem; }
  .hero-stats { border: none; background: none; padding: 0.5rem 0 0.25rem; gap: 0.35rem; margin-bottom: 1rem; }
  .stat-num { font-size: 1.25rem; }
  .stat-lbl { font-size: 0.48rem; letter-spacing: 0.14em; margin-top: 0.2rem; }
  #hero-canvas { opacity: 0.35; }
  body::before { display: none; }
  html.force-motion section.py-section::after { display: none; }
  /* preloader: slimmer first impression */
  #preloader { gap: 1rem; padding: 1rem; }
  .preloader-stage { width: 100px; height: 100px; }
  .preloader-logo { width: 80px; height: 80px; }
  .preloader-name { font-size: 1rem; letter-spacing: 0.45em; }
  .preloader-kicker { font-size: 0.52rem; letter-spacing: 0.45em; }
  .preloader-rune { font-size: 0.5rem; letter-spacing: 0.45em; }
  /* sections + footer rhythm */
  section.py-section { padding: 1.75rem 1.25rem; }
  section.py-section::before { top: -0.35rem; }
  footer.py-footer { padding: 2.25rem 1.25rem 1.75rem; }
  #footer-links { margin: 1rem 0; }
  .footer-name { font-size: 2rem; letter-spacing: 0.18em; text-indent: 0.18em; margin-bottom: 0.4rem; }
  .footer-fine { margin-top: 1.25rem; letter-spacing: 0.12em; line-height: 1.9; }
  #footer-links span { letter-spacing: 0.18em !important; line-height: 1.8; }
  /* guide pages */
  .guide-layout { padding: 0.5rem 1.25rem 2.5rem; }
  .guide-body .chapter { margin-top: 2.2rem; }
  .guide-end { margin-top: 2rem; padding-top: 1.5rem; }
  .guide-end .ge-note { margin-bottom: 1rem; }
  .library-shelf { padding: 0 1.25rem 2.5rem; }
  .page-hero { padding: 6rem 1.25rem 1.75rem; }
  .crumbs { font-size: 0.54rem; letter-spacing: 0.16em; margin-bottom: 1rem; line-height: 1.7; }
  .page-hero .ph-eyebrow { font-size: 0.6rem; letter-spacing: 0.22em; line-height: 1.7; margin-bottom: 0.7rem; }
  .page-hero .ph-title { font-size: 1.7rem; letter-spacing: 0.04em; line-height: 1.15; margin-bottom: 0.85rem; }
  .page-hero .ph-rule { margin-bottom: 1rem; width: min(320px, 70%); }
  .page-hero .ph-sub { font-size: 0.92rem; line-height: 1.6; }
  .page-hero .ph-meta { font-size: 0.52rem; letter-spacing: 0.18em; line-height: 1.7; margin-top: 1rem; }
  /* terms wall */
  .rules { margin-top: 1.25rem; }
  .rule-title { font-size: 0.66rem; letter-spacing: 0.12em; line-height: 1.5; margin-bottom: 0.3rem; }
  .rules li p { font-size: 0.9rem; line-height: 1.55; margin-bottom: 0.4rem; }
  .rule-title { margin-bottom: 0.25rem; }
  .rules li p { margin-bottom: 0.35rem; }
  /* callout family + text blocks */
  .callout { margin: 1.1rem 0; padding: 0.9rem 1rem; font-size: 0.92rem; line-height: 1.6; }
  .lego-block { margin: 1.1rem 0; padding: 1rem 1rem 1rem 1.25rem; font-size: 0.92rem; line-height: 1.6; }
  .gift-block { margin: 1.25rem 0; padding: 1rem; }
  .gift-block p, .who-is-who p { font-size: 0.9rem; line-height: 1.6; margin-bottom: 0.7rem; }
  .who-is-who { margin-top: 1.25rem; padding: 1.1rem 1rem; }
  .who-is-who p { margin-bottom: 0.6rem; }
  .guide-stat { margin: 1.25rem 0; padding: 1.1rem 0.75rem; gap: 1rem; }
  .caveats { margin-top: 0.75rem; padding-top: 0.75rem; }
  .guild-boons li { font-size: 0.9rem; line-height: 1.55; padding: 0.6rem 0 0.6rem 1.4rem; }
  /* inline-style leftovers: beat them mobile-only */
  h3.py-h3[style] { margin-top: 0.9rem !important; margin-bottom: 0.5rem !important; }
  #cta .py-p[style] { margin-bottom: 1.25rem !important; }
  #cta .ornament[style] { margin: 1.25rem auto !important; }
  #showcase .py-p[style] { margin-bottom: 1rem !important; }
  /* residual label noise */
  .price-note { font-size: 0.6rem; letter-spacing: 0.14em; line-height: 1.7; }
  .price-banner.mini { padding: 1.25rem 1rem; }
  .path-card .pc-title { font-size: 0.8rem; letter-spacing: 0.04em; line-height: 1.4; }
  .guide-card .vol-summary { font-size: 0.9rem; line-height: 1.6; margin-bottom: 1rem; }
  .reader-mark-eyebrow { letter-spacing: 0.22em; }
  .reader-mark-foot { letter-spacing: 0.18em; line-height: 1.7; }
  .reader-mark-line { font-size: 0.88rem; line-height: 1.6; }
  .cta-sub { margin-top: 0.7rem; line-height: 1.6; }
  /* cards: stack gaps + innards */
  .two-col, .worked-grid { gap: 0.75rem; margin-top: 1.25rem; }
  .style-grid { gap: 0.75rem; margin-top: 1.25rem; grid-template-columns: 1fr; }
  .path-grid { gap: 0.75rem; margin: 1.1rem 0 1.2rem; }
  .worked-head { gap: 0.55rem; }
  .worked-quote { margin-top: 0.7rem; }
  .worked-link { flex-wrap: wrap; }
  .worked-logo.wide { width: min(190px, 100%); height: auto; }
  .guide-card { padding: 1.1rem 1rem; gap: 0.7rem; }
  .guide-card .vol-big { font-size: 1.9rem; }
  .guide-card .vol-word { margin-top: 0.15rem; }
  .guide-card .vol-title { margin-bottom: 0.5rem; }
  .vol-meta { margin-bottom: 0.9rem; gap: 0.4rem; }
  .cav { margin-bottom: 0.3rem; line-height: 1.5; }
  .style-common { margin-top: 0.55rem; }
  .style-tag { margin-bottom: 0.55rem; }
  .path-card { padding: 1.1rem 1rem; }
  .path-card .pc-title { margin: 0.55rem 0 0.35rem; }
  .path-card .pc-read { margin-top: 0.6rem; }
  .price-banner { padding: 1.1rem 1rem; margin: 1.1rem 0; }
  .price-big { font-size: 1.6rem; margin-bottom: 0.35rem; }
  .price-foot { margin-bottom: 0.6rem; }
  .reader-mark-code { gap: 0.5rem; padding: 0.45rem 0.9rem; }
  .reader-mark-num { font-size: 1.35rem; }
  .reader-mark-sep { font-size: 1rem; }
  .reader-mark-foot { margin-top: 0.7rem; }
  .reader-mark-line { margin-bottom: 0.7rem; }
  /* flatten decorative card chrome on phones */
  .card::before, .card::after, .style-card::after, .guide-card::before,
  .who-is-who::before, .who-is-who::after, .price-banner::before, .price-banner::after,
  .pro-block::before, .reader-mark::before { display: none; }
  .card, .style-card, .path-card, .guide-card, .price-banner { clip-path: none; background: rgba(10,10,10,0.92); box-shadow: none; }
  .tilt-card:hover { background-image: none; box-shadow: none; transform: none; }
  .gift-block p, .who-is-who p, .card p { text-shadow: none; }
  .worked-logo.wide { width: 120px; height: 44px; }
  /* gallery: compact 2-col, hide reserved frames */
  .gallery-grid, .showcase-front { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 132px; gap: 0.75rem; margin-top: 1.25rem; }
  .gallery-item.vacant { display: none; }
  .gallery-item.featured { grid-column: span 1; grid-row: span 1; }
  .gallery-inner img { padding: 4px; }
  .gallery-item.vacant, .gallery-item.vacant-slot { display: none; }
  .gallery-view-head { margin-bottom: 0.15rem; }
  .gallery-view-sub { display: none; }
  .gallery-view-title { font-size: 1.25rem; letter-spacing: 0.08em; }
  .gallery-filter { gap: 0.4rem; margin-top: 0.8rem; }
  .gallery-filter button { padding: 0.5rem 0.65rem; font-size: 0.54rem; letter-spacing: 0.16em; min-height: 38px; }
  .gallery-count { font-size: 0.7rem; margin-top: 0.35rem; min-height: 0; }
  .gallery-item::after, .showcase-tile::after { content: none; }
  /* overlays: slimmer chrome, dynamic viewport */
  #gallery-overlay, #guild-overlay, #members-overlay { padding: 0.5rem; align-items: flex-start; overscroll-behavior: contain; }
  .gallery-view { max-height: 92vh; max-height: 92dvh; }
  .guild-temple { max-height: 92vh; max-height: 92dvh; padding: 1.25rem 0.9rem 1.1rem; }
  .guild-pediment { margin-bottom: 0.85rem; }
  .guild-pediment svg { max-width: 150px; }
  .guild-title { font-size: 1.45rem; margin-bottom: 0.35rem; }
  .guild-sub { font-size: 0.86rem; line-height: 1.55; margin-bottom: 1.2rem; }
  .members-footnote { margin-top: 1rem; }
  .guild-form { gap: 0.55rem; margin-bottom: 0.75rem; }
  .guild-input { padding: 0.8rem 0.7rem; }
  .guild-submit { padding: 0.9rem 1.4rem; min-height: 48px; }
  .guild-scroll { padding: 1rem 1rem; margin: 1rem 0; font-size: 0.9rem; line-height: 1.6; }
  .members-list { gap: 0.55rem; margin-top: 1rem; }
  .members-list li { font-size: 0.98rem; padding: 0.7rem 0.85rem; gap: 0.6rem; }
  /* lightbox: denser + tappable closes */
  .lb-figure { gap: 0.6rem; }
  #lb-img { max-height: calc(100dvh - 11rem); max-height: calc(100vh - 11rem); outline-offset: 3px; }
  .lb-caption { font-size: 0.55rem; letter-spacing: 0.18em; flex-wrap: wrap; justify-content: center; text-align: center; row-gap: 0.3rem; }
  .lb-nav { width: 48px; height: 48px; bottom: 0.7rem; }
  .lb-close { width: 44px; height: 44px; top: 0.6rem; right: 0.6rem; background: rgba(0,0,0,0.6); }
  .guild-close { width: 44px; height: 44px; top: 0.6rem; right: 0.6rem; background: rgba(0,0,0,0.6); }
  /* bottom chrome: icon-only music, breathable toast */
  #music-btn #music-label { display: none; }
  #music-btn { padding: 0.7rem; min-width: 44px; min-height: 44px; justify-content: center; }
  #to-top { width: 44px; height: 44px; }
  #toast-layer { bottom: 5rem; }
}

/* ── SHOWCASE subgroups ── */
.showcase-sub { margin-top: 2rem; }
.showcase-soon { color: #8a8a8a; font-style: italic; }

/* ── dialog icons: plain gold icons, no temple art ── */
.guild-icon { display: flex; justify-content: center; margin-bottom: 1.1rem; color: #d29c3c; }
.guild-icon .ic { width: 2rem; height: 2rem; }

/* ── MOBILE ROUND 4: tighten spacing (≤640px) ────
   Pure air removal. Touch targets and type sizes untouched.
   Lives last so it wins the cascade. Desktop untouched. */
@media (max-width: 640px) {
  section.py-section { padding: 1.4rem 1.1rem; }
  h2.py-h2 { margin-bottom: 0.75rem; }
  p.py-p { margin-bottom: 0.7rem; }
  h3.py-h3 { margin-top: 0.85rem; margin-bottom: 0.4rem; }
  .section-label { margin-bottom: 0.35rem; }
  .hero-content { padding-bottom: 1rem; }
  .hero-eyebrow { margin-bottom: 0.25rem; }
  .hero-name { margin-bottom: 0.4rem; }
  .hero-motto { margin-bottom: 0.7rem; }
  .hero-stats { gap: 0.25rem; margin-bottom: 0.8rem; padding: 0.4rem 0 0.2rem; }
  .two-col, .worked-grid { gap: 0.6rem; margin-top: 1rem; }
  .style-grid { gap: 0.6rem; margin-top: 1rem; }
  .path-grid { gap: 0.6rem; margin: 0.9rem 0 1rem; }
  .card, .style-card, .worked-card { padding: 0.95rem 0.9rem; }
  .rules li { padding: 0.75rem 0.8rem; margin-bottom: 0.5rem; }
  .reader-mark, .pro-block { padding: 0.9rem; margin-top: 1.1rem; }
  .price-banner, .price-banner.mini { padding: 0.95rem 0.9rem; margin: 0.9rem 0; }
  .callout { margin: 0.9rem 0; padding: 0.75rem 0.9rem; }
  .lego-block { margin: 0.9rem 0; padding: 0.85rem 0.9rem 0.85rem 1.1rem; }
  .gift-block { margin: 1rem 0; padding: 0.85rem 0.9rem; }
  .who-is-who { margin-top: 1rem; padding: 0.95rem 0.9rem; }
  .ornament { margin: 1rem auto; }
  .hr-subtle { margin: 1.1rem 0; }
  .gallery-grid, .showcase-front { gap: 0.65rem; margin-top: 1rem; }
  .gallery-filter { margin-top: 0.6rem; }
  .gallery-view { padding: 1.1rem 0.7rem 1rem; }
  .guild-temple { padding: 1.1rem 0.85rem 1rem; }
  .guide-body .chapter { margin-top: 1.75rem; }
  .guide-layout { padding: 0.4rem 1.1rem 2rem; }
  .library-shelf { padding: 0 1.1rem 2rem; }
  .page-hero { padding-bottom: 1.4rem; }
  footer.py-footer { padding: 1.75rem 1.1rem 1.5rem; }
  .members-list { gap: 0.45rem; }
  .lb-figure { gap: 0.5rem; }
}