/* ============================================================
   _base.css — the editorial shell every preview card lives in.
   Newsprint, ivory, filing-code furniture. No 12-radius.
   Enforced by variable + selector; cards cannot opt out.
   ============================================================ */

@import url("../tokens.css");

:root {
  --ink:       #0b0b0b;
  --ivory:     #f2f1ed;
  --ivory-2:   #ebeae3;   /* a half-step down */
  --red:       #c8102e;   /* signal red — lies only */
  --hair:      rgba(11, 11, 11, 0.12);
  --grey-500:  #5a5a5a;
  --grey-300:  #9a9a9a;
}

html, body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: "Exposure", "Söhne", sans-serif;
  font-weight: 300;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}
body { padding: 0; }

/* ---------- CARD ----------
   A card is a sheet of editorial paper, not a SaaS tile.
   Wider (900px), no radius, no soft border, no drop shadow.
   Top rule is 3px ink. Bottom is a hairline.                */
.card {
  box-sizing: border-box;
  width: 900px;
  min-height: 120px;
  margin: 24px;
  padding: 40px 48px 44px;
  background: var(--ivory);
  border: 0;
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  position: relative;
}

/* ---------- MASTHEAD ROW ---------- */
.card::before {
  content: attr(data-nr) " · " attr(data-masthead);
  position: absolute;
  top: -22px; left: 0; right: 0;
  font-family: "SohneMono", monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--grey-500);
  display: block;
}

/* ---------- LABEL (replaces the uppercase kicker tic) ---------- */
.label {
  font-family: "SohneMono", monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 18px;
}
.label::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--red);
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.label .sub {
  font-family: "Redaction", serif;
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.01em;
  font-size: 14px;
  color: var(--grey-500);
  margin-left: 6px;
}

/* ---------- HEAD (headline inside the card) ---------- */
.head {
  font-family: "Exposure", sans-serif;
  font-weight: 200;
  font-size: 56px;
  line-height: 0.95;
  letter-spacing: -0.045em;
  margin: 0 0 18px;
}
.head em {
  font-family: "Redaction", serif;
  font-style: italic;
  font-weight: 400;
  opacity: 0.35;
}

/* ---------- PROOF (mono meta block, footnote-style) ---------- */
.proof {
  font-family: "SohneMono", monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--grey-500);
  line-height: 1.8;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--hair);
}
.proof b { color: var(--ink); font-weight: 400; }
.proof .r { color: var(--red); }

/* ---------- ROW ---------- */
.row { display: flex; gap: 0; flex-wrap: wrap; align-items: stretch; }

/* ---------- HAIRLINE ---------- */
.hair { height: 1px; background: var(--hair); margin: 20px 0; }

/* ---------- LINK (signature fuzzy-at-rest, sharp-on-hover) ----------
   Every <a> in every preview card inherits the subconscious.ai link
   treatment: slightly blurred, dotted underline at rest; resolves to
   a crisp ink-underlined word on hover. Opt out with .no-link.        */
a, a.link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px dotted rgba(11, 11, 11, 0.4);
  padding-bottom: 1px;
  opacity: 0.85;
  filter: blur(0.7px);
  transition: filter 320ms cubic-bezier(.25,.8,.25,1),
              opacity 320ms cubic-bezier(.25,.8,.25,1),
              border-color 320ms cubic-bezier(.25,.8,.25,1);
  cursor: pointer;
}
a:hover, a.link:hover {
  filter: blur(0);
  opacity: 1;
  border-bottom-color: var(--ink);
}
/* red-accent variant (source links inside charts, uplift callouts) */
a.red {
  color: var(--red);
  border-bottom-color: rgba(200, 16, 46, 0.45);
}
a.red:hover { border-bottom-color: var(--red); }
/* opt-out for anchors that are purely structural (nav tiles etc.) */
a.no-link {
  filter: none; opacity: 1; border-bottom: 0; padding-bottom: 0;
}

/* ---------- MONO ---------- */
.mono {
  font-family: "SohneMono", monospace;
  font-variant-numeric: tabular-nums;
}

/* ---------- STRUCK (stated quotes) ---------- */
.struck {
  font-family: "Redaction", serif;
  font-style: italic;
  font-weight: 400;
  color: var(--grey-500);
  text-decoration: line-through;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
}