/* The shared frame for brandonkessinger.com (hq #198, mood A: the Factory
   look leads). One paper, one ink, one accent, one headline face, matching
   factory.brandonkessinger.com so the two read as one site. Loud only where
   it signs the page (the hazard stripe, stencil page titles); calm white
   panels and sentence-case subheads wherever people read.

   Tokens are copied from factory-floor/public/factory.css on purpose: keep
   them in step when either side changes. Fonts are self-hosted (OFL, see
   /fonts/OFL.txt), so no visitor IP goes to Google. The dashboard keeps its
   own styles and never loads this file. */

@font-face{font-family:'Big Shoulders Stencil';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/big-shoulders-stencil-700.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/plex-sans-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/plex-sans-600.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/plex-mono-400.woff2') format('woff2')}
@font-face{font-family:'Kalam';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/kalam-400.woff2') format('woff2')}

:root {
  --ink: #16150F;
  --ink-2: #3D3A30;
  --muted: #6B675A;
  --safety: #F2C300;
  --blueprint: #1F4FA8;
  --paper: #F5F2E8;
  --paper-2: #ECE7D8;
  --panel: #FFFDF7;
  --grid: rgba(31, 79, 168, .09);
  --grid-major: rgba(31, 79, 168, .16);

  --stencil: "Big Shoulders Stencil", Impact, "Arial Narrow", sans-serif;
  --sans: "IBM Plex Sans", -apple-system, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --hand: "Kalam", "Comic Sans MS", cursive;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  color: var(--ink);
  font: 17px/1.55 var(--sans);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
}

a { color: var(--blueprint); }
:focus-visible { outline: 3px solid var(--blueprint); outline-offset: 2px; }
img { max-width: 100%; display: block; }

.hazard {
  height: 12px;
  background: repeating-linear-gradient(-45deg, var(--safety) 0 16px, var(--ink) 16px 32px);
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 18px 40px; }

/* The shared header: the same on every page of both sites. */
.site-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 0; font: 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em;
}
.site-head a { color: var(--ink); text-decoration: none; }
.site-head .wordmark { font-weight: 400; white-space: nowrap; }
.site-nav { display: flex; gap: 16px; }
.site-nav a { padding: 4px 0; border-bottom: 2px solid transparent; }
.site-nav a:hover { border-bottom-color: var(--ink); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--safety); box-shadow: inset 0 -4px 0 var(--safety); }

