:root {
  --color-bg: #f6f0e5;
  --color-surface: #fbf5e9;
  --color-paper: #fff9ec;
  --color-text: #1f1b17;
  --color-muted: #766b5d;
  --color-primary: #bc3f32;
  --color-accent: #6e95c9;
  --color-green: #879a61;
  --font-heading: Georgia, "Times New Roman", serif;
  --font-body: "Courier New", ui-monospace, monospace;
  --font-sans: "Segoe UI", sans-serif;
  --container: min(1480px, calc(100vw - 48px));
  --space-section: clamp(72px, 8vw, 128px);
  --space-card: clamp(18px, 2vw, 28px);
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-card: 0 16px 38px rgba(80, 48, 25, 0.13);
  --ratio-hero: 16 / 10;
  --ratio-card: 1 / 1.25;
  --ratio-product: 1 / 1;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.8), transparent 24rem),
    radial-gradient(circle at 75% 18%, rgba(224, 202, 166, 0.28), transparent 22rem),
    var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  background-image: url("assets/web/bg-paper-1.webp");
  background-size: 560px;
  mix-blend-mode: multiply;
  z-index: 100;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input { font: inherit; }

.site-header {
  min-height: 82px;
  padding: 14px clamp(18px, 3vw, 38px);
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr) auto;
  gap: 26px;
  align-items: center;
  border-bottom: 1px solid rgba(66, 47, 33, 0.2);
  background: rgba(250, 244, 233, 0.88);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  text-transform: uppercase;
  font: 700 24px/0.9 var(--font-body);
  letter-spacing: 0.04em;
}
.brand small {
  position: absolute;
  left: 57px;
  bottom: -12px;
  font-size: 9px;
  color: var(--color-muted);
  letter-spacing: 0.12em;
}
.brand-seal {
  width: 44px;
  height: 44px;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  color: var(--color-primary);
}
.main-nav {
  display: flex;
  gap: clamp(18px, 4vw, 58px);
  font-size: 15px;
}
.main-nav a {
  padding: 8px 0;
  border-bottom: 1px solid transparent;
}
.main-nav a:hover { border-color: var(--color-primary); }
.header-meta {
  justify-self: end;
  display: grid;
  gap: 4px;
  text-align: right;
  font-size: 12px;
  color: #4d453b;
}
.paper-menu {
  display: none;
  border: 1px solid rgba(65, 45, 30, 0.22);
  background: #f3e4c7;
  padding: 10px 15px;
}

.section-paper {
  width: var(--container);
  margin-inline: auto;
  border-bottom: 1px dashed rgba(80, 58, 38, 0.18);
}
.hero {
  min-height: calc(100vh - 82px);
  padding: clamp(48px, 7vw, 88px) 0;
  display: grid;
  grid-template-columns: minmax(320px, 0.72fr) minmax(520px, 1fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
}
.eyebrow {
  margin: 0 0 18px;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font: 700 13px/1.2 var(--font-body);
}
.hero h1 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(72px, 8vw, 128px);
  line-height: 0.95;
  letter-spacing: -0.055em;
  max-width: 660px;
  text-decoration-line: underline;
  text-decoration-color: rgba(188, 63, 50, 0.82);
  text-decoration-thickness: 5px;
  text-underline-offset: 10px;
}
.hero-lede {
  margin: 34px 0 28px;
  max-width: 440px;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.7;
}
.button-ticket {
  display: inline-flex;
  align-items: center;
  gap: 36px;
  min-width: 292px;
  padding: 18px 22px;
  background: #e9d4a9;
  border: 1px solid rgba(91, 62, 37, 0.22);
  box-shadow: var(--shadow-card);
  text-transform: uppercase;
  font-weight: 700;
  transform: rotate(-1.2deg);
}
.cycle-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 44px 0 0;
  max-width: 520px;
}
.cycle-list div {
  border-top: 1px solid rgba(60, 42, 29, 0.28);
  padding-top: 11px;
}
.cycle-list dt {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--color-muted);
}
.cycle-list dd {
  margin: 5px 0 0;
  font-weight: 700;
}

.hero-board {
  position: relative;
  min-height: clamp(560px, 60vw, 780px);
}
.paper-base {
  position: absolute;
  inset: 7% 15% 8% 1%;
  width: 72%;
  height: auto;
  filter: drop-shadow(0 22px 35px rgba(78, 50, 24, 0.2));
  transform: rotate(-2.4deg);
  z-index: 1;
}
.hero-sticker {
  position: absolute;
  width: clamp(260px, 32vw, 450px);
  left: 16%;
  top: 20%;
  transform: rotate(-3deg);
  filter: drop-shadow(0 20px 17px rgba(72, 42, 22, 0.22));
  animation: dropIn 900ms 420ms both cubic-bezier(.18,.89,.32,1.18);
  z-index: 3;
}
.hero-tape {
  position: absolute;
  width: 250px;
  z-index: 4;
  opacity: 0.88;
  filter: drop-shadow(0 8px 10px rgba(120, 90, 50, 0.16));
}
.tape-one {
  top: 2%;
  left: 15%;
  transform: rotate(3deg);
  animation: tapeStick 700ms 850ms both;
}
.hero-label {
  position: absolute;
  width: 180px;
  right: 16%;
  top: 7%;
  transform: rotate(6deg);
  filter: drop-shadow(0 10px 12px rgba(80, 40, 24, 0.16));
  z-index: 5;
}
.record-card {
  position: absolute;
  right: 0;
  bottom: 12%;
  width: min(360px, 42%);
  padding: 28px;
  background: rgba(255, 248, 231, 0.96);
  border: 1px solid rgba(74, 50, 34, 0.18);
  box-shadow: var(--shadow-card);
  transform: rotate(-1deg);
  z-index: 6;
}
.record-card p, .record-card h2 { margin: 0; }
.record-card p, .record-card dt {
  text-transform: uppercase;
  font-size: 10px;
  color: var(--color-muted);
}
.record-card h2 {
  margin: 6px 0 18px;
  font-size: 19px;
}
.record-card dl {
  display: grid;
  gap: 12px;
  margin: 0;
}
.record-card dd { margin: 3px 0 0; line-height: 1.45; }
.stamp {
  display: inline-block;
  margin-top: 18px;
  padding: 8px 10px;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  text-transform: uppercase;
  transform: rotate(-7deg);
}
.hand-note {
  position: absolute;
  right: 2%;
  top: 34%;
  max-width: 130px;
  font: 17px/1.2 "Comic Sans MS", "Segoe Print", cursive;
  transform: rotate(-9deg);
  z-index: 7;
}
.tiny-stamp {
  position: absolute;
  right: 8%;
  top: 20%;
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  border: 2px dashed var(--color-accent);
  border-radius: 50%;
  color: var(--color-accent);
  font-size: 10px;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(13deg);
  z-index: 7;
}

