/* Rave Yard (slug: rave-yard) — built from the Oct 17 flyer, staged as a descent.

   The flyer is a single-colour woodcut: toxic green ink on near-black, chunky cut shapes,
   a zombie DJ behind a tombstone with RAVE YARD engraved in roman capitals, a moon, a
   cross, tufts of grass, and a VHS scanline crawl over the whole thing.

   The page takes that ink and gives it somewhere to go. You start above ground at night —
   moon, fog, a skyline of headstones — and scrolling digs. Soil walls close in from the
   edges, strata slide past, the light drops, and the ticket gate sits six feet down. The
   depth is one number (--depth, 0 at the surface, 1 at the bottom) that JS writes on <body>
   and everything else reads: the walls, the light, the rail, the moon's height.

   Type is engraved, never glowing — cut into the stone the way the flyer cuts it. */

body.event-theme-graveyard {
  --ry-green: #6ee063;      /* the flyer's ink */
  --ry-bright: #b9f7a8;
  --ry-deep: #0d2412;       /* the darkest green in the cut */
  --ry-black: #050a06;
  --ry-bone: #dcf3d2;
  --ry-dirt: #1a1108;
  --depth: 0;               /* 0 = standing on the grass, 1 = six feet down */
  background: var(--ry-black);
  color: var(--ry-bone);
}
body.event-theme-graveyard .archive-header { position: sticky; top: 0; z-index: 40; background: rgba(5,10,6,.8); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(110,224,99,.2); }
body.event-theme-graveyard main { position: relative; z-index: 1; }
body.event-theme-graveyard footer.site-footer, body.event-theme-graveyard .site-footer { position: relative; z-index: 1; background: rgba(5,10,6,.92); }
/* The yard must stay fixed; every other child of main sits above it.
   EVERY fixed full-bleed layer that is a direct child of <main> must be listed in this
   :not() chain. This rule out-specifies a plain `position: fixed`, so a layer left out of
   it silently drops into normal flow and eats its own height of layout — the depth rail
   pushed the hero 380px down the page that way, and the Disco Tekk room did the same.
   Adding a new layer? Add it here too. */
body.event-theme-graveyard > main > *:not(.ry-yard):not(.ry-rail) { position: relative; z-index: 1; }

/* ================================================================
   THE YARD — fixed behind everything, reacts to --depth
   ================================================================ */
.ry-yard { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background:
  radial-gradient(120% 80% at 50% 108%, rgba(110,224,99,.16), transparent 62%),
  radial-gradient(70% 50% at 50% -10%, rgba(110,224,99,.10), transparent 70%),
  var(--ry-black); }

/* The surface sky dims as you go under. */
.ry-sky { position: absolute; inset: 0; opacity: calc(1 - var(--depth) * .82); transition: opacity .18s linear; }

