/* ACME Stage Company — draft 4: playbill serif, monochrome thumbnails */

:root{
  --charcoal:  #23211f;
  --gray:      #dcd9d3;
  --gray-2:    #cbc7c0;
  --paint:     #f2eee6;
  --ink:       #1c1a18;
  --muted:     #6d6862;
  --rail-w:    33%;
  --pad:       clamp(1.75rem, 3.2vw, 3.25rem);

  --serif:  "Old Standard TT", Georgia, serif;     /* playbill modern-face */
  --gothic: "Archivo Narrow", Arial, sans-serif;   /* labels, forms, listings */

  --tooth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23t)'/%3E%3C/svg%3E");
  --mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='700' height='700' filter='url(%23m)'/%3E%3C/svg%3E");
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--gray);
  color:var(--ink);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.62;
}

/* ---------- left rail: fixed ---------- */
.rail{
  position:fixed; inset:0 auto 0 0;
  width:var(--rail-w);
  background:var(--charcoal);
  color:var(--paint);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:var(--pad);
  isolation:isolate;
}
.rail::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background-image:
    radial-gradient(120% 80% at 50% 38%, rgba(0,0,0,0) 45%, rgba(0,0,0,.42) 100%),
    var(--tooth), var(--mottle);
  background-size:auto, 180px 180px, 700px 700px;
  opacity:.30;
  mix-blend-mode:overlay;
}
.rail > *{position:relative; z-index:3;}
.logo{width:100%; max-width:380px; height:auto; display:block;}

.rail-bottom .eyebrow{color:#8f8a83;}
.rail address{
  font-style:normal; display:flex; flex-direction:column; gap:.35rem;
  font-family:var(--gothic); font-size:.95rem; letter-spacing:.05em;
}
.rail a{color:var(--paint); text-decoration:none; border-bottom:1px solid #55504a;}
.rail a:hover{border-bottom-color:var(--paint);}
.rail span{color:#a29c94;}
.fineprint{
  margin:1.6rem 0 0; font-family:var(--gothic);
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:#6d6760;
}

/* ---------- right column: scrolls ---------- */
.stage{
  margin-left:var(--rail-w);
  min-height:100vh;
  padding:var(--pad);
  background:var(--gray);
  position:relative;
}
.stage::before{
  content:""; position:fixed; inset:0 0 0 var(--rail-w); pointer-events:none; z-index:0;
  background-image:var(--tooth), var(--mottle);
  background-size:180px 180px, 700px 700px;
  opacity:.16;
  mix-blend-mode:multiply;
}
.panel{max-width:62rem; position:relative; z-index:1;}

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--gothic); font-weight:600;
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted); margin:0 0 1rem;
}
h1,h2{
  font-family:var(--serif); font-weight:700;
  text-transform:uppercase; letter-spacing:.07em; line-height:1.24;
  margin:0 0 1.2rem;
}
h1{font-size:clamp(1.35rem,2.2vw,1.95rem); max-width:24ch;}
h2{font-size:clamp(1.15rem,1.6vw,1.45rem);}

.group{
  font-family:var(--gothic); font-weight:600;
  font-size:.88rem; letter-spacing:.18em; text-transform:uppercase;
  margin:3rem 0 1.15rem; padding-bottom:.55rem;
  border-bottom:2px solid var(--ink);
}
.group em{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:1rem; text-transform:none; letter-spacing:0; color:var(--muted);
}
.lede{font-size:1.12rem; max-width:44rem;}
p{max-width:44rem;}

hr.jump{border:0; border-top:2px solid var(--ink); margin:3.5rem 0 3rem; max-width:62rem;}

.centered{text-align:center; max-width:none; margin-left:auto; margin-right:auto;}
@media (min-width:821px){
  h1.centered{white-space:nowrap;}
}
@media (max-width:820px){
  h1.centered{white-space:normal; overflow-wrap:break-word; text-wrap:balance;}
}

