@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,500&family=Oswald:wght@400;500&display=swap");

:root {
  --blood: #c83a2c;
  --blood-bright: #e24b3d;
  --bone: #e5dcc9;
  --bone-dim: #b9ad99;
  --black: #050506;
  --glass: #0a090b;
  --frame: #c9b99b;
  --board-width: 1120px;
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background: #050506;
  color: var(--bone);
  font-family: "Cormorant Garamond", Georgia, serif;
}

button,
a {
  font: inherit;
}

img {
  max-width: 100%;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  padding: 10px 14px;
  color: #101010;
  background: var(--bone);
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.room-shell {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  overflow: hidden;
  padding: 0 0 38px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 14% 86%, rgba(0, 0, 0, 0.38)),
    url("../assets/kult-mirror/room-background.webp") top center / max(100vw, 1400px) auto repeat-y;
}

.room-shell::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 22%, transparent 0 24%, rgba(0, 0, 0, 0.38) 66%),
    linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.58));
}

.chain {
  position: absolute;
  z-index: 7;
  width: clamp(160px, 21vw, 330px);
  height: auto;
  opacity: 0.46;
  pointer-events: none;
  filter: brightness(0.66) contrast(1.14) drop-shadow(0 12px 12px #000);
}

.chain--left {
  top: 4%;
  left: max(-210px, calc(50% - 790px));
  transform: rotate(-12deg);
}

.chain--right {
  top: 20%;
  right: max(-210px, calc(50% - 790px));
  transform: scaleX(-1) rotate(-8deg);
}

.mirror-board {
  position: relative;
  container-type: inline-size;
  width: min(var(--board-width), 100%);
  aspect-ratio: 941 / 1672;
  margin: 0 auto;
  overflow: hidden;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.035), transparent 32% 68%, rgba(164, 34, 28, 0.04)),
    url("../assets/kult-mirror/mirror-texture.webp") center / 520px auto repeat;
  box-shadow:
    0 0 0 1px rgba(217, 199, 172, 0.14),
    0 22px 80px rgba(0, 0, 0, 0.82);
}

.mirror-board::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(108deg, transparent 0 43%, rgba(255, 255, 255, 0.035) 45%, transparent 48%),
    radial-gradient(circle at 50% 35%, rgba(105, 80, 77, 0.14), transparent 38%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.52));
}

.mirror-board::after {
  position: absolute;
  inset: 0;
  z-index: 10;
  content: "";
  pointer-events: none;
  background: radial-gradient(
    circle at var(--glint-x, 48%) var(--glint-y, 24%),
    rgba(255, 244, 224, 0.12),
    transparent 16%
  );
  mix-blend-mode: screen;
}

.catalog-nav {
  position: absolute;
  z-index: 15;
  top: 1.4%;
  left: 3.2%;
  display: flex;
  width: 38%;
  align-items: center;
  gap: 18px;
  color: #d4c8b5;
  font: 500 clamp(0.6rem, 0.88vw, 0.78rem) / 1 "Oswald", sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.catalog-nav a {
  color: inherit;
  text-decoration: none;
}

.catalog-nav a:hover,
.catalog-nav a:focus-visible {
  color: var(--blood-bright);
}

.catalog-nav span {
  opacity: 0.48;
}

.shard {
  position: absolute;
  z-index: 2;
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  padding: clamp(13px, 2.2vw, 34px);
  isolation: isolate;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.44)),
    url("../assets/kult-mirror/mirror-texture.webp") center / 490px auto repeat;
}

.shard::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(114deg, transparent 10% 44%, rgba(255, 255, 255, 0.045) 45%, transparent 47%),
    radial-gradient(circle at 84% 12%, rgba(255, 255, 255, 0.055), transparent 30%);
  mix-blend-mode: screen;
}

.text-shard {
  display: block;
}

