/* ===========================================================================
   Our Favourite Things, the cinematic system.

   One stylesheet for every page so the passport and the film do not feel like
   two products. The old app.css stays where it is and keeps serving /map.html,
   which is deliberately preserved in its original design.

   Class names here deliberately match the ones the existing passport and events
   markup already uses (.card, .btn, .eyebrow, .back, .bar, .st, .badge,
   .trailrow, .tally, .empty, .search). Those pages adopt this look by changing
   one link tag, with no change to their logic.
   ======================================================================== */

:root{
  --bg:#0b0b0d; --bg2:#141417; --bg3:#1b1c21; --line:#26262b; --line2:#33343a;
  --red:#c0392b; --red-b:#e0483a;
  --gold:#b8935c; --gold-b:#d4a24a; --gold-l:#e8d5a8;
  --green:#2f6b4f; --green-b:#6fbf92;
  --fg:#f4f2ee; --soft:#ddd9d3; --mut:#a9a6a0; --dim:#6f6c67;
  --serif:Newsreader,"Iowan Old Style",Georgia,serif;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --r:5px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg)}
body{color:var(--fg);font-family:var(--sans);font-size:16px;line-height:1.5;
     -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;line-height:1.15}
img{max-width:100%}

/* --- chrome ------------------------------------------------------------- */
header.site{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;
  gap:22px;padding:15px 4vw;background:linear-gradient(180deg,rgba(11,11,13,.95),rgba(11,11,13,0));
  transition:background .3s}
header.site.solid{background:var(--bg);border-bottom:1px solid var(--line)}
.brand{font-weight:800;color:var(--red-b);font-size:18px;white-space:nowrap;letter-spacing:.3px}
.brand span{color:var(--fg)}
header.site nav{display:flex;gap:17px;font-size:13.5px;color:var(--mut);flex-wrap:wrap}
header.site nav a.on,header.site nav a:hover{color:var(--fg)}
.spacer{flex:1}
.pill-btn{background:var(--red);color:#fff;border:0;border-radius:var(--r);padding:8px 15px;
  font-size:13.5px;font-weight:600;cursor:pointer;font-family:var(--sans)}
.pill-btn:hover{background:var(--red-b)}

.wrap{max-width:940px;margin:0 auto;padding:104px 4vw 80px}
.wrap.narrow{max-width:760px}
.back{display:inline-block;font-size:13px;color:var(--mut);margin-bottom:18px}
.back:hover{color:var(--fg)}
.eyebrow{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-b);
  font-weight:600;margin-bottom:10px}
.lede{color:var(--mut);font-size:15px;max-width:680px}

/* --- type --------------------------------------------------------------- */
h1{font-size:clamp(30px,4.4vw,46px)}
h2{font-size:clamp(19px,2.2vw,26px);margin-bottom:8px}
h3{font-size:17px}
.b{color:var(--gold-b)}

/* --- buttons ------------------------------------------------------------ */
.btn{border:0;border-radius:var(--r);padding:11px 21px;font-size:14.5px;font-weight:700;
  cursor:pointer;font-family:var(--sans);display:inline-flex;align-items:center;gap:8px}
.btn.primary,.btn.play{background:#fff;color:#111}
.btn.info,.btn.ghost{background:rgba(109,109,110,.7);color:#fff}
.btn.gold{background:var(--gold-b);color:#1a1508}
.btn:hover{opacity:.86}
.search,input[type=text],input[type=email]{background:var(--bg2);border:1px solid var(--line2);
  color:var(--fg);border-radius:var(--r);padding:10px 13px;font-size:14.5px;font-family:var(--sans)}
.search::placeholder{color:var(--dim)}
.search:focus,input:focus{outline:0;border-color:var(--gold)}

/* --- cards and panels --------------------------------------------------- */
.card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);
  padding:15px 17px;margin-bottom:10px}
.card h3{font-family:var(--sans);font-size:15px;font-weight:700;margin-bottom:4px}
.card h3 .n{display:inline-block;min-width:26px;color:var(--gold-b);font-weight:700}
.card p{font-size:13.5px;color:var(--mut)}
.card:hover{border-color:var(--line2)}
.empty{border:1px dashed var(--line2);border-radius:var(--r);padding:26px;text-align:center;
  color:var(--mut);font-size:14px;background:var(--bg2)}

/* --- progress, stamps, badges (passport) -------------------------------- */
.bar{height:8px;background:var(--bg3);border-radius:8px;overflow:hidden;margin:14px 0}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--red),var(--gold-b))}
.bar.sm{height:5px;margin:5px 0 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px;margin-top:16px}
.st{aspect-ratio:1;border:1px dashed var(--line2);border-radius:var(--r);display:flex;
  align-items:center;justify-content:center;font-size:1.4rem;background:var(--bg2)}
