/* ==========================================================================
   Reading Room — editorial reading interface
   Signature: highlighter-yellow accent (carried from paleocene.net) used as
   a literal highlight. Reading face Newsreader; Literata for E Ink. The
   reading view stays disciplined; personality lives in the chrome + type.
   ========================================================================== */

/* --- Self-hosted fonts (cached by the service worker for offline) --------- */
@font-face {
  font-family: "Newsreader"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/fonts/newsreader-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader"; font-style: italic; font-weight: 400;
  font-display: swap; src: url("/fonts/newsreader-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("/fonts/newsreader-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("/fonts/newsreader-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Literata"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/fonts/literata-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Literata"; font-style: italic; font-weight: 400;
  font-display: swap; src: url("/fonts/literata-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Literata"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("/fonts/literata-latin-600-normal.woff2") format("woff2");
}

/* --- Tokens --------------------------------------------------------------- */
:root {
  --paper: #FBFAF7;
  --ink: #1A1916;
  --ink-soft: #6B6862;
  --rule: #E3E0D8;
  --highlight: #FFE45C;       /* the signature */
  --highlight-deep: #E8B400;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Newsreader", Georgia, serif;

  --bg: var(--paper);
  --fg: var(--ink);
  --soft: var(--ink-soft);
  --line: var(--rule);
  --accent: var(--highlight);
  --accent-deep: var(--highlight-deep);
  --read-serif: var(--serif);

  --read-size: 20px;
  --read-measure: 38rem;     /* "wide" default */
}

[data-theme="dark"] {
  --bg: #16151300;        /* set below as solid */
  --bg: #161513;
  --fg: #EDEAE2;
  --soft: #9A958A;
  --line: #2E2C28;
  --accent: #FFE45C;
  --accent-deep: #FFE45C;
}

/* E Ink: pure black on white, no warm tints, no yellow (it muddies on grayscale).
   Accent becomes an underline. Body switches to Literata, which holds contrast. */
[data-theme="eink"] {
  --bg: #FFFFFF;
  --fg: #000000;
  --soft: #444444;
  --line: #000000;
  --accent: #000000;
  --accent-deep: #000000;
  --read-serif: "Literata", Georgia, serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.2s ease, color 0.2s ease;
}
[data-theme="eink"] body, [data-theme="eink"] * { transition: none !important; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--soft);
}

/* --- Token gate ----------------------------------------------------------- */
.gate {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: var(--bg); z-index: 50; padding: 1.5rem;
}
.gate-card { width: 100%; max-width: 22rem; }
.gate-title { font-family: var(--serif); font-weight: 600; font-size: 1.75rem; margin: 0.4rem 0 0.5rem; }
.gate-note { color: var(--soft); font-size: 0.875rem; line-height: 1.5; }
.gate-note code { background: var(--accent); color: var(--ink); padding: 0 0.25em; border-radius: 2px; }
.gate input {
  width: 100%; margin-top: 1rem; padding: 0.7rem 0.8rem; font-size: 1rem;
  border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--fg);
}
.gate input:focus { outline: 2px solid var(--accent-deep); outline-offset: 1px; }
.gate-error { color: #B4302A; font-size: 0.8125rem; margin-top: 0.6rem; }
.btn-primary {
  margin-top: 0.9rem; width: 100%; padding: 0.7rem; font-size: 0.9375rem; font-weight: 600;
  border: none; border-radius: 6px; background: var(--fg); color: var(--bg); cursor: pointer;
}

/* --- Masthead ------------------------------------------------------------- */
.index { max-width: 44rem; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
.masthead { border-bottom: 2px solid var(--fg); padding-bottom: 0.75rem; margin-bottom: 0.5rem; }
.masthead-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.wordmark {
  font-family: var(--serif); font-weight: 700; font-size: clamp(1.6rem, 5vw, 2.25rem);
  margin: 0; line-height: 1; letter-spacing: -0.01em;
  /* highlighter swipe under the wordmark — the signature */
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% 0.32em;
  padding: 0 0.05em;
}
[data-theme="eink"] .wordmark { background: none; text-decoration: underline; text-decoration-thickness: 3px; }
.masthead-meta { display: flex; align-items: center; gap: 0.75rem; }
.offline-flag {
  font-family: var(--sans); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--bg); background: var(--soft);
  padding: 0.15rem 0.4rem; border-radius: 3px;
}
.tabs { display: flex; gap: 0.25rem; }
.tab {
  font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em;
  background: none; border: none; color: var(--soft); cursor: pointer; padding: 0.2rem 0.1rem;
  border-bottom: 2px solid transparent; margin-bottom: -0.78rem;
}
.tab.is-active { color: var(--fg); border-bottom-color: var(--accent-deep); }
.masthead-folio { font-family: var(--sans); font-size: 0.75rem; color: var(--soft); margin: 0.6rem 0 0; }

/* --- Index list (contents page) ------------------------------------------ */
.index-list { display: flex; flex-direction: column; }
.entry {
  display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 1rem;
  padding: 1.15rem 0; border-bottom: 1px solid var(--line); cursor: pointer;
  align-items: start;
}
.entry:hover .entry-title { background-size: 100% 100%; }
.entry-kicker { grid-column: 1 / -1; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.entry-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--soft); }
.entry-title {
  grid-column: 1 / -1;
  font-family: var(--serif); font-weight: 600; font-size: 1.3rem; line-height: 1.2;
  margin: 0.15rem 0 0; color: var(--fg);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat; background-position: 0 1.05em; background-size: 100% 0; 
  transition: background-size 0.15s ease;
}
[data-theme="eink"] .entry-title { background: none; }
[data-theme="eink"] .entry:hover .entry-title { text-decoration: underline; }
.entry-excerpt { grid-column: 1 / -1; color: var(--soft); font-size: 0.9375rem; line-height: 1.45; margin: 0.3rem 0 0; }
.entry-actions { grid-row: 1; grid-column: 2; display: flex; align-items: center; gap: 0.5rem; }
.entry-star, .entry-archive {
  background: none; border: none; cursor: pointer;
  font-size: 1.1rem; color: var(--soft); line-height: 1; padding: 0;
}
.entry-star.is-on { color: var(--accent-deep); }
[data-theme="eink"] .entry-star.is-on { color: #000; }
/* Archive affordance: hidden until you hover the row (pointer devices only;
   touch devices get the long-press menu instead). */
.entry-archive { opacity: 0; transition: opacity 0.12s ease, color 0.12s ease; }
.entry-archive:hover { color: var(--fg); }
@media (hover: hover) { .entry:hover .entry-archive { opacity: 0.75; } }
@media (hover: none) { .entry-archive { display: none; } }

/* Right-click / long-press context menu */
.ctx-menu {
  position: fixed; z-index: 100; min-width: 168px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  padding: 0.3rem; display: flex; flex-direction: column;
}
.ctx-item {
  background: none; border: none; text-align: left; cursor: pointer;
  font-family: var(--sans); font-size: 0.95rem; color: var(--fg);
  padding: 0.55rem 0.7rem; border-radius: 5px;
}
.ctx-item:hover { background: var(--line); }
.ctx-item.is-danger { color: #B4302A; }
[data-theme="dark"] .ctx-item.is-danger { color: #E8736D; }
[data-theme="eink"] .ctx-menu { box-shadow: none; border-width: 2px; }

.empty { text-align: center; padding: 4rem 1rem; }
.empty-head { font-family: var(--serif); font-size: 1.4rem; margin: 0; }
.empty-sub { color: var(--soft); margin: 0.4rem 0 0; }

/* --- Reader --------------------------------------------------------------- */
.reader { position: fixed; inset: 0; background: var(--bg); overflow: hidden; }
.reader-bar {
  position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between;
  align-items: center; padding: 0.6rem 1rem; background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.reader-bar-right { display: flex; gap: 0.25rem; }
.icon-btn {
  font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; color: var(--fg);
  background: none; border: none; cursor: pointer; padding: 0.35rem 0.55rem; border-radius: 5px;
}
.icon-btn:hover { background: var(--line); }
#star-btn.is-on { color: var(--accent-deep); }

.type-panel {
  position: absolute; top: 3rem; right: 1rem; z-index: 20; width: min(20rem, calc(100vw - 2rem));
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.14); padding: 0.9rem;
  display: flex; flex-direction: column; gap: 0.75rem;
}
[data-theme="eink"] .type-panel { box-shadow: none; border: 2px solid #000; }
.type-group { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.type-label { font-family: var(--sans); font-size: 0.75rem; font-weight: 600; color: var(--soft); letter-spacing: 0.04em; }
.seg { display: flex; gap: 0.2rem; }
.seg-btn {
  font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; color: var(--soft);
  background: none; border: 1px solid var(--line); border-radius: 6px; padding: 0.3rem 0.6rem; cursor: pointer;
}
.seg-btn.is-active { color: var(--bg); background: var(--fg); border-color: var(--fg); }

/* Reading column */
.reader-scroll { position: absolute; inset: 3rem 0 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.reader-content {
  max-width: var(--read-measure); margin: 0 auto; padding: 2.5rem 1.5rem 6rem;
  font-family: var(--read-serif); font-size: var(--read-size); line-height: 1.62;
  color: var(--fg); font-feature-settings: "onum" 1;
}
[data-width="narrow"] { --read-measure: 32rem; }

/* Article furniture */
.art-kicker { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.75rem; }
.art-title {
  font-family: var(--read-serif); font-weight: 700; font-size: 1.9em; line-height: 1.12;
  letter-spacing: -0.01em; margin: 0 0 0.5rem;
}
.art-byline { font-family: var(--sans); font-size: 0.8125rem; color: var(--soft); margin: 0 0 2rem; }
.art-byline a { color: inherit; }
.art-rule { border: none; border-top: 1px solid var(--line); margin: 0 0 2rem; }

.reader-content p { margin: 0 0 1.3em; }
.reader-content h2, .reader-content h3 { font-family: var(--read-serif); font-weight: 600; line-height: 1.25; margin: 2em 0 0.6em; }
.reader-content h2 { font-size: 1.4em; }
.reader-content h3 { font-size: 1.18em; }
.reader-content a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent-deep); text-decoration-thickness: 2px; text-underline-offset: 2px; }
.reader-content img { max-width: 100%; height: auto; display: block; margin: 1.6em auto; }
.reader-content figure { margin: 1.6em 0; }
.reader-content figcaption { font-family: var(--sans); font-size: 0.8125rem; color: var(--soft); text-align: center; margin-top: 0.5rem; }
.reader-content blockquote {
  margin: 1.6em 0; padding-left: 1.1em; border-left: 3px solid var(--accent-deep);
  font-style: italic; color: var(--fg);
}
.reader-content mark { background: var(--accent); color: var(--ink); }
.reader-content pre { background: var(--line); padding: 1em; border-radius: 6px; overflow-x: auto; font-size: 0.85em; }
.reader-content code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.85em; }

/* --- Pagination mode ------------------------------------------------------ */
[data-mode="page"] .reader-scroll { overflow: hidden; }
[data-mode="page"] .reader-content {
  max-width: none; height: 100%; padding: 2.5rem 0 3.5rem;
  column-width: var(--read-measure); column-gap: 3rem; column-fill: auto;
  margin: 0 auto; width: min(var(--read-measure), calc(100vw - 3rem));
  transition: transform 0.18s ease;
}
[data-theme="eink"] [data-mode="page"] .reader-content { transition: none; }
.page-zone {
  position: absolute; top: 3rem; bottom: 0; width: 22%; z-index: 5;
  background: none; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.page-zone-left { left: 0; }
.page-zone-right { right: 0; }
.folio {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 6;
  text-align: center; font-family: var(--sans); font-size: 0.75rem; color: var(--soft);
  padding: 0.6rem; background: var(--bg); border-top: 1px solid var(--line); pointer-events: none;
}

/* --- Accessibility -------------------------------------------------------- */
button:focus-visible, input:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
[hidden] { display: none !important; }