@font-face{font-family:'Instrument Serif';src:url('fonts/instrument-serif-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('fonts/instrument-serif-latin-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'DM Mono';src:url('fonts/dm-mono-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Mono';src:url('fonts/dm-mono-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'DM Mono';src:url('fonts/dm-mono-latin-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Libre Franklin';src:url('fonts/libre-franklin-latin-wght-normal.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Libre Franklin';src:url('fonts/libre-franklin-latin-wght-italic.woff2') format('woff2');font-weight:100 900;font-style:italic;font-display:swap}

:root{
  --smoke:#121615;
  --shadow-teal:#3f5a57;
  --oxblood:#6b2a26;
  --brass:#c9a46a;
  --paper:#d9d2c3;
  --font-title:'Instrument Serif', Georgia, serif;
  --font-credit:'DM Mono', ui-monospace, monospace;
  --font-body:'Libre Franklin', Arial, sans-serif;
  --ease-slow:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--smoke);
  color:var(--paper);
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.6;
}
/* film grain */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.07;
  background-image:repeating-radial-gradient(circle at 17% 32%, var(--paper) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
}
a{color:var(--brass)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

.skip{position:absolute;left:-999px;top:0;background:var(--brass);color:var(--smoke);padding:.5rem 1rem}
.skip:focus{left:1rem;z-index:100}

.credit{
  font-family:var(--font-credit);
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--brass);
  margin:0 0 .75rem;
}

h1,h2,h3{font-family:var(--font-title);font-weight:400;line-height:.95;margin:0}
h2{font-size:clamp(2.6rem,6vw,4.5rem);margin-bottom:1.25rem}

/* top bar */
.topbar{
  display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;
  padding:1rem clamp(1.25rem,4vw,3rem);
  border-bottom:1px solid rgba(201,164,106,.25);
}
.topbar .credit{margin:0;flex:1}
.topbar nav{display:flex;gap:1.25rem}
.topbar nav a{font-family:var(--font-credit);font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;color:var(--paper);text-decoration:none;transition:color .4s var(--ease-slow)}
.topbar nav a:hover{color:var(--brass)}
.motion-toggle{
  font-family:var(--font-credit);font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;
  background:transparent;color:var(--paper);border:1px solid var(--shadow-teal);padding:.4rem .7rem;cursor:pointer;
  transition:border-color .4s var(--ease-slow),color .4s var(--ease-slow);
}
.motion-toggle:hover{border-color:var(--brass);color:var(--brass)}

/* opening shot */
.opening{
  display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(1.5rem,4vw,4rem);
  padding:clamp(2rem,5vw,4rem) clamp(1.25rem,4vw,3rem);
  min-height:calc(100vh - 60px);
}
.opening h1{
  font-size:clamp(4.5rem,12vw,10.5rem);
  letter-spacing:-.01em;
  margin:.25rem 0 1.5rem;
}
.opening .amp{font-style:italic;color:var(--oxblood);-webkit-text-stroke:1px var(--brass)}
.lede{font-size:1.2rem;max-width:30ch;margin:0 0 1.5rem}
.address{color:var(--paper);opacity:.8}
.cta{
  display:inline-block;margin-top:1rem;padding:.85rem 1.4rem;
  font-family:var(--font-credit);font-size:.8rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--smoke);background:var(--brass);text-decoration:none;
  transition:background .4s var(--ease-slow),transform .4s var(--ease-slow);
}
.cta:hover{background:var(--paper)}
.cta:active{transform:translateY(1px)}
.opening-figure{margin:0}
#shopfront-night{display:block;width:100%;height:auto;max-height:78vh;border:1px solid rgba(201,164,106,.25)}
.opening-figure figcaption{margin-top:.75rem;opacity:.75}
.svg-sign{font-family:var(--font-credit);font-size:20px;letter-spacing:.3em;fill:#c9a46a}
.svg-num{font-family:var(--font-title);font-size:34px;fill:#d9d2c3}

/* motion */
.platter{transform-box:fill-box;transform-origin:center;animation:platter-turn 1.8s linear infinite}
.platter-b{animation-duration:2.1s}
.lamp{animation:lamp-flicker 9s steps(1,end) infinite}
@keyframes platter-turn{
  from{transform:scaleY(1) rotate(0deg)}
  to{transform:scaleY(1) rotate(360deg)}
}
@keyframes lamp-flicker{
  0%,100%{opacity:1}
  41%{opacity:.82}
  42%{opacity:1}
  67%{opacity:.7}
  68%{opacity:.95}
  69%{opacity:1}
}
[data-motion="paused"] *{animation-play-state:paused !important}

/* entrance */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity 1.1s var(--ease-slow),transform 1.1s var(--ease-slow)}
.js .reveal.is-in{opacity:1;transform:none}

/* cast */
.cast{padding:clamp(3rem,7vw,6rem) clamp(1.25rem,4vw,3rem);border-top:1px solid rgba(201,164,106,.2)}
.cast-list{list-style:none;margin:2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.cast-list li{padding:1.5rem 1.5rem 1.5rem 0;border-top:1px solid var(--shadow-teal);margin-right:1.5rem}
.cast-list li:nth-child(4){border-top-color:var(--oxblood)}
.role{display:block;font-family:var(--font-credit);font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;color:var(--brass);margin-bottom:.9rem}
.cast-list h3{font-size:clamp(2rem,3vw,2.6rem);margin-bottom:.75rem}
.cast-list p{margin:0;opacity:.88;max-width:28ch}

/* ledger */
.ledger{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(2rem,5vw,5rem);
  padding:clamp(3rem,7vw,6rem) clamp(1.25rem,4vw,3rem);
  background:linear-gradient(180deg, rgba(63,90,87,.28), rgba(63,90,87,0));
}
.ledger-head p:last-child{max-width:32ch}
.ledger-rows{list-style:none;margin:0;padding:0;font-family:var(--font-credit);font-size:.95rem}
.ledger-rows li{
  display:grid;grid-template-columns:7rem 1fr auto;gap:1rem;align-items:baseline;
  padding:.85rem 0;border-bottom:1px solid rgba(217,210,195,.18);
}
.ledger-rows .day{text-transform:uppercase;letter-spacing:.1em}
.ledger-rows .note{color:var(--brass);font-size:.8rem}
.ledger-rows .closed{opacity:.55}
.ledger-rows .closed .day{text-decoration:line-through;text-decoration-color:var(--oxblood);text-decoration-thickness:2px}
.ledger-rows .standing{background:var(--oxblood);color:var(--paper);padding-left:.75rem;padding-right:.75rem;border-bottom-color:var(--oxblood)}
.ledger-rows .standing .note{color:var(--paper);font-weight:500}
.standing-line{grid-column:2;font-family:var(--font-title);font-style:italic;font-size:1.8rem;margin:0;color:var(--brass)}
.address-block{grid-column:1;grid-row:2;font-style:normal;font-size:1.15rem;line-height:1.5}
.address-block .credit{display:block}

/* newsletter */
.list{padding:clamp(3rem,7vw,6rem) clamp(1.25rem,4vw,3rem);border-top:1px solid rgba(201,164,106,.2);max-width:56rem}
.signup{margin-top:1.5rem}
.signup label{display:block;font-family:var(--font-credit);font-size:.75rem;text-transform:uppercase;letter-spacing:.14em;margin-bottom:.5rem}
.field{display:flex;gap:0;max-width:32rem}
.signup input{
  flex:1;min-width:0;padding:.9rem 1rem;font:inherit;color:var(--paper);background:transparent;
  border:1px solid var(--shadow-teal);border-right:0;transition:border-color .4s var(--ease-slow);
}
.signup input:focus{border-color:var(--brass)}
.signup button{
  padding:.9rem 1.3rem;font-family:var(--font-credit);font-size:.8rem;text-transform:uppercase;letter-spacing:.14em;
  background:var(--oxblood);color:var(--paper);border:1px solid var(--oxblood);cursor:pointer;
  transition:background .4s var(--ease-slow);
}
.signup button:hover{background:var(--brass);color:var(--smoke);border-color:var(--brass)}

.footer{padding:2rem clamp(1.25rem,4vw,3rem);border-top:1px solid rgba(201,164,106,.2)}
.footer .credit{margin:0;color:var(--paper);opacity:.7;letter-spacing:.1em}

@media (max-width:860px){
  .opening{grid-template-columns:1fr;min-height:0}
  .cast-list{grid-template-columns:1fr 1fr}
  .ledger{grid-template-columns:1fr}
  .standing-line,.address-block{grid-column:auto;grid-row:auto}
}
@media (max-width:520px){
  .topbar nav{display:none}
  .cast-list{grid-template-columns:1fr}
  .cast-list li{margin-right:0}
  .ledger-rows li{grid-template-columns:6.2rem 1fr auto;gap:.5rem;font-size:.85rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .js .reveal{opacity:1;transform:none}
}