/* ==========================================================================
   MAROSI — Field Note article pages (notes/*.html)
   The whitepaper voice of the site: dark chrome (html.inverted tokens from
   main.css), a live pattern vessel as the masthead (the same Canvas 2D
   pattern as the note's card on the shelf, js/note-covers.js), then a
   single quiet reading column with mono section indices, hairline rules,
   and a numbered reference list. Loads after notes.css, which provides the
   nav override and the vessel grammar.
   ========================================================================== */

/* ---------- masthead: a full-bleed pattern band from the page's top ---------- */
/* the pattern runs edge to edge AND up under the floating nav: the band
   starts at y=0 and what used to be its top margin is now internal padding
   (min-height grows by the same amount), so the copy sits exactly where it
   did. Square corners, one hairline at the bottom, no side borders. */
.article-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(clamp(420px, 58svh, 660px) + var(--nav-h) + var(--nav-top) + clamp(1rem, 3vh, 2.5rem));
  overflow: hidden;
  isolation: isolate;
  background: #0c0e11;
  box-shadow: var(--shadow-panel);
  touch-action: pan-y;
  padding-top: calc(var(--nav-h) + var(--nav-top) + clamp(1rem, 3vh, 2.5rem));
}
.article-hero .note-canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
.article-hero-inner {
  position: relative; z-index: 2;
  flex: 1;
  display: flex; flex-direction: column;
}
.article-hero-copy {
  display: flex; flex-direction: column; justify-content: space-between;
  flex: 1;
  gap: clamp(2.5rem, 7vh, 5rem);
  /* same inset the boxed hero had, so the text sits exactly where it did */
  padding: clamp(1.75rem, 3.5vw, 3.25rem);
  pointer-events: none;
}
.article-topline {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
  flex-wrap: wrap;
}
.article-meta { color: var(--grey-600); text-shadow: 0 0 14px rgba(8, 9, 11, 0.9); }
.article-back {
  pointer-events: auto;
  color: var(--grey-600);
  transition: color 0.2s ease;
  padding: 10px 0; margin: -10px 0; /* tap target */
}
.article-back:hover { color: var(--fg); }
.article-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 5.4vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
  max-width: 20ch;
  text-shadow: 0 0 20px rgba(8, 9, 11, 0.85), 0 2px 10px rgba(8, 9, 11, 0.7);
}
.article-dek {
  margin-top: 1.1rem;
  color: var(--grey-700);
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  line-height: 1.5;
  max-width: 56ch;
  text-shadow: 0 0 16px rgba(8, 9, 11, 0.9), 0 1px 8px rgba(8, 9, 11, 0.75);
}

/* ---------- the reading spread: contents rail + wide column ---------- */
/* the page reads as a whitepaper spread, not a blog ribbon: on desktop the
   contents list docks into a sticky left rail (the nav is absolute, so the
   rail owns the margin once you scroll) and the text column takes the width
   a document deserves */
.article-body {
  display: flex;
  justify-content: center;
  gap: clamp(3rem, 6vw, 7rem);
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(3.5rem, 8vh, 6.5rem) var(--gutter) clamp(4rem, 9vh, 7rem);
  font-size: clamp(1.125rem, 1.35vw, 1.3125rem);
  line-height: 1.7;
  color: var(--grey-700);
}
.article-rail { flex: 0 0 clamp(220px, 19vw, 280px); min-width: 0; }
.article-rail .article-toc { position: sticky; top: clamp(1.5rem, 4vh, 3rem); }
.article-main { flex: 0 1 880px; min-width: 0; }
.article-main > * + * { margin-top: 1.35em; }

/* abstract: the whitepaper's front door, framed in hairlines */
.article-abstract .abstract-label { margin-bottom: 1.1rem; }
.article-abstract p { color: var(--fg); font-size: 1.06em; line-height: 1.65; }
.article-abstract p + p { margin-top: 1em; }

/* contents (sticky in the rail on desktop; js/article.js lights the
   section being read) */
.article-toc { padding: 0.5rem 0 1rem; }
.article-toc .toc-label { margin-bottom: 1rem; }
.article-toc ol { display: flex; flex-direction: column; gap: 0.15rem; list-style: none; padding: 0; }
.article-toc a {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--grey-400);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92em;
  letter-spacing: -0.008em;
  line-height: 1.3;
  transition: padding-left 0.3s var(--ease-out), color 0.2s ease-out;
}
.article-toc a:hover { color: var(--fg); padding-left: 0.4em; }
.article-toc a.is-active { color: var(--fg); }
.article-toc .toc-n { font-family: var(--font-mono); font-size: 0.72em; color: var(--grey-600); letter-spacing: 0.08em; }
.article-toc a.is-active .toc-n { color: var(--fg); }

