/* ══════════════════════════════════════════════════════════
   BROOKEGLAZE.COM — SHARED DESIGN (all pages)
   Change a color once here, every page updates.
   --accent = blue rules/underlines · --tally = red dot
   ══════════════════════════════════════════════════════════ */
:root{
  --ink:#07090d;
  --room:#0c0f15;
  --panel:#121722;
  --line:rgba(255,255,255,.08);
  --text:#e9ecf3;
  --muted:#8b93a7;
  --accent:#3d7bff;
  --tally:#ff2e3c;
  --slab:#161c2a;
  --shadow:0 18px 50px rgba(0,0,0,.55);
}
html[data-theme="light"]{
  --ink:#f5f6f8;
  --room:#ffffff;
  --panel:#ffffff;
  --line:rgba(10,14,22,.12);
  --text:#10141d;
  --muted:#5b6376;
  --accent:#1f4fd8;
  --tally:#e0121f;
  --slab:#eef0f5;
  --shadow:0 14px 36px rgba(15,20,35,.14);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--text);
  font-family:'Inter',system-ui,sans-serif;
  font-size:16px;
  line-height:1.6;
  transition:background .35s ease,color .35s ease;
}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:auto}
.mono{font-family:'IBM Plex Mono',monospace}

/* ── Persistent score-bug header ─────────────────────────── */
header{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.bug{
  max-width:1200px;margin:0 auto;padding:0 20px;
  display:flex;align-items:stretch;gap:0;height:56px;
}
.bug-id{
  display:flex;align-items:center;gap:10px;
  padding-right:18px;border-right:1px solid var(--line);
}
.tally{
  width:9px;height:9px;border-radius:50%;
  background:var(--tally);
  box-shadow:0 0 10px var(--tally);
  animation:tally 2.4s ease-in-out infinite;
}
@keyframes tally{0%,100%{opacity:1}50%{opacity:.45}}
.bug-id .name{
  font-family:'Anton',sans-serif;font-size:17px;letter-spacing:.06em;
  text-transform:uppercase;white-space:nowrap;
}
.bug-id .role{font-size:10.5px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;white-space:nowrap}
nav{display:flex;align-items:center;margin-left:18px;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
nav a{
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);padding:8px 12px;border-radius:3px;white-space:nowrap;
  transition:color .2s;
}
nav a:hover,nav a:focus-visible{color:var(--text)}
nav a.live{color:var(--text);position:relative}
nav a.live::after{
  content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;background:var(--accent);
}
.theme-toggle{
  margin-left:auto;display:flex;align-items:center;gap:8px;
  background:var(--panel);border:1px solid var(--line);border-radius:4px;
  padding:7px 12px;cursor:pointer;color:var(--text);
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;
  align-self:center;
  transition:border-color .2s;
}
.theme-toggle:hover{border-color:var(--accent)}
.theme-toggle .sq{width:8px;height:8px;background:var(--accent)}

/* ── Hero ────────────────────────────────────────────────── */
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.hero{padding:84px 0 60px;border-bottom:1px solid var(--line)}
.hero.compact{padding:64px 0 48px}
.hero .eyebrow{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.22em;
  color:var(--accent);text-transform:uppercase;margin-bottom:22px;
  display:flex;align-items:center;gap:10px;
}
.hero .eyebrow::before{content:"";width:26px;height:1px;background:var(--accent)}
h1{
  font-family:'Anton',sans-serif;font-weight:400;
  font-size:clamp(44px,7.5vw,96px);
  line-height:.98;letter-spacing:.005em;text-transform:uppercase;
  max-width:15ch;
}
.hero.compact h1{font-size:clamp(36px,6vw,72px)}
h1 .dim{color:var(--muted)}
.hero p{max-width:62ch;color:var(--muted);margin-top:28px;font-size:17px}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:28px;margin-top:36px;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;
  color:var(--muted);text-transform:uppercase;
}
.hero-meta b{color:var(--text);font-weight:500}
.hero-meta .onair{color:var(--tally)}

