/* Run Scenario  /  The Last Curtain Call
   Concept: a Victorian playbill for an AI murder mystery you actually play.
   Gaslit theatre black, oxblood curtain, gilt, gaslight amber, playbill cream.
   Faces: Playfair Display (poster), Oswald (bill bars), Special Elite
   (case file), EB Garamond (body). No Porchlight tokens; this is the
   theatre's own bill. */

:root{
  --house:#16100d;        /* the darkened house */
  --house-2:#1d1612;      /* a lit panel */
  --lift:#251b15;
  --cream:#ece0c8;        /* playbill paper */
  --cream-2:#d8c8a6;      /* aged edge */
  --ink:#e7dcc4;          /* body on dark */
  --dim:#a08d72;          /* secondary */
  --faint:#6f6047;        /* faintest */
  --oxblood:#7e2428;      /* curtain red */
  --oxblood-2:#9a3036;
  --gilt:#bf9a52;         /* gilt rules + accent */
  --gilt-2:#d8b56a;       /* lit gilt */
  --gas:#e8b964;          /* gaslight flame */
  --hair:rgba(231,220,196,.16);
  --hair-2:rgba(231,220,196,.30);
  --gilt-line:rgba(191,154,82,.55);
  --poster:"Playfair Display",Georgia,serif;
  --bill:"Oswald",Impact,sans-serif;
  --type:"Special Elite","Courier New",monospace;
  --body:"EB Garamond",Georgia,serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--house); color:var(--ink);
  font:400 19px/1.65 var(--body); -webkit-font-smoothing:antialiased;
  position:relative; min-height:100vh;
}
/* aged-paper grain + gaslight vignette, every screen */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 80% at 50% 8%, rgba(232,185,100,.10), rgba(232,185,100,0) 46%),
             radial-gradient(140% 100% at 50% 120%, rgba(0,0,0,.55), rgba(0,0,0,0) 60%);
}
.wrap{position:relative; z-index:1; max-width:980px; margin:0 auto; padding:0 26px 96px}
a{color:var(--gilt-2); text-underline-offset:3px; text-decoration-thickness:1px}
a:hover{color:var(--gas)}

/* ---- top bill bar / nav ---- */
.marquee{
  display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap;
  padding:16px 0; border-bottom:1px solid var(--gilt-line);
}
.troupe{display:flex; align-items:baseline; gap:12px}
.troupe .rs{font:700 17px/1 var(--poster); letter-spacing:.02em; color:var(--cream)}
.troupe .est{font:500 9px/1.3 var(--bill); letter-spacing:.22em; text-transform:uppercase; color:var(--faint)}
nav.bills{font:500 12px/1 var(--bill); letter-spacing:.14em; text-transform:uppercase; display:flex; gap:20px; flex-wrap:wrap}
nav.bills a{color:var(--dim); text-decoration:none; padding-bottom:3px; border-bottom:1px solid transparent}
nav.bills a:hover{color:var(--gas); border-color:var(--gilt-line)}
nav.bills a[aria-current]{color:var(--gas); border-color:var(--gas)}

/* ---- the playbill hero ---- */
.playbill{
  text-align:center; margin:38px auto 18px; max-width:760px;
  border:2px solid var(--gilt-line); padding:46px 32px 40px; position:relative;
  background:linear-gradient(rgba(126,36,40,.05), rgba(0,0,0,0));
}
.playbill::before{ /* inner gilt hairline */
  content:""; position:absolute; inset:7px; border:1px solid rgba(191,154,82,.28); pointer-events:none;
}
.playbill .presents{font:500 12px/1.4 var(--bill); letter-spacing:.4em; text-transform:uppercase; color:var(--gilt); margin:0 0 8px}
.playbill .rs-name{font:600 14px/1.3 var(--bill); letter-spacing:.34em; text-transform:uppercase; color:var(--dim); margin:0 0 26px}
.playbill h1{
  font:900 clamp(42px,8.5vw,86px)/.98 var(--poster); margin:0 0 6px; color:var(--cream);
  letter-spacing:.005em;
}
.playbill h1 .the{display:block; font:italic 400 clamp(20px,3.2vw,30px)/1 var(--poster); color:var(--gilt-2); letter-spacing:.06em; margin-bottom:10px}
.playbill .scene{font:italic 400 21px/1.5 var(--body); color:var(--ink); margin:22px auto 6px; max-width:40ch}
.playbill .where{font:500 11px/1.6 var(--bill); letter-spacing:.22em; text-transform:uppercase; color:var(--gilt); margin:18px 0 30px}
.playbill .rule{display:flex; align-items:center; gap:14px; justify-content:center; margin:24px auto; max-width:50%}
.playbill .rule::before,.playbill .rule::after{content:""; height:1px; flex:1; background:var(--gilt-line)}
.playbill .rule span{font:500 10px/1 var(--bill); letter-spacing:.3em; text-transform:uppercase; color:var(--faint)}

