:root {
  --ink: #1a1b1f;
  --ink-soft: #3a353f;
  --paper: #f9f4e4;
  --paper-warm: #efe5cb;
  --rule: rgba(70, 110, 178, 0.24);
  --margin: rgba(196, 59, 59, 0.44);
  --accent: #1d6f7f;
  --accent-soft: rgba(29, 111, 127, 0.2);
  --binding: #16171d;
  --desk-1: #4d3a2b;
  --desk-2: #2b2118;
  --tape: #f0e6c8;
  --rule-gap: 1.92rem;
  --margin-x: 5.2rem;
  --content-pad: clamp(1rem, 2.6vw, 1.6rem);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  padding: clamp(0.75rem, 2.2vw, 1.35rem);
  font-family: "Alegreya", Georgia, serif;
  color: var(--ink);
  background:
    radial-gradient(1300px 820px at 10% -12%, rgba(255, 230, 170, 0.15), transparent 66%),
    radial-gradient(920px 620px at 100% 0%, rgba(0, 0, 0, 0.2), transparent 64%),
    repeating-linear-gradient(12deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 8px),
    linear-gradient(135deg, var(--desk-1), var(--desk-2));
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-x: hidden;
}

body.poemPage {
  padding: 0;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, transparent 40%, rgba(12, 9, 8, 0.38));
  pointer-events: none;
  z-index: -1;
}

body.homePage {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
  overscroll-behavior-y: contain;
}

body.homePage::before {
  background:
    radial-gradient(1300px 820px at 6% -10%, rgba(245, 214, 138, 0.16), transparent 66%),
    radial-gradient(920px 760px at 100% 0%, rgba(0, 0, 0, 0.26), transparent 64%),
    radial-gradient(circle at center, transparent 35%, rgba(9, 8, 8, 0.35));
}

.siteRoot.homeRoot {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  padding: 0;
  display: grid;
  place-items: center;
  perspective: 3200px;
  overflow: hidden;
}

.coverShell,
.pageFrame {
  grid-area: 1 / 1;
}

