:root {
  --night-soil: #12100C;
  --pressed-umber: #2A2118;
  --lantern-honey: #D8A84F;
  --pollen-cream: #F3E7C1;
  --dried-sage: #75805D;
  --root-copper: #A45F34;
  --blue-black-sap: #071015;
  --display: "Limelight", "Copperplate", "Georgia", serif;
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --tech: "Noto Sans JP", "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--night-soil);
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--pollen-cream);
  font-family: var(--serif);
  background:
    radial-gradient(circle at 50% 28%, rgba(216, 168, 79, .08), transparent 38rem),
    linear-gradient(150deg, var(--night-soil) 0%, var(--blue-black-sap) 55%, #050708 100%);
}

button, a { font: inherit; }

.ritual {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
}

.grain,
.vignette,
.pollen-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

.grain {
  opacity: .18;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(243, 231, 193, .22) 0 1px, transparent 1.8px),
    radial-gradient(circle at 82% 58%, rgba(117, 128, 93, .16) 0 1px, transparent 2px),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(243, 231, 193, .03) 3px 4px);
  background-size: 97px 83px, 131px 107px, 100% 4px;
  animation: grainDrift 9s steps(6) infinite;
}

.vignette {
  z-index: 19;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(7, 16, 21, .48) 72%, rgba(7, 16, 21, .88) 100%);
}

.pollen {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--lantern-honey);
  box-shadow: 0 0 16px rgba(216, 168, 79, .85);
  opacity: .45;
  transform: translate3d(var(--x), var(--y), 0);
  animation: pollenFloat var(--duration) linear infinite;
  animation-delay: var(--delay);
}

.drawer-nav {
  position: fixed;
  right: 1.3rem;
  top: 50%;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  transform: translateY(-50%);
}

.drawer-nav a {
  color: rgba(243, 231, 193, .58);
  text-decoration: none;
  writing-mode: vertical-rl;
  font-family: var(--tech);
  font-size: .68rem;
  letter-spacing: .18em;
  padding: .6rem .35rem;
  border-left: 1px solid rgba(216, 168, 79, .25);
  background: rgba(42, 33, 24, .22);
  transition: color 1200ms ease, border-color 1200ms ease, transform 1200ms ease;
}

.drawer-nav a:hover,
.drawer-nav a.active {
  color: var(--lantern-honey);
  border-color: var(--lantern-honey);
  transform: translateX(-.25rem);
}

.room {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(4rem, 8vw, 8rem) clamp(1.4rem, 5vw, 6rem);
  overflow: hidden;
}

.room::before {
  content: attr(data-room);
  position: absolute;
  left: clamp(1rem, 4vw, 4rem);
  top: clamp(1rem, 4vw, 3rem);
  font-family: var(--display);
  color: rgba(216, 168, 79, .2);
  font-size: clamp(3rem, 9vw, 8rem);
  letter-spacing: .08em;
}

.chamber {
  background:
    radial-gradient(circle at 50% 53%, rgba(216, 168, 79, .07), transparent 23rem),
    linear-gradient(180deg, rgba(7, 16, 21, .35), rgba(18, 16, 12, .92));
}

.projector-slit {
  position: absolute;
  left: 5vw;
  right: 5vw;
  top: 47%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(216, 168, 79, .15), var(--lantern-honey), rgba(216, 168, 79, .15), transparent);
  box-shadow: 0 0 35px rgba(216, 168, 79, .34), 0 0 110px rgba(216, 168, 79, .18);
  opacity: .82;
}

.projector-slit::after {
  content: "";
  position: absolute;
  inset: -13rem 18%;
  background: linear-gradient(90deg, transparent, rgba(216, 168, 79, .12), transparent);
  filter: blur(18px);
  transform: skewY(-8deg);
}

.title-lockup {
  position: relative;
  z-index: 2;
  width: min(880px, 88vw);
  text-align: center;
  padding: 5rem 2rem;
  border: 1px solid rgba(216, 168, 79, .16);
  background: linear-gradient(135deg, rgba(7, 16, 21, .34), rgba(42, 33, 24, .2));
  box-shadow: inset 0 0 48px rgba(216, 168, 79, .04), 0 30px 120px rgba(0, 0, 0, .38);
  backdrop-filter: blur(3px);
}

.reel-mark {
  margin: 0 0 1.3rem;
  color: var(--dried-sage);
  font-family: var(--tech);
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.engraved-title,
h2 {
  margin: 0;
  font-family: var(--display);
  color: var(--lantern-honey);
  font-weight: 400;
  letter-spacing: .12em;
  text-shadow: 0 0 28px rgba(216, 168, 79, .18);
}

.engraved-title {
  font-size: clamp(4rem, 14vw, 12rem);
  line-height: .9;
  background: linear-gradient(100deg, rgba(216, 168, 79, .12), var(--lantern-honey) 35%, var(--pollen-cream) 50%, var(--lantern-honey) 65%, rgba(216, 168, 79, .2));
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: engrave 3600ms ease forwards, goldLeaf 8000ms ease-in-out infinite 3600ms;
}

.opening-copy,
.room-heading p,
.signal-panel p,
.closing-room p,
.bloom-caption p {
  color: rgba(243, 231, 193, .78);
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  line-height: 1.65;
}

.opening-copy {
  width: min(620px, 100%);
  margin: 1.5rem auto 0;
}

.drawer-handle {
  position: absolute;
  bottom: clamp(2rem, 7vh, 5rem);
  left: 50%;
  z-index: 5;
  display: grid;
  gap: .65rem;
  place-items: center;
  color: var(--pollen-cream);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.drawer-handle span {
  width: 9rem;
  height: .65rem;
  border: 1px solid rgba(216, 168, 79, .65);
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(216, 168, 79, .34), transparent);
  box-shadow: 0 0 22px rgba(216, 168, 79, .18);
  transition: transform 1400ms ease, box-shadow 1400ms ease;
}

.drawer-handle em {
  font-family: var(--serif);
  color: rgba(243, 231, 193, .62);
  font-size: 1rem;
  letter-spacing: .06em;
}

.drawer-handle:hover span { transform: scaleX(1.18); box-shadow: 0 0 38px rgba(216, 168, 79, .36); }

.cabinet-room {
  align-content: start;
  background:
    radial-gradient(circle at 50% 35%, rgba(216, 168, 79, .08), transparent 34rem),
    linear-gradient(180deg, var(--night-soil), var(--pressed-umber) 48%, var(--blue-black-sap));
}

.room-heading {
  width: min(780px, 92vw);
  justify-self: start;
  margin-bottom: 2rem;
}

h2 { font-size: clamp(2.4rem, 6vw, 5.9rem); line-height: 1.02; }

.cabinet-stage {
  position: relative;
  width: min(1160px, 92vw);
  min-height: 680px;
  margin-inline: auto;
  perspective: 1300px;
}

.root-network {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .72;
  filter: drop-shadow(0 0 12px rgba(164, 95, 52, .2));
}

.root-path,
.pulse-path {
  fill: none;
  stroke: rgba(117, 128, 93, .48);
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-dasharray: 8 14;
}

.pulse-path {
  stroke: var(--root-copper);
  stroke-width: 1.7;
  stroke-dasharray: 18 520;
  stroke-dashoffset: 0;
  opacity: .25;
}

.root-network.active .pulse-path { animation: rootPulse 2400ms ease-in-out infinite; opacity: .9; }
.root-network.active .root-path { stroke: rgba(216, 168, 79, .54); }

.specimen-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr .82fr 1.12fr .75fr;
  grid-auto-rows: 104px;
  gap: clamp(1rem, 2vw, 1.6rem);
  transform: rotateX(3deg) rotateZ(-1deg);
}

.specimen-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(216, 168, 79, .35);
  background: linear-gradient(145deg, rgba(42, 33, 24, .92), rgba(7, 16, 21, .85));
  box-shadow: inset 0 0 0 1px rgba(243, 231, 193, .04), 0 24px 70px rgba(0, 0, 0, .36);
  cursor: pointer;
  transition: transform 1600ms cubic-bezier(.2, .8, .16, 1), box-shadow 1600ms ease, border-color 1600ms ease, filter 1600ms ease;
}

.specimen-card:hover,
.specimen-card.selected {
  transform: translateY(-.45rem) scale(1.035);
  border-color: rgba(216, 168, 79, .9);
  box-shadow: inset 0 0 0 1px rgba(243, 231, 193, .08), 0 36px 95px rgba(0, 0, 0, .44), 0 0 45px rgba(216, 168, 79, .12);
  filter: saturate(1.1) brightness(1.08);
}

.specimen-card.tall { grid-row: span 4; }
.specimen-card.tall.short { grid-row: span 3; transform: translateY(4.5rem); }
.specimen-card.square { grid-row: span 3; }
.specimen-card.plaque { grid-column: span 2; grid-row: span 2; transform: translateY(2.2rem); }
.specimen-card.circle { grid-row: span 3; border-radius: 999px; aspect-ratio: 1; align-self: center; }
.specimen-card.wide { grid-column: span 2; grid-row: span 2; transform: translate(2rem, -1rem); }
.specimen-card.tall.short:hover,
.specimen-card.tall.short.selected { transform: translateY(4rem) scale(1.035); }
.specimen-card.plaque:hover,
.specimen-card.plaque.selected { transform: translateY(1.8rem) scale(1.035); }
.specimen-card.wide:hover,
.specimen-card.wide.selected { transform: translate(2rem, -1.4rem) scale(1.035); }

.corner {
  position: absolute;
  z-index: 4;
  width: 24px;
  height: 24px;
  border-color: var(--lantern-honey);
  opacity: .8;
}
.c1 { top: 10px; left: 10px; border-top: 2px solid; border-left: 2px solid; }
.c2 { top: 10px; right: 10px; border-top: 2px solid; border-right: 2px solid; }
.c3 { bottom: 10px; left: 10px; border-bottom: 2px solid; border-left: 2px solid; }
.c4 { bottom: 10px; right: 10px; border-bottom: 2px solid; border-right: 2px solid; }

.film-window {
  position: absolute;
  inset: 1rem;
  overflow: hidden;
  border: 1px solid rgba(243, 231, 193, .08);
  background: var(--blue-black-sap);
}

.film-window::before,
.film-window::after,
.film-window i {
  content: "";
  position: absolute;
  inset: 0;
}

.film-window::after {
  background: linear-gradient(90deg, transparent, rgba(216, 168, 79, .1), transparent);
  transform: translateX(-120%);
  animation: paneSweep 8200ms ease-in-out infinite;
}

.fern-form::before {
  background:
    radial-gradient(ellipse at 49% 20%, rgba(117, 128, 93, .72) 0 2%, transparent 3%),
    repeating-linear-gradient(112deg, transparent 0 18px, rgba(117, 128, 93, .5) 19px 21px, transparent 22px 42px),
    linear-gradient(90deg, transparent 48%, rgba(216, 168, 79, .42) 49% 51%, transparent 52%);
  clip-path: polygon(50% 2%, 76% 16%, 59% 24%, 84% 38%, 59% 42%, 78% 58%, 56% 55%, 64% 78%, 50% 96%, 36% 78%, 44% 55%, 22% 58%, 41% 42%, 16% 38%, 41% 24%, 24% 16%);
  animation: leafBreathe 5200ms ease-in-out infinite;
}

