/* ============================================================================
   Short Stories — the Human Narrative desk (FICTIONAL ABYSS)
   A distraction-free dark prose reader. Deep ink, cool silver/steel type.
   Its own template — NOT the Comics flip reader, NOT the broadsheet.
   ========================================================================= */
:root{
  --ss-ink:#05070A; --ss-panel:#0A0E14; --ss-line:#171d27; --ss-line2:#2a3340;
  --ss-text:#EAEDF2; --ss-dim:#8792a3; --ss-steel:#C0C0C0;
  --ss-display:"Oswald","Arial Narrow",Impact,sans-serif;
  --ss-serif:"Archivo","Helvetica Neue",Arial,sans-serif;
  --ss-label:"Archivo","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ss-ink);color:var(--ss-text);
  font-family:var(--ss-serif);-webkit-font-smoothing:antialiased;line-height:1.7}
a{color:inherit;text-decoration:none}
::selection{background:var(--ss-steel);color:var(--ss-ink)}

/* top deck — minimal, out of the way */
.ss-deck{display:flex;align-items:center;gap:18px;padding:16px clamp(18px,4vw,40px);
  border-bottom:1px solid var(--ss-line);position:sticky;top:0;z-index:10;
  background:color-mix(in srgb,var(--ss-ink) 90%,transparent);backdrop-filter:blur(8px)}
.ss-back{font-family:var(--ss-label);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ss-dim)}
.ss-back:hover{color:var(--ss-steel)}
.ss-brand{font-family:var(--ss-display);font-size:20px;letter-spacing:.02em;text-transform:uppercase;margin:0 auto}
.ss-brand span{color:var(--ss-dim)}
.ss-kicker{font-family:var(--ss-label);font-weight:700;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ss-dim)}

.ss-wrap{max-width:40rem;margin:0 auto;padding:clamp(36px,7vw,80px) clamp(20px,5vw,24px) 120px}

/* ---- reader ---- */
.ss-theme{font-family:var(--ss-label);font-weight:700;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ss-steel)}
.ss-title{font-family:var(--ss-display);font-weight:500;font-size:var(--tc-title);line-height:1.02;
  text-transform:uppercase;letter-spacing:.005em;margin:.28em 0 1em;color:var(--ss-text)}
.ss-prose p{font-size:clamp(18px,2.4vw,21px);line-height:1.78;margin:0 0 1.35em;color:#dfe4ec}
.ss-prose p:first-of-type::first-letter{font-family:var(--ss-display);float:left;font-size:3.4em;
  line-height:.82;padding:.02em .12em 0 0;color:var(--ss-steel);font-weight:500}

/* the Divergent Tether — a cool bordered callout */
.ss-tether{margin:3em 0 2em;padding:22px 24px;background:var(--ss-panel);
  border:1px solid var(--ss-line2);border-left:3px solid var(--ss-steel)}
.ss-tether-k{font-family:var(--ss-label);font-weight:700;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ss-steel);margin-bottom:.6em}
.ss-tether-body{font-size:15.5px;line-height:1.6;color:var(--ss-dim);margin:0 0 .9em}
.ss-tether-body strong{color:var(--ss-text);font-weight:600}
.ss-tether-body code{font-family:var(--ss-label);font-size:12.5px;letter-spacing:.02em;color:var(--ss-steel);
  background:rgba(192,192,192,.08);padding:1px 6px}
.ss-tether-link{font-family:var(--ss-label);font-weight:700;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ss-steel);border-bottom:1px solid var(--ss-line2);padding-bottom:2px}
.ss-tether-link:hover{border-bottom-color:var(--ss-steel)}

/* After-Action — the quiet closer */
.ss-after{margin:2.4em 0 0;padding-top:1.6em;border-top:1px solid var(--ss-line)}
.ss-after-k{font-family:var(--ss-label);font-weight:700;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ss-dim);margin-bottom:.5em}
.ss-after p{font-family:var(--ss-serif);font-style:italic;font-size:16.5px;line-height:1.66;color:#c7cdd7;margin:0}

.ss-foot{margin-top:4em;font-family:var(--ss-label);font-weight:700;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ss-dim)}
.ss-foot a:hover{color:var(--ss-steel)}

