/* ==========================================================================
   TOKENS
   ========================================================================== */
:root{
  --paper:        #efe9da;
  --paper-edge:   #e6dfcc;
  --ink:          #211e17;
  --ink-soft:     #4d4838;
  --ink-faint:    rgba(33,30,23,.55);
  --rule:         rgba(33,30,23,.28);

  --stage-bg:     #0b0a08;
  --stage-edge:   rgba(20,17,12,.6);
  --slide-ink:    #ece4d0;

  --font-type:    'Courier Prime', 'Courier New', monospace;
  --font-script:  'Mrs Saint Delafield', cursive;

  --grain-bg: none; /* set at runtime by script.js */
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  background:var(--paper);
  color:var(--ink);
}

body{
  min-height:100vh;
}

@media (prefers-reduced-motion:no-preference){
  body{ overflow:hidden; } /* the sheet behaves like a fixed page on desktop */
}

@media (max-width:720px){
  body{ overflow-x:hidden; overflow-y:auto; height:auto; }
}

/* ==========================================================================
   PAPER SHEET
   ========================================================================== */
.sheet{
  position:relative;
  width:100vw;
  height:100vh;
  min-height:100vh;
  display:grid;
  grid-template-rows:auto 1fr auto;
  padding:clamp(20px,3.6vw,50px) clamp(22px,4.2vw,64px);
  font-family:var(--font-type);
  color:var(--ink);
  isolation:isolate;
}

@media (max-width:720px){
  .sheet{ height:auto; min-height:100vh; row-gap:34px; padding-top:32px; padding-bottom:40px; }
}

/* subtle aged-paper vignette + fold lines */
.sheet::before{
  content:"";
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(0,0,0,0) 55%, rgba(0,0,0,.05) 100%),
    radial-gradient(120% 90% at 50% 100%, rgba(0,0,0,0) 55%, rgba(0,0,0,.06) 100%),
    linear-gradient(to right, rgba(0,0,0,.025) 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0) 99%, rgba(0,0,0,.03) 100%),
    var(--paper);
}

/* animated-free grain texture, generated at runtime in script.js */
.sheet::after{
  content:"";
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
  background-image:var(--grain-bg);
  background-size:220px 220px;
  opacity:.5;
  mix-blend-mode:multiply;
}

.row, .stage-wrap{ position:relative; z-index:2; }

/* ==========================================================================
   TYPE — shared "stamped ink" treatment
   ========================================================================== */
.slot{
  margin:0;
  text-transform:uppercase;
  letter-spacing:.14em;
  line-height:1.75;
  color:var(--ink);
  text-shadow:0 1px 0 rgba(0,0,0,.12);
  font-size:clamp(11px,.95vw,14px);
}

/* ==========================================================================
   HEADER ROW
   ========================================================================== */
.row--header{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  align-items:start;
  gap:18px;
}

.slot--mark{ justify-self:start; }
.slot--tagline{ justify-self:center; text-align:center; align-self:start; padding-top:.4em; }
.slot--signature{ justify-self:end; text-align:right; }

@media (max-width:720px){
  .row--header{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:16px; }
  .slot--mark{ justify-self:center; }
  .slot--signature{ justify-self:center; text-align:center; }
}

/* mark / logo placeholder */
.mark-placeholder{
  width:clamp(46px,5.6vw,72px);
  height:clamp(46px,5.6vw,72px);
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--ink-faint);
  color:var(--ink-faint);
  font-size:9px;
  letter-spacing:.1em;
  text-align:center;
  border-radius:1px;
}
.mark-placeholder svg{ width:62%; height:62%; opacity:.75; }

.slot--mark img{
  display:block;
  max-width:clamp(46px,7vw,92px);
  max-height:clamp(70px,11vw,150px);
  width:auto; height:auto;
  filter:grayscale(1) contrast(1.05);
}

/* signature */
.signature-text{
  font-family:var(--font-script);
  font-size:clamp(30px,3.6vw,50px);
  line-height:1;
  color:var(--ink-soft);
  letter-spacing:.01em;
  text-transform:none;
  text-shadow:0 1px 0 rgba(0,0,0,.08);
  display:inline-block;
  transform:rotate(-2deg);
}
.slot--signature img{
  display:block;
  max-width:clamp(160px,20vw,320px);
  max-height:clamp(60px,9vw,130px);
  width:auto; height:auto;
  margin-left:auto;
  filter:grayscale(1) contrast(1.05);
  opacity:.85;
}

/* ==========================================================================
   STAGE WRAP — vertical centering of the projector between header/footer
   ========================================================================== */
.stage-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
  padding:clamp(10px,2vh,30px) 0;
}

@media (max-width:720px){
  .stage-wrap{ padding:6px 0 0; }
}

.stage{
  outline:none;
}
.stage:focus-visible .stage-frame{
  box-shadow:0 0 0 2px var(--ink), 0 18px 60px -10px rgba(0,0,0,.55);
}

/* ==========================================================================
   STAGE FRAME — the "slide" itself
   ========================================================================== */
