:root {
  /* DESIGN.md typography tokens: IBM Plex Sans JP** for grounded body text; Space Grotesk** for small coordinate labels. */
  --night-soil: #11100C;
  --wet-clay: #3A251C;
  --bone-ceramic: #E8DDC7;
  --jasmine-neon: #DFFF4F;
  --static-magenta: #FF3DF2;
  --voltage-cyan: #20F7FF;
  --bruised-violet: #6C3BFF;
  --display: "Bebas Neue", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --body: "IBM Plex Sans JP", Inter, system-ui, sans-serif;
  --space: "Space Grotesk", Inter, system-ui, sans-serif;
  --font-token-jp: "JP**";
  --font-token-grotesk: "Grotesk**";
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--night-soil);
  color: var(--bone-ceramic);
  font-family: var(--body);
  cursor: crosshair;
}

body::before,
body::after,
.soil-texture {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

body::before {
  background:
    radial-gradient(circle at 18% 24%, rgba(58,37,28,.72), transparent 22rem),
    radial-gradient(circle at 78% 12%, rgba(108,59,255,.18), transparent 20rem),
    radial-gradient(circle at 62% 76%, rgba(32,247,255,.09), transparent 24rem),
    linear-gradient(145deg, #11100C 0%, #19120d 48%, #0d0c09 100%);
}

body::after {
  opacity: .44;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle, rgba(232,221,199,.22) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(223,255,79,.22) 0 1px, transparent 1.3px),
    radial-gradient(circle, rgba(58,37,28,.9) 0 1px, transparent 1.8px);
  background-size: 41px 47px, 79px 83px, 17px 19px;
}

.soil-texture {
  z-index: 1;
  opacity: .36;
  background:
    repeating-radial-gradient(ellipse at 20% 30%, transparent 0 18px, rgba(232,221,199,.045) 19px 20px, transparent 21px 38px),
    repeating-linear-gradient(102deg, transparent 0 37px, rgba(58,37,28,.26) 38px 40px, transparent 41px 82px);
  filter: contrast(120%);
}

.site-mark,
.chamber-nav,
.story-plate {
  position: fixed;
  z-index: 20;
}

.site-mark {
  top: 1rem;
  left: 1rem;
  display: flex;
  gap: .7rem;
  align-items: center;
  color: var(--bone-ceramic);
  mix-blend-mode: screen;
}

.mark-knot {
  width: 3rem;
  height: 2.65rem;
  display: grid;
  place-items: center;
  font-family: var(--body);
  font-weight: 600;
  color: var(--night-soil);
  background: var(--bone-ceramic);
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
  box-shadow: 0 0 0 2px var(--wet-clay), 0 0 28px rgba(223,255,79,.36);
}

.mark-domain,
.chamber-nav,
.coordinate,
.hex em,
.plate-label {
  font-family: var(--space);
  text-transform: uppercase;
  letter-spacing: .13em;
}

.mark-domain { font-size: .8rem; color: rgba(232,221,199,.76); }

.chamber-nav {
  top: 1rem;
  right: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .45rem;
  max-width: 36rem;
}

.chamber-nav a {
  color: var(--bone-ceramic);
  text-decoration: none;
  font-size: .68rem;
  padding: .45rem .65rem;
  border: 1px solid rgba(232,221,199,.2);
  background: rgba(17,16,12,.42);
  clip-path: polygon(10% 0, 92% 0, 100% 50%, 92% 100%, 10% 100%, 0 50%);
  transition: color .25s, border-color .25s, transform .25s, box-shadow .25s;
}

.chamber-nav a:hover,
.chamber-nav a.active {
  color: var(--night-soil);
  border-color: var(--jasmine-neon);
  background: var(--jasmine-neon);
  transform: translateY(-2px) rotate(-1deg);
  box-shadow: 0 0 22px rgba(223,255,79,.38);
}

.experience { position: relative; z-index: 2; }

.chamber {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  perspective: 1100px;
  transform-style: preserve-3d;
  padding: clamp(5rem, 8vw, 8rem) clamp(1.25rem, 4vw, 5rem);
  border-bottom: 1px solid rgba(232,221,199,.08);
}

.chamber::before {
  content: "";
  position: absolute;
  inset: 12% -8% auto;
  height: 75%;
  background:
    radial-gradient(circle at 50% 100%, rgba(58,37,28,.62), transparent 55%),
    radial-gradient(circle at 22% 56%, rgba(223,255,79,.08), transparent 18%),
    radial-gradient(circle at 76% 30%, rgba(255,61,242,.08), transparent 22%);
  filter: blur(8px);
  transform: rotate(-4deg);
}

.ghost-word {
  position: absolute;
  left: -5vw;
  right: -5vw;
  bottom: 27vh;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(7rem, 20vw, 22rem);
  line-height: .78;
  letter-spacing: .01em;
  color: rgba(232,221,199,.13);
  text-shadow: 5px 0 rgba(255,61,242,.08), -5px 0 rgba(32,247,255,.08);
  transform: rotate(-4deg) translateZ(-70px);
  opacity: .55;
  transition: opacity .7s ease, transform .7s ease, color .7s ease;
}

body.has-interacted .ghost-word {
  opacity: .93;
  color: rgba(232,221,199,.2);
  transform: rotate(-2deg) translateY(-4vh) translateZ(-30px);
}

.ghost-word::before,
.glitch-title::before,
.final-word::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: var(--static-magenta);
  clip-path: polygon(0 12%, 100% 10%, 100% 21%, 0 24%);
  transform: translateX(-8px);
  opacity: .42;
}

