/* ==========================================================================
   ecosphere marketing site: styles for industries, data & methods, about,
   contact and legal pages. Loaded after site.css on those pages only.

   CLASSES
     .jump-nav              sticky in-page link row under the header (ul > li > a)
     .sector                industry block: .sector-copy + figure (collapses at 960px)
       .sector-index        mono "01 / 08" kicker
       .question-list       questions ecosphere answers (li with a "Q" marker)
       .product-links       wrapping row of product links (a.product-link)
     .doc-layout            sticky side contents (.doc-toc) + .prose column
     .pipeline > li         four-stage horizontal flow (.pipeline-stage, h3, p)
     .label-list > li       data labels: .chip + description
     .principles > .principle  numbered principle rows with a small figure (.principle-figure)
     .contact-layout        form column + aside (.contact-aside)
     .field-error           inline validation message under a field
     .form-status           note shown after sending (or the email fallback)
     .form-trap             hidden honeypot field; bots fill it, people never see it
     .legal-layout          narrow column for legal prose
   ========================================================================== */

/* ---------- Jump nav ---------- */
.jump-nav {
  position: sticky; top: var(--header-height); z-index: calc(var(--z-sticky) - 1);
  background: color-mix(in oklab, var(--surface) 94%, transparent); backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--border);
}
.jump-nav ul { display: flex; gap: .4rem; overflow-x: auto; padding-block: .7rem; scrollbar-width: thin; }
.jump-nav a {
  display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; text-decoration: none;
  font-size: .8125rem; font-weight: 500; color: var(--ink-2);
  padding: .35rem .8rem; border: 1px solid var(--border); border-radius: var(--r-full); background: var(--bg);
}
.jump-nav a b { font-family: var(--font-data); font-weight: 500; font-size: .7rem; color: var(--accent-text); }
.jump-nav a:hover { border-color: var(--accent); color: var(--ink); }
@media (max-width: 1020px) { .jump-nav { position: static; } }

/* Anchored blocks clear the sticky header and jump nav. */
[data-anchor-offset] { scroll-margin-top: 130px; }
@media (max-width: 1020px) { [data-anchor-offset] { scroll-margin-top: 84px; } }

/* ---------- Sector ---------- */
.sector { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: start; }
@media (max-width: 960px) { .sector { grid-template-columns: minmax(0, 1fr); } }
.sector-index { font-family: var(--font-data); font-size: .75rem; color: var(--muted); letter-spacing: .06em; margin-left: .75rem; }
.sector-copy .lede { margin-top: 1rem; }
.sector-subhead { font-size: .75rem; font-family: var(--font-data); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 2rem; }

.question-list { margin-top: .9rem; display: grid; gap: .65rem; }
.question-list li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: .5rem; color: var(--ink); font-size: .975rem; line-height: 1.5; }
.question-list li::before {
  content: "Q"; display: grid; place-items: center; width: 1.35rem; height: 1.35rem; margin-top: .1rem;
  font-family: var(--font-data); font-size: .68rem; font-weight: 500; color: var(--accent-text);
  border: 1px solid color-mix(in oklab, var(--accent) 45%, var(--border)); border-radius: var(--r-sm);
}

.product-links { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; }
.product-link {
  display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; font-size: .85rem; font-weight: 600; color: var(--ink);
  padding: .4rem .8rem; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface);
}
.section-surface .product-link { background: var(--bg); }
.product-link::after { content: "→"; color: var(--accent-text); font-weight: 500; }
.product-link:hover { border-color: var(--accent); background: var(--accent-subtle); }

.sector .figure { margin-top: .5rem; }
.figure-note { padding: 0 1.1rem .2rem; font-size: var(--text-xs); color: var(--muted); }

/* Mini two-dimension plot labels */
.figure-body svg text.figure-dot-label { fill: var(--ink-2); }
.figure-dot { fill: var(--accent-strong); }
.figure-dot.is-light { fill: var(--surface); stroke: var(--accent-strong); stroke-width: 1.5; }
.figure-bar.is-negative { fill: color-mix(in oklab, var(--sev-atrisk) 70%, var(--surface)); }
.figure-water { fill: color-mix(in oklab, var(--accent) 22%, transparent); stroke: var(--accent); stroke-width: 1; }
.figure-ground { fill: var(--surface-2); stroke: var(--ink-2); stroke-width: 1.2; }

