/* =============================================
   STACK DIGEST — style.css
   Global stylesheet for all pages
   ============================================= */

/* --- RESET & ROOT --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --black:  #111;
  --black2: #1a1a1a;
  --g1:     #333;
  --g2:     #555;
  --g3:     #888;
  --g4:     #bbb;
  --g5:     #ddd;
  --g6:     #f0efeb;
  --g7:     #f7f6f3;
  --white:  #fff;
  --red:    #cc2200;
  --red2:   #e02800;

  --ff-s: 'Playfair Display', Georgia, serif;
  --ff-b: 'Libre Baskerville', Georgia, serif;
  --ff-u: 'Source Sans 3', sans-serif;
}

html { scroll-behavior: smooth; }

body {
  background: var(--white);
  color: var(--black);
  font-family: var(--ff-u);
  font-size: 16px;
  line-height: 1.5;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--g6); }
::-webkit-scrollbar-thumb { background: var(--g4); }

/* index.html single-page view toggling */
.view { display: none; }
.view.active { display: block; }

/* --- LIVE TICKER --- */
.ticker-bar {
  background: var(--red);
  color: var(--white);
  height: 34px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.ticker-label {
  background: var(--black);
  color: var(--white);
  font-family: var(--ff-u);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 0 1rem;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}
.live-dot {
  width: 6px; height: 6px;
  background: var(--red);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 50%;
  animation: blink 1.2s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
.ticker-scroll { flex: 1; overflow: hidden; }
.ticker-track {
  display: inline-block;
  white-space: nowrap;
  animation: ticker 45s linear infinite;
  font-family: var(--ff-u);
  font-size: .72rem;
  font-weight: 500;
  padding: 0 2rem;
}
@keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* --- NAVIGATION --- */
nav {
  background: var(--black);
  display: flex;
  align-items: stretch;
  min-height: 60px;
  position: sticky;
  top: 0;
  z-index: 200;
}
.nav-brand {
  display: flex;
  align-items: center;
  padding: 0 1.75rem;
  cursor: pointer;
  text-decoration: none;
  border-right: 1px solid rgba(255,255,255,.1);
  flex-shrink: 0;
}
.wordmark {
  font-family: var(--ff-s);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -.01em;
  line-height: 1;
}
.wordmark span { color: var(--red2); }
.nav-cats { display: flex; flex: 1; overflow: hidden; }
.nav-cat {
  font-family: var(--ff-u);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  padding: 0 1.1rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  border-right: 1px solid rgba(255,255,255,.08);
  transition: color .15s, background .15s;
  white-space: nowrap;
  text-decoration: none;
}
.nav-cat:hover { color: var(--white); background: rgba(255,255,255,.05); }
.nav-cat.active { color: var(--white); }
.nav-acts {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 0 1.5rem;
  border-left: 1px solid rgba(255,255,255,.1);
  flex-shrink: 0;
}

/* --- BUTTONS --- */
.btn {
  font-family: var(--ff-u);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .5rem 1.1rem;
  border: 1.5px solid;
  cursor: pointer;
  transition: all .15s;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
  text-decoration: none;
}
.btn-ghost-nav { border-color: rgba(255,255,255,.25); color: rgba(255,255,255,.65); }
.btn-ghost-nav:hover { border-color: rgba(255,255,255,.6); color: var(--white); }
.btn-red-nav { background: var(--red); border-color: var(--red); color: var(--white); text-align: center; line-height: 1.2; }
.btn-red-nav:hover { background: var(--red2); border-color: var(--red2); }
.btn-red { background: var(--red); border-color: var(--red); color: var(--white); }
.btn-red:hover { background: var(--red2); border-color: var(--red2); }
.btn-outline { border-color: var(--g5); color: var(--g2); background: var(--white); }
.btn-outline:hover { border-color: var(--g2); color: var(--black); }
.btn-del { border-color: var(--g5); color: var(--g3); font-size: .62rem; padding: .38rem .75rem; background: var(--white); }
.btn-del:hover { border-color: var(--red); color: var(--red); }

/* --- MASTHEAD --- */
.masthead {
  border-bottom: 3px solid var(--black);
  padding: 1.5rem 2rem;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 1rem;
}
.mh-kicker { font-family: var(--ff-u); font-size: .65rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--g3); margin-bottom: 4px; }
.mh-title { font-family: var(--ff-s); font-size: clamp(2rem,5vw,3.2rem); font-weight: 900; letter-spacing: -.02em; line-height: 1; color: var(--black); }
.mh-title span { color: var(--red); }
.mh-sub { font-family: var(--ff-u); font-size: .72rem; color: var(--g3); margin-top: 3px; }
.mh-date { font-family: var(--ff-u); font-size: .7rem; color: var(--g3); text-align: right; }
.mh-ed { font-family: var(--ff-s); font-size: .85rem; font-style: italic; color: var(--g3); text-align: right; }

/* --- CATEGORY TAGS --- */
.cat-tag {
  display: inline-block;
  background: var(--red);
  color: var(--white);
  font-family: var(--ff-u);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .2rem .55rem;
  margin-bottom: .9rem;
}
.cat-tag-ghost {
  display: inline-block;
  color: var(--red);
  font-family: var(--ff-u);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .55rem;
}

/* --- BYLINE --- */
.byline { font-family: var(--ff-u); font-size: .68rem; color: var(--g3); display: flex; gap: .75rem; flex-wrap: wrap; }
.byline strong { color: var(--g2); font-weight: 600; }

/* --- HERO LAYOUT --- */
.hero-grid { display: grid; grid-template-columns: 1fr 300px; border-bottom: 1px solid var(--g5); }
.hero-main { padding: 2rem; border-right: 1px solid var(--g5); cursor: pointer; transition: background .15s; }
.hero-main:hover { background: var(--g7); }
.hero-main:hover .hero-hl { color: var(--red); }
.hero-hl { font-family: var(--ff-s); font-size: clamp(1.6rem,3.5vw,2.6rem); font-weight: 700; line-height: 1.15; color: var(--black); margin-bottom: .75rem; transition: color .15s; }
.hero-stand { font-family: var(--ff-b); font-size: 1rem; color: var(--g1); line-height: 1.7; margin-bottom: 1rem; }

/* --- HERO SIDEBAR --- */
.hero-sidebar { display: flex; flex-direction: column; }
.sc { flex: 1; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--g5); cursor: pointer; transition: background .15s; display: flex; flex-direction: column; gap: .5rem; }
.sc:last-child { border-bottom: none; }
.sc:hover { background: var(--g7); }
.sc:hover .sc-hl { color: var(--red); }
.sc-hl { font-family: var(--ff-s); font-size: 1.05rem; font-weight: 600; line-height: 1.25; color: var(--black); transition: color .15s; }
.sc-by { font-family: var(--ff-u); font-size: .62rem; color: var(--g3); margin-top: auto; }