.ghost-word::after,
.glitch-title::after,
.final-word::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: var(--voltage-cyan);
  clip-path: polygon(0 62%, 100% 59%, 100% 74%, 0 70%);
  transform: translateX(7px);
  opacity: .36;
}

.chamber-copy,
.side-note,
.bloom-annotation,
.signal-copy,
.afterglow-copy {
  position: relative;
  z-index: 5;
  max-width: 26rem;
  color: rgba(232,221,199,.82);
}

.soil-copy { margin: 7vh 0 0 6vw; }

.chamber-copy h2,
.chamber-title {
  position: relative;
  z-index: 5;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(4.8rem, 13vw, 15rem);
  line-height: .8;
  letter-spacing: .02em;
  color: var(--bone-ceramic);
  text-shadow: 0 0 34px rgba(223,255,79,.08), 8px 10px 0 rgba(58,37,28,.65);
}

.chamber-title { display: inline-block; margin-left: 7vw; }

.coordinate,
.plate-label {
  display: block;
  margin-bottom: .75rem;
  font-size: .7rem;
  color: var(--jasmine-neon);
}

p { line-height: 1.7; font-size: clamp(.98rem, 1.5vw, 1.18rem); }

.honeycomb {
  position: relative;
  z-index: 8;
  transform-style: preserve-3d;
  min-height: 44rem;
  width: min(82rem, 96vw);
  margin-inline: auto;
}

.honeycomb-low { margin-top: -10vh; }
.fracture-map { margin-top: -2rem; transform: translateX(4vw) rotate(-2deg); }
.bloom-garden { margin-top: 2rem; transform: translateX(-3vw) rotate(3deg); }
.signal-map { margin-top: -1rem; transform: translateX(2vw) rotate(-1deg); }
.afterglow-orbit { min-height: 31rem; margin-top: 2rem; transform: translateX(5vw); }

.hex {
  position: absolute;
  width: clamp(8.5rem, 15vw, 13.6rem);
  aspect-ratio: 1 / .88;
  display: grid;
  place-items: center;
  padding: 1.4rem;
  text-align: center;
  color: var(--night-soil);
  clip-path: polygon(25% 2%, 75% 2%, 100% 50%, 75% 98%, 25% 98%, 0 50%);
  transform-style: preserve-3d;
  transform: translate3d(var(--x, 0), var(--y, 0), 0) rotate(var(--r, 0deg));
  transition: transform .22s ease-out, filter .28s ease, box-shadow .28s ease;
  box-shadow: inset 0 -13px 24px rgba(58,37,28,.5), inset 0 10px 15px rgba(232,221,199,.12), 0 28px 35px rgba(0,0,0,.46);
  will-change: transform;
}

