/* ═══════════════════════════════════════════════════════════
   187 DARK KNIGHTS — THE FORGE FLOOR
   The Keep, rebuilt. Replaces the card-feed layout entirely.

   THE IDEA
   Drops COOL AS THEY AGE. The newest is molten — bright metal,
   red light bleeding from the edges, the largest thing on screen.
   Older drops cool: the glow dies, the metal darkens, the type
   settles. Fresh work is hot; old work is cast iron.

   WHY IT WORKS HERE
   1. It is not a social feed. Every stacked-card layout reads as
      Facebook 2010 no matter how it is skinned.
   2. It earns a quiet room. Two drops become ONE HERO and one
      cooling entry — deliberate, not a half-empty list.
   3. Spice with peace: dramatic at the top of the scroll, calm by
      the bottom. Pull the eye in, then let it read.

   STRUCTURE
     .deck              asymmetric canvas, no symmetric rails
       .deck-status     thin live readout, not a hero
       .deck-strike     the composer, as a struck plate
       .deck-flow       the timeline
         article.post-item  .heat-0 (molten) → .heat-3 (cold)
   ═══════════════════════════════════════════════════════════ */

/* ═══ CANVAS ═══
   Deliberately NOT centred between two equal rails. A symmetric
   three-column layout reads as an app template; an offset canvas
   reads as designed. */
.deck{max-width:1120px;margin:0 auto;padding:0 24px 120px}

/* ═══ STATUS BAR — a readout, not a hero ═══ */
.deck-status{
  display:flex;align-items:center;flex-wrap:wrap;
  margin:0 0 22px;
  border-bottom:1px solid rgba(154,154,159,.1)}
.ds-item{
  display:flex;align-items:baseline;gap:8px;
  padding:14px 22px 14px 0;margin-right:22px;
  border-right:1px solid rgba(154,154,159,.08)}
.ds-item:last-child{border-right:none;margin-right:0}
.ds-num{
  font-family:'Oswald',sans-serif;font-weight:700;font-size:26px;
  line-height:1;letter-spacing:-.5px;
  background:linear-gradient(177deg,#fff 0%,#cfd6de 30%,#6b7280 70%,#2b2f36 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.ds-label{
  font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:2.4px;
  text-transform:uppercase;color:#454b54}
.ds-live .ds-num{
  background:linear-gradient(177deg,#eaffef 0%,#8fe0ab 30%,#3fa86a 70%,#1f7a46 100%);
  -webkit-background-clip:text;background-clip:text}
.ds-dot{
  width:6px;height:6px;border-radius:50%;background:#3fa86a;align-self:center;
  box-shadow:0 0 9px rgba(63,168,106,.95);
  animation:dsPulse 2.4s ease-in-out infinite}
@keyframes dsPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.8)}}
@media (prefers-reduced-motion:reduce){.ds-dot{animation:none}}

/* ═══ THE STRIKE PLATE — composer ═══
   Not a bordered box. A slab with heat under it, so the act of
   posting feels like striking metal rather than filling a form. */
.deck-strike{
  position:relative;isolation:isolate;overflow:hidden;
  padding:20px 22px;margin-bottom:34px;border-radius:4px;
  background:
    linear-gradient(150deg,rgba(226,232,240,.06) 0%,transparent 45%),
    radial-gradient(ellipse 70% 90% at 12% 130%,rgba(224,32,32,.22),transparent 68%),
    linear-gradient(172deg,#191c21 0%,#101215 55%,#08090b 100%);
  border-left:3px solid var(--fx-blood);
  box-shadow:0 1px 0 rgba(226,232,240,.06) inset,0 10px 34px rgba(0,0,0,.6)}
.deck-strike::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--tex-url);background-size:400px;
  opacity:.34;filter:invert(1) grayscale(1) contrast(1.9) brightness(.28);
  mix-blend-mode:overlay}
.deck-strike > *{position:relative;z-index:1}

.strike-row{display:flex;align-items:center;gap:15px}
.strike-input{
  flex:1;background:transparent;border:none;outline:none;
  color:#e2e8f0;font-family:'Rajdhani',sans-serif;font-weight:500;
  font-size:19px;padding:6px 0;letter-spacing:.2px}
