/* ==========================================================================
   FACE LEVEL — long-form article pages under /riverboards/ (extends ../styles.css)
   Built for reading: one 700px measure, a sticky contents rail on wide screens,
   the short answer first, real tables, numbered sources you can jump to.
   Pages are generated by tools/build-article.mjs.
   ========================================================================== */

:root {
  --tana: #5ad13e;
  --ink: #e2e0d8;
  --card: #111214;
  --measure: 700px;
}

.nav__cta--tana { background: var(--tana); }
.nav__cta--tana:hover { background: var(--bone); }
.btn--tana { background: var(--tana); }

/* ---------- header ---------- */
.post__head {
  padding-top: clamp(124px, 17vh, 184px);
  padding-bottom: clamp(36px, 5vh, 56px);
  border-bottom: 1px solid var(--line);
}
.post__kicker { color: var(--hzd); margin-bottom: 22px; }
.post__title {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.5rem, 6.2vw, 5rem); line-height: 0.96; letter-spacing: 0.01em;
  max-width: 14em; text-wrap: balance;
}
.post__deck {
  margin-top: 20px; max-width: 34em;
  font-size: clamp(1.2rem, 2.1vw, 1.55rem); font-weight: 300; line-height: 1.4; color: var(--dim);
  text-wrap: balance;
}
.byline { display: flex; align-items: center; gap: 16px; margin-top: 34px; }
.byline__img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); }
.byline__text { display: grid; gap: 4px; line-height: 1.3; }
.byline__name { font-weight: 600; font-size: 1.02rem; }
.byline__name a { border-bottom: 1px solid var(--line); }
.byline__name a:hover { border-color: var(--hzd); }
.byline .mono { color: var(--dim); font-size: 0.68rem; }

/* ---------- layout ---------- */
.post__grid {
  display: grid; grid-template-columns: 200px minmax(0, var(--measure)); gap: clamp(40px, 6vw, 88px);
  padding-top: clamp(40px, 6vh, 64px); padding-bottom: clamp(90px, 13vh, 150px);
}
@media (max-width: 980px) {
  .post__grid { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
}

/* contents rail */
.toc { position: sticky; top: 96px; align-self: start; max-height: calc(100vh - 120px); overflow-y: auto; }
.toc__label { color: var(--dim); font-size: 0.64rem; margin-bottom: 14px; }
.toc ol { list-style: none; border-left: 1px solid var(--line); }
.toc a {
  display: block; padding: 7px 0 7px 14px; margin-left: -1px;
  border-left: 1px solid transparent;
  font-size: 0.86rem; line-height: 1.35; color: var(--dim);
  transition: color 0.25s, border-color 0.25s;
}
.toc a:hover { color: var(--bone); }
.toc a.is-active { color: var(--bone); border-left-color: var(--hzd); }

/* the same list, folded, for narrow screens (sits under the short answer) */
.toc-inline { display: none; margin: 0 0 48px; border: 1px solid var(--line); }
@media (max-width: 980px) { .toc-inline { display: block; } }
.toc-inline summary { cursor: pointer; padding: 14px 18px; color: var(--dim); list-style: none; }
.toc-inline summary::-webkit-details-marker { display: none; }
.toc-inline summary::after { content: "+"; float: right; color: var(--hzd); }
.toc-inline[open] summary::after { content: "–"; }
.toc-inline ol { padding: 0 18px 16px 38px; }
.toc-inline li { padding: 4px 0; line-height: 1.45; color: var(--dim); }
.toc-inline a { color: var(--ink); }

/* ---------- body type ---------- */
.post__body { min-width: 0; color: var(--ink); font-size: 1.125rem; line-height: 1.75; }
.post__body p { margin: 0 0 1.3em; }
.post__body strong { color: var(--bone); font-weight: 600; }
.post__body em { font-style: italic; }
.post__body a:not(.btn):not(.cite):not(.h-anchor) {
  text-decoration: underline; text-decoration-color: rgba(255, 224, 0, 0.55);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: color 0.2s, text-decoration-color 0.2s;
}
.post__body a:not(.btn):not(.cite):not(.h-anchor):hover { color: var(--hzd); text-decoration-color: var(--hzd); }

.post__body h2 {
  position: relative;
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.65rem, 3.1vw, 2.3rem); line-height: 1.06; letter-spacing: 0.015em;
  color: var(--bone); margin: 2.4em 0 0.75em; text-wrap: balance;
  scroll-margin-top: 92px;
}
.h-anchor {
  position: absolute; left: -1.1em; top: 0; width: 1em;
  color: var(--dim); opacity: 0; transition: opacity 0.2s;
}
.post__body h2:hover .h-anchor { opacity: 1; }
@media (max-width: 1100px) { .h-anchor { display: none; } }

.post__body ul { list-style: none; margin: 0 0 1.5em; }
.post__body ul li { position: relative; padding-left: 22px; margin-bottom: 0.55em; }
.post__body ul li::before { content: "▸"; position: absolute; left: 0; color: var(--hzd); }

