/* TEN TABLES — the gallery hall */
:root {
  --stage: #0d0d14;
  --stage-deep: #05050a;
  --paper: #f5f5f7;
  --dim: #a1a1aa;
  --purple: #8b5cf6;
  --purple-light: #c4b5fd;
  --serif: "Space Grotesk", "Segoe UI", sans-serif;
  --sans: "Inter", "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  background: radial-gradient(ellipse 120% 90% at 50% -10%, #1e1033 0%, var(--stage) 45%, var(--stage-deep) 100%);
  color: var(--paper);
  font-family: var(--sans);
  font-weight: 400;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}

::selection { background: var(--purple); color: #fff; }

a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--paper); outline-offset: -4px; }

.grain {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- header ---------- */
.head {
  text-align: center;
  padding: clamp(2rem, 4vh, 3.4rem) 1.5rem 1.2rem;
}
.head__logo {
  display: inline-block;
  margin-bottom: 1.4rem;
  opacity: 0;
  animation: fade-down 1s .1s forwards;
  transition: opacity .25s;
}
.head__logo:hover { opacity: 0.8; }
.head__logo img {
  height: clamp(30px, 4.5vw, 40px);
  width: auto;
  display: block;
}
.head__eyebrow {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.4em;
  color: var(--purple-light);
  margin-bottom: 0.7rem;
  opacity: 0;
  animation: fade-down 1s .2s forwards;
}
.head__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.8rem, 7vw, 5.2rem);
  line-height: 1;
  letter-spacing: -0.01em;
  background: linear-gradient(120deg, #ffffff 10%, var(--purple-light) 55%, var(--purple) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  animation: fade-down 1.1s .45s forwards;
}
.head__title em { font-style: italic; }
.head__hint {
  font-family: var(--mono);
  margin-top: 0.9rem;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
  opacity: 0;
  animation: fade-down 1s .8s forwards;
}
@keyframes fade-down {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- the hall of slats ---------- */
.hall {
  flex: 1;
  display: flex;
  gap: 6px;
  padding: 1.2rem clamp(1rem, 3vw, 2.4rem) 1.6rem;
  min-height: 0;
}
.slat {
  position: relative;
  flex: 1;
  min-width: 0;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  opacity: 0;
  transform: translateY(34px);
  animation: slat-rise .9s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay: calc(var(--i, 0) * 70ms + 500ms);
  transition: flex 0.85s cubic-bezier(.25,.8,.25,1);
  cursor: pointer;
}
@keyframes slat-rise {
  to { opacity: 1; transform: translateY(0); }
}
.slat::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  filter: saturate(0.85) brightness(0.72);
  transition: filter .8s, transform .8s cubic-bezier(.25,.8,.25,1);
  z-index: -2;
}
.slat::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(11,10,13,0.92) 4%, rgba(11,10,13,0.25) 45%, rgba(11,10,13,0.35) 100%),
    linear-gradient(to top, rgba(var(--tint), 0.16), transparent 55%);
  z-index: -1;
  transition: opacity .6s;
}
.slat:hover::before, .slat:focus-visible::before, .slat.open::before {
  filter: saturate(1.05) brightness(0.94);
  transform: scale(1.045);
}
.slat:hover, .slat:focus-visible, .slat.open {
  flex: 4.6;
}
.hall:hover .slat:not(:hover):not(.open) { flex: 0.82; }

