/* Clear sky blue, apricot gold, and rose with claret and ivory. Load after the page styles.
   Shared palette and navigation icons. Artwork and photography retain their pixels. */
:root {
  --scene-blue: #acd0e3;
  --scene-yellow: #f2d18a;
  --scene-pink: #e8b5bb;
  --folder-01: #ebc4c8;
  --folder-02: #f0d29a;
  --folder-03: #bdd6e2;
  --folder-ink-01: #633643;
  --folder-ink-02: #533c30;
  --folder-ink-03: #27485a;
  --paper: #fff9f0;
  --ink: #263b47;
  --accent: #6b3344;
  --blue: var(--accent);
  --muted: #66615e;
  --line: #d9c9bb;
  --hero: var(--scene-blue);
  --surface-about: #faf1df;
  --surface-photo: #f1d9d6;
  --surface-contact: #ddeacf;
  --surface-game: #fcf3df;
  --surface-footer: #5b3040;
  --surface-hover: #f7eadb;
  --plum: #855078;
  --copy-success: #3c644b;
  --copy-success-surface: #e5edda;
}

body { color: var(--ink); background-color: var(--paper); }
::selection { color: var(--paper); background: var(--accent); }
:is(a, button, input, figure, [tabindex]):focus-visible { outline-color: var(--accent); }
.skip-link { color: var(--paper); background-color: var(--ink); }
.site-header.scrolled { background-color: #fff9f0f2; box-shadow: 0 1px 0 #263b471a; }
.mobile-menu { color: var(--ink); background-color: var(--paper); border-color: #263b4733; box-shadow: 0 12px 30px #263b4712; }
.motion-toggle { border-color: #263b4755; }
.contact-link, .intro-curtain, .hero-wipe { background-color: var(--paper); }
.wordmark i, .work-intro h2 span, .hero-transition-title { color: var(--accent); }
.hero-line path { stroke: #6b33447a; }
.hero-switcher > button { color: var(--ink); background-color: var(--paper); box-shadow: 1px 3px 0 #263b4722; }
.hero-switcher > #theme-caption { color: var(--paper); background-color: var(--accent); box-shadow: 3px 4px 0 #51233466; }
.edition { color: #3d5360; }

/* The three folder colours are consumed through data.js --project variables. */
.work-panel::before { box-shadow: 0 -1px 0 #263b472a; }
.work-deliverables span + span { border-color: #263b474a; }
.project-link { border-bottom-color: #263b4766; }
.work-stepper { color: var(--ink); }
.about-section { color: var(--ink); background-color: var(--surface-about); }
.about-interests { color: var(--accent); }
.about-copy > .preview-footnote { color: var(--muted); }
.photo-wall { color: var(--ink); background-color: var(--surface-photo); }
.photo-print { background-color: var(--paper); box-shadow: 2px 8px 15px #433b3826; }
.photo-print:hover, .photo-print:focus-visible { box-shadow: 5px 12px 25px #433b3838; }
.photo-print.dragging { box-shadow: 7px 20px 28px #433b3842; }
.photo-print figcaption { color: #5b5450; }
.photo-dialog, .dialog-close { color: var(--ink); background-color: var(--paper); }
.photo-dialog::backdrop { background-color: #263b47dc; }
.dialog-close { box-shadow: 0 0 10px #263b4720; }
.contact-section { color: var(--ink); background-color: var(--surface-contact); }
.contact-main h2 span { color: var(--accent); }
.contact-row { border-color: #6b33444d; }
.contact-copy:hover { background-color: #fff9f080; }
.contact-copy.is-copied { color: var(--copy-success); background-color: var(--copy-success-surface); }
.contact-copy-feedback { color: var(--copy-success); }
.site-footer { color: var(--paper); background-color: var(--surface-footer); border-color: #be91a03b; }

/* Keep the hand-drawn tree and character colours intact. */
#petal-game {
  color: var(--ink);
  background: linear-gradient(to bottom, var(--surface-contact) 0, var(--surface-game) 28%, var(--surface-game) 100%);
}
#petal-game .catch-heading h2 { text-shadow: 0 2px 20px var(--surface-game); }
#petal-game .catch-heading h2 em { color: var(--plum); }
#petal-game .catch-word { color: #644459; background-color: var(--paper); border-color: #855078; box-shadow: 3px 4px 0 #855078; }
#petal-game .game-hud span { color: var(--ink); background-color: var(--paper); border-color: #a27b60; }
#petal-game .pill { color: var(--ink); background-color: var(--paper); }
#petal-game .pill.yellow { color: #533c30; background-color: #f0d29a; border-color: #a98448; box-shadow: 3px 4px 0 #a98448; }
#petal-game button:focus-visible, #petal-game [tabindex]:focus-visible { outline-color: var(--accent); }
@media (max-width: 700px) {
  #petal-game .catch-heading { background-color: var(--surface-game); }
}

/* Draw navigation arrows consistently across desktop and mobile fonts. */
.ui-arrow { display: inline-block; width: 1.15em; height: 1.15em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.15em; }
.hero-switcher > button .ui-arrow { width: 20px; height: 20px; }
.photo-instruction .ui-arrow { width: 1em; height: 1em; vertical-align: 0; }