/* ============================================================
   buff.css — the Pro pass (2026-08-24)

   Additive layer loaded after site.css. One idea carries it: the
   white-on-red engraved plate is the only chromatic thing on this
   site because it IS the product — so safety red becomes the
   action colour sitewide. Buttons, links, focus rings and hover
   states all take the plate's red; everything else stays graphite
   on vellum. site.css remains untouched underneath as fallback.
   ============================================================ */

:root{
  /* the plate red. Sampled from engraved 1-ply red/white stock —
     bright enough to read as warning red on vellum, dark enough to
     carry white text at AA. */
  --plate-red:#c0182c;
  --plate-red-deep:#9e1223;
  --plate-red-soft:rgba(192,24,44,.08);
  --plate-red-line:rgba(192,24,44,.28);
  /* warm sun wash for the hero — a hint of gold light, not a colour
     change. Reads as morning sun on drafting paper. */
  --sun-a:rgba(255,171,64,.075);
  --sun-b:rgba(255,140,50,.04);
  /* the cut — the beam that falls onto the hero plate (buff.js draws
     it on a canvas). Raw r,g,b triplets so the script can set its own
     alpha; on vellum it paints in ink (source-over) and stays quiet. */
  --cut-blend:source-over;
  --cut-core:158,18,35;
  --cut-red:192,24,44;
  --cut-amber:226,112,38;
  --cut-gain:.62;
}
:root[data-theme="dark"]{
  --plate-red:#e8324a;
  --plate-red-deep:#c0182c;
  --plate-red-soft:rgba(232,50,74,.10);
  --plate-red-line:rgba(232,50,74,.35);
  --sun-a:rgba(255,171,64,.06);
  --sun-b:rgba(255,140,50,.03);
  --cut-blend:lighter;
  --cut-core:255,244,228;
  --cut-red:232,50,74;
  --cut-amber:255,171,64;
  --cut-gain:1;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --plate-red:#e8324a;
    --plate-red-deep:#c0182c;
    --plate-red-soft:rgba(232,50,74,.10);
    --plate-red-line:rgba(232,50,74,.35);
    --sun-a:rgba(255,171,64,.06);
    --sun-b:rgba(255,140,50,.03);
    --cut-blend:lighter;
    --cut-core:255,244,228;
    --cut-red:232,50,74;
    --cut-amber:255,171,64;
    --cut-gain:1;
  }
}

/* ---------------- selection & focus ---------------- */
::selection{background:var(--plate-red);color:#fff}
:focus-visible{
  outline:2px solid var(--plate-red);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------------- buttons — precise monochrome controls ---------------- */
/* Primary actions use the site's inverted ink-and-paper pair: graphite in
   light mode and white in dark mode. Red stays with the engraved product and
   small editorial accents instead of making the interface feel promotional. */
.btn-p,.btn-a{
  background:var(--action-bg);color:var(--action-fg);
  border-color:var(--action-bg);
  border-radius:7px;
  box-shadow:none;
  font-weight:600;
  letter-spacing:-.01em;
  transition:background-color .15s ease,border-color .15s ease,
             transform .15s ease;
}
.btn-p:hover,.btn-a:hover{
  color:var(--action-fg);
  opacity:.86;
  transform:translateY(-1px);
}
.btn-p:active,.btn-a:active{
  transform:translateY(0);
}

/* secondary buttons gain confidence on hover */
.btn-s:hover,.btn-o:hover{
  border-color:var(--ink);
  transform:translateY(-1px);
  transition:transform .15s ease,border-color .15s ease;
}

/* header CTA matches */
.nav .cta{
  background:var(--action-bg);color:var(--action-fg);
  border:1px solid var(--action-bg);
  border-radius:7px;
  box-shadow:none;
  font-weight:600;
  letter-spacing:-.01em;
  transition:background-color .15s ease,border-color .15s ease,
             transform .15s ease;
}
.nav .cta:hover{
  background:var(--action-bg);color:var(--action-fg);
  opacity:.86;
  transform:translateY(-1px);
}
.nav .cta:active{transform:translateY(0)}

/* ---------------- kickers — the red tick ---------------- */
.kicker::before{
  background:var(--plate-red);
  opacity:1;width:20px;height:2px;
}
.dark .kicker::before{background:var(--plate-red);opacity:1}

/* ---------------- hero — morning sun on the sheet ---------------- */
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(52% 42% at 78% -6%,var(--sun-a),transparent 68%),
    radial-gradient(36% 30% at 88% 4%,var(--sun-b),transparent 70%);
}
.hero h1{
  font-size:clamp(2.9rem,7vw,92px);
  letter-spacing:-.032em;
}
.hero h1 .shimmer{
  color:var(--plate-red);
}
.hero h1 .shimmer::after{display:none}

/* the hero photo frame gets a hairline that warms on hover */
.hero-shot .frame{transition:box-shadow .3s ease}
.hero-shot .frame:hover{
  box-shadow:0 0 0 1px var(--plate-red-line),
             0 24px 48px -24px rgba(23,23,23,.35);
}

/* stats numbers set in serif — a quiet typographic upgrade */
.stats .n{
  font-family:var(--serif);
  font-weight:400;font-size:clamp(26px,2.6vw,32px);
  letter-spacing:-.01em;
}

/* ---------------- pill — live dot goes red ---------------- */
.pill i{background:var(--plate-red);animation:pillpulse 2.4s ease-in-out infinite}
@keyframes pillpulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.55;transform:scale(.8)}
}