/* ---------- thumbnail grid ---------- */
.grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1.35rem;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
}
.grid a{
  display:block; text-decoration:none; color:inherit;
  background:var(--gray-2); padding:.65rem;
  border:1px solid #b9b4ac;
  transition:transform .15s ease, background .15s ease;
}
.grid a:hover,.grid a:focus-visible{background:#fff; transform:translateY(-3px);}
.grid img{
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:#b0aba3;
  filter:grayscale(1) sepia(.18) contrast(.9) brightness(1.09);
  opacity:.86;
  transition:filter .22s ease, opacity .22s ease;
}
.grid a:hover img,
.grid a:focus-visible img{filter:none; opacity:1;}
.grid .t{
  display:block; margin-top:.6rem;
  font-family:var(--gothic); font-weight:600;
  font-size:.9rem; letter-spacing:.07em; text-transform:uppercase; line-height:1.28;
}
.grid .m{
  display:block; margin-top:.12rem;
  font-family:var(--serif); font-style:italic; font-size:.9rem; color:var(--muted);
}

a:focus-visible{outline:2px solid #b4522f; outline-offset:3px;}

/* ---------- stack on narrow screens ---------- */
@media (max-width:820px){
  .rail{position:static; width:100%; gap:2.5rem;}
  .stage{margin-left:0;}
  .stage::before{inset:0;}
  .rail-top{text-align:center;}
  .logo{display:inline-block; max-width:300px;}
  .plate{margin-left:auto; margin-right:auto;}
}
@media (hover:none){
  .grid img{filter:none; opacity:1;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .grid a,.grid img{transition:none;}
}

/* ================= detail pages ================= */
.backlink{
  display:inline-block; margin-top:1.4rem;
  font-family:var(--gothic); font-weight:600;
  font-size:.74rem; letter-spacing:.22em; text-transform:uppercase;
  color:#a29c94; text-decoration:none; border-bottom:1px solid #55504a;
}
.backlink:hover{color:var(--paint); border-bottom-color:var(--paint);}

.sub{
  font-style:italic; font-size:1.08rem; color:var(--muted);
  margin:-.7rem 0 1.6rem; max-width:44rem;
}
.plate{
  display:block; width:100%; max-width:30rem; height:auto;
  margin:0 0 1.8rem; border:1px solid #b9b4ac; background:var(--gray-2);
}
.plate--wide{max-width:62rem;}

.cols{
  display:grid; gap:2.2rem 3rem;
  grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));
  max-width:62rem;
}
.cols > div{min-width:0;}

.sect{
  font-family:var(--gothic); font-weight:600;
  font-size:.8rem; letter-spacing:.19em; text-transform:uppercase;
  margin:2rem 0 .7rem; padding-bottom:.4rem;
  border-bottom:1px solid #b0aba3;
}
.sect:first-child{margin-top:0;}

.dl{margin:0 0 .4rem; display:grid; grid-template-columns:max-content 1fr; gap:.15rem .8rem;}
.dl dt{
  font-family:var(--gothic); font-weight:600;
  font-size:.82rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); padding-top:.22rem;
}
.dl dd{margin:0;}

.stack{list-style:none; margin:0 0 .4rem; padding:0;}
.stack li{padding:.1rem 0;}
.note{font-style:italic; color:var(--muted); font-size:.95rem; margin:.1rem 0 .6rem;}

