/* ===== Fonts (local, works offline) ===== */
@font-face{font-family:var(--f-display);font-weight:400;src:url(../assets/fonts/outfit-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:var(--f-display);font-weight:600;src:url(../assets/fonts/outfit-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:var(--f-display);font-weight:700;src:url(../assets/fonts/outfit-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:var(--f-display);font-weight:800;src:url(../assets/fonts/outfit-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:var(--f-text);font-weight:400;src:url(../assets/fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:var(--f-text);font-weight:500;src:url(../assets/fonts/inter-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:var(--f-text);font-weight:600;src:url(../assets/fonts/inter-latin-600-normal.woff2) format("woff2")}


@font-face{font-family:Fraunces;font-weight:100 900;font-style:normal;src:url(../assets/fonts/fraunces-latin-full-normal.woff2) format("woff2")}
@font-face{font-family:Fraunces;font-weight:100 900;font-style:italic;src:url(../assets/fonts/fraunces-latin-full-italic.woff2) format("woff2")}
@font-face{font-family:Literata;font-weight:400;src:url(../assets/fonts/literata-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Literata;font-weight:400;font-style:italic;src:url(../assets/fonts/literata-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:Literata;font-weight:500;src:url(../assets/fonts/literata-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Literata;font-weight:500;font-style:italic;src:url(../assets/fonts/literata-latin-500-italic.woff2) format("woff2")}
@font-face{font-family:Literata;font-weight:600;src:url(../assets/fonts/literata-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Literata;font-weight:600;font-style:italic;src:url(../assets/fonts/literata-latin-600-italic.woff2) format("woff2")}
@font-face{font-family:Bricolage;font-weight:200 800;src:url(../assets/fonts/bricolage-grotesque-latin-full-normal.woff2) format("woff2")}
@font-face{font-family:Atkinson;font-weight:400;src:url(../assets/fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Atkinson;font-weight:400;font-style:italic;src:url(../assets/fonts/atkinson-hyperlegible-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:Atkinson;font-weight:700;src:url(../assets/fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:Atkinson;font-weight:700;font-style:italic;src:url(../assets/fonts/atkinson-hyperlegible-latin-700-italic.woff2) format("woff2")}
@font-face{font-family:Instrument;font-weight:400;src:url(../assets/fonts/instrument-serif-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Instrument;font-weight:400;font-style:italic;src:url(../assets/fonts/instrument-serif-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:Hanken;font-weight:400;src:url(../assets/fonts/hanken-grotesk-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Hanken;font-weight:500;src:url(../assets/fonts/hanken-grotesk-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Hanken;font-weight:600;src:url(../assets/fonts/hanken-grotesk-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Hanken;font-weight:700;src:url(../assets/fonts/hanken-grotesk-latin-700-normal.woff2) format("woff2")}

/* ===== Type directions: body.type-A / B / C (current = Outfit/Inter) ===== */
:root{--f-display:Outfit;--w-display:800;--w-title:700;--f-text:Inter;--w-text:500;--f-label:Outfit;--w-label:600;--ls-label:.32em;--tt-label:uppercase;--verse-style:normal;--ls-display:-.01em}
body.type-A{--f-display:Fraunces;--w-display:600;--w-title:600;--f-text:Literata;--w-text:400;--f-label:Fraunces;--w-label:600;--ls-label:.06em;--tt-label:none;--verse-style:italic;--ls-display:-.015em}
body.type-B{--f-display:Bricolage;--w-display:800;--w-title:700;--f-text:Atkinson;--w-text:400;--f-label:Bricolage;--w-label:600;--ls-label:.02em;--tt-label:none;--verse-style:normal;--ls-display:-.005em}
body.type-C{--f-display:Instrument;--w-display:400;--w-title:400;--f-text:Hanken;--w-text:400;--f-label:Hanken;--w-label:600;--ls-label:.04em;--tt-label:none;--verse-style:italic;--ls-display:-.01em}
body.type-A .t-display,body.type-A .t-title{font-variation-settings:"SOFT" 50,"WONK" 0}

/* ===== Design tokens ===== */
:root{
  /* Job = ochre, God = gold */
  --ochre:#e07a4a; --ochre-deep:#a8502c;
  --gold:#ffc94d; --gold-soft:#ffe3a1; --gold-glow:rgba(255,201,77,.55);
  --cream:#f7eedb; --ink:#1d2a2c;
  /* dawn (light part) */
  --sky1:#8ec3d8; --sky2:#cfe7ea; --sand:#ead6ab; --sage:#86a985; --sage-d:#5e8263; --dawn-ink:#24363a;
  /* loss */
  --ash1:#56636d; --ash2:#8b979f; --ash3:#2f3940;
  /* cool reframes */
  --cool1:#2f5d63; --cool2:#477a7f; --cool3:#a9c9c6;
  /* night / silence */
  --night1:#0b2226; --night2:#123338; --night3:#1c464c; --night-line:#2b5f66;
  /* sunrise */
  --rise1:#f0a463; --rise2:#f7d38a; --rise3:#1b3f46;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;background:#000;overflow:hidden}
body{font-family:var(--f-text),system-ui,sans-serif;color:var(--cream);-webkit-font-smoothing:antialiased;cursor:default}
body.hide-cursor{cursor:none}

/* ===== Stage: fixed 1920x1080, scaled to fit ===== */
#viewport{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#000}
#stage{position:relative;flex:none;width:1920px;height:1080px;overflow:hidden;transform-origin:center center;background:var(--night1)}
.slide{position:absolute;inset:0;overflow:hidden}
.layer{position:absolute;inset:0}
.cam{position:absolute;inset:0;transform-origin:50% 50%;will-change:transform}
.fill-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform,filter}
svg.full{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

/* grain on every slide */
#grain{position:absolute;inset:-50px;pointer-events:none;z-index:50;opacity:.16;mix-blend-mode:overlay;background-size:256px 256px}
#vignette{position:absolute;inset:0;pointer-events:none;z-index:49;background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,0) 55%,rgba(0,0,0,.35) 100%)}
#blackout{position:absolute;inset:0;background:#000;z-index:100;opacity:0;pointer-events:none;transition:opacity .4s}
#blackout.on{opacity:1}

/* ===== Type ===== */
.t-display{font-family:var(--f-display);font-weight:var(--w-display);letter-spacing:var(--ls-display);line-height:.95}
.t-title{font-family:var(--f-display);font-weight:var(--w-title);line-height:1.08;letter-spacing:-.005em}
.t-label{font-family:var(--f-label);font-weight:var(--w-label);letter-spacing:var(--ls-label);text-transform:var(--tt-label)}
.t-body{font-family:var(--f-text);font-weight:var(--w-text);line-height:1.35}
.split{ /* two-tone split fill, like the JOHN poster */
  background:linear-gradient(180deg,var(--c1,#fff) 0 54%,var(--c2,#cfe) 54% 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.split-ch{display:inline-block}
.shadow{text-shadow:0 6px 30px rgba(0,0,0,.35)}

.abs{position:absolute}
.center{left:50%;top:50%;transform:translate(-50%,-50%)}
.box{position:absolute}

/* verse cards */
.verse{position:absolute;max-width:1300px;font-family:var(--f-text);font-weight:var(--w-text);font-style:var(--verse-style);font-size:44px;line-height:1.4}
.verse .ref{display:block;margin-top:18px;font-family:var(--f-label);font-weight:var(--w-label);font-style:normal;font-size:24px;letter-spacing:var(--ls-label);text-transform:var(--tt-label);opacity:.85}
.verse.placeholder .txt{opacity:.8;font-style:italic}
.verse.job{color:var(--ochre)}
.verse.god{color:var(--gold)}
.verse.plain{color:var(--cream)}

/* polaroids */
.polaroid{position:absolute;background:#fbf6ea;padding:14px 14px 54px;box-shadow:0 18px 40px rgba(0,0,0,.35);will-change:transform}
.polaroid img{display:block;width:100%;height:100%;object-fit:cover;background:#ccc}
.polaroid .cap{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-family:var(--f-display);font-weight:600;color:#3b3127;font-size:22px}
.polaroid.empty{background:transparent;box-shadow:none;outline:4px dashed rgba(255,255,255,.25)}
.photo-slot{position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;background:repeating-linear-gradient(45deg,#2a4045 0 18px,#253a3f 18px 36px);color:#cfe1df;font-family:var(--f-display);font-weight:600;font-size:26px;padding:20px}

/* chips / badges */
.badge{position:absolute;top:56px;right:160px;z-index:40;font-family:var(--f-label);font-weight:600;font-size:32px;letter-spacing:.02em;padding:0 0 6px;border-bottom:3px solid currentColor;opacity:.9}
.badge.q1{color:var(--cream)}
.badge.q2{color:var(--cream)}

/* cards */
.card{position:absolute;background:rgba(10,30,34,.72);border:2px solid rgba(255,227,161,.35);border-radius:6px;padding:26px 30px;color:var(--cream);backdrop-filter:blur(2px)}
.card h4{font-family:var(--f-display);font-weight:700;font-size:38px;line-height:1.05}
.card p{font-family:var(--f-text);font-weight:500;font-size:24px;margin-top:8px;opacity:.85}

.note-hand{position:absolute;font-family:var(--f-text);font-weight:700;color:#2b2420;background:#f3e6c8;padding:18px 26px;box-shadow:0 10px 24px rgba(0,0,0,.35);border-radius:2px}

/* progress dots (tiny, bottom) */
#hud{position:absolute;left:0;right:0;bottom:0;height:4px;z-index:60;background:rgba(255,255,255,.06)}
#hud i{display:block;height:100%;background:rgba(255,227,161,.45);width:0;transition:width .4s}
body.no-hud #hud{display:none}

/* ===== Phones and tablets (js/mobile.js) ===== */
body.touch{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#rotate{display:none}
body.touch.portrait #rotate{display:flex;position:fixed;inset:0;z-index:1000;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:32px 28px;text-align:center;background:radial-gradient(ellipse at 50% 35%,#173a40 0%,#0b2226 70%);color:#f3ead6}
body.touch.portrait #viewport{visibility:hidden}
#rotate .rot-phone{animation:rot-tilt 2.4s ease-in-out infinite;transform-origin:60px 54px}
@keyframes rot-tilt{0%,30%{transform:rotate(0)}55%,85%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
#rotate h1{font-family:Bricolage,system-ui,sans-serif;font-weight:800;font-size:30px;letter-spacing:-.005em;margin-top:8px}
#rotate .rot-main{font-family:Atkinson,system-ui,sans-serif;font-size:19px;line-height:1.4;max-width:300px}
#rotate .rot-hint{font-family:Atkinson,system-ui,sans-serif;font-size:15px;line-height:1.4;max-width:280px;color:rgba(243,234,214,.7)}
#rot-go{margin-top:10px;font:700 18px Bricolage,system-ui,sans-serif;color:#0b2226;background:#ffc94d;border:0;border-radius:999px;padding:16px 28px;min-height:52px;cursor:pointer}
#tap-tip{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:900;font:600 15px Bricolage,system-ui,sans-serif;color:#f3ead6;background:rgba(8,24,28,.85);padding:10px 18px;border-radius:999px;pointer-events:none;white-space:nowrap}