/* ============================================================
   NYAVE — Resources section
   Loaded only on /resources/ pages. Builds on tokens.css; the
   site identity (cream paper, navy ink, serif headlines, red
   accent, header/footer) is inherited from styles.css, not restyled.
   ============================================================ */

.res-body { background: var(--paper); }
.res-main { padding-bottom: var(--s12); }

/* ----- breadcrumbs ----------------------------------------- */
.res-crumbs { padding-top: var(--s7); }
.res-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0;
  font-family: var(--sans); font-size: var(--t-xs); color: var(--ink-3); }
.res-crumbs li + li::before { content: "/"; margin-right: var(--s2); color: var(--ink-4); }
.res-crumbs a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
.res-crumbs a:hover, .res-crumbs a:focus-visible { color: var(--red); text-decoration-color: currentColor; }

/* ----- reading column --------------------------------------- */
.res-article { max-width: 740px; margin: 0 auto; padding-inline: var(--gutter); padding-top: var(--s8); }
.res-hub { max-width: 780px; margin: 0 auto; padding-inline: var(--gutter); padding-top: var(--s6); }
.res-hub-head { max-width: 740px; padding-bottom: var(--s6); margin-bottom: var(--s6); }

/* ----- article head ------------------------------------------ */
.res-head { padding-bottom: var(--s8); border-bottom: 1px solid var(--rule); margin-bottom: var(--s8); }
.res-head .eyebrow { margin-bottom: var(--s5); }
.res-title { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 4.2vw, 44px); line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight); color: var(--ink); margin: 0; overflow-wrap: anywhere; }
.res-subtitle { margin-top: var(--s5); font-family: var(--serif); font-style: italic; font-size: var(--t-md); line-height: var(--lh-mid); color: var(--ink-2); }
.res-byline { margin-top: var(--s6); font-family: var(--sans); font-size: var(--t-xs); line-height: var(--lh-mid); color: var(--ink-3); max-width: 60ch; }
.res-meta { margin-top: var(--s3); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); font-family: var(--sans); font-size: var(--t-xs); color: var(--ink-3); }
.res-meta time { color: var(--ink-2); }
.res-disclaimer-top { margin-top: var(--s5); font-size: var(--t-sm); line-height: var(--lh-mid); color: var(--ink-3); border-left: 2px solid var(--rule-strong); padding-left: var(--s4); }

/* ----- table of contents ------------------------------------ */
.res-toc { margin-bottom: var(--s9); padding: var(--s5) var(--s6); background: var(--paper-2); border: 1px solid var(--rule); }
.res-toc-title { font-family: var(--sans); font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--s3); }
.res-toc ol { margin: 0; padding-left: 1.3em; font-family: var(--sans); font-size: var(--t-sm); line-height: 1.7; color: var(--ink-2); columns: 2; column-gap: var(--s7); }
.res-toc li { break-inside: avoid; }
.res-toc a { color: inherit; text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
.res-toc a:hover, .res-toc a:focus-visible { color: var(--red); text-decoration-color: currentColor; }

/* ----- body typography --------------------------------------- */
.res-body-text, .res-body { font-size: var(--t-base); line-height: var(--lh-body); color: var(--ink-2); }
.res-section { margin-top: var(--s10); }
.res-section:first-child { margin-top: 0; }
.res-section h2 { font-family: var(--serif); font-weight: 400; font-size: var(--t-xl); line-height: var(--lh-snug); letter-spacing: var(--tr-snug); color: var(--ink); margin: 0 0 var(--s5); }
.res-section h3 { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: var(--t-md); line-height: var(--lh-mid); color: var(--ink); margin: var(--s7) 0 var(--s3); }
.res-section p { margin: 0 0 var(--s5); }
.res-section p:last-child { margin-bottom: 0; }
.res-section ul, .res-section ol { margin: 0 0 var(--s5); padding-left: 1.4em; }
.res-section li { margin-bottom: var(--s3); }
.res-section li::marker { color: var(--ink-3); }
.res-section strong { color: var(--ink); font-weight: 600; }
.res-section a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
.res-section a:hover, .res-section a:focus-visible { color: var(--red); text-decoration-color: currentColor; }
.res-section code { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.9em; background: var(--paper-3); padding: 0 0.3em; }
sup.fn { font-family: var(--sans); font-size: 0.68em; line-height: 0; vertical-align: super; margin-left: 1px; }
sup.fn a { text-decoration: none; color: var(--red); padding: 0 1px; }
sup.fn a:hover, sup.fn a:focus-visible { text-decoration: underline; }
.res-note { font-size: var(--t-sm); color: var(--ink-3); }

/* ----- callout ----------------------------------------------- */
.res-callout { margin: var(--s7) 0; padding: var(--s5) var(--s6); background: var(--red-soft); border-left: 2px solid var(--red); }
.res-callout p { margin: 0; font-family: var(--serif); font-style: italic; font-size: var(--t-md); line-height: var(--lh-mid); color: var(--ink); }

/* ----- tables (responsive) ---------------------------------- */
.res-table-wrap { overflow-x: auto; margin: 0 0 var(--s5); -webkit-overflow-scrolling: touch; }
.res-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); line-height: var(--lh-mid); }
.res-table th, .res-table td { text-align: left; vertical-align: top; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rule); }
.res-table thead th { font-family: var(--sans); font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--rule-strong); }
.res-table tbody th { font-weight: 600; color: var(--ink); width: 38%; }

