/* Frederick & Sons — House Kit CSS. The shared estate design system + alive layer.
   Extracted from the homepage + Fifty50 precedents. Include on every landing page:
     <link rel=stylesheet href="/house.css">
   Set ONE accent per surface before this loads (or after, via a later rule):
     :root{ --accent:#c8ff00 }   // master/store/smb/security/status/trades = lime
   Provides: tokens, editorial grid, type system, #stream code-feed, #scan scanlines,
   reading scrims, headline wipe-in, CTA/list components, reduced-motion guards.
   Pairs with /house.js. */

:root{
  --ink:#0a0a0a; --paper:#f2f1ea; --grey:#a4a49c; --faint:#8a8a82;
  --line:rgba(242,241,234,.13); --line-2:rgba(242,241,234,.22);
  --grotesk:"Archivo",system-ui,sans-serif; --mono:"Space Mono",ui-monospace,monospace;
  --accent:#c8ff00;                 /* default master lime; each surface may override */
}

/* editorial grid — the signature background on every page */
.house body, body.house{
  background:var(--ink); color:var(--paper); font-family:var(--grotesk); line-height:1.1;
  -webkit-font-smoothing:antialiased; font-synthesis:none; text-rendering:optimizeLegibility; font-kerning:normal;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:100% 88px, 8.333vw 100%;
}
body.house::selection, body.house *::selection{ background:var(--accent); color:var(--ink) }

/* type system */
.h-mono{ font-family:var(--mono) }
.h-accent{ color:var(--accent) }
.h-head{
  font-family:var(--grotesk); font-weight:900; font-stretch:120%; text-transform:uppercase;
  font-size:clamp(46px,12vw,176px); line-height:.84; letter-spacing:-.03em; margin-left:-.02em;
}
.h-head .br{ display:block; white-space:nowrap }
.h-head em{ font-style:normal; -webkit-text-stroke:3px var(--paper); color:transparent }  /* outline word */
html.js .h-head{ clip-path:inset(0 103% 0 0) }
html.js .h-head.in{ clip-path:inset(0 -6% 0 0); transition:clip-path .85s cubic-bezier(.2,.85,.25,1) }
.h-kicker{ font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#cbcbc3 }
.h-kicker b{ color:var(--paper); font-weight:400 }

/* live status dot */
.h-dot{ display:inline-block; width:7px; height:7px; background:var(--accent); vertical-align:middle }
@keyframes h-blink{ 50%{opacity:.25} }
body.house .h-dot{ animation:h-blink 1.4s steps(2) infinite }

/* CTA + components (square, no glass/shine) */
.h-cta{ display:flex; gap:16px; flex-wrap:wrap; font-family:var(--mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase }
.h-cta a{ border:1px solid var(--paper); padding:14px 22px; transition:background .2s,color .2s,border-color .2s }
.h-cta a.k{ border-color:var(--accent); color:var(--accent) }
.h-cta a:hover{ background:var(--accent); color:var(--ink); border-color:var(--accent) }

/* scroll-reveal rows */
.h-reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s,transform .6s }
.h-reveal.in{ opacity:1; transform:none }

/* ===== the alive layer: code-stream + scanlines + scrims ===== */
#h-stream{
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  font-family:var(--mono); font-size:12.5px; line-height:1.8; color:var(--accent); opacity:.34;
  padding:64px clamp(16px,4vw,40px); column-count:3; column-gap:48px; white-space:nowrap; font-weight:400;
  text-shadow:0 0 6px color-mix(in srgb, var(--accent) 30%, transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 4%,#000 96%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 4%,#000 96%,transparent);
}
#h-stream b{ color:#fff; font-weight:700; text-shadow:0 0 8px rgba(255,255,255,.4) }
/* WHY: lines are nowrap and often WIDER than their column — CSS multicol doesn't clip,
   so long lines bled INTO the neighboring column and the stream read as overlapping
   garbage on desktop/tablet (Preacher, 2026-07-07). Clip each line to its column and
   forbid mid-line column breaks (no split glyphs at column seams). */
#h-stream>div{ overflow:hidden; break-inside:avoid }
@media(max-width:760px){ #h-stream{ column-count:1; opacity:.06; font-size:11px } }
#h-scan{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.16) 2px 3px); mix-blend-mode:multiply;
}
/* central reading scrim — sits ABOVE the stream (z0) and BELOW content (z2) so the
   code-feed glows on the edges but body text stays fully crisp. This is what keeps
   the alive layer from turning into unreadable noise (the precedents' per-section
   radial scrims, generalized). */
body.house::after{
  content:''; position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 66% 92% at 50% 44%, rgba(10,10,10,.94), rgba(10,10,10,.72) 48%, rgba(10,10,10,.34) 74%, transparent 88%);
}
/* content text on a house page always carries a subtle shadow for the last mile of legibility */
body.house main, body.house main *{ text-shadow:0 1px 3px rgba(10,10,10,.85) }

/* TWO-TIER treatment. Default (hero-forward landings: homepage/Fifty50/Trades/Sentinel/smb
   landing) = full stream (.34), the stream IS the design. Add class "house-doc" for
   content-dense pages (security, legal, dense catalogs) → the stream drops to subtle
   ambiance + a near-solid reading scrim so paragraphs/cards stay razor-crisp. */
body.house.house-doc #h-stream{ opacity:.05 }
body.house.house-doc::after{
  background:radial-gradient(ellipse 58% 98% at 50% 46%, rgba(10,10,10,.985), rgba(10,10,10,.9) 40%, rgba(10,10,10,.64) 70%, transparent 92%);
}
/* reading scrim: put class h-scrim on content sections so the stream never hurts legibility */
.h-scrim{ position:relative; z-index:2 }
.h-scrim::before{
  content:''; position:absolute; inset:-10px; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 92% 70% at 40% 46%,rgba(10,10,10,.82),rgba(10,10,10,.5) 55%,transparent 82%);
}
body.house main, body.house header, body.house footer{ position:relative; z-index:2 }
body.house h1,body.house h2,body.house h3,body.house p,body.house a,body.house span{ }
.h-shadow{ text-shadow:0 1px 4px rgba(10,10,10,.92),0 0 2px rgba(10,10,10,.7) }

/* focus + reduced-motion */
body.house a:focus-visible, body.house button:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }
@media(prefers-reduced-motion:reduce){
  .h-head{ clip-path:none!important }
  #h-scan{ display:none }
  body.house .h-dot{ animation:none }
  .h-reveal{ opacity:1; transform:none }
}