.coverShell {
  position: relative;
  width: 100vw;
  height: 100dvh;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at 17% 22%, #ffffff 0 2px, transparent 2px),
    radial-gradient(circle at 62% 64%, #ffffff 0 2.1px, transparent 2.1px),
    radial-gradient(circle at 78% 18%, #ffffff 0 1.9px, transparent 1.9px),
    radial-gradient(circle at 25% 80%, #ffffff 0 2px, transparent 2px),
    radial-gradient(circle at 90% 48%, #ffffff 0 2px, transparent 2px),
    radial-gradient(circle at 56% 34%, #ffffff 0 1.8px, transparent 1.8px),
    radial-gradient(circle at 12% 52%, #ffffff 0 1.8px, transparent 1.8px),
    radial-gradient(circle at 39% 12%, #ffffff 0 2px, transparent 2px),
    #0b0b0d;
  background-size: 45px 45px, 52px 52px, 58px 58px, 48px 48px, 60px 60px, 41px 41px, 57px 57px, 63px 63px, auto;
  box-shadow:
    0 1.6rem 3.4rem rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  transform-origin: 1.5% 52%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: opacity 300ms ease, transform 520ms cubic-bezier(0.24, 0.7, 0.2, 1), filter 520ms ease;
  will-change: transform, opacity, filter;
  overflow: hidden;
  touch-action: pan-y;
}

.coverShell::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.48) 0%,
      rgba(0, 0, 0, 0.28) 9%,
      rgba(0, 0, 0, 0.02) 42%,
      rgba(255, 255, 255, 0.09) 72%,
      rgba(255, 255, 255, 0.26) 100%
    );
  opacity: 0.56;
  pointer-events: none;
  z-index: 1;
}

.coverShell::after {
  content: "";
  position: absolute;
  top: -2%;
  right: -1.5%;
  width: 21%;
  height: 104%;
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.02) 0%,
      rgba(255, 255, 255, 0.22) 52%,
      rgba(255, 255, 255, 0.04) 100%
    );
  filter: blur(0.8px);
  opacity: 0.28;
  transform-origin: left center;
  transform: translateX(0) skewY(0deg) scaleX(1);
  pointer-events: none;
  z-index: 2;
}

.coverSpine {
  position: absolute;
  inset: 0 auto 0 0;
  width: 9.2%;
  background:
    linear-gradient(90deg, #050506 0%, #0f1012 65%, #1b1d22 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 2px 0 9px rgba(0, 0, 0, 0.35);
  z-index: 2;
}

.coverSpeckle {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 16% 74%, rgba(255, 255, 255, 0.92) 0 4px, transparent 5px),
    radial-gradient(circle at 28% 23%, rgba(255, 255, 255, 0.9) 0 3px, transparent 4px),
    radial-gradient(circle at 66% 12%, rgba(255, 255, 255, 0.95) 0 3px, transparent 4px),
    radial-gradient(circle at 85% 63%, rgba(255, 255, 255, 0.9) 0 4px, transparent 5px),
    radial-gradient(circle at 47% 38%, rgba(255, 255, 255, 0.87) 0 2px, transparent 3px);
  background-size: 84px 84px, 72px 72px, 88px 88px, 79px 79px, 58px 58px;
  opacity: 0.86;
  mix-blend-mode: screen;
  pointer-events: none;
}

.coverAction {
  appearance: none;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: ns-resize;
  z-index: 3;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.coverLabel {
  width: min(66%, 18rem);
  min-height: 9.3rem;
  padding: 0.72rem 0.8rem;
  border-radius: 0.18rem;
  background: linear-gradient(180deg, rgba(252, 252, 252, 0.96), rgba(236, 238, 240, 0.96));
  border: 2px solid rgba(10, 18, 38, 0.76);
  box-shadow:
    0 0.4rem 1rem rgba(0, 0, 0, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.74);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.62rem;
}

.coverLabelTitle {
  display: block;
  font-family: "Special Elite", "Courier Prime", monospace;
  font-size: clamp(0.95rem, 2.6vw, 1.4rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.15;
  color: #121a2f;
}

.coverLabelLine {
  display: block;
  height: 0;
  border-top: 2px solid rgba(16, 29, 56, 0.82);
}

.coverLabelMeta {
  display: block;
  font-family: "Special Elite", "Courier Prime", monospace;
  font-size: clamp(0.54rem, 1.8vw, 0.8rem);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(18, 26, 47, 0.82);
}

.coverPrompt {
  position: absolute;
  bottom: clamp(0.85rem, 2.2vw, 1.2rem);
  left: 50%;
  transform: translateX(-50%);
  font-family: "Special Elite", "Courier Prime", monospace;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(10, 10, 12, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  padding: 0.35rem 0.62rem;
}

.coverAction:hover .coverPrompt,
.coverAction:focus-visible .coverPrompt {
  background: rgba(10, 10, 12, 0.66);
  border-color: rgba(255, 255, 255, 0.44);
}

.coverAction:focus-visible {
  outline: none;
}

.pageFrame {
  position: relative;
  width: 100vw;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(1rem) scale(0.988);
  transition: opacity 320ms ease, transform 420ms cubic-bezier(0.2, 0.78, 0.22, 1);
  pointer-events: none;
}

.paperSheet {
  width: 100vw;
  min-height: 100dvh;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.42);
  background:
    linear-gradient(
      to right,
      transparent 0,
      transparent calc(var(--margin-x) - 2px),
      var(--margin) calc(var(--margin-x) - 2px),
      var(--margin) var(--margin-x),
      transparent var(--margin-x)
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--rule-gap) - 1px),
      var(--rule) calc(var(--rule-gap) - 1px),
      var(--rule) var(--rule-gap)
    ),
    radial-gradient(circle at 14% 10%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.42) 56%, rgba(237, 225, 193, 0.72) 100%),
    var(--paper);
  box-shadow:
    0 1.35rem 3.2rem rgba(0, 0, 0, 0.38),
    inset 0 1px rgba(255, 255, 255, 0.7);
}

.paperSheet::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2.05rem;
  background:
    linear-gradient(to right, rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0.24)),
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 7px);
  box-shadow: inset -1px 0 rgba(255, 255, 255, 0.08);
  z-index: 2;
  pointer-events: none;
}

.paperSheet::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 4.9rem;
  height: 4.9rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0 45%, rgba(232, 220, 190, 0.95) 45% 58%, transparent 58%);
  filter: drop-shadow(-0.22rem 0.22rem 0.2rem rgba(0, 0, 0, 0.12));
  pointer-events: none;
  z-index: 3;
}

.homePage .top,
.homePage .card,
.homePage .foot {
  position: relative;
  z-index: 4;
}

.homePage .top {
  padding-top: clamp(1.1rem, 2.2vw, 1.7rem);
}

.homePage .listCard {
  margin-bottom: 1.2rem;
}

.homePage .list {
  gap: 0.82rem;
}

.tabStack {
  position: absolute;
  right: clamp(0.1rem, 1.2vw, 0.5rem);
  top: 24%;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  pointer-events: none;
}

.tab {
  font-family: "Special Elite", "Courier Prime", monospace;
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(31, 27, 19, 0.86);
  border-radius: 0.22rem 0.22rem 0.22rem 0;
  padding: 0.38rem 0.5rem;
  border: 1px solid rgba(74, 60, 47, 0.35);
  background: linear-gradient(180deg, rgba(244, 228, 164, 0.95), rgba(231, 208, 134, 0.94));
  transform: rotate(1deg);
}

.tab:nth-child(2) {
  background: linear-gradient(180deg, rgba(252, 202, 209, 0.92), rgba(237, 165, 177, 0.92));
  transform: rotate(-1deg);
}

.tab:nth-child(3) {
  background: linear-gradient(180deg, rgba(205, 229, 181, 0.94), rgba(166, 203, 135, 0.94));
}

.sticker {
  font-family: "Special Elite", "Courier Prime", monospace;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(44, 35, 23, 0.82);
  border-radius: 999px;
  border: 1px solid rgba(95, 78, 56, 0.2);
  background: linear-gradient(180deg, rgba(255, 243, 190, 0.95), rgba(245, 227, 158, 0.94));
  padding: 0.32rem 0.58rem;
}

