/* ============================================================
   thinkread.ai — base.css
   Brand: "Editorial / warm literary" reading identity.
   Warm paper, near-black ink, a single fountain-pen ink-blue accent.
   Type trio (Archivo grotesque / Source Serif 4 / Space Mono) is shared
   with the flagship work, so the whole publication reads as one.
   Each WORK may layer its own bespoke look on top.
   ============================================================ */

:root {
  /* ---- canvas & ink ---- */
  --bg:        #FAF7F0;   /* warm paper, gallery wall */
  --bg-2:      #F1EBDD;   /* sunken panel */
  --bg-card:   #FFFDF8;   /* card surface, a shade brighter than paper */
  --ink:       #16130E;   /* near-black, never pure */
  --ink-soft:  #574F42;   /* secondary text */
  --ink-mute:  #8C8472;   /* metadata / captions */
  --line:      #E2DAC8;   /* hairline rules */
  --line-strong: #CFC6B2;

  /* ---- single editorial accent: fountain-pen ink-blue ---- */
  --accent:      #2B3C63;
  --accent-deep: #1C2A49;
  --accent-soft: #C7D0E4;  /* tint, for underlines/fills */
  --gold:        #B6923B;  /* rare warm secondary; echoes the flagship */

  /* back-compat aliases (older home/film-dialogue rules referenced these) */
  --accent-2:  var(--gold);
  --accent-3:  var(--accent);
  --accent-4:  var(--ink-soft);
  --hl:        var(--accent-soft);

  /* film-dialogue gender encoding */
  --female:    #b0476a;
  --male:      #2f7e7c;

  --maxw: 1180px;
  --measure: 38rem;          /* readable narrative width */
  --radius: 4px;             /* editorial = barely-rounded */
  --shadow-soft: 0 10px 34px rgba(22,19,14,0.07);

  /* CJK system stacks (macOS-first; render instantly, no download) */
  --font-cjk-serif: "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif SC", serif;
  --font-cjk-sans: "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans SC", sans-serif;

  /* Latin stacks carry a CJK fallback so mixed text always renders */
  --font-display: "Archivo", "Helvetica Neue", Arial, var(--font-cjk-sans);
  --font-ui: "Inter", system-ui, var(--font-cjk-sans);
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", var(--font-cjk-serif);
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", monospace;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-serif);   /* editorial: serif by default */
  font-size: 1.125rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; padding: 0; }
::selection { background: var(--accent-soft); color: var(--ink); }

/* ---------- typography ---------- */
h1, h2, h3 { font-family: var(--font-display); line-height: 1.03; letter-spacing: -0.02em; font-weight: 800; }
.hero-title { font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.55rem); }
.serif { font-family: var(--font-serif); }
.sans  { font-family: var(--font-ui); }
.dek { color: var(--ink-soft); font-family: var(--font-serif); font-size: 1.12rem; line-height: 1.55; }
.eyebrow, .kicker {
  font-family: var(--font-mono); font-weight: 400; text-transform: uppercase;
  letter-spacing: 0.22em; font-size: 0.7rem; color: var(--ink-mute);
}

/* ---------- layout helpers ---------- */
.wrap { width: min(100% - 2.4rem, var(--maxw)); margin-inline: auto; }
.narrow { width: min(100% - 2.4rem, 720px); margin-inline: auto; }
.rule { height: 1px; background: var(--line); border: 0; }

/* ---------- signature: the thin editorial underline ----------
   Wrap a key word in <span class="hl">…</span>. Reads like a hand-ruled
   accent line under the word — NOT a highlighter. */
.hl {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-size: 100% 0.09em;
  background-position: 0 92%;
  padding-bottom: 0.02em;
}
.hl--gold  { --accent: var(--gold); }
.hl--soft  { background-size: 100% 0.4em; background-position: 0 78%; background-image: linear-gradient(var(--accent-soft), var(--accent-soft)); }

/* small mono catalogue tag (replaces the old yellow sticky note) */
.note {
  display: inline-block; font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent);
  padding: 0.28em 0.55em; border-radius: 2px;
}

/* ---------- pill / tag (refined, no rotation, no hard shadow) ---------- */
.sticker {
  display: inline-flex; align-items: center; gap: 0.45em;
  background: transparent; color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.5em 1em;
  font-family: var(--font-ui); font-weight: 500; font-size: 0.9rem;
  transition: background 0.16s var(--ease), color 0.16s var(--ease), border-color 0.16s var(--ease);
  white-space: nowrap;
}
.sticker:hover { border-color: var(--ink); }
.sticker--alt    { }
.sticker--brand,
.sticker--blue   { border-color: var(--accent); color: var(--accent); }
.sticker--yellow { border-color: var(--gold);   color: var(--gold); }
.sticker--pink, .sticker--teal, .sticker--orange { border-color: var(--line-strong); color: var(--ink-soft); }
.sticker.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }