/* ==========================================================
   style.css

   1. Themes: colors and fonts, as CSS variables
   2. Base: plain HTML elements
   3. Layout: header, footer, containers
   4. Pages: home, resume, blog, links
   5. Theme extras: things only one theme does
   6. Small screens, reduced motion, print

   Everything uses the variables from section 1, like
   var(--ink). Change a value there and the whole site follows.
   ========================================================== */


/* ---------- 1. Themes ---------- */

:root {
  --measure: 66ch;     /* max line length for reading */
  --wide: 70rem;       /* max page width */
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --space-section: clamp(3.5rem, 8vw, 6rem);
  --label-col: 12rem;  /* left column for section headings */
}

/* Lavender: soft and calm. Also the look if JavaScript is off. */
:root,
[data-theme="lavender"] {
  color-scheme: light;
  --bg: #F5F1FB;
  --surface: #EAE2F6;
  --ink: #2B2140;
  --muted: #645879;
  --line: #DACFEB;
  --accent: #7A58C1;
  --accent-deep: #4A2E85;
  --on-accent: #FFFFFF;
  --link: #6744B0;
  --focus: #6744B0;
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Figtree", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --display-weight: 600;
  --display-tracking: -0.025em;
  --radius: 14px;
  --border-width: 1px;
  --shadow: none;
}

/* Pokémon: a Pokédex-red header, game text boxes and a pixel
   font. Everything is drawn with CSS, with no official artwork. */
[data-theme="pokemon"] {
  color-scheme: light;
  --bg: #EEF2F6;
  --surface: #FFFFFF;
  --ink: #1D2333;
  --muted: #4F5869;
  --line: #1D2333;
  --accent: #DC0A2D;
  --on-accent: #FFFFFF;
  --link: #2A5BB0;
  --focus: #2A5BB0;
  --dex-red: #DC0A2D;
  --dex-red-dark: #9E0820;
  --dex-yellow: #FFCB05;
  --dex-blue: #2A5BB0;
  --font-display: "Pixelify Sans", ui-monospace, monospace;
  --font-body: "Nunito", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --display-weight: 600;
  --display-tracking: 0;
  --radius: 12px;
  --border-width: 3px;
  --shadow: none;
}

/* Paper: clean and minimal. */
[data-theme="paper"] {
  color-scheme: light;
  --bg: #F9FAFB;
  --surface: #ECEFF3;
  --ink: #141821;
  --muted: #565E6D;
  --line: #D9DDE4;
  --accent: #2740D9;
  --on-accent: #FFFFFF;
  --link: #2740D9;
  --focus: #2740D9;
  --font-display: "Schibsted Grotesk", system-ui, sans-serif;
  --font-body: "Schibsted Grotesk", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --display-weight: 800;
  --display-tracking: -0.045em;
  --radius: 8px;
  --border-width: 1px;
  --shadow: none;
}

/* Terminal: dark and techy. Amber phosphor on midnight blue. */
[data-theme="terminal"] {
  color-scheme: dark;
  --bg: #12142A;
  --surface: #1B1E3C;
  --ink: #E4E2F4;
  --muted: #9D9BBF;
  --line: #2E3262;
  --accent: #FFB547;
  --accent-2: #7DDFD6;
  --on-accent: #12142A;
  --link: #FFB547;
  --focus: #7DDFD6;
  --font-display: "IBM Plex Mono", ui-monospace, monospace;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --display-weight: 600;
  --display-tracking: -0.03em;
  --radius: 3px;
  --border-width: 1px;
  --shadow: none;
}

/* Pop: bold and colorful. Thick outlines, hard shadows. */
[data-theme="pop"] {
  color-scheme: light;
  --bg: #F1EBFF;
  --surface: #FFFFFF;
  --ink: #1E1240;
  --muted: #4E4372;
  --line: #1E1240;
  --accent: #FF4F8B;
  --accent-2: #19C3B1;
  --accent-3: #FFD43B;
  --on-accent: #1E1240;
  --link: #C4125A;
  --focus: #1E1240;
  --tint-1: #FFE9A6;   /* yellow */
  --tint-2: #C6F3EC;   /* mint */
  --tint-3: #FFD3E3;   /* pink */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Bricolage Grotesque", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --display-weight: 800;
  --display-tracking: -0.035em;
  --radius: 16px;
  --border-width: 3px;
  --shadow: 5px 5px 0 var(--ink);
}