.tape {
  position: absolute;
  top: 2.4rem;
  width: 4.5rem;
  height: 1rem;
  border-radius: 0.22rem;
  background: linear-gradient(130deg, rgba(240, 230, 202, 0.66), rgba(228, 214, 175, 0.68));
  border: 1px solid rgba(135, 118, 85, 0.17);
  box-shadow: 0 0.16rem 0.32rem rgba(0, 0, 0, 0.08);
  opacity: 0.92;
  pointer-events: none;
}

.tapeLeft {
  left: 2.3rem;
  transform: rotate(-6deg);
}

.tapeRight {
  right: 2.3rem;
  transform: rotate(7deg);
}

.homePage.cover-closed .coverShell {
  opacity: 1;
  filter: brightness(1);
  transform: perspective(2800px) rotateY(0deg) rotateZ(0deg) skewY(0deg) translateX(0) scaleX(1);
  pointer-events: auto;
}

.homePage.cover-closed .pageFrame {
  opacity: 0;
  transform: translateY(1rem) scale(0.988);
  pointer-events: none;
}

.homePage.cover-opening .coverShell {
  animation: cover-open-out 620ms cubic-bezier(0.24, 0.66, 0.18, 1) forwards;
  pointer-events: none;
}

.homePage.cover-opening .coverShell::before {
  animation: cover-light-open 620ms cubic-bezier(0.24, 0.66, 0.18, 1) forwards;
}

.homePage.cover-opening .coverShell::after {
  animation: cover-curl-open 620ms cubic-bezier(0.24, 0.66, 0.18, 1) forwards;
}

.homePage.cover-opening .pageFrame {
  animation: cover-open-in 500ms cubic-bezier(0.2, 0.78, 0.22, 1) 130ms forwards;
}

.homePage.cover-closing .coverShell {
  animation: cover-close-in 590ms cubic-bezier(0.23, 0.66, 0.18, 1) forwards;
  pointer-events: none;
}

.homePage.cover-closing .coverShell::before {
  animation: cover-light-close 590ms cubic-bezier(0.23, 0.66, 0.18, 1) forwards;
}

.homePage.cover-closing .coverShell::after {
  animation: cover-curl-close 590ms cubic-bezier(0.23, 0.66, 0.18, 1) forwards;
}

.homePage.cover-closing .pageFrame {
  animation: cover-close-out 430ms cubic-bezier(0.2, 0.78, 0.22, 1) forwards;
  pointer-events: none;
}

.homePage.cover-open .coverShell {
  opacity: 0;
  pointer-events: none;
  filter: brightness(0.88);
  transform: perspective(2800px) rotateY(-122deg) rotateZ(-1.5deg) skewY(-2.2deg) translateX(-6%) scaleX(0.86);
}

.homePage.cover-open .pageFrame {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

@keyframes cover-open-out {
  0% {
    opacity: 1;
    filter: brightness(1);
    transform: perspective(2800px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skewY(0deg) translateX(0) scaleX(1);
  }
  28% {
    opacity: 1;
    filter: brightness(0.99);
    transform: perspective(2800px) rotateX(1.2deg) rotateY(-24deg) rotateZ(-0.2deg) skewY(-0.2deg) translateX(-0.8%) scaleX(0.988);
  }
  62% {
    opacity: 1;
    filter: brightness(0.96);
    transform: perspective(2800px) rotateX(1.8deg) rotateY(-74deg) rotateZ(-0.8deg) skewY(-1.1deg) translateX(-2.4%) scaleX(0.94);
  }
  100% {
    opacity: 0;
    filter: brightness(0.86);
    transform: perspective(2800px) rotateX(1.4deg) rotateY(-132deg) rotateZ(-1.8deg) skewY(-2.6deg) translateX(-7%) scaleX(0.8);
  }
}

@keyframes cover-open-in {
  0% {
    opacity: 0;
    transform: translateY(1.2rem) rotateZ(0.5deg) scale(0.985);
  }
  62% {
    opacity: 1;
    transform: translateY(-0.22rem) rotateZ(-0.1deg) scale(1.003);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateZ(0deg) scale(1);
  }
}

@keyframes cover-close-in {
  0% {
    opacity: 0;
    filter: brightness(0.86);
    transform: perspective(2800px) rotateX(1.4deg) rotateY(-132deg) rotateZ(-1.8deg) skewY(-2.6deg) translateX(-7%) scaleX(0.8);
  }
  40% {
    opacity: 1;
    filter: brightness(0.96);
    transform: perspective(2800px) rotateX(1.8deg) rotateY(-74deg) rotateZ(-0.8deg) skewY(-1.1deg) translateX(-2.4%) scaleX(0.94);
  }
  72% {
    opacity: 1;
    filter: brightness(0.99);
    transform: perspective(2800px) rotateX(1.2deg) rotateY(-24deg) rotateZ(-0.2deg) skewY(-0.2deg) translateX(-0.8%) scaleX(0.988);
  }
  100% {
    opacity: 1;
    filter: brightness(1);
    transform: perspective(2800px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skewY(0deg) translateX(0) scaleX(1);
  }
}

@keyframes cover-close-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(1rem) scale(0.988);
  }
}

@keyframes cover-light-open {
  0% {
    opacity: 0.56;
    transform: translateX(0);
  }
  60% {
    opacity: 0.2;
    transform: translateX(5%);
  }
  100% {
    opacity: 0.08;
    transform: translateX(10%);
  }
}

@keyframes cover-light-close {
  0% {
    opacity: 0.08;
    transform: translateX(10%);
  }
  46% {
    opacity: 0.2;
    transform: translateX(5%);
  }
  100% {
    opacity: 0.56;
    transform: translateX(0);
  }
}

@keyframes cover-curl-open {
  0% {
    opacity: 0.28;
    transform: translateX(0) skewY(0deg) scaleX(1);
  }
  45% {
    opacity: 0.48;
    transform: translateX(-4%) skewY(-1.2deg) scaleX(0.86);
  }
  100% {
    opacity: 0.02;
    transform: translateX(-18%) skewY(-3.2deg) scaleX(0.36);
  }
}

@keyframes cover-curl-close {
  0% {
    opacity: 0.02;
    transform: translateX(-18%) skewY(-3.2deg) scaleX(0.36);
  }
  55% {
    opacity: 0.48;
    transform: translateX(-4%) skewY(-1.2deg) scaleX(0.86);
  }
  100% {
    opacity: 0.28;
    transform: translateX(0) skewY(0deg) scaleX(1);
  }
}

.paper {
  width: min(58rem, 100%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.42);
  background:
    linear-gradient(
      to right,
      transparent 0,
      transparent calc(var(--margin-x) - 2px),
      var(--margin) calc(var(--margin-x) - 2px),
      var(--margin) var(--margin-x),
      transparent var(--margin-x)
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--rule-gap) - 1px),
      var(--rule) calc(var(--rule-gap) - 1px),
      var(--rule) var(--rule-gap)
    ),
    radial-gradient(circle at 14% 10%, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.4) 56%, rgba(237, 225, 193, 0.72) 100%),
    var(--paper);
  box-shadow:
    0 1.25rem 3.2rem rgba(0, 0, 0, 0.35),
    inset 0 1px rgba(255, 255, 255, 0.7);
  transform-origin: 50% 0;
  animation: page-settle 680ms cubic-bezier(0.2, 0.78, 0.22, 1);
}