/* ── Section slabs ───────────────────────────────────────── */
section{padding:56px 0 8px}
.slab{
  display:flex;align-items:center;gap:14px;
  background:var(--slab);border:1px solid var(--line);
  padding:12px 16px;margin-bottom:28px;
}
.slab .tick{width:4px;height:22px;background:var(--accent)}
.slab h2{
  font-family:'Anton',sans-serif;font-weight:400;font-size:20px;
  letter-spacing:.05em;text-transform:uppercase;
}
.slab .tc{
  margin-left:auto;font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;letter-spacing:.14em;color:var(--muted);
}

/* ── Project cards / masonry ─────────────────────────────── */
.board{columns:2;column-gap:22px}
@media(max-width:820px){.board{columns:1}}
.card{
  break-inside:avoid;margin:0 0 22px;
  background:var(--panel);border:1px solid var(--line);
  box-shadow:var(--shadow);
  overflow:hidden;
  transform:translateY(14px);opacity:0;
  transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .55s ease;
}
.card.in{transform:none;opacity:1}
.card .frame{background:#000;min-height:60px;position:relative}
html[data-theme="light"] .card .frame{background:#0c0f15}
.card .media{display:block;width:100%;height:auto}
/* small LOOP / SOUND badge on video cards */
.card .vtag{
  position:absolute;top:9px;right:9px;
  font-size:9px;letter-spacing:.16em;
  color:var(--text);background:rgba(7,9,13,.72);
  border:1px solid rgba(255,255,255,.18);
  padding:3px 7px;border-radius:2px;
  pointer-events:none;
}
.lt{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;border-top:2px solid var(--accent);
}
.lt .dot{width:6px;height:6px;border-radius:50%;background:var(--tally);flex:none}
.lt .t{font-size:13.5px;font-weight:600;letter-spacing:.01em}
.lt .m{
  margin-left:auto;font-family:'IBM Plex Mono',monospace;
  font-size:10px;letter-spacing:.12em;color:var(--muted);
  text-transform:uppercase;white-space:nowrap;padding-left:12px;
}
.card .note{padding:0 14px 13px;color:var(--muted);font-size:13px;line-height:1.55}

/* ── Title list (DVD credits / chapter select) ───────────── */
.titles{
  border:1px solid var(--line);background:var(--panel);
  padding:28px 30px;
  columns:3;column-gap:36px;
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;
  line-height:2;color:var(--muted);
}
@media(max-width:900px){.titles{columns:2}}
@media(max-width:560px){.titles{columns:1}}
.titles li{
  list-style:none;break-inside:avoid;
  border-bottom:1px dotted var(--line);
  display:flex;gap:10px;
}
.titles li::before{
  content:counter(title-counter, decimal-leading-zero);
  counter-increment:title-counter;
  color:var(--accent);flex:none;
}
.titles{counter-reset:title-counter}

/* ── Feature block (origins / helicam) ───────────────────── */
.origins{
  border:1px solid var(--line);background:var(--panel);
  padding:34px 30px;margin:26px 0 0;
  display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start;
}
@media(max-width:680px){.origins{grid-template-columns:1fr}}
.origins .stamp{
  font-family:'Anton',sans-serif;font-size:34px;line-height:1;
  color:var(--accent);text-transform:uppercase;letter-spacing:.02em;
  border:2px solid var(--accent);padding:10px 14px;transform:rotate(-2deg);
}
.origins h3{
  font-family:'Anton',sans-serif;font-weight:400;font-size:19px;
  letter-spacing:.05em;text-transform:uppercase;margin-bottom:10px;
}
.origins p{color:var(--muted);font-size:14.5px;max-width:70ch}

/* ── Footer ──────────────────────────────────────────────── */
footer{margin-top:80px;border-top:1px solid var(--line);padding:36px 0 48px}
.foot{
  display:flex;flex-wrap:wrap;gap:18px;align-items:center;
  font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.14em;color:var(--muted);text-transform:uppercase;
}
.foot a{color:var(--text);border-bottom:1px solid var(--accent);padding-bottom:1px}
.foot .end{margin-left:auto}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
  .card{transform:none;opacity:1}
}
/* ══════════════════════════════════════════════════════════
   MOBILE NAV (hamburger) — append to the bottom of style.css
   Desktop is unchanged; everything here is inside a mobile
   media query except the hamburger button's base (hidden) state.
   ══════════════════════════════════════════════════════════ */

/* hamburger button — hidden on desktop, shown on mobile */
.hamburger{
  display:none;
  margin-left:auto;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:42px;height:42px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:4px;
  cursor:pointer;
  align-self:center;
}
.hamburger span{
  display:block;
  width:18px;height:2px;
  margin:0 auto;
  background:var(--text);
  transition:transform .25s ease, opacity .2s ease;
}
/* X animation when open */
body.nav-open .hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .hamburger span:nth-child(2){opacity:0}
body.nav-open .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:700px){
  /* keep the header a tidy single row: logo left, hamburger right */
  .hamburger{display:flex}

  /* the nav becomes a dropdown panel under the header */
  nav#primaryNav{
    position:absolute;
    top:56px;                /* height of .bug header */
    left:0;right:0;
    margin:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    overflow:hidden;
    background:color-mix(in srgb, var(--ink) 96%, transparent);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    max-height:0;            /* collapsed by default */
    transition:max-height .3s ease;
  }
  body.nav-open nav#primaryNav{
    max-height:70vh;         /* opened */
    box-shadow:var(--shadow);
  }

  nav#primaryNav a{
    padding:16px 24px;
    font-size:13px;
    letter-spacing:.18em;
    border-top:1px solid var(--line);
  }
  nav#primaryNav a:first-child{border-top:0}
  /* active-page underline looks wrong stacked — use a left bar instead */
  nav#primaryNav a.live::after{display:none}
  nav#primaryNav a.live{
    border-left:3px solid var(--accent);
    padding-left:21px;
  }

  /* theme toggle sits at the bottom of the opened menu, under the links */
  nav#primaryNav .theme-toggle{
    margin:0;
    width:100%;
    justify-content:center;
    border:0;
    border-top:1px solid var(--line);
    border-radius:0;
    padding:16px 24px;
  }
  nav#primaryNav .theme-toggle:hover{border-color:transparent}
}
/* ══════════════════════════════════════════════════════════
   HERO NAME + MOBILE HERO SPACING
   Append to the bottom of style.css
   ══════════════════════════════════════════════════════════
   Big blue "BROOKE GLAZE" at the top of the hero.
   (The small name in the header bug is removed in render.js.)

   Sized from Anton's real letter widths:
     "BROOKE GLAZE" = 5.24 x font-size (5.42 with letter-spacing)
   Always ONE line, filling the width.
   ══════════════════════════════════════════════════════════ */