.text-shard h2,
.shard--system h2 {
  position: relative;
  margin: 0 0 0.58em;
  color: var(--blood-bright);
  font: 500 clamp(1rem, 1.85vw, 1.48rem) / 0.98 "Oswald", sans-serif;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.text-shard p,
.shard--system dd,
.rating-list {
  margin: 0;
  color: var(--bone);
  font-size: clamp(0.88rem, 1.4vw, 1.1rem);
  line-height: 1.36;
  text-wrap: pretty;
}

.sigil {
  position: relative;
  display: block;
  width: 44px;
  aspect-ratio: 1;
  margin: 18px auto 0;
  opacity: 0.9;
}

.sigil::before,
.sigil::after {
  position: absolute;
  inset: 50% auto auto 50%;
  content: "";
  background: var(--blood-bright);
  transform: translate(-50%, -50%);
}

.sigil::before {
  width: 2px;
  height: 100%;
  box-shadow: -8px 9px 0 -0.5px var(--blood-bright), 8px -9px 0 -0.5px var(--blood-bright);
}

.sigil::after {
  width: 100%;
  height: 2px;
  box-shadow: 0 -8px 0 -0.5px var(--blood-bright), 0 8px 0 -0.5px var(--blood-bright);
}

.sigil--small {
  width: 25px;
  margin-top: 12px;
}

.frame-network {
  position: absolute;
  inset: 0;
  z-index: 12;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  filter: brightness(0.62) contrast(1.15) sepia(0.15) drop-shadow(0 2px 2px #000);
  mix-blend-mode: screen;
}

.shard--title {
  z-index: 4;
  top: 3.7%;
  left: 13.4%;
  width: 42.5%;
  height: 17.7%;
  padding: 0;
  clip-path: polygon(10% 8%, 91% 0, 100% 62%, 76% 100%, 28% 96%, 0 63%);
}

.title-plaque {
  width: 100%;
  height: 100%;
  padding: 2.5%;
  object-fit: contain;
  filter: saturate(0.4) contrast(1.08) brightness(0.91);
}

.shard--reflection {
  top: 2%;
  right: 2.2%;
  width: 37%;
  height: 20%;
  flex-direction: column;
  clip-path: polygon(0 8%, 34% 0, 94% 13%, 100% 62%, 78% 100%, 26% 93%, 8% 64%);
}

.shard--reflection p {
  max-width: 17ch;
  margin: 0;
  color: rgba(224, 215, 198, 0.72);
  font-size: clamp(1rem, 2.15vw, 1.85rem);
  line-height: 1.12;
  text-align: center;
  transform: scaleX(-1);
}

.shard--hook {
  top: 16.4%;
  left: 2.5%;
  width: 33.5%;
  height: 20%;
  flex-direction: column;
  clip-path: polygon(17% 2%, 92% 13%, 100% 54%, 73% 100%, 13% 91%, 0 42%);
}

.shard--hook > p {
  max-width: 18ch;
  margin: 0 auto;
  color: #eee6d6;
  font-size: clamp(1.12rem, 2.18vw, 1.9rem);
  line-height: 1.18;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  margin-top: 18px;
  color: var(--bone-dim);
  font: 400 clamp(0.52rem, 0.72vw, 0.68rem) / 1.25 "Oswald", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tags span:not(:last-child)::after {
  padding-left: 10px;
  color: var(--blood);
  content: "·";
}

.shard--angel {
  top: 16.2%;
  left: 31.2%;
  width: 38%;
  height: 30%;
  padding: 0;
  clip-path: polygon(12% 1%, 82% 0, 100% 22%, 91% 76%, 69% 100%, 29% 94%, 0 66%, 5% 22%);
}

.art-window {
  margin: 0;
}

.art-trigger {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: #090809;
  cursor: zoom-in;
}

.art-trigger img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.72) contrast(1.08) brightness(0.82);
  transition: transform 500ms ease, filter 500ms ease;
}

.art-trigger:hover img,
.art-trigger:focus-visible img {
  filter: saturate(0.9) contrast(1.06) brightness(0.94);
  transform: scale(1.035);
}

.shard--angel .art-trigger img {
  object-position: 50% 14%;
  transform: scale(1.06);
}

.shard--angel figcaption {
  position: absolute;
  right: 9%;
  bottom: 6%;
  left: 9%;
  padding: 8px 10px;
  color: #f0e6d4;
  background: rgba(3, 3, 4, 0.72);
  font-size: clamp(0.72rem, 1.14vw, 0.98rem);
  font-style: italic;
  text-align: center;
}

.shard--world {
  top: 19.9%;
  right: 1.7%;
  width: 31.7%;
  height: 24.5%;
  padding: 15.5% 4.8% 3% 6%;
  clip-path: polygon(12% 0, 87% 8%, 100% 40%, 91% 94%, 22% 100%, 0 70%, 5% 24%);
}

.shard--world .sigil {
  float: left;
  width: 26px;
  margin: 0 10px 6px 0;
}

.shard--tone {
  top: 34.6%;
  left: 1%;
  width: 31.7%;
  height: 20.7%;
  padding: 5.8% 4.8% 4% 6.7%;
  clip-path: polygon(8% 0, 76% 7%, 100% 42%, 88% 93%, 29% 100%, 0 75%, 4% 22%);
}

.shard--characters {
  top: 42.4%;
  left: 27.2%;
  width: 37.4%;
  height: 18.5%;
  padding: 4.8% 5.5% 4.5% 6%;
  clip-path: polygon(9% 4%, 78% 0, 100% 38%, 87% 100%, 21% 93%, 0 58%);
}

.shard--city {
  top: 42%;
  right: 1.6%;
  width: 31.8%;
  height: 18.7%;
  padding: 0;
  clip-path: polygon(7% 4%, 89% 0, 100% 34%, 87% 91%, 27% 100%, 0 67%);
}

.shard--city img {
  object-position: 50% 48%;
}

.shard--adventures {
  top: 53.2%;
  left: 1.4%;
  width: 35.5%;
  height: 18.6%;
  padding: 5% 5% 4% 7%;
  clip-path: polygon(7% 6%, 75% 0, 100% 32%, 91% 93%, 22% 100%, 0 67%);
}

.shard--style {
  top: 58.6%;
  left: 32.2%;
  width: 32.7%;
  height: 17.3%;
  padding: 5.4% 4.8% 4%;
  clip-path: polygon(12% 0, 83% 5%, 100% 48%, 82% 100%, 18% 92%, 0 51%);
}

.shard--distinctive {
  top: 58.2%;
  right: 1.1%;
  width: 34.8%;
  height: 19.5%;
  padding: 5.4% 5% 4% 6.5%;
  clip-path: polygon(11% 5%, 83% 0, 100% 39%, 87% 96%, 23% 100%, 0 59%);
}

.shard--ritual {
  top: 70.2%;
  left: 0.8%;
  width: 39%;
  height: 18.2%;
  padding: 0;
  clip-path: polygon(5% 5%, 76% 0, 100% 31%, 91% 90%, 23% 100%, 0 69%);
}

.shard--ritual img {
  object-position: 50% 52%;
}

.shard--audience {
  top: 74.3%;
  left: 35.4%;
  width: 31.5%;
  height: 16%;
  padding: 4.6% 4.5% 3.8%;
  clip-path: polygon(10% 4%, 80% 0, 100% 41%, 86% 94%, 26% 100%, 0 61%);
}

.shard--door {
  top: 72.6%;
  right: 0.5%;
  width: 35%;
  height: 18.8%;
  padding: 0;
  clip-path: polygon(7% 5%, 85% 0, 100% 37%, 90% 92%, 27% 100%, 0 67%);
}

.shard--door img {
  object-position: 68% 50%;
}

.shard--system {
  top: 87%;
  left: 1.1%;
  width: 39.5%;
  height: 12.2%;
  display: block;
  padding: 2.7% 4.2% 2% 5%;
  clip-path: polygon(5% 5%, 81% 0, 100% 33%, 92% 91%, 23% 100%, 0 71%);
}

.session-meta {
  margin: 0;
}

.session-meta div {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 12px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(200, 58, 44, 0.2);
}

.session-meta dt {
  color: var(--blood-bright);
  font: 500 clamp(0.58rem, 0.78vw, 0.72rem) / 1.2 "Oswald", sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.session-meta dd {
  font-size: clamp(0.68rem, 0.92vw, 0.82rem);
}

.rating-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding: 8px 0 0;
  list-style: none;
}

.rating-list li {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  text-align: center;
}

.rating-list span {
  overflow: hidden;
  max-width: 100%;
  color: var(--bone-dim);
  font: 400 clamp(0.46rem, 0.62vw, 0.58rem) / 1 "Oswald", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rating-list b {
  display: grid;
  width: 23px;
  aspect-ratio: 1;
  place-items: center;
  color: var(--blood-bright);
  border: 1px solid rgba(200, 58, 44, 0.66);
  font-family: "Oswald", sans-serif;
  font-size: 0.7rem;
}

.shard--motto {
  top: 88.5%;
  left: 36.2%;
  width: 29.4%;
  height: 10.6%;
  flex-direction: column;
  margin: 0;
  color: var(--blood-bright);
  font-size: clamp(0.92rem, 1.65vw, 1.4rem);
  font-style: italic;
  line-height: 1.12;
  text-align: center;
  clip-path: polygon(10% 4%, 80% 0, 100% 36%, 87% 94%, 27% 100%, 0 64%);
}

.shard--motto .sigil {
  width: 34px;
  margin-top: 12px;
}

.shard--warnings {
  top: 86.2%;
  right: 0.7%;
  width: 37%;
  height: 13.2%;
  padding: 3.3% 4.8% 2.5% 6%;
  clip-path: polygon(8% 5%, 84% 0, 100% 36%, 90% 92%, 26% 100%, 0 67%);
}

.shard--warnings p {
  font-size: clamp(0.76rem, 1.08vw, 0.94rem);
}

/*
 * Final desktop layout: every section below is mapped to one real opening in
 * frame-network-v2.png. The polygons were traced from the transparent
 * interiors of that asset, rather than approximated independently.
 */
@media (min-width: 681px) {
  .catalog-nav {
    top: 2.15%;
    left: 37.3%;
    width: 23.8%;
    min-height: 4.9%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
  }

  .shard--title {
    top: 1.077%;
    left: 2.125%;
    width: 31.987%;
    height: 13.337%;
    clip-path: polygon(
      33.9% 1.1%,
      98% 1.6%,
      93.2% 50.7%,
      87.4% 58.1%,
      35.9% 97.5%,
      4% 93%,
      0.8% 86.1%,
      1.5% 4%
    );
  }

  .shard--reflection {
    top: 1.017%;
    right: auto;
    left: 64.187%;
    width: 33.794%;
    height: 16.507%;
    padding: 0.9cqw 1cqw 7.2cqw 10.2cqw;
    clip-path: polygon(
      12.3% 0.9%,
      96.9% 1.6%,
      98.9% 36.2%,
      97.3% 97.5%,
      90.3% 98%,
      30.2% 76.3%,
      11.2% 38.8%,
      1.1% 5.4%,
      1.6% 1.3%
    );
  }

  .shard--city {
    top: 9.51%;
    right: auto;
    left: 15.303%;
    width: 19.872%;
    height: 16.806%;
    clip-path: polygon(
      86.6% 0.9%,
      97.1% 5.3%,
      97.6% 12.8%,
      77.3% 91.8%,
      68.4% 98.8%,
      60.2% 95%,
      1.3% 34.9%
    );
  }

  .shard--angel {
    top: 8.672%;
    left: 32.944%;
    width: 39.32%;
    height: 31.519%;
    clip-path: polygon(
      83.5% 0.5%,
      93.9% 11%,
      99.1% 20.1%,
      86.9% 65.7%,
      66.1% 98.7%,
      56.5% 99%,
      12.4% 94%,
      0.7% 57.9%,
      11.8% 8%
    );
  }

  .shard--world {
    top: 39.773%;
    right: auto;
    left: 27.311%;
    width: 37.832%;
    height: 18.9%;
    padding: 4.3cqw 6.7cqw 1.4cqw 7.1cqw;
    clip-path: polygon(
      25.8% 0.8%,
      82.4% 10.8%,
      97.9% 83.2%,
      98% 92.2%,
      73.9% 98.3%,
      15.7% 98.9%,
      12.8% 97.2%,
      0.7% 47.2%
    );
  }

  .shard--hook {
    top: 27.751%;
    left: 2.125%;
    width: 33.05%;
    height: 20.215%;
    padding: 11.1cqw 9.2cqw 1.9cqw 1.4cqw;
    clip-path: polygon(
      82.6% 0.7%,
      87.6% 4.1%,
      98.9% 54.7%,
      71.2% 96.7%,
      61.4% 99%,
      2.6% 94.8%,
      0.8% 92.9%,
      0.8% 47.3%,
      3.1% 30.8%
    );
  }

  .shard--ritual {
    top: 30.682%;
    left: 60.786%;
    width: 37.088%;
    height: 31.639%;
    clip-path: polygon(
      23.2% 0.5%,
      72.1% 12.7%,
      98.4% 55.8%,
      99% 84.7%,
      96.8% 88.9%,
      41% 99.3%,
      19.3% 84.9%,
      0.7% 32.5%
    );
  }

  .shard--characters {
    top: 15.311%;
    left: 69.713%;
    width: 28.162%;
    height: 17.763%;
    padding: 7.3cqw 1.3cqw 5.8cqw 3.7cqw;
    clip-path: polygon(
      18.9% 0.8%,
      96.8% 23.2%,
      98.7% 81.1%,
      95.5% 85.7%,
      64.2% 98.8%,
      2.1% 78.5%,
      15.3% 7.4%
    );
  }

  .shard--tone {
    top: 48.684%;
    left: 2.125%;
    width: 27.843%;
    height: 19.737%;
    padding: 1.8cqw 5.2cqw 4.4cqw 0.8cqw;
    clip-path: polygon(
      8% 0.8%,
      82.3% 4.8%,
      98.7% 51.8%,
      88.2% 86.5%,
      13% 98.9%,
      3.2% 96.4%,
      1% 90%,
      1% 6.7%,
      2.5% 3%
    );
  }

  .shard--adventures {
    top: 59.749%;
    left: 29.224%;
    width: 24.655%;
    height: 14.354%;
    padding: 1cqw 3.8cqw 6.2cqw 5.1cqw;
    clip-path: polygon(
      68.1% 1%,
      91.8% 1.9%,
      98.5% 7.1%,
      84.7% 80.4%,
      58.2% 98.1%,
      37.5% 97.3%,
      33% 95%,
      1.1% 47.9%,
      10.6% 7.9%,
      18.5% 2.3%
    );
  }

  .shard--style {
    top: 58.553%;
    left: 52.497%;
    width: 23.167%;
    height: 18.062%;
    padding: 7.5cqw 2.8cqw 7cqw 3.4cqw;
    clip-path: polygon(
      53.2% 0.8%,
      61% 1.8%,
      96.1% 31.8%,
      98.4% 92.7%,
      95.4% 96.9%,
      72.9% 97.8%,
      9.2% 77.3%,
      1.1% 72.5%,
      17.2% 10.9%,
      25.7% 5.8%
    );
  }

  .shard--audience {
    top: 60.407%;
    left: 77.258%;
    width: 20.723%;
    height: 19.677%;
    padding: 5.8cqw 0.8cqw 7.2cqw 1.4cqw;
    clip-path: polygon(
      91.3% 0.8%,
      97.7% 2.1%,
      98.2% 77.8%,
      97.2% 96.7%,
      88.7% 98.9%,
      4.4% 79%,
      1.3% 20.4%,
      11.3% 14.4%
    );
  }

  .shard--door {
    top: 67.344%;
    right: auto;
    left: 2.232%;
    width: 35.069%;
    height: 18.062%;
    clip-path: polygon(
      68.2% 0.8%,
      72.9% 2.3%,
      95.9% 40.4%,
      98.9% 58.3%,
      97.7% 64.6%,
      73% 76%,
      8.8% 98.5%,
      3% 98.5%,
      1.1% 92.7%,
      0.8% 27.2%,
      3.5% 17.5%,
      10.9% 13.4%
    );
  }

  .shard--distinctive {
    top: 73.146%;
    right: auto;
    left: 37.832%;
    width: 31.031%;
    height: 17.584%;
    padding: 6.3cqw 4.7cqw 5.6cqw 6.9cqw;
    clip-path: polygon(
      42.8% 0.9%,
      96.9% 24.7%,
      98.8% 28.9%,
      85.8% 81.6%,
      32.2% 98.8%,
      0.9% 42.2%,
      26% 10%
    );
  }

  .shard--warnings {
    top: 77.392%;
    right: auto;
    left: 66.631%;
    width: 31.243%;
    height: 21.531%;
    padding: 8.7cqw 1.2cqw 1.4cqw 5cqw;
    clip-path: polygon(
      30.3% 0.7%,
      87.4% 17.6%,
      97.1% 22.8%,
      98.8% 58.3%,
      96.9% 98.2%,
      22.4% 99%,
      14.8% 96.1%,
      1.2% 56.1%,
      1.2% 49.4%,
      14.8% 4.2%
    );
  }

  .shard--system {
    top: 81.34%;
    left: 2.338%;
    width: 43.571%;
    height: 17.644%;
    padding: 10.7cqw 4.8cqw 1cqw 1.7cqw;
    clip-path: polygon(
      74.1% 0.8%,
      77.2% 2.7%,
      98.9% 58.3%,
      93.4% 96.1%,
      87.6% 98.8%,
      59.5% 98.8%,
      3.9% 97.8%,
      1.1% 95.9%,
      0.6% 44.7%,
      3.4% 33.4%
    );
  }

  .shard--motto {
    top: 89.294%;
    left: 46.015%;
    width: 22.635%;
    height: 9.749%;
    padding: 5.5cqw 3.2cqw 0.8cqw 3cqw;
    clip-path: polygon(
      77.9% 1.5%,
      81% 2.5%,
      96.9% 81%,
      96.7% 96%,
      16% 97.9%,
      1.6% 93.9%,
      11.7% 31%
    );
  }

  .shard--hook > p {
    font-size: clamp(1rem, 1.7vw, 1.45rem);
  }
}

.mirror-footer {
  position: relative;
  z-index: 20;
  display: flex;
  width: min(var(--board-width), 100%);
  min-height: 58px;
  margin: 0 auto;
  padding: 16px clamp(18px, 4vw, 48px);
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid rgba(224, 215, 198, 0.3);
  background:
    linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.85)),
    url("../assets/kult-mirror/mirror-texture.webp") center / 420px auto repeat;
  color: var(--bone-dim);
  font: 500 0.68rem / 1 "Oswald", sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mirror-footer a {
  color: inherit;
  text-decoration: none;
}

.mirror-footer a:hover,
.mirror-footer a:focus-visible {
  color: var(--blood-bright);
}

.lightbox {
  width: min(1120px, calc(100vw - 30px));
  max-height: 92vh;
  padding: 18px;
  border: 1px solid rgba(229, 220, 201, 0.38);
  background:
    linear-gradient(rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.92)),
    url("../assets/kult-mirror/mirror-texture.webp") center / 520px auto repeat;
  color: var(--bone);
  box-shadow: 0 22px 90px #000;
}