/* --- SECTION HEADER --- */
.sec-bar { display: flex; align-items: center; gap: .75rem; padding: .9rem 2rem; border-bottom: 1px solid var(--g5); background: var(--g7); }
.sec-lbl { font-family: var(--ff-u); font-size: .6rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--red); white-space: nowrap; }
.sec-rule { flex: 1; height: 1px; background: var(--g5); }

/* --- STORY GRID (3-col) --- */
.stgrid { display: grid; grid-template-columns: repeat(3,1fr); border-bottom: 1px solid var(--g5); }
.stcard { padding: 1.5rem; border-right: 1px solid var(--g5); cursor: pointer; transition: background .15s; display: flex; flex-direction: column; gap: .6rem; }
.stcard:nth-child(3n) { border-right: none; }
.stcard:hover { background: var(--g7); }
.stcard:hover .stcard-hl { color: var(--red); }
.stcard-hl { font-family: var(--ff-s); font-size: 1.15rem; font-weight: 700; line-height: 1.25; color: var(--black); transition: color .15s; }
.stcard-ex { font-family: var(--ff-u); font-size: .82rem; color: var(--g2); line-height: 1.55; flex: 1; }
.stcard-by { font-family: var(--ff-u); font-size: .6rem; color: var(--g3); padding-top: .6rem; border-top: 1px solid var(--g5); display: flex; gap: .75rem; }

