/* ==========================================================
   DAILY BREAD — stylesheet
   A Victorian penny-circus meets old-web tribute page.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&family=IM+Fell+English+SC&family=EB+Garamond:ital,wght@0,400;0,600;1,400&display=swap');

:root {
  --curtain: #4a1518;
  --curtain-dark: #2e0d10;
  --parchment: #ece1c6;
  --parchment-dark: #ddccA0;
  --parchment-line: #c9b98a;
  --ink: #2b1d14;
  --gold: #b8873a;
  --gold-light: #d9b876;
  --sage: #55705c;
  --clown-red: #8f2d24;

  --font-display: 'UnifrakturCook', serif;
  --font-heading: 'IM Fell English SC', serif;
  --font-body: 'EB Garamond', serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--parchment);
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.015) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.015) 0 1px, transparent 1px 3px);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
}

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

a { color: var(--clown-red); }

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

.container-wide {
  max-width: 1360px;
}

/* ---------- Nav ---------- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--curtain);
  border-bottom: 3px double var(--gold);
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}

.site-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-top: 10px;
  padding-bottom: 10px;
}

.site-nav .brand {
  font-family: var(--font-heading);
  color: var(--gold-light);
  letter-spacing: 2px;
  font-size: 1.1rem;
  text-decoration: none;
}

.site-nav ul {
  list-style: none;
  display: flex;
  gap: 22px;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.site-nav a {
  color: var(--parchment);
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  letter-spacing: 1px;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}

.site-nav a:hover {
  color: var(--gold-light);
  border-color: var(--gold-light);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  background: var(--curtain-dark);
  overflow: hidden;
}

.hero-valance {
  height: 34px;
  background:
    radial-gradient(circle at 12px 0, transparent 13px, var(--curtain) 14px) 0 0 / 26px 26px repeat-x,
    var(--curtain-dark);
  border-bottom: 2px solid var(--gold);
}

.hero-figure {
  position: relative;
  margin: 0;
}

.hero-figure img {
  width: 100%;
  max-height: 640px;
  object-fit: cover;
  object-position: 50% 20%;
  filter: sepia(12%) saturate(105%);
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,8,8,0.15) 0%, rgba(20,8,8,0.55) 78%, rgba(20,8,8,0.85) 100%);
}

.hero-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px 24px 34px;
  text-align: center;
  color: var(--parchment);
}

.hero-text h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 9vw, 6.5rem);
  color: var(--parchment);
  margin: 0 0 6px;
  text-shadow: 0 3px 18px rgba(0,0,0,0.65);
  letter-spacing: 1px;
}

.hero-text .tagline {
  font-family: var(--font-heading);
  font-size: clamp(0.95rem, 2vw, 1.3rem);
  letter-spacing: 2px;
  color: var(--gold-light);
  margin: 0;
}

.hero-status {
  display: inline-block;
  margin-top: 16px;
  padding: 5px 16px;
  border: 1px solid var(--gold);
  border-radius: 2px;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  letter-spacing: 2px;
  color: var(--gold-light);
  background: rgba(0,0,0,0.25);
}

/* ---------- Section framework ---------- */

section {
  padding: 70px 0;
}

.section-alt {
  background: var(--parchment-dark);
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.02) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.02) 0 1px, transparent 1px 3px);
  border-top: 1px solid var(--parchment-line);
  border-bottom: 1px solid var(--parchment-line);
}

.section-eyebrow {
  display: block;
  text-align: center;
  font-family: var(--font-heading);
  letter-spacing: 3px;
  color: var(--clown-red);
  font-size: 0.85rem;
  margin-bottom: 4px;
}

.section-title {
  text-align: center;
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--ink);
  margin: 0 0 40px;
  letter-spacing: 1px;
}

/* rosette divider — the site's recurring signature motif */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0 auto;
  max-width: 480px;
  padding: 6px 0 30px;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 0;
  border-top: 2px double var(--gold);
}

.divider img {
  width: 46px;
  height: 46px;
  opacity: 0.9;
}

/* ---------- Summary ---------- */

.summary-wrap {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 46px;
  align-items: center;
}

.summary-card {
  background: var(--parchment);
  border: 1px solid var(--parchment-line);
  box-shadow: 0 0 0 6px var(--parchment), 0 0 0 7px var(--gold);
  padding: 36px 40px;
}

.summary-card p {
  margin: 0 0 18px;
}

.summary-card p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 3.6rem;
  float: left;
  line-height: 0.8;
  padding: 6px 10px 0 0;
  color: var(--clown-red);
}

.summary-card p:last-child { margin-bottom: 0; }

.summary-image {
  border: 1px solid var(--parchment-line);
  box-shadow: 0 0 0 6px var(--parchment), 0 0 0 7px var(--gold);
  overflow: hidden;
}