/* ---------- 2. Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  transition: background-color 0.25s ease, color 0.25s ease;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 0.5em;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: 1.1;
  text-wrap: balance;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--link);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 0.16em;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

img {
  max-width: 100%;
  height: auto;
}

.skip-link {
  position: absolute;
  top: -4rem;
  left: 0.5rem;
  z-index: 10;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--bg);
}

.skip-link:focus {
  top: 0.5rem;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border: var(--border-width) solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow);
  cursor: pointer;
}

.button:hover {
  filter: brightness(1.08);
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pill {
  display: inline-block;
  padding: 0.45rem 1rem;
  border: var(--border-width) solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}

.pill:hover {
  border-color: var(--ink);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tag {
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.8125rem;
  font-weight: 500;
}


/* ---------- 3. Layout ---------- */

.container {
  width: min(100% - 2 * var(--gutter), var(--wide));
  margin-inline: auto;
}

/* A narrower column for reading (blog list, posts). */
.narrow {
  width: min(100% - 2 * var(--gutter), 44rem);
  margin-inline: auto;
}

/* Heading on the left, content on the right. */
.split {
  display: grid;
  grid-template-columns: var(--label-col) minmax(0, 1fr);
  gap: 1rem 2.5rem;
  align-items: start;
}

.section {
  padding-top: var(--space-section);
}

.site-header {
  padding-block: 1.25rem;
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 2rem;
}

.brand {
  margin-right: auto;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  color: var(--muted);
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--ink);
}

.site-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
}

.theme-switch {
  display: flex;
  gap: 0.125rem;
  padding: 0.2rem;
  border: var(--border-width) solid var(--line);
  border-radius: 999px;
}

.theme-switch button {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}

.theme-switch button:hover {
  color: var(--ink);
}

.theme-switch button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg);
}

/* Each swatch previews its theme's background and accent. */
.swatch {
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.2);
}