/* --- FEATURED ROW (2-col) --- */
.feat-row { display: grid; grid-template-columns: 2fr 1fr; border-bottom: 1px solid var(--g5); }
.feat-main { padding: 1.75rem 2rem; border-right: 1px solid var(--g5); cursor: pointer; transition: background .15s; display: flex; flex-direction: column; gap: .65rem; }
.feat-main:hover { background: var(--g7); }
.feat-main:hover .feat-hl { color: var(--red); }
.feat-hl { font-family: var(--ff-s); font-size: 1.7rem; font-weight: 700; line-height: 1.2; color: var(--black); transition: color .15s; }
.feat-ex { font-family: var(--ff-b); font-size: .88rem; color: var(--g1); line-height: 1.65; flex: 1; }
.feat-by { font-family: var(--ff-u); font-size: .62rem; color: var(--g3); padding-top: .6rem; border-top: 1px solid var(--g5); display: flex; gap: .75rem; margin-top: auto; }
.arc-stack { display: flex; flex-direction: column; }
.arc { flex: 1; padding: 1rem 1.5rem; border-bottom: 1px solid var(--g5); cursor: pointer; transition: background .15s; display: flex; flex-direction: column; gap: .4rem; }
.arc:last-child { border-bottom: none; }
.arc:hover { background: var(--g7); }
.arc:hover .arc-hl { color: var(--red); }
.arc-hl { font-family: var(--ff-s); font-size: .9rem; font-weight: 700; line-height: 1.3; color: var(--black); transition: color .15s; }
.arc-by { font-family: var(--ff-u); font-size: .58rem; color: var(--g3); }

/* --- EMPTY STATE --- */
.empty { text-align: center; padding: 5rem 2rem; background: var(--g7); }
.empty h2 { font-family: var(--ff-s); font-size: 1.8rem; font-weight: 700; margin-bottom: .5rem; }
.empty p { font-family: var(--ff-u); font-size: .85rem; color: var(--g3); margin-bottom: 1.5rem; }

/* --- ARTICLE PAGE --- */
.article-page { max-width: 740px; margin: 0 auto; padding: 2.5rem 1.5rem 5rem; }
/* also used in index.html single-page article view */
#view-article .article-page { max-width: 740px; margin: 0 auto; padding: 2.5rem 1.5rem 5rem; }

.art-back { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ff-u); font-size: .65rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--g3); cursor: pointer; margin-bottom: 2rem; transition: color .15s; background: none; border: none; padding: 0; text-decoration: none; }
.art-back:hover { color: var(--red); }
.art-hl { font-family: var(--ff-s); font-size: clamp(1.8rem,4vw,3rem); font-weight: 700; line-height: 1.12; margin-bottom: 1rem; }
.art-stand { font-family: var(--ff-b); font-size: 1.1rem; font-style: italic; color: var(--g1); line-height: 1.65; margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--g5); }
.art-meta { display: flex; gap: 1.5rem; font-family: var(--ff-u); font-size: .68rem; color: var(--g3); padding-bottom: 1.5rem; border-bottom: 2px solid var(--black); margin-bottom: 2rem; flex-wrap: wrap; }
.art-meta strong { color: var(--g1); }
.art-body { font-family: var(--ff-b); font-size: 1.05rem; color: var(--black2); line-height: 1.85; }
.art-body p { margin-bottom: 1.4rem; }
.art-body h2 { font-family: var(--ff-s); font-size: 1.5rem; font-weight: 700; margin: 2rem 0 .75rem; line-height: 1.2; }
.art-body h3 { font-family: var(--ff-s); font-size: 1.2rem; font-weight: 700; margin: 1.75rem 0 .6rem; }
.art-body blockquote { border-left: 3px solid var(--red); padding: .25rem 0 .25rem 1.25rem; margin: 1.75rem 0; font-style: italic; color: var(--g1); font-size: 1.1rem; }
.art-body hr { border: none; border-top: 1px solid var(--g5); margin: 2rem 0; }
.art-body strong { font-weight: 700; }
.art-body code { font-family: monospace; font-size: .88em; background: var(--g6); padding: .1em .35em; }
.art-body ul, .art-body ol { padding-left: 1.5rem; margin-bottom: 1.4rem; }
.art-body li { margin-bottom: .35rem; }
.art-acts { display: flex; gap: .75rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--g5); }