/* ----- FAQ ---------------------------------------------------- */
.res-faq-item { padding: var(--s5) 0; border-top: 1px solid var(--rule); }
.res-faq-item:last-child { border-bottom: 1px solid var(--rule); }
.res-faq-item h3 { margin: 0 0 var(--s3); font-style: normal; font-size: var(--t-md); }
.res-faq-item p { margin: 0; font-size: var(--t-sm); }
.res-faq h3 + p { font-size: var(--t-sm); }

/* ----- visuals ------------------------------------------------ */
.res-visual { margin: var(--s8) 0; padding: 0; }
.res-visual figcaption { margin-top: var(--s4); font-family: var(--sans); font-size: var(--t-xs); line-height: var(--lh-mid); color: var(--ink-3); max-width: 62ch; }

/* flow (Article 1) */
.res-flow-main, .res-flow-branch { display: flex; align-items: stretch; gap: var(--s3); }
.res-flow-node { flex: 1 1 0; min-width: 0; padding: var(--s4); background: var(--paper-2); border: 1px solid var(--rule-strong);
  font-family: var(--serif); font-size: var(--t-sm); line-height: var(--lh-mid); color: var(--ink); }
.res-flow-node small { display: block; margin-top: var(--s1); font-family: var(--sans); font-size: 12px; color: var(--ink-3); }
.res-flow-step { display: block; font-family: var(--sans); font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: var(--tr-label); color: var(--red); margin-bottom: var(--s2); }
.res-flow-node-key { border-color: var(--ink); }
.res-flow-arrow { align-self: center; font-family: var(--sans); color: var(--ink-3); font-size: var(--t-md); flex: 0 0 auto; }
.res-flow-branch { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px dashed var(--rule-strong); position: relative; }
.res-flow-branch-label { position: absolute; top: -0.7em; left: 0; padding-right: var(--s2); background: var(--paper);
  font-family: var(--sans); font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--red); }
.res-flow-node-defect { background: var(--red-soft); border-color: var(--red-line); }
.res-flow-node-defect small { color: var(--ink-2); }
.res-flow-return { color: var(--red); }

.res-flow-callout { margin: var(--s5) 0 0; }

/* groups (Article 2) */
.res-groups-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.res-groups-grid li { padding: var(--s4) var(--s5); border: 1px solid var(--rule-strong); background: var(--paper-2); }
.res-groups-grid strong { display: block; font-family: var(--serif); font-weight: 400; font-size: var(--t-base); color: var(--ink); margin-bottom: var(--s1); }
.res-groups-grid span { font-family: var(--sans); font-size: var(--t-xs); line-height: var(--lh-mid); color: var(--ink-3); }

/* dataset strip (Article 2) */
.res-data-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin: 0; }
.res-data-strip > div { padding: var(--s4) var(--s5); border-top: 2px solid var(--ink); background: var(--paper-2); }
.res-data-strip dt { font-family: var(--sans); font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-3); }
.res-data-strip dd { margin: var(--s2) 0 0; font-family: var(--serif); font-size: var(--t-xl); line-height: var(--lh-tight); color: var(--ink); }
.res-data-strip dd small { display: block; margin-top: var(--s2); font-family: var(--sans); font-size: var(--t-xs); line-height: var(--lh-mid); color: var(--ink-2); }
.res-data-note { margin: var(--s4) 0 0; font-family: var(--sans); font-size: var(--t-xs); line-height: var(--lh-mid); color: var(--ink-2); border-left: 2px solid var(--rule-strong); padding-left: var(--s4); }

/* comparison + matrix (Article 3) */
.res-compare-table tbody th { width: 34%; }
.res-matrix-table td { font-family: var(--sans); font-size: var(--t-xs); color: var(--ink-2); }

