@font-face {
  font-family: 'Alfa Slab One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/AlfaSlabOne-normal-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/LibreCaslonText-italic-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/LibreCaslonText-normal-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/LibreCaslonText-normal-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}/* latin-ext subsets, built in-house from the OFL TTFs */
@font-face {
  font-family: 'Alfa Slab One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/AlfaSlabOne-normal-400-ext.woff) format('woff');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/LibreCaslonText-normal-400-ext.woff) format('woff');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/LibreCaslonText-italic-400-ext.woff) format('woff');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/LibreCaslonText-normal-700-ext.woff) format('woff');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* The Weird Past — penny dreadful / magic-lantern show (v2). Site-specific. */
:root{--mustard:#E5B53A;--bill:#F6E6A8;--ink:#1D140C;--ink2:#2E2215;--brown:#5A3F1E;--red:#A8231B;--red-dk:#7A1710;
--slab:"Alfa Slab One",Rockwell,"Roboto Slab",serif;--body:"Libre Caslon Text",Georgia,serif;--mx:clamp(16px,4vw,64px)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--mustard);color:var(--ink);font:400 1.1rem/1.65 var(--body)}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:5px}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 7px var(--bill)}
.skip{position:absolute;left:-999px;top:8px;z-index:99;background:var(--ink);color:var(--bill);padding:8px 14px}
.skip:focus{left:12px}
h1,h2,h3{font-family:var(--slab);font-weight:400;line-height:.95;margin:0;letter-spacing:-.01em}
button{font:inherit;cursor:pointer}
/* ---------- mast + ticket stubs ---------- */
.mast{display:flex;align-items:center;gap:20px 32px;padding:14px var(--mx);border-bottom:4px double var(--ink);flex-wrap:wrap}
.logo{font-family:var(--slab);font-size:clamp(1.5rem,2.4vw,2rem);text-decoration:none;line-height:1;white-space:nowrap}
.logo span{color:var(--red-dk)}
.stubs{display:flex;gap:10px;margin-left:auto;flex-wrap:wrap}
.stub{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:52px;padding:6px 18px 6px 22px;background:var(--bill);text-decoration:none;font-family:var(--slab);font-size:1rem;line-height:1.1;
 -webkit-mask:radial-gradient(circle at 0 50%,transparent 7px,#000 7.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 7px,#000 7.5px) right/51% 100% no-repeat;
 mask:radial-gradient(circle at 0 50%,transparent 7px,#000 7.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 7px,#000 7.5px) right/51% 100% no-repeat;
 transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.stub::before{content:"";position:absolute;left:12px;top:6px;bottom:6px;border-left:2px dashed var(--brown);opacity:.5}
.stub small{font-family:var(--body);font-style:italic;font-size:.82rem;color:var(--brown)}
.stub:nth-child(odd):hover{transform:rotate(-3deg) translateY(2px)}
.stub:nth-child(even):hover{transform:rotate(3deg) translateY(2px)}
.stub[aria-current]{background:var(--ink);color:var(--bill)}
.stub[aria-current] small{color:var(--mustard)}
.stub[aria-current]::before{border-color:var(--mustard)}
.stub.house{background:transparent;box-shadow:inset 0 0 0 2px var(--ink);-webkit-mask:none;mask:none;border-radius:4px}
/* ---------- show: poster + lantern ---------- */
.show{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(20px,4vw,56px);align-items:center;padding:clamp(24px,4vw,56px) var(--mx)}
.sb-k{font-style:italic;color:var(--red-dk);font-size:1.15rem;margin:0 0 10px}
.show h1{font-size:clamp(4.6rem,11vw,10.5rem);line-height:.84;letter-spacing:-.025em}
.sb-d{font-size:clamp(1.05rem,1.4vw,1.25rem);max-width:40ch;margin:22px 0 0}
.lantern{position:relative}
.screen{position:relative;aspect-ratio:4/3;border-radius:50%/46%;overflow:hidden;background:var(--ink);box-shadow:0 0 0 10px var(--ink),0 0 0 14px var(--mustard),0 0 0 18px var(--ink)}
.slide{position:absolute;inset:0;margin:0;clip-path:circle(0% at 50% 50%);transition:clip-path .9s cubic-bezier(.6,0,.2,1)}
.slide.on{clip-path:circle(75% at 50% 50%);z-index:2}
.slide.out{z-index:1;clip-path:circle(75% at 50% 50%)}
.slide img,.slide svg{width:100%;height:100%;object-fit:cover;filter:sepia(.35) contrast(1.05)}
.slide figcaption{position:absolute;left:0;right:0;bottom:0;padding:60px 14% 9%;text-align:center;background:linear-gradient(transparent,rgba(29,20,12,.92) 55%)}
.s-sec{display:block;font-style:italic;color:var(--mustard);font-size:.98rem}
.slide figcaption a{font-family:var(--slab);font-size:clamp(1.05rem,1.8vw,1.6rem);line-height:1.1;color:var(--bill);text-decoration:none}
.slide figcaption a:hover{text-decoration:underline;text-decoration-color:var(--mustard)}
.l-ctl{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:30px}
.l-ctl button,.cab-btn button{width:46px;height:46px;border-radius:50%;border:3px solid var(--ink);background:var(--bill);color:var(--ink);display:grid;place-items:center;padding:0}
.l-ctl button:hover,.cab-btn button:hover{background:var(--ink);color:var(--bill)}
.l-ctl svg,.cab-btn svg{width:20px;height:20px}
.l-play .i-play{display:none}.l-play[aria-pressed=true] .i-play{display:inline}.l-play[aria-pressed=true] .i-pause{display:none}
.l-count{font-family:var(--slab);min-width:4.5em;text-align:center}
/* ---------- cabinet ---------- */
.cabinet{background:var(--ink);color:var(--bill);padding:clamp(48px,6vw,88px) 0 clamp(40px,5vw,72px)}
.cabinet header{display:grid;grid-template-columns:1fr auto;gap:6px 24px;align-items:end;padding:0 var(--mx) 28px}
.cabinet h2{font-size:clamp(2.8rem,6vw,5.6rem);color:var(--mustard)}
.cabinet header p{margin:0;grid-column:1;font-style:italic}
.cab-btn{grid-column:2;grid-row:1/3;display:flex;gap:10px}
.cab-btn button{border-color:var(--mustard);background:var(--ink);color:var(--mustard)}
.cab-btn button:hover{background:var(--mustard);color:var(--ink)}
.shelf{list-style:none;margin:0;padding:6px var(--mx) 30px;display:grid;grid-auto-flow:column;grid-auto-columns:clamp(240px,24vw,330px);gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--mx);scrollbar-color:var(--mustard) var(--ink2);border-bottom:10px solid var(--ink2);box-shadow:inset 0 -10px 0 #3B2B18}
.shelf li{scroll-snap-align:start}
.jar{display:flex;flex-direction:column;height:100%;text-decoration:none;color:var(--bill);background:var(--ink2);border:2px solid #4A3820;padding:14px 14px 18px;border-radius:120px 120px 6px 6px}
.j-no{font-family:var(--slab);font-size:.9rem;color:var(--mustard);text-align:center;margin-bottom:10px}
.j-pic{display:block;aspect-ratio:1;border-radius:50%;overflow:hidden;border:4px solid var(--mustard);margin:0 auto 14px;width:78%}
.j-pic img,.j-pic svg{width:100%;height:100%;object-fit:cover;filter:sepia(.3);transition:filter .4s}
.jar:hover .j-pic img,.jar:hover .j-pic svg{filter:none}
.j-t{font-family:var(--slab);font-size:1.2rem;line-height:1.15}
.jar:hover .j-t{text-decoration:underline;text-decoration-color:var(--mustard);text-decoration-thickness:3px}
.j-f{font-style:italic;font-size:.92rem;margin-top:auto;padding-top:10px;color:#E3D29A}
/* ---------- playbill ---------- */
.playbill{padding:clamp(48px,7vw,100px) var(--mx)}
.pb-in{max-width:980px;margin:0 auto;background:var(--bill);padding:clamp(24px,5vw,64px);border:3px solid var(--ink);outline:2px solid var(--ink);outline-offset:-12px;text-align:center}
.playbill h2{font-size:clamp(2.6rem,6vw,5rem);color:var(--red)}
.pb-d{font-style:italic;margin:8px 0 20px}
.act{padding:24px 0 8px;border-top:4px double var(--ink)}
.act h3{font-size:clamp(1.7rem,3vw,2.4rem)}
.act h3 a{text-decoration:none}
.act h3 a:hover{text-decoration:underline}
.act>p{font-style:italic;margin:4px 0 14px;color:var(--brown)}
.act ol{list-style:none;margin:0;padding:0;text-align:left}
.act li a{display:flex;align-items:baseline;gap:10px;padding:7px 0;text-decoration:none}
.b-t{flex:0 1 auto}
.b-l{flex:1 1 30px;border-bottom:2px dotted var(--brown);transform:translateY(-4px)}
.b-m{flex:none;font-style:italic;color:var(--brown)}
.act li a:hover .b-t{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:3px}
.b-none{font-style:italic;color:var(--brown);text-align:center;padding:6px 0 14px}
/* ---------- next poster (ending) ---------- */
.next{padding:0 var(--mx) clamp(56px,8vw,110px)}
.poster{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"k k" "o t" "o d" "o f";gap:8px clamp(20px,4vw,56px);align-items:start;text-decoration:none;background:var(--red);color:var(--bill);padding:clamp(24px,4vw,56px);border:4px solid var(--ink);box-shadow:12px 12px 0 var(--ink);transition:box-shadow .25s,transform .25s}
.poster:hover{transform:translate(-4px,-4px);box-shadow:16px 16px 0 var(--ink)}
.p-k{grid-area:k;font-family:var(--slab);font-size:1rem;color:var(--mustard)}
.p-oval{grid-area:o;width:clamp(150px,22vw,300px);aspect-ratio:3/4;border-radius:50%;overflow:hidden;border:6px solid var(--mustard)}
.p-oval img,.p-oval svg{width:100%;height:100%;object-fit:cover}
.poster h2{grid-area:t;font-size:clamp(2rem,4.6vw,4.2rem);line-height:.98;align-self:end}
.p-d{grid-area:d;font-style:italic;font-size:1.1rem;max-width:60ch}
.p-f{grid-area:f;font-family:var(--slab);color:var(--mustard)}
/* ---------- story ---------- */
.st-head{text-align:center;padding:clamp(28px,5vw,64px) var(--mx) 0;max-width:1180px;margin:0 auto}
.st-k{font-style:italic;font-size:1.1rem;margin:0 0 14px}
.st-k a{color:var(--red-dk)}
.st-head h1{font-size:clamp(2.4rem,6vw,5.6rem);line-height:.96;letter-spacing:-.02em;text-wrap:balance}
.st-m{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 0;margin:22px 0 0;font-size:.98rem}
.st-m span{padding:0 14px;border-left:2px solid var(--ink)}
.st-m span:first-child{border-left:0}
.cameo{width:min(560px,86vw);aspect-ratio:4/3;margin:34px auto -110px;border-radius:50%;overflow:hidden;border:8px solid var(--ink);box-shadow:0 0 0 6px var(--mustard),0 0 0 10px var(--ink);position:relative;z-index:2;background:var(--ink)}
.cameo img,.cameo svg{width:100%;height:100%;object-fit:cover;filter:sepia(.25)}
.cameo.iris img,.cameo.iris svg{animation:iris 1.1s cubic-bezier(.6,0,.2,1) both}
@keyframes iris{from{clip-path:circle(0 at 50% 50%)}to{clip-path:circle(75% at 50% 50%)}}
.acts{max-width:1180px;margin:0 auto;background:var(--ink);color:var(--bill);padding:150px var(--mx) 26px}
.acts p{font-family:var(--slab);color:var(--mustard);margin:0 0 10px;text-align:center}
.acts ol{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:2px 26px;max-width:980px}
.acts a{display:block;color:var(--bill);text-decoration:none;padding:7px 0;border-top:1px solid #4A3820;font-size:.98rem;line-height:1.35}
.acts a span{display:block;font-family:var(--slab);font-size:.82rem;color:var(--mustard)}
.acts a:hover{text-decoration:underline;text-decoration-color:var(--mustard)}
.sheet{max-width:1180px;margin:0 auto 64px;background:var(--bill);padding:clamp(28px,5vw,72px) var(--mx);display:grid;grid-template-columns:minmax(0,66ch) minmax(200px,1fr);gap:clamp(24px,5vw,72px);justify-content:center}
.prose{overflow-wrap:break-word;font-size:clamp(1.05rem,1.2vw,1.17rem)}
.prose>p:first-of-type::first-letter{float:left;font-family:var(--slab);font-size:5.2em;line-height:.8;padding:.06em .1em 0 0;color:var(--red)}
.prose h2{font-size:clamp(1.7rem,2.6vw,2.3rem);margin:1.9em 0 .5em;scroll-margin-top:20px;line-height:1.05}
.prose h2::before{content:"";display:block;width:120px;height:14px;margin:0 0 18px;background:radial-gradient(circle,var(--red) 0 4px,transparent 4.5px) center/14px 14px no-repeat,linear-gradient(var(--ink),var(--ink)) left center/48px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) right center/48px 2px no-repeat}
.prose h3{font-size:1.4rem;margin:1.6em 0 .4em}
.prose p,.prose ul,.prose ol{margin:0 0 1.05em}
.prose a{color:var(--red);overflow-wrap:anywhere}
.prose a:hover{color:var(--ink)}
.prose blockquote{margin:1.6em 0;padding:16px 22px;border:3px solid var(--ink);font-style:italic;background:var(--mustard)}
.prose table{width:100%;border-collapse:collapse;display:block;overflow-x:auto;font-size:.98rem}
.prose th,.prose td{border-bottom:2px solid var(--ink);padding:8px 10px;text-align:left}
.prose [style]{border-color:var(--ink)!important}
.st-end{align-self:start;position:sticky;top:20px;font-size:.98rem}
.st-tools{list-style:none;margin:0 0 22px;padding:14px 0 0;border-top:4px double var(--ink)}
.st-tools li{margin:0 0 6px}
.st-end h2{font-size:1.4rem;margin-bottom:8px}
.st-end ul:not(.st-tools){margin:0;padding-left:1.1em}
.st-end ul:not(.st-tools) li{margin:0 0 .5em}
/* ---------- section, notice, 404 ---------- */
.sec{padding:clamp(28px,5vw,64px) var(--mx) 80px}
.sec-head{text-align:center;max-width:900px;margin:0 auto 40px}
.sec-head h1{font-size:clamp(3.2rem,9vw,8rem);line-height:.88}
.sec-head .sb-d{margin:18px auto 0}
.sec-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px}
.sec-grid .jar{background:var(--ink)}
.sec-grid .b-none{grid-column:1/-1;font-size:1.2rem}
.sec-more{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:48px}
.notice{max-width:820px;margin:clamp(28px,5vw,64px) auto 80px;background:var(--bill);padding:clamp(24px,5vw,64px);border:3px solid var(--ink)}
.notice h1{font-size:clamp(2.4rem,6vw,4.4rem)}
.n-body h2{font-size:1.7rem;margin:1.6em 0 .4em}
.n-body a{color:var(--red)}
.n-body form{display:grid;gap:8px;max-width:560px}
.n-body input,.n-body textarea{font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:2px solid var(--ink);padding:10px}
.n-body textarea{min-height:150px}
.n-body button[type=submit]{justify-self:start;font-family:var(--slab);background:var(--ink);color:var(--bill);border:0;padding:12px 22px}
.lost{text-align:center;padding:10vh var(--mx) 14vh}
.l-big{font-family:var(--slab);font-size:clamp(7rem,26vw,20rem);line-height:.8;margin:0;color:var(--red)}
.lost h1{font-size:clamp(2rem,5vw,3.6rem);margin-top:18px}
/* ---------- curtain (footer) ---------- */
.curtain{background:var(--ink);color:var(--bill);padding:48px var(--mx) 26px;border-top:12px solid var(--red)}
.c-name{font-family:var(--slab);font-size:2.2rem;color:var(--mustard);margin:0}
.c-d{font-style:italic;max-width:60ch}
.curtain a{color:var(--bill);text-decoration-color:var(--mustard)}
.curtain nav{display:flex;flex-wrap:wrap;gap:6px 20px;margin:12px 0 24px}
.foot-legal{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding-top:16px;border-top:1px solid #4A3820;font-size:.95rem}
.foot-legal .cmp{color:var(--ink);background:var(--mustard);border:0;padding:7px 14px;font-family:var(--body)}
/* ---------- responsive ---------- */
@media (max-width:900px){
 .show{grid-template-columns:1fr}
 .show h1 br{display:none}
 .show h1{font-size:clamp(3.4rem,15vw,6rem);line-height:.9}
 .sheet{grid-template-columns:1fr}
 .st-end{position:static}
 .poster{grid-template-columns:1fr;grid-template-areas:"k" "o" "t" "d" "f"}
 .p-oval{width:min(220px,60vw)}
}
@media (max-width:640px){
 .mast{gap:10px}
 .stubs{margin-left:0;flex-wrap:nowrap;overflow-x:auto;width:calc(100% + 2 * var(--mx));margin-inline:calc(-1 * var(--mx));padding:2px var(--mx) 6px;scrollbar-width:none}
 .stub{flex:none;min-height:46px;font-size:.92rem}
 .show h1 br{display:inline}
 .show h1{font-size:clamp(4rem,22vw,6rem)}
 .slide figcaption{padding:40px 12% 9%}
 .cabinet header{grid-template-columns:1fr}
 .cab-btn{grid-column:1;grid-row:auto}
 .cameo{margin-bottom:-70px;border-width:6px}
 .acts{padding-top:100px}
 .prose>p:first-of-type::first-letter{font-size:4.2em}
 .poster{box-shadow:8px 8px 0 var(--ink)}
}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}
 .stub:hover{transform:none!important}
 .poster:hover{transform:none}
}
/* pass 2 */
@media (max-width:640px){
 .lantern{padding:0 18px}
 .st-m{flex-direction:column;align-items:center;gap:2px}
 .st-m span{border-left:0;padding:0}
}