/* =====================================================================
   LE GOÛT ROUGE — V2  ·  vintage playbill / letterpress on aged paper
   ===================================================================== */

:root{
  --paper:      #f3e9d3;   /* the printed sheet */
  --paper-edge: #e2d4b6;   /* surround */
  --ink:        #221b12;   /* warm black ink */
  --ink-soft:   #5b4f3c;   /* secondary ink */
  --red:        #9c2117;   /* the one accent — oxblood */
  --red-deep:   #6f120c;
  --rule:       rgba(34,27,18,.34);

  --f-fat:   "Alfa Slab One", Georgia, serif;
  --f-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --f-cond:  "Oswald", "Arial Narrow", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  background-color:var(--paper-edge);
  background-image:
    radial-gradient(120% 120% at 50% 0%, rgba(255,250,238,.5), transparent 60%);
  color:var(--ink);
  font-family:var(--f-serif);
  line-height:1.6;
  padding:clamp(0px,2vw,2.4rem) 0;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
em,i{ font-style:italic; }

.back{
  position:fixed; top:.7rem; left:.8rem; z-index:30;
  font-family:var(--f-cond); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem;
  color:var(--paper); background:var(--ink); padding:.45em .85em; text-decoration:none;
}
.back:hover{ background:var(--red); }

/* ---------- the sheet ---------- */
.sheet{
  position:relative;
  max-width:900px;
  margin:0 auto;
  background:var(--paper);
  padding:clamp(1.6rem,5vw,4.5rem) clamp(1.2rem,5vw,4.2rem) clamp(2rem,5vw,3.5rem);
  box-shadow:0 2px 0 rgba(255,255,255,.4) inset, 0 18px 50px -25px rgba(34,27,18,.55);
  border:1px solid rgba(34,27,18,.18);
  animation:sheet-in .7s ease both;
}
/* faint paper grain */
.sheet::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.5  0 0 0 0 0.45  0 0 0 0 0.35  0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
}
.sheet > *{ position:relative; z-index:1; }
@keyframes sheet-in{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
@media (prefers-reduced-motion: reduce){ .sheet{ animation:none; } }

/* ---------- rules & ornaments ---------- */
.rule-d{ border-top:4px double var(--rule); margin:1.6rem 0; }
.orn,.act-orn,.colo-orn{ text-align:center; color:var(--red); }
.act-orn{ font-size:1.5rem; margin:.4rem 0 1.6rem; }

/* =====================================================================
   MASTHEAD / PLAYBILL
   ===================================================================== */
.bill{ text-align:center; }
.venue{
  font-family:var(--f-cond); font-weight:400; text-transform:uppercase;
  letter-spacing:.22em; font-size:.82rem; color:var(--red);
}
.over{
  font-family:var(--f-cond); font-weight:300; text-transform:uppercase;
  letter-spacing:.3em; font-size:.72rem; line-height:1.5; color:var(--ink-soft); margin-top:1.4rem;
}
.title{
  font-family:var(--f-fat); font-weight:400; text-transform:uppercase;
  font-size:clamp(2.8rem,10.5vw,6.7rem); line-height:.92; letter-spacing:.005em;
  margin:1rem 0 .25rem; color:var(--ink);
  text-shadow:0 1px 0 rgba(255,255,255,.4);
}
.title .rouge{ color:var(--red); }
.title-sub{ font-family:var(--f-serif); font-style:italic; font-size:clamp(1rem,2.4vw,1.3rem); color:var(--ink-soft); }

.sign{ width:min(440px,78%); margin:1.8rem auto .4rem; }
.sign img{ width:100%; border:1px solid var(--ink); box-shadow:0 10px 26px -16px rgba(34,27,18,.6); }
.sign figcaption,.programm span{ font-family:var(--f-cond); }
.sign figcaption{ font-weight:300; font-size:.8rem; letter-spacing:.05em; color:var(--ink-soft); margin-top:.6rem; }

.lead-bill{
  font-family:var(--f-serif); font-size:clamp(1.12rem,.95rem+.6vw,1.34rem);
  line-height:1.6; max-width:54ch; margin:1.7rem auto 0; color:var(--ink);
}
.orn{ margin-top:1.6rem; font-family:var(--f-cond); text-transform:uppercase; letter-spacing:.24em; font-size:.78rem; }

.cta{
  display:inline-block; margin:1.5rem 0 .4rem; text-decoration:none;
  font-family:var(--f-cond); font-weight:500; text-transform:uppercase; letter-spacing:.18em;
  font-size:.9rem; color:var(--paper); background:var(--ink);
  padding:.75em 1.5em; transition:background .25s, transform .25s;
}
.cta:hover,.cta:focus-visible{ background:var(--red); transform:translateY(-1px); }

.programm{
  font-family:var(--f-cond); text-transform:uppercase; letter-spacing:.12em;
  font-size:.74rem; color:var(--ink-soft); display:flex; flex-wrap:wrap;
  justify-content:center; align-items:center; gap:.55em; margin-top:.4rem;
}
.programm span{ color:var(--red); font-weight:500; }
.programm i{ color:var(--rule); font-style:normal; }
.programm a{ text-decoration:none; border-bottom:1px solid transparent; padding-bottom:1px; transition:color .2s,border-color .2s; }
.programm a:hover{ color:var(--red); border-bottom-color:var(--red); }

/* =====================================================================
   ACTS
   ===================================================================== */
.act{ margin-top:clamp(3rem,7vw,5.5rem); }
.act-no{
  font-family:var(--f-cond); font-weight:400; text-transform:uppercase;
  letter-spacing:.34em; font-size:.78rem; color:var(--red); text-align:center;
}
.act-h{
  font-family:var(--f-serif); font-weight:900; font-optical-sizing:auto;
  font-size:clamp(2rem,5.5vw,3.3rem); line-height:1.04; text-align:center;
  color:var(--ink); margin-top:.35rem; letter-spacing:.005em;
}

.body{
  font-family:var(--f-serif); font-weight:400;
  font-size:clamp(1.14rem,.95rem+.55vw,1.32rem); line-height:1.66;
  color:var(--ink); max-width:58ch; margin:0 auto; text-align:justify; hyphens:auto;
}
.body + .plate,.body + .plates-3,.body + .tafeln{ margin-top:2.4rem; }
.dropcap::first-letter{
  font-family:var(--f-serif); font-weight:900; float:left; color:var(--red);
  font-size:4.4em; line-height:.72; padding:.06em .14em 0 0;
}
.sc{ font-variant:normal; letter-spacing:.12em; font-weight:600; }

/* ---------- plates (duotone printed figures) ---------- */
.plate{ margin:0; }
.plate img{
  width:100%; border:1px solid var(--ink);
  box-shadow:0 8px 22px -16px rgba(34,27,18,.55);
  cursor:zoom-in;
}
.plate figcaption{
  font-family:var(--f-cond); font-weight:300; font-size:.82rem; letter-spacing:.03em;
  color:var(--ink-soft); text-align:center; margin-top:.6rem;
}
.plate figcaption b{ font-weight:600; color:var(--red); }
.plate--wide{ max-width:720px; margin:0 auto; }

.plates-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.5vw,1.8rem); }
.plates-3--menu{ margin-top:2.6rem; }
.tafeln{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.5vw,1.8rem); }
@media (max-width:760px){
  .plates-3{ grid-template-columns:1fr 1fr; }
  .tafeln{ grid-template-columns:1fr 1fr; }
}
@media (max-width:460px){
  .plates-3,.tafeln{ grid-template-columns:1fr; }
}