/* --- EDITOR --- */
#view-editor { max-width: 860px; margin: 0 auto; padding: 2rem 1.5rem 5rem; }
.ed-hdr { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1.25rem; border-bottom: 2px solid var(--black); margin-bottom: 2rem; }
.ed-hdr h2 { font-family: var(--ff-s); font-size: 1.6rem; font-weight: 700; }
.ed-acts { display: flex; gap: .75rem; }
.fl { display: block; font-family: var(--ff-u); font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--g3); margin-bottom: .45rem; }
.fg { margin-bottom: 1.5rem; }
.fc2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.fc3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
.f-hl { width: 100%; border: none; border-bottom: 2px solid var(--g5); padding: .4rem 0; font-family: var(--ff-s); font-size: 1.8rem; font-weight: 700; color: var(--black); background: transparent; outline: none; transition: border-color .2s; }
.f-hl::placeholder { color: var(--g4); }
.f-hl:focus { border-color: var(--red); }
.fi { width: 100%; border: 1.5px solid var(--g5); padding: .65rem .85rem; font-family: var(--ff-u); font-size: .88rem; color: var(--black); background: var(--white); outline: none; transition: border-color .2s; }
.fi::placeholder { color: var(--g4); }
.fi:focus { border-color: var(--red); }
.fsel { width: 100%; border: 1.5px solid var(--g5); padding: .65rem .85rem; font-family: var(--ff-u); font-size: .88rem; color: var(--black); background: var(--white); outline: none; cursor: pointer; appearance: none; transition: border-color .2s; }
.fsel:focus { border-color: var(--red); }
.fsel option { background: var(--white); }
.tb { display: flex; gap: 2px; padding: .5rem; background: var(--g6); border: 1.5px solid var(--g5); border-bottom: none; flex-wrap: wrap; }
.tb-btn { background: var(--white); border: 1px solid var(--g5); padding: .28rem .55rem; font-family: var(--ff-u); font-size: .72rem; font-weight: 600; color: var(--g2); cursor: pointer; transition: all .1s; }
.tb-btn:hover { border-color: var(--red); color: var(--red); background: #fff5f3; }
.tb-sep { width: 1px; background: var(--g5); margin: 2px 4px; }
.fta { width: 100%; min-height: 460px; border: 1.5px solid var(--g5); padding: 1rem 1.1rem; font-family: var(--ff-b); font-size: 1rem; color: var(--black); background: var(--white); outline: none; resize: vertical; line-height: 1.8; transition: border-color .2s; }
.fta::placeholder { color: var(--g4); }
.fta:focus { border-color: var(--red); }
.ch { font-family: var(--ff-u); font-size: .58rem; color: var(--g4); text-align: right; margin-top: 3px; }

/* --- MY STORIES / MANAGE --- */
#view-manage { max-width: 960px; margin: 0 auto; padding: 2rem 1.5rem 5rem; }
.mg-hdr { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1.25rem; border-bottom: 2px solid var(--black); margin-bottom: 1.75rem; }
.mg-hdr h2 { font-family: var(--ff-s); font-size: 1.6rem; font-weight: 700; }
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--g5); border: 1px solid var(--g5); margin-bottom: 2rem; }
.stat { background: var(--g7); padding: 1.25rem 1rem; text-align: center; }
.stat-n { font-family: var(--ff-s); font-size: 2.2rem; font-weight: 700; color: var(--red); line-height: 1; margin-bottom: .3rem; }
.stat-l { font-family: var(--ff-u); font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--g3); }
.mgr { display: flex; align-items: center; gap: 1.25rem; padding: 1rem 0; border-bottom: 1px solid var(--g5); }
.mgr-n { font-family: var(--ff-s); font-size: 1.3rem; font-weight: 700; color: var(--g4); width: 2.2rem; text-align: right; flex-shrink: 0; }
.mgr-c { font-family: var(--ff-u); font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red); width: 85px; flex-shrink: 0; }
.mgr-i { flex: 1; cursor: pointer; }
.mgr-t { font-family: var(--ff-s); font-size: 1rem; font-weight: 700; color: var(--black); margin-bottom: .2rem; transition: color .15s; line-height: 1.25; }
.mgr-i:hover .mgr-t { color: var(--red); }
.mgr-m { font-family: var(--ff-u); font-size: .6rem; color: var(--g3); }
.mgr-a { display: flex; gap: .5rem; flex-shrink: 0; }