.st.got{border:1px solid var(--gold);background:linear-gradient(145deg,#2a2113,#1a1510);color:#fff}
.tally{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.tally .t{flex:1;min-width:108px;background:var(--bg2);border:1px solid var(--line);
  border-radius:var(--r);padding:13px 14px;text-align:center}
.tally .t b{display:block;font-family:var(--serif);font-size:1.7rem;color:var(--gold-b)}
.tally .t span{font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--mut)}
.next{margin-top:12px;color:var(--gold-b);font-family:var(--serif);font-size:1.05rem}
.badges{display:grid;gap:9px;grid-template-columns:repeat(auto-fill,minmax(146px,1fr));margin-top:8px}
.badge{border:1px solid var(--line);border-radius:var(--r);background:var(--bg2);padding:12px;
  text-align:center;opacity:.45}
.badge.on{opacity:1;border-color:var(--gold)}
.badge .be{font-size:1.7rem;display:block;filter:grayscale(1)}
.badge.on .be{filter:none}
.badge b{display:block;font-family:var(--sans);font-size:.9rem;margin-top:4px;font-weight:700}
.badge small{display:block;color:var(--mut);font-size:.7rem;margin-top:2px}
.trailrow{display:flex;align-items:center;gap:11px;padding:11px 13px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--bg2);margin-bottom:8px;color:inherit}
.trailrow.done{border-color:var(--gold)}
.trailrow .em{font-size:1.3rem}
.trailrow .cnt{font-size:.8rem;color:var(--mut);white-space:nowrap}
.trailrow.done .cnt{color:var(--gold-b);font-weight:700}

/* --- status pills ------------------------------------------------------- */
.pill{display:inline-block;font-size:8.5px;letter-spacing:.12em;font-weight:700;padding:2px 7px;
  border-radius:3px;text-transform:uppercase;vertical-align:2px}
.pill.live{background:rgba(74,138,138,.16);color:#6ba5a5;border:1px solid rgba(74,138,138,.4)}
.pill.gap{background:rgba(184,147,92,.14);color:var(--gold-b);border:1px solid rgba(184,147,92,.42)}

/* --- the landing title card -------------------------------------------- */
/* An author display rule beats the browser's [hidden] default, so without this
   the overlay stayed on screen for returning visitors: black, on top of
   everything, with nothing playing behind it. */
#curtain[hidden]{display:none!important}
#curtain{position:fixed;inset:0;z-index:200;background:#000;display:flex;align-items:center;
  justify-content:center}
#curtain video{width:100%;height:100%;object-fit:cover}
/* The title card is a 16:9 film with words in it. object-fit:cover fills the
   window by scaling until the SHORTER side fits, which on a phone held upright
   renders it 1500px wide inside a 390px window: 74% of the frame, and most of
   "St. Thomas & District Chamber of Commerce presents", is cropped off the
   sides. Measured, not guessed.
   The rule is geometric, not a device check: whenever the window is narrower
   than the film itself, show the whole film and letterbox it. The overlay is
   already solid black, so the bars read as cinema rather than as a mistake.
   A user-agent test would have been the wrong tool: it gets a narrow desktop
   window and a tablet in portrait wrong, and this does not. */
@media (max-aspect-ratio: 16/9){
  #curtain video{object-fit:contain}
}
#curtain .skip{position:absolute;bottom:26px;right:26px;background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:var(--r);padding:8px 15px;
  font-size:13px;cursor:pointer;font-family:var(--sans)}
#curtain.gone{opacity:0;pointer-events:none;transition:opacity .8s}

footer.site{border-top:1px solid var(--line);padding:24px 4vw 46px;color:var(--dim);font-size:12.5px}
@media(max-width:640px){ .wrap{padding-top:92px} header.site nav{gap:12px;font-size:12.5px} }