.curtain-btn{
  display:inline-block; font:600 14px/1 var(--bill); letter-spacing:.16em; text-transform:uppercase;
  padding:17px 38px; border:1px solid var(--gilt); color:#1a120c; text-decoration:none;
  background:var(--gilt); border-radius:1px; transition:background .14s ease,border-color .14s ease;
}
.curtain-btn:hover{background:var(--gilt-2); border-color:var(--gilt-2); color:#1a120c}
.ghost-btn{
  display:inline-block; font:600 13px/1 var(--bill); letter-spacing:.14em; text-transform:uppercase;
  padding:16px 30px; border:1px solid var(--hair-2); color:var(--cream); text-decoration:none;
  border-radius:1px; transition:background .12s ease,border-color .12s ease;
}
.ghost-btn:hover{background:var(--lift); border-color:var(--dim)}
.bill-cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:6px}

/* ---- sections ---- */
.sec{padding:54px 0 6px}
.sec > h2{
  font:600 13px/1 var(--bill); letter-spacing:.2em; text-transform:uppercase; color:var(--gilt);
  margin:0 0 8px; display:flex; align-items:center; gap:14px; justify-content:center; text-align:center;
}
.sec > h2::before,.sec > h2::after{content:""; flex:1; max-width:120px; height:1px; background:var(--gilt-line)}
.sec .sub{font:400 19px/1.55 var(--body); color:var(--dim); max-width:56ch; margin:14px auto 30px; text-align:center}

/* the play in three acts */
.acts{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--hair); max-width:880px; margin:0 auto}
.act{padding:26px 24px; border-right:1px solid var(--hair); text-align:center}
.act:last-child{border-right:none}
.act .roman{font:700 15px/1 var(--poster); color:var(--gilt-2); letter-spacing:.08em}
.act h3{font:700 23px/1.15 var(--poster); color:var(--cream); margin:14px 0 8px}
.act p{font:400 16px/1.55 var(--body); color:var(--dim); margin:0}

/* dramatis / mechanics rows */
.dram{max-width:720px; margin:0 auto; border-top:1px solid var(--hair-2)}
.role{display:grid; grid-template-columns:auto 1fr; gap:6px 22px; padding:18px 0; border-bottom:1px solid var(--hair); align-items:baseline}
.role .v{font:500 11px/1.5 var(--bill); letter-spacing:.14em; text-transform:uppercase; color:var(--gas); white-space:nowrap}
.role .d h4{font:700 19px/1.2 var(--poster); color:var(--cream); margin:0}
.role .d p{font:400 15px/1.55 var(--body); color:var(--dim); margin:5px 0 0}

/* case-file / typewriter note */
.casefile{
  max-width:640px; margin:30px auto; border:1px solid var(--hair-2); background:var(--house-2);
  padding:24px 26px; position:relative;
}
.casefile .stamp{font:400 11px/1.4 var(--bill); letter-spacing:.2em; text-transform:uppercase; color:var(--oxblood-2); border:1px solid rgba(154,48,54,.5); padding:4px 8px; display:inline-block; margin-bottom:14px}
.casefile p{font:400 16px/1.7 var(--type); color:var(--ink); margin:0}

/* prose pages */
.prose{max-width:62ch; margin:0 auto}
.prose p{margin:0 0 18px}
.prose h3{font:700 22px/1.2 var(--poster); color:var(--cream); margin:32px 0 10px; text-align:center}
.lead{font:italic 400 23px/1.5 var(--body); color:var(--ink); max-width:52ch; margin:6px auto 26px; text-align:center}

/* curtain entry page */
.stage{min-height:46vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px 0}
.stage .mount{margin-top:26px; border:1px dashed var(--hair-2); padding:18px 22px; color:var(--dim); font:400 14px/1.6 var(--type); max-width:52ch}

/* footer */
footer.house{border-top:1px solid var(--gilt-line); margin-top:70px; padding-top:20px; text-align:center}
.house .row{display:flex; justify-content:center; gap:18px; flex-wrap:wrap; font:500 11px/1.7 var(--bill); letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}
.house .row a{color:var(--dim); text-decoration:none}
.house .row a:hover{color:var(--gas)}
.house .fine{font:italic 400 15px/1.5 var(--body); color:var(--faint); margin-top:14px}

@media (max-width:680px){
  .acts{grid-template-columns:1fr}
  .act{border-right:none; border-bottom:1px solid var(--hair)}
  .playbill{padding:34px 20px 30px}
  .playbill .rule{max-width:70%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}