/* "Vestíbulo", the app's lobby (RecSaver/Shared/Theme.swift): a dark cinema lobby, or a warm paper programme in
   light mode. Cinema red for tickets and buttons, marquee gold for labels. The cards' materials (red ticket,
   cream TV, wood, pages) look the same in both. Bebas Neue, DM Serif Display and Inter, as in the app. */
@font-face { font-family: "Bebas Neue"; src: url("/fonts/BebasNeue-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "DM Serif Display"; src: url("/fonts/DMSerifDisplay-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "DM Serif Display"; font-style: italic; src: url("/fonts/DMSerifDisplay-Italic.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Inter"; font-weight: 400; src: url("/fonts/Inter-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Inter"; font-weight: 500; src: url("/fonts/Inter-Medium.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Inter"; font-weight: 600 700; src: url("/fonts/Inter-SemiBold.woff2") format("woff2"); font-display: swap; }

:root {
  /* Change with the mode (dark first; light below). */
  --bg: #120A09;
  --surface: #1E1210;
  --track: #221411;
  --gold: #E8C170;
  --text: #F2E9DC;
  --muted: #BCA996;
  --hairline: rgba(242, 233, 220, .14);
  /* The same in both modes: the cards' materials, and text on red and on art. */
  --red: #B3261E;
  --red-deep: #7A1A14;
  --cabinet: #D9CBB6;
  --cabinet-ink: #2A1412;
  --wood: #2A1814;
  --shelf: #3A2420;
  --ink: #1A0F0D;
  --paper: #F2E9DC;
  --brass: #E8C170;
  --stone: #BCA996;

  --display: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color-scheme: dark light;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #F4EDE2;
    --surface: #FFFAF2;
    --track: #E8DDCC;
    --gold: #A06F1F;
    --text: #2A1814;
    --muted: #6E5A4E;
    --hairline: rgba(42, 24, 20, .14);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.55 var(--sans);
}
a { color: var(--gold); }
h1, h2, h3 { margin: 0 0 .4em; line-height: 1.05; }
h1 { font: 400 clamp(2.8rem, 8vw, 4.8rem)/.95 var(--display); letter-spacing: .02em; }
h2 { font: 400 clamp(1.9rem, 5vw, 2.5rem)/1 var(--display); letter-spacing: .03em; }
h3 { font: 600 1.05rem/1.3 var(--sans); }
p { margin: 0 0 1em; }

.wrap { max-width: 1040px; margin-inline: auto; padding-inline: 16px; }
.narrow { max-width: 700px; }
.label { font: 400 1.4rem/1 var(--display); letter-spacing: .06em; color: var(--gold); margin: 0 0 14px; }
.fine { font-size: .85rem; color: var(--muted); }

header.site {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-block: 20px;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.brand img { width: 34px; height: 34px; border-radius: 8px; }
.brand span { font: 400 1.9rem/1 var(--display); letter-spacing: .04em; padding-top: 3px; }
nav.links { display: flex; gap: 20px; font-size: .95rem; font-weight: 500; }
nav.links a { color: var(--muted); text-decoration: none; }
nav.links a:hover { color: var(--text); }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 54px; padding: 0 26px; border-radius: 27px; border: 0;
  background: var(--red); color: var(--paper);
  font: 600 1rem var(--sans); text-decoration: none; cursor: pointer;
}
.button.secondary { background: transparent; color: var(--text); border: 1px solid var(--hairline); }
.button.gold { background: var(--gold); color: var(--ink); }
.button[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 8px; }

/* Home */
.hero { padding-block: 28px 56px; display: grid; gap: 40px; grid-template-columns: 1.1fr 1fr; align-items: center; }
.hero .eyebrow { font: 500 .9rem var(--sans); color: var(--muted); margin-bottom: 14px; }
.hero p.lede { font-size: 1.18rem; color: var(--muted); max-width: 31em; }
.lobby {
  position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 18px;
  padding: 26px 10px 0; min-height: 300px;
}
.lobby .ticket { transform: rotate(-5deg); --z: 1.25; }
.lobby .tv { --z: 1.25; }
.lobby .shelf-unit { transform: rotate(3deg); --z: 1.25; }
@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; padding-top: 8px; gap: 24px; }
  .lobby { order: -1; min-height: 0; gap: 10px; }
  .lobby .ticket, .lobby .tv, .lobby .shelf-unit { --z: .9; }
}

section { padding-block: 30px; }
.steps, .features { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }
.features { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .steps, .features { grid-template-columns: 1fr; } }
.card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 18px; padding: 22px; }
.card p { margin: 0; color: var(--muted); }
.step-number { font: 400 2.6rem/1 var(--display); color: var(--gold); margin-bottom: 8px; }
.rooms { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .rooms { grid-template-columns: 1fr; } }
.room { background: var(--surface); border: 1px solid var(--hairline); border-radius: 18px; padding: 22px; }
.room h3 { font: 400 1.7rem/1 var(--display); letter-spacing: .04em; margin-bottom: 6px; }
.room p { color: var(--muted); margin: 0; }
.creators { background: var(--surface); border: 1px solid var(--hairline); border-radius: 22px; padding: 30px; }
.creators blockquote { font: italic 400 1.3rem/1.35 var(--serif); margin: 0 0 14px; }

footer.site {
  border-top: 1px solid var(--hairline); margin-top: 40px; padding-block: 24px 44px;
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; color: var(--muted); font-size: .9rem;
}
footer.site nav { display: flex; gap: 18px; }
footer.site a { color: var(--muted); }

/* Text pages (privacy, terms, support) */
.prose { padding-block: 12px 24px; }
.prose h1 { font-size: clamp(2.6rem, 7vw, 3.6rem); }
.prose h2 { font-size: 1.8rem; margin-top: 1.4em; color: var(--gold); }
.prose h3 { margin-top: 1.3em; }
.prose ul { padding-left: 1.3em; margin: 0 0 1em; }
.prose li { margin: .3em 0; }
.prose details { background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px; padding: 16px 18px; margin: 10px 0; }
.prose summary { font-weight: 600; cursor: pointer; }
.prose details p { margin: .7em 0 0; color: var(--muted); }

/* Cards: the app's ticket, TV and book (Cards.swift), at 1x unless --z scales them. */
.ticket, .tv, .shelf-unit { zoom: var(--z, 1); flex: none; }
.art {
  position: relative; width: 96px; height: 144px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 10px; text-align: center;
  background: repeating-linear-gradient(45deg, #2E1D19 0 7px, #271714 7px 14px);
  color: var(--paper); font: 400 15px/1 var(--display); letter-spacing: .03em; overflow-wrap: anywhere;
}
.art small { font: 400 9px/1 var(--display); letter-spacing: .18em; color: var(--brass); }
.ticket {
  width: 112px; height: 184px; padding: 8px 8px 0; border-radius: 3px; background: var(--red);
  display: flex; flex-direction: column;
  -webkit-mask: radial-gradient(circle at 0 50%, #0000 4px, #000 4.5px) left / 51% 14px repeat-y,
                radial-gradient(circle at 100% 50%, #0000 4px, #000 4.5px) right / 51% 14px repeat-y;
          mask: radial-gradient(circle at 0 50%, #0000 4px, #000 4.5px) left / 51% 14px repeat-y,
                radial-gradient(circle at 100% 50%, #0000 4px, #000 4.5px) right / 51% 14px repeat-y;
}
.ticket .art { border-radius: 2px; }
.ticket .stub {
  flex: 1; display: flex; align-items: center; justify-content: space-between;
  font: 400 13px/1 var(--display); letter-spacing: .05em; color: var(--paper);
}
.tv { position: relative; width: 112px; height: 204px; display: flex; flex-direction: column; }
.tv .rod { position: absolute; top: 0; left: 50%; width: 2.5px; height: 22px; background: var(--stone); border-radius: 2px; transform-origin: 50% 100%; }
.tv .rod.l { transform: translateX(-8px) rotate(-32deg); }
.tv .rod.r { transform: translateX(5px) rotate(32deg); }
.tv .tip { position: absolute; top: 1px; width: 6px; height: 6px; border-radius: 50%; background: var(--brass); }
.tv .tip.l { left: calc(50% - 23px); }
.tv .tip.r { left: calc(50% + 16px); }
.tv .cabinet {
  margin-top: 22px; height: 174px; padding: 8px 8px 0; border-radius: 16px; background: var(--cabinet);
  box-shadow: inset 0 -4px 0 rgba(30, 18, 16, .18), inset 0 2px 0 rgba(255, 255, 255, .4);
}
.tv .screen { border-radius: 18px / 13px; overflow: hidden; box-shadow: 0 0 0 2.5px var(--wood); }
.tv .strip {
  height: 22px; display: flex; align-items: center; justify-content: space-between; padding: 0 1px;
  font: 400 13px/1 var(--display); letter-spacing: .05em; color: var(--cabinet-ink);
}
.tv .dial { width: 12px; height: 12px; border-radius: 50%; background: var(--red); box-shadow: inset 0 0 0 3px var(--red-deep); }
.tv .legs { height: 8px; display: flex; justify-content: space-between; padding: 0 16px; }
.tv .legs i { width: 5px; height: 8px; background: var(--wood); transform: skewX(18deg); }
.tv .legs i + i { transform: skewX(-18deg); }
.shelf-unit { display: flex; flex-direction: column; align-items: flex-start; }
.book { position: relative; width: 96px; margin-right: 5px; }
.book::before {
  content: ""; position: absolute; top: 3px; right: -5px; bottom: 0; left: 8px; border-radius: 0 3px 0 0;
  background: repeating-linear-gradient(90deg, #EFE6D8 0 1px, #C9B9A2 1px 2px);
}
.book .art { border-radius: 2px 4px 0 0; box-shadow: 0 -2px 12px rgba(0, 0, 0, .35); }
.book .art::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 8px;
  background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(255,255,255,.2) 70%, rgba(0,0,0,.3));
}
.book .ribbon {
  position: absolute; top: -10px; right: 14px; width: 10px; height: 30px; z-index: 1; background: var(--red);
  clip-path: polygon(0 0, 50% 5px, 100% 0, 100% 100%, 0 100%);
}
.shelf-bar {
  align-self: stretch; height: 10px; background: var(--shelf); border-top: 1px solid rgba(242, 233, 220, .16);
  box-shadow: 0 10px 16px rgba(0, 0, 0, .45); margin-inline: -6px;
}

/* List and invite pages */
.share { padding-block: 8px 24px; }
.share .eyebrow { font: 400 1.3rem/1 var(--display); letter-spacing: .06em; color: var(--gold); margin-bottom: 8px; }
.share .list-name { font: 400 clamp(1.8rem, 5vw, 2.4rem)/1.1 var(--serif); margin: 0 0 10px; }
.room-row { margin-top: 30px; }
.room-row h2 { display: flex; align-items: baseline; gap: 10px; }
.room-row h2 span { font: 500 .85rem var(--sans); color: var(--muted); letter-spacing: 0; }
.picks { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 22px 14px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.pick { display: flex; flex-direction: column; gap: 10px; }
.pick .title { font: 600 .95rem/1.3 var(--sans); }
.pick .title b { font: 400 1.05rem/1 var(--display); color: var(--gold); margin-right: 6px; letter-spacing: .04em; }
.pick .detail { font-size: .85rem; color: var(--muted); }
.pick a.video { font-size: .9rem; font-weight: 600; text-decoration: none; }
.picks.books .book-row { display: flex; flex-direction: column; }
.code {
  display: inline-block; font: 400 2.4rem/1 var(--display); letter-spacing: .16em; color: var(--text);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px; padding: 12px 18px 8px; margin: 6px 0 12px;
}
.message { padding-block: 40px; color: var(--muted); }
.message h1 { color: var(--text); }