/* ═══════════════════════════════════════════════════════════
   187 DARK KNIGHTS — FORGE ENGINE v2
   "Metallic reds, silvers on black" — built from the wordmark.

   READ THIS BEFORE EDITING:
   The logo works because of FOUR things, not one colour.
     1. Silver has a full range — near-white specular on top edges,
        mid-grey body, near-black in recesses. Not one gradient.
     2. The red is UNDERNEATH, not on top. It bleeds up through
        cracks and glows behind edges. Never paint red on a surface;
        light it from below.
     3. Texture. Cracked stone, pitting, weathering. Flat gradients
        read as plastic next to it — that's why panel surfaces get
        a real texture image layered under the gradient.
     4. Hot flare points. Small, sharp, star-shaped. They do most of
        the "expensive" work for almost no cost.

   Load AFTER style.css. This overrides, it doesn't replace.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* ── SILVER RANGE — COOL. Blue-leaning greys.
     Any warmth in here turns the whole system to bronze/rust. ── */
  --ag-flare:#ffffff;     /* specular hit, top edge only */
  --ag-bright:#e2e8f0;    /* lit face */
  --ag-mid:#8e96a1;       /* body */
  --ag-low:#545c68;       /* turning away from light */
  --ag-deep:#2b2f36;      /* shadowed face */
  --ag-void:#131519;      /* recess / crack floor */

  /* ── RED RANGE (the light source, not a paint) ── */
  --fx-hot:#ff5b4a;       /* flare core */
  --fx-glow:#e02020;      /* bleed through cracks */
  --fx-blood:#B22222;     /* structural crimson */
  --fx-deep:#6b1010;      /* embers dying */
  --fx-ash:#2a0808;       /* burnt edge */

  /* ── BLACK RANGE ── */
  --void:#000000;
  --void-2:#050506;
  --void-3:#0a0a0c;

  /* Texture strength — tuned live in forge-lab.html, 2026-09-05.
     0.80 / 320px / contrast 1.8 / brightness 0.3 is the point where
     the cracks read clearly but text stays legible on top. */
  --tex-op:.80;
  --tex-url:url('/assets/tex/cracked-steel.jpg');
}

/* ═══ TEXTURE LAYER ═══
   NOTE ON THE SOURCE TEXTURE:
   cracked-steel.jpg is LIGHT-dominant — white ground, dark cracks.
   At soft-light that would LIGHTEN the plates, which is backwards.
   So we INVERT it with a filter, turning the cracks into bright
   fracture lines over dark metal, then multiply-blend it down.
   The vertical drip direction is deliberate — it echoes the drips
   hanging off the wordmark. */
.forged{position:relative;isolation:isolate}
.forged::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:var(--tex-url);
  background-size:320px;
  opacity:var(--tex-op);
  filter:invert(1) grayscale(1) contrast(1.8) brightness(.3);
  mix-blend-mode:overlay;
  border-radius:inherit;
}
.forged > *{position:relative;z-index:1}

/* ═══════════════════════════════════════════════════════════
   FORGED PANEL — the base metal surface
   Five stacked layers, in paint order:
     1. red underglow bleeding from beneath the bottom edge
     2. the steel body gradient
     3. a raking specular sweep across the top third
     4. texture (via .forged::before)
     5. inset rims that read as bevel
   ═══════════════════════════════════════════════════════════ */
