/* The DNA homepage's materials and shell, with the existing article structure. */
.project-page {
  --fog: #e3e5e8;
  --paper: #eeeee8;
  --ink: #20252d;
  --panel: #252a34;
  --signal: #e3262c;
  --coral: #ff6736;
  --wall: var(--fog);
  --wall-bright: #f5f5f0;
  --tile: var(--panel);
  --tile-soft: #626b75;
  --line: #20252d30;
  --violet: #a32932;
  --vermilion: var(--signal);
  --display: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --brand-display: 'Avenir Next Condensed', 'Arial Narrow', 'PingFang SC', sans-serif;
  --body: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --ui-header-height: 88px;
  --ui-header-decoration: 0px;
  --ui-reading-width: 860px;
  --ui-reading-gutter: 24px;
  --ui-page-gutter: 7vw;
  --ui-title: 44px;
  --ui-heading: 26px;
  --ui-body: 17px;
  --ui-caption: 13px;
  --ui-control: 13px;
  background: var(--fog);
  -webkit-font-smoothing: antialiased;
}
.project-page .site-header {
  display: flex;
  left: 42px;
  right: 42px;
  height: var(--ui-header-height);
  padding: 0;
  gap: 28px;
  border-bottom: 1px solid #293c4238;
  background: #e3e5e8ed;
  backdrop-filter: blur(12px);
}
.project-page .site-header::after { content: none; }
.project-page .brand { flex-shrink: 0; }
.project-page .brand-word { display: flex; font: 900 44px/.8 var(--brand-display); letter-spacing: -3px; }
.project-page .brand-word span { font: inherit; color: inherit; letter-spacing: inherit; }
.project-page .identity { font-size: 12px; letter-spacing: 1px; line-height: 1.7; }
.project-page .identity span { display: block; font-size: 9px; letter-spacing: 0; color: #566167; }
.project-page .site-nav { margin-left: auto; gap: 22px; }
.project-page .site-nav a { font-size: 12px; }
.project-page .site-nav a::after { left: 10px; right: 10px; bottom: 4px; }
.project-page .project-review { padding-top: 144px; padding-bottom: 64px; }
.project-page .review-header { padding: 0 44px 38px; }
.project-page .project-review .review-post-meta { font-size: 12px; line-height: 1.8; border-left: 3px solid var(--signal); padding-left: 12px; }
.project-page .review-header h1 { margin-top: 22px; line-height: 1.3; letter-spacing: -1.6px; }
.project-page .project-review .review-lead { color: #505963; margin-top: 24px; }
.project-page .review-body { position: relative; background: var(--paper); padding: 42px 44px 48px; border: 1px solid var(--line); box-shadow: inset 0 0 0 4px #f5f5f080; }
.project-page .review-body::before { content: ''; position: absolute; top: -1px; left: 43px; width: 44px; height: 3px; background: var(--signal); }
.project-page .review-body > .review-section:first-child { margin-top: 0; }
.project-page .project-review h2 { letter-spacing: -.6px; }
.project-page .project-review h3 { letter-spacing: -.2px; }
.project-page .project-review :is(blockquote,.review-notes) { border-left-color: #a7adb6; }
.project-page .project-review .review-notes { border-left-color: var(--signal); }
.project-page .project-review :is(.review-sequence, .review-flow ol) li::marker { color: var(--tile-soft); font-family: var(--mono); font-size: .8em; }

/* Captures keep their original aspect ratios; only the frame changes. */
.project-page .project-review .artifact-frame { display: block; border: 6px solid var(--panel); box-shadow: 0 0 0 1px #606975, inset 0 0 0 1px #f5f7ff60; background: var(--panel); }
.project-page .project-review .artifact-frame:hover { box-shadow: 0 0 0 1px var(--coral); }
.project-page .project-review .artifact-frame img { display: block; border-radius: 0; }
.project-page .project-review .artifact-actions { justify-content: flex-end; }
.project-page .project-review :is(.artifact-actions,.review-actions,.review-download) a { border: 1px solid var(--line); padding: 8px 14px; gap: 18px; color: var(--ink); background: transparent; text-decoration: none; }
.project-page .project-review .artifact-actions a::after,
.project-page .project-review .review-actions a[href^="http"]::after { content: '↗'; font-family: var(--mono); color: var(--signal); }
.project-page .review-action { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.project-page .review-action-note { color: var(--tile-soft); font-size: var(--ui-caption); line-height: 1.7; }
.project-page .project-review .review-download a::after { content: '↓'; font-family: var(--mono); color: var(--signal); }
.project-page .project-review :is(.artifact-actions,.review-actions,.review-download) a:hover { background: var(--panel); color: var(--paper); border-color: var(--panel); }
.project-page .project-review .artifact-actions a:hover::after,
.project-page .project-review .review-actions a:hover::after { color: var(--coral); }

/* Existing evidence tables and disclosures retain their reading order. */
.project-page .project-review :is(.scenario-group-heading,.case-table thead,.score-table thead) { background: var(--panel); color: var(--paper); }
.project-page .scenario-group-heading { padding: 13px 14px; border: 0; }
.project-page .project-review .scenario-group-heading p { color: #c4c9d2; }
.project-page .project-review :is(.case-table th,.score-table th) { background: var(--panel); color: var(--paper); font-size: 13px; font-weight: 500; }
.project-page .project-review :is(.case-table,.score-table) { border: 1px solid var(--line); }
.project-page .project-review :is(.case-table td,.score-table td) { background: #f5f5f066; }
.project-page .project-review .scenario-branch { padding-inline: 14px; }
.project-page .project-review :is(.scenario-branch,.evidence-details) > summary:hover { color: var(--signal); }
.project-page .project-review details[open] > summary { text-decoration-color: var(--signal); }
.project-page .project-review .answer-review-header { border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.project-page .project-review .answer-review-excerpt blockquote { border-left-color: var(--signal); }

.project-page .image-viewer { position: fixed; inset: 0; box-sizing: border-box; width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; box-shadow: none; background: #20252d; }
.project-page .image-viewer[open] { display: block; }
.project-page .image-viewer::backdrop { background: #20252dec; }
.project-page .viewer-toolbar { position: absolute; z-index: 1; top: max(6px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); padding: 0; border: 0; }
.project-page .viewer-toolbar button[data-close] { background: var(--panel); color: var(--paper); border-color: #ffffff55; }
.project-page .viewer-canvas { position: absolute; inset: calc(56px + env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); overflow: hidden; }
.project-page .viewer-canvas img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
.project-page .viewer-message { position: absolute; bottom: max(16px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 8px 12px; background: var(--panel); color: var(--paper); text-align: center; }
.project-page .viewer-message:empty { display: none; }
.project-page .project-next { max-width: 860px; margin: 0 auto; padding: 24px 0 42px; border-top: 1px solid var(--line); background: transparent; }
.project-page .project-next a { color: var(--ink); font-size: 13px; letter-spacing: 0; }
.project-page .project-next a:hover { color: var(--signal); }
.project-page .site-footer { padding: 24px 7vw; background: var(--paper); border-top: 1px solid var(--line); color: var(--tile-soft); font-size: 10px; }
.project-page .footer-signature { font-size: 9px; }
.project-page .footer-signature:nth-child(2) { display: none; }
.project-page .footer-version { margin-left: auto; font-size: 10px; }

@media (max-width:1100px) and (min-width:901px) {
  .project-page .site-header { left: 28px; right: 28px; gap: 18px; }
  .project-page .identity { font-size: 11px; }
  .project-page .site-nav { gap: 10px; }
}
@media (max-width:900px) {
  .project-page { --ui-header-height: 74px; --ui-title: 34px; --ui-heading: 24px; --ui-body: 16px; --ui-reading-gutter: 24px; --ui-page-gutter: 24px; }
  .project-page .site-header { left: 18px; right: 18px; gap: 12px; }
  .project-page .brand-word { font-size: 34px; }
  .project-page .identity { display: none; }
  .project-page .site-nav { gap: 2px; }
  .project-page .site-nav a { font-size: 11px; min-width: 38px; }
  .project-page .project-review { padding-top: 112px; padding-bottom: 40px; }
  .project-page .review-header { padding: 0 0 30px; }
  .project-page .review-header h1 { font-size: var(--ui-title); letter-spacing: -1px; margin-top: 18px; }
  .project-page .project-review .review-lead { margin-top: 20px; }
  .project-page .project-review .review-post-meta { font-size: 11px; }
  .project-page .review-body { margin-inline: -24px; padding: 32px 24px 40px; border-left: 0; border-right: 0; box-shadow: none; }
  .project-page .review-body::before { left: 24px; width: 32px; }
  .project-page .project-review .artifact-frame { border-width: 4px; }
  .project-page .project-review :is(.case-table,.score-table) { border: 0; }
  .project-page .project-review .case-table td { background: transparent; }
  .project-page .project-next { margin-inline: 24px; padding: 16px 0 28px; }
  .project-page .site-footer { padding: 24px; gap: 10px; }
  .project-page .footer-version { margin: 0; }
}
@media (min-width:701px) and (max-width:900px) {
  .project-page .identity { display: block; font-size: 10px; }
  .project-page .identity span { display: none; }
  .project-page .site-nav { gap: 16px; }
}