.stage-glow{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.stage-frame{
  position:relative;
  width:min(56vw,960px);
  height:min(46vh,540px);
  min-width:280px;
  min-height:220px;
  background:var(--stage-bg);
  border:1px solid var(--stage-edge);
  box-shadow:
    0 30px 70px -20px rgba(20,15,5,.45),
    0 0 0 7px var(--paper),
    0 0 0 8px var(--rule);
  overflow:hidden;
  cursor:pointer;
}

@media (max-width:720px){
  .stage-frame{ width:88vw; height:62vw; max-height:54vh; }
}

.slide-track{
  position:absolute; inset:0;
}

.slide{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  opacity:0;
  transition:opacity .22s ease-out;
}
.slide.is-active{ opacity:1; }

.slide img, .slide video{
  width:100%; height:100%;
  object-fit:cover;
  filter:grayscale(.18) contrast(1.06) brightness(.96) sepia(.06);
}

/* numbered placeholder card, shown when a slide has no file yet */
.slide-placeholder{
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px;
  border:1px dashed rgba(236,228,208,.28);
  margin:14px;
  color:rgba(236,228,208,.55);
}
.slide-placeholder .num{
  font-family:var(--font-type);
  font-size:clamp(22px,3vw,34px);
  letter-spacing:.08em;
}
.slide-placeholder .hint{
  font-family:var(--font-type);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  opacity:.8;
}

/* film grain canvas, drawn by script.js */
.grain-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  opacity:.09;
  mix-blend-mode:overlay;
  pointer-events:none;
}

/* drifting dust specks */
.dust-layer{
  position:absolute; inset:0;
  overflow:hidden;
  pointer-events:none;
}
.speck{
  position:absolute;
  bottom:-6%;
  width:2px; height:2px;
  border-radius:50%;
  background:rgba(236,228,208,.55);
  opacity:0;
  animation-name:drift;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
@keyframes drift{
  0%   { transform:translate(0,0);        opacity:0; }
  8%   { opacity:.55; }
  50%  { transform:translate(6px,-58%);    opacity:.35; }
  92%  { opacity:0; }
  100% { transform:translate(-4px,-118%);  opacity:0; }
}

/* projector bulb hum */
.bulb-hum{
  position:absolute; inset:0;
  background:#fff;
  opacity:.04;
  pointer-events:none;
  animation:hum 3.6s ease-in-out infinite;
}
@keyframes hum{
  0%,100%{ opacity:.03; }
  50%    { opacity:.08; }
}

/* edge vignette */
.vignette{
  position:absolute; inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 90px 18px rgba(0,0,0,.65);
}

/* slide-change flicker */
@keyframes flicker{
  0%   { filter:brightness(1)   contrast(1); }
  12%  { filter:brightness(2.6) contrast(1.15); }
  28%  { filter:brightness(.35) contrast(1.05); }
  46%  { filter:brightness(1.7) contrast(1.1); }
  68%  { filter:brightness(.65) contrast(1); }
  100% { filter:brightness(1)   contrast(1); }
}
.stage-frame.is-flickering{ animation:flicker .42s steps(1,end) 1; }

/* transparent-PNG slides: no dark box, no grain/vignette — the image
   sits straight on the paper, sized to fit without cropping */
.stage-frame.frame-off{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
}
.stage-frame.frame-off .vignette,
.stage-frame.frame-off .bulb-hum,
.stage-frame.frame-off .dust-layer,
.stage-frame.frame-off .grain-canvas{
  display:none;
}
.stage-frame.frame-off .caption{
  background:none;
  color:var(--ink-soft);
  text-shadow:0 1px 0 rgba(0,0,0,.1);
}
.stage-frame.frame-off .counter{
  color:var(--ink-faint);
}
.stage-frame.frame-off .nav{
  color:var(--ink-faint);
}
.stage-frame.frame-off .nav:hover,
.stage-frame.frame-off .nav:focus-visible{
  color:var(--ink);
}

.slide.is-flat img,
.slide.is-flat video{
  filter:none;
}

/* nav arrows */
.nav{
  position:absolute;
  top:0; bottom:0;
  width:34%;
  display:flex;
  align-items:center;
  border:none;
  background:transparent;
  color:rgba(236,228,208,.75);
  font-family:var(--font-type);
  font-size:clamp(22px,2.4vw,32px);
  cursor:pointer;
  opacity:.4;
  transition:opacity .2s ease;
  padding:0 14px;
}
.nav:hover, .nav:focus-visible{ opacity:1; }
.nav--prev{ left:0; justify-content:flex-start; }
.nav--next{ right:0; justify-content:flex-end; }

/* caption */
.caption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:10px 16px 9px;
  background:linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0));
  color:var(--slide-ink);
  font-family:var(--font-type);
  font-size:clamp(9.5px,.78vw,12px);
  letter-spacing:.14em;
  text-transform:uppercase;
  text-align:left;
  opacity:.92;
  pointer-events:none;
}
.caption:empty{ display:none; }

/* frame counter */
.counter{
  position:absolute;
  top:10px; right:14px;
  font-family:var(--font-type);
  font-size:10px;
  letter-spacing:.1em;
  color:rgba(236,228,208,.6);
  opacity:0;
  transition:opacity .2s ease;
  pointer-events:none;
}
.stage-frame:hover ~ .counter,
.stage:hover .counter,
.stage:focus-visible .counter{ opacity:.8; }

/* ==========================================================================
   FOOTER ROW
   ========================================================================== */
.row--footer{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(14px,2.4vh,26px);
}

.footer-line{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
}

.slot--list{ text-align:center; max-width:46%; }
.slot--location{ text-align:center; }

@media (max-width:720px){
  .footer-line{ flex-direction:column; align-items:center; gap:18px; }
  .slot--list{ max-width:100%; }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .stage-frame.is-flickering{ animation:none; }
  .bulb-hum{ animation:none; opacity:.04; }
  .speck{ animation:none; display:none; }
  .slide{ transition:none; }
}