/* The archive and scene controls share the study's aged paper and ink palette. */
:root {
  --paper: #e8d4ad;
  --paper-light: #f4e6c9;
  --ink: #35251c;
  --ink-muted: #70573e;
  --brass: #997342;
  --seal: #753c32;
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.66' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%2374542f' opacity='.09' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
  --paper-wash: radial-gradient(ellipse at 8% 0%, #a36f2830, transparent 46%), radial-gradient(ellipse at 95% 95%, #a36f2828, transparent 45%), linear-gradient(100deg, #d6b98b50, #fff5de42 40%, #d6b98b35);
}

dialog {
  color-scheme: light;
  color: var(--ink);
  background-color: var(--paper);
  background-image: var(--paper-grain), var(--paper-wash);
  border: 1px solid #977647;
  border-radius: 3px;
  box-shadow: inset 0 0 0 5px #dfc598, inset 0 0 0 6px #99734266, inset 0 0 44px #976d2a24, 0 24px 90px #30201770;
  scrollbar-color: #a18155 #e8d4ad;
}
dialog::backdrop { background: #3e2e2059; backdrop-filter: blur(4px); }
dialog .eyebrow { color: #896136; }
dialog h2 { color: var(--ink); letter-spacing: 2px; }
dialog .close { color: var(--ink-muted); border-radius: 50%; }
dialog .close:hover { color: var(--seal); background: #a37a3920; }
dialog .fine-print, #detail-summary, #detail-private { color: var(--ink-muted); }
dialog .fine-print { border-top: 1px solid #96714245; padding-top: 16px; }
dialog button:focus-visible, dialog a:focus-visible, dialog input:focus-visible { outline-color: var(--seal); }

#catalog { padding: 38px; }
.catalog-head { padding-bottom: 20px; border-bottom: 3px double #99734280; }
.catalog-head h2 { font-size: 36px; margin-bottom: 12px; }
.catalog-head p:not(.eyebrow) { color: var(--ink-muted); }
.catalog-head::after {
  content: 'C'; position: absolute; right: 42px; top: 20px;
  display: grid; place-items: center; width: 62px; height: 62px;
  border: 3px double #8d4e4060; border-radius: 50%;
  font: italic 34px Georgia, serif; color: #8d4e4080; transform: rotate(-12deg); pointer-events: none;
}
.search-label {
  color: var(--ink-muted); background: #fff7df70;
  border: 1px solid #a2835580; border-radius: 2px;
  box-shadow: inset 0 2px 5px #8461360d;
}
.search-label:focus-within { border-color: var(--seal); outline: 1px solid #753c3220; }
.search-label input { color: var(--ink); }
.search-label input::placeholder { color: #806747; opacity: 1; }
.project-card {
  position: relative; min-width: 0; padding: 22px;
  color: var(--ink); background: #faf0d74a;
  border: 1px solid #9a76454d; border-radius: 2px;
  box-shadow: inset 3px 0 #b5925d38;
  transition: background .2s, border-color .2s;
}
.project-card:hover { background: #fff6e0bd; border-color: #997342; }
.project-card b { font-family: "Songti SC", "STSong", Georgia, serif; font-size: 17px; font-weight: 600; line-height: 1.5; }
.project-card p { color: #654f39; font-size: 12px; line-height: 1.85; }
.project-card small { color: #824b36; font-size: 10px; letter-spacing: .5px; }
.empty-results { color: var(--ink-muted); }

.detail-shell { padding: 38px 30px 26px; }
.detail-shell > .eyebrow { border-bottom: 3px double #99734270; padding-bottom: 14px; margin-bottom: 20px; }
.demo-heading { color: #895e32; }
.case-screen {
  background: #fbf0d8b8; border-color: #a383535e; border-radius: 2px;
  box-shadow: 0 2px 4px #7958270c;
}
.case-screen b { color: var(--ink); }
.case-screen p, .case-source { color: #70543a; }
.case-link { color: var(--seal); text-decoration: underline; text-underline-offset: 3px; }
.case-picture { border: 4px solid #fff4dd; box-shadow: 0 1px 5px #61432030; }
.demo-tabs button { background: #f0dfbd; border-color: #a58b60; color: #644c34; }
.demo-tabs button[aria-pressed=true] { background: var(--seal); border-color: var(--seal); color: #fff0d0; }
.demo-action, dialog .primary {
  background: #ead6b2; color: #503621; border: 1px solid #a78350; border-radius: 2px;
  box-shadow: inset 0 0 0 2px #f7e7c94d;
}
.demo-action:hover { background: #f5e3bf; }
dialog .primary { background: var(--seal); color: #fff0d0; border-color: #68352c; }
.demo-result { color: #714b2a; }
.bird-stage { background: linear-gradient(#d8c7a3, #eee1bc); border-color: #9e8055; }
.bird-stage .ground { background: #a19266; }

/* Paper labels remain compact, so the original 3D object stays unobstructed. */
.explosion-title span, .explosion-title p, .explosion-part-label,
.hotspot, nav button, .scene-controls button, .explosion-actions button, #move-pad button, #nearby-preview {
  color: var(--ink); background-color: var(--paper);
  background-image: var(--paper-grain), var(--paper-wash);
  border: 1px solid #a18151; text-shadow: none;
  box-shadow: inset 0 0 0 2px #f5e5c34d, 0 3px 12px #2e211d24;
}
.explosion-title span { font-family: "Songti SC", "STSong", Georgia, serif; padding: 11px 22px; border-radius: 2px; }
.explosion-title p { color: #725439; border-radius: 2px; font-size: 11px; }
.explosion-part-label { border-radius: 2px; }
.explosion-actions button { border-radius: 2px; }
.hotspot { background-color: #e8d4ad; }
.hotspot:hover { background-color: #f5e6c6; color: #5e352a; }
.hotspot .dot { border-color: #987142; color: #774c2e; }
nav button span { color: #80532e; }
#play-cases, #focus-preview, #explosion-browse, #explosion-replay {
  color: #fff0d0; background: var(--seal); border-color: #633128;
  box-shadow: inset 0 0 0 2px #d8a77430, 0 3px 12px #2e211d24;
}
#play-explosion { color: #503621; background-color: #e8d4ad; border-color: #a18151; }
#nearby-preview { color: var(--ink); }
.explosion-actions button:hover { filter: brightness(1.05); }

@media(max-width:760px) {
  #catalog { padding: 28px 22px; }
  .catalog-head { padding-bottom: 12px; }
  .catalog-head h2 { font-size: 29px; }
  .catalog-head::after { width: 40px; height: 40px; right: 14px; top: 27px; font-size: 24px; }
  .catalog-head .eyebrow { font-size: 8px; letter-spacing: 1.5px; }
  .catalog-head p:not(.eyebrow) { max-width: 85%; line-height: 1.7; }
  .project-card { padding: 18px; }
  .project-card b { font-size: 16px; }
  .detail-shell { padding: 32px 23px 22px; }
  .explosion-title span { padding: 9px 17px; }
}