/* Page titles: stencil capitals, the only loud type. */
.title {
  margin: 0; font: 700 clamp(46px, 11.5vw, 104px)/.9 var(--stencil);
  text-transform: uppercase; letter-spacing: .01em;
}
.title .hl {
  background: var(--safety); padding: 0 .08em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.lede { font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: 40ch; margin: 18px 0 0; }
.note {
  font: 400 20px/1.35 var(--hand); color: var(--blueprint);
  margin: 12px 0 0; max-width: 34ch; transform: rotate(-1deg);
}
.label { font: 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

section { margin-top: 48px; }
.head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  border-bottom: 3px solid var(--ink); padding-bottom: 6px; margin-bottom: 16px;
}
.head h2 { margin: 0; font: 700 34px/1 var(--stencil); text-transform: uppercase; letter-spacing: .02em; }
.head a.label { color: var(--ink); }

/* Reading panels: calm, white, a hard edge but no shouting. */
.panel {
  background: var(--panel); border: 2px solid var(--ink); border-radius: 3px;
  padding: 18px 20px;
}
.panel h3 { margin: 0 0 6px; font: 600 20px/1.3 var(--sans); }
.panel p { margin: 10px 0 0; color: var(--ink-2); }
.panel p:first-of-type { margin-top: 0; }
.panel h3 + p { margin-top: 0; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 10px 16px; border: 2px solid var(--ink); border-radius: 3px;
  font: 600 15px/1.2 var(--sans); text-decoration: none; color: var(--ink); background: var(--panel);
}
.btn.go { background: var(--safety); }
.btn.dark { background: var(--ink); color: var(--safety); }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.btn.dark:hover { box-shadow: 3px 3px 0 var(--safety); }

/* Home: hero */
.hero { padding: 22px 0 4px; }
.hero .label { display: block; margin-bottom: 14px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* Home: the three live apps */
.apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.app {
  display: flex; flex-direction: column; background: var(--panel);
  border: 2px solid var(--ink); border-radius: 3px; overflow: hidden;
}
.app-top { display: flex; align-items: center; gap: 12px; padding: 14px 16px 12px; border-bottom: 2px solid var(--ink); }
.app-top img { width: 52px; height: 52px; border-radius: 12px; border: 1px solid rgba(22,21,15,.2); }
.app-top h3 { margin: 0; font: 700 28px/1 var(--stencil); text-transform: uppercase; letter-spacing: .02em; }
.app-top .label { display: block; margin-top: 4px; }
.live {
  margin-left: auto; align-self: flex-start; white-space: nowrap;
  font: 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em;
  background: var(--ink); color: var(--safety); padding: 5px 7px; border-radius: 2px;
}
.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 16px 0; background: var(--paper-2); }
.shots img { width: 100%; height: auto; aspect-ratio: 600 / 1300; object-fit: cover; object-position: top; border-radius: 10px 10px 0 0; border: 2px solid var(--ink); border-bottom: 0; }
.app-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; flex: 1; border-top: 2px solid var(--ink); }
.app-body p { margin: 0; color: var(--ink-2); font-size: 16px; }
.app-links { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.app-links a:not(.btn) { font-size: 15px; }

/* Home: the floor strip */
.floor {
  background: var(--ink); color: var(--paper); border-radius: 3px; overflow: hidden;
  border: 2px solid var(--ink);
}
.floor .hazard { height: 10px; }
.floor-in { padding: 20px 20px 22px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 22px; align-items: center; }
.floor h2 {
  margin: 0; font: 700 clamp(40px, 7vw, 64px)/.9 var(--stencil); text-transform: uppercase; color: var(--safety);
}
.floor p { margin: 12px 0 0; color: #D9D4C3; max-width: 46ch; }
.floor .label { color: #A8A290; }
.floor .btn { margin-top: 18px; }
.crew { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.crew figure { margin: 0; background: var(--paper); border-radius: 3px; padding: 6px 4px 4px; text-align: center; }
.crew svg { width: 100%; height: auto; display: block; }
.crew figcaption { font: 10px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink); padding: 2px 0 2px; }

/* Home: tools row */
.tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tool .tag { float: right; }
.tool h3 { font-family: var(--mono); font-weight: 400; font-size: 17px; }
.tag {
  font: 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em;
  border: 1.5px solid var(--ink); padding: 4px 6px; border-radius: 2px; color: var(--ink);
}
.tag.paid { background: var(--safety); }

/* Footer */
.site-foot {
  margin-top: 56px; padding-top: 14px; border-top: 3px solid var(--ink);
  display: flex; flex-wrap: wrap; gap: 8px 18px; font: 12px/1.4 var(--mono);
  text-transform: uppercase; letter-spacing: .08em;
}
.site-foot a { color: var(--ink); }
.site-foot .sig { margin-left: auto; color: var(--muted); }

/* Tools page */
.tool-page h2.code { font-family: var(--mono); font-weight: 400; font-size: 24px; text-transform: none; letter-spacing: 0; }
.for { font-size: 16px; color: var(--ink); background: var(--paper-2); border-left: 4px solid var(--safety); padding: 8px 12px; margin: 0 0 12px; }
.proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; }
.proof div { background: var(--panel); border: 2px solid var(--ink); border-radius: 3px; padding: 12px 14px; }
.proof b { display: block; font: 700 34px/1 var(--stencil); }
.proof span { font-size: 14px; color: var(--ink-2); }
.demo { margin: 14px 0 6px; border: 2px solid var(--ink); border-radius: 3px; overflow: hidden; background: #111; }
.demo img { width: 100%; }
.caption { font-size: 14px; color: var(--muted); margin: 6px 0 0; }
.buy { margin-top: 18px; background: var(--panel); border: 3px solid var(--ink); border-radius: 3px; overflow: hidden; }
.buy .hazard { height: 8px; }
.buy-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px 6px; }
.buy-price { font: 700 56px/1 var(--stencil); }
.buy-list { font: 16px/1 var(--sans); color: var(--muted); text-decoration: line-through; margin-left: 6px; }
.buy-line { margin: 8px 0 0; color: var(--ink-2); max-width: 46ch; }
.buy-btn {
  display: inline-flex; align-items: center; min-height: 48px; padding: 12px 20px;
  background: var(--ink); color: var(--safety); border-radius: 3px; text-decoration: none;
  font: 600 17px/1.2 var(--sans);
}
.buy-mech { padding: 0 20px 18px; margin: 10px 0 0; font-size: 14px; color: var(--muted); }
code { font: 14px var(--mono); background: var(--paper-2); padding: 1px 4px; border-radius: 2px; }

@media (max-width: 860px) {
  .apps, .tools { grid-template-columns: 1fr; }
  .floor-in { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px 32px; }
  .site-nav { gap: 12px; }
  .site-head { font-size: 11px; letter-spacing: .06em; }
  .lede { font-size: 17px; }
  section { margin-top: 40px; }
  .head h2 { font-size: 30px; }
  .proof { grid-template-columns: 1fr; }
  .proof b { font-size: 28px; }
  .site-foot .sig { margin-left: 0; }
  .crew figcaption { font-size: 9px; }
}

/* Home: the live floor strip (floor-strip.js). Stations on shift light up. */
.crew figure { position: relative; opacity: .72; transition: opacity .3s; }
.crew figure.on { opacity: 1; box-shadow: inset 0 0 0 3px var(--safety); }
.crew figure.on::after {
  content: ""; position: absolute; top: 5px; right: 5px; width: 9px; height: 9px;
  border-radius: 50%; background: #3BB273; box-shadow: 0 0 0 2px var(--ink);
}
.floor-live { margin-top: 16px; padding: 12px 14px; border: 1.5px solid #4A473C; border-radius: 3px; }
.floor-live .lamp { font: 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--safety); }
.floor-live .lamp::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #3BB273; margin-right: 8px; vertical-align: 1px;
}
.floor-live ul { list-style: none; margin: 8px 0 0; padding: 0; font-size: 15px; color: var(--paper); }
.floor-live ul li + li { margin-top: 4px; }
.floor-live .floor-last { margin: 8px 0 0; font-size: 14px; color: #A8A290; }
@media (prefers-reduced-motion: reduce) { .crew figure { transition: none; } }