/* Incremental additions using the existing page's design tokens. */
section[id], article[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.skip-link { position: fixed; top: 8px; left: 12px; z-index: 10000; padding: 12px 20px; border-radius: 12px; background: var(--bg-elev); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.no-script { position: relative; z-index: 101; padding: 20px; background: var(--bg-elev); }
.archive-note { color: var(--text-muted); font-size: 14px; max-width: 76ch; margin-top: 24px; }
.document-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.filter-button { border: 1px solid var(--border-strong); border-radius: 999px; padding: 11px 17px; font-size: 13px; background: var(--surface); transition: background .25s, color .25s; }
.filter-button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.results-count { font-size: 13px; color: var(--text-muted); margin-top: 18px; }
#csGrid { margin-top: 24px; }
.document-card .cs-visual { aspect-ratio: auto; min-height: 146px; }
.document-card .cs-tag { max-width: calc(100% - 32px); font-size: 10px; }
.document-code { position: absolute; left: 24px; bottom: 23px; font-size: 30px; font-weight: 500; letter-spacing: -.04em; color: var(--accent); z-index: 1; }
.document-format { position: absolute; right: 20px; bottom: 28px; font-size: 11px; color: var(--text-muted); z-index: 1; }
.document-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
.document-status { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); padding-top: 16px; border-top: 1px solid var(--border); margin-bottom: 16px; }
.cs-read { text-align: left; min-height: 44px; }
.document-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.document-action { display: inline-flex; gap: 10px; align-items: center; padding: 12px 18px; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--accent); font-size: 13px; }
.document-action:not(:disabled):hover { background: var(--accent-soft); }
.document-action:disabled { color: var(--text-muted); cursor: default; border-style: dashed; }
.link-review { flex-basis: 100%; font-size: 12px; color: var(--text-muted); }
.source-details { display: grid; grid-template-columns: 110px 1fr; gap: 12px 20px; font-size: 13px; margin: 24px 0; padding-top: 24px; border-top: 1px solid var(--border); }
.source-details dt { color: var(--text-muted); }
.source-details dd { overflow-wrap: anywhere; }
.modal p.source-note { padding: 18px; background: var(--accent-soft); border-radius: var(--radius-sm); font-size: 14px; }
.related-documents { display: grid; gap: 12px; margin-top: 28px; }
.related-document { display: flex; flex-wrap: wrap; gap: 12px; text-align: left; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; }
.related-document:hover { background: var(--accent-soft); }
.related-document span { color: var(--accent); }
.modal-inner { max-width: 800px; }
.modal { margin: 0; width: 100%; height: 100%; max-width: none; max-height: none; border: 0; color: var(--text); }
.modal:not([open]) { display: none; }
.modal::backdrop { background: transparent; }
.modal.open { transition: opacity .4s var(--ease); }
.modal h2 { padding-right: 18px; }
.modal-photo { width: 100%; height: auto; border-radius: var(--radius-sm); margin-top: 24px; }
.gallery-item .gi-label { opacity: 1; transform: none; right: 16px; width: fit-content; }
.gallery-item.has-photo { grid-column: span 2; grid-row: span 2; }
.photo-open { width: 100%; height: 100%; display: block; }
.gallery-item img.gi-bg { width: 100%; height: 100%; object-fit: cover; }
.gallery-item.is-placeholder { cursor: default; }
.placeholder-copy { position: absolute; inset: 0; padding: 20px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; color: white; }
.placeholder-copy strong { font-size: 14px; font-weight: 500; }
.placeholder-copy span { font-size: 11px; opacity: .8; }
.built-card h3 { padding-right: 26px; }
.hero { padding-bottom: 120px; }
@media (max-width: 860px) {
  .nav.menu-open .nav-links { display: flex; position: absolute; top: var(--nav-h); left: 0; right: 0; padding: 20px 24px; gap: 0; flex-direction: column; align-items: stretch; background: var(--bg-elev); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md); }
  .nav.menu-open .nav-links a { display: block; padding: 13px 0; }
  .hscroll-wrap { height: auto; padding: 20px 0 64px; }
  .hscroll-sticky { height: auto; position: relative; overflow: visible; }
  .hscroll-track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 16px; }
  .ops-card { width: auto; aspect-ratio: auto; min-height: 290px; padding: 26px; }
  .eco-wrap { aspect-ratio: auto; padding: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .eco-svg { display: none; }
  .eco-node, .eco-node:hover, .eco-node.center:hover { position: static; transform: none; white-space: normal; text-align: center; display: flex; align-items: center; justify-content: center; }
  .eco-node.center { grid-column: 1 / -1; margin-bottom: 8px; }
}
@media (max-width: 500px) {
  .hscroll-track { grid-template-columns: 1fr; }
  .ops-card { min-height: 250px; }
  .modal { padding: 12px; }
  .modal-inner { padding: 72px 24px 28px; }
  .source-details { grid-template-columns: 1fr; gap: 6px; }
  .source-details dd { margin-bottom: 12px; }
  .challenge-item { grid-template-columns: 30px 1fr; gap: 16px; }
  .hero-meta { gap: 16px; }
  .gallery { grid-auto-rows: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .hero-title .line span, .reveal, .reveal-stagger > *, .tl-step { transform: none; opacity: 1; }
  .hscroll-wrap { height: auto; padding-bottom: 64px; }
  .hscroll-sticky { position: relative; height: auto; overflow: visible; }
  .hscroll-track { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); width: 100%; }
  .ops-card { width: auto; }
}
/* Document cards use an icon and metadata treatment; source files stay local. */
.document-icon{display:block;font-size:34px;line-height:1;color:var(--accent,#c9a66b);margin-bottom:18px}
.document-card .cs-visual{min-height:150px}
.language-toggle{border:1px solid var(--border);background:transparent;color:var(--text-subtle);font:inherit;font-size:11px;letter-spacing:.12em;padding:8px 10px;border-radius:999px;cursor:pointer;transition:color .2s,border-color .2s}
.language-toggle:hover,.language-toggle:focus-visible{color:var(--text);border-color:var(--text-subtle)}
.language-toggle .language-active{color:var(--text);font-weight:700}
.document-local-note{display:block;color:var(--text-subtle);font-size:11px;letter-spacing:.06em;line-height:1.5}