.poemPage .paper {
  width: 100%;
  min-height: 100dvh;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}

.paper::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2.05rem;
  background:
    linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.24)),
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 7px);
  box-shadow: inset -1px 0 rgba(255, 255, 255, 0.08);
  z-index: 2;
  pointer-events: none;
}

.paper::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 4.9rem;
  height: 4.9rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0 45%, rgba(232, 220, 190, 0.95) 45% 58%, transparent 58%);
  filter: drop-shadow(-0.22rem 0.22rem 0.2rem rgba(0, 0, 0, 0.12));
  pointer-events: none;
  z-index: 3;
}

.punches {
  position: absolute;
  left: 1.12rem;
  top: 5.4rem;
  bottom: 2rem;
  width: 0.72rem;
  background: radial-gradient(circle, rgba(33, 24, 20, 0.62) 0 0.28rem, transparent 0.31rem) center 0.3rem / 0.72rem 3.2rem repeat-y;
  opacity: 0.28;
  pointer-events: none;
  z-index: 3;
}

.top,
.card,
.foot {
  position: relative;
  z-index: 4;
}

.top {
  padding: 1.3rem var(--content-pad) 0.85rem calc(var(--margin-x) + 0.7rem);
}

.poemPage {
  --margin-x: 2.05rem;
  --content-pad: clamp(0.72rem, 2.8vw, 1.12rem);
}

.poemPage .paper::before {
  width: 1.2rem;
}

.poemPage .punches {
  left: 0.58rem;
}

