/* ============================================================
   THE INTENSIVE — BEAM SIGNATURE foundation
   Iconic. Timeless. One shaft of light on pure black.
   Drop-in replacement for the base brand.css — same token names,
   re-pointed to the ice palette so every deliverable inherits it.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Saira:wght@300;400;500;600;700;800;900&family=Saira+Condensed:wght@700;800;900&family=Saira+Stencil+One&family=Space+Mono:wght@400;700&family=Yatra+One&display=swap');

:root{
  /* base — studio stage, near-pure black */
  --ink:#040405;
  --bg:#070708;
  --surface:#0e0f12;
  --surface-2:#141519;
  --line:#23242a;
  --line-soft:#17181d;

  /* text */
  --text:#f6f8fb;
  --text-dim:#a4a8b2;
  --text-faint:#6a6e78;

  /* accents — one cold light (names kept for compatibility) */
  --cyan:#bfe6ff;        /* Beam Ice — the light */
  --cyan-deep:#5b9fd6;   /* Ice Deep */
  --pink:#8cc4ec;        /* Ice Mist — cooler secondary */
  --pink-deep:#3f7bb0;   /* Ice Steel */
  --ice:#bfe6ff;
  --ice-dim:#8cc4ec;

  --glow-cyan:0 0 60px rgba(191,230,255,.40);
  --glow-pink:0 0 50px rgba(140,196,236,.35);

  /* type */
  --f-impact:'Anton', 'Saira Condensed', sans-serif;
  --f-cond:'Saira Condensed', 'Anton', sans-serif;
  --f-ui:'Saira', system-ui, sans-serif;
  --f-mono:'Space Mono', ui-monospace, monospace;
  --f-deva:'Yatra One', 'Saira', sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-ui);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---- shared atoms ---- */
.kicker{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--text-faint);
}
.kicker .dot{ color:var(--ice); }

.spec{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--text-faint);
}

.tag{
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--text-dim);
  border:1px solid var(--line);
  padding:5px 10px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
}
.tag.cyan{ color:var(--ice); border-color:rgba(191,230,255,.4); }
.tag.pink{ color:var(--ice-dim); border-color:rgba(140,196,236,.4); }

/* film-grain / scanline texture, applied as ::after overlay on stages */
.grain::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background-image:repeating-linear-gradient(
    to bottom, rgba(255,255,255,.016) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
  opacity:.6;
}

/* ============================================================
   BEAM SHAFT — the signature vertical light.
   Drop a <i class="beam-shaft"></i> into any positioned parent;
   nudge with left/height inline. Includes a soft floor pool.
   ============================================================ */
.beam-shaft{
  position:absolute; top:-6%; left:50%; width:2px; height:86%;
  transform:translateX(-50%); pointer-events:none; z-index:1;
  background:linear-gradient(to bottom, transparent, #fff 20%, #fff 66%, rgba(191,230,255,.28) 90%, transparent);
  box-shadow:0 0 14px 2px rgba(191,230,255,.7), 0 0 64px 10px rgba(191,230,255,.34);
}
.beam-shaft::after{
  content:""; position:absolute; left:50%; bottom:-1.5%; transform:translateX(-50%);
  width:300px; height:60px; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(191,230,255,.5), transparent 70%);
  filter:blur(7px);
}
.beam-shaft.soft{
  background:linear-gradient(to bottom, transparent, rgba(191,230,255,.5) 22%, rgba(191,230,255,.5) 70%, transparent);
  box-shadow:0 0 18px 3px rgba(191,230,255,.35);
}

/* ============================================================
   FIXED-CANVAS SCALING
   ============================================================ */
.stage{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink);
  overflow:hidden;
}
.canvas{
  position:relative;
  transform-origin:center center;
  flex:0 0 auto;
  background:var(--bg);
  overflow:hidden;
}

.stage-caption{
  position:fixed;
  left:22px; bottom:18px;
  z-index:50;
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--text-faint);
  display:flex; gap:14px; align-items:center;
}
.stage-caption b{ color:var(--text-dim); font-weight:400; }
.stage-caption .pip{ width:7px; height:7px; border-radius:50%; background:var(--ice); box-shadow:var(--glow-cyan); }

/* image placeholder — striped, with mono explainer */
.ph{
  position:relative;
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.03) 0 2px, transparent 2px 11px),
    var(--surface);
  border:1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.ph .ph-label{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-faint);
  text-align:center;
  padding:0 1em;
  line-height:1.7;
}

/* ---- nav strip used on documentation pages ---- */
.topbar{
  position:sticky; top:0; z-index:80;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px;
  background:rgba(7,7,8,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.topbar a.home{
  display:flex; align-items:center; gap:11px;
  text-decoration:none; color:var(--text);
}
.topbar .mark{
  width:30px; height:30px; border-radius:7px;
  background:var(--text); color:var(--ink);
  display:grid; place-items:center;
  font-family:var(--f-impact); font-size:20px; line-height:1;
  padding-top:2px;
}
.topbar .home .wm{ font-family:var(--f-impact); font-size:17px; letter-spacing:.02em; }
.topbar .home .wm em{ font-style:normal; color:var(--ice); }
.topbar nav{ display:flex; gap:4px; }
.topbar nav a{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-faint); text-decoration:none; padding:7px 11px; border-radius:6px;
}
.topbar nav a:hover{ color:var(--text); background:var(--surface); }
.topbar nav a.active{ color:var(--ice); }