/* ===========================================================================
   The Neon Institute -- "after dark, glowing"

   The ad is the brief: a black field, a workshop photo, and everything else
   drawn in glowing orange tube. This is the one site in the family that is
   dark by default -- a light theme would misrepresent the craft entirely.

   Tube    #ff5a2b   the neon core
   Ember   #c23a12   the dimmed end of the glow
   Warm    #f2a07a   the peach the glow throws onto nearby surfaces
   =========================================================================== */

:root {
  --font: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-head: "Bebas Neue", Impact, "Arial Narrow Bold", sans-serif;

  --ink: #f4e9e3;
  --ink-soft: #b09b91;
  --line: #33241d;
  --bg: #0a0708;
  --bg-soft: #140f0d;

  --radius: 4px;
  --head-weight: 400;          /* Bebas has a single weight */
  --head-spacing: .04em;

  --brand-contrast: #150703;
  --hero-ink: #fff;
  --header-bg: rgba(10, 7, 8, .92);
  --footer-bg: #060405;
  --glow: 0 0 6px rgba(255, 90, 43, .75), 0 0 22px rgba(255, 90, 43, .45);
}

body { background: var(--bg); }

h1, h2, h3, h4 { color: #fff; }
h1, h2 { text-shadow: var(--glow); }

a { color: var(--brand); }
a:hover { color: var(--accent); }

/* ---- Header: a lit sign rail -------------------------------------------- */
.site-header {
  border-bottom: 1px solid var(--brand);
  box-shadow: 0 1px 14px rgba(255, 90, 43, .35);
  backdrop-filter: blur(6px);
}
.brand-name {
  font-family: var(--font-head); color: #fff;
  font-size: 1.6rem; letter-spacing: .06em; text-transform: uppercase;
  text-shadow: var(--glow);
}
.brand { color: #fff; }
.site-nav a { color: var(--ink-soft); text-transform: uppercase; letter-spacing: .09em; font-size: .82rem; font-weight: 600; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: #fff; text-shadow: var(--glow); }
.nav-toggle span { background: var(--brand); box-shadow: var(--glow); }

/* ---- Hero: the workshop photo behind a neon frame ----------------------- */
.hero {
  --hero-bg: #000;
  padding: 110px 20px 118px;
  min-height: min(72vh, 620px);
  display: grid;
  align-content: center;
  border-bottom: 1px solid var(--brand);
}
/* Positioned low enough that the neon on the bench -- the actual work --
   stays in frame under the headline. */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(10,7,8,.8) 0%, rgba(10,7,8,.42) 48%, rgba(10,7,8,.9) 100%),
    url("/assets/img/workshop.jpg") center 68% / cover no-repeat;
}

/* Video sleeper: drop assets/img/hero-video.mp4 in and home.php renders
   these layers; the still photo becomes the poster frame. */
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 68%;
}
.hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(10,7,8,.8) 0%, rgba(10,7,8,.42) 48%, rgba(10,7,8,.9) 100%);
}
.hero.has-video::before { background-image: none; background-color: #000; }
/* The thin glowing rectangle that frames the printed ad. */
.hero::after {
  content: "";
  position: absolute; inset: 18px;
  border: 2px solid var(--brand);
  border-radius: 3px;
  box-shadow: var(--glow), inset 0 0 18px rgba(255,90,43,.28);
  pointer-events: none;
}
.hero h1 {
  font-size: clamp(2.6rem, 8vw, 5.2rem);
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(255,90,43,.9), 0 0 30px rgba(255,90,43,.6), 0 0 60px rgba(255,90,43,.35);
}
.hero .lede {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 1rem;
  font-weight: 600;
}

/* ---- Buttons: lit tube, brighter on hover ------------------------------- */
.btn {
  text-transform: uppercase; letter-spacing: .1em; font-size: .84rem;
  box-shadow: var(--glow);
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: #150703; }
.btn-ghost {
  background: transparent; color: var(--brand);
  border-color: var(--brand); box-shadow: var(--glow);
}
.btn-ghost:hover { background: rgba(255,90,43,.16); color: #fff; border-color: var(--accent); }

/* ---- Cards: dark glass, edge-lit ---------------------------------------- */
.card {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  transition: border-color .2s, box-shadow .2s;
}
.card:hover { border-color: var(--brand); box-shadow: 0 0 18px rgba(255,90,43,.22); }
.card h2 { font-size: 1.5rem; text-transform: uppercase; letter-spacing: .04em; }

.band {
  background: var(--bg-soft);
  border-top: 1px solid var(--brand);
  box-shadow: inset 0 1px 20px rgba(255,90,43,.16);
}

.section-title { border-bottom-color: var(--brand); }
.prose blockquote { border-left-color: var(--brand); color: var(--ink-soft); }
.prose code { background: #1c1310; color: var(--accent); }
.tag { background: #1c1310; border-color: var(--line); color: var(--ink-soft); }
.notice { background: #1c1310; border-color: var(--brand); color: var(--ink); }

.site-footer { border-top: 1px solid var(--brand); color: var(--ink-soft); }
.footer-name { font-family: var(--font-head); font-size: 1.5rem; letter-spacing: .06em; text-transform: uppercase; text-shadow: var(--glow); }
.site-footer a { color: var(--accent); }

/* The glow is decorative -- drop it when motion/contrast preferences ask. */
@media (prefers-contrast: more) {
  :root { --glow: none; }
  h1, h2, .hero h1 { text-shadow: none; }
}