/* ---------- Data & methods: document layout ---------- */
.doc-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 2rem 4rem; align-items: start; }
@media (max-width: 960px) { .doc-layout { grid-template-columns: minmax(0, 1fr); } }
.doc-toc { position: sticky; top: calc(var(--header-height) + 1.5rem); font-size: .875rem; }
@media (max-width: 960px) { .doc-toc { position: static; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1rem 1.1rem; background: var(--surface); } }
.doc-toc h2 { font-size: .75rem; font-family: var(--font-data); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .75rem; }
.doc-toc ol { display: grid; gap: .1rem; counter-reset: toc; }
.doc-toc li { counter-increment: toc; }
.doc-toc a { display: flex; gap: .6rem; padding: .3rem 0; color: var(--ink-2); text-decoration: none; }
.doc-toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-data); font-size: .72rem; color: var(--muted); padding-top: .15rem; }
.doc-toc a:hover { color: var(--ink); text-decoration: underline; }

.doc-section + .doc-section { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--border); }
.doc-section .prose { margin-top: 1.25rem; }
.doc-section > .figure, .doc-section > .table-scroll, .doc-section > .pipeline, .doc-section > .label-list, .doc-section > .grid { margin-top: 2rem; }
.prose dl { display: grid; gap: .9rem; }
.prose dt { color: var(--ink); font-weight: 600; }
.prose dd { margin-top: .2rem; }

.source-table td:first-child { color: var(--ink); font-weight: 600; white-space: nowrap; }
.source-table td { font-size: .875rem; color: var(--ink-2); }
.source-table .chip { margin: .1rem .2rem .1rem 0; }
@media (max-width: 620px) { .source-table td:first-child { white-space: normal; } }

/* ---------- Pipeline ---------- */
.pipeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.pipeline li { padding: 1.25rem 1.2rem 1.3rem; position: relative; }
.pipeline li + li { border-left: 1px solid var(--border); }
.pipeline-stage { font-family: var(--font-data); font-size: .72rem; color: var(--accent-text); letter-spacing: .05em; }
.pipeline h3 { font-size: 1rem; font-weight: 600; color: var(--ink); margin-top: .45rem; }
.pipeline p { font-size: .85rem; color: var(--ink-2); margin-top: .35rem; line-height: 1.5; }
@media (max-width: 860px) {
  .pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pipeline li:nth-child(3) { border-left: 0; }
  .pipeline li:nth-child(n+3) { border-top: 1px solid var(--border); }
}
@media (max-width: 520px) {
  .pipeline { grid-template-columns: minmax(0, 1fr); }
  .pipeline li + li { border-left: 0; border-top: 1px solid var(--border); }
}

/* ---------- Label list ---------- */
.label-list { display: grid; gap: 0; border-top: 1px solid var(--border); }
.label-list li { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: .5rem 1.5rem; padding: .9rem 0; border-bottom: 1px solid var(--border); font-size: .9rem; color: var(--ink-2); align-items: baseline; }
.label-list li > :first-child { justify-self: start; }
@media (max-width: 560px) { .label-list li { grid-template-columns: minmax(0, 1fr); } }

