/* ============================================================
   MELA FIELD NOTES — PIECE PAGE STYLES
   Extends design-system.css. For /notes/01, /notes/02, etc.
   Long-form reading register. Editorial. Print-adjacent.
   ============================================================ */

/* ─── Layout shell ─────────────────────────────────────────── */

.notes-page {
  padding-top: 96px;        /* leave space for fixed header */
  padding-bottom: var(--space-16);
}

.notes-page main {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* ─── Article masthead ─────────────────────────────────────── */

.piece-masthead {
  padding: var(--space-12) 0 var(--space-10);
  border-bottom: 1px solid var(--parchment-dark);
  margin-bottom: var(--space-10);
}

.piece-masthead .label-mono {
  margin-bottom: var(--space-6);
  display: block;
}

.piece-issue {
  color: var(--gold-ink);
  margin-right: var(--space-3);
}

.piece-issue::after {
  content: '·';
  margin-left: var(--space-3);
  color: var(--bark-whisper);
}

.piece-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.5vw, 3.75rem);
  line-height: 0.96;
  letter-spacing: -0.035em;
  font-variation-settings: 'opsz' 144;
  font-weight: 340;
  color: var(--deep-bark);
  margin: 0 0 var(--space-6) 0;
}

.piece-title em {
  font-style: italic;
  font-weight: 340;
}

.piece-dek {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-style: italic;
  font-variation-settings: 'opsz' 96;
  font-weight: 360;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0;
}

.piece-meta {
  margin-top: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--label-ink);
}

.piece-meta > span::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--bark-whisper);
  vertical-align: middle;
  margin-right: var(--space-2);
}

.piece-meta > span:first-child::before { display: none; }

.piece-byline {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--label-ink);
}
.piece-byline a { color: var(--gold-ink); text-decoration: none; border-bottom: 1px solid var(--parchment-dark); }
.piece-byline a:hover { border-bottom-color: var(--gold-ink); }

.piece-legal {
  margin-top: var(--space-10);
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  letter-spacing: 0.04em;
  color: var(--label-ink);
  text-align: center;
}
.piece-legal a { color: var(--label-ink); border-bottom: 1px solid var(--parchment-dark); text-decoration: none; }
.piece-legal a:hover { border-bottom-color: var(--label-ink); }

/* ─── Article body ─────────────────────────────────────────── */

.piece-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--ink-body);
}

.piece-body > * + * { margin-top: var(--space-3); }

.piece-body p {
  margin: 0;
}

.piece-body p + p { margin-top: var(--space-3); }

.piece-body em { font-style: italic; }
.piece-body strong { font-weight: 600; color: var(--deep-bark); }

/* H2 — section breaks. Display type. Big. Carved. */
.piece-body h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 360;
  font-variation-settings: 'opsz' 96;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--deep-bark);
  margin-top: var(--space-12);
  margin-bottom: var(--space-5);
  padding-top: var(--space-6);
  position: relative;
}

.piece-body h2::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--gold);
  opacity: 0.5;
  position: absolute;
  top: 0;
  left: 0;
}

/* H3 — sub-sections. Italic, smaller. Used for Step 1, Step 2, etc. */
.piece-body h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  font-style: italic;
  font-variation-settings: 'opsz' 72;
  letter-spacing: -0.01em;
  color: var(--bark);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

/* Links — gold underline, like the locked landing */
.piece-body a {
  color: var(--gold-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-glow);
  transition: border-color 200ms var(--ease-deliberate), color 200ms var(--ease-deliberate);
}

.piece-body a:hover {
  color: var(--gold-ink);
  border-bottom-color: var(--gold-soft);
}

/* Lists */
.piece-body ul,
.piece-body ol {
  margin: var(--space-3) 0;
  padding-left: var(--space-5);
}

.piece-body li {
  margin: var(--space-1) 0;
}

.piece-body li code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--parchment-light);
  padding: 0 var(--space-1);
  border-radius: 2px;
  border: 1px solid var(--parchment-dark);
}

/* Inline code */
.piece-body code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--bark);
  background: var(--parchment-light);
  padding: 1px var(--space-1);
  border-radius: 2px;
  border: 1px solid var(--parchment-dark);
}

/* Pre / code blocks — used sparingly */
.piece-body pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--bark);
  background: var(--parchment-light);
  border: 1px solid var(--parchment-dark);
  border-left: 3px solid var(--gold);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0;
  overflow-x: auto;
  border-radius: 2px;
}

.piece-body pre code {
  background: transparent;
  border: none;
  padding: 0;
}

/* Tables — for milestone data, etc. Editorial, not Excel. */
.piece-body table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-5) 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-feature-settings: 'tnum';
}