/* =====================================================================
   MENU / SPEISENFOLGE
   ===================================================================== */
.act--menu{ }
.menu-note{
  font-family:var(--f-serif); font-style:italic; text-align:center;
  color:var(--ink-soft); max-width:46ch; margin:1rem auto 0; font-size:1.05rem;
}
.speisen{ list-style:none; max-width:560px; margin:2.2rem auto 0; text-align:center; }
.speisen li{ margin:1.35rem 0; }
.sp-no{ font-family:var(--f-serif); font-style:italic; font-size:1.15rem; color:var(--red); margin-right:.5em; }
.sp-name{ font-family:var(--f-cond); font-weight:500; text-transform:uppercase; letter-spacing:.16em; font-size:1.06rem; color:var(--ink); }
.sp-dots{ display:none; }
.sp-desc{ display:block; font-family:var(--f-serif); font-style:italic; color:var(--ink-soft); font-size:1.1rem; margin-top:.25rem; }
.speisen li:not(:last-child)::after{ content:"❦"; display:block; color:var(--red); opacity:.65; margin-top:1.25rem; font-size:.85rem; }

/* =====================================================================
   END + COLOPHON
   ===================================================================== */
.act--end{ text-align:center; }
.end-body{ text-align:center; max-width:50ch; }
.curtain{ font-family:var(--f-serif); font-style:italic; color:var(--red); font-size:1.3rem; margin-top:1.6rem; }

.colophon{ margin-top:clamp(3rem,7vw,5rem); text-align:center; }
.colo-title{ font-family:var(--f-fat); text-transform:uppercase; font-size:clamp(1.5rem,4vw,2.2rem); color:var(--ink); }
.colo-line{ font-family:var(--f-cond); text-transform:uppercase; letter-spacing:.16em; font-size:.78rem; color:var(--red); margin-top:.5rem; }
.colo-fine{ font-family:var(--f-serif); font-style:italic; color:var(--ink-soft); margin-top:.5rem; }
.colo-orn{ margin-top:1.1rem; letter-spacing:.4em; }

/* =====================================================================
   PLATE VIEWER (lightbox)
   ===================================================================== */
.viewer{
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  background:rgba(28,22,14,.92); padding:clamp(1rem,5vw,3rem); cursor:zoom-out;
  opacity:0; transition:opacity .25s;
}
.viewer.open{ opacity:1; }
.viewer[hidden]{ display:none; }
.viewer img{ max-width:100%; max-height:90vh; border:2px solid var(--paper); box-shadow:0 20px 60px -20px #000; }