.hex::before,
.hex::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: inherit;
  pointer-events: none;
}

.hex::before {
  background:
    linear-gradient(118deg, transparent 0 35%, rgba(58,37,28,.44) 36% 37%, transparent 38% 100%),
    linear-gradient(21deg, transparent 0 48%, rgba(255,61,242,.26) 49% 50%, transparent 51% 100%),
    radial-gradient(circle at 28% 31%, rgba(17,16,12,.18), transparent 18%),
    repeating-linear-gradient(80deg, transparent 0 16px, rgba(17,16,12,.06) 17px 18px);
  opacity: .7;
}

.hex::after {
  inset: 4px;
  border: 1px solid rgba(58,37,28,.28);
  opacity: .8;
}

.hex span {
  position: relative;
  z-index: 2;
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.1vw, 3.1rem);
  line-height: .86;
  letter-spacing: .035em;
  text-transform: uppercase;
  text-shadow: 1px 1px rgba(232,221,199,.26);
}

.hex em {
  position: absolute;
  z-index: 3;
  bottom: 19%;
  left: 18%;
  right: 18%;
  font-size: .57rem;
  font-style: normal;
  color: rgba(17,16,12,.72);
}

.tile.bone { background: linear-gradient(145deg, #E8DDC7, #bda98d 62%, #7a563d); }
.tile.clay { color: var(--bone-ceramic); background: linear-gradient(145deg, #3A251C, #5b3325 58%, #1b120e); }
.tile.violet { color: var(--bone-ceramic); background: linear-gradient(145deg, #6C3BFF, #39205d 58%, #11100C); }
.tile.large { width: clamp(12rem, 22vw, 20rem); }
.tile.wide { width: clamp(13rem, 23vw, 21rem); }
.tile.small { width: clamp(5.2rem, 8vw, 7.8rem); }

.neon-chip { background: linear-gradient(145deg, #DFFF4F, #20F7FF); }
.magenta-chip { background: linear-gradient(145deg, #FF3DF2, #6C3BFF); color: var(--bone-ceramic); }
.cyan-chip { background: linear-gradient(145deg, #20F7FF, #E8DDC7); }
.empty { opacity: .24; filter: saturate(.6); }

.cracked::before { opacity: 1; }
.intense::before { filter: drop-shadow(0 0 8px var(--static-magenta)); }
.staple::after { box-shadow: inset 0 0 0 2px var(--jasmine-neon), 0 0 18px var(--jasmine-neon); }
.split { clip-path: polygon(25% 2%, 58% 2%, 50% 24%, 75% 2%, 100% 50%, 75% 98%, 25% 98%, 0 50%); }
.quiet { opacity: .82; }

.hex.is-near,
.hex:hover {
  filter: saturate(1.25) brightness(1.08);
  box-shadow: inset 0 -13px 24px rgba(58,37,28,.5), 0 0 0 2px rgba(223,255,79,.58), 0 0 30px rgba(223,255,79,.32), 0 42px 48px rgba(0,0,0,.5);
}

.hex.blooming::before {
  background:
    linear-gradient(118deg, transparent 0 35%, #DFFF4F 36% 37%, transparent 38% 100%),
    linear-gradient(21deg, transparent 0 48%, #FF3DF2 49% 50%, transparent 51% 100%),
    radial-gradient(circle at 25% 29%, rgba(223,255,79,.62), transparent 17%),
    radial-gradient(circle at 72% 68%, rgba(32,247,255,.46), transparent 14%);
  animation: crackFlash .45s steps(3, end);
}

.hex.blooming span { animation: rgbSnap .32s steps(2, end); }

.offset-a { left: 23%; top: 23%; --r: 4deg; }
.offset-b { left: 39%; top: 6%; --r: -7deg; }
.offset-c { left: 52%; top: 32%; --r: 2deg; }
.offset-d { left: 66%; top: 15%; --r: -4deg; }
.offset-e { left: 76%; top: 50%; --r: 9deg; }
.offset-f { left: 33%; top: 52%; --r: -2deg; }
.honeycomb .hex:first-child { left: 8%; top: 33%; --r: -5deg; }

.fracture-map .hex:first-child { left: 14%; top: 10%; }
.fracture-map .offset-a { left: 29%; top: 34%; }
.fracture-map .offset-b { left: 45%; top: 16%; }
.fracture-map .offset-c { left: 58%; top: 42%; }
.fracture-map .offset-d { left: 70%; top: 18%; }
.fracture-map .offset-e { left: 22%; top: 58%; }

.bloom-garden .hex:first-child { left: 16%; top: 12%; }
.bloom-garden .offset-a { left: 31%; top: 37%; }
.bloom-garden .offset-b { left: 47%; top: 13%; }
.bloom-garden .offset-c { left: 59%; top: 42%; }
.bloom-garden .offset-d { left: 71%; top: 19%; }
.bloom-garden .offset-e { left: 10%; top: 54%; }

.signal-map .hex:first-child { left: 11%; top: 26%; }
.signal-map .offset-a { left: 27%; top: 8%; }
.signal-map .offset-b { left: 43%; top: 31%; }
.signal-map .offset-c { left: 58%; top: 9%; }
.signal-map .offset-d { left: 70%; top: 35%; }
.signal-map .offset-e { left: 35%; top: 59%; }

.afterglow-orbit .hex:first-child { left: 18%; top: 16%; }
.afterglow-orbit .offset-a { left: 42%; top: 34%; }
.afterglow-orbit .offset-b { left: 62%; top: 13%; }
.afterglow-orbit .offset-c { left: 74%; top: 52%; }

.floating-shards span,
.shard,
.firefly,
.petal-rain span {
  position: absolute;
  display: block;
  pointer-events: none;
}

.floating-shards span,
.shard {
  width: 5.2rem;
  aspect-ratio: 1/.88;
  clip-path: polygon(25% 2%, 75% 2%, 100% 50%, 75% 98%, 25% 98%, 0 50%);
  background: linear-gradient(145deg, rgba(232,221,199,.85), rgba(58,37,28,.55));
  box-shadow: 0 0 24px rgba(32,247,255,.13);
  animation: drift 9s ease-in-out infinite;
}

.s1 { right: 12%; top: 16%; }
.s2 { left: 9%; bottom: 9%; width: 3.8rem; animation-delay: -3s; }
.s3 { right: 31%; bottom: 18%; width: 2.7rem; animation-delay: -6s; }

.firefly-field { position: fixed; inset: 0; z-index: 4; pointer-events: none; }
.firefly {
  width: .36rem;
  height: .36rem;
  border-radius: 50%;
  background: var(--jasmine-neon);
  box-shadow: 0 0 16px var(--jasmine-neon), 0 0 34px rgba(223,255,79,.4);
  animation: firefly 8s infinite ease-in-out;
}
.f1 { left: 12%; top: 35%; }
.f2 { left: 48%; top: 16%; animation-delay: -2s; background: var(--voltage-cyan); box-shadow: 0 0 18px var(--voltage-cyan); }
.f3 { left: 83%; top: 42%; animation-delay: -5s; }
.f4 { left: 64%; top: 77%; animation-delay: -1s; background: var(--static-magenta); box-shadow: 0 0 18px var(--static-magenta); }
.f5 { left: 24%; top: 82%; animation-delay: -4s; }
.f6 { left: 74%; top: 11%; animation-delay: -7s; }

.cursor-orb {
  position: fixed;
  left: 0;
  top: 0;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: radial-gradient(circle, #DFFF4F 0 18%, transparent 62%);
  box-shadow: 0 0 24px var(--jasmine-neon), 0 0 5px var(--static-magenta);
  transform: translate3d(-50px, -50px, 0);
  pointer-events: none;
  z-index: 40;
  mix-blend-mode: screen;
}

.side-note { margin: 1rem 0 0 55vw; }
.bloom-annotation { margin: 0 0 0 8vw; }
.signal-copy { margin: 1rem 0 0 58vw; }
.afterglow-copy { margin: 1rem auto 0; text-align: center; }

.glitch-strips span {
  position: absolute;
  left: 8%;
  right: 11%;
  height: 1.2rem;
  background: linear-gradient(90deg, transparent, rgba(255,61,242,.32), rgba(32,247,255,.28), transparent);
  mix-blend-mode: screen;
  animation: stripJump 5s steps(2,end) infinite;
}
.glitch-strips span:nth-child(1) { top: 27%; }
.glitch-strips span:nth-child(2) { top: 46%; animation-delay: -1.2s; }
.glitch-strips span:nth-child(3) { top: 63%; animation-delay: -2.4s; }
.glitch-strips span:nth-child(4) { top: 74%; animation-delay: -3.1s; }

.flower {
  position: absolute;
  z-index: 4;
  right: 17%;
  top: 15%;
  width: 3.4rem;
  height: 3.4rem;
  filter: drop-shadow(0 0 12px var(--jasmine-neon));
  animation: flowerPulse 3.8s infinite ease-in-out;
}
.flower::before,
.flower::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--jasmine-neon);
  clip-path: polygon(50% 0, 62% 35%, 100% 25%, 72% 52%, 100% 78%, 62% 66%, 50% 100%, 38% 66%, 0 78%, 28% 52%, 0 25%, 38% 35%);
}
.flower::after { transform: rotate(30deg) scale(.73); background: var(--voltage-cyan); opacity: .58; }
.flower.pink::before { background: var(--static-magenta); }

.sprout::after,
.shrine::after,
.node::after {
  box-shadow: inset 0 0 0 2px rgba(32,247,255,.45), 0 0 18px rgba(32,247,255,.24);
}

.petal-rain span {
  width: 1rem;
  height: 2.2rem;
  border-radius: 90% 10% 90% 10%;
  background: var(--static-magenta);
  filter: drop-shadow(0 0 10px var(--static-magenta));
  animation: petalFall 7s infinite ease-in-out;
}
.petal-rain span:nth-child(1) { left: 18%; top: 13%; }
.petal-rain span:nth-child(2) { left: 38%; top: 5%; animation-delay: -2s; background: var(--jasmine-neon); }
.petal-rain span:nth-child(3) { left: 62%; top: 18%; animation-delay: -4s; }
.petal-rain span:nth-child(4) { left: 77%; top: 8%; animation-delay: -1s; background: var(--voltage-cyan); }
.petal-rain span:nth-child(5) { left: 52%; top: 28%; animation-delay: -5s; background: var(--jasmine-neon); }

.signal-lines { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.line {
  position: absolute;
  height: 2px;
  transform-origin: left center;
  background: linear-gradient(90deg, transparent, var(--voltage-cyan), var(--jasmine-neon), transparent);
  box-shadow: 0 0 18px rgba(32,247,255,.45);
  animation: signalPulse 2.8s infinite linear;
}
.l1 { left: 24%; top: 45%; width: 28%; transform: rotate(-18deg); }
.l2 { left: 42%; top: 38%; width: 22%; transform: rotate(22deg); animation-delay: -.7s; }
.l3 { left: 34%; top: 62%; width: 31%; transform: rotate(-4deg); animation-delay: -1.4s; }
.l4 { left: 56%; top: 49%; width: 18%; transform: rotate(34deg); animation-delay: -2s; }

.final-word {
  position: relative;
  z-index: 5;
  margin: 8vh auto 0;
  width: fit-content;
  font-family: var(--display);
  font-size: clamp(5.5rem, 17vw, 19rem);
  line-height: .78;
  color: var(--bone-ceramic);
  text-shadow: 0 0 30px rgba(223,255,79,.14), 8px 0 rgba(255,61,242,.1), -8px 0 rgba(32,247,255,.12);
}

.hanging-tags {
  position: absolute;
  left: 6vw;
  bottom: 10vh;
  display: grid;
  gap: 1rem;
  font-family: var(--space);
  font-size: .75rem;
  color: var(--night-soil);
}
.hanging-tags span {
  padding: .65rem 1rem;
  background: var(--bone-ceramic);
  clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 88%);
  box-shadow: 0 10px 18px rgba(0,0,0,.3);
  transform: rotate(-3deg);
}
.hanging-tags span:nth-child(2) { transform: rotate(4deg) translateX(2rem); background: var(--jasmine-neon); }

.story-plate {
  left: 1rem;
  bottom: 1rem;
  max-width: min(24rem, calc(100vw - 2rem));
  padding: .85rem 1rem 1rem;
  color: var(--bone-ceramic);
  background: rgba(17,16,12,.76);
  border: 1px solid rgba(232,221,199,.2);
  box-shadow: 0 0 0 1px rgba(58,37,28,.8), 0 18px 34px rgba(0,0,0,.38);
  clip-path: polygon(0 0, 92% 0, 100% 35%, 96% 100%, 6% 100%, 0 72%);
}
.story-plate strong { font-family: var(--body); font-weight: 500; color: var(--bone-ceramic); }

@keyframes crackFlash {
  0% { opacity: .2; filter: none; }
  35% { opacity: 1; filter: drop-shadow(0 0 12px var(--jasmine-neon)); }
  55% { transform: translateX(3px); }
  80% { transform: translateX(-2px); }
  100% { opacity: .8; transform: translateX(0); }
}

@keyframes rgbSnap {
  0%, 100% { text-shadow: 1px 1px rgba(232,221,199,.26); }
  45% { text-shadow: 4px 0 var(--static-magenta), -4px 0 var(--voltage-cyan); }
}

@keyframes drift {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
  45% { transform: translate3d(1.4rem,-1.9rem,0) rotate(7deg); }
  52% { transform: translate3d(2.1rem,-1.1rem,0) rotate(-5deg); }
}

@keyframes firefly {
  0%, 100% { transform: translate3d(0,0,0) scale(.8); opacity: .42; }
  38% { transform: translate3d(3vw,-5vh,0) scale(1.25); opacity: 1; }
  42% { transform: translate3d(4vw,-4vh,0) scale(.7); opacity: .25; }
  70% { transform: translate3d(-2vw,3vh,0) scale(1); opacity: .7; }
}

@keyframes stripJump {
  0%, 86%, 100% { opacity: 0; transform: translateX(0); }
  88% { opacity: 1; transform: translateX(-1.6rem); }
  91% { opacity: .65; transform: translateX(1.1rem); }
}

@keyframes flowerPulse {
  0%, 100% { transform: scale(.86) rotate(0); opacity: .72; }
  50% { transform: scale(1.08) rotate(12deg); opacity: 1; }
}

@keyframes petalFall {
  0%, 100% { transform: translateY(0) rotate(0); opacity: .25; }
  45% { transform: translateY(28vh) translateX(3vw) rotate(80deg); opacity: .9; }
  50% { transform: translateY(27vh) translateX(5vw) rotate(110deg); opacity: .5; }
}

@keyframes signalPulse {
  0% { opacity: .06; filter: hue-rotate(0deg); clip-path: inset(0 100% 0 0); }
  45% { opacity: .86; clip-path: inset(0 0 0 0); }
  100% { opacity: .08; filter: hue-rotate(60deg); clip-path: inset(0 0 0 100%); }
}

@media (max-width: 760px) {
  .chamber { padding-inline: 1rem; min-height: 112vh; }
  .chamber-nav { max-width: 18rem; }
  .chamber-nav a { font-size: .58rem; padding: .34rem .48rem; }
  .mark-domain { display: none; }
  .honeycomb { width: 110vw; margin-left: -8vw; min-height: 40rem; }
  .hex { width: 8.5rem; }
  .tile.large, .tile.wide { width: 11rem; }
  .side-note, .signal-copy { margin-left: 5vw; }
  .ghost-word { bottom: 34vh; }
  .story-plate { font-size: .82rem; }
}