.hero-name{
  font-family:'Anton',sans-serif;
  font-weight:400;
  text-transform:uppercase;
  color:var(--accent);
  letter-spacing:.015em;
  line-height:.95;
  margin-bottom:16px;
  white-space:nowrap;
  font-size:min(calc((100vw - 44px) / 5.50), 143px);
}

/* sub-pages use the compact hero */
.hero.compact .hero-name{
  font-size:min(calc((100vw - 44px) / 5.50), 104px);
  margin-bottom:12px;
}

/* ── Phones ──────────────────────────────────────────────
   Name runs as large as the screen allows on one line, and
   the hero tightens up so there's less dead space between
   the header bug, the name, and the intro paragraph.        */
@media (max-width:700px){

  /* tighten the gap above the name */
  .hero{ padding:18px 0 40px; }
  .hero.compact{ padding:16px 0 34px; }

  .hero-name,
  .hero.compact .hero-name{
    letter-spacing:0;
    margin-left:-4px;              /* optical alignment at large sizes */
    font-size:calc((100vw - 26px) / 5.32);
    line-height:.92;
    margin-bottom:12px;
  }

  /* pull the eyebrow and intro paragraph up */
  .hero .eyebrow{ margin-bottom:16px; }
  .hero p{ margin-top:20px; }
  .hero-meta{ margin-top:24px; }
}

/* the header bug now shows only the role line — keep it vertically centered */
.bug-id .role{ line-height:1.2; }