.tb {
  --tb-bg: color-mix(in srgb, var(--green-dark) 38%, black);
  --tb-fg: var(--cream);
  --tb-muted: var(--on-dark);
  --tb-line: var(--line-on-dark);
  --tb-accent: var(--cream);
  --tb-flame: color-mix(in srgb, var(--cream) 62%, #e8962e);
  background: var(--tb-bg);
  color: var(--tb-fg);
  transition: background-color 1.4s var(--ease), color 1.4s var(--ease);
}
.tb[data-theme="winter"] {
  --tb-bg: color-mix(in srgb, var(--cream) 82%, var(--green));
  --tb-fg: var(--green-dark);
  --tb-muted: var(--muted);
  --tb-line: var(--line-strong);
  --tb-accent: var(--green);
  --tb-flame: color-mix(in srgb, var(--cream) 15%, #e8962e);
}
.tb :is(h1, h2, .eyebrow) { color: var(--tb-fg); transition: color 1.4s var(--ease); }
.tb .prose p { color: var(--tb-muted); transition: color 1.4s var(--ease); }
.tb .closing { color: var(--on-dark); }
.tb .closing :is(h2, .eyebrow) { color: var(--cream); }




.tb-intro { border-top: 1px solid var(--tb-line); padding: clamp(56px, 8vw, 110px) 0; transition: border-color 1.4s var(--ease); }
.tb-intro-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.8fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.tb-intro-text .h2 { margin-bottom: 24px; }


.tb-price { font-size: clamp(4rem, 12vw, 8rem); line-height: 1; margin: 0.1em 0 0.2em; }

@media (max-width: 760px) {
  .tb-intro-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .tb, .tb * { transition-duration: 0.01s !important; transition-delay: 0s !important; }
}



/* Top panel: the same page hero as the other tabs (cream, text left, framed picture
   right, vines drawn over both by js/site.js), with the trailer as the picture. */
.tb .tb-page-hero :is(h1, .eyebrow) { color: var(--green-dark); }
.tb .tb-page-hero .eyebrow { color: var(--green); }
@media (min-width: 901px) { .tb-page-hero .wrap { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.tb-page-hero .arch { width: min(640px, 100%); }
.tb-hero-fig video { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); background: var(--green-dark); }
.tb-play { position: absolute; right: 14px; bottom: 14px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(245, 242, 236, 0.7); background: rgba(10, 14, 9, 0.35);
  color: var(--cream); cursor: pointer; display: grid; place-items: center; backdrop-filter: blur(4px); }
.tb-play:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.tb-play svg { width: 12px; height: 14px; }
.tb-play .icon-play, .tb-play.is-paused .icon-pause { display: none; }
.tb-play.is-paused .icon-play { display: block; }
@media (max-width: 900px) { .tb-page-hero .arch { width: min(560px, 92vw); } }

/* Slideshow beside the intro. The photo changes like light spreading from a candle
   flame: the next photo is revealed through a soft circle that grows out of the
   flame, with a brief amber glow over the top. */
@property --reveal { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.tb-reel { width: 100%; max-width: 520px; justify-self: end; }
.tb-reel-stage { position: relative; aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; background: #0d120c; isolation: isolate; }
.tb-reel-slide { position: absolute; inset: 0; margin: 0; opacity: 0; z-index: 0; }
.tb-reel-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tb-reel-slide.is-prev { opacity: 1; z-index: 1; }
.tb-reel-slide.is-active { opacity: 1; z-index: 2; }
/* Browsers that cannot animate the mask size fall back to a soft cross-fade. */
.tb-reel-slide.is-entering { animation: tb-reel-fade 0.9s ease both; }
@keyframes tb-reel-fade { from { opacity: 0; } to { opacity: 1; } }
.tb-reel.tb-reveal .tb-reel-slide.is-entering {
  animation: tb-reel-reveal 2.1s cubic-bezier(0.55, 0.05, 0.25, 1) both;
  -webkit-mask-image: radial-gradient(circle at var(--fx) var(--fy), #000 calc(var(--reveal) - 14%), transparent var(--reveal));
  mask-image: radial-gradient(circle at var(--fx) var(--fy), #000 calc(var(--reveal) - 14%), transparent var(--reveal));
}
.tb-reel.tb-reveal .tb-reel-slide.is-entering img { animation: tb-reel-settle 2.8s cubic-bezier(0.2, 0.6, 0.2, 1) both; }
@keyframes tb-reel-reveal { from { --reveal: 0%; opacity: 1; } to { --reveal: 170%; opacity: 1; } }
@keyframes tb-reel-settle { from { transform: scale(1.12); } to { transform: scale(1); } }
.tb-reel-glow { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(circle at var(--fx, 50%) var(--fy, 30%), rgba(255, 214, 140, 0.95) 0%, rgba(255, 160, 70, 0.4) 16%, transparent 42%); }
.tb-reel.is-changing .tb-reel-glow { animation: tb-reel-glow 1.5s ease-out both; }
@keyframes tb-reel-glow { 0% { opacity: 0; transform: scale(0.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(2.6); } }
.tb-reel-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.tb-reel-dots { display: flex; flex-wrap: wrap; gap: 0; }
.tb-reel-dots button { width: 22px; height: 22px; padding: 0; background: none; border: 0; cursor: pointer; display: grid; place-items: center; }
.tb-reel-dots button::after { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--tb-fg); opacity: 0.7; transition: background-color 0.3s, opacity 0.3s; }
.tb-reel-dots button[aria-current="true"]::after { background: var(--tb-fg); opacity: 1; }
.tb-reel-dots button:focus-visible, .tb-reel-btn:focus-visible { outline: 2px solid var(--tb-accent); outline-offset: 2px; }
.tb-reel-btn { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--tb-line); background: transparent; color: var(--tb-fg); cursor: pointer; display: grid; place-items: center; }
.tb-reel-btn svg { width: 11px; height: 13px; }
.tb-reel-btn .icon-play, .tb-reel-btn.is-paused .icon-pause { display: none; }
.tb-reel-btn.is-paused .icon-play { display: block; }
@media (max-width: 760px) { .tb-reel { justify-self: center; max-width: 440px; } }
@media (prefers-reduced-motion: reduce) { .tb-reel-slide.is-entering, .tb-reel.is-changing .tb-reel-glow { animation-duration: 0.01s !important; } }

/* Beside the description (wide screens) the slideshow is exactly as tall as the text,
   so the words are never pushed below the fold by a taller picture. */
@media (min-width: 761px) {
  .tb-intro-grid { align-items: stretch; grid-template-columns: minmax(0, 1fr) auto; }
  .tb-intro-text { align-self: center; }
  /* The stage takes its height from the text, and js/tablescapes.js sets its width
     (--reel-w) to keep the photos' own 3:4 shape, so nothing is cropped. */
  .tb-reel { display: flex; flex-direction: column; height: 100%; max-width: none; width: var(--reel-w, 340px); }
  .tb-reel-stage { flex: 1 1 0; min-height: 360px; aspect-ratio: auto; }
}