.seed-form::before {
  inset: 16%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--pollen-cream) 0 7%, transparent 8%), conic-gradient(from 30deg, rgba(216, 168, 79, .8), rgba(117, 128, 93, .4), rgba(164, 95, 52, .75), rgba(216, 168, 79, .8));
  box-shadow: inset 0 0 38px rgba(7, 16, 21, .8), 0 0 45px rgba(216, 168, 79, .18);
  animation: slowTurn 14000ms linear infinite;
}

.moss-form::before {
  background:
    radial-gradient(circle at 20% 70%, rgba(117, 128, 93, .65), transparent 18%),
    radial-gradient(circle at 60% 48%, rgba(216, 168, 79, .28), transparent 17%),
    repeating-linear-gradient(4deg, rgba(243, 231, 193, .04) 0 2px, transparent 2px 6px);
  filter: blur(.2px);
  animation: staticMoss 1600ms steps(3) infinite;
}

.iris-form { border-radius: 50%; }
.iris-form::before {
  border-radius: 50%;
  background: radial-gradient(circle, rgba(243, 231, 193, .72) 0 8%, rgba(216, 168, 79, .36) 9% 18%, transparent 19%), repeating-conic-gradient(from 10deg, rgba(117, 128, 93, .55) 0 8deg, rgba(7, 16, 21, .95) 8deg 16deg);
  animation: irisOpen 7200ms ease-in-out infinite;
}

.root-form::before {
  background:
    radial-gradient(circle at 16% 68%, rgba(164, 95, 52, .7), transparent 3%),
    linear-gradient(105deg, transparent 15%, rgba(164, 95, 52, .76) 16% 17%, transparent 18%),
    linear-gradient(22deg, transparent 26%, rgba(216, 168, 79, .55) 27% 28%, transparent 29%),
    linear-gradient(155deg, transparent 38%, rgba(117, 128, 93, .62) 39% 40%, transparent 41%);
  animation: copperFlicker 2600ms ease-in-out infinite;
}

.moth-form::before {
  inset: 14%;
  background: radial-gradient(ellipse at center, rgba(243, 231, 193, .6), rgba(117, 128, 93, .28) 44%, transparent 45%);
  clip-path: polygon(50% 8%, 92% 30%, 70% 88%, 50% 55%, 30% 88%, 8% 30%);
  animation: mothWing 5200ms ease-in-out infinite;
}

.card-plaque {
  position: absolute;
  left: .85rem;
  right: .85rem;
  bottom: .8rem;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .45rem .65rem;
  color: var(--pollen-cream);
  background: rgba(18, 16, 12, .7);
  border: 1px solid rgba(216, 168, 79, .25);
  backdrop-filter: blur(5px);
}
.card-plaque b { font-family: var(--display); color: var(--lantern-honey); font-weight: 400; }
.card-plaque em { font-size: .95rem; color: rgba(243, 231, 193, .72); }

.signal-room {
  background: linear-gradient(180deg, var(--blue-black-sap), var(--night-soil));
}

.signal-panel {
  position: relative;
  z-index: 2;
  width: min(820px, 86vw);
  padding: clamp(2rem, 6vw, 5rem);
  border: 1px solid rgba(216, 168, 79, .24);
  background: rgba(42, 33, 24, .38);
  box-shadow: inset 0 0 60px rgba(117, 128, 93, .06), 0 30px 90px rgba(0, 0, 0, .35);
}

.signal-readout {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 2rem;
}
.signal-readout span {
  padding: .55rem .8rem;
  color: var(--lantern-honey);
  border: 1px solid rgba(216, 168, 79, .35);
  font-family: var(--tech);
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.root-diagram {
  position: absolute;
  inset: 10% 5%;
  opacity: .36;
}
.root-diagram span {
  position: absolute;
  width: 42%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--root-copper), transparent);
  transform-origin: left center;
  animation: rootGlow 4200ms ease-in-out infinite;
}
.root-diagram span:nth-child(1) { left: 10%; top: 34%; transform: rotate(18deg); }
.root-diagram span:nth-child(2) { left: 38%; top: 47%; transform: rotate(-28deg); animation-delay: -900ms; }
.root-diagram span:nth-child(3) { left: 18%; top: 65%; transform: rotate(-8deg); animation-delay: -1800ms; }
.root-diagram span:nth-child(4) { left: 58%; top: 30%; transform: rotate(48deg); animation-delay: -1200ms; }
.root-diagram span:nth-child(5) { left: 53%; top: 72%; transform: rotate(-46deg); animation-delay: -2600ms; }

.bloom-room {
  background: radial-gradient(circle at center, rgba(216, 168, 79, .09), transparent 32rem), linear-gradient(180deg, var(--night-soil), var(--blue-black-sap));
}

.bloom-frame {
  position: relative;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(260px, .9fr);
  gap: clamp(1.4rem, 4vw, 4rem);
  align-items: center;
  width: min(1080px, 92vw);
  min-height: 560px;
  padding: clamp(1rem, 3vw, 2.6rem);
  border: 2px solid rgba(216, 168, 79, .38);
  background: linear-gradient(135deg, rgba(7, 16, 21, .88), rgba(42, 33, 24, .72));
  box-shadow: inset 0 0 90px rgba(216, 168, 79, .08), 0 40px 120px rgba(0, 0, 0, .42);
}

.aperture-flower {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle, rgba(216, 168, 79, .28), transparent 22%), var(--blue-black-sap);
  box-shadow: inset 0 0 80px rgba(0, 0, 0, .8), 0 0 60px rgba(216, 168, 79, .13);
}
.aperture-flower::before {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  border: 1px solid rgba(216, 168, 79, .28);
  background: radial-gradient(circle, rgba(243, 231, 193, .52), rgba(216, 168, 79, .18) 22%, transparent 36%);
  animation: bloomCore 7800ms ease-in-out infinite;
}
.aperture-flower span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18%;
  height: 45%;
  border-radius: 50% 50% 8% 8%;
  background: linear-gradient(180deg, rgba(243, 231, 193, .56), rgba(117, 128, 93, .34));
  transform-origin: 50% 100%;
  animation: petalOpen 9000ms ease-in-out infinite;
}
.aperture-flower span:nth-child(1) { transform: translate(-50%, -100%) rotate(0deg); }
.aperture-flower span:nth-child(2) { transform: translate(-50%, -100%) rotate(60deg); }
.aperture-flower span:nth-child(3) { transform: translate(-50%, -100%) rotate(120deg); }
.aperture-flower span:nth-child(4) { transform: translate(-50%, -100%) rotate(180deg); }
.aperture-flower span:nth-child(5) { transform: translate(-50%, -100%) rotate(240deg); }
.aperture-flower span:nth-child(6) { transform: translate(-50%, -100%) rotate(300deg); }

.bloom-caption em {
  display: block;
  margin: 1rem 0;
  color: var(--dried-sage);
  font-size: 1.6rem;
}