/* ---- collection landing ---- */
.ss-lead{max-width:52rem;margin-bottom:clamp(28px,5vw,44px)}
.ss-lead-t{font-family:var(--ss-display);font-weight:600;font-size:clamp(40px,9vw,84px);line-height:.94;
  text-transform:uppercase;margin:0 0 .3em}
.ss-lead-d{font-size:clamp(16px,2vw,19px);line-height:1.66;color:var(--ss-dim);margin:0;max-width:44ch}
.ss-index .ss-wrap{max-width:64rem}

.ss-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.ss-filter button{font-family:var(--ss-label);font-weight:700;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;background:none;color:var(--ss-dim);border:1px solid var(--ss-line2);
  padding:8px 15px;cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.ss-filter button:hover{color:var(--ss-steel);border-color:var(--ss-steel)}
.ss-filter button[aria-pressed="true"]{color:var(--ss-ink);background:var(--ss-steel);border-color:var(--ss-steel)}

/* comics rack covers (2026-07-13, visual-first — cloud-batch cover.png leads each card) */
.ss-card-fig{position:relative;margin:-16px -16px 12px;aspect-ratio:16/10;overflow:hidden;background:#0c0b0a}
.ss-card-fig img{width:100%;height:100%;object-fit:cover;display:block}
.ss-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.ss-card{display:flex;flex-direction:column;background:var(--ss-panel);border:1px solid var(--ss-line);
  padding:22px 24px;transition:border-color .18s,transform .18s}
.ss-card:hover{border-color:var(--ss-steel);transform:translateY(-2px)}
.ss-card[hidden]{display:none}
.ss-card-theme{font-family:var(--ss-label);font-weight:700;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ss-steel)}
.ss-card-t{font-family:var(--ss-display);font-weight:500;font-size:26px;line-height:1.05;
  text-transform:uppercase;margin:.35em 0 .5em}
.ss-card-teaser{font-size:14.5px;line-height:1.6;color:var(--ss-dim);margin:0 0 1.2em;flex:1}
.ss-card-go{font-family:var(--ss-label);font-weight:700;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ss-steel)}

/* ---- the Reckoning ↔ Deliverance flagship (diptych + Reflection) ---- */
.ss-flag-wrap{max-width:64rem}
.ss-setup{max-width:42rem;margin:0 auto 2.4em}
.ss-setup p{font-size:clamp(17px,2.1vw,19px);line-height:1.72;color:#c7cdd7;margin:0 0 1.1em}
.ss-diptych{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--ss-line2);border:1px solid var(--ss-line2)}
@media(max-width:760px){.ss-diptych{grid-template-columns:1fr}}
.ss-pole{background:var(--ss-ink);padding:clamp(22px,3vw,34px)}
.ss-pole-k{font-family:var(--ss-display);font-weight:500;font-size:clamp(22px,3vw,30px);text-transform:uppercase;letter-spacing:.02em;color:var(--ss-steel)}
.ss-reck .ss-pole-k{color:#b9c0cc}
.ss-deliv .ss-pole-k{color:var(--ss-steel)}
.ss-pole-sub{font-family:var(--ss-serif);font-style:italic;font-size:14px;color:var(--ss-dim);margin:.2em 0 1.5em}
.ss-pole .ss-prose p{font-size:16.5px;line-height:1.72}
.ss-pole .ss-prose p:first-of-type::first-letter{font-size:1em;float:none;padding:0;color:inherit;font-family:inherit}
.ss-reflection{margin-top:2px;background:var(--ss-panel);border:1px solid var(--ss-line2);border-top:3px solid var(--ss-steel);padding:clamp(24px,4vw,40px)}
.ss-refl-k{font-family:var(--ss-label);font-weight:700;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ss-steel);margin-bottom:1em}
.ss-reflection .ss-prose{max-width:44rem}
.ss-reflection .ss-prose p{font-size:16.5px;line-height:1.74;color:#d3d9e2}
.ss-reflection .ss-prose p:last-child{font-style:italic;color:var(--ss-dim);font-size:15px}
.ss-reflection .ss-prose p:first-of-type::first-letter{font-size:1em;float:none;padding:0;color:inherit;font-family:inherit}
.ss-card-flag{border-color:var(--ss-line2);border-left:3px solid var(--ss-steel)}
.ss-card-flag .ss-card-theme{color:var(--ss-steel)}