.section-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}
.section-heading h2 {
  margin: 0;
  font-size: clamp(22px, 2vw, 34px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.section-heading span {
  color: var(--color-primary);
  font-weight: 700;
}
.found, .archive, .drawers, .observation, .memo, .storage {
  padding: var(--space-section) 0;
}
.found-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.85fr 0.9fr;
  gap: var(--space-card);
}
.inspection-card, .object-record, .archive-notes, .observation-sheet, .memo-paper, .tray {
  position: relative;
  background: rgba(255, 248, 232, 0.9);
  border: 1px solid rgba(84, 58, 36, 0.16);
  box-shadow: var(--shadow-card);
}
.inspection-card {
  min-height: 430px;
  padding: 26px;
  overflow: hidden;
}
.inspection-paper {
  position: absolute;
  inset: 24px;
  width: calc(100% - 48px);
  height: calc(100% - 48px);
  object-fit: cover;
}
.inspection-sticker {
  position: absolute;
  width: min(310px, 52%);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-2deg);
  filter: drop-shadow(0 14px 15px rgba(83, 50, 24, 0.18));
}
.scale-mark {
  position: absolute;
  left: 42px;
  top: 22%;
  z-index: 3;
  display: grid;
  gap: 48px;
  color: #706253;
}
.scale-mark::before, .scale-mark::after {
  content: "";
  width: 2px;
  height: 120px;
  background: rgba(45, 38, 32, 0.34);
  position: absolute;
  left: 20px;
}
.scale-mark::after { top: 120px; }
.magnifier {
  position: absolute;
  width: 110px;
  height: 110px;
  border: 1px solid rgba(170, 42, 28, 0.62);
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  box-shadow: inset 0 0 0 6px rgba(255,255,255,0.22);
  pointer-events: none;
  transform: translate(-50%, -50%);
  left: 70%;
  top: 38%;
}
.inspect-toggle, .small-button {
  position: relative;
  z-index: 4;
  border: 1px solid rgba(62, 45, 31, 0.3);
  background: #f7e8c9;
  padding: 10px 13px;
}
.object-record, .archive-notes {
  padding: 34px;
  min-height: 430px;
}
.clip {
  position: absolute;
  width: 58px;
  top: -18px;
  left: 10px;
}
.object-record h3 {
  margin: 0 0 26px;
  font-size: 25px;
  font-family: var(--font-heading);
}
.object-record dl, .micro-copy dl {
  display: grid;
  gap: 14px;
  margin: 0;
}
.object-record dt, .micro-copy dt {
  color: var(--color-muted);
  text-transform: uppercase;
  font-size: 11px;
}
.object-record dd, .micro-copy dd { margin: 3px 0 0; line-height: 1.55; }
blockquote {
  margin: 28px 0;
  padding-left: 18px;
  border-left: 2px solid var(--color-primary);
  font-family: var(--font-heading);
  font-size: 21px;
  line-height: 1.35;
}
.archive-notes {
  background-image: linear-gradient(rgba(107,88,67,0.13) 1px, transparent 1px);
  background-size: 100% 32px;
}
.archive-notes ul {
  margin: 0;
  padding-left: 22px;
  display: grid;
  gap: 22px;
  line-height: 1.6;
}
.archive-notes img {
  width: 130px;
  margin-left: auto;
  margin-top: 30px;
}

.archive-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 30px;
}
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.filters button {
  border: 1px solid rgba(68,48,35,0.22);
  background: rgba(255,248,232,0.7);
  padding: 9px 12px;
}
.filters .active {
  background: var(--color-primary);
  color: #fff9ea;
}
.archive-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(16px, 1.6vw, 24px);
  align-items: start;
}
.sticker-card {
  grid-column: span 3;
  min-height: 310px;
  padding: 15px;
  background: rgba(255, 250, 238, 0.92);
  border: 1px solid rgba(80, 55, 36, 0.12);
  box-shadow: 0 10px 22px rgba(75, 50, 25, 0.1);
  position: relative;
  transition: transform 220ms ease;
}
.sticker-card.large { grid-column: span 4; min-height: 380px; }
.sticker-card.small { grid-column: span 2; min-height: 230px; }
.sticker-card:hover { transform: translateY(-4px) rotate(-0.5deg); }
.sticker-card:hover img { transform: translateY(-7px) rotate(var(--tilt)); }
.sticker-card img {
  width: 76%;
  max-height: 220px;
  object-fit: contain;
  margin: 8px auto 20px;
  transform: rotate(var(--tilt));
  transition: transform 260ms ease;
  filter: drop-shadow(0 12px 10px rgba(64, 40, 24, 0.15));
}
.sticker-card.large img { max-height: 285px; }
.sticker-card.small img { max-height: 130px; }
.serial {
  display: flex;
  justify-content: space-between;
  color: #5f5144;
  font-size: 12px;
  margin-bottom: 8px;
}
.sticker-card h3 {
  margin: 0;
  font: 700 17px/1.2 var(--font-body);
}
.sticker-card p {
  margin: 6px 0 0;
  color: #685b4d;
  font-size: 13px;
}
.card-memo {
  position: absolute;
  right: 14px;
  bottom: 12px;
  opacity: 0;
  color: var(--color-primary);
  font: 14px "Comic Sans MS", cursive;
  transform: rotate(-5deg);
  transition: opacity 180ms ease;
}
.sticker-card:hover .card-memo { opacity: 1; }