/* ---------- About: principles ---------- */
.principles { display: grid; gap: 0; border-top: 1px solid var(--ink); }
.principle { display: grid; grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 3rem; padding-block: 2.5rem; border-bottom: 1px solid var(--border); align-items: start; }
.principle-number { font-family: var(--font-display); font-weight: 400; font-size: 3rem; line-height: 1; letter-spacing: -0.03em; color: var(--ink); font-variation-settings: "opsz" 144; }
.principle h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, 2.2vw, 1.75rem); line-height: 1.18; letter-spacing: -0.012em; }
.principle p { color: var(--ink-2); margin-top: .8rem; max-width: 50ch; }
.principle-figure { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.1rem 1.2rem; box-shadow: var(--shadow-1); }
.section-surface .principle-figure { background: var(--bg); }
.principle-figure svg { width: 100%; height: auto; }
.principle-figure svg text { font-family: var(--font-data); font-size: 9px; fill: var(--muted); }
.principle-figure svg text.figure-value-label { fill: var(--ink); }
.principle-figure-row { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.principle-figure-caption { font-size: var(--text-xs); color: var(--muted); margin-top: .75rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; }
.provenance-sample { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; padding-bottom: .9rem; margin-bottom: .9rem; border-bottom: 1px solid var(--border); }
.provenance-sample .figure-value { font-size: 1.7rem; }
@media (max-width: 960px) {
  .principle { grid-template-columns: 4rem minmax(0, 1fr); }
  .principle-figure { grid-column: 2; }
}
@media (max-width: 600px) {
  .principle { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .principle-figure { grid-column: auto; }
  .principle-number { font-size: 2.25rem; }
}

/* ---------- Contact ---------- */
.contact-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2.5rem 4rem; align-items: start; }
@media (max-width: 960px) { .contact-layout { grid-template-columns: minmax(0, 1fr); } }
.contact-form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: clamp(1.25rem, 3vw, 2rem); }
.contact-form .h3 { margin-bottom: .4rem; }
.contact-form > p { color: var(--ink-2); font-size: .9375rem; margin-bottom: 1.5rem; }
.field .required { color: var(--muted); font-weight: 400; font-size: .8rem; }
.field [aria-invalid="true"] { border-color: var(--sev-stressed); box-shadow: inset 3px 0 0 var(--sev-stressed); }
.field-error { font-size: .8rem; color: #B42525; font-weight: 500; display: flex; gap: .35rem; align-items: center; }
.field-error::before { content: "!"; display: inline-grid; place-items: center; width: 1rem; height: 1rem; border-radius: 50%; background: #B42525; color: #fff; font-size: .65rem; font-weight: 700; flex: none; }
.field-error[hidden] { display: none; }
.form-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 1.5rem; }
.form-actions .field-hint { max-width: 40ch; }
.form-status { margin-top: 1.25rem; border-left-color: var(--accent); }
.form-status[hidden] { display: none; }
.form-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status .mono { color: var(--ink); overflow-wrap: anywhere; }
.form-status a { color: var(--accent-text); }

.contact-aside { display: grid; gap: 1.5rem; }
.contact-aside h2 { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.01em; margin-top: .8rem; }
.expect-list { display: grid; gap: 0; margin-top: 1rem; border-top: 1px solid var(--border); }
.expect-list li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .75rem; padding: 1rem 0; border-bottom: 1px solid var(--border); font-size: .9rem; color: var(--ink-2); line-height: 1.5; }
.expect-list strong { display: block; color: var(--ink); font-weight: 600; }
.expect-list .step-number { width: 1.9rem; height: 1.9rem; font-size: .75rem; }
.aside-card { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.1rem 1.2rem; background: var(--surface); font-size: .9rem; color: var(--ink-2); }
.aside-card h3 { font-size: .95rem; font-weight: 600; color: var(--ink); margin-bottom: .35rem; }
.aside-card a { color: var(--accent-text); font-weight: 600; }
.aside-card .mono { overflow-wrap: anywhere; }

/* ---------- Legal ---------- */
.legal-layout .notice { margin-bottom: 2rem; }
.legal-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
/* Figures inside the methods column stay at console-fragment size so SVG text does not balloon. */
.doc-section > .figure { max-width: 680px; }
/* On narrow screens the sources table becomes stacked rows so the coverage chips are not clipped. */
@media (max-width: 620px) {
  .source-table thead { display: none; }
  .source-table tr { display: block; padding: .8rem 0; border-bottom: 1px solid var(--border); }
  .source-table td { display: block; border: 0; padding: .15rem 0; }
  .source-table td:last-child { padding-top: .4rem; }
}