.plate{
  position:relative;isolation:isolate;border-radius:14px;
  background:
    /* raking light, top-left — COOL, not warm */
    linear-gradient(155deg,
      rgba(226,232,240,.11) 0%,
      rgba(200,210,222,.035) 18%,
      rgba(255,255,255,0)   42%),
    /* red light from beneath — kept LOW and TIGHT so it reads as a
       light source under the plate, not as rust staining the metal */
    radial-gradient(ellipse 90% 34% at 50% 112%,
      rgba(224,32,32,.30) 0%,
      rgba(139,26,26,.10) 45%,
      transparent 70%),
    /* steel body — cold greys, blue-leaning. NO warm browns. */
    linear-gradient(168deg,
      #1b1d21 0%,
      #14161a 34%,
      #0d0e11 68%,
      #08090b 100%);
  border:1px solid rgba(170,180,195,.15);
  box-shadow:
    0 1px 0 rgba(226,232,240,.14) inset,      /* top rim catches light */
    0 -1px 0 rgba(0,0,0,.92) inset,           /* bottom rim falls away */
    0 18px 44px rgba(0,0,0,.78),
    0 0 0 1px rgba(0,0,0,.5);
}
.plate::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:var(--tex-url);background-size:320px;
  opacity:var(--tex-op);
  filter:invert(1) grayscale(1) contrast(1.8) brightness(.3);
  mix-blend-mode:overlay;border-radius:inherit;
}
.plate > *{position:relative;z-index:1}

/* Hotter variant — for things that should feel lit */
.plate-hot{
  border-color:rgba(178,34,34,.34);
  box-shadow:
    0 1px 0 rgba(255,200,200,.16) inset,
    0 -1px 0 rgba(0,0,0,.9) inset,
    0 18px 44px rgba(0,0,0,.78),
    0 0 34px rgba(224,32,32,.16);
}

/* ═══ CRACKED EDGE — red light through a fracture ═══
   A hairline of hot red along one edge, as if the plate is
   split and something is burning behind it. */
.cracked{position:relative}
.cracked::after{
  content:'';position:absolute;left:12%;right:12%;bottom:-1px;height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(224,32,32,.0) 8%,
    rgba(255,91,74,.85) 28%,
    rgba(255,140,120,1) 50%,
    rgba(255,91,74,.85) 72%,
    rgba(224,32,32,0) 92%,
    transparent 100%);
  box-shadow:0 0 12px rgba(224,32,32,.75), 0 0 26px rgba(224,32,32,.35);
  pointer-events:none;
}

/* ═══════════════════════════════════════════════════════════
   FLARE POINT — the star-burst hot spots from the logo
   Two crossed bars plus a core. Tiny, sharp, and they carry
   more "expensive" feeling than any amount of gradient work.
   ═══════════════════════════════════════════════════════════ */
.flare{position:absolute;width:2px;height:2px;pointer-events:none;z-index:3}
.flare::before,.flare::after{
  content:'';position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  background:linear-gradient(90deg,
    transparent, rgba(255,91,74,.9) 30%, #fff 50%,
    rgba(255,91,74,.9) 70%, transparent);
}
/* horizontal bar */
.flare::before{width:34px;height:1px}
/* vertical bar */
.flare::after{width:1px;height:14px;
  background:linear-gradient(180deg,
    transparent, rgba(255,91,74,.9) 30%, #fff 50%,
    rgba(255,91,74,.9) 70%, transparent)}
/* the core dot */
.flare{
  background:radial-gradient(circle,#fff 0%,var(--fx-hot) 40%,transparent 70%);
  border-radius:50%;
  box-shadow:0 0 8px rgba(255,91,74,.9),0 0 18px rgba(224,32,32,.6);
}
.flare-sm::before{width:20px}
.flare-sm::after{height:9px}
.flare-lg::before{width:52px}
.flare-lg::after{height:22px}

/* Slow breathe so they feel alive, not painted on.
   Respects reduced-motion — some people get motion sick. */
@keyframes flarePulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%    {opacity:.55;transform:scale(.82)}
}
.flare-live{animation:flarePulse 3.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  .flare-live{animation:none}
}

/* ═══════════════════════════════════════════════════════════
   FORGED TEXT — silver with red bleeding underneath
   The logo's letterforms in type form.
   ═══════════════════════════════════════════════════════════ */