.drawer-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.drawer-button {
  min-height: 126px;
  padding: 0;
  border: 0;
  background: transparent;
  position: relative;
  cursor: pointer;
  text-align: left;
}
.drawer-button img {
  width: 100%;
  height: 100%;
  min-height: 126px;
  object-fit: cover;
  filter: drop-shadow(0 13px 11px rgba(90, 54, 24, 0.18));
}
.drawer-button span {
  position: absolute;
  inset: 43% 16% auto 16%;
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(10px, 0.85vw, 13px);
}
.drawer-button small {
  position: absolute;
  right: 16%;
  bottom: 17%;
  color: var(--color-muted);
}
.drawer-button:hover { transform: translateY(-4px); }
.drawer-panel {
  margin-top: 26px;
  min-height: 210px;
  padding: 28px;
  background: rgba(255, 248, 232, 0.8);
  border: 1px dashed rgba(81, 57, 38, 0.22);
}
.drawer-stickers {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}
.drawer-stickers img {
  width: 104px;
  filter: drop-shadow(0 12px 10px rgba(60, 38, 20, 0.16));
}

.observation-sheet {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) 1fr;
  gap: clamp(36px, 6vw, 92px);
  padding: clamp(34px, 6vw, 82px);
  background:
    linear-gradient(90deg, rgba(188,63,50,0.06), transparent 32%),
    rgba(255, 248, 232, 0.92);
}
.micro-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 440px;
}
.micro-visual img {
  width: min(360px, 78%);
  filter: drop-shadow(0 22px 22px rgba(69, 42, 22, 0.2));
}
.pencil-note {
  position: absolute;
  left: 0;
  top: 40px;
  width: 135px;
  font: 16px/1.25 "Comic Sans MS", cursive;
  transform: rotate(-8deg);
}
.red-circle {
  position: absolute;
  width: 96px;
  height: 96px;
  right: 14%;
  top: 18%;
  border: 2px solid rgba(180, 40, 28, 0.75);
  border-radius: 50%;
}
.ruler {
  position: absolute;
  left: 33%;
  bottom: 26px;
  width: 140px;
  border-top: 1px solid #40382f;
  text-align: center;
  padding-top: 6px;
}
.micro-copy h2, .memo-paper h2, .storage h2 {
  margin: 0 0 28px;
  font-family: var(--font-heading);
  font-size: clamp(38px, 5vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.04em;
}
.memo {
  display: grid;
  place-items: center;
  min-height: 680px;
}
.memo-paper {
  width: min(760px, 100%);
  padding: clamp(36px, 7vw, 86px);
  transform: rotate(-1deg);
}
.memo-paper img {
  width: 190px;
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%) rotate(2deg);
}
.memo-paper p {
  max-width: 560px;
  font-size: 18px;
  line-height: 1.8;
}
.memo-paper strong {
  display: inline-block;
  margin-top: 20px;
  color: var(--color-primary);
  font: 22px "Comic Sans MS", cursive;
}