/* ---------------- marquee — edges fade, hover pauses ---------------- */
.marq{
  mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
}
.marq:hover .marq-in{animation-play-state:paused}
.marq .plate{transition:transform .2s ease}
.marq .plate:hover{transform:rotate(-1.5deg) translateY(-2px)}

/* ---------------- cards — lift with a red rule ---------------- */
.card{
  transition:transform .22s cubic-bezier(.22,.75,.3,1),
             box-shadow .22s ease,background-color .18s ease;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 0 0 1px var(--plate-red-line),
             0 14px 32px -18px rgba(23,23,23,.28);
}
.card .card-foot b{color:inherit}
.card:hover .card-body h3{color:var(--plate-red)}

/* gallery figures keep their zoom but pick up the warm shadow */
.gal figure{transition:transform .3s cubic-bezier(.22,.75,.3,1)}
.gal figure:hover{transform:translateY(-3px)}
.gal figure img{
  filter:saturate(.92) contrast(1.02);
}
.gal figure:hover img{
  filter:saturate(1.05) contrast(1.05);
}

/* ---------------- inline links — red underline sweep ---------------- */
.ilink{
  text-decoration-color:var(--plate-red-line);
  text-underline-offset:3px;
  transition:text-decoration-color .15s ease,color .15s ease;
}
.ilink:hover{text-decoration-color:var(--plate-red)}

/* ---------------- tables — red row marker ---------------- */
tr:hover td{transition:background-color .12s ease}

/* ---------------- footer wordmark tick ---------------- */
.foot b[style]{letter-spacing:-.04em}

/* ---------------- the cut — a beam falls onto the plate ---------------- */
/* buff.js appends one canvas to the hero and draws a red-hot beam from
   the top of the section down onto the top edge of the photo frame, with
   sparks fanning out along that edge — the laser meeting the plate. It
   sits under the frame (z 1) so the frame clips the splash for free.
   Under 940px the hero stacks and the beam would cross the copy, so it
   is not drawn there at all. (Shipped 2026-09-15.) */
.hero .cut{position:absolute;inset:0;width:100%;height:100%;z-index:0;
  pointer-events:none;display:block}
@media (max-width:940px){.hero .cut{display:none}}
@media print{.hero .cut{display:none !important}}

/* ---------------- reduced motion — stand everything down ------- */
@media (prefers-reduced-motion:reduce){
  .btn-p,.btn-a,.btn-p::after,.btn-a::after,
  .card,.gal figure,.marq .plate,.pill i,.nav .cta{
    transition:none !important;animation:none !important;
    transform:none !important;
  }
  .marq{mask-image:none;-webkit-mask-image:none}
}