.forged-text{
  /* Tight stops at the top = a HARD specular band, like light hitting a
     machined edge. A smooth fade reads as plastic; the sharp transition
     at 6-14% is what makes it read as metal. Cool greys throughout —
     any warmth here turns it to bronze. */
  background:linear-gradient(177deg,
    #ffffff 0%,
    #f4f7fa 5%,
    #cfd6de 11%,
    #8e96a1 19%,      /* hard drop — the specular terminator */
    #646b76 30%,
    #454b54 45%,
    #2b2f36 62%,
    #1a1d22 78%,
    #383e47 92%,      /* bounce light climbing back up */
    #545c68 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:
    drop-shadow(0 -1px 0 rgba(255,255,255,.7))
    drop-shadow(0 1px 0 rgba(0,0,0,1))
    drop-shadow(0 2px 1px rgba(0,0,0,.95))
    drop-shadow(0 0 16px rgba(224,32,32,.5))
    drop-shadow(0 0 36px rgba(178,34,34,.3));
}
/* Red-dominant version — for when it should look molten */
.forged-text-hot{
  /* Molten metal, not pink. The top is a near-white heat bloom that drops
     FAST into saturated red, then to near-black. Keeping the light stops
     tight is what stops it looking like a pastel gradient. */
  background:linear-gradient(177deg,
    #fff4f0 0%,
    #ffb9a4 6%,
    #ff6b45 13%,
    #ec2a18 24%,      /* hard drop into saturated */
    #c41818 40%,
    #931212 56%,
    #5e0c0c 74%,
    #2e0606 88%,
    #6b1010 100%);    /* embers glowing back at the base */
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:
    drop-shadow(0 -1px 0 rgba(255,235,225,.75))
    drop-shadow(0 1px 0 rgba(0,0,0,1))
    drop-shadow(0 2px 2px rgba(0,0,0,.95))
    drop-shadow(0 0 20px rgba(255,91,74,.65))
    drop-shadow(0 0 46px rgba(224,32,32,.4));
}

/* Fallback — background-clip:text unsupported would render these
   INVISIBLE, which is a far worse failure than being unstyled. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .forged-text{background:none;-webkit-text-fill-color:initial;
    color:var(--ag-bright);filter:none;
    text-shadow:0 1px 0 #000,0 0 12px rgba(224,32,32,.4)}
  .forged-text-hot{background:none;-webkit-text-fill-color:initial;
    color:var(--fx-blood);filter:none;
    text-shadow:0 1px 0 #000,0 0 12px rgba(224,32,32,.5)}
}

/* ═══════════════════════════════════════════════════════════
   FORGED BUTTON — struck steel with heat behind it
   ═══════════════════════════════════════════════════════════ */
.btn-forge{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 26px;border-radius:6px;cursor:pointer;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;
  letter-spacing:2px;text-transform:uppercase;text-decoration:none;
  color:#f2e6e6;
  background:
    linear-gradient(180deg,
      rgba(226,232,240,.24) 0%,
      rgba(200,210,222,.07) 26%,
      rgba(255,255,255,0)   50%),
    radial-gradient(ellipse 90% 55% at 50% 128%,
      rgba(255,91,74,.48) 0%, rgba(224,32,32,.18) 45%, transparent 74%),
    linear-gradient(180deg,#252930 0%,#191c21 40%,#0f1114 72%,#0a0b0d 100%);
  border:1px solid rgba(170,180,195,.28);
  text-shadow:0 1px 0 rgba(0,0,0,.9),0 0 10px rgba(224,32,32,.4);
  box-shadow:
    0 1px 0 rgba(255,255,255,.2) inset,
    0 -2px 0 rgba(0,0,0,.7) inset,
    0 2px 0 rgba(0,0,0,.9),
    0 6px 16px rgba(0,0,0,.7),
    0 0 20px rgba(224,32,32,.14);
  transition:transform .14s cubic-bezier(.22,1,.36,1),
             box-shadow .2s, border-color .2s, filter .2s;
}
.btn-forge::before{
  content:'';position:absolute;inset:0;z-index:0;border-radius:inherit;
  background-image:var(--tex-url);background-size:200px;
  opacity:.2;filter:invert(1) contrast(1.5) brightness(.5);
  mix-blend-mode:overlay;pointer-events:none;
}
.btn-forge > *{position:relative;z-index:1}

/* Heat rises on hover — the red under-glow climbs the face */
.btn-forge:hover{
  transform:translateY(-1px);
  border-color:rgba(255,91,74,.55);
  filter:brightness(1.1);
  box-shadow:
    0 1px 0 rgba(255,255,255,.28) inset,
    0 -2px 0 rgba(0,0,0,.7) inset,
    0 3px 0 rgba(0,0,0,.9),
    0 10px 26px rgba(0,0,0,.75),
    0 0 34px rgba(224,32,32,.5);
}
/* Struck — it physically depresses */
.btn-forge:active{
  transform:translateY(2px);
  filter:brightness(.92);
  box-shadow:
    0 3px 7px rgba(0,0,0,.85) inset,
    0 0 18px rgba(224,32,32,.3);
}
.btn-forge:disabled,.btn-forge[disabled]{
  opacity:.45;cursor:default;transform:none;filter:grayscale(.6)
}

/* ═══════════════════════════════════════════════════════════
   EMBER FIELD — slow drifting sparks over a dark section
   Pure CSS, no JS, no images. Sits behind content.
   ═══════════════════════════════════════════════════════════ */
.embers{position:relative;overflow:hidden;isolation:isolate}
.embers::before,.embers::after{
  content:'';position:absolute;inset:-10% 0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 80%, rgba(255,91,74,.9), transparent),
    radial-gradient(1px 1px   at 28% 60%, rgba(224,32,32,.7), transparent),
    radial-gradient(2px 2px   at 47% 90%, rgba(255,140,110,.8), transparent),
    radial-gradient(1px 1px   at 63% 70%, rgba(224,32,32,.6), transparent),
    radial-gradient(1.5px 1.5px at 81% 85%, rgba(255,91,74,.85), transparent),
    radial-gradient(1px 1px   at 93% 65%, rgba(178,34,34,.7), transparent);
  background-size:100% 100%;
  animation:emberRise 19s linear infinite;
}
.embers::after{animation-duration:31s;animation-delay:-8s;opacity:.6;
  transform:scaleX(-1)}
.embers > *{position:relative;z-index:1}

@keyframes emberRise{
  0%  {transform:translateY(0)      ;opacity:0}
  12% {opacity:.85}
  88% {opacity:.5}
  100%{transform:translateY(-140%)  ;opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .embers::before,.embers::after{animation:none;opacity:.35}
}

/* ═══════════════════════════════════════════════════════════
   OVERRIDE — retire the drop-cap treatment
   The ::first-letter blackletter caps from style.css fight the
   forged-text system: "WE BUILD" rendered as a giant W plus
   "E BUILD." Two metal treatments on one word is one too many.
   Headings now use forged silver; the wordmark carries the
   blackletter identity on its own.
   ═══════════════════════════════════════════════════════════ */
.font-display::first-letter,
.fd-line::first-letter{
  font-family:'Oswald',sans-serif !important;
  font-size:1em !important;
  line-height:inherit !important;
  padding-right:0 !important;
  background:none !important;
  -webkit-text-fill-color:inherit !important;
  color:inherit !important;
  filter:none !important;
}

/* Headings inherit the forged silver look automatically */
.font-display{
  background:linear-gradient(177deg,
    #ffffff 0%,#f4f7fa 5%,#cfd6de 11%,#8e96a1 19%,
    #646b76 30%,#454b54 45%,#2b2f36 62%,#1a1d22 78%,
    #383e47 92%,#545c68 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:
    drop-shadow(0 -1px 0 rgba(255,255,255,.6))
    drop-shadow(0 1px 0 rgba(0,0,0,1))
    drop-shadow(0 2px 1px rgba(0,0,0,.9))
    drop-shadow(0 0 14px rgba(224,32,32,.42));
}
/* .crimson lines inside a heading go molten instead */
.font-display .crimson,
.fd-line.crimson{
  background:linear-gradient(177deg,
    #fff4f0 0%,#ffb9a4 6%,#ff6b45 13%,#ec2a18 24%,
    #c41818 40%,#931212 56%,#5e0c0c 74%,#2e0606 88%,#6b1010 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:
    drop-shadow(0 -1px 0 rgba(255,235,225,.7))
    drop-shadow(0 1px 0 rgba(0,0,0,1))
    drop-shadow(0 0 18px rgba(255,91,74,.6));
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .font-display{background:none;-webkit-text-fill-color:initial;
    color:var(--ag-bright);filter:none}
  .font-display .crimson,.fd-line.crimson{background:none;
    -webkit-text-fill-color:initial;color:var(--fx-blood);filter:none}
}

/* ═══ EXISTING PANELS PICK UP THE FORGE TREATMENT ═══
   Rather than adding .plate to every element by hand, map the
   classes that are already everywhere. */
.rr-card,.home-block,.admin-form,.div-hero,.hero,.wb-card,
.group-card,.discover-card,.work-card,.srv-card,.mu-card,
.crypt-card,.tier-card,.saved-item,.contract,.post,.event,
.ann,.signal,.gp-hero,.profile{
  position:relative;isolation:isolate;
}
.rr-card::after,.home-block::after,.admin-form::after,
.div-hero::after,.hero::after,.wb-card::after,
.group-card::after,.work-card::after,.crypt-card::after,
.tier-card::after,.saved-item::after,.gp-hero::after,
.profile::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:var(--tex-url);background-size:320px;
  opacity:.55;
  filter:invert(1) grayscale(1) contrast(1.8) brightness(.3);
  mix-blend-mode:overlay;border-radius:inherit;
}
/* LARGE surfaces get it quieter. At full strength the vertical drips
   read as scratches ON the text instead of surface underneath it —
   the bigger the panel, the more the texture competes with content. */
.hero::after,.div-hero::after,.gp-hero::after,
.home-block::after,.profile::after{
  opacity:.26;
  background-size:520px;
}
.rr-card > *,.home-block > *,.admin-form > *,.div-hero > *,
.hero > *,.wb-card > *,.group-card > *,.work-card > *,
.crypt-card > *,.tier-card > *,.saved-item > *,.gp-hero > *,
.profile > *{position:relative;z-index:1}

/* Buttons inherit the forged treatment.
   NOTE: these must still read as the PRIMARY action. A pure steel
   button is beautiful and useless — it stops looking clickable and
   sits at the same weight as .btn-ghost. So the body stays crimson;
   the forge treatment adds the specular top, the bevel and the
   struck-metal press. Heat on the surface, not just underneath. */
.btn-blood{
  background:
    /* specular band across the top third */
    linear-gradient(180deg,
      rgba(255,240,238,.30) 0%,
      rgba(255,190,180,.10) 26%,
      rgba(255,255,255,0)   52%),
    /* hot core rising from the base */
    radial-gradient(ellipse 95% 65% at 50% 125%,
      rgba(255,110,80,.55) 0%, rgba(224,32,32,.30) 45%, transparent 78%),
    /* crimson body — this is what keeps it reading as primary */
    linear-gradient(180deg,#c92b2b 0%,#a81f1f 38%,#7f1616 72%,#5a0f0f 100%)
    !important;
  border:1px solid rgba(255,120,100,.5) !important;
  color:#fff5f2 !important;
  text-shadow:0 1px 0 rgba(0,0,0,.8),0 0 12px rgba(255,80,60,.5) !important;
  box-shadow:
    0 1px 0 rgba(255,220,210,.4) inset,
    0 -2px 0 rgba(0,0,0,.55) inset,
    0 2px 0 rgba(0,0,0,.9),
    0 6px 18px rgba(0,0,0,.7),
    0 0 24px rgba(224,32,32,.35) !important;
}
.btn-blood:hover{
  border-color:rgba(255,160,140,.8) !important;
  filter:brightness(1.14);
  box-shadow:
    0 1px 0 rgba(255,235,228,.55) inset,
    0 -2px 0 rgba(0,0,0,.55) inset,
    0 3px 0 rgba(0,0,0,.9),
    0 10px 28px rgba(0,0,0,.75),
    0 0 40px rgba(255,80,60,.6) !important;
}
.btn-blood:active{
  transform:translateY(2px);
  filter:brightness(.94);
  box-shadow:
    0 3px 8px rgba(0,0,0,.8) inset,
    0 0 20px rgba(224,32,32,.4) !important;
}