.closing-room {
  text-align: center;
  background: radial-gradient(circle at center, rgba(216, 168, 79, .08), transparent 20rem), linear-gradient(180deg, var(--blue-black-sap), #030404 80%);
}

.closing-room h2 { width: min(760px, 92vw); }
.closing-room p:last-child { width: min(620px, 90vw); margin-inline: auto; }

.seed-ember {
  width: clamp(4rem, 10vw, 8rem);
  aspect-ratio: 1;
  margin-bottom: 2rem;
  border-radius: 68% 32% 58% 42%;
  background: radial-gradient(circle at 42% 36%, var(--pollen-cream), var(--lantern-honey) 24%, var(--root-copper) 46%, rgba(164, 95, 52, .08) 72%);
  box-shadow: 0 0 34px rgba(216, 168, 79, .48), 0 0 110px rgba(164, 95, 52, .24);
  animation: emberPulse 4800ms ease-in-out infinite;
}

body.drawer-open .specimen-card { animation: cabinetArrive 1800ms cubic-bezier(.2, .8, .16, 1) both; }
body.drawer-open .specimen-card:nth-child(2) { animation-delay: 120ms; }
body.drawer-open .specimen-card:nth-child(3) { animation-delay: 240ms; }
body.drawer-open .specimen-card:nth-child(4) { animation-delay: 360ms; }
body.drawer-open .specimen-card:nth-child(5) { animation-delay: 480ms; }
body.drawer-open .specimen-card:nth-child(6) { animation-delay: 600ms; }

@keyframes engrave { from { opacity: 0; letter-spacing: .28em; filter: blur(7px); } to { opacity: 1; letter-spacing: .12em; filter: blur(0); } }
@keyframes goldLeaf { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes grainDrift { 0% { transform: translate(0, 0); } 100% { transform: translate(3%, -2%); } }
@keyframes pollenFloat { from { transform: translate3d(var(--x), 105vh, 0); } to { transform: translate3d(calc(var(--x) + 8vw), -10vh, 0); } }
@keyframes rootPulse { to { stroke-dashoffset: -538; } }
@keyframes paneSweep { 0%, 40% { transform: translateX(-120%); } 65%, 100% { transform: translateX(120%); } }
@keyframes leafBreathe { 0%, 100% { transform: scale(.96) rotate(-1deg); opacity: .74; } 50% { transform: scale(1.04) rotate(1deg); opacity: .94; } }
@keyframes slowTurn { to { transform: rotate(360deg); } }
@keyframes staticMoss { 50% { filter: contrast(1.25) brightness(1.08); transform: translateX(1px); } }
@keyframes irisOpen { 0%, 100% { transform: scale(.82) rotate(0deg); } 50% { transform: scale(1.08) rotate(18deg); } }
@keyframes copperFlicker { 0%, 100% { opacity: .48; } 50% { opacity: .92; } }
@keyframes mothWing { 0%, 100% { transform: scaleX(.86) rotate(-1deg); } 50% { transform: scaleX(1.08) rotate(1deg); } }
@keyframes rootGlow { 0%, 100% { opacity: .12; filter: blur(0); } 50% { opacity: .88; filter: blur(.5px); } }
@keyframes bloomCore { 0%, 100% { transform: scale(.78); opacity: .52; } 50% { transform: scale(1.12); opacity: .9; } }
@keyframes petalOpen { 0%, 100% { opacity: .35; height: 31%; } 50% { opacity: .74; height: 47%; } }
@keyframes emberPulse { 0%, 100% { transform: scale(.96) rotate(-8deg); } 50% { transform: scale(1.05) rotate(5deg); } }
@keyframes cabinetArrive { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: blur(0); } }

@media (max-width: 900px) {
  .drawer-nav { display: none; }
  .specimen-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 120px; transform: none; }
  .specimen-card.wide,
  .specimen-card.plaque { grid-column: span 2; transform: none; }
  .specimen-card.tall.short { transform: none; }
  .specimen-card.wide:hover,
  .specimen-card.wide.selected,
  .specimen-card.plaque:hover,
  .specimen-card.plaque.selected,
  .specimen-card.tall.short:hover,
  .specimen-card.tall.short.selected { transform: scale(1.025); }
  .cabinet-stage { min-height: auto; }
  .bloom-frame { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .room { padding-inline: 1rem; }
  .title-lockup { padding: 3.5rem 1rem; }
  .specimen-grid { grid-template-columns: 1fr; }
  .specimen-card,
  .specimen-card.tall,
  .specimen-card.square,
  .specimen-card.plaque,
  .specimen-card.circle,
  .specimen-card.wide,
  .specimen-card.tall.short { grid-column: auto; grid-row: span 3; transform: none; border-radius: 0; }
  .specimen-card:hover,
  .specimen-card.selected { transform: scale(1.02); }
}