/* citations: small, quiet, but every one jumps to its source */
.cite {
  font-family: var(--font-mono); font-size: 0.66em; letter-spacing: 0;
  color: var(--dim); vertical-align: 0.32em; line-height: 0;
  padding: 0 1px; transition: color 0.2s;
}
.cite:hover { color: var(--hzd); }

/* ---------- short answer + disclosure ---------- */
.answer {
  background: var(--card); border: 1px solid rgba(255, 224, 0, 0.32);
  padding: clamp(22px, 3vw, 30px) clamp(20px, 3vw, 32px);
  margin-bottom: 26px;
}
.answer__label { color: var(--hzd); font-size: 0.66rem; margin-bottom: 10px; }
.answer p:last-child { margin: 0; font-size: 1.2rem; line-height: 1.65; color: var(--bone); }
.disclosure {
  border: 1px solid var(--line); padding: 18px 22px; margin-bottom: 48px;
  font-size: 0.98rem; line-height: 1.65; color: var(--dim);
}
.disclosure p { margin: 0; }
.disclosure strong { color: var(--ink); }

/* ---------- figures ---------- */
.fig { margin: 2.6em 0; }
.fig img { width: 100%; height: auto; border: 1px solid var(--line); background: var(--card); }
.fig figcaption { margin-top: 12px; font-size: 0.92rem; line-height: 1.5; color: var(--dim); }
.fig figcaption em { font-style: normal; }

/* ---------- comparison table ---------- */
.compare-wrap { margin: 2.2em 0 2.6em; }
.compare { width: 100%; border-collapse: collapse; font-size: 0.93rem; line-height: 1.5; }
.compare thead th {
  text-align: left; vertical-align: bottom; padding: 0 14px 14px;
  font-weight: 600; font-size: 0.98rem; color: var(--bone);
  border-bottom: 2px solid var(--hzd);
}
.compare thead th:last-child { border-bottom-color: var(--tana); }
.compare tbody th {
  text-align: left; vertical-align: top; width: 21%; padding: 14px 14px 14px 0;
  font-family: var(--font-mono); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--dim);
}
.compare td { vertical-align: top; padding: 14px; color: var(--ink); }
.compare tbody tr { border-bottom: 1px solid var(--line); }
.compare tbody tr:hover { background: rgba(236, 234, 227, 0.03); }
/* narrow screens: one card per row, each cell labelled with its column */
@media (max-width: 680px) {
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: 100%; }
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare tbody tr { padding: 18px 0; }
  .compare tbody th { width: auto; padding: 0 0 8px; color: var(--hzd); }
  .compare td { padding: 6px 0 6px 14px; border-left: 2px solid var(--line); margin-top: 8px; }
  .compare td:last-child { border-left-color: var(--tana); }
  .compare td::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim);
  }
}

/* ---------- CTA, FAQ ---------- */
.post__cta { margin: 1.8em 0 2.4em !important; }
.faq__item { border-top: 1px solid var(--line); padding-top: 22px; margin-top: 22px; }
.faq__item h3 { font-size: 1.18rem; font-weight: 600; line-height: 1.35; color: var(--bone); margin-bottom: 8px; }
.faq__item p { margin-bottom: 0.4em; }

/* ---------- author ---------- */
.author { margin-top: 4.5em; padding-top: 0.5em; border-top: 1px solid var(--line); scroll-margin-top: 92px; }
.post__body .author h2, .post__body .sources h2 { margin-top: 1.4em; }
.author__row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 28px; align-items: start; }
.author__img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); }
.author p { font-size: 1.02rem; line-height: 1.7; }
@media (max-width: 560px) { .author__row { grid-template-columns: 1fr; gap: 18px; } .author__img { width: 96px; height: 96px; } }

/* ---------- sources ---------- */
.sources { margin-top: 4em; }
.sources ol { padding-left: 1.6em; font-size: 0.84rem; line-height: 1.55; color: var(--dim); }
.sources li { margin-bottom: 10px; padding: 2px 6px; overflow-wrap: anywhere; scroll-margin-top: 110px; transition: background 0.6s; }
.sources li::marker { font-family: var(--font-mono); font-size: 0.75rem; }
.sources li:target { background: rgba(255, 224, 0, 0.13); color: var(--ink); }
.sources a { color: var(--dim) !important; text-decoration-color: var(--line) !important; }
.sources a:hover { color: var(--hzd) !important; }

/* ---------- draft-only editor notes (the --publish build refuses to run while any are left) ---------- */
.ed-note {
  background: var(--hzd); color: #000; font-family: var(--font-mono); font-style: normal;
  font-size: 0.72rem; letter-spacing: 0.03em; line-height: 1.6; padding: 2px 7px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.ed-block { border: 1px dashed var(--hzd); padding: 12px 14px; }

@media (max-width: 560px) {
  .post__body { font-size: 1.06rem; }
  .answer p:last-child { font-size: 1.1rem; }
}