/* ==========================================================================
   plain.css — the readable long-scroll site. THE DEFAULT.

   Deliberately unscoped: these are the base styles, and everything the game
   needs is layered on top under body[data-mode="game"]. With JavaScript off,
   or broken, a visitor still gets the complete site.
   ========================================================================== */

#content { display: block; }

#world {
  display: block;
  padding: clamp(1.5rem, 5vw, 4rem) clamp(0.9rem, 5vw, 2rem) clamp(4rem, 12vh, 8rem);
}

.region {
  display: block;
  width: min(var(--measure), 100%);
  margin-inline: auto;
}

.region + .region { margin-top: clamp(3rem, 10vh, 6rem); }
.region + .region::before {
  content: "= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =";
  display: block;
  overflow: hidden;
  white-space: nowrap;
  margin-bottom: clamp(2rem, 6vh, 4rem);
  color: var(--ink-faint);
}

.card {
  width: 100%;
  margin-bottom: clamp(1.5rem, 5vh, 3rem);
}

.card:last-child { margin-bottom: 0; }

/* Read flat, the page is a resume: one column of text in reading order. The
   regions dissolve so cards from both can be ordered together; the game
   still needs them in their own regions. */
html:not(.mode-game) #world {
  display: flex;
  flex-direction: column;
  align-items: center;
}
html:not(.mode-game) .region { display: contents; }
html:not(.mode-game) .region::before { content: none; }

html:not(.mode-game) .card,
html:not(.mode-game) .plain-heading {
  width: min(var(--measure), 100%);
}

html:not(.mode-game) .card {
  padding: 0;
  border: 0;
  background: none;
  margin-bottom: 1.5rem;
}

html:not(.mode-game) :is(.plain-heading, #about, #skills, #contact) { margin-top: 1.5rem; }

html:not(.mode-game) :is(.card--entry, .card--project, .card--branch) h2 {
  margin-bottom: 0.2em;
  text-transform: none;
  letter-spacing: 0;
}
html:not(.mode-game) :is(.card--entry, .card--project, .card--branch) h2::before,
html:not(.mode-game) :is(.card--entry, .card--project, .card--branch) h2::after { content: none; }
html:not(.mode-game) .card .meta { margin-bottom: 0.4em; }

.plain-heading {
  margin-bottom: 0.6em;
  font-size: 14px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.plain-heading::before { content: "## "; color: var(--accent); }
.plain-heading::after {
  content: "----------------------------------------------------------------";
  display: block;
  overflow: hidden;
  white-space: nowrap;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-faint);
}

html:not(.mode-game) .hint,
html:not(.mode-game) :is(#history-intro, .card--skill) { display: none; }

html:not(.mode-game) #intro { order: 1; }
html:not(.mode-game) #about { order: 2; }
html:not(.mode-game) #experience { order: 3; }
html:not(.mode-game) #work-now { order: 4; }
html:not(.mode-game) #work-fortinet-lead { order: 5; }
html:not(.mode-game) #work-fortinet-dev { order: 6; }
html:not(.mode-game) #work-amplitude-intern { order: 7; }
html:not(.mode-game) #work-haemonetics { order: 8; }
html:not(.mode-game) #work-neuralberta { order: 8; }
html:not(.mode-game) #education-heading { order: 9; }
html:not(.mode-game) #education { order: 10; }
html:not(.mode-game) #projects { order: 11; }
html:not(.mode-game) .card--project { order: 12; }
html:not(.mode-game) #skills { order: 13; }
html:not(.mode-game) .card--branch { order: 15; }
html:not(.mode-game) #contact { order: 16; }

#stage,
.touch-controls,
#map { display: none; }

#map:not([hidden]) { display: grid; }

@media (max-width: 34rem) {
  .chrome { flex-wrap: wrap; }
  .chrome-actions { width: 100%; }
  .chrome-actions .btn { flex: 1; }
}

/* Printing is a legitimate way to read a CV. Give it the plain layout only. */
@media print {
  .chrome, .touch-controls, #stage, .map, .reader, .skip-link { display: none !important; }
  body { background: var(--print-paper); }
  .card { break-inside: avoid; }
}

.game-only { display: none; }
html.mode-game .game-only { display: revert; }
html.mode-game .plain-only { display: none; }