.eyebrow {
  margin: 0 0 0.55rem;
  font-family: "Special Elite", "Courier Prime", monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.62rem;
  color: rgba(44, 38, 30, 0.75);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.brand.tight {
  margin-top: 0.2rem;
}

.dot {
  width: 0.76rem;
  height: 0.76rem;
  border-radius: 999px;
  background: radial-gradient(circle at 32% 30%, #fdfdfd, #ffce87 40%, #ac7447 100%);
  box-shadow: 0 0 0 0.3rem rgba(172, 116, 71, 0.2);
}

h1 {
  margin: 0;
  font-family: "Special Elite", "Courier Prime", monospace;
  font-size: clamp(1.3rem, 3.2vw, 2rem);
  line-height: 1.1;
  letter-spacing: 0.04em;
}

.subtitle {
  margin: 0.38rem 0 0;
  color: var(--ink-soft);
  font-size: 1.04rem;
}

.script {
  font-family: "Caveat", "Comic Sans MS", cursive;
  font-size: clamp(1.22rem, 4vw, 1.52rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.card {
  margin: 0 0.95rem 0.95rem;
  padding: 1.05rem var(--content-pad) 1.15rem calc(var(--margin-x) + 0.15rem);
  border-radius: 0.95rem;
  border: 1px solid rgba(54, 42, 29, 0.14);
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.78), rgba(248, 240, 224, 0.7));
  box-shadow:
    0 0.7rem 1.9rem rgba(36, 23, 15, 0.13),
    inset 0 1px rgba(255, 255, 255, 0.66);
}

.poemPage .card {
  margin-left: 0;
  margin-right: 0;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}

.card::before,
.card::after {
  content: "";
  position: absolute;
  top: -0.58rem;
  width: 4rem;
  height: 1rem;
  border-radius: 0.2rem;
  background: linear-gradient(130deg, rgba(240, 230, 202, 0.65), rgba(228, 214, 175, 0.68));
  border: 1px solid rgba(135, 118, 85, 0.17);
  box-shadow: 0 0.16rem 0.32rem rgba(0, 0, 0, 0.08);
  pointer-events: none;
}

.card::before {
  left: 2rem;
  transform: rotate(-7deg);
}

.card::after {
  right: 2rem;
  transform: rotate(6deg);
}

.sectionHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  margin-bottom: 0.85rem;
}

.card h2 {
  margin: 0;
  font-family: "Special Elite", "Courier Prime", monospace;
  font-size: 0.98rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(26, 28, 33, 0.88);
}

.scribble {
  font-family: "Caveat", "Comic Sans MS", cursive;
  font-size: 1.18rem;
  color: rgba(53, 92, 67, 0.86);
  transform: rotate(-3deg);
}

.list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.poemLink {
  --tilt: 0deg;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 0.82rem 0.9rem;
  border-radius: 0.78rem;
  border: 1px dashed rgba(27, 61, 71, 0.32);
  background: linear-gradient(130deg, rgba(255, 255, 255, 0.74), rgba(239, 247, 246, 0.65));
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 0.3rem 0.65rem rgba(0, 0, 0, 0.08);
  transform: rotate(var(--tilt));
  animation: list-rise 380ms ease both;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.poemLink:nth-child(odd) {
  --tilt: -0.32deg;
}

.poemLink:nth-child(3n) {
  --tilt: 0.25deg;
}

.poemLink:hover,
.poemLink:focus-visible {
  border-color: rgba(27, 61, 71, 0.48);
  box-shadow: 0 0.46rem 0.95rem rgba(0, 0, 0, 0.14);
  transform: translateY(-1px) translateX(3px) rotate(var(--tilt));
  outline: none;
}

.poemLink:active {
  transform: translateY(1px) rotate(var(--tilt));
}

.poemLink .name {
  font-size: 1.15rem;
  font-weight: 700;
}

.poemLink .hint {
  font-size: 0.9rem;
  opacity: 0.72;
}

.poemLink .openStamp {
  flex-shrink: 0;
  font-family: "Special Elite", "Courier Prime", monospace;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(34, 98, 111, 0.88);
  border: 1px solid rgba(34, 98, 111, 0.36);
  border-radius: 999px;
  padding: 0.28rem 0.55rem;
  background: rgba(34, 98, 111, 0.09);
}

.back {
  position: absolute;
  right: var(--content-pad);
  top: 1rem;
  text-decoration: none;
  font-family: "Special Elite", "Courier Prime", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(24, 28, 35, 0.82);
  padding: 0.45rem 0.64rem;
  border-radius: 999px;
  border: 1px solid rgba(47, 77, 97, 0.32);
  background: rgba(255, 255, 255, 0.52);
}

.back:hover,
.back:focus-visible {
  border-color: rgba(47, 77, 97, 0.52);
  background: rgba(255, 255, 255, 0.8);
  outline: none;
}

.toggleRow {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.55rem;
  margin-top: 0.95rem;
  margin-bottom: 0;
}

.bottomToggle {
  padding-top: 0.8rem;
  border-top: 1px dashed rgba(44, 69, 86, 0.28);
}

.btn {
  appearance: none;
  border: 1px solid rgba(33, 78, 92, 0.34);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(241, 238, 225, 0.82));
  color: var(--ink);
  padding: 0.63rem 0.7rem;
  border-radius: 0.65rem;
  font-family: "Special Elite", "Courier Prime", monospace;
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0.2rem 0.45rem rgba(0, 0, 0, 0.08);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.btn:hover,
.btn:focus-visible {
  border-color: rgba(33, 78, 92, 0.52);
  box-shadow: 0 0.35rem 0.6rem rgba(0, 0, 0, 0.13);
  outline: none;
}

.btn:active {
  transform: translateY(1px);
}

.btn.primary {
  border-color: rgba(29, 111, 127, 0.56);
  background: linear-gradient(180deg, rgba(210, 235, 240, 0.9), rgba(181, 218, 226, 0.9));
}

.poem {
  font-size: clamp(1.08rem, 2.8vw, 1.34rem);
  line-height: 1.84;
  color: rgba(25, 25, 32, 0.95);
  white-space: pre-wrap;
  text-wrap: pretty;
  min-height: 9rem;
  text-indent: 1.25rem hanging each-line;
}

.poem p {
  margin: 0;
  animation: text-fade 240ms ease;
}

.poem.is-refreshing {
  animation: poem-flip 260ms ease;
}

.poem.is-loading {
  min-height: 10rem;
  padding-top: 0.12rem;
}

.poem .loadingLine {
  height: 1.05em;
  margin: 0 0 0.72rem;
  border-radius: 0.22rem;
  background:
    linear-gradient(
      100deg,
      rgba(53, 59, 70, 0.1) 16%,
      rgba(53, 59, 70, 0.17) 34%,
      rgba(53, 59, 70, 0.08) 52%
    );
  background-size: 240% 100%;
  animation: poem-loading-shimmer 1.2s ease-in-out infinite;
}

.poem .loadingLine.w85 {
  width: 85%;
}

.poem .loadingLine.w72 {
  width: 72%;
}

.poem .loadingLine.w66 {
  width: 66%;
}

.poem .loadingLine.w78 {
  width: 78%;
}

.poem .loadingLine.w60 {
  width: 60%;
}

@keyframes poem-loading-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

.slot {
  position: relative;
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  margin: 0;
  padding: 0 0.13em;
  border-radius: 0.12em;
  border: 0;
  font-family: "Special Elite", "Courier Prime", monospace;
  font-size: 0.9em;
  line-height: inherit;
  background: linear-gradient(
    to bottom,
    transparent 0 18%,
    rgba(255, 231, 121, 0.82) 18% 88%,
    transparent 88% 100%
  );
  color: rgba(43, 30, 8, 0.96);
  cursor: pointer;
  transition: background-color 140ms ease, color 120ms ease, box-shadow 110ms ease;
}

.slot::before {
  content: none;
}

.slot.is-empty {
  font-family: "Caveat", "Comic Sans MS", cursive;
  font-size: 1.16em;
  letter-spacing: 0.01em;
  text-transform: lowercase;
}

.slot[data-votes]::after {
  content: "❤ " attr(data-votes);
  display: inline-flex;
  align-items: center;
  margin-left: 0.28em;
  padding: 0.03rem 0.34rem;
  border-radius: 999px;
  border: 1px solid rgba(195, 59, 78, 0.28);
  background: rgba(255, 245, 248, 0.96);
  color: rgba(190, 42, 65, 0.94);
  font-family: "Special Elite", "Courier Prime", monospace;
  font-size: 0.56rem;
  letter-spacing: 0.02em;
  line-height: 1;
  transform: translateY(-0.08em);
}

.slot:hover,
.slot:focus-visible {
  box-shadow: inset 0 -0.75em rgba(255, 231, 121, 0.34);
  outline: none;
}

.slot:active {
  box-shadow: inset 0 -0.75em rgba(255, 231, 121, 0.46);
}

.slot[data-locked="true"] {
  cursor: default;
  opacity: 0.98;
}

body[data-view="canon"] .slot {
  background: linear-gradient(
    to bottom,
    transparent 0 18%,
    rgba(177, 226, 233, 0.72) 18% 88%,
    transparent 88% 100%
  );
}

body[data-view="canon"] .btn.primary {
  border-color: rgba(138, 67, 43, 0.58);
  background: linear-gradient(180deg, rgba(250, 230, 198, 0.96), rgba(240, 209, 160, 0.94));
}

.popover {
  position: fixed;
  inset: 0;
  background: rgba(15, 11, 10, 0.4);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0.75rem;
  z-index: 999;
  transition: background-color 360ms ease;
}

.popover.is-collapsing {
  background: rgba(15, 11, 10, 0.12);
}

.panel {
  position: relative;
  width: min(38rem, calc(100% - 1.5rem));
  max-height: min(82vh, 42rem);
  overflow: auto;
  padding: 0.95rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(55, 44, 31, 0.16);
  background:
    linear-gradient(
      to right,
      transparent 0,
      transparent 2.15rem,
      rgba(188, 57, 57, 0.32) 2.15rem,
      rgba(188, 57, 57, 0.32) 2.23rem,
      transparent 2.23rem
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 1.7rem,
      rgba(77, 114, 177, 0.2) 1.7rem,
      rgba(77, 114, 177, 0.2) 1.76rem
    ),
    linear-gradient(180deg, rgba(253, 248, 235, 0.98), rgba(244, 235, 214, 0.98));
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.32);
  animation: panel-rise 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  transform-origin: center center;
  will-change: transform, opacity;
}

.panel::before {
  content: "";
  position: absolute;
  right: 1rem;
  top: -0.58rem;
  width: 2.8rem;
  height: 1rem;
  border-radius: 0.22rem;
  background: linear-gradient(120deg, rgba(240, 230, 202, 0.72), rgba(224, 209, 167, 0.7));
  border: 1px solid rgba(127, 107, 71, 0.18);
  transform: rotate(8deg);
  pointer-events: none;
}

.panel h3 {
  margin: 0;
  font-family: "Special Elite", "Courier Prime", monospace;
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.option {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.55rem;
  margin-bottom: 0.55rem;
  padding: 0.6rem 0.58rem;
  border-radius: 0.6rem;
  border: 1px dashed rgba(31, 70, 82, 0.34);
  background: rgba(255, 255, 255, 0.66);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.option:hover {
  border-color: rgba(31, 70, 82, 0.58);
  box-shadow: 0 0.26rem 0.54rem rgba(0, 0, 0, 0.11);
}

.option:active {
  transform: translateY(1px);
}

.option.locked {
  cursor: default;
}

.option.locked:hover {
  border-color: rgba(31, 70, 82, 0.34);
  box-shadow: none;
}

.option.selected {
  border-style: solid;
  border-color: rgba(31, 86, 99, 0.64);
  background: linear-gradient(130deg, rgba(229, 244, 246, 0.85), rgba(218, 235, 238, 0.76));
}

.option .text {
  flex: 1;
}

.castBadge {
  flex-shrink: 0;
  display: none;
  align-items: center;
  gap: 0.2rem;
  font-family: "Special Elite", "Courier Prime", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(188, 44, 68, 0.96);
  padding: 0.18rem 0.42rem;
  border-radius: 999px;
  border: 1px solid rgba(196, 53, 74, 0.26);
  background: rgba(255, 240, 244, 0.94);
}

.castBadge .heartIcon {
  font-size: 0.86em;
  color: rgba(198, 47, 73, 0.96);
}

.castBadge .heartNum {
  font-variant-numeric: tabular-nums;
}

.panel.is-vote-cast .castBadge {
  display: inline-flex;
  animation: cast-badge-pop 220ms cubic-bezier(0.16, 0.82, 0.2, 1) both;
}

@keyframes cast-badge-pop {
  from {
    opacity: 0;
    transform: translateY(0.24rem) scale(0.88);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.panel.is-vote-cast .customRow {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-height 260ms ease, opacity 180ms ease, margin-top 220ms ease;
}

.panel.is-vote-cast .pickerSubhead {
  color: rgba(188, 44, 68, 0.94);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: "Special Elite", "Courier Prime", monospace;
}

.panel.is-vote-cast .option.selected {
  border-color: rgba(193, 51, 79, 0.62);
  background: linear-gradient(130deg, rgba(255, 239, 245, 0.92), rgba(255, 228, 237, 0.88));
}

.voteCastNote {
  margin-top: 0.45rem;
}

.heartSticker {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 2.18rem;
  height: 2.18rem;
  border-radius: 58% 42% 52% 48%;
  background:
    radial-gradient(circle at 32% 30%, rgba(255, 247, 250, 0.98) 0 18%, rgba(255, 202, 222, 0.95) 19% 42%, rgba(243, 95, 132, 0.96) 43% 74%, rgba(206, 36, 76, 0.96) 75% 100%);
  border: 2px solid rgba(255, 240, 246, 0.72);
  box-shadow:
    0 0.45rem 0.9rem rgba(180, 36, 70, 0.32),
    inset 0 -0.18rem 0.35rem rgba(149, 19, 49, 0.25);
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translate(2.3rem, -165%) rotate(-24deg) scale(0.36);
  pointer-events: none;
  z-index: 4;
}

.heartStickerGlyph {
  font-size: 1.02rem;
  color: rgba(255, 251, 252, 0.98);
  text-shadow: 0 1px 0 rgba(122, 20, 45, 0.32);
}

.heartSticker::after {
  content: "";
  position: absolute;
  left: 17%;
  right: 17%;
  bottom: -24%;
  height: 34%;
  background: radial-gradient(closest-side, rgba(116, 20, 45, 0.34), rgba(116, 20, 45, 0));
  filter: blur(2px);
}

.option.sticker-dropping .heartSticker {
  animation: sticker-stamp 980ms cubic-bezier(0.13, 0.83, 0.18, 1) forwards;
}

@keyframes sticker-stamp {
  0% {
    opacity: 0;
    transform: translate(2.3rem, -165%) rotate(-24deg) scale(0.36);
  }
  38% {
    opacity: 1;
    transform: translate(0.45rem, -66%) rotate(-8deg) scale(1.06);
  }
  56% {
    transform: translate(0.16rem, -56%) rotate(-2deg) scale(0.93);
  }
  74% {
    transform: translate(0.22rem, -58%) rotate(-4deg) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translate(0.2rem, -58%) rotate(-3deg) scale(1);
  }
}

.customRow {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.72rem;
  max-height: 8rem;
  opacity: 1;
  transition: max-height 260ms ease, opacity 180ms ease, margin-top 220ms ease;
}

.customRow input {
  flex: 1;
  min-width: 0;
  padding: 0.6rem 0.65rem;
  border-radius: 0.56rem;
  border: 1px solid rgba(39, 46, 62, 0.25);
  background: rgba(255, 255, 255, 0.72);
  font-family: "Alegreya", Georgia, serif;
  font-size: 1rem;
}

.customRow input:focus-visible {
  outline: 2px solid rgba(27, 103, 117, 0.34);
  outline-offset: 1px;
}

.customRow button {
  border-radius: 0.56rem;
  border: 1px solid rgba(27, 103, 117, 0.42);
  background: linear-gradient(180deg, rgba(207, 231, 236, 0.95), rgba(177, 213, 220, 0.92));
  font-family: "Special Elite", "Courier Prime", monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.72rem;
  padding: 0 0.88rem;
}

.customRow button:disabled,
.customRow input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.panel .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  margin-bottom: 0.35rem;
}

.small {
  font-size: 0.82rem;
  color: rgba(37, 39, 44, 0.78);
}

.close {
  appearance: none;
  border: 1px solid rgba(41, 63, 73, 0.28);
  background: rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  font-family: "Special Elite", "Courier Prime", monospace;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.66rem;
  padding: 0.37rem 0.55rem;
  cursor: pointer;
}

.hint {
  margin-top: 0.85rem;
  font-size: 0.9rem;
  color: rgba(31, 36, 43, 0.72);
}

.foot {
  padding: 0 1rem 1rem calc(var(--margin-x) + 0.72rem);
}

.foot small {
  display: inline-block;
  font-family: "Caveat", "Comic Sans MS", cursive;
  font-size: 1.2rem;
  color: rgba(47, 53, 64, 0.82);
  transform: rotate(-1.4deg);
}

body.modal-open {
  overflow: hidden;
}

body.vote-pending {
  overflow: hidden;
}

.voteBusyOverlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(13, 10, 9, 0.42);
  backdrop-filter: blur(2px);
  z-index: 1100;
}

body.vote-pending .voteBusyOverlay {
  display: flex;
}

.voteBusyCard {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.78rem;
  border-radius: 0.72rem;
  border: 1px solid rgba(55, 44, 31, 0.18);
  background: linear-gradient(180deg, rgba(253, 248, 235, 0.98), rgba(244, 235, 214, 0.98));
  box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.28);
  font-family: "Special Elite", "Courier Prime", monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(27, 28, 34, 0.92);
}

.voteBusySpinner {
  width: 0.92rem;
  height: 0.92rem;
  border-radius: 999px;
  border: 2px solid rgba(27, 28, 34, 0.26);
  border-top-color: rgba(27, 28, 34, 0.88);
  animation: vote-spin 780ms linear infinite;
}

.panel[aria-busy="true"] .option.pending {
  pointer-events: none;
}

@keyframes vote-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes page-settle {
  from {
    opacity: 0;
    transform: translateY(1.2rem) rotate(-0.4deg) scale(0.995);
  }

  to {
    opacity: 1;
    transform: translateY(0) rotate(0) scale(1);
  }
}

@keyframes list-rise {
  from {
    opacity: 0;
    transform: translateY(0.45rem) rotate(var(--tilt));
  }

  to {
    opacity: 1;
    transform: translateY(0) rotate(var(--tilt));
  }
}

@keyframes panel-rise {
  from {
    opacity: 0;
    transform: translateY(0.8rem) scale(0.99);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes text-fade {
  from {
    opacity: 0.78;
    transform: translateY(0.1rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes poem-flip {
  from {
    opacity: 0.7;
    transform: translateY(0.25rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 760px) {
  :root {
    --margin-x: 4.3rem;
    --rule-gap: 1.8rem;
  }

  .top {
    padding-top: 2.9rem;
    padding-left: calc(var(--margin-x) + 0.45rem);
  }

  .poemPage {
    --margin-x: 1.78rem;
  }

  .card {
    padding-left: calc(var(--margin-x) - 0.05rem);
  }

  .foot {
    padding-left: calc(var(--margin-x) + 0.5rem);
  }

  .back {
    left: calc(var(--margin-x) + 0.1rem);
    right: auto;
    top: 0.85rem;
  }

  .siteRoot.homeRoot {
    padding: 0;
  }

  .coverShell {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
  }

  .coverLabel {
    width: min(74%, 16.5rem);
    min-height: 8.2rem;
  }

  .pageFrame {
    width: 100%;
  }

  .paperSheet {
    width: 100vw;
    min-height: 100dvh;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }

  .tabStack {
    display: none;
  }

  .customRow {
    flex-direction: column;
  }

  .customRow button {
    width: 100%;
    min-height: 2.35rem;
  }
}

@media (max-width: 460px) {
  :root {
    --margin-x: 3.75rem;
  }

  .poemPage {
    --margin-x: 1.48rem;
  }

  .paper::before {
    width: 1.7rem;
  }

  .poemPage .paper::before {
    width: 0.9rem;
  }

  .card,
  .top,
  .foot {
    padding-right: 0.8rem;
  }

  .poemPage .card,
  .poemPage .top,
  .poemPage .foot {
    padding-right: 0.5rem;
  }

  .coverLabel {
    width: min(80%, 15.6rem);
    min-height: 7.8rem;
  }

  .coverLabelTitle {
    font-size: 0.94rem;
  }

  .coverPrompt {
    font-size: 0.6rem;
  }

  .poem {
    font-size: 1.04rem;
    line-height: 1.74;
    text-indent: 1.05rem hanging each-line;
  }

  .toggleRow {
    grid-template-columns: 1fr;
  }
}

body.page-turning .paper,
body.page-turning .paperSheet {
  transform-origin: left center;
  animation: page-turn-out 420ms cubic-bezier(0.38, 0.1, 0.2, 1) forwards;
}

@keyframes page-turn-out {
  0% {
    transform: perspective(1300px) rotateY(0deg) translateX(0);
    opacity: 1;
    filter: brightness(1);
  }
  100% {
    transform: perspective(1300px) rotateY(-66deg) translateX(-8%);
    opacity: 0.18;
    filter: brightness(0.92);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}