/* ============================================================
   TALISMAN ZINE — BASE + FIXED CHROME
   Reset, base type roles, custom cursor, scroll-progress line,
   sprint counter, reveal primitives, reduced-motion guards.
   ============================================================ */

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

html { -webkit-text-size-adjust:100%; }

/* ---- FLIP DECK layout (JS adds .flip when motion is allowed) ---- */
#pager{ height:0; }
html.flip{ height:100%; }
html.flip #scroll{ position:fixed; inset:0; height:100vh; overflow:hidden; perspective:3600px; perspective-origin:38% 50%; z-index:1; }
html.flip .spread{ position:absolute; inset:0; height:100vh; min-height:0;
  backface-visibility:hidden; -webkit-backface-visibility:hidden; will-change:transform; }
/* page-turn shadow (book depth) — opacity + direction driven by JS */
.fold-shade{ position:absolute; inset:0; z-index:60; pointer-events:none; opacity:0;
  background:linear-gradient(var(--shade-ang,180deg), rgba(0,0,0,.62), rgba(0,0,0,0) 52%); }

body {
  background:var(--bone);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-normal);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}

img,svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
::selection { background:var(--yellow-500); color:var(--purple-900); }

/* Hide the native cursor only when the custom one is active (fine pointers). */
@media (pointer:fine){ html.js body, html.js a, html.js [data-cursor]{ cursor:none; } }

/* ---- SPREAD SHELL ------------------------------------------- */
.spread{
  position:relative;
  min-height:100svh;
  width:100%;
  padding:calc(var(--gutter) * .9) var(--gutter);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:var(--s7);
  background:var(--bg);
  color:var(--fg);
  overflow:hidden;
  isolation:isolate;
}
.spread__top,.spread__foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s5); flex-wrap:wrap;
}
.spread__main{ flex:1; display:flex; flex-direction:column; justify-content:center; }

/* ---- TYPE ROLES --------------------------------------------- */
.code{
  font-family:var(--font-display); font-weight:400;
  font-size:var(--fs-label); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--fg-soft);
}
.code--fg{ color:var(--fg); }
.code--accent{ color:var(--accent); }
.eyebrow{
  font-family:var(--font-display); font-weight:400;
  font-size:var(--fs-label); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--fg-soft);
}
.lead{ font-size:var(--fs-lead); line-height:var(--lh-snug); color:var(--fg-soft); max-width:34ch; }
.body{ font-size:var(--fs-body); line-height:var(--lh-loose); color:var(--fg-soft); max-width:52ch; }
.dot{ color:var(--accent-2); }

/* Editorial headline default: Hoss Round, tight. <b> carries weight/colour. */
.headline{
  font-family:var(--font-body); font-weight:400;
  line-height:var(--lh-tight); letter-spacing:var(--track-display);
  text-wrap:balance;
}
.headline b{ font-weight:700; color:var(--accent); }
.headline em{ font-style:normal; font-weight:700; background:var(--accent-2); color:var(--purple-900); padding:0 .12em; }

/* ---- FIXED CHROME (blend against any spread colour) --------- */
.chrome{ position:fixed; z-index:var(--z-chrome); mix-blend-mode:difference; color:#fff; }

.progress{ top:0; left:0; right:0; height:3px; }
.progress__bar{ height:100%; width:100%; background:#fff; transform:scaleX(0); transform-origin:0 50%; }

.counter{
  bottom:16px; left:50%; transform:translateX(-50%);
  font-family:var(--font-display); font-size:var(--fs-label);
  letter-spacing:var(--track-label); text-transform:uppercase;
  display:flex; gap:.7em; align-items:baseline;
}
.counter__idx{ font-variant-numeric:tabular-nums; }

.restart{ bottom:14px; right:var(--gutter); color:#fff; background:none; border:0; cursor:pointer;
  font-family:var(--font-display); font-size:var(--fs-label); letter-spacing:var(--track-label);
  text-transform:uppercase; display:flex; gap:.5em; align-items:center; opacity:.85;
  transition:opacity var(--d2) var(--e-out); }
.restart:hover{ opacity:1; }
.restart span{ font-size:1.2em; }
@media (pointer:coarse){ .restart{ opacity:1; } }

/* Custom cursor */
.cursor{
  position:fixed; top:0; left:0; width:12px; height:12px; border-radius:50%;
  background:#fff; transform:translate(-50%,-50%);
  will-change:transform; pointer-events:none;
  transition:width var(--d2) var(--e-out), height var(--d2) var(--e-out),
             background var(--d2) var(--e-out), border-color var(--d2) var(--e-out);
  z-index:var(--z-cursor); mix-blend-mode:difference; border:1.5px solid transparent;
}
.cursor.is-hover{ width:52px; height:52px; background:transparent; border-color:#fff; }
@media (pointer:coarse){ .cursor,.progress{ display:none; } }

/* ---- REVEAL PRIMITIVES -------------------------------------- */
/* Hidden only when JS is present, so no-JS still shows everything. */
html.js [data-reveal]{ opacity:0; }
html.js [data-reveal="up"]{ transform:translateY(34px); }
html.js [data-reveal="fade"]{ transform:none; }

/* ---- REDUCED MOTION ----------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html.js [data-reveal]{ opacity:1 !important; transform:none !important; }
  .cursor{ display:none; }
  @media (pointer:fine){ html.js body{ cursor:auto; } }
  .ticker__track{ animation:none !important; }
}

/* ---- SHARED ATOMS ------------------------------------------- */
.rule{ height:1px; width:100%; background:var(--line); border:0; }
.pill{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-display); font-size:var(--fs-label);
  letter-spacing:var(--track-label); text-transform:uppercase;
  color:var(--fg-soft); border:1px solid var(--line-2);
  padding:.5em .9em; border-radius:var(--r-pill);
}
.arrow{ display:inline-block; transition:transform var(--d2) var(--e-out); }
[data-cursor]:hover .arrow{ transform:translateX(6px); }