.storage {
  display: grid;
  grid-template-columns: 0.35fr 1fr;
  gap: clamp(26px, 5vw, 76px);
  align-items: center;
}
.storage > div:first-child p:last-child {
  max-width: 360px;
  line-height: 1.7;
}
.tray {
  min-height: 290px;
  padding: 38px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  background:
    linear-gradient(#ead0a2, #c58e54 58%, #9c6833);
  border: 8px solid rgba(146, 88, 43, 0.25);
}
.tray-slot {
  min-height: 190px;
  background: rgba(255, 248, 229, 0.42);
  border: 1px dashed rgba(74, 45, 25, 0.25);
  display: grid;
  place-items: center;
  position: relative;
}
.tray-slot img {
  width: 82%;
  filter: drop-shadow(0 12px 10px rgba(39, 24, 14, 0.22));
}
.tray-actions {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: flex;
  gap: 5px;
  justify-content: center;
}
.tray-actions button {
  border: 1px solid rgba(68, 45, 28, 0.2);
  padding: 5px 7px;
  background: #f2ddbf;
  font-size: 10px;
}

.site-footer {
  width: var(--container);
  margin: 0 auto;
  padding: 70px 0 36px;
  display: grid;
  grid-template-columns: 0.9fr 1fr 1fr;
  gap: 40px;
  border-top: 1px solid rgba(80, 58, 38, 0.18);
}
.site-footer h2 {
  margin: 0 0 18px;
  text-transform: uppercase;
  font-size: 24px;
}
.site-footer nav {
  display: grid;
  gap: 14px;
}
.footer-status {
  color: var(--color-muted);
  line-height: 1.4;
}
.footer-line {
  grid-column: 1 / -1;
  text-align: center;
  border-top: 1px dashed rgba(80, 58, 38, 0.18);
  padding-top: 22px;
  text-transform: uppercase;
  font-size: 12px;
}

.subpage {
  width: var(--container);
  margin: 0 auto;
  padding: clamp(70px, 10vw, 130px) 0;
  min-height: 70vh;
}
.subpage h1 {
  font-family: var(--font-heading);
  font-size: clamp(58px, 9vw, 132px);
  line-height: 0.94;
  letter-spacing: -0.055em;
  margin: 0 0 36px;
}
.subpage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.subpage-card {
  background: rgba(255, 248, 232, 0.88);
  border: 1px solid rgba(84, 58, 36, 0.14);
  padding: 28px;
  min-height: 240px;
  box-shadow: var(--shadow-card);
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  animation: reveal 800ms both;
}
.reveal:nth-child(2) { animation-delay: 180ms; }
@keyframes reveal {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes dropIn {
  from { opacity: 0; transform: translateY(-24px) rotate(-10deg) scale(.96); }
  to { opacity: 1; transform: translateY(0) rotate(-3deg) scale(1); }
}
@keyframes tapeStick {
  from { opacity: 0; transform: translateY(-24px) rotate(10deg); }
  to { opacity: .88; transform: translateY(0) rotate(3deg); }
}

@media (max-width: 1180px) {
  .site-header {
    grid-template-columns: 1fr auto auto;
  }
  .main-nav { display: none; }
  .paper-menu { display: inline-block; }
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .hero h1 { max-width: 850px; }
  .hero-board { min-height: 660px; }
  .found-layout { grid-template-columns: 1fr 1fr; }
  .archive-notes { grid-column: 1 / -1; min-height: auto; }
  .drawer-list { grid-template-columns: repeat(3, 1fr); }
  .sticker-card { grid-column: span 4; }
  .sticker-card.small { grid-column: span 3; }
  .sticker-card.large { grid-column: span 6; }
}

@media (max-width: 780px) {
  :root { --container: min(100% - 28px, 720px); }
  .site-header {
    min-height: 70px;
    grid-template-columns: 1fr auto;
    gap: 12px;
  }
  .brand {
    font-size: 18px;
  }
  .brand-seal { width: 34px; height: 34px; }
  .brand small, .header-meta span:last-child { display: none; }
  .header-meta {
    font-size: 10px;
    text-align: left;
    justify-self: start;
    grid-column: 1 / -1;
  }
  .paper-menu {
    grid-column: 2;
    grid-row: 1;
  }
  .hero {
    padding-top: 42px;
    gap: 20px;
  }
  .hero h1 {
    font-size: clamp(58px, 16vw, 84px);
    text-decoration-thickness: 3px;
  }
  .cycle-list {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .button-ticket {
    width: 100%;
    min-width: 0;
    justify-content: space-between;
  }
  .hero-board {
    min-height: 560px;
  }
  .paper-base {
    inset: 8% 2% auto 0;
    width: 92%;
  }
  .hero-sticker {
    width: min(75vw, 340px);
    left: 12%;
    top: 22%;
  }
  .hero-label {
    width: 130px;
    right: 2%;
  }
  .record-card {
    width: 82%;
    right: 0;
    bottom: 2%;
    padding: 22px;
  }
  .hand-note, .tiny-stamp { display: none; }
  .found-layout,
  .observation-sheet,
  .storage,
  .site-footer,
  .subpage-grid {
    grid-template-columns: 1fr;
  }
  .inspection-card, .object-record, .archive-notes { min-height: 360px; }
  .archive-top { align-items: flex-start; flex-direction: column; }
  .filters {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 8px;
  }
  .archive-grid { grid-template-columns: repeat(6, 1fr); }
  .sticker-card, .sticker-card.large, .sticker-card.small {
    grid-column: span 3;
    min-height: 265px;
  }
  .sticker-card img, .sticker-card.large img, .sticker-card.small img { max-height: 155px; }
  .drawer-list { grid-template-columns: 1fr; }
  .drawer-button img { max-height: 130px; }
  .micro-copy h2, .memo-paper h2, .storage h2 {
    font-size: clamp(34px, 11vw, 52px);
  }
  .tray {
    grid-template-columns: repeat(2, 1fr);
    padding: 22px;
  }
  .site-footer {
    padding-top: 48px;
  }
  .footer-line { grid-column: auto; text-align: left; }
}

@media (max-width: 460px) {
  .archive-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
  .sticker-card, .sticker-card.large, .sticker-card.small {
    min-width: 76vw;
    scroll-snap-align: start;
  }
  .hero-board { min-height: 520px; }
  .record-card { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Reference-density pass: keep the page closer to the compact archive board. */
:root {
  --space-section: clamp(34px, 4.2vw, 66px);
  --space-card: clamp(13px, 1.25vw, 20px);
}

.site-header {
  min-height: 66px;
  padding-block: 10px;
}

.brand {
  font-size: 22px;
}

.brand-seal {
  width: 40px;
  height: 40px;
}

.hero {
  min-height: 0;
  padding: clamp(30px, 4.6vw, 56px) 0 42px;
  grid-template-columns: minmax(300px, 0.66fr) minmax(520px, 1fr);
  gap: clamp(28px, 4.6vw, 64px);
}

.hero h1 {
  font-size: clamp(64px, 6.6vw, 104px);
  line-height: 0.94;
  max-width: 560px;
  text-decoration-thickness: 4px;
}

.hero-lede {
  margin: 25px 0 22px;
}

.button-ticket {
  padding: 15px 20px;
}

.cycle-list {
  margin-top: 26px;
}

.hero-board {
  min-height: clamp(455px, 43vw, 610px);
}

.paper-base {
  inset: 4% 16% 8% 0;
  width: 71%;
}

.hero-sticker {
  width: clamp(238px, 25vw, 376px);
  left: 17%;
  top: 18%;
}

.hero-label {
  width: 148px;
}

.record-card {
  bottom: 7%;
  width: min(335px, 43%);
  padding: 22px;
}

.found,
.archive,
.drawers,
.bottom-panels {
  padding: var(--space-section) 0;
}

.inspection-card {
  min-height: 330px;
}

.inspection-sticker {
  width: min(260px, 50%);
}

.object-record,
.archive-notes {
  min-height: 330px;
  padding: 26px 28px;
}

blockquote {
  font-size: 18px;
  margin: 22px 0;
}

.archive-grid {
  gap: clamp(13px, 1.25vw, 19px);
}

.sticker-card {
  min-height: 262px;
  padding: 13px;
}

.sticker-card.large {
  grid-column: span 3;
  min-height: 262px;
}

.sticker-card.small {
  min-height: 214px;
}

.sticker-card img {
  width: 72%;
  max-height: 165px;
  margin: 4px auto 14px;
}

.sticker-card.large img {
  max-height: 165px;
}

.sticker-card.small img {
  max-height: 118px;
}

.drawer-button,
.drawer-button img {
  min-height: 96px;
}

.drawer-panel {
  min-height: 165px;
}

.bottom-panels {
  display: grid;
  grid-template-columns: 1.25fr 0.8fr 1.05fr 0.82fr;
  gap: var(--space-card);
}

.observation-sheet {
  grid-template-columns: 0.95fr 1fr;
  gap: 16px;
  padding: 20px;
}

.micro-visual {
  min-height: 250px;
}

.micro-visual img {
  width: min(230px, 82%);
}

.pencil-note {
  width: 92px;
  font-size: 12px;
  line-height: 1.2;
}

.red-circle {
  width: 60px;
  height: 60px;
}

.ruler {
  width: 96px;
}

.micro-copy h2,
.memo-paper h2,
.storage h2 {
  margin-bottom: 16px;
  font-size: clamp(22px, 2vw, 34px);
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.memo-paper,
.storage,
.keeper-log {
  position: relative;
  min-height: 270px;
  padding: 24px;
  background: rgba(255, 248, 232, 0.9);
  border: 1px solid rgba(84, 58, 36, 0.16);
  box-shadow: var(--shadow-card);
}

.memo-paper {
  width: auto;
  transform: rotate(-0.6deg);
}

.memo-paper img {
  width: 145px;
}

.memo-paper p {
  max-width: 100%;
  font-size: 13px;
  line-height: 1.55;
}

.memo-paper strong {
  font-size: 16px;
}

.storage {
  display: block;
}

.storage > div:first-child p:last-child {
  display: none;
}

.tray {
  min-height: 166px;
  padding: 18px;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.tray-slot {
  min-height: 116px;
}

.tray-actions {
  display: none;
}

.keeper-log img {
  width: 92px;
  margin-left: auto;
  opacity: 0.82;
}

.keeper-log ul {
  margin: 16px 0;
  padding-left: 18px;
  display: grid;
  gap: 10px;
  color: var(--color-muted);
  font-size: 13px;
}

.keeper-log p:last-child {
  font: 15px "Comic Sans MS", cursive;
}

.site-footer {
  padding: 34px 0 22px;
}

@media (max-width: 1180px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .hero-board {
    min-height: 560px;
  }

  .bottom-panels {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 780px) {
  .hero-board {
    min-height: 520px;
  }

  .inspection-card,
  .object-record,
  .archive-notes {
    min-height: 320px;
  }

  .bottom-panels {
    grid-template-columns: 1fr;
  }

  .observation-sheet {
    grid-template-columns: 1fr;
  }

  .tray {
    grid-template-columns: repeat(3, 1fr);
    padding: 18px;
  }
}

@media (max-width: 460px) {
  .hero h1 {
    font-size: clamp(50px, 14vw, 64px);
  }

  .hero-board {
    min-height: 500px;
  }
}

/* Archive specimen pass: irregular paper, overlap, drawer depth, and micro-interactions. */
.site-header::after {
  content: "Currently preserving 248 stickers";
  position: absolute;
  right: clamp(22px, 4vw, 72px);
  bottom: -27px;
  padding: 6px 10px;
  background: rgba(255, 248, 232, 0.82);
  border: 1px solid rgba(75, 52, 35, 0.15);
  color: var(--color-muted);
  font-size: 10px;
  transform: rotate(.5deg);
}

.paper-base { animation: paperDrop 820ms 280ms both cubic-bezier(.2,.88,.22,1); }
.hero-sticker {
  opacity: 1 !important;
  animation: stickerPlace 720ms 260ms both cubic-bezier(.18,.89,.32,1.18) !important;
}
.hero-label { animation: labelDrop 560ms 940ms both cubic-bezier(.2,.88,.22,1); }
.record-card { animation: recordSlide 620ms 1220ms both cubic-bezier(.2,.88,.22,1); }
.tiny-stamp { animation: stampPop 320ms 1500ms both ease-out; }

.archive::before {
  content: "classification status: soft friends / weather pieces / unknown origin";
  display: block;
  margin: -12px 0 24px;
  color: rgba(92, 75, 59, .72);
  font: 12px/1.3 var(--font-body);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.archive::after {
  content: "next: open the specimen drawers  ->";
  display: inline-block;
  margin-top: 22px;
  color: var(--color-primary);
  font: 17px/1.2 "Comic Sans MS", "Segoe Print", cursive;
  transform: rotate(-2deg);
}

.archive-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(16px, 1.45vw, 24px);
  align-items: stretch;
}

.sticker-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  isolation: isolate;
  overflow: visible;
  min-height: 310px;
  padding: 18px;
}

.sticker-card.large { grid-column: span 4; min-height: 380px; }
.sticker-card.medium { grid-column: span 3; min-height: 310px; }
.sticker-card.small { grid-column: span 2; min-height: 248px; }

.card-paper {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100%;
  max-height: none !important;
  margin: 0 !important;
  object-fit: cover;
  z-index: -1;
  transform: rotate(var(--paper-tilt, 0deg));
  filter: drop-shadow(0 10px 12px rgba(71, 45, 25, .1));
}

.sticker-card:nth-child(3n) { --paper-tilt: .7deg; }
.sticker-card:nth-child(4n) { --paper-tilt: -1deg; }
.sticker-card.tape .card-paper,
.sticker-card.blue-tape .card-paper { filter: drop-shadow(0 7px 9px rgba(71, 45, 25, .08)); }
.sticker-card.large .card-paper { filter: drop-shadow(0 18px 22px rgba(71, 45, 25, .14)); }

.sticker-card .specimen {
  position: absolute;
  width: 58%;
  max-height: 220px !important;
  object-fit: contain;
  margin: 0 !important;
  transform: rotate(var(--tilt));
  transition: transform 260ms ease, filter 260ms ease;
  filter: drop-shadow(0 12px 10px rgba(64, 40, 24, 0.15));
  z-index: 2;
}

.sticker-card.large .specimen { max-height: 280px !important; }
.sticker-card.small .specimen { max-height: 145px !important; }
.low-center .specimen { left: 50%; top: 44%; transform: translate(-50%, -44%) rotate(var(--tilt)); }
.top-right .specimen { right: 10%; top: 14%; }
.mid-left .specimen { left: 11%; top: 30%; }
.center-zoom .specimen { left: 50%; top: 32%; width: 70%; transform: translateX(-50%) rotate(var(--tilt)); }
.bottom-left .specimen { left: 11%; bottom: 28%; }
.top-center .specimen { left: 50%; top: 12%; transform: translateX(-50%) rotate(var(--tilt)); }
.right-center .specimen { right: 8%; top: 30%; }

.sticker-card:hover { transform: translateY(-4px) rotate(-.35deg); }
.sticker-card:hover .specimen {
  transform: translateY(-10px) rotate(0deg) scale(1.025);
  filter: drop-shadow(0 18px 16px rgba(64, 40, 24, 0.2));
}
.low-center:hover .specimen { transform: translate(-50%, calc(-44% - 10px)) rotate(0deg) scale(1.025); }
.center-zoom:hover .specimen,
.top-center:hover .specimen { transform: translateX(-50%) translateY(-10px) rotate(0deg) scale(1.025); }

.serial,
.sticker-card h3,
.sticker-card p,
.sticker-card small,
.condition-dot,
.keep-button,
.card-memo { position: absolute; z-index: 4; }

.serial {
  inset: 16px 16px auto 16px;
  margin: 0;
}

.sticker-card h3 {
  left: 18px;
  right: 18px;
  bottom: 50px;
  margin: 0;
}

.sticker-card p {
  left: 18px;
  right: 18px;
  bottom: 28px;
  margin: 0;
}

.sticker-card small {
  left: 18px;
  bottom: 11px;
  color: #4f463b;
  font-size: 11px;
}

.condition-dot {
  right: 16px;
  bottom: 15px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-green);
  border: 1px solid rgba(40,28,20,.24);
}

.keep-button {
  right: 13px;
  top: 38px;
  opacity: 0;
  transform: translateY(-5px);
  border: 1px solid rgba(70,48,32,.22);
  background: #e8d2a8;
  padding: 6px 9px;
  font-size: 10px;
  transition: opacity 180ms ease, transform 180ms ease;
}

.sticker-card:hover .keep-button {
  opacity: 1;
  transform: translateY(0);
}

.deco {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  max-height: none !important;
  margin: 0 !important;
}

.tape-deco {
  width: 96px !important;
  left: 50%;
  top: -12px;
  transform: translateX(-50%) rotate(2deg);
  opacity: .82;
}

.blue-deco {
  width: 92px !important;
  right: 14px;
  top: -10px;
  transform: rotate(-4deg);
  opacity: .82;
}

.clip-deco {
  width: 42px !important;
  right: -6px;
  top: 10px;
}

.stamp-deco {
  width: 76px !important;
  right: 8px;
  top: 10px;
  opacity: .56;
}

.sticker-card.memo::after {
  content: "found after lunch";
  position: absolute;
  right: -16px;
  top: 55px;
  width: 74px;
  padding: 8px;
  background: #f7e79d;
  font: 11px/1.25 "Comic Sans MS", "Segoe Print", cursive;
  transform: rotate(7deg);
  box-shadow: 0 7px 12px rgba(70,45,20,.12);
  z-index: 7;
}

.card-memo {
  right: 14px;
  bottom: -8px;
  opacity: 0;
  color: var(--color-primary);
  font: 14px "Comic Sans MS", cursive;
  transform: translateX(10px) rotate(-5deg);
  transition: opacity 180ms ease, transform 180ms ease;
}

.sticker-card:hover .card-memo {
  opacity: 1;
  transform: translateX(0) rotate(-5deg);
}

.drawer-list {
  gap: clamp(18px, 2vw, 28px);
  perspective: 900px;
}

.drawer-button,
.drawer-button img {
  min-height: 210px !important;
  height: 210px !important;
}

.drawer-button {
  transition: transform 260ms ease, opacity 260ms ease;
}

.drawer-button img {
  object-fit: cover;
  transition: transform 260ms ease, filter 260ms ease;
}

.drawer-depth {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 24%;
  height: 56px;
  background: linear-gradient(#8b5c35, #4d2c18);
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 260ms ease, transform 260ms ease;
  z-index: -1;
}

.drawer-button:hover img {
  transform: translateY(12px) scaleY(1.05);
  filter: drop-shadow(0 26px 18px rgba(65,35,15,.22));
}

.drawer-button.is-open {
  transform: translateY(10px);
}

.drawer-button.is-open img {
  transform: translateY(22px) scaleY(1.08);
  filter: drop-shadow(0 30px 22px rgba(65,35,15,.26));
}

.drawer-button.is-open .drawer-depth {
  opacity: .48;
  transform: translateY(48px);
}

.drawer-button:hover .drawer-depth {
  opacity: .38;
  transform: translateY(42px);
}

.drawer-button span:not(.drawer-depth) {
  inset: 48% 13% auto 13%;
  font-size: clamp(12px, 1vw, 15px);
}

.drawer-button small {
  bottom: 13%;
}

.drawer-list:has(.drawer-button:hover) .drawer-button:not(:hover) {
  opacity: .66;
}

.drawer-panel {
  min-height: 280px;
  padding: 34px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(139,92,53,.12), transparent 20%, transparent 80%, rgba(139,92,53,.12)),
    rgba(255, 248, 232, 0.86);
}

.drawer-panel h3 {
  margin: 0 0 22px;
  font-family: var(--font-heading);
  font-size: clamp(28px, 3vw, 48px);
}

.drawer-stickers {
  gap: 28px;
}

.drawer-stickers img {
  width: 138px;
  animation: drawerSpecimenIn 420ms both cubic-bezier(.2,.8,.2,1);
}

.observation-sheet .red-circle {
  animation: drawCircle 1600ms ease-in-out infinite alternate;
}

.flying-sticker {
  position: fixed;
  object-fit: contain;
  pointer-events: none;
  z-index: 999;
  filter: drop-shadow(0 18px 14px rgba(48,28,16,.24));
}

@keyframes paperDrop {
  from { opacity: 0; transform: translateY(-18px) rotate(-6deg); }
  to { opacity: 1; transform: translateY(0) rotate(-2.4deg); }
}
@keyframes stickerPlace {
  from { transform: translateY(-18px) rotate(-9deg) scale(.96); }
  to { transform: translateY(0) rotate(-3deg) scale(1); }
}
@keyframes labelDrop {
  from { opacity: 0; transform: translateY(-18px) rotate(12deg); }
  to { opacity: 1; transform: translateY(0) rotate(6deg); }
}
@keyframes recordSlide {
  from { opacity: 0; transform: translateX(24px) rotate(2deg); }
  to { opacity: 1; transform: translateX(0) rotate(-1deg); }
}
@keyframes stampPop {
  from { opacity: 0; transform: scale(.8) rotate(22deg); }
  to { opacity: 1; transform: scale(1) rotate(13deg); }
}
@keyframes drawCircle {
  from { clip-path: inset(0 72% 0 0); opacity: .4; }
  to { clip-path: inset(0 0 0 0); opacity: .95; }
}
@keyframes drawerSpecimenIn {
  from { opacity: 0; transform: translateY(18px) rotate(-6deg); }
  to { opacity: 1; transform: translateY(0) rotate(0deg); }
}

@media (max-width: 1180px) {
  .archive-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .sticker-card,
  .sticker-card.medium { grid-column: span 2; }
  .sticker-card.large { grid-column: span 4; }
  .sticker-card.small { grid-column: span 2; }
  .drawer-list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 780px) {
  .site-header::after { display: none; }
  .archive-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }
  .sticker-card,
  .sticker-card.large,
  .sticker-card.medium,
  .sticker-card.small {
    grid-column: span 1;
    min-width: 0;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 255px;
  }
  .sticker-card.large { min-height: 310px; }
  .drawer-list { grid-template-columns: 1fr; }
  .drawer-button,
  .drawer-button img {
    min-height: 180px !important;
    height: 180px !important;
  }
}

@media (max-width: 460px) {
  .archive-grid { grid-template-columns: 1fr; }
  .sticker-card,
  .sticker-card.large,
  .sticker-card.medium,
  .sticker-card.small {
    min-height: 310px;
  }
}

/* Conflict cleanup: card class names must not inherit utility image rules. */
.archive {
  overflow-x: clip;
}

.hero-visual,
.hero-card,
.archive-grid,
.drawer-list,
.bottom-panels {
  max-width: 100%;
}

.record-card {
  max-width: min(280px, calc(100vw - 48px));
  box-sizing: border-box;
}

.sticker-card.clip,
.sticker-card.tape,
.sticker-card.stamp,
.sticker-card.memo,
.sticker-card.blue-tape {
  width: auto !important;
  display: block !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  color: inherit !important;
  border: 0 !important;
  padding: 18px !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.clip-deco {
  right: 0 !important;
}

.sticker-card.memo::after {
  right: -4px !important;
}

@media (max-width: 780px) {
  .page-shell,
  main,
  section {
    max-width: 100%;
  }

  .sticker-card.memo::after {
    right: 8px !important;
  }

  .card-memo {
    display: none;
  }
}

@media (max-width: 460px) {
  html,
  body {
    overflow-x: clip;
  }

  .page-shell {
    width: 100%;
    overflow-x: clip;
  }

  .record-card {
    right: auto !important;
    left: 50%;
    transform: translateX(-50%) rotate(-1deg);
    max-width: calc(100vw - 36px);
  }

  .filters,
  .drawer-panel,
  .bottom-panels {
    overflow-x: clip;
  }

  .filters button,
  .small-button,
  .inspect-toggle {
    max-width: 100%;
  }

  .sticker-card,
  .sticker-card.large,
  .sticker-card.medium,
  .sticker-card.small,
  .sticker-card.clip,
  .sticker-card.tape,
  .sticker-card.stamp,
  .sticker-card.memo,
  .sticker-card.blue-tape {
    width: 100% !important;
    max-width: 100% !important;
    transform-origin: center;
  }
}

/* Keep sticker specimens safely mounted inside each paper card. */
.sticker-card .specimen {
  z-index: 2;
  max-width: 58% !important;
  max-height: 54% !important;
  object-fit: contain;
  filter: drop-shadow(0 10px 9px rgba(59, 36, 20, .18));
}

.sticker-card.large .specimen {
  max-width: 46% !important;
  max-height: 50% !important;
}

.sticker-card.medium .specimen {
  max-width: 52% !important;
  max-height: 48% !important;
}

.sticker-card.small .specimen {
  max-width: 56% !important;
  max-height: 46% !important;
}

.low-center .specimen {
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%) rotate(var(--tilt));
}

.top-right .specimen {
  left: auto;
  right: 20%;
  top: 26%;
  transform: rotate(var(--tilt));
}

.mid-left .specimen {
  left: 20%;
  top: 34%;
  transform: rotate(var(--tilt));
}

.center-zoom .specimen {
  left: 50%;
  top: 43%;
  width: auto !important;
  transform: translate(-50%, -50%) rotate(var(--tilt));
}

.bottom-left .specimen {
  left: 20%;
  bottom: 34%;
  transform: rotate(var(--tilt));
}

.top-center .specimen {
  left: 50%;
  top: 28%;
  transform: translateX(-50%) rotate(var(--tilt));
}

.right-center .specimen {
  left: auto;
  right: 18%;
  top: 38%;
  transform: rotate(var(--tilt));
}

.sticker-card:hover .specimen {
  filter: drop-shadow(0 15px 11px rgba(59, 36, 20, .22));
}

.low-center:hover .specimen,
.center-zoom:hover .specimen {
  transform: translate(-50%, calc(-50% - 8px)) rotate(0deg) scale(1.02);
}

.top-center:hover .specimen {
  transform: translateX(-50%) translateY(-8px) rotate(0deg) scale(1.02);
}

@media (max-width: 780px) {
  .sticker-card .specimen,
  .sticker-card.large .specimen,
  .sticker-card.medium .specimen,
  .sticker-card.small .specimen {
    max-width: 52% !important;
    max-height: 48% !important;
  }

  .top-right .specimen,
  .right-center .specimen {
    right: 22%;
  }

  .bottom-left .specimen,
  .mid-left .specimen {
    left: 22%;
  }
}

/* Drawer labels and real open-state asset usage. */
.drawer-button .drawer-img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transition: opacity 260ms ease, transform 260ms ease, filter 260ms ease;
}

.drawer-button .drawer-img-open {
  opacity: 0;
  transform: translateY(8px) scaleY(.96);
}

.drawer-button.is-open .drawer-img-closed,
.drawer-button:hover .drawer-img-closed {
  opacity: 0;
}

.drawer-button.is-open .drawer-img-open,
.drawer-button:hover .drawer-img-open {
  opacity: 1;
  transform: translateY(12px) scaleY(1.04);
  filter: drop-shadow(0 28px 20px rgba(65, 35, 15, .22));
}

.drawer-button.is-open span:not(.drawer-depth),
.drawer-button:hover span:not(.drawer-depth) {
  inset: 70% 27% auto 27% !important;
}

.drawer-button.is-open .drawer-index,
.drawer-button:hover .drawer-index {
  top: 42%;
  left: 18%;
}

.drawer-index {
  position: absolute;
  left: 17%;
  top: 45%;
  z-index: 3;
  font: 700 12px/1 var(--font-body);
  color: rgba(31, 27, 23, .62);
  transform: rotate(-1deg);
}

.drawer-button span:not(.drawer-depth) {
  inset: 48% 22% auto 22% !important;
  z-index: 3;
  font-size: clamp(10px, .78vw, 12px) !important;
  line-height: 1.05;
  white-space: normal;
  overflow-wrap: break-word;
  text-align: center;
}

.drawer-button small {
  z-index: 3;
}

/* Production drawer layers: generated shell, interior, and movable front. */
.drawer-button {
  min-height: 250px !important;
  height: 250px !important;
  overflow: visible;
  isolation: isolate;
  transform: none;
  background: transparent !important;
}

.drawer-button:hover {
  transform: translateY(-2px);
}

.drawer-button::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 6px;
  height: 18px;
  background: rgba(77, 45, 25, .18);
  filter: blur(10px);
  z-index: -2;
}

.drawer-layer {
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: contain !important;
  filter: none !important;
}

.cabinet-shell,
.drawer-inside,
.drawer-front {
  position: absolute;
  inset: 0 !important;
  display: block;
  background: transparent !important;
  transition: transform 360ms cubic-bezier(.2,.75,.25,1), opacity 260ms ease;
}

.drawer-button .drawer-layer {
  position: absolute !important;
  inset: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  transform: translateY(-46px) scaleY(2.1);
  transform-origin: 50% 50%;
}

.cabinet-shell {
  z-index: 1;
}

.drawer-inside {
  z-index: 2;
  opacity: 0;
  transform: translateY(-10px) scale(.97);
  pointer-events: none;
}

.drawer-front {
  z-index: 4;
  transform: translateY(0);
  filter: drop-shadow(0 12px 9px rgba(77, 45, 25, .12));
}

.drawer-button:hover .drawer-front {
  transform: translateY(12px);
}

.drawer-button:hover .drawer-inside {
  opacity: .72;
  transform: translateY(0) scale(1);
}

.drawer-button.is-open .drawer-front {
  transform: translateY(92px);
  filter: drop-shadow(0 24px 18px rgba(77, 45, 25, .24));
}

.drawer-button.is-open .drawer-inside {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.drawer-title,
.drawer-index,
.drawer-front small {
  position: absolute !important;
  inset: auto !important;
  z-index: 5;
  pointer-events: none;
}

.drawer-index {
  display: none !important;
}

.drawer-title {
  left: 22% !important;
  right: 22% !important;
  top: 39% !important;
  text-align: center;
  font-size: clamp(9px, .72vw, 12px) !important;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: -.04em;
}

.drawer-button span.drawer-title {
  inset: auto !important;
  left: 22% !important;
  right: 22% !important;
  top: 39% !important;
}

button.drawer-button span:not(.drawer-depth).cabinet-shell,
button.drawer-button span:not(.drawer-depth).drawer-inside,
button.drawer-button span:not(.drawer-depth).drawer-front {
  inset: 0 !important;
}

button.drawer-button span:not(.drawer-depth).drawer-title {
  inset: auto !important;
  left: 22% !important;
  right: 22% !important;
  top: 39% !important;
}

.drawer-front small {
  left: 20% !important;
  right: 20% !important;
  top: 93% !important;
  bottom: auto !important;
  text-align: center;
  color: var(--color-muted);
  font-size: 11px;
}

button.drawer-button span.drawer-front small {
  inset: auto !important;
  left: 20% !important;
  right: 20% !important;
  top: 93% !important;
  bottom: auto !important;
}

.inside-specimens {
  position: absolute;
  left: 14%;
  right: 14%;
  top: 12%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 8px;
  z-index: 3;
}

.inside-specimens img {
  width: 18%;
  height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 5px 4px rgba(66, 42, 25, .2));
}

/* Disable the legacy gradient mockup layers. */
.drawer-depth,
.drawer-handle,
.label-holder,
.cabinet-shell::before,
.cabinet-shell::after,
.drawer-front::before,
.drawer-front::after {
  display: none !important;
}

@media (max-width: 760px) {
  .drawer-list {
    grid-template-columns: 1fr;
  }

  .drawer-button {
    min-height: 190px !important;
    height: 190px !important;
  }

  .drawer-button.is-open .drawer-front {
    transform: translateY(58px);
  }

  .drawer-index { left: 25%; top: 35%; }
  .drawer-front small { bottom: 22%; }
}