.slat__num {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  color: rgba(233,228,218,0.75);
  z-index: 2;
}
.slat__badge {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 2;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  font-weight: 500;
  color: #101216;
  background: linear-gradient(100deg, #ff9ee0, #9ee8ff 55%, #ffe29e);
  border-radius: 999px;
  padding: 0.32em 0.75em;
  white-space: nowrap;
}
.slat__badge--alt {
  background: linear-gradient(100deg, #e7cf9a, #b0904e);
  color: #14161b;
}
.slat__spine {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%);
  writing-mode: vertical-rl;
  font-size: 0.78rem;
  letter-spacing: 0.34em;
  color: rgba(233,228,218,0.9);
  white-space: nowrap;
  transition: opacity .45s;
  z-index: 1;
}
.slat:hover .slat__spine, .slat:focus-visible .slat__spine, .slat.open .slat__spine { opacity: 0; }

.slat__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.6rem 1.7rem 1.7rem;
  width: 100%;
  min-width: 300px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s .18s, transform .5s .18s;
}
.slat:hover .slat__panel, .slat:focus-visible .slat__panel, .slat.open .slat__panel {
  opacity: 1;
  transform: translateY(0);
}
.slat__kind {
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(var(--tint), 1);
  filter: brightness(1.35);
}
.slat__name {
  font-size: clamp(1.9rem, 3.6vw, 3.1rem);
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 2px 26px rgba(0,0,0,0.65);
  white-space: nowrap;
}
.slat__name--verre { font-family: "Cormorant Garamond", serif; font-weight: 300; letter-spacing: 0.32em; }
.slat__name--denryu { font-family: "Chakra Petch", sans-serif; font-weight: 700; letter-spacing: 0.1em; }
.slat__name--hearth { font-family: "Fraunces", serif; font-weight: 500; }
.slat__name--hush { font-family: "Monoton", cursive; font-weight: 400; letter-spacing: 0.06em; }
.slat__name--kanso { font-family: "Shippori Mincho", serif; font-weight: 500; letter-spacing: 0.42em; }
.slat__name--chispa { font-family: "Shrikhand", cursive; transform: rotate(-1.5deg); transform-origin: left bottom; }
.slat__name--spectra { font-family: "Unbounded", sans-serif; font-weight: 500; letter-spacing: 0.04em; }
.slat__name--cala { font-family: "Prata", serif; letter-spacing: 0.05em; }
.slat__name--cathedra { font-family: "Pirata One", cursive; letter-spacing: 0.02em; }
.slat__name--dough { font-family: "Baloo 2", sans-serif; font-weight: 700; }
.slat__name--ignis { font-family: "Oswald", sans-serif; font-weight: 600; letter-spacing: 0.16em; }
.slat__name--meridian { font-family: "Marcellus", serif; letter-spacing: 0.2em; }

.slat__line {
  font-size: 0.85rem;
  color: rgba(233,228,218,0.85);
  max-width: 30rem;
}
.slat__enter {
  margin-top: 0.5rem;
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(var(--tint), 1);
  filter: brightness(1.35);
  transition: letter-spacing .4s;
}
.slat:hover .slat__enter { letter-spacing: 0.38em; }

/* ---------- footer ---------- */
.foot {
  font-family: var(--mono);
  text-align: center;
  padding: 0 1.5rem 1.2rem;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--dim);
}

/* ---------- responsive: vertical stack ---------- */
@media (max-width: 860px), (max-height: 540px) {
  body { min-height: 100svh; }
  .hall {
    flex-direction: column;
    padding-bottom: 1.2rem;
  }
  .slat {
    min-height: 130px;
    flex: none;
    align-items: center;
  }
  .slat:hover, .slat:focus-visible, .slat.open { flex: none; }
  .hall:hover .slat:not(:hover):not(.open) { flex: none; }
  .slat__spine { display: none; }
  .slat__num { left: auto; right: 1rem; top: 0.9rem; transform: none; }
  .slat__badge { right: auto; left: 1rem; }
  .slat__panel {
    opacity: 1;
    transform: none;
    min-width: 0;
    padding: 1.2rem 1.3rem;
    gap: 0.3rem;
  }
  .slat__name { font-size: clamp(1.5rem, 6.4vw, 2.2rem); white-space: normal; }
  .slat__line { font-size: 0.8rem; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .slat, .head__eyebrow, .head__title, .head__hint { opacity: 1; transform: none; }
  .slat__panel { opacity: 1; transform: none; }
}