/* ===== Fonts (self-hosted so it works offline and on TV browsers) ===== */
@font-face { font-family: 'Fraunces'; src: url(../fonts/fraunces.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Atkinson'; src: url(../fonts/atkinson-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Atkinson'; src: url(../fonts/atkinson-400i.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Atkinson'; src: url(../fonts/atkinson-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Caveat'; src: url(../fonts/caveat.woff2) format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Kalam'; src: url(../fonts/kalam-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Kalam'; src: url(../fonts/kalam-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Patrick Hand'; src: url(../fonts/patrick-hand.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Dancing Script'; src: url(../fonts/dancing-script.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Gochi Hand'; src: url(../fonts/gochi-hand.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Reenie Beanie'; src: url(../fonts/reenie-beanie.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Shadows Two'; src: url(../fonts/shadows-two.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'VT323'; src: url(../fonts/vt323.woff2) format('woff2'); font-weight: 400; font-display: swap; }

/* ===== Tokens ===== */
:root {
  --wood-1: #0f2219;
  --wood-2: #173327;
  --wood-3: #1f4132;
  --paper: #f7eedc;
  --paper-2: #efe2c6;
  --paper-edge: #d9c49c;
  --cream: #fffaf0;
  --ink: #2b1d14;
  --ink-soft: #5b4636;
  --ink-faint: #7d6754;
  --pumpkin: #c8342c;
  --pumpkin-2: #e5574a;
  --pumpkin-deep: #9a2020;
  --sage: #6f8360;
  --sage-2: #9db08a;
  --wine: #6e1424;
  --wine-2: #a3233a;
  --gold: #e3b45c;
  --uv: #7c4dff;
  --uv-glow: #b8ff6a;
  --on-dark: #fbf2e2;
  --on-dark-soft: #e6dcc4;
  --shadow-1: 0 0.15rem 0.35rem rgba(20, 10, 4, 0.35);
  --shadow-2: 0 0.5rem 1.4rem rgba(20, 10, 4, 0.45), 0 0.1rem 0.3rem rgba(20, 10, 4, 0.35);
  --radius: 0.7rem;
  --scale: 1;
  --f-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --f-body: 'Atkinson', 'Segoe UI', system-ui, sans-serif;
  --f-hand-goldie: 'Kalam', 'Segoe Print', cursive;
  --f-hand-bev: 'Caveat', 'Segoe Script', cursive;
  --f-hand-young: 'Patrick Hand', 'Comic Sans MS', cursive;
  --f-vhs: 'VT323', 'Courier New', monospace;
  --f-type: 'Courier New', Courier, monospace;
}

/* Fluid type: grows with BOTH width and height so a 1080p TV reads well from the couch,
   a laptop stays comfortable and a phone never goes below 17px. --scale = A−/A+ setting. */
html {
  overflow-x: hidden;
  font-size: calc(clamp(17px, 0.6vw + 0.9vh + 6px, 44px) * var(--scale));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html[data-size="s"] { --scale: 0.88; }
html[data-size="l"] { --scale: 1.14; }
html[data-size="xl"] { --scale: 1.3; }

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--on-dark);
  background-color: var(--wood-1);
  background-image:
    radial-gradient(ellipse at 50% -10%, rgba(227, 180, 92, 0.16), transparent 60%),
    radial-gradient(ellipse at 50% 120%, rgba(0, 0, 0, 0.55), transparent 60%),
    repeating-linear-gradient(92deg, rgba(255, 220, 170, 0.025) 0 2px, transparent 2px 11px),
    repeating-linear-gradient(88deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 23px),
    linear-gradient(180deg, var(--wood-2), var(--wood-1));
  background-attachment: fixed;
  overflow-x: hidden;
  touch-action: manipulation;
}
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 700; line-height: 1.12; margin: 0; letter-spacing: -0.005em; }
p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===== Buttons ===== */
.btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 2.75rem; min-width: 2.75rem;
  padding: 0.55em 1.2em;
  border: 0; border-radius: 999px;
  font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.01em;
  cursor: pointer; text-decoration: none;
  background: var(--paper); color: var(--ink);
  box-shadow: var(--shadow-1), inset 0 -0.12rem 0 rgba(0, 0, 0, 0.12);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: linear-gradient(180deg, var(--pumpkin-2), var(--pumpkin)); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,0.2); }
.btn-wine { background: linear-gradient(180deg, var(--wine-2), var(--wine)); color: #fff; }
.btn-ghost { background: rgba(255, 245, 225, 0.08); color: var(--on-dark); box-shadow: inset 0 0 0 2px rgba(255, 235, 200, 0.28); }
.btn-big { font-size: 1.35rem; padding: 0.7em 1.8em; min-height: 3.4rem; }
.btn-small { font-size: 0.9rem; min-height: 2.6rem; padding: 0.4em 0.95em; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.icon { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Big, obvious focus ring for TV remotes and keyboards. */
:focus { outline: none; }
:focus-visible, .kb-focus {
  outline: 0.22rem solid var(--gold) !important;
  outline-offset: 0.2rem;
  box-shadow: 0 0 0 0.5rem rgba(227, 180, 92, 0.28), var(--shadow-2) !important;
}

/* ===== Paper & tape ===== */
.paper {
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.55), transparent 40%),
    radial-gradient(circle at 85% 90%, rgba(170, 130, 70, 0.16), transparent 45%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.32 0 0 0 0 0.18 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--ink);
}
.tape {
  position: absolute; width: 5.5rem; height: 1.6rem; z-index: 2;
  background: rgba(240, 225, 180, 0.72);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  border-left: 2px dashed rgba(255, 255, 255, 0.35); border-right: 2px dashed rgba(255, 255, 255, 0.35);
}
.tape.tl { top: -0.7rem; left: -1.2rem; transform: rotate(-38deg); }
.tape.tr { top: -0.7rem; right: -1.2rem; transform: rotate(36deg); }
.tape.tc { top: -0.8rem; left: 50%; margin-left: -2.75rem; transform: rotate(-3deg); }

/* ===== Polaroid frame (portraits & photos) ===== */
.polaroid {
  position: relative;
  background: #fbf8f1;
  padding: 0.55rem 0.55rem 2.2rem;
  box-shadow: var(--shadow-2);
  color: var(--ink);
}
/* padding-box ratio instead of aspect-ratio: works on older TV browsers. */
.ratio { position: relative; height: 0; padding-top: 100%; overflow: hidden; background: #2b2420; }
.ratio.r43 { padding-top: 75%; }
.ratio.r169 { padding-top: 56.25%; }
.ratio > img, .ratio > .ph-fallback, .ratio > .fill { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.ratio > img { object-fit: cover; }
.polaroid .ratio > img { filter: saturate(0.92) contrast(1.02); }
.polaroid .cap { position: absolute; left: 0; right: 0; bottom: 0.35rem; text-align: center; font-family: var(--f-hand-goldie); font-size: 1.05rem; color: #3a2a1e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 0.5rem; }

/* Image placeholder until the real photo exists. */
.ph-fallback {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem;
  background: radial-gradient(circle at 50% 35%, var(--ph-c, #b0703c) 0%, #3b261a 85%);
  color: rgba(255, 245, 230, 0.92); text-align: center; padding: 0.6rem;
}
.ph-fallback svg { width: 46%; height: auto; opacity: 0.9; }
.ph-fallback span { font-family: var(--f-display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.04em; }

/* ===== Small utilities ===== */
.row { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.center { text-align: center; }
.kicker { font-family: var(--f-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.875rem; color: var(--gold); }
.muted { color: var(--on-dark-soft); }
.chip { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.2em 0.75em; border-radius: 999px; font-weight: 700; font-size: 0.875rem; background: rgba(255, 240, 210, 0.12); color: var(--on-dark); }
.chip.new { background: var(--pumpkin); color: #fff; }
.hide { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}

/* Christmas: soft snowfall behind the title. */
.title-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0.55;
  background-image: radial-gradient(2px 2px at 20px 30px, #fff, transparent), radial-gradient(2px 2px at 140px 80px, #fff, transparent), radial-gradient(3px 3px at 260px 150px, #fff, transparent), radial-gradient(2px 2px at 90px 210px, #fff, transparent), radial-gradient(2px 2px at 330px 260px, #fff, transparent);
  background-size: 360px 300px; animation: snow 18s linear infinite; }
@keyframes snow { from { background-position: 0 0; } to { background-position: 60px 300px; } }
@media (prefers-reduced-motion: reduce) { .title-screen::after { animation: none; } }
.title-screen .title-inner { z-index: 2; }

/* Enlarge photos */
[data-zoom] { cursor: zoom-in; }
.loupe-stage[data-zoom] { cursor: crosshair; }
.zoom-btn { -webkit-appearance: none; appearance: none; position: absolute; top: 0.5rem; right: 0.5rem; z-index: 6; width: 2.8rem; height: 2.8rem; border: 0; border-radius: 50%;
  background: rgba(15, 34, 25, 0.82); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; box-shadow: 0 0.15rem 0.5rem rgba(0, 0, 0, 0.45); }
.zoom-btn:focus-visible, .zoom-btn:hover { outline: 3px solid var(--gold); outline-offset: 2px; }
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(5, 10, 7, 0.94); display: flex; align-items: center; justify-content: center; padding: 3.5rem 1rem 1rem; cursor: zoom-out; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 0.4rem; box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.6); }
.lightbox-x { position: absolute; top: 0.8rem; right: 0.8rem; }