.summary-image img { width: 100%; }

/* ---------- Characters ---------- */

.cast-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}

.cast-card {
  background: var(--parchment);
  border: 1px solid var(--parchment-line);
  padding: 18px 18px 26px;
  text-align: center;
  position: relative;
  box-shadow: 0 6px 16px rgba(30,15,10,0.15);
}

.cast-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid var(--gold);
  pointer-events: none;
}

.cast-portrait {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--curtain-dark);
  margin-bottom: 16px;
}

.cast-portrait img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
}

.cast-portrait .alt-img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.cast-card.has-toggle:hover .alt-img { opacity: 1; }

.cast-name {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--clown-red);
  margin: 6px 0 2px;
}

.cast-role {
  font-family: var(--font-heading);
  letter-spacing: 2px;
  font-size: 0.8rem;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.cast-card p.bio {
  font-size: 0.98rem;
  margin: 0;
  text-align: left;
  padding: 0 4px;
}

.cast-hint {
  margin-top: 10px;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  letter-spacing: 1px;
  color: var(--sage);
}

/* ---------- Concept Art ---------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

/* Darwin — Turnaround and Circus Troupe Reference share a row, each taking half */
.gallery-item:nth-child(5),
.gallery-item:nth-child(6) {
  grid-column: span 2;
}

.gallery-item {
  position: relative;
  cursor: zoom-in;
}

.framed-art {
  position: relative;
  width: 100%;
  overflow: hidden; /* belt-and-braces: nothing outside the frame's own bounds ever shows */
}

.framed-art .art-photo {
  position: absolute;
  object-fit: cover; /* fills its inset opening exactly, cropping as needed */
  filter: sepia(6%);
}

.framed-art .art-photo.oval-clip {
  clip-path: ellipse(50% 50% at 50% 50%);
}

.framed-art .frame-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill; /* frame stretches to match the art's overall shape */
  pointer-events: none;
}

/* each .framed-art below gets its aspect-ratio set inline, matching
   the art's own native dimensions — the frame stretches to fit it */

.gallery-item figcaption {
  font-family: var(--font-heading);
  letter-spacing: 1px;
  font-size: 0.85rem;
  text-align: center;
  padding-top: 10px;
  color: var(--ink);
}

/* lightbox */

#lightbox {
  position: fixed;
  inset: 0;
  background: rgba(15, 6, 6, 0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 30px;
}

#lightbox.open { display: flex; }

#lightbox img {
  max-width: 90vw;
  max-height: 85vh;
  border: 2px solid var(--gold);
}

#lightbox .lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: var(--parchment);
  font-family: var(--font-heading);
  font-size: 1rem;
  letter-spacing: 2px;
  cursor: pointer;
  border: 1px solid var(--gold);
  padding: 6px 14px;
  background: rgba(0,0,0,0.3);
}

/* ---------- Watch ---------- */

.watch-panel {
  background: var(--curtain);
  border: 3px double var(--gold);
  padding: 50px 40px;
  text-align: center;
  color: var(--parchment);
  position: relative;
}

.ticket-badge {
  display: inline-block;
  font-family: var(--font-heading);
  letter-spacing: 3px;
  font-size: 0.85rem;
  color: var(--curtain-dark);
  background: var(--gold-light);
  padding: 6px 18px;
  margin-bottom: 18px;
  transform: rotate(-2deg);
}

.watch-panel h3 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  margin: 0 0 14px;
  color: var(--parchment);
}

.watch-panel p {
  max-width: 520px;
  margin: 0 auto 26px;
  color: var(--parchment-dark);
}

.watch-link-button {
  display: inline-block;
  font-family: var(--font-heading);
  letter-spacing: 1px;
  font-size: 1rem;
  color: var(--curtain-dark);
  background: var(--gold-light);
  border: 1px solid var(--gold);
  padding: 14px 30px;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}

.watch-link-button:hover {
  background: var(--parchment);
  transform: translateY(-1px);
}

/* ---------- Footer ---------- */

footer {
  background: var(--curtain-dark);
  color: var(--parchment-dark);
  text-align: center;
  padding: 34px 20px 26px;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  letter-spacing: 1px;
}

footer .counter {
  display: inline-flex;
  gap: 3px;
  margin: 14px 0;
}

footer .counter span {
  background: #111;
  color: #ffb84d;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  padding: 3px 6px;
  border: 1px solid #444;
  font-size: 0.9rem;
}

footer .fine-print {
  margin-top: 10px;
  color: var(--gold);
  opacity: 0.8;
}

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .summary-wrap { grid-template-columns: 1fr; }
  .cast-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .gallery { grid-template-columns: 1fr; }
  .site-nav .container { justify-content: center; text-align: center; }
  .summary-card { padding: 26px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cast-portrait .alt-img { transition: none; }
}