:root {
  --canvas: #352080;
  --raised: #4a32a8;
  --cream: #fff6db;
  --mist: #edd69e;
  --gold: #f0c01e;
  --amber: #ffe56a;
  --cork: #c4a574;
  --ink: #24144a;
  --spine: 168px;
  --pad: 28px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 12% -10%, rgba(240, 192, 30, 0.22), transparent 36%),
    radial-gradient(circle at 100% 80%, rgba(140, 115, 219, 0.45), transparent 42%),
    var(--canvas);
  color: var(--cream);
  font-family: Outfit, "Avenir Next", sans-serif;
  font-size: 18px;
  line-height: 1.5;
}

img { max-width: 100%; display: block; }

a { color: var(--amber); }

.spine {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--spine);
  padding: 28px 18px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  background: rgba(26, 16, 56, 0.72);
  border-right: 1px solid rgba(240, 192, 30, 0.35);
  z-index: 2;
}

.spine-mark {
  font-family: Fraunces, Georgia, serif;
  color: var(--gold);
  text-decoration: none;
  font-size: 22px;
  letter-spacing: 0.02em;
}

.spine-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.spine-links a {
  color: var(--mist);
  text-decoration: none;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.spine-links a:hover { color: var(--gold); }

main {
  margin-left: var(--spine);
  padding: 48px var(--pad) 80px;
  max-width: 1080px;
}

.kicker {
  margin: 0 0 8px;
  color: var(--gold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 600;
}

h1, h2, h3 {
  font-family: Fraunces, Georgia, serif;
  font-weight: 560;
  letter-spacing: -0.03em;
  margin: 0;
}

h1 { font-size: clamp(56px, 8vw, 92px); line-height: 0.9; }

h2 { font-size: clamp(36px, 5vw, 56px); line-height: 1; }

.tagline, .lede, header p {
  max-width: 38rem;
}

.tagline {
  font-size: 22px;
  color: var(--cream);
}

.lede, header p { color: var(--mist); }

.hero {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(260px, 1fr);
  gap: 36px;
  align-items: end;
  margin-bottom: 72px;
}

.window-frame {
  margin: 0;
  padding: 14px 14px 18px;
  background: var(--cream);
  color: var(--ink);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(16, 8, 40, 0.35);
}

.window-frame img {
  width: 100%;
  border-radius: 12px;
  max-height: 640px;
  object-fit: cover;
  object-position: top;
}

.window-frame figcaption {
  margin-top: 10px;
  font-size: 14px;
  letter-spacing: 0.04em;
}

.intro-right { margin-left: auto; text-align: right; }
.intro-right p { margin-left: auto; }

.rooms, .record, .legal { margin-top: 28px; }

.cork {
  margin-top: 28px;
  padding: 28px 18px 36px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 246, 219, 0.18), transparent 40%),
    repeating-linear-gradient(135deg, #b89562 0 2px, #c4a574 2px 8px);
  border-radius: 8px;
  box-shadow: inset 0 0 0 8px #8d6a3d;
}

.note {
  background: #fff4c8;
  color: var(--ink);
  padding: 18px 16px 16px;
  min-height: 160px;
  box-shadow: 0 10px 18px rgba(40, 20, 8, 0.25);
  position: relative;
}

.note::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 1px 0 #8a6a10;
}

.note h3 { font-size: 26px; margin: 10px 0 8px; }
.note p { margin: 0; font-size: 15px; }

.note-a { transform: rotate(-2.5deg); }
.note-b { transform: rotate(1.8deg); margin-top: 18px; }
.note-c { transform: rotate(-1.2deg); }
.note-d { transform: rotate(2.2deg); }
.note-e { transform: rotate(-1.6deg); margin-top: 12px; }

.pin-photo {
  margin: 12px 0 0;
  transform: rotate(3deg);
  background: var(--cream);
  padding: 8px 8px 22px;
}

.pin-photo img {
  height: 180px;
  width: 100%;
  object-fit: cover;
}

.pair {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}

.handset {
  margin: 0;
  background: #1a1038;
  border: 3px solid var(--gold);
  border-radius: 28px;
  padding: 12px 12px 16px;
}

.handset img {
  border-radius: 18px;
  width: 100%;
  max-height: 640px;
  object-fit: cover;
  object-position: top;
}

.handset figcaption {
  margin-top: 10px;
  text-align: center;
  color: var(--mist);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.plates {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 12px;
}

.plates img {
  height: 180px;
  width: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.tabs {
  display: flex;
  gap: 8px;
  margin: 22px 0 0;
  justify-content: flex-end;
}

.tab {
  appearance: none;
  border: 1px solid rgba(240, 192, 30, 0.5);
  background: transparent;
  color: var(--mist);
  font: inherit;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
}

.tab.is-on {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}

#privacy, #support {
  margin-top: 18px;
  max-width: 42rem;
  margin-left: auto;
  background: rgba(26, 16, 56, 0.45);
  padding: 22px 22px 8px;
  border-radius: 16px;
}

#privacy p, #support p { margin-top: 0; }

@media (max-width: 860px) {
  .spine {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-right: 0;
    border-top: 1px solid rgba(240, 192, 30, 0.35);
  }

  .spine-links { flex-direction: row; gap: 12px; }

  main { margin-left: 0; padding: 28px 20px 96px; }

  .hero, .cork, .pair, .plates { grid-template-columns: 1fr; }

  .intro-right, .tabs, #privacy, #support { text-align: left; margin-left: 0; }
  .intro-right p { margin-left: 0; }
  .tabs { justify-content: flex-start; }

  .note, .pin-photo { transform: none; }

  .window-frame img {
    max-height: 46vh;
  }

  body {
    padding-bottom: 84px;
  }
}