.piece-body thead th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--bark-quiet);
  font-weight: 500;
  color: var(--bark-soft);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.piece-body tbody td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--parchment-dark);
  color: var(--bark);
}

.piece-body tbody tr:last-child td {
  border-bottom: 1px solid var(--bark-quiet);
}

/* Blockquote — editorial pull, not testimonial */
.piece-body blockquote {
  margin: var(--space-5) 0;
  padding: var(--space-3) 0 var(--space-3) var(--space-5);
  border-left: 2px solid var(--gold);
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: 'opsz' 96;
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--bark-soft);
}

/* HR — section break within the body */
.piece-body hr {
  border: 0;
  height: 1px;
  background: var(--parchment-dark);
  margin: var(--space-10) auto;
  width: 96px;
  opacity: 0.7;
}

/* ─── Figures — embedded SVG visuals ───────────────────────── */

.piece-figure {
  margin: var(--space-8) calc(-1 * var(--space-6));
  background: var(--parchment-light);
  border: 1px solid var(--parchment-dark);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 12px -6px rgba(42, 33, 28, 0.08);
}

.piece-figure svg {
  display: block;
  width: 100%;
  height: auto;
  background: transparent !important;
}

@media (max-width: 800px) {
  .piece-figure {
    margin-left: calc(-1 * var(--space-3));
    margin-right: calc(-1 * var(--space-3));
  }
}

/* ─── References section ───────────────────────────────────── */

.piece-references {
  margin-top: var(--space-16);
  padding-top: var(--space-8);
  border-top: 1px solid var(--parchment-dark);
}

.piece-references h2 {
  /* Override H2 hairline for references — simpler */
  padding-top: 0;
}

.piece-references h2::before { display: none; }

.piece-references ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.piece-references li {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--bark-soft);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--parchment-dark);
}

.piece-references li:last-child {
  border-bottom: none;
}

.piece-references em { font-style: italic; }

.piece-references-note {
  margin-top: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--label-ink);
  line-height: 1.6;
}

/* ─── Footer — piece-level ─────────────────────────────────── */

.piece-footer {
  margin-top: var(--space-16);
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
  border-top: 1px solid var(--parchment-dark);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--label-ink);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  justify-content: space-between;
  align-items: flex-start;
}

.piece-footer-block {
  flex: 1;
  min-width: 200px;
}

.piece-footer-label {
  font-size: var(--text-xxs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bark-whisper);
  margin-bottom: var(--space-2);
  display: block;
}

.piece-footer-block a {
  color: var(--gold-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-glow);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0;
  text-transform: none;
}

.piece-footer-block a:hover {
  color: var(--gold-ink);
}

.piece-footer-block .corrections-text,
.piece-footer-block .next-piece-text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0;
  text-transform: none;
  color: var(--bark);
  margin: 0;
  line-height: 1.5;
}

/* ─── Nav return — between piece end and footer ────────────── */

.piece-nav-return {
  margin-top: var(--space-10);
  text-align: center;
}

.piece-nav-return a {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--label-ink);
  text-decoration: none;
  transition: color 400ms var(--ease-deliberate);
}

.piece-nav-return a:hover { color: var(--gold-ink); }

/* ─── Mobile adjustments ───────────────────────────────────── */

@media (max-width: 640px) {
  .notes-page { padding-top: 72px; }
  .piece-masthead { padding: var(--space-6) 0 var(--space-5); margin-bottom: var(--space-6); }
  .piece-body h2 { margin-top: var(--space-8); }
  .piece-footer { flex-direction: column; gap: var(--space-4); }
}

/* ─── Print styles — methodology pieces should print well ─── */

@media print {
  .site-header,
  .piece-nav-return { display: none; }
  body::before, body::after { display: none; }
  .piece-body { font-size: 11pt; line-height: 1.5; }
  .piece-title { font-size: 24pt; }
  .piece-figure { break-inside: avoid; box-shadow: none; }
}

/* ── Note ↔ demonstration pairing ── injected under the dek on notes that have
   a recorded demonstration (build-pieces.py demo_pair field). Links to the
   /demonstrations/ gallery. */
.demo-pair {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  background: var(--parchment-deep); border-radius: 14px;
  padding: 14px 20px; margin: var(--space-6) 0 var(--space-2);
  font-family: var(--font-body);
}
.demo-pair .k {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--label-ink);
}
.demo-pair a {
  font-size: var(--text-base); font-weight: 500; color: var(--gold-ink); text-decoration: none;
}
.demo-pair a:hover { text-decoration: underline; text-underline-offset: 3px; }