/* ================================================================
   Ivan Pozdniakov — personal site
   Quiet academic typography, twelve switchable schemes (+1 secret):
   paper · manuscript · cyanotype · terminal · macintosh · gameboy ·
   riso · punchcard · herbarium · workbench · darkroom · ink · amber
   Each theme = colours + (optionally) its own typography & details.
   ================================================================ */

@font-face {
  font-family: 'QuaziNote';
  src: url('../fonts/QuaziNote-Regular.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'QuaziNote Condensed';
  src: url('../fonts/QuaziNote-Condensed.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}

/* ---------- schemes ---------- */

:root,
[data-theme='paper'] {
  /* warm cream paper, umber ink, madder-red accent */
  --bg: #f6f1e6;
  --ink: #262219;
  --muted: #6f6858;
  --accent: #8a3a2c;
  --rule: #ded5c0;
  --font-body: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
}

[data-theme='manuscript'] {
  /* utopian scholastic: parchment, rubrication, oldstyle serif */
  --bg: #f1e6cb;
  --ink: #372a14;
  --muted: #7c6a48;
  --accent: #9e2b1e;
  --rule: #d8c69e;
  --font-body: 'EB Garamond', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

[data-theme='cyanotype'] {
  /* Prussian-blue print, pale exposure, straw highlight */
  --bg: #113a5d;
  --ink: #e9f1f7;
  --muted: #9fbdd4;
  --accent: #e5c37c;
  --rule: rgba(233, 241, 247, 0.22);
  --font-body: 'Newsreader', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

[data-theme='terminal'] {
  /* green phosphor CRT */
  --bg: #060b07;
  --ink: #4fdf78;
  --muted: #2f9e52;
  --accent: #b3ff87;
  --rule: rgba(79, 223, 120, 0.35);
  --font-body: 'VT323', 'IBM Plex Mono', monospace;
  --font-mono: 'VT323', 'IBM Plex Mono', monospace;
}

[data-theme='macintosh'] {
  /* 1-bit early GUI: black on white, pixel headings */
  --bg: #ffffff;
  --ink: #000000;
  --muted: #3d3d3d;
  --accent: #000000;
  --rule: #000000;
  --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

[data-theme='gameboy'] {
  /* DMG LCD: four shades of pea-soup green */
  --bg: #9bbc0f;
  --ink: #0f380f;
  --muted: #306230;
  --accent: #0f380f;
  --rule: #8bac0f;
  --font-body: 'VT323', 'IBM Plex Mono', monospace;
  --font-mono: 'VT323', 'IBM Plex Mono', monospace;
}

[data-theme='riso'] {
  /* risograph: blue soy ink + fluorescent pink, off-registration */
  --bg: #f7f4ec;
  --ink: #1d3fae;
  --muted: #5c6cb4;
  --accent: #f04e98;
  --rule: #c9cfe8;
  --font-body: 'Newsreader', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

[data-theme='punchcard'] {
  /* IBM manila card: buff stock, chocolate print, IBM blue */
  --bg: #ecdfba;
  --ink: #4a3319;
  --muted: #8a744d;
  --accent: #2456a6;
  --rule: #d4c290;
  --font-body: 'Newsreader', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

[data-theme='herbarium'] {
  /* pressed-plant archive: sage paper, deep green, rust stamp */
  --bg: #edf0e0;
  --ink: #23402a;
  --muted: #5d7257;
  --accent: #96502a;
  --rule: #ccd6b8;
  --font-body: 'Newsreader', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

[data-theme='workbench'] {
  /* Amiga Workbench 1.3: blue, white, orange, black */
  --bg: #0055aa;
  --ink: #ffffff;
  --muted: #9fc3e7;
  --accent: #ff8800;
  --rule: rgba(255, 255, 255, 0.4);
  --font-body: 'IBM Plex Mono', ui-monospace, monospace;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

[data-theme='darkroom'] {
  /* photographic darkroom under safelight */
  --bg: #140b0b;
  --ink: #ff8a72;
  --muted: #a45646;
  --accent: #ffb199;
  --rule: rgba(255, 138, 114, 0.25);
  --font-body: 'Newsreader', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

[data-theme='notebook'] {
  /* squared exercise book: graph paper, pen ink, red margin */
  --bg: #fdfdfa;
  --ink: #2b3a55;
  --muted: #7a86a0;
  --accent: #d23b2e;
  --rule: #c9d4e8;
  --font-body: 'Newsreader', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

[data-theme='swiss'] {
  /* International Typographic Style: white, black, Swiss red */
  --bg: #ffffff;
  --ink: #141414;
  --muted: #6b6b6b;
  --accent: #e30613;
  --rule: #e2e2e2;
  --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

[data-theme='dawn'] {
  /* soft utopian morning: gradient sky, slate ink, terracotta sun */
  --bg: #f6e7d7;
  --ink: #3a3d52;
  --muted: #8087a3;
  --accent: #c96f4a;
  --rule: rgba(58, 61, 82, 0.16);
  --font-body: 'Newsreader', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

[data-theme='bodoni'] {
  /* editorial didone: gallery white, black hairlines, crimson */
  --bg: #faf8f3;
  --ink: #16130f;
  --muted: #7a746a;
  --accent: #a31329;
  --rule: #16130f;
  --font-body: 'Newsreader', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

[data-theme='marble'] {
  /* Roman museum: veined stone, bronze, Trajan-style caps */
  --bg: #f5f3ee;
  --ink: #2a2723;
  --muted: #8b857a;
  --accent: #8c6a3f;
  --rule: #ddd8cd;
  --font-body: 'Newsreader', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

[data-theme='sumi'] {
  /* ink wash on washi, one vermilion seal */
  --bg: #f7f4ec;
  --ink: #1f1d1a;
  --muted: #7d7668;
  --accent: #c03a26;
  --rule: #e3ddcf;
  --font-body: 'Newsreader', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

[data-theme='pinstripe'] {
  /* bespoke navy wool, chalk stripe, burgundy silk */
  --bg: #1b2436;
  --ink: #ece7db;
  --muted: #a2a89b;
  --accent: #c0616d;
  --rule: rgba(236, 231, 219, 0.2);
  --font-body: 'Newsreader', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

[data-theme='xray'] {
  /* radiograph: film black, pale glow, viridian marks,
     the portrait develops as a negative */
  --bg: #0a0f14;
  --ink: #d9e8ee;
  --muted: #6f8794;
  --accent: #62e0c0;
  --rule: rgba(217, 232, 238, 0.16);
  --font-body: 'Newsreader', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

[data-theme='vapor'] {
  /* vaporwave, the grown-up cut: dusk indigo, aurora haze,
     holographic pink–cyan, a faint horizon grid */
  --bg: #120e1e;
  --ink: #ece7fa;
  --muted: #9d94bd;
  --accent: #f472b6;
  --accent-2: #67e8f9;
  --rule: rgba(236, 231, 250, 0.16);
  --font-body: 'Newsreader', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

[data-theme='matins'] {
  /* a scriptorium at first light: dawn sky over parchment,
     scholarly Garamond, gilded rubrication */
  --bg: #f5e3c4;
  --ink: #3f2f1e;
  --muted: #8a765a;
  --accent: #ac3d24;
  --rule: rgba(63, 47, 30, 0.18);
  --font-body: 'EB Garamond', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

[data-theme='lauds'] {
  /* the palest hour before sunrise: cool grey-blue quiet,
     one gold thread of first light */
  --bg: #e7e9ee;
  --ink: #343b4d;
  --muted: #7c8296;
  --accent: #96762c;
  --rule: rgba(52, 59, 77, 0.16);
  --font-body: 'EB Garamond', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

[data-theme='vespers'] {
  /* the scriptorium at dusk: sunset embers on dark parchment,
     candle-gold rubrication */
  --bg: #362220;
  --ink: #ecdfc9;
  --muted: #a78f7c;
  --accent: #dfa159;
  --rule: rgba(236, 223, 201, 0.2);
  --font-body: 'EB Garamond', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

[data-theme='compline'] {
  /* the last office of the day: near-dark, a single candle
     holding a pool of light over the page */
  --bg: #191216;
  --ink: #e6d8bd;
  --muted: #8f7f6c;
  --accent: #e2a94f;
  --rule: rgba(230, 216, 189, 0.16);
  --font-body: 'EB Garamond', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

[data-theme='observatory'] {
  /* a star atlas at midnight: engraved brass on deep blue */
  --bg: #0c1226;
  --ink: #dfe6f4;
  --muted: #7d8ab0;
  --accent: #e8c56a;
  --rule: rgba(223, 230, 244, 0.16);
  --font-body: 'Newsreader', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

[data-theme='prism'] {
  /* a white page in refracted light: strict Garamond scholarship,
     one soft spectrum drifting across the paper */
  --bg: #fafaf7;
  --ink: #26242c;
  --muted: #77738a;
  --accent: #6f5bc4;
  --rule: #e6e3ee;
  --font-body: 'EB Garamond', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

[data-theme='endpaper'] {
  /* marbled endpapers of an old book: pastel swirls under
     delicate scholarly type */
  --bg: #f7f4ef;
  --ink: #33302b;
  --muted: #837c72;
  --accent: #92496b;
  --rule: #e5dfd4;
  --font-body: 'Cormorant Garamond', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

[data-theme='atelier'] {
  /* between dawn, vapor, riso and paper — but sober:
     warm ivory, graphite-aubergine ink, muted wine accent,
     high-contrast elegant serif */
  --bg: #f3ede4;
  --ink: #2f2b30;
  --muted: #857e7a;
  --accent: #7a3b48;
  --rule: #ded5c7;
  --font-body: 'Cormorant Garamond', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

[data-theme='atlas'] {
  /* old cartography: sepia stock, graticule, compass red */
  --bg: #efe3c8;
  --ink: #43351d;
  --muted: #85714b;
  --accent: #a44a35;
  --rule: #d9c9a4;
  --font-body: 'Newsreader', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

[data-theme='opera'] {
  /* velvet & gold: burgundy dark, ivory, gilded details */
  --bg: #1e0e14;
  --ink: #f3e6d0;
  --muted: #b39b84;
  --accent: #d4af37;
  --rule: rgba(212, 175, 55, 0.35);
  --font-body: 'Newsreader', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

[data-theme='brutalist'] {
  /* raw web concrete: Times, default-blue links, marker yellow */
  --bg: #ffffff;
  --ink: #000000;
  --muted: #333333;
  --accent: #0000ee;
  --rule: #000000;
  --font-body: 'Times New Roman', Times, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

[data-theme='amber'] {
  /* secret: amber phosphor terminal */
  --bg: #100a02;
  --ink: #ffb000;
  --muted: #9a6f1f;
  --accent: #ffd166;
  --rule: rgba(255, 176, 0, 0.3);
  --font-body: 'VT323', 'IBM Plex Mono', monospace;
  --font-mono: 'VT323', 'IBM Plex Mono', monospace;
}

[data-theme='ink'] {
  /* soft near-black, warm grey text, dry-sage accent */
  --bg: #17181c;
  --ink: #e6e3da;
  --muted: #98948a;
  --accent: #a4c9ab;
  --rule: rgba(230, 227, 218, 0.16);
  --font-body: 'Newsreader', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

/* ---------- base ---------- */

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.72;
  font-weight: 400;
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(2rem, 6vh, 4rem) clamp(1.25rem, 5vw, 2rem) 2.5rem;
  transition: background 0.35s ease, color 0.35s ease;
}

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

/* interactive graph background — sits above the page colour,
   below the text; colours are fed by the active theme via JS */
#graph {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
[data-graph='off'] #graph { display: none; }
main, footer { position: relative; z-index: 1; }

.mono {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color 0.2s, text-decoration-color 0.2s, background 0.2s;
}
a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* ---------- rules ---------- */

.rule,
.rule-double {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: clamp(2rem, 5vh, 3rem) 0;
}
.rule-double { position: relative; }
.rule-double::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 3px;
  border-top: 1px solid var(--rule);
}

/* ---------- masthead ---------- */

.masthead-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
}

h1 {
  font-size: clamp(1.9rem, 4.5vw, 2.4rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.role {
  color: var(--muted);
  font-size: 1.05rem;
  margin-bottom: 1.1rem;
}

.seeking {
  font-style: italic;
  font-size: 1.02rem;
  margin-bottom: 1.4rem;
  max-width: 32em;
}

.contact-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.3rem;
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
}

/* materials (cv · scholar · github) vs ways to reach me (email · telegram) */
.link-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.15rem;
}

.row-sep {
  width: 1px;
  height: 1.05em;
  background: var(--rule);
}
.contact-row a,
.project-links a {
  color: var(--muted);
  text-decoration: none;
}
.contact-row a::before,
.project-links a::before { content: '['; }
.contact-row a::after,
.project-links a::after { content: ']'; }
.contact-row a:hover,
.project-links a:hover { color: var(--accent); }

.portrait {
  width: clamp(96px, 14vw, 128px);
  height: auto;
  align-self: start;
  border-radius: 6px;
  border: 1px solid var(--rule);
  filter: saturate(0.9);
}

/* ---------- theme picker ---------- */

.theme-picker {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.3rem 1.05rem;
  margin-bottom: clamp(1.6rem, 4vh, 2.6rem);
}
.theme-picker button {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  background: none;
  border: 0;
  padding: 0;
  color: var(--muted);
  cursor: pointer;
  opacity: 0.75;
  transition: color 0.2s, opacity 0.2s;
}
.theme-picker button:hover { color: var(--accent); opacity: 1; }
.theme-picker button[aria-pressed='true'] {
  color: var(--accent);
  opacity: 1;
}
.theme-picker button[aria-pressed='true']::before { content: '['; }
.theme-picker button[aria-pressed='true']::after { content: ']'; }

.theme-picker #shuffle { opacity: 0.55; }

.theme-picker.wiggle { animation: wiggle 0.28s ease; }
@keyframes wiggle {
  25% { transform: rotate(1.2deg); }
  50% { transform: rotate(-1.2deg); }
  75% { transform: rotate(0.6deg); }
}
@media (prefers-reduced-motion: reduce) {
  .theme-picker.wiggle { animation: none; }
}

.picker-hint {
  color: var(--muted);
  opacity: 0.45;
  user-select: none;
}

/* ---------- sections ---------- */

/* section headings speak in each theme's own display voice —
   the font comes from --font-body unless a theme overrides it */
h2 {
  color: var(--accent);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.2;
  margin-bottom: 1.4rem;
}

section p { margin-bottom: 1.1rem; }
section p:last-child { margin-bottom: 0; }

/* ---------- projects ---------- */

.project { margin-bottom: 1.9rem; }
.project:last-child { margin-bottom: 0; }

.project h3 {
  font-size: 1.22rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.project h3.quazi {
  font-family: 'QuaziNote', serif;
  font-size: 1.5rem;
}

.project p {
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.project-links { display: flex; gap: 1rem; }

/* ---------- colophon ---------- */

.colophon .rule-double { margin-bottom: 1.4rem; }
.colophon p {
  color: var(--muted);
  letter-spacing: 0.08em;
  font-size: 0.68rem;
}

/* ================================================================
   Theme details
   ================================================================ */

/* ---------- manuscript: rubricated drop cap, justified text,
              fleuron dividers, sepia portrait ---------- */

[data-theme='manuscript'] body { font-size: 1.19rem; }

[data-theme='manuscript'] section p {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

[data-theme='manuscript'] #about > p:first-of-type::first-letter {
  float: left;
  font-size: 3.1em;
  line-height: 0.82;
  padding: 0.06em 0.12em 0 0;
  color: var(--accent);
  font-weight: 500;
}

[data-theme='manuscript'] .rule {
  border: 0;
  text-align: center;
  margin: clamp(1.6rem, 4vh, 2.4rem) 0;
}
[data-theme='manuscript'] .rule::after {
  content: '❧';
  color: var(--accent);
  font-size: 1.15rem;
}

[data-theme='manuscript'] .portrait {
  filter: sepia(0.4) saturate(0.85) contrast(1.02);
  border-radius: 3px;
}

[data-theme='manuscript'] h1 { font-weight: 500; }

/* illuminated page frame */
[data-theme='manuscript'] body::after {
  content: '';
  position: fixed;
  inset: 10px;
  pointer-events: none;
  border: 1px solid var(--rule);
  outline: 1px solid var(--rule);
  outline-offset: 3px;
}
@media (max-width: 560px) {
  [data-theme='manuscript'] body::after { display: none; }
}

/* ---------- terminal & amber: scanlines + tube vignette, blinking
              cursor, inverse-video links, phosphor portrait ---------- */

[data-theme='terminal'] body,
[data-theme='amber'] body {
  font-size: 1.38rem;
  line-height: 1.48;
  transition: none;
}

[data-theme='terminal'] body::after,
[data-theme='amber'] body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.4) 100%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0 1px, transparent 1px 3px);
}

[data-theme='terminal'] .mono,
[data-theme='amber'] .mono {
  font-size: 0.95rem;
  letter-spacing: 0.08em;
}

[data-theme='terminal'] h1,
[data-theme='amber'] h1 { letter-spacing: 0; font-weight: 400; }
[data-theme='terminal'] h1::after,
[data-theme='amber'] h1::after {
  content: '▌';
  color: var(--accent);
  margin-left: 0.15em;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  [data-theme='terminal'] h1::after,
  [data-theme='amber'] h1::after { animation: none; }
}

[data-theme='terminal'] h1,
[data-theme='terminal'] .project h3,
[data-theme='terminal'] a { text-shadow: 0 0 7px rgba(79, 223, 120, 0.45); }
[data-theme='amber'] h1,
[data-theme='amber'] .project h3,
[data-theme='amber'] a { text-shadow: 0 0 7px rgba(255, 176, 0, 0.45); }

[data-theme='terminal'] a,
[data-theme='amber'] a { text-decoration-color: var(--muted); }
[data-theme='terminal'] a:hover,
[data-theme='amber'] a:hover {
  background: var(--accent);
  color: var(--bg);
  text-decoration: none;
  text-shadow: none;
}

[data-theme='terminal'] .rule,
[data-theme='terminal'] .rule-double,
[data-theme='amber'] .rule,
[data-theme='amber'] .rule-double { border-top-style: dashed; }
[data-theme='terminal'] .rule-double::after,
[data-theme='amber'] .rule-double::after { border-top-style: dashed; }

[data-theme='terminal'] .portrait {
  filter: grayscale(1) sepia(1) hue-rotate(65deg) saturate(1.8) contrast(1.1) brightness(0.95);
  border-radius: 0;
}
[data-theme='amber'] .portrait {
  filter: grayscale(1) sepia(1) saturate(2.6) contrast(1.15) brightness(0.9);
  border-radius: 0;
}

[data-theme='terminal'] .project h3,
[data-theme='amber'] .project h3 { font-weight: 400; font-size: 1.45rem; }

/* ---------- macintosh: 1-bit, pixel headings, hard shadow ---------- */

[data-theme='macintosh'] body {
  font-size: 1rem;
  line-height: 1.65;
  transition: none;
}

[data-theme='macintosh'] h1 {
  font-family: 'Silkscreen', monospace;
  font-size: clamp(1.25rem, 3.4vw, 1.7rem);
  font-weight: 400;
  letter-spacing: 0;
}

[data-theme='macintosh'] .project h3 {
  font-family: 'Silkscreen', monospace;
  font-size: 0.82rem;
  font-weight: 400;
}
[data-theme='macintosh'] .project h3.quazi {
  font-family: 'QuaziNote', serif;
  font-size: 1.4rem;
}

[data-theme='macintosh'] .mono { font-size: 0.68rem; }

[data-theme='macintosh'] a {
  text-decoration-thickness: 2px;
  text-decoration-color: var(--ink);
}
[data-theme='macintosh'] a:hover {
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
}

[data-theme='macintosh'] .rule { border-top-width: 2px; }
[data-theme='macintosh'] .rule-double { border-top-width: 2px; }
[data-theme='macintosh'] .rule-double::after { border-top-width: 2px; top: 4px; }

[data-theme='macintosh'] .portrait {
  filter: grayscale(1) contrast(1.35) brightness(1.05);
  border: 2px solid var(--ink);
  border-radius: 0;
  box-shadow: 5px 5px 0 var(--ink);
}

[data-theme='macintosh'] .seeking { font-style: normal; }

/* classic title-bar stripes across the top */
[data-theme='macintosh'] body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 14px;
  background: repeating-linear-gradient(180deg, #000 0 2px, #fff 2px 4px);
  border-bottom: 2px solid #000;
}

/* ---------- cyanotype: blue-print portrait, exposure vignette ---------- */

[data-theme='cyanotype'] .portrait {
  filter: grayscale(1) sepia(0.5) hue-rotate(155deg) saturate(2.1) brightness(0.92);
}

[data-theme='cyanotype'] body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 35%, rgba(233, 241, 247, 0.07), transparent 65%);
}

/* ---------- gameboy: LCD grid, pixel headline, DMG portrait ---------- */

[data-theme='gameboy'] body {
  font-size: 1.34rem;
  line-height: 1.5;
  transition: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(15, 56, 15, 0.05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(15, 56, 15, 0.05) 0 1px, transparent 1px 3px);
}

[data-theme='gameboy'] h1 {
  font-family: 'Silkscreen', monospace;
  font-size: clamp(1.2rem, 3.2vw, 1.6rem);
  font-weight: 400;
  letter-spacing: 0;
}

[data-theme='gameboy'] .mono { font-size: 0.92rem; letter-spacing: 0.08em; }

[data-theme='gameboy'] .project h3 { font-weight: 400; font-size: 1.4rem; }

[data-theme='gameboy'] a { text-decoration-color: var(--muted); }
[data-theme='gameboy'] a:hover {
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
}

[data-theme='gameboy'] .rule,
[data-theme='gameboy'] .rule-double { border-top-width: 2px; border-top-color: var(--ink); }
[data-theme='gameboy'] .rule-double::after { border-top-width: 2px; border-top-color: var(--ink); top: 4px; }

[data-theme='gameboy'] .portrait {
  filter: grayscale(1) sepia(1) hue-rotate(35deg) saturate(2.4) brightness(1.02) contrast(1.15);
  border: 2px solid var(--ink);
  border-radius: 0;
}

/* ---------- riso: off-registration overprint, halftone paper ---------- */

[data-theme='riso'] h1,
[data-theme='riso'] .project h3:not(.quazi) {
  text-shadow: 2px 2px 0 rgba(240, 78, 152, 0.5);
}

[data-theme='riso'] h2 { color: var(--accent); }

[data-theme='riso'] .portrait {
  filter: grayscale(1) brightness(1.05) contrast(1.2);
  border: 1px solid var(--ink);
  border-radius: 0;
  box-shadow: 5px 5px 0 rgba(240, 78, 152, 0.55);
}

[data-theme='riso'] .rule,
[data-theme='riso'] .rule-double { border-top-color: var(--ink); opacity: 0.35; }

[data-theme='riso'] body {
  background-image: radial-gradient(rgba(240, 78, 152, 0.08) 1px, transparent 1px);
  background-size: 7px 7px;
}

/* ---------- punchcard: punched top row, cut corner ---------- */

[data-theme='punchcard'] body::before {
  content: '';
  position: fixed;
  top: 10px;
  left: 0;
  right: 0;
  height: 12px;
  pointer-events: none;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 14px,
    rgba(74, 51, 25, 0.28) 14px 20px
  );
}

[data-theme='punchcard'] body::after {
  content: '';
  position: fixed;
  top: 0;
  right: 0;
  border-style: solid;
  border-width: 0 34px 34px 0;
  border-color: transparent rgba(74, 51, 25, 0.16) transparent transparent;
}

[data-theme='punchcard'] h2 {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
}

[data-theme='cyanotype'] h2 {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

[data-theme='macintosh'] h2 {
  font-family: 'Silkscreen', monospace;
  font-size: 0.82rem;
  font-weight: 400;
}

[data-theme='punchcard'] .portrait {
  filter: sepia(0.35) saturate(0.8) contrast(1.05);
  border: 1px solid var(--muted);
  border-radius: 0;
}

/* ---------- herbarium: specimen mounting ---------- */

[data-theme='herbarium'] .rule,
[data-theme='herbarium'] .rule-double { border-top-style: dotted; }
[data-theme='herbarium'] .rule-double::after { border-top-style: dotted; }

[data-theme='herbarium'] .rule {
  border: 0;
  text-align: center;
}
[data-theme='herbarium'] .rule::after {
  content: '❦';
  color: var(--muted);
  font-size: 1.1rem;
}

[data-theme='herbarium'] h2 { color: var(--accent); }

[data-theme='herbarium'] .portrait {
  filter: grayscale(0.4) sepia(0.35) hue-rotate(45deg) saturate(0.9);
  border: 1px solid var(--muted);
  border-radius: 2px;
  box-shadow: 0 1px 0 var(--rule), 0 4px 10px -6px rgba(35, 64, 42, 0.5);
}

[data-theme='herbarium'] .project h3 { font-style: italic; font-weight: 400; }

/* ---------- workbench: Amiga chrome ---------- */

[data-theme='workbench'] body {
  font-size: 1rem;
  line-height: 1.62;
}

[data-theme='workbench'] body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 12px;
  background: repeating-linear-gradient(90deg, #ff8800 0 14px, #000 14px 28px);
  border-bottom: 2px solid #000;
}

[data-theme='workbench'] h1 {
  font-weight: 600;
  letter-spacing: 0;
  text-shadow: 2px 2px 0 #000;
}

[data-theme='workbench'] h2 { color: var(--accent); text-shadow: 1px 1px 0 #000; }

[data-theme='workbench'] .project h3 { font-weight: 600; font-size: 1.05rem; }

[data-theme='workbench'] a { text-decoration-color: var(--accent); }
[data-theme='workbench'] a:hover {
  background: var(--accent);
  color: #000;
  text-decoration: none;
}

[data-theme='workbench'] .rule,
[data-theme='workbench'] .rule-double { border-top-width: 2px; }
[data-theme='workbench'] .rule-double::after { border-top-width: 2px; top: 4px; }

[data-theme='workbench'] .portrait {
  filter: saturate(1.15) contrast(1.1);
  border: 2px solid #fff;
  border-radius: 0;
  box-shadow: 4px 4px 0 #000;
}

/* ---------- darkroom: safelight vignette, red print ---------- */

[data-theme='darkroom'] body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.5) 100%);
}

[data-theme='darkroom'] .portrait {
  filter: grayscale(1) sepia(1) hue-rotate(-30deg) saturate(2.4) brightness(0.85) contrast(1.1);
  border-color: var(--muted);
}

[data-theme='darkroom'] h1,
[data-theme='darkroom'] h2 { text-shadow: 0 0 10px rgba(255, 138, 114, 0.35); }

/* film grain */
[data-theme='darkroom'] body::before {
  content: '';
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- notebook: graph paper, pen headings, red margin ---------- */

[data-theme='notebook'] body {
  background-image:
    linear-gradient(#d23b2e, #d23b2e),
    repeating-linear-gradient(0deg, rgba(43, 58, 85, 0.09) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(43, 58, 85, 0.09) 0 1px, transparent 1px 24px);
  background-size: 1px 100%, auto, auto;
  background-position: 3.2rem 0, 0 0, 0 0;
  background-repeat: no-repeat, repeat, repeat;
  background-attachment: fixed;
}

[data-theme='notebook'] h1 {
  /* the big headline wears the Condensed cut — it carries size well */
  font-family: 'QuaziNote Condensed', 'QuaziNote', var(--font-body);
  font-weight: 400;
  font-size: clamp(2.2rem, 5.2vw, 3rem);
}
[data-theme='notebook'] .project h3 {
  font-family: 'QuaziNote', var(--font-body);
  font-weight: 400;
  font-size: 1.55rem;
}

[data-theme='notebook'] h2 {
  color: var(--accent);
  font-family: 'QuaziNote', var(--font-body);
  font-size: 1.55rem;
  font-weight: 400;
}

[data-theme='notebook'] .rule,
[data-theme='notebook'] .rule-double { border-top-style: dashed; border-top-color: var(--rule); }
[data-theme='notebook'] .rule-double::after { border-top-style: dashed; }

[data-theme='notebook'] .portrait {
  border: 1px solid var(--rule);
  border-radius: 2px;
  box-shadow: 0 3px 8px -4px rgba(43, 58, 85, 0.35);
  transform: rotate(-1.2deg);
}

/* ---------- swiss: objective, red, flush ---------- */

[data-theme='swiss'] body {
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
}

[data-theme='swiss'] h1 {
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: clamp(2rem, 5vw, 2.6rem);
}

[data-theme='swiss'] h2 {
  color: var(--accent);
  font-size: 0.92rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

[data-theme='swiss'] .project h3 { font-weight: 700; font-size: 1.02rem; }

[data-theme='swiss'] a {
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1.5px;
}
[data-theme='swiss'] a:hover { color: var(--accent); }

[data-theme='swiss'] .rule,
[data-theme='swiss'] .rule-double { border-top: 2px solid #141414; }
[data-theme='swiss'] .rule-double::after { border-top: 2px solid #141414; top: 4px; }

[data-theme='swiss'] .portrait {
  border-radius: 0;
  border: none;
  filter: none;
}

/* ---------- vapor: aurora haze, horizon grid, holo type ---------- */

[data-theme='vapor'] body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(42vw 34vh at 18% 12%, rgba(244, 114, 182, 0.16), transparent 70%),
    radial-gradient(46vw 36vh at 84% 18%, rgba(103, 232, 249, 0.13), transparent 70%),
    radial-gradient(52vw 42vh at 55% 88%, rgba(167, 139, 250, 0.15), transparent 70%);
  animation: aurora 46s ease-in-out infinite alternate;
}
@keyframes aurora {
  to { filter: hue-rotate(28deg); }
}
@media (prefers-reduced-motion: reduce) {
  [data-theme='vapor'] body::before,
  [data-theme='dawn'] body::before,
  [data-theme='matins'] body::before,
  [data-theme='lauds'] body::before,
  [data-theme='vespers'] body::before,
  [data-theme='compline'] body::before,
  [data-theme='prism'] body::before,
  [data-theme='prism'] h1 { animation: none; }
}

/* the horizon grid, kept at a whisper */
[data-theme='vapor'] body::after {
  content: '';
  position: fixed;
  left: -20%;
  right: -20%;
  bottom: 0;
  height: 36vh;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(244, 114, 182, 0.5) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, rgba(244, 114, 182, 0.5) 0 1px, transparent 1px 44px);
  transform: perspective(420px) rotateX(58deg);
  transform-origin: 50% 100%;
  opacity: 0.14;
  -webkit-mask-image: linear-gradient(to top, black 30%, transparent 100%);
  mask-image: linear-gradient(to top, black 30%, transparent 100%);
}

[data-theme='vapor'] h1 {
  background: linear-gradient(100deg, #f472b6 10%, #c4b5fd 48%, #67e8f9 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 14px rgba(244, 114, 182, 0.25));
}

[data-theme='vapor'] h2 { color: var(--accent-2); }

[data-theme='vapor'] a:hover { color: var(--accent); }

[data-theme='vapor'] .rule,
[data-theme='vapor'] .rule-double {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244, 114, 182, 0.55), rgba(103, 232, 249, 0.55), transparent);
}
[data-theme='vapor'] .rule-double::after {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(103, 232, 249, 0.35), rgba(244, 114, 182, 0.35), transparent);
}

[data-theme='vapor'] .portrait {
  border: 1px solid rgba(244, 114, 182, 0.45);
  border-radius: 12px;
  filter: saturate(1.15);
  box-shadow:
    0 0 22px -6px rgba(244, 114, 182, 0.55),
    0 0 34px -10px rgba(103, 232, 249, 0.45);
}

[data-theme='vapor'] .project h3 { font-weight: 420; }

/* ---------- dawn: a sun rises over the gradient sky ---------- */

[data-theme='dawn'] body {
  /* richer sky: peach → blush → lilac → cool blue */
  background: linear-gradient(180deg, #f7dcc2 0%, #f2d7cf 30%, #e7dbe4 58%, #d9e6f4 100%) fixed;
}

/* the sun itself — a warm glow low on the horizon that slowly kindles */
[data-theme='dawn'] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(145% 78% at 80% 3%, rgba(255, 209, 152, 0.95), rgba(255, 209, 152, 0) 44%),
    radial-gradient(42% 26% at 80% 3%, rgba(255, 171, 112, 0.6), transparent 62%);
  animation: dawn-rise 20s ease-in-out infinite alternate;
}

@keyframes dawn-rise {
  from { opacity: 0.68; transform: translateY(7px); }
  to   { opacity: 1;    transform: translateY(0); }
}

[data-theme='dawn'] h1 {
  background: linear-gradient(110deg, #b85c38, #c96f4a 45%, #7d89b0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

[data-theme='dawn'] h2 { color: var(--accent); }

[data-theme='dawn'] .portrait {
  /* caught in the morning light */
  filter: saturate(1.08) sepia(0.14) brightness(1.03);
  border-radius: 10px;
  box-shadow:
    0 10px 30px -14px rgba(201, 111, 74, 0.5),
    0 0 34px -6px rgba(255, 196, 140, 0.55);
}

[data-theme='dawn'] .rule,
[data-theme='dawn'] .rule-double { border-top-color: rgba(58, 61, 82, 0.2); }

/* ---------- matins: a scriptorium at first light ---------- */

[data-theme='matins'] body {
  font-size: 1.19rem;
  /* parchment warmed by the sunrise, cooling toward the foot of the page */
  background: linear-gradient(180deg, #f7e2ba 0%, #f4e3c6 38%, #ece2d2 72%, #e0e2e8 100%) fixed;
}

/* morning light falling across the desk */
[data-theme='matins'] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(140% 75% at 78% 2%, rgba(255, 214, 140, 0.85), rgba(255, 214, 140, 0) 46%),
    radial-gradient(40% 24% at 78% 2%, rgba(255, 178, 102, 0.5), transparent 64%);
  animation: dawn-rise 20s ease-in-out infinite alternate;
}

[data-theme='matins'] section p {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

[data-theme='matins'] h1 {
  font-weight: 500;
  font-size: clamp(2.1rem, 5vw, 2.8rem);
  background: linear-gradient(105deg, #9e2b1e 5%, #c96f4a 48%, #a87a2c 95%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

[data-theme='matins'] h2 { color: var(--accent); }

[data-theme='matins'] .project h3 {
  font-weight: 500;
  font-size: 1.4rem;
}

/* rubricated versal, kindled by the light */
[data-theme='matins'] #about > p:first-of-type::first-letter {
  float: left;
  font-size: 3.1em;
  line-height: 0.82;
  padding: 0.06em 0.12em 0 0;
  color: var(--accent);
  font-weight: 500;
}

[data-theme='matins'] .rule {
  border: 0;
  text-align: center;
}
[data-theme='matins'] .rule::after {
  content: '✶';
  color: #a87a2c;
  font-size: 1rem;
}

[data-theme='matins'] .portrait {
  filter: sepia(0.28) saturate(0.95) brightness(1.03);
  border-radius: 4px;
  border: 1px solid rgba(63, 47, 30, 0.25);
  box-shadow:
    0 10px 26px -14px rgba(172, 61, 36, 0.45),
    0 0 30px -6px rgba(255, 205, 130, 0.6);
}

/* ---------- lauds: the palest hour, one gold thread ---------- */

[data-theme='lauds'] body {
  font-size: 1.19rem;
  /* night draining out of the sky, faint warmth at the top edge */
  background: linear-gradient(180deg, #eceade 0%, #e8e9ec 30%, #e5e8ef 70%, #e0e4ed 100%) fixed;
}

/* the promise of light, still below the horizon */
[data-theme='lauds'] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(64% 16% at 50% -5%, rgba(217, 180, 94, 0.32), transparent 72%);
  animation: dawn-rise 24s ease-in-out infinite alternate;
}

[data-theme='lauds'] section p {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

[data-theme='lauds'] h1 {
  font-weight: 500;
  font-size: clamp(2rem, 4.8vw, 2.6rem);
}

/* the first light: the masthead rule becomes a gold horizon */
[data-theme='lauds'] .contact-row {
  border-top: 1px solid;
  border-image: linear-gradient(90deg, #b08d3e, #ddba62 50%, rgba(176, 141, 62, 0.15)) 1;
}

[data-theme='lauds'] h2 { color: var(--accent); }

[data-theme='lauds'] .project h3 { font-weight: 500; font-size: 1.38rem; }

[data-theme='lauds'] .portrait {
  filter: grayscale(0.35) brightness(1.02);
  border-radius: 4px;
  border: 1px solid var(--rule);
  box-shadow: 0 10px 24px -16px rgba(52, 59, 77, 0.5);
}

/* ---------- vespers: dusk scriptorium, ember light ---------- */

[data-theme='vespers'] body {
  font-size: 1.19rem;
  /* sunset at the head of the page, night rising from the foot */
  background: linear-gradient(180deg, #432a24 0%, #362220 38%, #2a1c20 72%, #201822 100%) fixed;
}

[data-theme='vespers'] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(130% 62% at 78% 0%, rgba(223, 161, 89, 0.34), rgba(223, 161, 89, 0) 52%),
    radial-gradient(46% 24% at 78% 0%, rgba(199, 94, 74, 0.3), transparent 66%);
  animation: dawn-rise 22s ease-in-out infinite alternate;
}

[data-theme='vespers'] section p {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

[data-theme='vespers'] h1 {
  font-weight: 500;
  font-size: clamp(2.1rem, 5vw, 2.8rem);
  background: linear-gradient(105deg, #e8b96a 5%, #d1764c 50%, #9b6b96 95%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

[data-theme='vespers'] h2 { color: var(--accent); }

[data-theme='vespers'] .project h3 { font-weight: 500; font-size: 1.4rem; }

/* candle-gold versal */
[data-theme='vespers'] #about > p:first-of-type::first-letter {
  float: left;
  font-size: 3.1em;
  line-height: 0.82;
  padding: 0.06em 0.12em 0 0;
  color: var(--accent);
  font-weight: 500;
}

[data-theme='vespers'] .portrait {
  filter: sepia(0.3) saturate(0.9) brightness(0.92);
  border-radius: 4px;
  border: 1px solid rgba(236, 223, 201, 0.3);
  box-shadow:
    0 12px 28px -14px rgba(0, 0, 0, 0.6),
    0 0 30px -6px rgba(223, 161, 89, 0.45);
}

/* ---------- compline: a candle over the page ---------- */

[data-theme='compline'] body {
  font-size: 1.19rem;
}

/* the candle: a breathing pool of light centred on the column */
[data-theme='compline'] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(46rem 42rem at 50% 26%, rgba(226, 169, 79, 0.14), transparent 66%);
  animation: dawn-rise 16s ease-in-out infinite alternate;
}

[data-theme='compline'] section p {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

[data-theme='compline'] h1 {
  font-weight: 500;
  font-size: clamp(2rem, 4.8vw, 2.7rem);
  color: var(--accent);
  text-shadow: 0 0 18px rgba(226, 169, 79, 0.3);
}

[data-theme='compline'] h2 { color: var(--accent); }

[data-theme='compline'] .project h3 { font-weight: 500; font-size: 1.38rem; }

[data-theme='compline'] #about > p:first-of-type::first-letter {
  float: left;
  font-size: 3.1em;
  line-height: 0.82;
  padding: 0.06em 0.12em 0 0;
  color: var(--accent);
  font-weight: 500;
}

[data-theme='compline'] .portrait {
  filter: sepia(0.35) saturate(0.85) brightness(0.85);
  border-radius: 4px;
  border: 1px solid rgba(230, 216, 189, 0.25);
  box-shadow: 0 0 34px -8px rgba(226, 169, 79, 0.5);
}

/* ---------- observatory: a star atlas at midnight ---------- */

[data-theme='observatory'] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 42%, rgba(223, 230, 244, 0.05) 52%, transparent 62%),
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.35) 100%);
}

[data-theme='observatory'] h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-variant: small-caps;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent);
}

[data-theme='observatory'] h2 {
  color: var(--accent);
  font-variant: small-caps;
  letter-spacing: 0.08em;
}

[data-theme='observatory'] .project h3 {
  font-variant: small-caps;
  font-weight: 500;
  letter-spacing: 0.04em;
}

[data-theme='observatory'] .portrait {
  filter: grayscale(0.5) brightness(0.85) sepia(0.15) hue-rotate(180deg);
  border: 1px solid rgba(232, 197, 106, 0.4);
  border-radius: 3px;
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.7);
}

/* ---------- prism: refracted light on a white page ---------- */

[data-theme='prism'] body { font-size: 1.19rem; }

/* a spectrum cast through glass, drifting very slowly */
[data-theme='prism'] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    118deg,
    transparent 52%,
    rgba(214, 106, 142, 0.07) 60%,
    rgba(222, 170, 92, 0.07) 66%,
    rgba(148, 200, 158, 0.07) 72%,
    rgba(120, 170, 220, 0.08) 78%,
    rgba(150, 120, 214, 0.07) 84%,
    transparent 92%
  );
  animation: prism-drift 46s ease-in-out infinite alternate;
}

@keyframes prism-drift {
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(50deg); }
}

[data-theme='prism'] section p {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* the name catches the spectrum */
[data-theme='prism'] h1 {
  font-weight: 500;
  font-size: clamp(2.1rem, 5vw, 2.8rem);
  background: linear-gradient(100deg, #b25577 0%, #a8762e 30%, #4e8a62 55%, #4a72b8 78%, #7b5cc4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: prism-drift 30s ease-in-out infinite alternate;
}

[data-theme='prism'] h2 { color: var(--accent); }

[data-theme='prism'] .project h3 { font-weight: 500; font-size: 1.38rem; }

[data-theme='prism'] .portrait {
  border-radius: 6px;
  border: 1px solid var(--rule);
  box-shadow:
    -8px 10px 24px -16px rgba(214, 106, 142, 0.45),
    8px 10px 24px -16px rgba(120, 170, 220, 0.5);
}

/* ---------- endpaper: marbled pastels under scholarly type ---------- */

[data-theme='endpaper'] body {
  font-size: 1.26rem;
  line-height: 1.62;
  background-image:
    radial-gradient(34rem 26rem at 12% 6%, rgba(228, 160, 190, 0.2), transparent 62%),
    radial-gradient(30rem 24rem at 88% 12%, rgba(158, 205, 186, 0.2), transparent 60%),
    radial-gradient(36rem 30rem at 78% 86%, rgba(172, 160, 220, 0.18), transparent 62%),
    radial-gradient(26rem 22rem at 18% 88%, rgba(238, 206, 148, 0.18), transparent 60%),
    radial-gradient(20rem 18rem at 50% 45%, rgba(228, 160, 190, 0.08), transparent 65%);
  background-attachment: fixed;
}

[data-theme='endpaper'] h1 {
  font-weight: 500;
  font-size: clamp(2.2rem, 5.2vw, 3rem);
}

[data-theme='endpaper'] h2 { color: var(--accent); }

[data-theme='endpaper'] .project h3 {
  font-weight: 600;
  font-size: 1.5rem;
}

[data-theme='endpaper'] .portrait {
  filter: saturate(1.08);
  border-radius: 10px;
  border: 1px solid var(--rule);
  box-shadow: 0 10px 26px -16px rgba(146, 73, 107, 0.45);
}

[data-theme='endpaper'] .seeking { font-size: 1.15rem; }

/* ---------- atelier: rose–lilac wash, high-contrast serif ---------- */

[data-theme='atelier'] body {
  font-size: 1.22rem;
  line-height: 1.6;
  background: linear-gradient(165deg, #f4efe7 0%, #efe8dd 100%) fixed;
}

[data-theme='atelier'] h1 {
  font-weight: 600;
  font-size: clamp(2.2rem, 5.2vw, 2.9rem);
  letter-spacing: 0;
}

[data-theme='atelier'] h2 { color: var(--accent); }

[data-theme='atelier'] .project h3 {
  font-weight: 600;
  font-size: 1.42rem;
}

[data-theme='atelier'] .rule {
  border: 0;
  text-align: center;
}
[data-theme='atelier'] .rule::after {
  content: '◆';
  color: var(--muted);
  opacity: 0.5;
  font-size: 0.6rem;
}

[data-theme='atelier'] .portrait {
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: 0 10px 24px -16px rgba(47, 43, 48, 0.5);
}

[data-theme='atelier'] .seeking { font-size: 1.12rem; }

/* ---------- atlas: graticule, small-caps headings ---------- */

[data-theme='atlas'] body {
  background-image:
    repeating-linear-gradient(0deg, rgba(67, 53, 29, 0.07) 0 1px, transparent 1px 36px),
    repeating-linear-gradient(90deg, rgba(67, 53, 29, 0.07) 0 1px, transparent 1px 36px);
  background-attachment: fixed;
}

[data-theme='atlas'] h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-variant: small-caps;
  font-weight: 600;
  letter-spacing: 0.05em;
}

[data-theme='atlas'] .project h3 {
  font-variant: small-caps;
  letter-spacing: 0.03em;
}

[data-theme='atlas'] h2 { color: var(--accent); }

[data-theme='atlas'] .rule,
[data-theme='atlas'] .rule-double { border-top-style: dashed; }
[data-theme='atlas'] .rule-double::after { border-top-style: dashed; }
[data-theme='atlas'] .rule {
  border: 0;
  text-align: center;
}
[data-theme='atlas'] .rule::after {
  content: '✧';
  color: var(--accent);
  opacity: 0.7;
}

[data-theme='atlas'] .portrait {
  filter: sepia(0.55) saturate(0.85) contrast(1.04);
  border: 1px solid var(--muted);
  border-radius: 2px;
}

/* ---------- opera: stage light, gilded frame ---------- */

[data-theme='opera'] body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(55vw 45vh at 50% -6%, rgba(212, 175, 55, 0.13), transparent 70%),
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.45) 100%);
}

[data-theme='opera'] h1,
[data-theme='opera'] .project h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
}
[data-theme='opera'] h1 {
  font-size: clamp(2.2rem, 5.2vw, 2.9rem);
  background: linear-gradient(100deg, #d4af37 15%, #f5e6b3 50%, #b8860b 85%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
[data-theme='opera'] .project h3 { font-size: 1.5rem; }

[data-theme='opera'] h2 {
  color: var(--accent);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: 1.4rem;
}

[data-theme='opera'] a:hover { color: var(--accent); }

[data-theme='opera'] .portrait {
  border: 1px solid rgba(212, 175, 55, 0.6);
  border-radius: 4px;
  box-shadow:
    0 0 0 4px rgba(212, 175, 55, 0.1),
    0 0 0 5px rgba(212, 175, 55, 0.35),
    0 14px 30px -14px rgba(0, 0, 0, 0.7);
}

/* ---------- brutalist: no manners ---------- */

[data-theme='brutalist'] body {
  font-size: 1.06rem;
  line-height: 1.5;
}

[data-theme='brutalist'] h1 {
  font-family: 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: clamp(1.8rem, 4.6vw, 2.5rem);
}

[data-theme='brutalist'] h2 {
  color: #000;
  background: #ffe600;
  display: inline-block;
  padding: 0.05em 0.4em;
  font-weight: 700;
  font-size: 1.2rem;
}

[data-theme='brutalist'] .project h3 {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 3px;
}

[data-theme='brutalist'] a {
  color: #0000ee;
  text-decoration-color: #0000ee;
  text-decoration-thickness: 2px;
}
[data-theme='brutalist'] a:hover {
  background: #ffe600;
  color: #000;
}

[data-theme='brutalist'] .rule,
[data-theme='brutalist'] .rule-double { border-top: 3px solid #000; }
[data-theme='brutalist'] .rule-double::after { border-top: 3px solid #000; top: 5px; }

[data-theme='brutalist'] .portrait {
  border: 3px solid #000;
  border-radius: 0;
  filter: none;
}

[data-theme='brutalist'] .contact-row a,
[data-theme='brutalist'] .project-links a { color: #0000ee; }

/* ---------- bodoni: headline-first editorial ---------- */

[data-theme='bodoni'] h1 {
  font-family: 'Bodoni Moda', 'Didot', 'Playfair Display', serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  font-size: clamp(2.2rem, 5.6vw, 3.2rem);
  line-height: 1.03;
}

[data-theme='bodoni'] .project h3 {
  font-family: 'Bodoni Moda', 'Didot', serif;
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.005em;
}

[data-theme='bodoni'] h2 {
  color: var(--ink);
  font-family: 'Bodoni Moda', 'Didot', serif;
  font-size: 1.05rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

[data-theme='bodoni'] .rule-double { border-top-width: 4px; }
[data-theme='bodoni'] .rule-double::after { top: 6px; }

[data-theme='bodoni'] a:hover { color: var(--accent); }

[data-theme='bodoni'] .portrait {
  filter: grayscale(1) contrast(1.08);
  border: none;
  border-radius: 0;
}

[data-theme='bodoni'] .seeking { font-size: 1.1rem; }

/* ---------- heading variety for quieter themes ---------- */

/* manuscript: versal small caps */
[data-theme='manuscript'] h1 {
  font-variant: small-caps;
  font-weight: 600;
  letter-spacing: 0.045em;
}

/* cyanotype: technical print lettering */
[data-theme='cyanotype'] h1 {
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: clamp(1.4rem, 3.5vw, 1.9rem);
  line-height: 1.3;
}
[data-theme='cyanotype'] .project h3 {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.98rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

/* punchcard: card-printer type */
[data-theme='punchcard'] h1 {
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: clamp(1.45rem, 3.5vw, 1.95rem);
  line-height: 1.3;
}
[data-theme='punchcard'] .project h3 {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.07em;
}

/* dawn: soft italic display over the gradient */
[data-theme='dawn'] h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.4rem, 5.6vw, 3.1rem);
}

/* ---------- marble: classical capitals, bronze ---------- */

[data-theme='marble'] body {
  background-image:
    radial-gradient(90rem 40rem at 15% 8%, rgba(138, 131, 118, 0.07), transparent 60%),
    radial-gradient(70rem 50rem at 88% 78%, rgba(138, 131, 118, 0.06), transparent 55%);
}

[data-theme='marble'] h1 {
  font-family: 'Cinzel', 'Trajan Pro', Georgia, serif;
  font-weight: 500;
  letter-spacing: 0.07em;
  font-size: clamp(1.9rem, 4.6vw, 2.5rem);
}

[data-theme='marble'] .project h3 {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 500;
  font-size: 1.12rem;
  letter-spacing: 0.05em;
}

[data-theme='marble'] h2 {
  color: var(--accent);
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.02rem;
  letter-spacing: 0.12em;
}

[data-theme='marble'] .portrait {
  filter: grayscale(0.25) sepia(0.08);
  border-radius: 0;
  border: 1px solid var(--rule);
  box-shadow: 0 14px 24px -18px rgba(42, 39, 35, 0.55);
}

/* ---------- sumi: ink wash, vermilion seal ---------- */

[data-theme='sumi'] h1 {
  font-weight: 400;
  letter-spacing: 0.02em;
}

[data-theme='sumi'] h2 {
  color: #f7f4ec;
  background: var(--accent);
  display: inline-block;
  padding: 0.32em 0.65em;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

[data-theme='sumi'] .rule {
  border: 0;
  text-align: center;
  line-height: 0;
}
[data-theme='sumi'] .rule::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--accent);
  border-radius: 1px;
}

[data-theme='sumi'] .project h3 { font-weight: 500; }

[data-theme='sumi'] .portrait {
  filter: grayscale(0.2) contrast(1.03);
  border-radius: 3px;
  border: 1px solid var(--rule);
}

/* ---------- pinstripe: chalk-stripe wool ---------- */

[data-theme='pinstripe'] body {
  background-image: repeating-linear-gradient(
    90deg,
    rgba(236, 231, 219, 0.05) 0 1px,
    transparent 1px 9px
  );
}

[data-theme='pinstripe'] h1 {
  font-variant: small-caps;
  font-weight: 500;
  letter-spacing: 0.05em;
}

[data-theme='pinstripe'] .project h3 {
  font-variant: small-caps;
  font-weight: 500;
  letter-spacing: 0.03em;
}

[data-theme='pinstripe'] h2 { color: var(--accent); }

[data-theme='pinstripe'] .portrait {
  filter: saturate(0.8) contrast(1.04);
  border: 1px solid var(--rule);
  border-radius: 4px;
}

/* ---------- xray: the portrait develops as a negative ---------- */

[data-theme='xray'] .portrait {
  filter: invert(1) grayscale(1) contrast(1.15) brightness(1.05);
  border-radius: 2px;
  border: 1px solid var(--rule);
}

[data-theme='xray'] h1 {
  font-weight: 400;
  text-shadow: 0 0 14px rgba(98, 224, 192, 0.25);
}

[data-theme='xray'] h2 { color: var(--accent); }

[data-theme='xray'] .mono { letter-spacing: 0.18em; }

[data-theme='xray'] body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.45) 100%);
}

[data-theme='xray'] .rule,
[data-theme='xray'] .rule-double { border-top-style: dashed; }
[data-theme='xray'] .rule-double::after { border-top-style: dashed; }

/* ---------- synapse divider (hand-drawn neuron) ---------- */

.synapse {
  display: block;
  width: 100%;
  max-width: 34rem;
  margin: clamp(1.6rem, 4vh, 2.4rem) auto;
  padding: 0;
  background: none;
  border: 0;
  color: var(--muted);
  opacity: 0.8;
  cursor: pointer;
  transition: color 0.3s, opacity 0.3s;
}
.synapse:hover { color: var(--ink); opacity: 1; }
.synapse:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
  border-radius: 8px;
}
.synapse svg { display: block; width: 100%; height: auto; }
.synapse .impulse { fill: var(--accent); }

/* confetti fired from the axon terminals */
.confetti {
  position: fixed;
  top: 0;
  left: 0;
  width: 7px;
  height: 4px;
  pointer-events: none;
  z-index: 3000;
  will-change: transform, opacity;
}

/* ---------- small screens ---------- */

@media (max-width: 560px) {
  .masthead-grid {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  .portrait {
    order: -1;
    width: 108px;
  }
}

/* dim the graph on small screens so text stays first */
@media (max-width: 700px) {
  #graph { opacity: 0.5; }
}

/* ---------- guards ---------- */

/* The QuaziNote heading must survive every theme's h3 restyling —
   several themes set .project h3 font-family at equal specificity,
   hence the !important. Regular cut: Condensed reads too small here. */
.project h3.quazi {
  font-family: 'QuaziNote', serif !important;
  font-weight: 400 !important;
  text-transform: none !important;
  font-variant: normal !important;
  font-style: normal !important;
  letter-spacing: 0.02em !important;
}

/* In-app webviews (Telegram etc.) jitter with fixed backgrounds and
   animated full-screen filters; hand them the calm versions. */
@media (hover: none) {
  [data-theme='dawn'] body,
  [data-theme='matins'] body,
  [data-theme='lauds'] body,
  [data-theme='vespers'] body,
  [data-theme='endpaper'] body,
  [data-theme='atelier'] body,
  [data-theme='notebook'] body,
  [data-theme='atlas'] body {
    background-attachment: scroll;
  }
  [data-theme='vapor'] body::before,
  [data-theme='dawn'] body::before,
  [data-theme='matins'] body::before,
  [data-theme='lauds'] body::before,
  [data-theme='vespers'] body::before,
  [data-theme='compline'] body::before,
  [data-theme='prism'] body::before,
  [data-theme='prism'] h1 { animation: none; }
}

/* ---------- print ---------- */

@media print {
  body { background: #fff; color: #000; max-width: none; }
  .theme-picker { display: none; }
  a { color: #000; }
}