.swatch-pokemon  { background: linear-gradient(#DC0A2D 0 42%, #1D2333 42% 58%, #FFFFFF 58%); }
.swatch-lavender { background: linear-gradient(135deg, #F5F1FB 50%, #7A58C1 50%); }
.swatch-paper    { background: linear-gradient(135deg, #F9FAFB 50%, #2740D9 50%); }
.swatch-terminal { background: linear-gradient(135deg, #12142A 50%, #FFB547 50%); }
.swatch-pop      { background: linear-gradient(135deg, #FF4F8B 50%, #FFD43B 50%); }

.site-footer {
  margin-top: var(--space-section);
  padding-block: 1.75rem;
  border-top: var(--border-width) solid var(--line);
  color: var(--muted);
  font-size: 0.9375rem;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 1.5rem;
}

.footer-inner p {
  margin: 0;
}


/* ---------- 4. Pages ---------- */

/* Home: hero */

.hero {
  padding-block: clamp(3rem, 11vw, 8rem) clamp(1rem, 3vw, 2rem);
}

.hero-name {
  margin: 0 0 1.5rem;
  font-size: clamp(3.25rem, 15vw, 8.5rem);
  line-height: 0.9;
}

.hero-tagline {
  max-width: 34ch;
  margin: 0 0 2.25rem;
  text-wrap: balance;
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  line-height: 1.3;
}

/* Only the Terminal theme shows the prompt line, and only the
   Pokémon theme shows the Pokédex line and the footer credit. */
.hero-prompt,
.hero-dex,
.theme-credit {
  display: none;
}

/* Home: sections */

.section-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.section-aside h2 {
  margin: 0;
}

.section-aside a {
  font-size: 0.9375rem;
}

.prose {
  max-width: var(--measure);
}

.projects {
  display: grid;
  gap: 2.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.project {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: 0 1.5rem;
}

.project-year,
.timeline-when,
.post-item time {
  margin: 0;
  padding-top: 0.15em;
  color: var(--muted);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.project h3 {
  margin-bottom: 0.35rem;
}

.project h3 a {
  color: var(--ink);
  text-decoration: none;
}

.project h3 a:hover {
  text-decoration: underline;
}

.project-desc {
  max-width: 60ch;
  margin-bottom: 0.85rem;
  color: var(--muted);
}

.project-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0.85rem 0 0;
  font-size: 0.9375rem;
}

.post-list {
  display: grid;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.post-item {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 0 1.5rem;
}

.post-item h2,
.post-item h3 {
  margin-bottom: 0.25rem;
  font-size: 1.25rem;
}

.post-item h2 a,
.post-item h3 a {
  color: var(--ink);
  text-decoration: none;
}

.post-item h2 a:hover,
.post-item h3 a:hover {
  text-decoration: underline;
}

.post-item p {
  margin: 0;
  color: var(--muted);
}

.empty {
  color: var(--muted);
}

/* Coursework (home and resume) */

.courses {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.course {
  padding-block: 0.85rem 1rem;
  border-top: var(--border-width) solid var(--line);
}

.course :is(h3, h4) {
  margin: 0;
  font-size: 1.125rem;
}

.course-code {
  margin: 0 0 0.15rem;
  color: var(--muted);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.course-note {
  margin: 0.3rem 0 0;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* Coursework stages on the home page: year on the left, courses on
   the right. The Pokémon theme adds art and evolution names. */

.evolution {
  display: grid;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.evo-stage {
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr);
  grid-template-areas: "head courses";
  gap: 0.5rem 1.5rem;
  align-items: start;
}

.evo-head {
  grid-area: head;
  padding-top: 0.85rem;
  border-top: var(--border-width) solid var(--line);
}

.evo-year {
  margin: 0;
  font-size: 1.125rem;
}

.evo-stage > .courses,
.evo-stage > .course-upcoming {
  grid-area: courses;
}

.course-upcoming {
  margin: 0;
  padding-top: 0.85rem;
  color: var(--muted);
}

.evo-art,
.evo-name {
  display: none;
}

/* Resume */

.resume-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem 2rem;
  padding-top: clamp(2.5rem, 7vw, 5rem);
}

.resume-head h1 {
  margin-bottom: 0.75rem;
  font-size: clamp(2.75rem, 8vw, 5rem);
  line-height: 0.95;
}

.resume-tagline {
  margin-bottom: 0.75rem;
  font-size: 1.1875rem;
}

.contact-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
}

.timeline {
  display: grid;
  gap: 2.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline-item {
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr);
  gap: 0 1.5rem;
}

.timeline-item h3 {
  margin-bottom: 0.15rem;
}

.timeline-org {
  margin-bottom: 0.6rem;
  color: var(--muted);
}

.timeline-note {
  margin-bottom: 0.6rem;
}

.timeline-note:last-child {
  margin-bottom: 0;
}

.timeline-item ul {
  margin: 0;
  padding-left: 1.1rem;
}

.timeline-item li + li {
  margin-top: 0.3rem;
}

.skill-groups {
  display: grid;
  gap: 1.25rem;
}

.skill-group {
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr);
  gap: 0.5rem 1.5rem;
  align-items: baseline;
}

.skill-group h3 {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0;
}

/* Blog */

.page-head {
  padding-block: clamp(2.5rem, 7vw, 5rem) 2.5rem;
}

.page-head h1 {
  font-size: clamp(2.75rem, 8vw, 4.5rem);
  line-height: 0.95;
}

.lede {
  margin: 0;
  color: var(--muted);
  font-size: 1.1875rem;
}

.post-header {
  padding-block: clamp(2.5rem, 7vw, 4.5rem) 2.25rem;
}

.post-header h1 {
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  line-height: 1;
}

.post-date {
  margin: 0;
  color: var(--muted);
}

.post-footer {
  margin-top: 3rem;
}

/* Long-form text: blog posts. */
.prose h2 {
  margin: 2em 0 0.5em;
}

.prose ul,
.prose ol {
  padding-left: 1.25rem;
}

.prose li + li {
  margin-top: 0.35em;
}

.prose code {
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 0.875em;
}

.prose pre {
  overflow-x: auto;
  margin: 1.5em 0;
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 0.875rem;
  line-height: 1.55;
}

.prose pre code {
  padding: 0;
  background: none;
  font-size: inherit;
}

.prose blockquote {
  margin: 1.75em 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--accent);
  color: var(--muted);
  font-size: 1.125rem;
}

.prose img {
  border-radius: var(--radius);
}

/* Links page */

.linkpage {
  width: min(100% - 2 * var(--gutter), 30rem);
  margin-inline: auto;
  padding-top: clamp(2rem, 7vw, 4rem);
  text-align: center;
}

.avatar {
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 6rem;
  height: 6rem;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: var(--display-weight);
  letter-spacing: -0.02em;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.linkpage h1 {
  margin-bottom: 0.4rem;
  font-size: 2.25rem;
}

.linkpage-tagline {
  margin-bottom: 2rem;
  color: var(--muted);
}

.link-buttons {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.link-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  box-shadow: var(--shadow);
}

.link-button:hover {
  border-color: var(--ink);
}

.link-label {
  flex: none;
}

.link-button .handle {
  overflow: hidden;
  min-width: 0;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ---------- 5. Theme extras ---------- */

/* Pokémon */

/* Header and footer become the red Pokédex casing. Redefining
   the color variables inside them recolors everything within. */
[data-theme="pokemon"] .site-header,
[data-theme="pokemon"] .site-footer {
  --ink: #FFFFFF;
  --muted: #FFE1E5;
  --line: rgb(255 255 255 / 0.5);
  --bg: var(--dex-red);
  --accent: var(--dex-yellow);
  --link: #FFFFFF;
  --focus: #FFFFFF;
  background: var(--dex-red);
  color: var(--muted);
}

[data-theme="pokemon"] .site-header {
  border-bottom: 6px solid var(--dex-red-dark);
}

[data-theme="pokemon"] .site-footer {
  border-top: 6px solid var(--dex-red-dark);
}

[data-theme="pokemon"] .theme-credit {
  display: block;
  flex-basis: 100%;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
}

/* The big blue lens before your name, three status lights after. */
[data-theme="pokemon"] .brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

[data-theme="pokemon"] .brand::before {
  content: "";
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid #FFFFFF;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #C8EEFF 0 14%, #3AA0E8 18% 55%, #14609E 78%);
  box-shadow: 0 0 0 3px var(--dex-red-dark);
}

[data-theme="pokemon"] .brand::after {
  content: "";
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 1.9rem;
  border-radius: 50%;
  background: #FF8A8F;
  box-shadow:
    0 0 0 2px var(--dex-red-dark),
    0.95rem 0 0 0 var(--dex-yellow),
    0.95rem 0 0 2px var(--dex-red-dark),
    1.9rem 0 0 0 #5EDC7A,
    1.9rem 0 0 2px var(--dex-red-dark);
}

/* Your name in yellow with a blue outline, like the games' title screens. */
[data-theme="pokemon"] .hero-name {
  color: var(--dex-yellow);
  font-weight: 700;
  -webkit-text-stroke: 0.045em var(--dex-blue);
  paint-order: stroke fill;
  text-shadow: 0.04em 0.05em 0 var(--dex-blue);
}

/* "No. 001 Engineer Pokémon" plus type badges, from content.js. */
[data-theme="pokemon"] .hero-dex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0 0 1.25rem;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 1.125rem;
}

.dex-number {
  color: var(--ink);
}

/* Type badges, in the games' type colors. */
.type {
  padding: 0.15rem 0.75rem;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: #A8A77A;
  color: #1D2333;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.type-fire     { background: #EE8130; }
.type-water    { background: #6390F0; }
.type-electric { background: #F7D02C; }
.type-grass    { background: #7AC74C; }
.type-ice      { background: #96D9D6; }
.type-fighting { background: #C22E28; color: #FFFFFF; }
.type-poison   { background: #A33EA1; color: #FFFFFF; }
.type-ground   { background: #E2BF65; }
.type-flying   { background: #A98FF3; }
.type-psychic  { background: #F95587; }
.type-bug      { background: #A6B91A; }
.type-rock     { background: #B6A136; }
.type-ghost    { background: #735797; color: #FFFFFF; }
.type-dragon   { background: #6F35FC; color: #FFFFFF; }
.type-dark     { background: #705746; color: #FFFFFF; }
.type-steel    { background: #B7B7CE; }
.type-fairy    { background: #D685AD; }

/* A menu cursor in front of each heading. */
[data-theme="pokemon"] .section > h2::before,
[data-theme="pokemon"] .section-aside h2::before,
[data-theme="pokemon"] .prose h2::before {
  content: "▶ ";
  color: var(--accent);
  font-size: 0.8em;
}

/* About and Contact sit in game-style text boxes. */
[data-theme="pokemon"] #about .prose,
[data-theme="pokemon"] #contact .prose {
  position: relative;
  padding: 1.25rem 1.5rem 1.5rem;
  border: 4px solid var(--ink);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: inset 0 0 0 3px #FFFFFF, inset 0 0 0 6px #8FB2E6;
}

[data-theme="pokemon"] #about .prose > :last-child,
[data-theme="pokemon"] #contact .prose > :last-child {
  margin-bottom: 0;
}

/* The little "more text" arrow in the corner of the box. */
[data-theme="pokemon"] #about .prose::after {
  content: "▼";
  position: absolute;
  right: 1.1rem;
  bottom: 0.45rem;
  color: var(--accent);
  font-size: 0.75rem;
  animation: blink 1s steps(1) 1s 6;
}

[data-theme="pokemon"] .project {
  padding: 1.25rem 1.5rem 1.5rem;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  background: var(--surface);
}

[data-theme="pokemon"] .tag {
  color: var(--ink);
  font-weight: 700;
  border-radius: 6px;
}

[data-theme="pokemon"] .tag:nth-child(5n + 1) { background: #F7D02C; }
[data-theme="pokemon"] .tag:nth-child(5n + 2) { background: #6390F0; }
[data-theme="pokemon"] .tag:nth-child(5n + 3) { background: #7AC74C; }
[data-theme="pokemon"] .tag:nth-child(5n + 4) { background: #EE8130; }
[data-theme="pokemon"] .tag:nth-child(5n + 5) { background: #F95587; }

/* Each course gets a little badge. */
[data-theme="pokemon"] .course {
  border-top-width: 2px;
}

[data-theme="pokemon"] .course :is(h3, h4) {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

[data-theme="pokemon"] .course :is(h3, h4)::before {
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: radial-gradient(circle, #FFFFFF 0 22%, transparent 26%), var(--badge);
}

[data-theme="pokemon"] .course:nth-child(5n + 1) { --badge: #F7D02C; }
[data-theme="pokemon"] .course:nth-child(5n + 2) { --badge: #6390F0; }
[data-theme="pokemon"] .course:nth-child(5n + 3) { --badge: #7AC74C; }
[data-theme="pokemon"] .course:nth-child(5n + 4) { --badge: #EE8130; }
[data-theme="pokemon"] .course:nth-child(5n + 5) { --badge: #F95587; }

/* Coursework: each school year is an evolution stage in its own card. */
[data-theme="pokemon"] .evolution {
  gap: 3.25rem; /* room for the arrow between stages */
}

[data-theme="pokemon"] .evo-stage {
  position: relative;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "art head"
    "art courses";
  gap: 0.25rem 1.5rem;
  padding: 1.25rem;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  background: var(--surface);
}

[data-theme="pokemon"] .evo-head {
  padding-top: 0;
  border-top: 0;
}

[data-theme="pokemon"] .evo-year {
  font-size: 1.25rem;
}

[data-theme="pokemon"] .evo-name {
  display: block;
  margin: 0.15rem 0 0;
  color: var(--accent);
  font-family: var(--font-display);
}

/* The little screen that shows the stage's drawing. */
[data-theme="pokemon"] .evo-art {
  position: relative;
  display: grid;
  grid-area: art;
  place-items: center;
  overflow: hidden;
  width: 8.5rem;
  aspect-ratio: 1;
  border: 3px solid var(--ink);
  border-radius: 10px;
  background: radial-gradient(circle at 50% 55%, #FFFFFF 0 30%, #D6E6F6 75%);
}

[data-theme="pokemon"] .evo-art > :is(svg, img) {
  position: relative;
  z-index: 1;
  width: 82%;
  height: 82%;
  object-fit: contain;
}

/* A dark backdrop that only shows during the evolution flash. */
[data-theme="pokemon"] .evo-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #1D2333;
  opacity: 0;
}

/* The arrow between stages: this one evolves into the next. */
[data-theme="pokemon"] .evo-stage + .evo-stage::before {
  content: "▼";
  position: absolute;
  top: -2.4rem;
  left: 5.5rem;
  color: var(--accent);
  font-size: 1.25rem;
  line-height: 1;
  transform: translateX(-50%);
}

/* Before a stage scrolls into view it's a dark "who's that
   Pokémon?" silhouette. When main.js adds .is-evolved, it flashes
   white over a dark screen and then appears in color, like the
   games' evolution scene. Upcoming years stay silhouettes. */
[data-theme="pokemon"] .evo-stage:not(.is-evolved) .evo-art > :is(svg, img) {
  filter: brightness(0);
  opacity: 0.85;
}

[data-theme="pokemon"] .is-evolved .evo-art > :is(svg, img) {
  animation: evolve 1.4s ease-out;
}

[data-theme="pokemon"] .is-evolved .evo-art::after {
  animation: evolve-screen 1.4s ease-out;
}

/* The egg doesn't evolve; it cracks as you scroll (main.js sets
   --crack from 0 to 1 and --wobble in degrees). */
[data-theme="pokemon"] .egg {
  position: relative;
  z-index: 1;
  width: 82%;
  aspect-ratio: 1;
  transform: rotate(var(--wobble, 0deg));
  transform-origin: 50% 90%;
}

[data-theme="pokemon"] .egg-half,
[data-theme="pokemon"] .egg-crack {
  position: absolute;
  inset: 0;
}

[data-theme="pokemon"] .egg-half > :is(img, svg) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Two copies of the egg. The top one is cut along the crack's
   zigzag and sits exactly over the whole egg underneath, so there's
   no visible seam. On hatching, the bottom copy is cut to match and
   the top swings open like a lid, hinged at the left end of the crack. */
[data-theme="pokemon"] .egg-top {
  clip-path: polygon(0% 0%, 100% 0%, 100% 52%, 86% 52%, 81% 47%, 73% 55%, 65% 46%, 57% 57%, 50% 48%, 44% 56%, 36% 46%, 28% 55%, 20% 46%, 14% 51%, 0% 51%);
  transform-origin: 14% 51%;
  transition: transform 0.45s cubic-bezier(0.3, 1.6, 0.5, 1);
}

[data-theme="pokemon"] .is-hatched .egg-bottom {
  clip-path: polygon(0% 51%, 14% 51%, 20% 46%, 28% 55%, 36% 46%, 44% 56%, 50% 48%, 57% 57%, 65% 46%, 73% 55%, 81% 47%, 86% 52%, 100% 52%, 100% 100%, 0% 100%);
}

/* Let the lid poke out of the screen frame when it pops off. */
[data-theme="pokemon"] .is-egg .evo-art {
  overflow: visible;
}

/* The crack lines. pathLength="1" lets a dash offset of 1 hide a
   line completely and 0 show all of it. The main crack is fully
   drawn by --crack 0.6; the small branches grow from 0.55 to 0.95. */
[data-theme="pokemon"] .egg-crack path {
  fill: none;
  stroke: #4A3B22;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
}

[data-theme="pokemon"] .crack-main {
  stroke-dashoffset: calc(1 - clamp(0, var(--crack, 0) / 0.6, 1));
}

[data-theme="pokemon"] .crack-branch {
  stroke-dashoffset: calc(1 - clamp(0, (var(--crack, 0) - 0.55) / 0.4, 1));
}

/* A burst of light behind the egg when it hatches. */
[data-theme="pokemon"] .egg::before {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, #FFFBE6 0 20%, #FFD23F 50%, transparent 70%);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

[data-theme="pokemon"] .is-hatched .egg::before {
  opacity: 1;
  transform: scale(1.35);
}

[data-theme="pokemon"] .is-hatched .egg-top {
  transform: translate(-6%, -14%) rotate(-22deg);
}

[data-theme="pokemon"] .is-hatched .egg-crack {
  opacity: 0;
}

@keyframes evolve {
  0%   { filter: brightness(0); transform: scale(0.9); }
  20%  { filter: brightness(0) invert(1); transform: scale(1.12); }
  40%  { filter: brightness(0) invert(1); transform: scale(0.94); }
  60%  { filter: brightness(0) invert(1); transform: scale(1.08); }
  100% { filter: none; transform: scale(1); }
}

@keyframes evolve-screen {
  0%       { opacity: 0; }
  15%, 65% { opacity: 0.9; }
  100%     { opacity: 0; }
}

[data-theme="pokemon"] .pill {
  border-color: var(--ink);
  background: var(--surface);
  font-weight: 700;
}

[data-theme="pokemon"] .pill:hover,
[data-theme="pokemon"] .link-button:hover {
  background: #FFF3BF;
}

[data-theme="pokemon"] .button {
  border-color: var(--ink);
  box-shadow: inset 0 -4px 0 rgb(0 0 0 / 0.22);
}

[data-theme="pokemon"] .link-button {
  border-color: var(--ink);
}

/* The initials circle becomes a ball: red top, white bottom,
   a dark band, and a button in the middle holding your initials. */
[data-theme="pokemon"] .avatar {
  position: relative;
  isolation: isolate;
  width: 7rem;
  height: 7rem;
  border: 4px solid var(--ink);
  background: linear-gradient(var(--dex-red) 0 45%, var(--ink) 45% 55%, #FFFFFF 55%);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
}

[data-theme="pokemon"] .avatar::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 3rem;
  height: 3rem;
  border: 4px solid var(--ink);
  border-radius: 50%;
  background: #FFFFFF;
  transform: translate(-50%, -50%);
}

[data-theme="pokemon"] .prose blockquote {
  border-left-color: var(--dex-yellow);
}

/* Lavender: Fraunces with its "soft" axis turned all the way up,
   so the serif headings get rounded, gentle edges. */
[data-theme="lavender"] :is(h1, h2, h3, .brand, .avatar) {
  font-variation-settings: "SOFT" 100;
}

[data-theme="lavender"] .hero-name {
  color: var(--accent-deep);
  letter-spacing: -0.035em;
}

[data-theme="lavender"] .tag {
  color: var(--accent-deep);
}

[data-theme="lavender"] .pill {
  background: var(--surface);
  border-color: var(--surface);
}

[data-theme="lavender"] .pill:hover {
  border-color: var(--accent);
}

[data-theme="lavender"] .link-button {
  border-color: var(--surface);
}

[data-theme="lavender"] .link-button:hover {
  border-color: var(--accent);
}

/* Paper: let the hero name dominate; everything else stays quiet. */
[data-theme="paper"] .hero-name {
  font-weight: 800;
}

/* Terminal: a typed prompt above your name, monospace UI,
   markdown-style headings and [bracketed] tags. */

[data-theme="terminal"] .hero-prompt {
  display: block;
  margin: 0 0 1.25rem;
  color: var(--muted);
  font-family: var(--font-mono);
}

[data-theme="terminal"] .prompt-user {
  color: var(--accent-2);
}

/* "whoami" types itself out, one letter at a time. */
[data-theme="terminal"] .prompt-cmd {
  display: inline-block;
  overflow: hidden;
  width: 0;
  color: var(--ink);
  white-space: nowrap;
  vertical-align: bottom;
  animation: type 0.6s steps(6, end) 0.4s forwards;
}

[data-theme="terminal"] .caret {
  display: inline-block;
  width: 0.6em;
  height: 1.15em;
  margin-left: 0.15em;
  background: var(--accent);
  vertical-align: text-bottom;
  animation: blink 1s steps(1) 1s 6;
}

@keyframes type {
  to { width: 6ch; }
}

@keyframes blink {
  50% { opacity: 0; }
}

[data-theme="terminal"] .brand,
[data-theme="terminal"] .site-nav,
[data-theme="terminal"] .theme-switch,
[data-theme="terminal"] .pill,
[data-theme="terminal"] .button,
[data-theme="terminal"] .link-button,
[data-theme="terminal"] .project-year,
[data-theme="terminal"] .timeline-when,
[data-theme="terminal"] .post-item time,
[data-theme="terminal"] .post-date,
[data-theme="terminal"] .course-code,
[data-theme="terminal"] .site-footer {
  font-family: var(--font-mono);
}

[data-theme="terminal"] .hero-name {
  color: var(--ink);
}

[data-theme="terminal"] .section > h2::before,
[data-theme="terminal"] .section-aside h2::before,
[data-theme="terminal"] .prose h2::before {
  content: "## ";
  color: var(--accent);
  font-weight: 400;
  letter-spacing: 0;
}

[data-theme="terminal"] .project h3::before {
  content: "./";
  color: var(--muted);
}

[data-theme="terminal"] .tag {
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--accent-2);
  font-family: var(--font-mono);
}

[data-theme="terminal"] .tag::before { content: "["; color: var(--muted); }
[data-theme="terminal"] .tag::after  { content: "]"; color: var(--muted); }

[data-theme="terminal"] .pill {
  border-radius: var(--radius);
}

[data-theme="terminal"] .pill:hover,
[data-theme="terminal"] .link-button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Pop: a shadowed name, sticker headings and tags, and
   chunky colored cards that press down when clicked. */

[data-theme="pop"] .hero-name {
  text-shadow: 0.045em 0.045em 0 var(--accent);
}

[data-theme="pop"] .section > h2,
[data-theme="pop"] .section-aside h2 {
  display: inline-block;
  padding: 0.15em 0.5em;
  border: 3px solid var(--ink);
  border-radius: 10px;
  background: var(--accent-3);
  box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-2deg);
}

[data-theme="pop"] .section > h2 {
  justify-self: start;
}

[data-theme="pop"] .tag {
  border-radius: 6px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 700;
  transform: rotate(-2deg);
}

[data-theme="pop"] .tag:nth-child(even) {
  background: var(--accent-2);
  color: var(--ink);
  transform: rotate(2deg);
}

[data-theme="pop"] .project {
  padding: 1.25rem 1.5rem 1.5rem;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

[data-theme="pop"] .project:nth-child(3n + 1) { background: var(--tint-1); }
[data-theme="pop"] .project:nth-child(3n + 2) { background: var(--tint-2); }
[data-theme="pop"] .project:nth-child(3n + 3) { background: var(--tint-3); }

[data-theme="pop"] .courses {
  gap: 1rem;
}

[data-theme="pop"] .course {
  padding: 0.85rem 1.1rem 1rem;
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--ink);
}

[data-theme="pop"] .course:nth-child(3n + 1) { background: var(--tint-1); }
[data-theme="pop"] .course:nth-child(3n + 2) { background: var(--tint-2); }
[data-theme="pop"] .course:nth-child(3n + 3) { background: var(--tint-3); }

[data-theme="pop"] .course-code,
[data-theme="pop"] .course-note {
  color: var(--ink);
}

[data-theme="pop"] .project-desc,
[data-theme="pop"] .project-year {
  color: var(--ink);
}

[data-theme="pop"] .pill,
[data-theme="pop"] .link-button,
[data-theme="pop"] .button {
  border: 3px solid var(--ink);
  font-weight: 700;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

[data-theme="pop"] .pill {
  background: var(--surface);
  box-shadow: 3px 3px 0 var(--ink);
}

[data-theme="pop"] .link-buttons li:nth-child(3n + 1) .link-button { background: var(--tint-1); }
[data-theme="pop"] .link-buttons li:nth-child(3n + 2) .link-button { background: var(--tint-2); }
[data-theme="pop"] .link-buttons li:nth-child(3n + 3) .link-button { background: var(--tint-3); }

[data-theme="pop"] .link-button .handle {
  color: var(--ink);
}

[data-theme="pop"] .pill:hover,
[data-theme="pop"] .link-button:hover,
[data-theme="pop"] .button:hover {
  filter: none;
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--ink);
}

[data-theme="pop"] .pill:active,
[data-theme="pop"] .link-button:active,
[data-theme="pop"] .button:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--ink);
}

[data-theme="pop"] .avatar {
  border: 3px solid var(--ink);
  box-shadow: var(--shadow);
}

[data-theme="pop"] .theme-switch {
  background: var(--surface);
}

[data-theme="pop"] .prose blockquote {
  border-left-width: 6px;
  color: var(--ink);
}


/* ---------- 6. Small screens, reduced motion, print ---------- */

@media (max-width: 48rem) {
  .split {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 40rem) {
  .site-nav {
    order: 3;
    flex-basis: 100%;
  }

  .evo-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "courses";
  }

  [data-theme="pokemon"] .evo-stage {
    grid-template-columns: 5.5rem minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "art head"
      "courses courses";
    gap: 0.75rem 1rem;
  }

  [data-theme="pokemon"] .evo-art {
    width: 5.5rem;
  }

  [data-theme="pokemon"] .evo-head {
    align-self: center;
  }

  [data-theme="pokemon"] .evo-stage + .evo-stage::before {
    left: 4rem;
  }

  /* Drop the Pokédex lights so the name and theme switcher share a row. */
  [data-theme="pokemon"] .brand::after {
    display: none;
  }

  .project,
  .post-item,
  .timeline-item,
  .skill-group {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
  }
}

/* Below laptop width, theme buttons show just their swatches
   so the header fits. The names stay readable by screen readers. */
@media (max-width: 66rem) {
  .theme-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .theme-switch button {
    padding: 0.45rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* main.js switches to the Paper theme while printing. */
@media print {
  .site-header,
  .site-footer,
  .skip-link,
  .no-print {
    display: none !important;
  }

  body {
    font-size: 10.5pt;
    background: #fff;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  .section {
    padding-top: 1.75rem;
  }

  .resume-head {
    padding-top: 0;
  }

  .timeline-item,
  .skill-group,
  .course {
    break-inside: avoid;
  }
}