/* ----- sources ------------------------------------------------ */
.res-sources-block { margin-top: var(--s10); padding-top: var(--s8); border-top: 1px solid var(--rule-strong); }
.res-sources { margin: 0; padding-left: 1.6em; font-family: var(--sans); font-size: var(--t-xs); line-height: var(--lh-mid); color: var(--ink-2); }
.res-sources li { margin-bottom: var(--s3); padding-left: var(--s1); }
.res-sources li:target { background: var(--red-soft); }
.res-sources a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; overflow-wrap: anywhere; }
.res-sources a:hover, .res-sources a:focus-visible { color: var(--red); text-decoration-color: currentColor; }
.res-disclaimer { margin-top: var(--s7); font-size: var(--t-xs); line-height: var(--lh-mid); color: var(--ink-3); }
.res-disclaimer a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ----- CTA ----------------------------------------------------- */
.res-cta { margin-top: var(--s9); padding: var(--s6); border: 1px solid var(--rule-strong); background: var(--paper-2);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s5); }
.res-cta-text { margin: 0; flex: 1 1 36ch; font-size: var(--t-sm); line-height: var(--lh-mid); color: var(--ink-2); }
.res-cta-btn { flex: 0 0 auto; }

/* ----- previous / next + series ----------------------------- */
.res-pn { margin-top: var(--s9); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); border-top: 1px solid var(--rule); padding-top: var(--s6); }
.res-pn-link { display: block; text-decoration: none; }
.res-pn-link:last-child { text-align: right; }
.res-pn-label { display: block; font-family: var(--sans); font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s2); }
.res-pn-title { font-family: var(--serif); font-size: var(--t-base); line-height: var(--lh-mid); color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
.res-pn-link:hover .res-pn-title, .res-pn-link:focus-visible .res-pn-title { color: var(--red); text-decoration-color: currentColor; }
.res-series { margin-top: var(--s9); }
.res-series h2 { font-family: var(--serif); font-weight: 400; font-size: var(--t-lg); color: var(--ink); margin: 0 0 var(--s4); }
.res-series-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.res-series-list li { display: flex; gap: var(--s5); align-items: baseline; padding: var(--s4) 0; border-bottom: 1px solid var(--rule); font-size: var(--t-sm); }
.res-series-num { flex: 0 0 auto; font-family: var(--sans); font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-3); width: 6.5em; }
.res-series-list a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
.res-series-list a:hover, .res-series-list a:focus-visible { color: var(--red); text-decoration-color: currentColor; }
.res-series-list li.current .res-series-num { color: var(--red); }
.res-series-current { color: var(--ink-2); }

/* ----- hub ----------------------------------------------------- */
.res-hub-head .res-title { font-size: clamp(28px, 3.8vw, 40px); }
.res-hub-lede { margin-top: var(--s5); font-size: var(--t-base); line-height: var(--lh-body); color: var(--ink-2); }
.res-cards { list-style: none; margin: 0; padding: 0; }
.res-card { padding: var(--s6) 0; border-bottom: 1px solid var(--rule); }
.res-card .eyebrow { margin-bottom: var(--s3); }
.res-card-title { font-family: var(--serif); font-weight: 400; font-size: var(--t-lg); line-height: var(--lh-snug); color: var(--ink); margin: 0 0 var(--s3); }
.res-card-title a { color: inherit; text-decoration: none; }
.res-card-title a:hover, .res-card-title a:focus-visible { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.res-card-desc { margin: 0 0 var(--s4); font-size: var(--t-sm); line-height: var(--lh-mid); color: var(--ink-2); max-width: 60ch; }
.res-card-link { font-family: var(--sans); font-size: var(--t-sm); color: var(--red); text-decoration: underline; text-decoration-color: var(--red-line); text-underline-offset: 3px; }
.res-card-link:hover, .res-card-link:focus-visible { color: var(--red-deep); text-decoration-color: currentColor; }
.res-hub-note { margin-top: var(--s7); font-family: var(--sans); font-size: var(--t-xs); color: var(--ink-3); }


/* ----- responsive ---------------------------------------------- */
@media (max-width: 680px) {
  .res-toc ol { columns: 1; }
  .res-hub-head { max-width: none; }
  .res-flow-main, .res-flow-branch { flex-direction: column; }
  .res-flow-arrow { transform: rotate(90deg); align-self: flex-start; margin-left: var(--s5); }
  .res-flow-return { transform: none; }
  .res-groups-grid, .res-data-strip { grid-template-columns: 1fr; }
  .res-pn { grid-template-columns: 1fr; }
  .res-pn-link:last-child { text-align: left; }
  .res-table tbody th { width: auto; }
  .res-series-num { width: 5.5em; }
}
@media (prefers-reduced-motion: reduce) {
  .res-main * { transition: none; animation: none; }
}