/* Readable project notes: shared site frame, generous images, quiet prose. */
.note-page .site-header { flex-wrap:wrap; }
.note-shell { width:min(920px,calc(100% - 64px)); margin-inline:auto; }
.note-header { margin-top:48px; max-width:740px; }
.note-project { font-size:13px; color:var(--note-accent,#56565d); font-weight:550; }
.note-project-logo { display:block; width:104px; height:80px; object-fit:contain; }
.note-phantom-identity { display:flex; align-items:center; gap:10px; color:#232b36; }
.note-phantom-identity img { width:44px; height:44px; object-fit:contain; flex:none; }
.note-header h1 { margin-top:18px; font-size:clamp(32px,4.4vw,52px); line-height:1.14; font-weight:600; letter-spacing:-.045em; text-wrap:balance; }
.note-meta { margin-top:18px; font-size:12px; color:var(--muted); }
.note-deck { margin-top:22px; font-size:20px; line-height:1.6; letter-spacing:-.01em; color:#4f4f59; }
.note-deck strong { font-weight:550; }
.note-body { padding-bottom:50px; }
.note-prose { max-width:680px; margin:32px 0; }
.note-prose p { font-size:17px; line-height:1.8; color:#494952; text-wrap:pretty; }
.note-prose p + p { margin-top:18px; }
.note-prose h2 { margin:32px 0 16px; font-size:22px; line-height:1.35; letter-spacing:-.025em; font-weight:600; }
.note-role { padding-left:18px; border-left:2px solid var(--note-accent,#56565d); }
.note-prose .note-role { font-size:15px; color:#5f5f68; }
.note-role strong { color:var(--ink); font-weight:600; }
.note-evidence { margin:30px 0 34px; }
.note-evidence img { width:100%; height:auto; border:1px solid #e2e2e7; border-radius:8px; background:#f4f4f6; }
.note-evidence figcaption { margin-top:10px; font-size:12px; line-height:1.65; color:#676771; }
.note-evidence figcaption strong { display:block; color:#383842; font-size:13px; font-weight:600; }
.note-evidence figcaption a { display:inline-flex; align-items:center; min-height:44px; text-decoration:underline; text-underline-offset:3px; }
.note-pair,.note-journey { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 24px; }
.note-pair figure,.note-journey figure { min-width:0; margin:0; }
.note-journey img { aspect-ratio:1120/748; object-fit:contain; }
.note-quotes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:26px; }
.note-quotes blockquote { margin:0; padding:20px 22px; border-left:2px solid var(--note-accent); background:#f4f7f6; }
.note-quotes .quote-model { margin-bottom:10px; font-size:13px; font-weight:600; color:var(--ink); }
.note-quotes blockquote p:last-child { font-size:16px; line-height:1.6; color:#494952; }
.note-source { max-width:680px; padding-top:22px; border-top:1px solid var(--line); font-size:12px; line-height:1.7; color:var(--muted); }
.note-spider-origin { margin-top:32px; padding-block:24px; border-block:1px solid var(--line); }
.note-spider-origin h2 { margin:0 0 24px; font-size:22px; font-weight:600; line-height:1.6; letter-spacing:-.02em; text-wrap:balance; }
.note-spider-origin h2 img { display:inline-block; object-fit:contain; vertical-align:middle; }
.note-spider-origin .note-bug-logo { width:82px; height:63px; margin-right:8px; }
.note-spider-origin .note-spider-logo { width:220px; height:78px; margin-inline:6px; }
.note-origin-name { white-space:nowrap; }
.note-video-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.note-video-grid figure { min-width:0; margin:0; }
.note-video-grid iframe { display:block; width:100%; height:auto; min-height:200px; aspect-ratio:16/9; border:0; border-radius:8px; background:#181b1a; }
.note-video-grid figcaption { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0 8px; margin-top:6px; font-size:12px; line-height:1.5; color:var(--muted); }
.note-video-grid figcaption a { display:inline-flex; align-items:center; gap:5px; min-height:44px; color:var(--note-accent); text-decoration:underline; text-underline-offset:3px; }
.note-actions { display:flex; flex-wrap:wrap; gap:12px 26px; margin:28px 0 12px; }
.note-actions a { display:inline-flex; align-items:center; min-height:44px; font-size:14px; }
.note-actions a:first-child { color:var(--note-accent); font-weight:550; }
.note-next { border-top:1px solid var(--line); padding:26px 0 48px; }
.note-next p { color:var(--muted); font-size:12px; margin-bottom:8px; }
.note-next a { display:inline-flex; min-height:44px; align-items:center; font-size:17px; font-weight:550; letter-spacing:-.02em; }
.note-page .site-footer { border-top:1px solid var(--line); }
.note-page { --note-accent:#625582; }
.note-bug { --note-accent:#31533c; }
.note-ai { --note-accent:#087970; }
@media(max-width:920px) {
  .note-video-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:650px) {
  .note-page .site-header { gap:0 20px; padding-block:12px; }
  .note-page .site-header nav { gap:18px; }
  .note-shell { width:calc(100% - 36px); }
  .note-header { margin-top:28px; }
  .note-header h1 { font-size:34px; }
  .note-deck { font-size:18px; line-height:1.6; }
  .note-prose { margin-block:26px; }
  .note-prose p { font-size:16px; line-height:1.75; }
  .note-pair,.note-journey,.note-quotes { grid-template-columns:minmax(0,1fr); gap:24px; }
  .note-evidence figcaption { font-size:12px; }
  .note-source { font-size:12px; }
  .note-spider-origin h2 { font-size:20px; }
  .note-spider-origin .note-bug-logo { width:70px; height:54px; }
  .note-spider-origin .note-spider-logo { width:180px; height:64px; }
  .note-video-grid { grid-template-columns:minmax(0,1fr); gap:18px; max-width:380px; }
}
@media print {
  .note-shell { width:100%; }
  .note-header { margin-top:20px; }
  .note-header h1 { font-size:32px; }
  .note-actions,.note-next { display:none; }
  .note-evidence { break-inside:avoid; }
  .note-prose { max-width:none; }
}