/* ---- Moon, and clouds crossing it ---- */
.ry-moon { position: absolute; top: 7%; right: 13%; width: clamp(70px, 9vw, 130px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #f2ffe9, #9fd98f 58%, #4d8c48 100%);
  box-shadow: 0 0 60px rgba(159,217,143,.5), 0 0 160px rgba(110,224,99,.28);
  /* Sinks out of frame as the grave deepens. */
  translate: 0 calc(var(--depth) * -42vh); transition: translate .18s linear; }
/* Two torn cloud bands drifting across the moon's face. */
.ry-cloud { position: absolute; top: 6%; left: -40%; width: 60%; height: clamp(26px, 4vw, 54px);
  background: radial-gradient(50% 120% at 30% 50%, rgba(8,20,10,.92), transparent 70%),
              radial-gradient(42% 120% at 62% 60%, rgba(8,20,10,.88), transparent 72%),
              radial-gradient(30% 100% at 84% 45%, rgba(8,20,10,.8), transparent 70%);
  filter: blur(2px); animation: ry-cloud 54s linear infinite;
  translate: 0 calc(var(--depth) * -42vh); }
.ry-cloud-2 { top: 13%; height: clamp(18px, 3vw, 38px); opacity: .7; animation-duration: 83s; animation-delay: -30s; }
@keyframes ry-cloud { to { left: 120%; } }

/* ---- Fog: two banks drifting opposite ways so the ground never looks static ---- */
.ry-fog { position: absolute; left: -50%; width: 200%; height: 46%; bottom: 0;
  background: radial-gradient(60% 100% at 30% 100%, rgba(110,224,99,.15), transparent 70%),
              radial-gradient(50% 100% at 70% 100%, rgba(185,247,168,.10), transparent 70%);
  animation: ry-drift 38s linear infinite; }
.ry-fog-2 { height: 30%; opacity: .7; animation-duration: 61s; animation-direction: reverse; }
@keyframes ry-drift { to { transform: translateX(25%); } }

/* ---- Headstones along the horizon, two depths at different parallax ----
   Deliberately mixed silhouettes — crosses, celtic rings, broken slabs, an obelisk, a
   leaner. Flat-topped slabs on their own read as a city skyline, which is the one thing
   this page must not look like. */
.ry-stones { position: absolute; left: -4%; right: -4%; bottom: 0; background-repeat: repeat-x;
  background-position: bottom center; background-size: auto 100%; }
.ry-stones-far { height: clamp(70px, 12vw, 140px); opacity: .34; translate: 0 calc(var(--depth) * 30vh);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 760 190'%3E%3Cg fill='%230a2410'%3E%3Cpath d='M24 190v-88a26 26 0 0 1 52 0v88z'/%3E%3Cpath d='M108 190v-64h-16v-16h16v-18h18v18h16v16h-16v64z'/%3E%3Cpath d='M186 190v-54a22 22 0 0 1 44 0v54z' transform='rotate(-7 208 190)'/%3E%3Cpath d='M268 190v-96l12-24 12 24v96z'/%3E%3Cpath d='M330 190v-40h42v40z'/%3E%3Cpath d='M404 190v-74a24 24 0 0 1 48 0v74z'/%3E%3Cpath d='M486 190v-58h-14v-15h14v-17h17v17h14v15h-14v58z'/%3E%3Ccircle cx='494.5' cy='117' r='21' fill='none' stroke='%230a2410' stroke-width='7'/%3E%3Cpath d='M556 190v-66l10 8 9-14 12 11 8-9v70z'/%3E%3Cpath d='M624 190v-80q0-16 16-20h30q16 4 16 20v80z'/%3E%3Cpath d='M712 190v-46a18 18 0 0 1 36 0v46z'/%3E%3C/g%3E%3C/svg%3E"); }
.ry-stones-near { height: clamp(100px, 18vw, 210px); opacity: .72; translate: 0 calc(var(--depth) * 52vh);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 200'%3E%3Cg fill='%23040d06'%3E%3Cpath d='M18 200v-104a30 30 0 0 1 60 0v104z'/%3E%3Cpath d='M112 200v-74h-18v-18h18v-22h20v22h18v18h-18v74z'/%3E%3Cpath d='M200 200v-70l12 9 10-16 14 13 10-11v75z'/%3E%3Cpath d='M274 200v-62a26 26 0 0 1 52 0v62z' transform='rotate(6 300 200)'/%3E%3Cpath d='M362 200v-116l13-28 13 28v116z'/%3E%3Cpath d='M426 200v-66h-16v-17h16v-20h19v20h16v17h-16v66z'/%3E%3Ccircle cx='435.5' cy='117' r='24' fill='none' stroke='%23040d06' stroke-width='8'/%3E%3Cpath d='M502 200v-86q0-18 18-23h34q18 5 18 23v86z'/%3E%3Cpath d='M596 200v-50a20 20 0 0 1 40 0v50z'/%3E%3C/g%3E%3C/svg%3E"); }
/* Grass tufts cut like the flyer's, right on the ground line. */
.ry-grass { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(16px, 2.6vw, 30px); opacity: .5;
  background-repeat: repeat-x; background-position: bottom center; background-size: auto 100%;
  translate: 0 calc(var(--depth) * 56vh);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 30'%3E%3Cg fill='none' stroke='%236ee063' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 30c0-9-4-14-8-17M18 30c0-11 3-16 7-19M26 30c0-7 4-11 8-13'/%3E%3Cpath d='M78 30c0-10-4-15-9-18M86 30c0-12 4-17 9-20M95 30c0-8 5-12 9-14'/%3E%3Cpath d='M150 30c0-9-3-13-7-16M158 30c0-11 4-16 8-18M166 30c0-7 3-10 7-12'/%3E%3Cpath d='M208 30c0-10-4-14-8-17M216 30c0-12 3-16 8-19'/%3E%3C/g%3E%3C/svg%3E"); }

/* ---- The dig: soil walls that close in from the edges as you descend ----
   This is the one layer no other night on this site has, so it carries the identity. */
.ry-walls { position: absolute; inset: 0; opacity: var(--depth); transition: opacity .18s linear; }
.ry-wall { position: absolute; top: 0; bottom: 0; width: calc(6% + var(--depth) * 13%);
  background:
    repeating-linear-gradient(174deg, rgba(0,0,0,.42) 0 2px, transparent 2px 9px),   /* strata */
    repeating-linear-gradient(3deg, rgba(110,224,99,.05) 0 1px, transparent 1px 22px),
    linear-gradient(90deg, #120b04, var(--ry-dirt) 58%, rgba(10,6,2,0)); }
.ry-wall-right { right: 0; transform: scaleX(-1); }
/* Roots and pebbles scrolling up the walls — the only thing that tells you you're moving. */
.ry-strata { position: absolute; inset: 0; opacity: calc(var(--depth) * .9); background-repeat: repeat-y;
  background-size: 100% 620px; background-position: 0 calc(var(--dig, 0px) * -1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 620' preserveAspectRatio='none'%3E%3Cg stroke='%233d2a14' fill='none' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M0 60c26 6 40 22 38 44M0 61c20 18 44 16 60 4'/%3E%3Cpath d='M300 180c-30 4-46 24-44 48M300 181c-22 20-48 18-66 6'/%3E%3Cpath d='M0 330c30 8 44 26 42 50M0 331c24 20 50 18 68 4'/%3E%3Cpath d='M300 470c-26 6-40 22-38 44'/%3E%3C/g%3E%3Cg fill='%232d1e0e'%3E%3Ccircle cx='28' cy='140' r='7'/%3E%3Ccircle cx='272' cy='96' r='5'/%3E%3Ccircle cx='40' cy='268' r='5'/%3E%3Ccircle cx='262' cy='352' r='8'/%3E%3Ccircle cx='22' cy='436' r='6'/%3E%3Ccircle cx='280' cy='556' r='6'/%3E%3Ccircle cx='46' cy='588' r='4'/%3E%3C/g%3E%3C/svg%3E"); }
.ry-strata-right { transform: scaleX(-1); }

/* ---- Spores drifting up out of the ground ---- */
.ry-spore { position: absolute; bottom: -8px; width: 3px; height: 3px; border-radius: 50%;
  background: var(--ry-bright); opacity: 0; box-shadow: 0 0 8px rgba(185,247,168,.8);
  animation: ry-spore linear infinite; }
@keyframes ry-spore {
  0% { opacity: 0; transform: translateY(0) translateX(0); }
  12% { opacity: .85; }
  75% { opacity: .5; }
  100% { opacity: 0; transform: translateY(-82vh) translateX(var(--sway, 20px)); }
}

/* ---- VHS crawl straight off the flyer ---- */
.ry-scan { position: absolute; inset: 0; opacity: .5; mix-blend-mode: overlay;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.5) 0 1px, transparent 1px 3px);
  animation: ry-scan 7s linear infinite; }
@keyframes ry-scan { to { transform: translateY(3px); } }

/* ================================================================
   DEPTH RAIL — how far down you've dug, pinned to the left edge
   ================================================================ */
.ry-rail { position: fixed; left: clamp(10px, 2vw, 26px); top: 50%; translate: 0 -50%; z-index: 3;
  display: grid; gap: 0; height: min(52vh, 380px); width: 54px; pointer-events: none;
  opacity: clamp(0, calc(var(--depth) * 6), 1); transition: opacity .3s; }
.ry-rail-line { position: absolute; left: 16px; top: 0; bottom: 0; width: 1px; background:
  linear-gradient(180deg, transparent, rgba(110,224,99,.35) 12%, rgba(110,224,99,.35) 88%, transparent); }
.ry-rail-tick { position: absolute; left: 10px; display: flex; align-items: center; gap: 8px;
  color: rgba(220,243,210,.32); font: 400 8px 'Share Tech Mono', monospace; letter-spacing: .18em; }
.ry-rail-tick::before { content: ''; width: 7px; height: 1px; background: rgba(110,224,99,.4); }
/* The marker rides the dig. */
.ry-rail-head { position: absolute; left: 10px; width: 13px; height: 13px; translate: 0 -50%;
  top: calc(var(--depth) * 100%); border: 1px solid var(--ry-green); border-radius: 50%;
  background: rgba(110,224,99,.18); box-shadow: 0 0 14px rgba(110,224,99,.6);
  transition: top .12s linear; }
.ry-rail-head::after { content: attr(data-feet); position: absolute; left: 22px; top: 50%; translate: 0 -50%;
  color: var(--ry-green); font: 400 9px 'Share Tech Mono', monospace; letter-spacing: .16em; white-space: nowrap; }
/* The rail needs real gutter beside the 1040px content column, or it sits on the text. */
@media (max-width: 1200px) { .ry-rail { display: none; } }

/* ================================================================
   HERO — the headstone, engraved
   ================================================================ */
/* The tomb is the whole first screen: it centres in whatever is left under the site header
   (151px of logo on desktop), so it lands in the middle on open rather than below the fold.
   --ry-head is measured in JS because the header is a sibling of <main> and CSS cannot
   reach it; the 0px fallback just means the hero starts where it always did. */
.ry-hero { position: relative; display: grid; justify-items: center; align-content: center;
  min-height: calc(100svh - var(--ry-head, 0px));
  max-width: 1100px; margin: 0 auto;
  padding: clamp(20px, 3vw, 44px) clamp(18px, 5vw, 60px) clamp(52px, 7vw, 92px); text-align: center; }

.ry-stone { position: relative; width: min(100%, 580px);
  padding: clamp(44px, 7.5vw, 80px) clamp(22px, 5vw, 52px) clamp(34px, 5vw, 60px);
  border: 2px solid rgba(110,224,99,.38); border-radius: clamp(130px, 26vw, 280px) clamp(130px, 26vw, 280px) 10px 10px;
  background:
    repeating-linear-gradient(118deg, rgba(0,0,0,.14) 0 1px, transparent 1px 5px),  /* chisel grain */
    linear-gradient(170deg, #21432340, #0c1d0f80);
  box-shadow: inset 0 3px 0 rgba(185,247,168,.22), inset 0 -30px 60px rgba(0,0,0,.5), 0 34px 70px rgba(0,0,0,.6);
  animation: ry-rise 1s cubic-bezier(.16,1,.3,1) both; }
@keyframes ry-rise { from { opacity: 0; transform: translateY(34px); } }

.ry-title { margin: 0; font: 700 clamp(38px, 9vw, 92px)/1.02 Cinzel, serif; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ry-bone); }
/* Letterpress, not neon: the name is cut INTO the stone. */
.ry-title span { display: block; animation: ry-carve .9s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--w) * 140ms + 180ms);
  text-shadow: 0 2px 0 rgba(0,0,0,.72), 0 -1px 0 rgba(185,247,168,.4), 0 0 26px rgba(110,224,99,.12); }
@keyframes ry-carve { from { opacity: 0; transform: translateY(16px) scale(1.04); filter: blur(5px); } }

.ry-date { margin: clamp(10px, 2vw, 18px) 0 0; font: 400 clamp(17px, 3.4vw, 30px) Cinzel, serif; letter-spacing: .2em;
  color: var(--ry-green); text-shadow: 0 2px 0 rgba(0,0,0,.55); }
.ry-epitaph { max-width: 460px; margin: clamp(14px, 2.4vw, 22px) auto 0; color: rgba(220,243,210,.72);
  font: 400 clamp(14px, 1.5vw, 16px)/1.7 Manrope, sans-serif; }

.ry-vitals { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px clamp(12px, 3vw, 30px);
  margin: clamp(20px, 3.5vw, 34px) 0 0; padding: 0; list-style: none; }
.ry-vitals li { display: grid; gap: 3px; }
.ry-vitals dt, .ry-vitals b { color: rgba(220,243,210,.45); font: 400 9px 'Share Tech Mono', monospace; letter-spacing: .26em; text-transform: uppercase; font-weight: 400; }
.ry-vitals strong { color: var(--ry-green); font: 600 clamp(14px, 2vw, 18px) Manrope, sans-serif; }
.ry-vitals .ry-door { color: rgba(220,243,210,.7); font-size: clamp(11px, 1.5vw, 13px); font-weight: 500; }

.ry-cta { display: inline-flex; align-items: center; gap: 12px; margin-top: clamp(22px, 4vw, 34px); padding: 15px 30px;
  border: 2px solid var(--ry-green); border-radius: 4px; color: var(--ry-green); text-decoration: none;
  font: 700 12px 'Share Tech Mono', monospace; letter-spacing: .2em; text-transform: uppercase;
  box-shadow: 0 0 24px rgba(110,224,99,.2), inset 0 0 22px rgba(110,224,99,.07); transition: background .2s, color .2s, box-shadow .2s; }
.ry-cta:hover { background: var(--ry-green); color: var(--ry-black); box-shadow: 0 0 46px rgba(110,224,99,.5); }
.ry-cta span { animation: ry-nudge 2.4s ease-in-out infinite; }
@keyframes ry-nudge { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(4px); } }

/* A shovel-cut hint that the page goes down. Pinned to the hero's bottom edge rather than
   sitting in flow, so it cannot push the tomb off centre. */
.ry-dig-hint { position: absolute; left: 0; right: 0; bottom: clamp(16px, 3vw, 34px); margin: 0; color: rgba(220,243,210,.34);
  font: 400 10px 'Share Tech Mono', monospace; letter-spacing: .3em; text-transform: uppercase;
  opacity: calc(1 - var(--depth) * 7); transition: opacity .2s; }

/* ================================================================
   SECTIONS — offset left/right instead of one centred column
   ================================================================ */
.ry-section { max-width: 1040px; margin: clamp(44px, 8vw, 110px) auto; padding: 0 clamp(18px, 5vw, 60px); }
.ry-label { margin: 0; color: var(--ry-green); font: 400 11px 'Share Tech Mono', monospace; letter-spacing: .3em; text-transform: uppercase; }
.ry-section h2 { margin: 6px 0 18px; font: 700 clamp(26px, 4.4vw, 46px) Cinzel, serif; letter-spacing: .05em; text-transform: uppercase; color: var(--ry-bone);
  text-shadow: 0 2px 0 rgba(0,0,0,.6), 0 -1px 0 rgba(185,247,168,.22); }
.ry-note p { margin: 0; color: rgba(220,243,210,.8); font: 400 clamp(15px, 1.6vw, 17px)/1.8 Manrope, sans-serif; }
/* The note and the flyer sit off-axis so the page stops reading as a stack of centred cards. */
.ry-note { max-width: 560px; margin-right: auto; margin-left: clamp(18px, 8vw, 150px); }

/* Sections fade up as they clear the lip of the grave. */
.ry-reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.ry-reveal.is-risen { opacity: 1; transform: none; }

/* ================================================================
   LINEUP — one plot per artist, rising out of the dirt
   ================================================================ */
.ry-plots { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: clamp(20px, 3vw, 34px) clamp(14px, 2.4vw, 26px); margin: 0; padding: 0; list-style: none;
  align-items: end; }
/* Uneven ground: no two neighbours sit at the same height. */
.ry-plot:nth-child(3n+1) { --lift: 0px; }
.ry-plot:nth-child(3n+2) { --lift: 22px; }
.ry-plot:nth-child(3n+3) { --lift: 10px; }

.ry-plot { position: relative; padding-bottom: 16px; margin-bottom: var(--lift, 0px); }

.ry-face { position: relative; z-index: 1; display: grid; align-content: center; justify-items: center; gap: 5px;
  min-height: clamp(142px, 18vw, 186px); padding: 24px 14px 26px; text-align: center;
  border: 2px solid rgba(110,224,99,.3); border-bottom-width: 4px;
  background:
    repeating-linear-gradient(112deg, rgba(0,0,0,.12) 0 1px, transparent 1px 5px),
    linear-gradient(170deg, rgba(33,67,35,.34), rgba(12,29,15,.5));
  box-shadow: inset 0 2px 0 rgba(185,247,168,.18), 0 18px 34px rgba(0,0,0,.45);
  /* Buried until it scrolls into view. */
  opacity: 0; transform: translateY(54px);
  transition: opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1),
              border-color .25s, box-shadow .25s;
  transition-delay: calc(var(--i) * 150ms), calc(var(--i) * 150ms), 0s, 0s; }
.ry-plot.is-risen .ry-face { opacity: 1; transform: translateY(0); }
/* Four cut shapes, cycled — a yard, not a row of identical markers. */
.ry-plot:nth-child(4n+1) .ry-face { border-radius: 94px 94px 6px 6px; }
.ry-plot:nth-child(4n+2) .ry-face { border-radius: 10px 10px 6px 6px; }
.ry-plot:nth-child(4n+3) .ry-face { border-radius: 94px 10px 6px 6px; }
.ry-plot:nth-child(4n+4) .ry-face { border-radius: 10px 94px 6px 6px; }
.ry-plot:hover .ry-face { transform: translateY(-7px); border-color: rgba(110,224,99,.6);
  box-shadow: inset 0 2px 0 rgba(185,247,168,.3), 0 26px 46px rgba(0,0,0,.55), 0 0 40px rgba(110,224,99,.18); }

.ry-face small { color: rgba(220,243,210,.4); font: 400 8px 'Share Tech Mono', monospace; letter-spacing: .26em; text-transform: uppercase; }
.ry-face em { color: rgba(110,224,99,.55); font: 400 8px 'Share Tech Mono', monospace; letter-spacing: .2em; text-transform: uppercase; font-style: normal; }
.ry-face a, .ry-face .ry-name { color: var(--ry-bone); font: 700 clamp(14px, 1.8vw, 19px)/1.2 Cinzel, serif; letter-spacing: .03em; text-decoration: none;
  /* Long handles must wrap inside the stone instead of spilling over its edge. */
  max-width: 100%; overflow-wrap: anywhere; hyphens: auto;
  text-shadow: 0 1px 0 rgba(0,0,0,.6), 0 -1px 0 rgba(185,247,168,.25); }
.ry-face a { display: inline-block; padding: 3px 2px; }
.ry-face a b { margin-left: .3em; color: var(--ry-green); font-size: .7em; font-weight: 400; }
.ry-face a:hover { color: var(--ry-green); }
.ry-plot.is-tba .ry-face { border-style: dashed; }
.ry-plot.is-tba .ry-name { color: rgba(220,243,210,.4); }
.ry-hint { margin: 0 0 18px; color: rgba(220,243,210,.5); font: 400 12px 'Share Tech Mono', monospace; letter-spacing: .1em; }
.ry-hint b { color: var(--ry-green); font-weight: 400; }

/* The run time of the whole bill, read off the first and last set. */
.ry-shift { display: inline-flex; align-items: baseline; gap: 10px; margin: 0 0 10px; padding: 7px 14px;
  border: 1px solid rgba(110,224,99,.28); border-radius: 3px; background: rgba(110,224,99,.05); }
.ry-shift span { color: rgba(220,243,210,.5); font: 400 9px 'Share Tech Mono', monospace; letter-spacing: .26em; text-transform: uppercase; }
.ry-shift b { color: var(--ry-green); font: 400 13px 'Share Tech Mono', monospace; letter-spacing: .12em; }

/* ---- The stone the reader is on ----
   Whichever stone is hovered or keyboard-focused takes the grave-light, so the night
   responds to where the reader is looking. :focus-within carries it for keyboard users,
   since the names are links. Nothing here is driven by the wall clock. */
.ry-plot:hover .ry-face, .ry-plot:focus-within .ry-face { border-color: rgba(110,224,99,.85);
  box-shadow: inset 0 2px 0 rgba(185,247,168,.42), 0 26px 46px rgba(0,0,0,.55), 0 0 56px rgba(110,224,99,.32); }
.ry-plot:hover .ry-face small, .ry-plot:focus-within .ry-face small { color: var(--ry-green); }
.ry-plot:hover .ry-face em, .ry-plot:focus-within .ry-face em { color: var(--ry-bright); }
.ry-plot:hover .ry-face .ry-name, .ry-plot:focus-within .ry-face .ry-name { color: #eaffe0; }
.ry-plot:hover .ry-face::before, .ry-plot:focus-within .ry-face::before { content: ''; position: absolute; top: 11px; left: 50%;
  width: 7px; height: 7px; border-radius: 50%; background: var(--ry-bright); box-shadow: 0 0 14px var(--ry-green);
  transform: translateX(-50%); animation: ry-pulse 1.7s ease-in-out infinite; }
@keyframes ry-pulse { 50% { opacity: .25; transform: translateX(-50%) scale(.6); } }

/* ================================================================
   FLYER — propped against the dirt, off-centre
   ================================================================ */
.ry-flyer { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 22px; }
.ry-flyer video { display: block; width: min(100%, 340px); height: auto; rotate: -1.4deg;
  border: 2px solid rgba(110,224,99,.3); border-radius: 4px; background: #000;
  box-shadow: 0 30px 66px rgba(0,0,0,.7), 0 0 50px rgba(110,224,99,.12); transition: rotate .35s cubic-bezier(.16,1,.3,1); }
.ry-flyer video + video { rotate: 1.2deg; }
.ry-flyer img { display: block; width: min(100%, 340px); height: auto; rotate: -0.8deg;
  border: 2px solid rgba(110,224,99,.3); border-radius: 4px; background: #000;
  box-shadow: 0 30px 66px rgba(0,0,0,.7), 0 0 50px rgba(110,224,99,.12); transition: rotate .35s cubic-bezier(.16,1,.3,1); }
.ry-flyer img:hover { rotate: 0deg; }
/* Both clips were exported letterboxed (rows of black top and bottom) — a view-box crops each to its artwork. */
.ry-flyer video:first-child { object-view-box: inset(2.3% 0 2.5%); }
.ry-flyer video + video { object-view-box: inset(7.1% 0); }
.ry-flyer video:hover { rotate: 0deg; }
.ry-flyer-section { display: grid; gap: 10px; justify-items: end; text-align: right; }

/* ================================================================
   BOOTH — the caretaker's gate, six feet down
   ================================================================ */
.ry-booth { position: relative; max-width: 640px; margin: clamp(44px, 9vw, 120px) auto clamp(36px, 7vw, 92px);
  padding: clamp(28px, 4.5vw, 46px) clamp(24px, 4vw, 40px);
  border: 2px solid rgba(110,224,99,.3); border-radius: 14px;
  background: linear-gradient(165deg, rgba(20,42,23,.9), rgba(6,14,8,.94)); box-shadow: 0 40px 96px rgba(0,0,0,.6); }
/* Iron railings across the top, so the ticket box reads as a gate. */
.ry-booth::before { content: ''; position: absolute; left: 10%; right: 10%; top: -1px; height: 16px;
  background: repeating-linear-gradient(90deg, rgba(110,224,99,.32) 0 2px, transparent 2px 15px); }
.ry-console { display: grid; gap: 15px; }
.ry-readout { display: flex; align-items: baseline; gap: 12px; padding: 12px 16px; border-radius: 8px; background: #050d06;
  box-shadow: inset 0 0 0 1px rgba(110,224,99,.22), inset 0 8px 20px rgba(0,0,0,.6); }
.ry-readout small, .ry-total small { color: rgba(110,224,99,.6); font: 400 10px 'Share Tech Mono', monospace; letter-spacing: .2em; text-transform: uppercase; }
.ry-readout strong { margin-left: auto; color: var(--ry-green); font: 400 clamp(25px, 3vw, 34px) 'Share Tech Mono', monospace; text-shadow: 0 0 16px rgba(110,224,99,.45); }
.ry-total { display: flex; align-items: baseline; gap: 12px; padding: 10px 16px; border-radius: 8px; background: rgba(110,224,99,.09); }
.ry-total[hidden] { display: none; }
.ry-total strong { margin-left: auto; color: var(--ry-green); font: 400 24px 'Share Tech Mono', monospace; }
.ry-level label { display: block; margin-bottom: 8px; color: rgba(220,243,210,.55); font: 400 10px 'Share Tech Mono', monospace; letter-spacing: .24em; text-transform: uppercase; }
.ry-level-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ry-step { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(110,224,99,.35); border-radius: 6px;
  background: #0d1f10; color: var(--ry-green); cursor: pointer; font: 700 20px Manrope, sans-serif; transition: box-shadow .2s, transform .15s; }
.ry-step:hover { box-shadow: 0 0 20px rgba(110,224,99,.35); }
.ry-step:active { transform: scale(.93); }
.ry-level-row select { min-height: 44px; padding: 0 12px; border: 1px solid rgba(110,224,99,.35); border-radius: 6px; background: #0d1f10; color: var(--ry-bone); font: 600 16px Manrope, sans-serif; }
.ry-buy { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 64px; padding: 0 24px;
  border: 0; border-radius: 6px; background: linear-gradient(120deg, var(--ry-green), #9df58c); color: #06140a; cursor: pointer;
  font: 700 14px Manrope, sans-serif; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 14px 40px rgba(110,224,99,.24); transition: transform .2s, box-shadow .2s; }
.ry-buy:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 20px 56px rgba(110,224,99,.42); }
.ry-buy:disabled { background: rgba(255,255,255,.1); color: rgba(220,243,210,.6); cursor: not-allowed; box-shadow: none; }
.ry-booth-note { margin: 0; color: rgba(220,243,210,.6); font: 400 13px/1.6 Manrope, sans-serif; }
.ry-checkout-message { min-height: 20px; margin: 0; color: var(--ry-green); font: 400 13px 'Share Tech Mono', monospace; }

.ry-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 22px; max-width: 1040px; margin: 0 auto;
  padding: 24px clamp(18px, 5vw, 60px) 56px; border-top: 1px solid rgba(110,224,99,.2); color: rgba(220,243,210,.5);
  font: 400 11px 'Share Tech Mono', monospace; letter-spacing: .2em; text-transform: uppercase; }

/* Short screens (laptops, landscape phones): the tomb must still fit whole on open, so the
   stone loses its generous padding before it loses the bottom of the vitals list. */
@media (max-height: 820px) {
  .ry-stone { padding-top: clamp(28px, 5vw, 48px); padding-bottom: clamp(22px, 3.5vw, 36px); }
  .ry-title { font-size: clamp(32px, 7vw, 64px); }
  .ry-date { font-size: clamp(15px, 2.6vw, 22px); }
  .ry-epitaph { margin-top: 10px; }
  .ry-vitals { margin-top: clamp(14px, 2vw, 22px); }
  .ry-cta { margin-top: clamp(16px, 2.5vw, 24px); padding: 12px 24px; }
}
@media (max-height: 660px) {
  .ry-epitaph { display: none; }
  .ry-stone { border-radius: clamp(90px, 18vw, 170px) clamp(90px, 18vw, 170px) 10px 10px; }
}

@media (max-width: 620px) {
  .ry-section, .ry-hero { padding-inline: 18px; }
  .ry-stone { padding-inline: 20px; border-radius: 120px 120px 8px 8px; }
  .ry-plots { grid-template-columns: 1fr 1fr; }
  .ry-note { margin-inline: 0; }
  .ry-flyer, .ry-flyer-section { justify-items: center; justify-content: center; text-align: center; }
  .ry-booth { margin-inline: 14px; padding: 22px 18px; }
  .ry-vitals { gap: 10px 16px; }
}

/* Reduced motion: the yard holds still and nothing is left hidden behind a transition. */
@media (prefers-reduced-motion: reduce) {
  body.event-theme-graveyard *, body.event-theme-graveyard *::before, body.event-theme-graveyard *::after { animation: none !important; transition: none !important; }
  .ry-face, .ry-reveal { opacity: 1 !important; transform: none !important; }
  .ry-spore { display: none; }
}