/* --- FOOTER --- */
footer {
  background: var(--black);
  color: rgba(255,255,255,.6);
  padding: 3rem 2rem 2rem;
}
.ft-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 3rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 1.5rem; }
.ft-tagline { font-family: var(--ff-u); font-size: .7rem; color: rgba(255,255,255,.35); margin-top: .5rem; line-height: 1.6; }
.ft-col h4 { font-family: var(--ff-u); font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: .75rem; }
.ft-col p { font-family: var(--ff-u); font-size: .78rem; color: rgba(255,255,255,.5); line-height: 1.7; }
.ft-bot { display: flex; justify-content: space-between; font-family: var(--ff-u); font-size: .62rem; color: rgba(255,255,255,.25); }

/* --- ABOUT PAGE --- */
.about-page { max-width: 780px; margin: 0 auto; padding: 3rem 1.5rem 5rem; }
.about-page h1 { font-family: var(--ff-s); font-size: clamp(2rem,5vw,3rem); font-weight: 700; line-height: 1.1; margin-bottom: 1rem; }
.about-page .lead { font-family: var(--ff-b); font-size: 1.1rem; font-style: italic; color: var(--g1); line-height: 1.7; margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 2px solid var(--black); }
.about-page h2 { font-family: var(--ff-s); font-size: 1.4rem; font-weight: 700; margin: 2rem 0 .75rem; }
.about-page p { font-family: var(--ff-b); font-size: 1rem; color: var(--black2); line-height: 1.8; margin-bottom: 1.2rem; }
.about-cats { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--g5); border: 1px solid var(--g5); margin: 1.5rem 0; }
.about-cat { background: var(--g7); padding: 1rem 1.25rem; }
.about-cat-name { font-family: var(--ff-u); font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red); margin-bottom: .3rem; }
.about-cat-desc { font-family: var(--ff-u); font-size: .78rem; color: var(--g2); line-height: 1.5; }

/* --- TOAST --- */
.toast { position: fixed; bottom: 2rem; right: 2rem; background: var(--black); color: var(--white); font-family: var(--ff-u); font-size: .7rem; font-weight: 600; letter-spacing: .06em; padding: .75rem 1.5rem; opacity: 0; transform: translateY(.75rem); transition: all .25s; pointer-events: none; z-index: 999; border-left: 3px solid var(--red); }
.toast.show { opacity: 1; transform: translateY(0); }

/* --- RESPONSIVE --- */
@media (max-width: 760px) {
  .hero-grid, .feat-row { grid-template-columns: 1fr; }
  .hero-sidebar, .arc-stack { border-top: 1px solid var(--g5); }
  .stgrid { grid-template-columns: 1fr; }
  .stcard { border-right: none; border-bottom: 1px solid var(--g5); }
  .ft-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .nav-cats { display: none; }
  .stats { grid-template-columns: 1fr 1fr; }
  .fc2, .fc3 { grid-template-columns: 1fr; }
  .masthead { grid-template-columns: 1fr; }
  .about-cats { grid-template-columns: 1fr 1fr; }
}

.article-container {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
}

.article-kicker {
  color: red;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.article-title {
  font-size: 40px;
  font-weight: bold;
  margin-bottom: 10px;
}

.article-subhead {
  font-size: 20px;
  color: #444;
  margin-bottom: 15px;
}

.article-meta {
  color: gray;
  font-size: 14px;
  margin-bottom: 20px;
}

.article-image {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 10px;
}

.image-caption {
  font-size: 12px;
  color: gray;
  margin-bottom: 20px;
}

.article-content p {
  font-size: 18px;
  line-height: 1.7;
  margin-bottom: 16px;
}

.article-content h2 {
  margin-top: 30px;
  font-size: 24px;
}

.lead {
  font-size: 20px;
  font-weight: 500;
}

.quote-box {
  border-left: 4px solid red;
  padding: 10px 15px;
  margin: 20px 0;
  font-weight: bold;
  background: #f5f5f5;
}

.tags span {
  display: inline-block;
  border: 1px solid #ddd;
  padding: 6px 10px;
  margin-right: 8px;
  margin-top: 10px;
  font-size: 12px;
}