.gallery{
  list-style:none; margin:1rem 0 0; padding:0;
  display:grid; gap:1.1rem;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  max-width:62rem;
}
.gallery a{display:block; border:1px solid #b9b4ac; background:var(--gray-2); padding:.5rem;}
.gallery img{
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:#b0aba3;
  filter:grayscale(1) sepia(.18) contrast(.9) brightness(1.09);
  opacity:.86; transition:filter .22s ease, opacity .22s ease;
}
.gallery a:hover img,.gallery a:focus-visible img{filter:none; opacity:1;}
@media (hover:none){ .gallery img{filter:none; opacity:1;} }
@media (prefers-reduced-motion:reduce){ .gallery img{transition:none;} }

/* ========== body.archive — staged production record, set as a program ========== */
.archive .stage{font-size:.95rem;}
.archive .panel{max-width:64rem; display:flow-root;}

/* category marker sits above the rule, full width */
.archive .catmark{text-align:center; max-width:64rem; margin:0 0 .55rem;}

/* logo plate left, head + blurb filling the column to its right */
.archive .showrow{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:1.5rem 3rem; align-items:start; max-width:64rem;
  border-top:3px solid var(--ink); padding-top:2.1rem;
}
.archive .showrow .plate{max-width:100%; float:none; margin:.16rem 0 0;}
.archive .platecol{min-width:0;}

/* bylines stack under the plate — narrow column, so no leaders */
.archive .bylines{margin:1.1rem 0 0;}
.archive .bylines li{
  display:block; padding:.4rem 0;
  border-top:1px solid #b0aba3; line-height:1.35;
}
.archive .bylines li:last-child{border-bottom:1px solid #b0aba3;}
.archive .bylines .r{display:block; white-space:normal; margin-bottom:.05rem;}
.archive .bylines .ldr{display:none;}
.archive .bylines .n{display:block; white-space:normal;}
.archive .blurb{min-width:0;}
.archive .blurb > *{max-width:none;}

.archive .head{
  text-align:center;
  border-bottom:1px solid var(--ink);
  padding:0 0 .9rem; margin:0 0 1.2rem;
}
.archive .head h1{margin:0 0 .4rem;}
.archive .head .sub{margin:0; text-align:center; font-size:1rem;}

.archive .lede{font-size:1.02rem;}

@media (max-width:560px){
  .archive .showrow{grid-template-columns:1fr; gap:1.4rem;}
  .archive .showrow .plate{max-width:17rem; margin:0 auto 1.2rem;}
}
.archive h2{text-align:center; margin-bottom:1.4rem;}

.archive .cols{gap:1.5rem 3rem; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));}
.archive .sect{
  font-size:.74rem; letter-spacing:.21em; margin:1.7rem 0 .55rem;
  border-bottom:1px solid var(--ink);
}
.archive .stack li{padding:.06rem 0; line-height:1.42;}
.archive p{line-height:1.45; margin:.5rem 0;}
.archive .note{font-size:.88rem; margin:.15rem 0 .5rem;}

/* role .......... player */
.cast{list-style:none; margin:0 0 .3rem; padding:0;}
.cast li{display:flex; align-items:baseline; gap:.45rem; padding:.09rem 0; line-height:1.4;}
.cast .r{
  font-family:var(--gothic); font-weight:600;
  font-size:.74rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap;
}
.cast .ldr{flex:1 1 auto; border-bottom:1px dotted #a29c93; transform:translateY(-.22em); min-width:1.2rem;}
.cast .n{white-space:nowrap;}
.cast li.wrap{display:block;}
.cast li.wrap .ldr{display:none;}

/* ========== body.booking — concert page for presenters ========== */
.booking .lede{font-size:1.18rem; max-width:46rem;}
.booking p{max-width:46rem;}
.booking .plate--wide{max-width:100%; margin-bottom:2rem;}
.booking .cols{gap:2.4rem 3.5rem;}
.booking .sect{font-size:.82rem;}
.booking .stack li{padding:.14rem 0;}

/* at-a-glance strip for presenters — carries the show's own wording */
.spec{
  list-style:none; margin:1.8rem 0; padding:.95rem 0; max-width:62rem;
  border-top:3px solid var(--ink); border-bottom:1px solid var(--ink);
  display:grid; gap:.5rem 2.5rem;
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
}
.spec li{
  font-family:var(--gothic); font-size:.9rem; letter-spacing:.02em;
  line-height:1.4; margin:0;
}
.booking .gallery{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}

/* scene / song blocks in the archival record */
.scenes{list-style:none; margin:0 0 .3rem; padding:0;}
.scenes > li{padding:.4rem 0; border-top:1px solid #c2bdb5;}
.scenes > li:first-child{border-top:0; padding-top:0;}
.scenes .sc{
  display:block; font-family:var(--gothic); font-weight:600;
  font-size:.74rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); line-height:1.35;
}
.scenes .sg{display:block; padding-left:1rem; line-height:1.38;}