.lightbox::backdrop {
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(5px);
}

.lightbox-close {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 14px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(229, 220, 201, 0.42);
  color: var(--bone);
  background: #080708;
  cursor: pointer;
  font: 400 1.7rem / 1 "Oswald", sans-serif;
}

.lightbox figure {
  margin: 0;
}

.lightbox img {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  margin: auto;
}

.lightbox figcaption {
  padding: 12px 52px 0 0;
  color: var(--bone-dim);
  font-size: 0.9rem;
}

@media (max-width: 900px) {
  .room-shell {
    padding-bottom: 0;
  }

  .chain {
    opacity: 0.24;
  }

  .mirror-board {
    width: 100%;
  }

  .catalog-nav span {
    display: none;
  }
}

@media (max-width: 680px) {
  .room-shell {
    overflow: visible;
    background-size: auto 1700px;
  }

  .chain {
    display: none;
  }

  .mirror-board {
    display: grid;
    width: 100%;
    aspect-ratio: auto;
    min-height: 0;
    padding: 68px 12px 26px;
    gap: 0;
    background-size: 420px auto;
  }

  .mirror-board::before {
    position: fixed;
  }

  .catalog-nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 54px;
    padding: 0 18px;
    border-bottom: 1px solid rgba(229, 220, 201, 0.18);
    background: rgba(3, 3, 4, 0.76);
    font-size: 0.72rem;
  }

  .frame-network {
    display: none;
  }

  .shard {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    margin-top: -2px;
    padding: 30px 25px;
    clip-path: polygon(4% 2%, 94% 0, 100% 16%, 97% 93%, 82% 100%, 6% 97%, 0 80%, 2% 11%);
    border-top: 1px solid rgba(223, 204, 174, 0.62);
    border-bottom: 1px solid rgba(223, 204, 174, 0.36);
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.66));
  }

  .shard:nth-of-type(even) {
    clip-path: polygon(7% 0, 96% 3%, 100% 84%, 91% 98%, 8% 100%, 0 88%, 2% 14%);
  }

  .shard--title {
    min-height: 250px;
    padding: 0;
  }

  .title-plaque {
    object-position: center;
  }

  .shard--reflection {
    display: none;
  }

  .shard--hook > p {
    max-width: 22ch;
    font-size: 1.48rem;
  }

  .tags {
    font-size: 0.6rem;
  }

  .text-shard h2,
  .shard--system h2 {
    font-size: 1.34rem;
  }

  .text-shard p,
  .shard--system dd {
    font-size: 1.02rem;
    line-height: 1.45;
  }

  .shard--angel,
  .shard--city,
  .shard--ritual,
  .shard--door {
    min-height: 420px;
    padding: 0;
  }

  .shard--city {
    min-height: 360px;
  }

  .shard--ritual {
    min-height: 380px;
  }

  .shard--door {
    min-height: 320px;
  }

  .shard--world .sigil {
    float: none;
    margin: 0 auto 18px;
  }

  .session-meta div {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 9px 0;
  }

  .session-meta dt {
    font-size: 0.72rem;
  }

  .rating-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    padding-top: 16px;
  }

  .rating-list span {
    font-size: 0.54rem;
  }

  .shard--motto {
    min-height: 180px;
    font-size: 1.45rem;
  }

  .mirror-footer {
    min-height: 118px;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .art-trigger img {
    transition: none;
  }
}