/* sections */
.article-section { margin-top: clamp(3rem, 7vh, 4.5rem); }
.article-section > * + * { margin-top: 1.35em; }
.sec-head {
  display: flex; align-items: baseline; gap: 1.2rem;
  color: var(--fg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
  letter-spacing: -0.024em;
  line-height: 1.1;
  scroll-margin-top: 2rem;
}
.sec-index { flex: none; font-size: 0.5em; transform: translateY(-0.35em); }
.article-section h3 {
  margin-top: 2em;
  color: var(--fg);
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 1.18em;
  letter-spacing: -0.015em;
}
.article-body strong { color: var(--fg); font-weight: 650; }
.article-body a { border-bottom: 1px solid var(--hairline-strong); transition: border-color 0.15s ease-out; }
.article-body a:hover { border-bottom-color: var(--fg); }
/* content lists live inside sections; the TOC and references number themselves */
.article-section ul, .article-section ol, .article-abstract ul, .article-abstract ol {
  padding-left: 1.4em; display: flex; flex-direction: column; gap: 0.6em;
}
.article-section ul, .article-abstract ul { list-style: disc; }
.article-section ol, .article-abstract ol { list-style: decimal; }
.article-section li::marker, .article-abstract li::marker { color: var(--grey-400); }
.article-body blockquote {
  border-left: 2px solid var(--hairline-strong);
  padding: 0.35em 0 0.35em 1.4em;
  color: var(--grey-400);
  font-size: 1.05em;
}
.article-body code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: rgba(244, 245, 247, 0.07);
  border-radius: 5px;
  padding: 0.12em 0.4em;
}
.article-body pre {
  background: #0c0e11;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 1.2em 1.4em;
  overflow-x: auto;
}
.article-body pre code { background: none; padding: 0; font-size: 0.82em; line-height: 1.65; }

/* tables: hairline data sheets */
.article-table-wrap { overflow-x: auto; }
.article-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92em;
  line-height: 1.5;
}
.article-body th {
  font-family: var(--font-mono);
  font-size: 0.72em;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey-600);
  text-align: left;
}
.article-body th, .article-body td {
  padding: 0.75em 1.1em 0.75em 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
.article-body thead th { border-bottom: 1px solid var(--hairline-strong); }
.article-body td:first-child { color: var(--fg); }

/* citation markers */
sup.ref { font-size: 0.62em; letter-spacing: 0; }
sup.ref a {
  font-family: var(--font-mono);
  color: var(--grey-400);
  border-bottom: none;
  padding: 0.4em 0.15em; margin: -0.4em -0.05em; /* tap target */
}
sup.ref a:hover { color: var(--fg); }

/* references */
.article-refs { margin-top: clamp(3rem, 7vh, 4.5rem); border-top: 1px solid var(--hairline-strong); padding-top: 2rem; }
/* a real heading for the outline, dressed as the quiet mono label */
.refs-label { margin-bottom: 1.2rem; }
.article-refs ol {
  list-style: none;
  padding: 0;
  display: flex; flex-direction: column; gap: 0.7em;
  font-size: 0.9em;
  counter-reset: ref;
}
.article-refs li {
  display: flex; gap: 1.1em;
  scroll-margin-top: 2rem;
}
.article-refs li::before {
  counter-increment: ref;
  content: "[" counter(ref) "]";
  font-family: var(--font-mono);
  font-size: 0.82em;
  color: var(--grey-600);
  flex: none;
  padding-top: 0.15em;
}
.article-refs a { overflow-wrap: anywhere; }

/* prev / next */
.article-pagenav {
  margin-top: clamp(3.5rem, 8vh, 5.5rem);
  border-top: 1px solid var(--hairline-strong);
  padding-top: 1.8rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gap);
}
.pagenav-card { display: flex; flex-direction: column; gap: 0.5rem; }
.pagenav-card--next { text-align: right; grid-column: 2; }
.pagenav-title {
  color: var(--fg);
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 1.12em;
  letter-spacing: -0.015em;
  transition: opacity 0.2s ease;
}
.pagenav-card:hover .pagenav-title { opacity: 0.7; }

/* ---------- the closing invitation: bare text, one button ---------- */
.article-cta {
  text-align: center;
  padding-block: clamp(2rem, 5vh, 4rem);
}
.article-cta-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.6vw, 3.25rem);
  letter-spacing: -0.028em;
  line-height: 1.05;
  text-wrap: balance;
}
.article-cta-sub {
  margin: 1rem auto clamp(1.75rem, 4vh, 2.5rem);
  color: var(--grey-700);
  max-width: 52ch;
  text-wrap: balance;
}
.article-cta-sub a { border-bottom: 1px solid var(--hairline-strong); transition: border-color 0.15s ease-out, color 0.15s ease-out; }
.article-cta-sub a:hover { color: var(--fg); border-bottom-color: var(--fg); }
.article-cta .btn { background: var(--fg); color: var(--bg); }
.article-cta .btn:hover { background: var(--btn-hover); }

.article-outro { padding-bottom: clamp(5rem, 10vh, 8rem); }

/* tablet and down: the rail dissolves, contents ride inline above the text */
@media (max-width: 1100px) {
  .article-body { display: block; max-width: 880px; }
  .article-rail { margin-bottom: 2.5rem; }
  .article-rail .article-toc { position: static; }
  .article-toc a { font-size: 1em; }
}

@media (max-width: 640px) {
  .article-hero { min-height: clamp(380px, 52svh, 540px); }
  .article-pagenav { grid-template-columns: 1fr; }
  .pagenav-card--next { text-align: left; grid-column: auto; }
}