/* ============================================================
   SubMedium — editorial news aggregator
   Day Edition (default) + Night Edition via [data-edition="night"]
   ============================================================ */

:root {
  /* surface */
  --paper:    #F4EFE5;
  --paper-2:  #FBF8F1;   /* raised cards */
  --paper-3:  #ECE5D6;   /* sunken / ticker */
  --ink:      #17150F;
  --ink-2:    #46423A;
  --ink-3:    #8A8474;
  --line:     rgba(23, 21, 15, 0.14);
  --line-2:   rgba(23, 21, 15, 0.08);

  /* brand accent — burnt amber; shades derived so a single tweak recolors all */
  --accent:   #BE530F;
  --accent-2: color-mix(in oklab, var(--accent), #000 24%);
  --accent-wash: color-mix(in oklab, var(--accent) 11%, transparent);

  /* market semantics — kept distinct from brand */
  --up:   #1E7A4D;
  --down: #BE2F26;

  /* type */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "IBM Plex Sans", system-ui, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, monospace;

  --shadow-card: 0 1px 0 rgba(23,21,15,0.04);
  --maxw: 1320px;
}

[data-edition="night"] {
  --paper:    #14130E;
  --paper-2:  #1D1B14;
  --paper-3:  #100F0A;
  --ink:      #F1EAD9;
  --ink-2:    #B7AF9C;
  --ink-3:    #7C7565;
  --line:     rgba(241, 234, 217, 0.16);
  --line-2:   rgba(241, 234, 217, 0.08);
  --accent:   #E07C2C;
  --accent-2: color-mix(in oklab, var(--accent), #fff 16%);
  --accent-wash: color-mix(in oklab, var(--accent) 16%, transparent);
  --up:   #3FA871;
  --down: #E0574C;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  /* subtle paper grain */
  background-image:
    radial-gradient(rgba(23,21,15,0.022) 1px, transparent 1px);
  background-size: 3px 3px;
}

::selection { background: var(--accent-wash); }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ---- reusable type helpers ---- */
.kicker {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.meta {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}
.dek {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink-2);
  font-weight: 380;
}

.hl {
  font-family: var(--serif);
  font-weight: 560;
  letter-spacing: -0.012em;
  line-height: 1.06;
  color: var(--ink);
  text-wrap: balance;
}

/* ---- app shell ---- */
.shell { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.rule-ink { height: 2px; background: var(--ink); border: 0; margin: 0; }

/* image placeholder treatment */
.imgph {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, color-mix(in oklab, var(--accent) 22%, var(--paper-3)) 0%,
                    var(--paper-3) 60%);
  display: flex; align-items: flex-end;
}
.imgph::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(23,21,15,0.06) 1px, transparent 1px);
  background-size: 4px 4px;
  mix-blend-mode: multiply;
  opacity: 0.6;
}
.imgph .credit {
  position: relative; z-index: 1;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-2);
  padding: 6px 8px; background: color-mix(in oklab, var(--paper-2) 78%, transparent);
}

image-slot { display: block; }

/* clamp */
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* fade-in on load — opacity stays 1 so a frozen timeline (preview/print) never hides content */
@keyframes rise { from { transform: translateY(9px); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise 0.5s cubic-bezier(.2,.7,.2,1) both; }
}

/* live dot pulse */
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--down) 55%, transparent); }
  70%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* market ticker marquee */
@keyframes tickerscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker-track { animation: tickerscroll 48s linear infinite; }
.ticker-track:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

.avatarstack:hover .meta { color: var(--accent-2) !important; }
article[onclick], .avatarstack { transition: color .15s ease; }

/* scrollbars (night-safe) */
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; border: 3px solid transparent; background-clip: padding-box; }