/* Dark terrain atlas: warm type, fine rules, and quiet contour drawings. */
:root {
  color-scheme: dark;
  --paper: #111613;
  --ink: #e8e7d9;
  --muted: #a5b1a7;
  --heading: #cbd2c9;
  --line: #34423a;
  --blue: #a2cbb6;
  --red: #d9b58a;
  --panel: #18211b;
}

/* Keep the demos on their established dark palette. */
.planet-explorer, .wordstream-exhibit {
  color-scheme: dark;
  --paper: #111613;
  --ink: #e8e7d9;
  --muted: #a5b1a7;
  --line: #34423a;
  --blue: #a2cbb6;
  --red: #d9b58a;
  --panel: #18211b;
  color: var(--ink);
}

/* Soft frames and proportional UI type keep the demos from feeling boxed in. */
.planet-explorer, .wordstream-exhibit {
  border-color: #34423a99;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 32px #0002;
}
.exhibit-heading { font-size: .76rem; text-transform: none; letter-spacing: .015em; border-bottom-color: #a5b1a714; }
.planet-panel, .wordstream-caption { border-top-color: #a5b1a714; background: #111a14; }
.explorer-controls button, .planet-actions button, .planet-explorer .button,
.wordstream-exhibit .button, .wordstream-actions button { border-radius: 6px; }
.explorer-controls button, .planet-actions button, .wordstream-actions button { font-size: .76rem; }
.planet-actions button { border-color: #34423a99; }
#planet-caption, #planet-help, #planet-details, .planet-keyboard-help,
.planet-launch-copy p, .wordstream-caption { font-size: .74rem; }
.planet-settings summary { font-size: .78rem; }
.planet-explorer:fullscreen, .wordstream-exhibit:fullscreen { border-radius: 0; border: 0; }
.rpg-screen video, .demo-preview img { border-radius: 10px; }

body { isolation: isolate; }
body > * { position: relative; z-index: 1; }
body::before {
  inset: 0;
  width: auto;
  z-index: 0;
  background: url("assets/atlas-contours.svg") left top / max(100vw, 1200px) auto repeat-y;
  opacity: .28;
  mask-image: linear-gradient(to right, #000, transparent 11%, transparent 89%, #000);
}
.brand-copy small { letter-spacing: .06em; }
.nav-links a { color: var(--ink); }
.nav-links a[aria-current] { text-decoration-thickness: 2px; }
.hero-copy h1 { font-size: clamp(1.8rem, 2.7vw, 2.4rem); }
.hero-copy h1 em { font-style: normal; }
h1, h2, h3, h4 { color: var(--heading); }
h3 { font-size: clamp(1.2rem, 1.7vw, 1.5rem); }
.teaching-courses h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
.section-band:not(.hero-section)::before {
  display: none;
}
.unity-section::before { transform: rotate(170deg); }
.resume-section::before { background-position: 80% 70%; }
.about-contact-section::before { display: none; }
.section-heading .eyebrow { margin-bottom: .8rem; }
.section-heading h2 { font-size: clamp(1.5rem, 2.3vw, 1.9rem); }

/* Numbered project plates. Images and real project descriptions carry the page. */
.project-grid { gap: 3rem; }
.project-card { position: relative; }
.project-card + .project-card { padding-top: 3rem; }
.plate-heading { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 1.25rem; }
.plate-number { flex: none; color: var(--red); font: 400 2.5rem/1 var(--serif); letter-spacing: -.06em; }
.plate-heading .tag-row { margin-bottom: .45rem; }
.plate-heading h3 { margin: 0; font-size: clamp(1.5rem, 2.5vw, 2rem); }
.project-card::after {
  display: none;
}
#projects .photo-frame, .demo-preview.photo-frame, .portrait-photo {
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}
.planet-plates { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1.25rem; }
.planet-plates .photo-frame img { aspect-ratio: 1.65; height: auto; }
.planet-plates .photo-frame + .photo-frame img { aspect-ratio: auto; height: auto; width: 100%; flex: 1; min-height: 0; }
.planet-plates figure { display: flex; flex-direction: column; }
.planet-plates figcaption { padding: .7rem 0 0; font: .73rem/1.6 system-ui, sans-serif; }
.planet-plates figcaption span { display: block; color: var(--red); font: .65rem/1.7 system-ui, sans-serif; }
.planet-project > .project-content { column-gap: 3rem; align-items: start; }
.planet-project .engineering-note { grid-row: 1 / 4; }
.planet-project .project-content > p { margin-bottom: .5rem; }
.engineering-note { border-color: var(--line); }
.data-project { gap: 2rem 3rem; }
.data-exhibit { background: var(--panel); border-color: var(--line); padding: 1.75rem 2rem; }
.data-exhibit .eyebrow { color: var(--muted); }
.data-number { font-size: clamp(2.6rem, 4vw, 3.4rem); }
.data-number span { color: var(--muted); }
.pipeline { margin-bottom: 0; }
.rpg-intro { grid-template-columns: 1.2fr 1fr; gap: 2rem; }
.rpg-intro .plate-heading { grid-column: auto; }
.rpg-intro .project-content { padding-left: 1.25rem; border-left: 1px solid var(--line); }
.rpg-showcase { gap: 2.5rem; }
.rpg-visual-label { border-bottom: 1px solid var(--line); padding-bottom: .5rem; }
.rpg-capture figcaption { padding-top: .5rem; }
.rpg-capture-ui img { object-fit: contain; background: #17181b; }
.rpg-note h4 { font-weight: 600; }
.rpg-followup { border-top-style: solid; }
.inline-list { gap: .35rem .75rem; }
.inline-list li { background: transparent; padding: 0; }
.inline-list li + li { border-left: 1px solid var(--line); padding-left: .75rem; }
.demo-shelf { gap: 2rem; }
.demo-preview { margin-bottom: 1rem; }
.demo-card { padding-top: 1rem; border-top: 1px solid var(--line); }
.wordstream-notes { padding-top: 1.5rem; }
.timeline-list li { padding-left: 1.25rem; }
.timeline-date { font-size: .7rem; }
.skills-card { border-top: 1px solid var(--line); padding-top: 1.25rem; }

/* Projects start as compact, native disclosure rows. */
.section-band:has(> .section-dropdown) { padding-block: 1.25rem; }
.section-dropdown > summary { cursor: pointer; padding-block: .6rem; min-height: 44px; color: var(--heading); }
.section-dropdown > summary::marker { color: var(--blue); font-size: .85em; }
.section-dropdown > summary h2 { display: inline; margin: 0; font-size: clamp(1.3rem, 2vw, 1.6rem); }
.section-number { margin-right: .65rem; color: var(--red); font: .75rem/1.6 system-ui, sans-serif; vertical-align: middle; }
.section-dropdown > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 4px; }
.section-dropdown-content { margin-block: 1.5rem 2.5rem; }
.project-grid:has(> .game-project) { gap: .5rem; }
.game-project { min-width: 0; scroll-margin-top: 6rem; }
.game-project > summary { cursor: pointer; padding: .6rem 0; min-height: 44px; color: var(--heading); }
.game-project > summary::marker { color: var(--blue); font-size: .85em; }
.game-project > summary h3 { display: inline; margin: 0; color: inherit; font: 600 1rem/1.6 system-ui, sans-serif; }
.game-project > summary:hover { color: var(--blue); }
.game-project > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 4px; }
.game-project > article { margin: .75rem 0 2rem; }
.game-project .plate-heading { gap: 0; }
.game-project > .demo-card { border-top: 0; padding-top: 0; }
.demo-shelf:has(> .game-project) { grid-template-columns: minmax(0, 1fr); gap: 0; }
.game-project > .demo-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; }
@media (max-width: 600px) {
  .game-project > .demo-card { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}

/* Lesson pages sit upright beside their descriptions, like an open reference. */
.course-grid { gap: 1.5rem; }
.course-card { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr); border: 0; border-block: 1px solid var(--line); background: transparent; padding: 1.25rem 0; align-items: start; }
.course-document { display: block; min-width: 0; padding: .85rem; background: #1c2b22; text-decoration: none; }
.scratch-document { background: #2b281f; }
.course-document img { width: 100%; height: auto; border: 1px solid var(--line); box-shadow: 0 2px 4px #0002; }
.course-document span { display: block; margin-top: .7rem; color: var(--muted); font: .62rem/1.6 system-ui, sans-serif; }
.course-document:hover img { border-color: var(--red); }
.course-copy { min-width: 0; padding: .2rem 0 0 1.1rem; }
.course-copy h4 { font-size: 1.2rem; }
.course-copy > p:not(.tag-row) { font-size: .84rem; }
.course-copy > p.course-meta { font-size: .69rem; }
.course-copy .tag-row { font-size: .62rem; gap: .2rem .65rem; }
.course-actions { gap: .25rem .85rem; }
.course-actions .button { font-size: .8rem; padding-inline: .85rem; }
.lesson-dialog { background: var(--paper); border-color: var(--line); box-shadow: 0 24px 80px #0006; }
.lesson-dialog::backdrop { background: #060b09d9; }
.lesson-page-scroll { background: #0c120f; padding-block: 1.5rem; }
.lesson-page-scroll img { border: 1px solid var(--line); }
.lesson-dialog-header p, #lesson-page-label { color: var(--muted); }
.lesson-dialog button[aria-disabled="true"] { opacity: .55; }

@media (max-width: 1100px) {
  .course-grid { grid-template-columns: 1fr; }
  .course-card { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1.5rem; }
  .course-copy { padding: .3rem 0; }
  .course-copy h4 { font-size: 1.4rem; }
  .course-copy > p:not(.tag-row) { font-size: .9rem; }
  .course-copy > p.course-meta { font-size: .7rem; }
}
@media (max-width: 600px) {
  .section-band:not(.hero-section)::before, .project-card::after { display: none; }
  .rpg-intro { grid-template-columns: 1fr; gap: 1rem; }
  .rpg-intro .project-content { border: 0; padding: 0; }
  .rpg-showcase { gap: 1.5rem; }
}
@media (max-width: 600px) {
  .planet-explorer, .wordstream-exhibit { border-radius: 10px; }
  .planet-explorer:fullscreen, .wordstream-exhibit:fullscreen { border-radius: 0; }
  .explorer-controls button { font-size: .7rem; }
  body::before { display: none; }
  .plate-heading { gap: .85rem; }
  .plate-number { font-size: 2rem; }
  .plate-heading h3 { font-size: 1.4rem; }
  .plate-heading .tag-row { font-size: .61rem; }
  .planet-plates { grid-template-columns: 1fr; gap: 1.25rem; }
  .planet-plates .photo-frame img, .planet-plates .photo-frame + .photo-frame img { aspect-ratio: 16 / 9; flex: none; }

  .project-card + .project-card { padding-top: 2rem; }
  .project-grid { gap: 2rem; }
  .data-project { gap: 1.5rem; }
  .data-exhibit { padding: 1.25rem; }
  .course-card { grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); gap: 1rem; }
  .course-document { padding: .45rem; }
  .course-document span { font-size: .56rem; }
  .course-copy h4 { font-size: 1.1rem; }
  .course-copy > p:not(.tag-row) { font-size: .8rem; }
  .course-copy > p.course-meta { font-size: .65rem; }
  .course-copy .tag-row { font-size: .6rem; }
  .course-copy .button { font-size: .75rem; padding-inline: .6rem; }
  .lesson-page-scroll { padding: .6rem; }
  .demo-card + .demo-card { padding-top: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .project-card::after { transition: none; }
}
@media print {
  :root { --heading: #303a34; }
  :root { color-scheme: light; --paper: white; --ink: #202c30; --muted: #414943; --line: #9d9e93; --panel: #eee; --blue: #285e4a; --red: #764c26; }
  body::before, .section-band::before, .project-card::after { display: none !important; }
  .course-document { max-width: 180px; background: #eee; }
  .course-card { break-inside: avoid; }
}