/* Certifiable Media — carried over from the Carrd original */
:root {
  --bg: #ffffff; /* merged 2026-10-08: ex-Light page white + card grey + Default's dot texture */
  --ink: #2b2b2b;
  --muted: #6d6d6d; /* darkened 2026-10-08: #8d8d8d was 3.10:1 on --bg; #6d6d6d is >=4.79:1 on bg/card */
  --teal: #0f766e; /* darkened 2026-10-08: #15968f was 3.63:1; #0f766e is >=5.06:1 as text and under white text */
  --navy: #060119;
  --card: #f6f6f6;
  --text-soft: #555;
  --radius: 12px;
}

/* ---------- themes ---------- */
/* Light: the :root palette itself (merged 2026-10-08 with the old
   Default look — bright white page, shaded cards, dot texture kept).
   data-theme="light" carries no overrides; the attribute only records
   the visitor's explicit choice. Default resolves to light/dark by
   following the system (see the theme scripts). */

/* Dark: modeled on the blog's dark style */
html[data-theme="dark"] {
  --bg: #0f0f0f;
  --ink: #e8e8e8;
  --muted: #a3a3a3;
  --teal: #2dd4bf;
  --card: #1a1a1a;
  --text-soft: #c6c6c6;
}
html[data-theme="dark"] body {
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1.6px, transparent 1.8px);
}
html[data-theme="dark"] .nav a { background: #2e2e2e; color: #fff; }
html[data-theme="dark"] .nav a.active { background: var(--teal); color: #06231f; }
html[data-theme="dark"] .btn-row a { background: #2e2e2e; color: #fff; }
html[data-theme="dark"] .btn-row a.teal { background: var(--teal); color: #06231f; }
html[data-theme="dark"] .btn-row a.teal svg { fill: #06231f; }
html[data-theme="dark"] .btn-row a.teal img.btn-ic { filter: brightness(0.25); }
html[data-theme="dark"] .spot-tabs button { background: #2e2e2e; color: #fff; }
html[data-theme="dark"] .spot-tabs button[aria-selected="true"] { background: var(--teal); color: #06231f; }
html[data-theme="dark"] .spot-cta { background: var(--teal); color: #06231f; }

/* ---------- skip link ---------- */
/* First element in the synced header; visually hidden until focused. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--teal);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  padding: 0.65rem 1.4rem;
  border-radius: 0 0 999px 0;
}
.skip-link:focus { left: 0; }
html[data-theme="dark"] .skip-link { color: #06231f; } /* bright teal bg needs dark text */

/* ---------- home intro (the page's H1) ---------- */
.home-intro {
  text-align: center;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  font-weight: 600;
  line-height: 1.55;
  color: var(--ink);
  max-width: 46rem;
  margin: 0.5rem auto 1.75rem;
}

/* visible keyboard focus everywhere (colours verified >=4.5:1) */
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* dark theme keeps the brighter error pink (passes on dark bg) */
html[data-theme="dark"] .form-status.err { color: #d64f9e; }

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: var(--ink);
  background-color: var(--bg);
  background-image: radial-gradient(#dcdcdc 1.6px, transparent 1.8px);
  background-size: 64px 64px;
  line-height: 1.5;
}

.wrap {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---------- header ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 2.5rem 0 1rem;
  flex-wrap: wrap;
}

.logo img {
  width: min(300px, 62vw);
  height: auto;
  display: block;
}

.nav {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.nav a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: #fff;
  background: var(--ink);
  padding: 0.6rem 1.5rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  transition: background 0.15s ease, transform 0.15s ease;
}

.nav a:hover { background: #000; transform: translateY(-1px); }
.nav a.active { background: var(--teal); }

/* ---------- theme switch ---------- */
.theme-switch {
  display: flex;
  gap: 0.25rem;
  background: var(--card);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  padding: 0.2rem;
}
html[data-theme="dark"] .theme-switch { border-color: rgba(255, 255, 255, 0.12); }
.theme-switch button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.theme-switch button svg {
  width: 1.05em;
  height: 1.05em;
  fill: currentColor;
  display: none;
}
.theme-switch button svg g { fill: none; stroke: currentColor; }
.theme-switch button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg);
}
html[data-theme="dark"] .theme-switch button[aria-pressed="true"] {
  background: var(--teal);
  color: #06231f;
}

/* ---------- squiggle divider ---------- */
.squiggle { margin: 2.75rem 0; }
.squiggle svg { display: block; width: 100%; height: 16px; }

/* ---------- section headings ---------- */
.section-title {
  text-align: center;
  color: var(--muted);
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 1.75rem;
}

.section-sub {
  text-align: center;
  color: var(--muted);
  margin: -1rem 0 2rem;
}

/* ---------- latest cards (home) ---------- */
.latest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 1rem;
}

.latest-card {
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.07);
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.latest-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.latest-card .thumb {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  display: block;
  background: var(--ink);
}

.latest-card .thumb-tile {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 1.25rem;
  text-align: center;
  padding: 1rem;
}

.latest-card .body { padding: 1.25rem 1.35rem 1.4rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }

.kicker {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--teal);
}

.latest-card h3 { margin: 0; font-size: 1.15rem; line-height: 1.35; }
.latest-card .date { color: var(--muted); font-size: 0.85rem; }
.latest-card p.blurb { margin: 0; color: var(--text-soft); font-size: 0.95rem; flex: 1; }

.card-link {
  color: var(--teal);
  font-weight: 700;
  text-decoration: none;
  margin-top: 0.35rem;
  display: inline-block;
}
.card-link:hover { text-decoration: underline; }

/* ---------- film grid ---------- */
.film-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem;
  justify-content: center;
}

.film-card {
  position: relative;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  aspect-ratio: 2 / 3;
  background: var(--ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.film-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
}

.film-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* landscape/square art: show the whole image instead of cropping key details */
.film-card.contain { background: #101018; }
.film-card.contain img { object-fit: contain; }

.film-card .caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.2rem 0.9rem 0.8rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.82));
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
}

.film-card.title-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: 1.2rem;
  padding: 1rem;
  text-decoration: none;
}

/* ---------- project cards ---------- */
.project-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.project-card {
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.07);
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  position: relative;
}

/* whole card is clickable via the card link */
.project-card .card-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.project-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.project-card .thumb {
  aspect-ratio: 16 / 9;
  object-fit: contain;
  width: 100%;
  display: block;
  background: #101018;
}
/* splash tiles: 1200x630 splash art shown at its native ratio, edge to edge */
.project-card .thumb.splash {
  aspect-ratio: 1200 / 630;
  object-fit: cover;
}

.project-card .thumb-tile {
  aspect-ratio: 16 / 8;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 1.6rem;
}

.project-card .body { padding: 1.35rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
.project-card h3 { margin: 0; font-size: 1.3rem; }
.project-card p { margin: 0; color: var(--text-soft); flex: 1; }

/* ---------- social buttons ---------- */
.btn-row {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin: 0.5rem 0 1rem;
}

.btn-row a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: #fff;
  background: var(--ink);
  padding: 0.65rem 1.6rem;
  border-radius: 999px;
  font-weight: 700;
  transition: background 0.15s ease, transform 0.15s ease;
}

.btn-row a:hover { transform: translateY(-1px); }
.btn-row a.teal { background: var(--teal); }
.btn-row a.navy { background: var(--navy); }
.btn-row a svg { width: 1.1em; height: 1.1em; fill: #fff; }
.btn-row a img.btn-ic { height: 1.25em; width: auto; display: block; }

/* ---------- footer ---------- */
.site-footer {
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  padding: 2.5rem 0 3rem;
}

.site-footer nav { margin-bottom: 0.75rem; }
.site-footer nav a { color: var(--muted); text-decoration: none; margin: 0 0.6rem; }
.site-footer nav a:hover { color: var(--ink); }

/* ---------- responsive ---------- */
/* Mid widths (landscape phones, tablets, desktop-site mode): the theme
   switch no longer fits the header row and wraps underneath it, eating a
   row of vertical space. Pin it in the dead space at the top right
   instead — same pattern as small phones (owner request 2026-10-09). */
@media (max-width: 1180px) {
  .site-header { position: relative; }
  .theme-switch { position: absolute; top: 0.55rem; right: 0.55rem; }
}

@media (max-width: 860px) {
  .latest-grid { grid-template-columns: 1fr; max-width: 26rem; margin-left: auto; margin-right: auto; }
  .project-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .site-header { justify-content: center; text-align: center; padding-top: 3.1rem; position: relative; }
  /* pin the theme switch top-right as compact icon buttons (padding-top
     above gives it a clear band so it never kisses the centred logo) */
  .theme-switch { position: absolute; top: 0.4rem; right: 0.55rem; padding: 0.15rem; gap: 0.15rem; }
  .theme-switch button { padding: 0.55rem; font-size: 0.85rem; }
  .theme-switch button svg { display: block; }
  .theme-switch button span { display: none; }
  .nav { justify-content: center; gap: 0.5rem; flex-wrap: wrap; }
  .nav a { padding: 0.5rem 0.85rem; font-size: 0.82rem; }
  .film-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}

/* ---------- spotlight hero (home) ---------- */
.spotlight {
  background: var(--navy);
  border-radius: 18px;
  overflow: hidden;
  color: #fff;
  box-shadow: 0 12px 40px rgba(6, 1, 25, 0.35);
  margin-top: 1rem;
}

.spotlight-stage { display: grid; touch-action: pan-y; }

.spotlight-slide {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 1.18fr 1fr;
  min-height: 0;
  position: relative;
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
}

/* inactive slides are fully out of layout, tab order, and the a11y tree */
.spotlight-slide[hidden] { display: none; }

.spotlight-slide.active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  animation: spot-in 0.6s ease;
}

@keyframes spot-in {
  from { opacity: 0; transform: scale(0.985); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .spotlight-slide { transition: none; }
  .spotlight-slide.active { animation: none; }
}

.spot-visual {
  min-width: 0;
  aspect-ratio: 1200 / 630;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.spot-visual.cover { background-size: cover; }

.spot-visual.tile {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  font-weight: 700;
  text-align: center;
  padding: 2rem;
  line-height: 1.3;
}

.spot-content {
  padding: 2rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
}

.spot-content .kicker { color: #6ee7d8; }

.spot-content h2 {
  margin: 0;
  font-size: clamp(1.8rem, 3.2vw, 2.55rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.spot-content .date { color: #b9b9c9; font-size: 0.9rem; }
.spot-content p.blurb { margin: 0; color: #d7d7e0; font-size: 1.05rem; line-height: 1.5; max-width: 30rem; }

.spot-cta {
  align-self: flex-start;
  margin-top: 0.35rem;
  background: var(--teal);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  padding: 0.8rem 1.9rem;
  border-radius: 999px;
  transition: background 0.15s ease;
}

/* The whole slide is the link: the CTA's hit area stretches across the
   slide, so the image, headline, text and empty tile space all activate
   the same link (the tabs and Pause live outside the slide and are
   unaffected). Regression-guarded by tests/check-spotlight.py. */
.spot-cta::after {
  content: "";
  position: absolute;
  inset: 0;
}

.spot-cta:hover { background: #0b5f59; } /* white on this = 7.51:1. NO transform here: a transform on the link makes it the containing block for its own stretched ::after and collapses the slide-wide hit area back to the button — see tests/check-spotlight.py */
html[data-theme="dark"] .spot-cta:hover { background: #17a89f; } /* #06231f text on this = 5.63:1 */

.spot-controls {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  align-items: center;
  margin-top: 1.4rem;
  flex-wrap: wrap;
}

.spot-tabs {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
}

.spot-tabs button {
  font: inherit;
  cursor: pointer;
  border: 2px solid transparent;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.55rem 1.3rem;
  border-radius: 999px;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.spot-tabs button[aria-selected="true"] { background: var(--teal); }
.spot-tabs button:hover { border-color: var(--teal); }

.spot-pause {
  font: inherit;
  cursor: pointer;
  border: 2px solid transparent;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.55rem 1.3rem;
  border-radius: 999px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.spot-pause:hover { border-color: var(--teal); }
.spot-pause[aria-pressed="true"] { background: var(--teal); }
html[data-theme="dark"] .spot-pause { background: #2e2e2e; color: #fff; }
html[data-theme="dark"] .spot-pause[aria-pressed="true"] { background: var(--teal); color: #06231f; }

/* mid widths: keep the slide near the image's own height (the visual is
   1200/630, so text has to budget ~52% of the column width) */
@media (max-width: 1120px) {
  .spot-content { padding: 1.5rem 1.75rem; }
  .spot-content p.blurb { font-size: 0.98rem; }
}

@media (max-width: 860px) {
  .spotlight-slide { grid-template-columns: 1fr; min-height: 0; }
  .spot-visual { min-height: 0; min-width: 0; aspect-ratio: 1200 / 630; }
  .spot-visual.tile { font-size: 1.5rem; }
  .spot-content { padding: 1.25rem 1.25rem 1.4rem; min-width: 0; gap: 0.6rem; }
  .spot-content h2 { font-size: 1.35rem; margin: 0; }
  .spot-content .kicker { font-size: 0.78rem; }
  .spot-content .date { font-size: 0.82rem; }
  .spot-cta { padding: 0.6rem 1.4rem; font-size: 0.9rem; margin-top: 0.3rem; }
  .spot-controls { margin-top: 0.9rem; gap: 0.45rem; flex-wrap: nowrap; }
  .spot-tabs { gap: 0.45rem; flex: 1 1 auto; flex-wrap: nowrap; min-width: 0; }
  .spot-tabs button { flex: 1 1 0; padding: 0.45rem 0.35rem; font-size: 0.78rem; text-align: center; }
  .spot-pause { padding: 0.45rem 1rem; font-size: 0.82rem; flex: 0 0 auto; white-space: nowrap; }
}

/* ---------- merch shop (concept preview) ---------- */
.merch-hero {
  background: var(--navy);
  border-radius: 18px;
  padding: 2.5rem 1.5rem;
  text-align: center;
  box-shadow: 0 12px 40px rgba(6, 1, 25, 0.35);
  margin-top: 1rem;
}
.merch-hero img {
  width: min(520px, 100%);
  height: auto;
  display: block;
  margin: 0 auto;
}
.merch-toolbar {
  display: flex;
  justify-content: flex-end;
  margin: 1.25rem 0 0;
}
.cart-btn {
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  border: 0;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  transition: background 0.15s ease, transform 0.15s ease;
}
.cart-btn:hover { background: #000; transform: translateY(-1px); }
html[data-theme="dark"] .cart-btn { background: #2e2e2e; color: #fff; }
.cart-count {
  background: var(--teal);
  color: #fff;
  border-radius: 999px;
  min-width: 1.5em;
  padding: 0.05em 0.4em;
  font-size: 0.85em;
  text-align: center;
}
html[data-theme="dark"] .cart-count { color: #06231f; }

.merch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}
.product-card {
  font: inherit;
  text-align: left;
  cursor: pointer;
  border: 0;
  padding: 0;
  min-width: 0;
  background: var(--card);
  color: var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.07);
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.product-card img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  display: block;
  background: var(--ink);
}
.product-card .p-body {
  padding: 1rem 1.15rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.product-card .p-name { font-weight: 700; line-height: 1.35; }
.product-card .p-price { color: var(--teal); font-weight: 700; }
@media (max-width: 860px) {
  .merch-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .merch-grid { grid-template-columns: 1fr; }
}

.shop-dialog {
  border: 0;
  padding: 0;
  border-radius: 18px;
  background: var(--bg);
  color: var(--ink);
  width: min(680px, 94vw);
  max-height: 92vh;
  overflow: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.shop-dialog::backdrop { background: rgba(6, 1, 25, 0.55); }
.dlg-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.4rem 1.6rem 0;
}
.dlg-head h2 { margin: 0; font-size: 1.4rem; line-height: 1.3; }
.dlg-close {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: var(--card);
  color: var(--ink);
  font-weight: 700;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  flex: 0 0 auto;
}
.dlg-photo {
  width: 100%;
  max-height: 52vh;
  object-fit: contain;
  display: block;
  background: var(--card);
  margin-top: 1.1rem;
}
.dlg-body { padding: 1.3rem 1.6rem 1.6rem; display: flex; flex-direction: column; gap: 1rem; }
.dlg-price { font-size: 1.2rem; font-weight: 700; color: var(--teal); margin: 0; }
.opt-group { border: 0; margin: 0; padding: 0; }
.opt-group legend { font-weight: 700; padding: 0; margin-bottom: 0.55rem; }
.size-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.size-row label {
  cursor: pointer;
  border: 2px solid var(--muted);
  border-radius: 999px;
  padding: 0.4rem 1.05rem;
  font-weight: 700;
}
.size-row input { position: absolute; opacity: 0; }
.size-row label:has(input:checked) { background: var(--teal); border-color: var(--teal); color: #fff; }
.size-row label:has(input:focus-visible) { outline: 2px solid var(--teal); outline-offset: 2px; }
.qty-row { display: flex; align-items: center; gap: 0.75rem; }
.qty-row label { font-weight: 700; }
.qty-input {
  font: inherit;
  width: 5rem;
  padding: 0.5rem 0.7rem;
  border: 2px solid var(--muted);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
}
.merch-btn {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: var(--teal);
  color: #fff;
  font-weight: 700;
  padding: 0.8rem 1.9rem;
  border-radius: 999px;
  transition: background 0.15s ease;
}
.merch-btn:hover { background: #0b5f59; }
html[data-theme="dark"] .merch-btn { color: #06231f; }
html[data-theme="dark"] .merch-btn:hover { background: #17a89f; }
.merch-btn[disabled] { opacity: 0.55; cursor: default; }
.added-note { color: var(--teal); font-weight: 700; margin: 0; min-height: 1.2em; }

.cart-list { display: flex; flex-direction: column; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.cart-item { display: flex; gap: 1rem; align-items: center; }
.cart-item img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.cart-item .c-info { flex: 1; min-width: 0; }
.cart-item .c-name { font-weight: 700; line-height: 1.35; }
.cart-item .c-opt { color: var(--muted); font-size: 0.9rem; }
.cart-item .c-line { font-weight: 700; white-space: nowrap; }
.stepper { display: inline-flex; align-items: center; gap: 0.45rem; }
.stepper button {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: var(--card);
  color: var(--ink);
  font-weight: 700;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
}
.remove-btn {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: var(--teal);
  font-weight: 700;
  padding: 0.25rem 0;
  text-decoration: underline;
}
.cart-subtotal {
  display: flex;
  justify-content: space-between;
  font-size: 1.15rem;
  font-weight: 700;
  border-top: 2px solid var(--card);
  padding-top: 1rem;
  margin: 0;
}
.checkout-note { color: var(--muted); margin: 0; min-height: 1.2em; }
.cart-empty { color: var(--muted); margin: 0; }

/* ---------- book page ---------- */
.book-hero { text-align: center; margin-top: 1rem; }
.book-hero .tagline {
  font-size: 1.35rem;
  color: var(--muted);
  font-style: italic;
  margin: 0.4rem 0 0;
}
.book-art {
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  display: block;
  margin-top: 1.75rem;
}
.book-blurb {
  max-width: 44rem;
  margin: 2rem auto 1.75rem;
  font-size: 1.12rem;
  text-align: center;
  color: var(--text-soft);
}
.book-world { max-width: 44rem; margin: 0 auto; }
.book-world p { margin: 0 0 1.1rem; color: var(--text-soft); line-height: 1.65; }
.book-world .signoff { font-weight: 700; color: var(--ink); }
.quote-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
.quote-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.07);
  font-style: italic;
  color: var(--text-soft);
  margin: 0;
}
.quote-card footer {
  font-style: normal;
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.6rem;
}
.quote-card a { color: inherit; text-decoration: none; }
.quote-card a:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .quote-grid { grid-template-columns: 1fr; }
}

/* ---------- film watch page ---------- */
.trailer {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  margin: 2rem auto 0;
  max-width: 56rem;
  background: #111;
}
.trailer iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.watch-group { margin: 0 0 1.75rem; }
.watch-group h3 {
  font-size: 1.05rem;
  margin: 0 0 0.8rem;
  color: var(--ink);
}
.watch-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
.watch-card {
  display: block;
  background: var(--card);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.07);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.15s ease;
}
.watch-card:hover { transform: translateY(-2px); }
.watch-card strong { display: block; font-size: 1.05rem; }
.watch-card span { color: var(--muted); font-size: 0.92rem; }
.watch-logo {
  display: block;
  height: 2.75rem;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin-bottom: 0.85rem;
}
/* compact variant: half-size social link blocks */
.watch-grid.compact { grid-template-columns: repeat(3, 1fr); gap: 0.9rem; }
.watch-grid.compact .watch-card { padding: 0.9rem 1rem; }
.watch-grid.compact .watch-logo { height: 1.6rem; margin-bottom: 0.5rem; }
.watch-grid.compact .watch-card strong { font-size: 0.95rem; }
.watch-grid.compact .watch-card span { font-size: 0.82rem; }
@media (max-width: 640px) {
  .watch-grid { grid-template-columns: 1fr; }
  .watch-grid.compact { grid-template-columns: repeat(2, 1fr); }
}