.strike-input::placeholder{color:#3a3f47}
.strike-rule{height:1px;margin:14px 0 0;
  background:linear-gradient(90deg,rgba(178,34,34,.5),rgba(154,154,159,.1) 40%,transparent)}
.strike-actions{display:flex;align-items:center;gap:9px;margin-top:14px;flex-wrap:wrap}
.strike-btn{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  padding:7px 0;color:#4a5058;
  font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:1.6px;
  text-transform:uppercase;transition:color .15s;background:none;border:none}
.strike-btn:hover{color:#ff8a70}
.strike-go{margin-left:auto}

.strike-locked{
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.strike-locked span{
  font-family:'Rajdhani',sans-serif;font-size:17px;color:#545c68}

/* ═══ THE FLOW ═══
   A timeline, not a stack. The spine gives the eye a track to
   follow so entries read as a sequence rather than floating cards. */
.deck-flow{position:relative;padding-left:74px}
.deck-flow::before{
  content:'';position:absolute;left:23px;top:6px;bottom:40px;width:1px;
  background:linear-gradient(180deg,
    var(--fx-glow) 0%,
    rgba(139,26,26,.5) 18%,
    rgba(154,154,159,.14) 55%,
    transparent 100%)}

/* Node on the spine, aligned to each entry */
.deck-flow .post-item{position:relative;margin-bottom:38px}
.deck-flow .post-item::before{
  content:'';position:absolute;left:-58px;top:20px;
  width:9px;height:9px;border-radius:50%;
  background:#2b2f36;border:2px solid #08090b;
  box-shadow:0 0 0 1px rgba(154,154,159,.2);
  transition:.25s}
.deck-flow .post-item:hover::before{background:var(--fx-glow);
  box-shadow:0 0 0 1px rgba(224,32,32,.5),0 0 14px rgba(224,32,32,.7)}

/* Timestamp sits OUT on the spine, in the gutter */
.deck-flow .post-when{
  position:absolute;left:-74px;top:38px;width:56px;text-align:right;
  font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:1px;
  color:#3a3f47;line-height:1.4}

/* ═══════════════════════════════════════════════════════════
   THE HEAT — the whole point of this layout
   heat-0 is molten and large. Each step down cools: the glow
   dies, the metal darkens, the type settles.
   ═══════════════════════════════════════════════════════════ */
.deck-flow .post-plate{
  position:relative;isolation:isolate;
  padding:22px 26px;border-radius:3px;
  background:linear-gradient(172deg,#141619 0%,#0d0f12 60%,#08090b 100%);
  border:1px solid rgba(154,154,159,.09);
  border-left:2px solid rgba(154,154,159,.14);
  transition:border-color .22s, transform .22s cubic-bezier(.22,1,.36,1),
             box-shadow .22s}
.deck-flow .post-plate::before{
  content:'';position:absolute;inset:0;z-index:0;border-radius:inherit;
  background-image:var(--tex-url);background-size:360px;
  opacity:.26;filter:invert(1) grayscale(1) contrast(1.8) brightness(.3);
  mix-blend-mode:overlay;pointer-events:none}
.deck-flow .post-plate > *{position:relative;z-index:1}

/* ── heat-0 · MOLTEN. Newest. Biggest. Lit from beneath. ── */
.deck-flow .heat-0 .post-plate{
  padding:30px 34px;
  background:
    linear-gradient(150deg,rgba(255,235,230,.07) 0%,transparent 42%),
    radial-gradient(ellipse 85% 60% at 20% 118%,rgba(224,32,32,.26),transparent 70%),
    linear-gradient(172deg,#1c1f24 0%,#131518 55%,#0a0b0d 100%);
  border-color:rgba(178,34,34,.28);
  border-left:3px solid var(--fx-glow);
  box-shadow:0 1px 0 rgba(255,220,215,.09) inset,
             0 16px 48px rgba(0,0,0,.7),
             0 0 40px rgba(224,32,32,.14)}
.deck-flow .heat-0 .post-body{font-size:21px;line-height:1.55;color:#dfe5ec}
.deck-flow .heat-0 .post-name{font-size:18px}
.deck-flow .heat-0 .post-av{width:52px;height:52px;font-size:16px;
  border-color:rgba(255,120,100,.55);
  box-shadow:0 0 0 3px #08090b,0 0 20px rgba(224,32,32,.4)}
.heat-0::before{background:var(--fx-hot);
  box-shadow:0 0 0 1px rgba(255,91,74,.6),0 0 16px rgba(255,91,74,.8)}
.deck-flow .heat-0 .post-when{color:#8e5050}

/* ── heat-1 · WARM ── */
.deck-flow .heat-1 .post-plate{
  background:
    radial-gradient(ellipse 80% 55% at 20% 120%,rgba(139,26,26,.13),transparent 70%),
    linear-gradient(172deg,#17191d 0%,#101215 60%,#08090b 100%);
  border-left-color:rgba(139,26,26,.5);
  box-shadow:0 10px 30px rgba(0,0,0,.55)}
.deck-flow .heat-1 .post-body{font-size:18px}

/* ── heat-2 · COOLING ── */
.deck-flow .heat-2 .post-plate{border-left-color:rgba(139,26,26,.26)}
.deck-flow .heat-2 .post-body{font-size:17px;color:#b4bcc6}

/* ── heat-3 · COLD. Cast iron. ── */
.deck-flow .heat-3 .post-plate{
  background:linear-gradient(172deg,#111316 0%,#0b0c0f 60%,#08090b 100%);
  border-left-color:rgba(154,154,159,.16)}
.deck-flow .heat-3 .post-plate::before{opacity:.18}
.deck-flow .heat-3 .post-body{font-size:16px;color:#9aa3ad}
.deck-flow .heat-3 .post-av{opacity:.82}

/* Hover reheats it slightly — the page responds to attention */
.deck-flow .post-item:hover .post-plate{
  transform:translateX(3px);
  border-left-color:var(--fx-glow);
  box-shadow:0 14px 38px rgba(0,0,0,.65),0 0 26px rgba(224,32,32,.12)}

/* ═══ POST INTERNALS ═══ */
.deck-flow .post-head{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.deck-flow .post-av{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  background-size:cover;background-position:center;background-color:#141619;
  border:1px solid rgba(178,34,34,.35);
  display:flex;align-items:center;justify-content:center;
  font-family:'Oswald',sans-serif;font-weight:600;font-size:13px;
  color:var(--fx-blood);
  box-shadow:0 0 0 3px #08090b;transition:.22s}
.deck-flow .post-id{flex:1;min-width:0}
.deck-flow .post-name{
  font-family:'Oswald',sans-serif;font-weight:600;font-size:15px;
  color:#e2e8f0;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.deck-flow .post-name:hover{color:#ff8a70}
.deck-flow .post-handle{
  display:block;margin-top:1px;
  font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:1.2px;
  color:#454b54;text-decoration:none}
.deck-flow .post-handle:hover{color:#8e96a1}
.deck-flow .post-tag{
  font-family:'Share Tech Mono',monospace;font-size:8px;letter-spacing:1.6px;
  text-transform:uppercase;color:#d08a8a;padding:3px 9px;border-radius:3px;
  background:rgba(139,26,26,.16);border:1px solid rgba(139,26,26,.3)}
.deck-flow .post-more{
  background:none;border:none;color:#2b2f36;cursor:pointer;font-size:16px;
  padding:2px 6px;border-radius:4px;transition:.15s;line-height:1}
.deck-flow .post-more:hover{color:#e2e8f0;background:rgba(139,26,26,.18)}

/* Body — generous line height. This is the "peace" half. */
.deck-flow .post-body{
  font-family:'Rajdhani',sans-serif;font-weight:500;
  font-size:17px;line-height:1.6;color:#c8cdd4;
  word-wrap:break-word;white-space:pre-wrap}
.deck-flow .post-body:empty{display:none}
.deck-flow .post-gone{
  font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:1.5px;
  text-transform:uppercase;color:#2b2f36}

.deck-flow .post-img{
  margin-top:16px;border-radius:3px;overflow:hidden;cursor:zoom-in;
  border:1px solid rgba(154,154,159,.1);background:#08090b}
.deck-flow .post-img img{display:block;width:100%;max-height:560px;object-fit:cover}

/* ═══ ACTIONS — bare marks, no pills ═══
   Buttons in boxes are what made it read as a template. These are
   just marks that light up. Quieter, and it lets the writing lead. */
.deck-flow .post-acts{
  display:flex;align-items:center;gap:22px;margin-top:18px;padding-top:14px;
  border-top:1px solid rgba(154,154,159,.07)}
.act{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  background:none;border:none;padding:0;color:#3a3f47;
  font-family:'Share Tech Mono',monospace;font-size:11px;
  transition:color .16s,transform .16s}
.act .ico{font-size:15px;line-height:1;transition:transform .16s}
.act:hover{color:#e2e8f0}
.act:hover .ico{transform:scale(1.25) translateY(-1px)}
.act.on{color:#ff8a70}
.act-save{margin-left:auto}
.act-save.on{color:#ff8a70}

/* ═══ QUIET STATES ═══ */
.flow-empty{
  padding:64px 24px;text-align:center;
  font-family:'Rajdhani',sans-serif;font-size:16px;color:#454b54;line-height:1.7}
.flow-empty span{
  display:block;font-size:38px;color:rgba(178,34,34,.28);margin-bottom:14px}
.flow-empty b{
  display:block;font-family:'Oswald',sans-serif;font-weight:600;font-size:19px;
  color:#8e96a1;margin-bottom:7px;text-transform:uppercase;letter-spacing:.5px}
.flow-empty a{color:#ff8a70;text-decoration:none}
.flow-empty a:hover{text-decoration:underline}
.flow-empty-tight{padding:34px 24px 22px}

/* ── PEOPLE WORTH FOLLOWING ────────────────────────────────
   ⚠️ THIS PANEL HAD NO STYLES AT ALL. feed.js emitted .follow-picks,
   .picks-head, .pick-row, .pick-id and .picks-more; this stylesheet
   defined none of them, so the one screen a brand-new member lands on
   — the whole reason Following-by-default is safe to ship — rendered
   as a stack of bare text and two unlabelled buttons. Nothing errored.
   It is the same three-sided rename lesson from this morning, read
   from the other end: markup can name a class the stylesheet has
   never heard of, and the page still loads.

   Built from the strike plate's parts on purpose (same plate, same
   blood edge, same texture) so the empty feed reads as part of the
   forge rather than a fallback someone bolted on. */
.follow-picks{
  position:relative;isolation:isolate;overflow:hidden;
  max-width:520px;margin:0 auto 10px;padding:18px 20px 14px;border-radius:4px;
  background:
    linear-gradient(150deg,rgba(226,232,240,.05) 0%,transparent 45%),
    linear-gradient(172deg,#191c21 0%,#101215 55%,#08090b 100%);
  border-left:3px solid var(--fx-blood);
  box-shadow:0 1px 0 rgba(226,232,240,.06) inset,0 10px 30px rgba(0,0,0,.55)}
.follow-picks::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--tex-url);background-size:400px;
  opacity:.3;filter:invert(1) grayscale(1) contrast(1.9) brightness(.28)}
.follow-picks > *{position:relative;z-index:1}

.picks-head{
  font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:3px;
  text-transform:uppercase;color:#5d646d;
  padding-bottom:11px;margin-bottom:4px;
  border-bottom:1px solid rgba(226,232,240,.07)}

.pick-row{
  display:flex;align-items:center;gap:12px;
  padding:11px 0;border-bottom:1px solid rgba(226,232,240,.05)}
.pick-row:last-of-type{border-bottom:0}
.pick-row .avatar-sm{flex:0 0 auto}

.pick-id{min-width:0;flex:1 1 auto;line-height:1.35}
.pick-id a{text-decoration:none}
.pick-id b{
  display:block;font-family:'Oswald',sans-serif;font-weight:500;font-size:15px;
  color:#cbd2da;letter-spacing:.3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-id a:hover b{color:#ff8a70}
.pick-id small{
  display:block;font-family:'Share Tech Mono',monospace;font-size:10px;
  letter-spacing:.6px;color:#4d545d}

/* The button says Following after it lands — it must not shrink or the
   row jumps as the word gets longer. */
.pick-row .pick-follow{flex:0 0 auto;min-width:86px;text-align:center}

.picks-more{
  display:block;margin-top:12px;text-align:center;text-decoration:none;
  font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:2px;
  text-transform:uppercase;color:#5d646d}
.picks-more:hover{color:#ff8a70}

@media(max-width:760px){
  .follow-picks{margin-left:0;margin-right:0}
}

.flow-end{
  padding:30px 0 0;text-align:center;
  font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:3px;
  text-transform:uppercase;color:#23262b}

@media(max-width:760px){
  .deck-flow{padding-left:0}
  .deck-flow::before{display:none}
  .deck-flow .post-item::before, .deck-flow .post-when{display:none}
  .deck-flow .heat-0 .post-plate{padding:22px 20px}
  .deck-flow .post-plate{padding:18px 20px}
  .deck-flow .heat-0 .post-body{font-size:18px}
}

/* ═══════════════════════════════════════════════════════════
   OVERRIDES — style.css is still shared with pages we have not
   rebuilt yet, so fix things HERE rather than editing it.
   ═══════════════════════════════════════════════════════════ */

/* ── The deck must not be squeezed by .center ──
   .center caps the column at the old feed width. The Forge Floor
   needs room for the spine gutter AND the plates; at 900px the
   timeline crushes the content against the edge. */
main.deck.center{
  max-width:1180px !important;
  width:100% !important;
  padding:0 30px 120px !important;
}

/* ── Tabs: segmented control, not a banner ──
   style.css sets .feed-tabs{display:flex} and .feed-tab{flex:1},
   which stretches ONE active tab across the whole column. That is
   what made it read as an alert bar. */
.deck .feed-tabs{
  display:inline-flex !important;
  width:auto !important;
  gap:3px !important;padding:3px !important;
  margin:0 0 26px !important;
  border-radius:10px !important;
  background:linear-gradient(180deg,rgba(10,11,13,.9),rgba(5,5,6,.7)) !important;
  border:1px solid rgba(154,154,159,.12) !important;
  backdrop-filter:none !important;
  box-shadow:0 2px 8px rgba(0,0,0,.5) inset !important;
}
.deck .feed-tab{
  flex-grow:0 !important;flex-shrink:0 !important;flex-basis:auto !important;
  text-align:center !important;
  padding:8px 22px !important;border-radius:7px !important;
  font-family:'Barlow Condensed',sans-serif !important;
  font-weight:700 !important;font-size:12px !important;
  letter-spacing:2px !important;text-transform:uppercase;
  color:#5c636d !important;cursor:pointer;transition:.16s;
  background:none !important;border:none;white-space:nowrap;
}
.deck .feed-tab:hover{color:#c8cdd4 !important;background:rgba(255,255,255,.035) !important}
.deck .feed-tab.active{
  color:#fff2f0 !important;
  background:linear-gradient(180deg,#9e2222,#6b1313) !important;
  box-shadow:0 1px 0 rgba(255,210,205,.26) inset,
             0 2px 6px rgba(0,0,0,.5),
             0 0 14px rgba(224,32,32,.28) !important;
}

/* ── The announcement strip should not be a shouty banner here ── */
.deck .ann-strip{
  border-radius:3px !important;
  border-left-width:2px !important;
  margin-bottom:22px !important;
}

/* ═══ VIDEO PLAYER IN A POST ═══ assets/js/video.js
   A posted link becomes a player. 16:9 by default; YouTube Shorts is
   the one that is not, so it gets its own class rather than a squashed
   frame with black bars down both sides. */
.post-video{
  position:relative;width:100%;margin:14px 0 4px;
  aspect-ratio:16/9;max-width:100%;
  border-radius:3px;overflow:hidden;background:#000;
  border:1px solid rgba(226,232,240,.08);
  box-shadow:0 8px 26px rgba(0,0,0,.5)}
.post-video iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* Shorts and clips shot on a phone. Capped by height, not width, or a
   portrait video eats the whole column on desktop. */
.post-video-tall{aspect-ratio:9/16;max-width:340px;margin-left:auto;margin-right:auto}

@media(max-width:760px){
  .post-video{margin:12px 0 4px}
  .post-video-tall{max-width:100%}
}