/* ============================================================
   THE LIVING CHRONICLE
   A Studio Ghibli & Japanese craft (Mingei / Wabi-sabi) skin
   for Samin Yasar's field chronicle.

   Loaded LAST so it re-tunes the legacy dark UI into warm,
   hand-made paper. Everything here is token driven: the old
   --lc-* variables are re-aliased so the existing navigation
   stylesheet keeps working without edits.
   ============================================================ */

/* ------------------------------------------------------------
   1. THE PALETTE — gouache pigments, five families
   ------------------------------------------------------------ */
:root {
     /* paper & ink */
     --art-canvas: #FAF7EE;
     --art-canvas-warm: #F2ECE0;
     --art-ink: #1E242B;
     --art-ink-soft: #55606D;

     /* pigments */
     --art-foliage: #2D5A43;
     --art-foliage-light: #609374;
     --art-terracotta: #A64726;
     --art-terracotta-warm: #E07A5F;
     --art-sky: #E5EFEA;

     /* night */
     --art-dark-base: #12171E;
     --art-dark-glow: #1B2430;

     /* derived surfaces */
     --art-surface: #FFFDF7;
     --art-line: rgba(30, 36, 43, 0.16);
     --art-line-ink: rgba(30, 36, 43, 0.72);
     --art-line-strong: var(--art-ink);
     --art-wash-foliage: rgba(45, 90, 67, 0.09);
     --art-wash-terracotta: rgba(200, 90, 50, 0.10);
     --art-tape: rgba(226, 209, 170, 0.72);

     /* hand-made depth: offset ink shadow, never a blur halo */
     --art-drop: 3px 5px 0 rgba(30, 36, 43, 0.10);
     --art-drop-press: 3px 5px 0 rgba(30, 36, 43, 0.85);
     --art-lift: 0 14px 34px -22px rgba(30, 36, 43, 0.55);

     --art-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
     --art-ease-soft: cubic-bezier(0.22, 1, 0.36, 1);

     /* typography */
     --font-heading: 'Playfair Display', 'Playfair Display Fallback', Georgia, serif;
     --font-body: 'Inter', 'Inter Fallback', system-ui, -apple-system, sans-serif;
     --font-hand: 'IBM Plex Mono', 'IBM Plex Mono Fallback', monospace;

     /* legacy aliases — keep styles.css / nav-experience.css coherent */
     --primary: var(--art-foliage);
     --secondary: var(--art-foliage-light);
     --accent: var(--art-terracotta);
     --accent-bright: var(--art-terracotta-warm);
     --dark: var(--art-canvas);
     --dark-lighter: var(--art-canvas-warm);
     --light: var(--art-ink);
     --gray: var(--art-ink-soft);
     --gray-light: var(--art-ink-soft);
     --art-on-accent: var(--art-canvas);
     --art-button-hover: color-mix(in srgb, var(--art-foliage) 88%, var(--art-ink));
     --tab-sun: #F6C977;
     --tab-sun-ink: #3B402C;

     --lc-bg: var(--art-canvas);
     --lc-bg-alt: var(--art-canvas-warm);
     --lc-surface: rgba(255, 253, 247, 0.82);
     --lc-surface-hi: rgba(255, 253, 247, 0.94);
     --lc-surface-card: var(--art-surface);
     --lc-cyan: var(--art-foliage);
     --lc-cyan-bright: var(--art-foliage-light);
     --lc-cyan-dim: var(--art-wash-foliage);
     --lc-amber: var(--art-terracotta);
     --lc-text-hi: var(--art-ink);
     --lc-text-md: var(--art-ink-soft);
     --lc-text-lo: rgba(85, 96, 109, 0.72);
     --lc-border: rgba(30, 36, 43, 0.16);
     --lc-border-hi: rgba(200, 90, 50, 0.55);
     --lc-trace-glow: rgba(200, 90, 50, 0.28);
     --lc-mono: var(--font-hand);
}

/* Totoro night: moonlight pooling at the top of the field */
[data-theme="dark"] {
     --art-canvas: var(--art-dark-base);
     --art-canvas-warm: #1A212B;
     --art-ink: #E8EDF2;
     --art-ink-soft: #9AA8B6;
     --art-foliage: #7FB89A;
     --art-foliage-light: #A7D4BC;
     --art-terracotta: #E8895F;
     --art-terracotta-warm: #F2A883;
     --art-sky: #23303D;
     --art-surface: #1A212B;
     --art-line: rgba(232, 237, 242, 0.16);
     --art-line-ink: rgba(232, 237, 242, 0.62);
     --art-wash-foliage: rgba(127, 184, 154, 0.10);
     --art-wash-terracotta: rgba(232, 137, 95, 0.12);
     --art-tape: rgba(120, 134, 120, 0.32);
     --art-drop: 3px 5px 0 rgba(0, 0, 0, 0.35);
     --art-drop-press: 3px 5px 0 rgba(0, 0, 0, 0.75);
     --art-lift: 0 18px 40px -24px rgba(0, 0, 0, 0.9);

     --lc-surface: rgba(26, 33, 43, 0.78);
     --lc-surface-hi: rgba(30, 39, 50, 0.92);
     --lc-surface-card: #1A212B;
     --lc-border: rgba(232, 237, 242, 0.14);
     --lc-border-hi: rgba(232, 137, 95, 0.5);
     --lc-trace-glow: rgba(232, 137, 95, 0.3);
     --lc-text-lo: rgba(154, 168, 182, 0.7);
}

/* ------------------------------------------------------------
   2. THE BREATHING CANVAS — paper, fibres, morning sky
   ------------------------------------------------------------ */
html {
     background: var(--art-canvas);
}

body {
     background: var(--art-canvas);
     color: var(--art-ink);
     font-family: var(--font-body);
     line-height: 1.7;
     transition: background-color 0.6s var(--art-ease-soft), color 0.6s var(--art-ease-soft);
}

[data-theme="dark"] body {
     background: radial-gradient(circle at 50% -10%, var(--art-dark-glow) 0%, var(--art-dark-base) 78%) fixed;
}

/* Procedural fibrous washi. feTurbulence, ~1.4 KB, zero requests. */
body::after {
     content: "";
     position: fixed;
     inset: 0;
     z-index: 9998;
     pointer-events: none;
     opacity: 0.035;
     mix-blend-mode: multiply;
     background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23p)'/></svg>");
     background-size: 220px 220px;
}

[data-theme="dark"] body::after {
     mix-blend-mode: screen;
     opacity: 0.045;
}

p {
     color: var(--art-ink-soft);
     text-shadow: none;
}

a {
     color: var(--art-foliage);
}

a:hover {
     color: var(--art-terracotta);
}

::selection {
     background: var(--art-wash-terracotta);
     color: var(--art-ink);
}

:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
     outline: 2px dashed var(--art-terracotta);
     outline-offset: 3px;
}

/* Old cyberpunk layers, retired */
#canvas-background,
#matrix-rain-canvas {
     display: none !important;
}

/* ------------------------------------------------------------
   3. TYPOGRAPHY — a naturalist's hand
   ------------------------------------------------------------ */
h1,
h2,
h3,
.section-title,
.logo,
.hero h1,
.cert-title,
.education-level,
.footer-logo,
.footer-col-title {
     font-family: var(--font-heading);
     color: var(--art-ink);
     letter-spacing: -0.015em;
}

/* the old neon gradient lettering is repainted as plain ink */
.hero h1,
.section-title,
.logo,
.footer-logo,
.stat-card-number,
.stat-card-icon {
     background: none !important;
     background-clip: border-box !important;
     -webkit-background-clip: border-box !important;
     -webkit-text-fill-color: currentColor !important;
     text-shadow: none !important;
}

.hero h1 {
     font-weight: 700;
     line-height: 1.12;
     letter-spacing: -0.03em;
     text-wrap: balance;
     font-size: clamp(2.3rem, 6.4vw, 4.1rem);
     margin-bottom: 1.35rem;
}

.section-title {
     position: relative;
     display: inline-block;
     font-size: clamp(1.9rem, 4.4vw, 2.9rem);
     text-wrap: balance;
     margin-bottom: 0.15rem !important;
}

/* the ink underline is drawn by an inline SVG (see scripts.js) */
.section-title::after {
     display: none !important;
}

.ink-underline {
     display: block;
     width: min(240px, 78%);
     height: 14px;
     margin: 0.15rem 0 2.4rem;
     overflow: visible;
     color: var(--art-terracotta);
}

.ink-underline.is-centered {
     margin-inline: auto;
}

.ink-underline.is-right {
     margin-left: auto;
}

.ink-underline path {
     fill: none;
     stroke: currentColor;
     stroke-width: 3;
     stroke-linecap: round;
     stroke-dasharray: 320;
     stroke-dashoffset: 320;
     opacity: 0.85;
}

.ink-underline.drawn path {
     transition: stroke-dashoffset 1.1s var(--art-ease-soft);
     stroke-dashoffset: 0;
}

/* small hand-lettered labels */
.chronicle-label {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     font-family: var(--font-hand);
     font-size: 0.72rem;
     letter-spacing: 0.22em;
     text-transform: uppercase;
     color: var(--art-ink-soft);
}

.chronicle-label::before {
     content: "";
     width: 26px;
     height: 1.5px;
     background: var(--art-terracotta);
}

/* ------------------------------------------------------------
   4. THE HAND-DRAWN LINE — washi contours & pen pressure
   ------------------------------------------------------------ */
.washi-card-1 {
     border-radius: 255px 18px 225px 15px / 15px 225px 18px 255px;
}

.washi-card-2 {
     border-radius: 18px 240px 14px 230px / 240px 16px 250px 19px;
}

.washi-card-3 {
     border-radius: 235px 12px 245px 20px / 18px 240px 14px 220px;
}

.washi-card-4 {
     border-radius: 15px 225px 20px 245px / 230px 14px 240px 16px;
}

.washi-interactive {
     position: relative;
     border: 1.5px solid var(--art-line-ink);
     background: var(--art-surface);
     box-shadow: var(--art-drop);
     transition: transform 0.25s var(--art-ease),
          box-shadow 0.25s var(--art-ease),
          background-color 0.25s var(--art-ease-soft);
     will-change: transform;
}

.washi-interactive:hover,
.washi-interactive:focus-visible {
     /* pen pressed harder into the paper — no reflow, only compositing */
     box-shadow: 0 0 0 0.8px var(--art-line-ink), var(--art-drop-press);
     transform: translateY(-2px) rotate(-0.5deg);
}

.washi-interactive:active {
     transform: translateY(0) rotate(0deg);
     box-shadow: 1px 2px 0 rgba(30, 36, 43, 0.6);
}

.washi-interactive svg path {
     transition: stroke-width 0.25s var(--art-ease);
}

.washi-interactive:hover svg path {
     stroke-width: 2.2px;
}

/* ------------------------------------------------------------
   5. THE PRELUDE — sprout & watercolour wash
   ------------------------------------------------------------ */
#loading-splash {
     background: radial-gradient(circle at 50% 42%, #FFFDF7 0%, var(--art-canvas-warm) 70%);
     transition: opacity 0.9s var(--art-ease-soft), transform 0.9s var(--art-ease-soft), visibility 0.9s;
}

#loading-splash.hidden {
     transform: translateY(-3%);
}

[data-theme="dark"] #loading-splash {
     background: radial-gradient(circle at 50% 20%, #1B2430 0%, #12171E 80%);
}

/* ------------------------------------------------------------
   6. HEADER — a paper tag pinned to the sky
   ------------------------------------------------------------ */
header#header nav {
     border: 1.5px solid var(--art-line) !important;
     border-radius: 22px 8px 22px 8px / 8px 22px 8px 22px !important;
     background: color-mix(in srgb, var(--art-canvas) 82%, transparent) !important;
     box-shadow: 0 10px 30px -22px rgba(30, 36, 43, 0.6) !important;
}

header#header.scrolled nav {
     background: color-mix(in srgb, var(--art-canvas) 94%, transparent) !important;
     border-color: rgba(200, 90, 50, 0.35) !important;
     box-shadow: 0 16px 40px -26px rgba(30, 36, 43, 0.7) !important;
}

header#header .logo {
     font-family: var(--font-heading) !important;
     font-size: 1.02rem !important;
     letter-spacing: 0 !important;
     font-weight: 700;
     color: var(--art-ink) !important;
     cursor: pointer;
}

header#header .nav-links>li>a {
     font-family: var(--font-body) !important;
     letter-spacing: 0.01em !important;
     text-transform: none !important;
     color: var(--art-ink-soft) !important;
}

header#header .nav-links>li>a:hover,
header#header .nav-links>li>a.is-active {
     color: var(--art-ink) !important;
}

.lc-nav-indicator span,
#lc-scroll-progress span {
     background: var(--art-terracotta) !important;
     box-shadow: none !important;
}

.lc-nav-indicator {
     background: var(--art-wash-foliage) !important;
     border-radius: 14px 6px 14px 6px / 6px 14px 6px 14px !important;
}

.nav-links .submenu,
.mobile-nav,
.search-container,
#accessibility-panel {
     background: var(--art-surface);
     border: 1.5px solid var(--art-line);
     color: var(--art-ink);
     box-shadow: var(--art-lift);
     backdrop-filter: blur(8px);
}

.nav-links .submenu li a,
.mobile-nav-links a {
     color: var(--art-ink-soft);
}

.nav-links .submenu li a:hover,
.mobile-nav-links a:hover {
     color: var(--art-terracotta);
     background: var(--art-wash-terracotta);
}

#lc-theme-toggle svg {
     fill: none !important;
     stroke: currentColor !important;
}

.nav-svg-icon,
.btn-svg-icon,
.social-svg-icon,
.testimonial-nav-svg,
.access-main-svg {
     filter: none;
}

[data-theme="light"] .nav-svg-icon,
[data-theme="light"] .btn-svg-icon,
[data-theme="light"] .social-svg-icon,
[data-theme="light"] .testimonial-nav-svg {
     filter: brightness(0) saturate(100%) invert(13%) sepia(9%) saturate(1043%) hue-rotate(169deg) brightness(94%) contrast(89%);
}

#search-toggle-btn,
.menu-toggle,
#lc-theme-toggle {
     color: var(--art-ink);
     background: transparent;
     border: 1.5px solid var(--art-line);
     border-radius: 14px 6px 14px 6px / 6px 14px 6px 14px;
     min-width: 42px;
     min-height: 42px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: transform 0.25s var(--art-ease), background-color 0.25s var(--art-ease-soft);
}

#search-toggle-btn:hover,
.menu-toggle:hover,
#lc-theme-toggle:hover {
     background: var(--art-wash-foliage);
     transform: rotate(-3deg);
}

#search-toggle-btn svg {
     width: 1.05rem;
     height: 1.05rem;
     fill: none;
     stroke: currentColor;
     stroke-width: 1.8;
     stroke-linecap: round;
}

.hamburger,
.hamburger::before,
.hamburger::after {
     background: var(--art-ink);
}

/* search field */
.search-container #search-box {
     background: var(--art-canvas-warm);
     border: 1.5px solid var(--art-line-ink);
     border-radius: 22px 8px 22px 8px / 8px 22px 8px 22px;
     color: var(--art-ink);
     font-family: var(--font-body);
}

.search-container #search-box::placeholder {
     color: var(--art-ink-soft);
     opacity: 0.7;
}

#search-close-btn {
     color: var(--art-ink);
     background: transparent;
}

.search-result-item.terminal-item {
     background: transparent;
     border-bottom: 1px solid var(--art-line);
     color: var(--art-ink);
}

.search-result-item.terminal-item.focused {
     background: var(--art-wash-foliage);
}

.terminal-prefix {
     color: var(--art-terracotta);
     font-family: var(--font-hand);
}

.search-result-title {
     color: var(--art-ink);
}

.terminal-desc,
.search-hint,
.search-no-results {
     color: var(--art-ink-soft);
}

.search-result-item mark {
     background: var(--art-wash-terracotta);
     color: var(--art-terracotta);
}

/* ------------------------------------------------------------
   7. HERO — sunlit washi with drifting leaves
   ------------------------------------------------------------ */
.hero {
     position: relative;
     background: transparent;
     overflow: hidden;
     isolation: isolate;
}

/* morning sun pooling behind the horizon (overrides the old vignette) */
.hero#home::before {
     content: "";
     position: absolute;
     inset: 0;
     z-index: 1;
     background:
          radial-gradient(120% 70% at 78% 8%, rgba(224, 122, 95, 0.18) 0%, transparent 58%),
          radial-gradient(90% 60% at 12% 92%, var(--art-wash-foliage) 0%, transparent 62%);
     pointer-events: none;
}

[data-theme="dark"] .hero#home::before {
     background:
          radial-gradient(90% 60% at 76% 6%, rgba(226, 232, 240, 0.12) 0%, transparent 60%),
          radial-gradient(90% 60% at 12% 92%, rgba(127, 184, 154, 0.12) 0%, transparent 62%);
}

/* the page fades back to bare paper before the first chapter */
.hero#home::after {
     content: "";
     position: absolute;
     inset: auto 0 0;
     height: 26%;
     z-index: 1;
     pointer-events: none;
     background: linear-gradient(to bottom, transparent, var(--art-canvas));
}

#nature-canvas {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     z-index: 0;
     display: block;
     pointer-events: none;
}

.hero-content {
     position: relative;
     z-index: 2;
}

.hero-avatar {
     border: 2px solid var(--art-line-ink);
     border-radius: 62% 38% 55% 45% / 45% 52% 48% 55%;
     box-shadow: var(--art-drop);
     background: var(--art-canvas-warm);
     transition: transform 0.5s var(--art-ease), border-radius 0.8s var(--art-ease-soft);
}

.hero-avatar:hover {
     transform: rotate(-2deg) scale(1.03);
     border-radius: 45% 55% 42% 58% / 55% 45% 58% 42%;
     box-shadow: var(--art-drop-press);
}

.hero p {
     color: var(--art-ink-soft);
     text-wrap: pretty;
     max-width: 62ch;
     margin-inline: auto;
}

.hero-kicker {
     display: block;
     margin-bottom: 1.1rem;
     font-family: var(--font-hand);
     font-size: 0.74rem;
     letter-spacing: 0.28em;
     text-transform: uppercase;
     color: var(--art-terracotta);
}

.hero-signature {
     margin-top: 2.2rem;
     font-family: var(--font-heading);
     font-style: italic;
     font-size: 0.98rem;
     color: var(--art-ink-soft);
     opacity: 0.85;
}

/* ------------------------------------------------------------
   8. BUTTONS — pressed ink
   ------------------------------------------------------------ */
.btn {
     position: relative;
     font-family: var(--font-body);
     font-weight: 600;
     letter-spacing: 0.01em;
     text-transform: none;
     border: 1.5px solid var(--art-line-ink);
     border-radius: 225px 15px 235px 18px / 18px 230px 14px 240px;
     box-shadow: var(--art-drop);
     transition: transform 0.25s var(--art-ease), box-shadow 0.25s var(--art-ease),
          background-color 0.25s var(--art-ease-soft), color 0.25s var(--art-ease-soft);
}

.btn::before,
.btn::after {
     display: none !important;
}

.btn:hover,
.btn:focus-visible {
     transform: translateY(-2px) rotate(-0.5deg);
     box-shadow: 0 0 0 0.8px var(--art-line-ink), var(--art-drop-press);
}

.btn:active {
     transform: translateY(0);
     box-shadow: 1px 2px 0 rgba(30, 36, 43, 0.6);
}

.btn-primary {
     background: var(--art-foliage);
     color: var(--art-on-accent);
     border-color: var(--art-foliage);
}

.btn-primary:hover,
.btn-primary:focus-visible {
     background: var(--art-button-hover);
     color: var(--art-on-accent);
     border-color: var(--art-button-hover);
}

.btn-secondary {
     background: transparent;
     color: var(--art-ink);
     border-color: var(--art-line-ink);
}

.btn-secondary:hover {
     background: var(--art-wash-foliage);
     color: var(--art-ink);
}

.btn-svg-icon {
     width: 1rem;
     height: 1rem;
}

.btn-primary .btn-svg-icon {
     filter: brightness(0) invert(1);
}

/* ------------------------------------------------------------
   9. SECTIONS & DIVIDERS
   ------------------------------------------------------------ */
section {
     position: relative;
     background: transparent;
}

section[data-board-id]::before {
     content: none !important;
}

.about,
.goals,
.photography {
     background: transparent;
}

/* the hand-inked branch divider replaces the PCB trace */
.circuit-divider {
     color: var(--art-foliage);
     opacity: 0.5;
}

.circuit-divider .circuit-svg {
     height: 42px;
}

.circuit-path {
     stroke-linecap: round;
     stroke-linejoin: round;
}

.about-content {
     max-width: 68ch;
     margin-inline: auto;
     padding: clamp(1.6rem, 4vw, 2.6rem);
     background: var(--art-canvas-warm);
     border: 1.5px solid var(--art-line);
     border-radius: 235px 12px 245px 20px / 18px 240px 14px 220px;
     box-shadow: var(--art-drop);
}

.about-content p {
     white-space: pre-line;
     text-wrap: pretty;
     font-size: 1.02rem;
     line-height: 1.85;
}

.about-content p::first-letter {
     float: left;
     font-family: var(--font-heading);
     font-size: 3.4rem;
     line-height: 0.82;
     padding: 0.22rem 0.6rem 0 0;
     color: var(--art-terracotta);
}

/* ------------------------------------------------------------
   10. CARDS — every one hand-cut differently
   ------------------------------------------------------------ */
.project-card,
.impact-card,
.certification-card,
.goal-card,
.skill-group,
.stat-card,
.education-item,
.publication-card,
.testimonial-slide {
     background: var(--art-surface);
     border: 1.5px solid var(--art-line-ink);
     color: var(--art-ink);
     box-shadow: var(--art-drop);
     transition: transform 0.25s var(--art-ease), box-shadow 0.25s var(--art-ease);
     backdrop-filter: none;
}

.project-card::before,
.project-card::after,
.goal-card::before,
.certification-card::before,
.impact-card::before,
.skill-group::before,
.stat-card::before {
     display: none !important;
}

.project-card p,
.impact-card p,
.goal-card p,
.certification-card p,
.publication-card p {
     color: var(--art-ink-soft);
}

.project-card h3,
.impact-card h3,
.goal-card h3,
.publication-card h3 {
     color: var(--art-ink);
}

/* four organic contours, rotated through the grids */
.project-card:nth-of-type(4n+1),
.impact-card:nth-of-type(4n+1),
.certification-card:nth-of-type(4n+1),
.goal-card:nth-of-type(4n+1),
.skill-group:nth-of-type(4n+1),
.publication-card:nth-of-type(4n+1),
.stat-card:nth-of-type(4n+1) {
     border-radius: 255px 18px 225px 15px / 15px 225px 18px 255px;
}

.project-card:nth-of-type(4n+2),
.impact-card:nth-of-type(4n+2),
.certification-card:nth-of-type(4n+2),
.goal-card:nth-of-type(4n+2),
.skill-group:nth-of-type(4n+2),
.publication-card:nth-of-type(4n+2),
.stat-card:nth-of-type(4n+2) {
     border-radius: 18px 240px 14px 230px / 240px 16px 250px 19px;
}

.project-card:nth-of-type(4n+3),
.impact-card:nth-of-type(4n+3),
.certification-card:nth-of-type(4n+3),
.goal-card:nth-of-type(4n+3),
.skill-group:nth-of-type(4n+3),
.publication-card:nth-of-type(4n+3),
.stat-card:nth-of-type(4n+3) {
     border-radius: 235px 12px 245px 20px / 18px 240px 14px 220px;
}

.project-card:nth-of-type(4n+4),
.impact-card:nth-of-type(4n+4),
.certification-card:nth-of-type(4n+4),
.goal-card:nth-of-type(4n+4),
.skill-group:nth-of-type(4n+4),
.publication-card:nth-of-type(4n+4),
.stat-card:nth-of-type(4n+4) {
     border-radius: 15px 225px 20px 245px / 230px 14px 240px 16px;
}

.project-card:hover,
.impact-card:hover,
.certification-card:hover,
.goal-card:hover,
.skill-group:hover,
.publication-card:hover,
.stat-card:hover {
     transform: translateY(-3px) rotate(-0.5deg);
     box-shadow: 0 0 0 0.8px var(--art-line-ink), var(--art-drop-press);
}

.project-icon,
.goal-icon,
.stat-card-icon,
.skill-group-header i {
     color: var(--art-foliage);
     filter: none;
     text-shadow: none;
}

.project-badge {
     font-family: var(--font-hand);
     font-size: 0.66rem;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     border-radius: 14px 5px 14px 5px / 5px 14px 5px 14px;
     border: 1px solid currentColor;
     background: transparent;
}

.project-badge.open-source {
     color: var(--art-foliage);
     background: var(--art-wash-foliage);
}

.project-badge.commercial {
     color: var(--art-terracotta);
     background: var(--art-wash-terracotta);
}

/* ------------------------------------------------------------
   11. IMPACT — botanical plates from the expedition journal
   ------------------------------------------------------------ */
.impact-card {
     position: relative;
     overflow: hidden;
     padding: 2.2rem 1.8rem;
}

/* growth rings drawn behind the first plate: 200+ trees */
.impact-card:first-child::after {
     content: "";
     position: absolute;
     right: -70px;
     bottom: -70px;
     width: 220px;
     height: 220px;
     border-radius: 50%;
     background: repeating-radial-gradient(circle at center,
               transparent 0 9px,
               var(--art-wash-foliage) 9px 11px);
     opacity: 0.9;
     pointer-events: none;
     display: block !important;
}

/* the impact cards sit as a loose row of field notes */
.impact-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
     gap: clamp(1.1rem, 2.4vw, 1.7rem);
     margin-top: 2.2rem;
}

@media (max-width: 620px) {
     .impact-grid {
          grid-template-columns: 1fr;
     }
}

.impact-stat {
     font-family: var(--font-heading);
     font-weight: 700;
     color: var(--art-terracotta);
     text-shadow: none;
     background: none;
     -webkit-text-fill-color: currentColor;
     letter-spacing: -0.03em;
}

.impact-card h3 {
     font-size: 1.12rem;
     letter-spacing: 0.01em;
}

.impact-card h3::after {
     content: "";
     display: block;
     width: 34px;
     height: 1.5px;
     margin: 0.6rem 0 0.9rem;
     background: var(--art-terracotta);
}

/* ------------------------------------------------------------
   12. SKILLS · EDUCATION · CERTIFICATIONS
   ------------------------------------------------------------ */
.skill-tag,
.education-tag,
.badge {
     background: var(--art-sky);
     color: var(--art-foliage);
     border: 1px solid rgba(45, 90, 67, 0.24);
     border-radius: 14px 5px 14px 5px / 5px 14px 5px 14px;
     font-family: var(--font-hand);
     font-size: 0.72rem;
     letter-spacing: 0.06em;
     box-shadow: none;
     transition: transform 0.2s var(--art-ease), background-color 0.2s var(--art-ease-soft);
}

[data-theme="dark"] .skill-tag,
[data-theme="dark"] .education-tag,
[data-theme="dark"] .badge {
     background: rgba(127, 184, 154, 0.12);
     color: var(--art-foliage-light);
}

.skill-tag:hover,
.education-tag:hover,
.badge:hover {
     transform: translateY(-2px) rotate(-1.2deg);
     background: var(--art-wash-terracotta);
     color: var(--art-terracotta);
     border-color: rgba(200, 90, 50, 0.4);
}

.skill-group-header,
.cert-header {
     border-bottom: 1.5px dashed var(--art-line);
     color: var(--art-ink);
}

.cert-issuer,
.cert-date,
.education-meta,
.education-years,
.education-gpa,
.nctb-note,
.education-note {
     color: var(--art-ink-soft);
     font-family: var(--font-hand);
     font-size: 0.78rem;
     letter-spacing: 0.04em;
}

.cert-title,
.education-level,
.education-institution {
     color: var(--art-ink);
}

.cert-logo {
     background: var(--art-canvas-warm);
     border: 1px solid var(--art-line);
     border-radius: 12px 4px 12px 4px / 4px 12px 4px 12px;
}

.cert-verify-btn,
.testimonial-doc-link,
.footer-email-cta,
.footer-music-btn {
     color: var(--art-foliage);
     border: 1.5px solid rgba(45, 90, 67, 0.35);
     background: transparent;
     border-radius: 18px 6px 18px 6px / 6px 18px 6px 18px;
     transition: transform 0.25s var(--art-ease), background-color 0.25s var(--art-ease-soft), color 0.25s;
}

.cert-verify-btn:hover,
.testimonial-doc-link:hover,
.footer-email-cta:hover,
.footer-music-btn:hover {
     background: var(--art-wash-foliage);
     color: var(--art-terracotta);
     transform: translateY(-2px) rotate(-0.6deg);
}

.footer-music-btn.active {
     background: var(--art-wash-terracotta);
     color: var(--art-terracotta);
     border-color: rgba(200, 90, 50, 0.45);
}

/* education dots become seed beads on a stem */
.education-container::before {
     background: var(--art-line) !important;
}

.dot {
     background: var(--art-canvas-warm);
     border: 1.5px solid var(--art-foliage);
     box-shadow: none;
}

.dot.ticked {
     background: var(--art-foliage);
     border-color: var(--art-foliage);
}

.dot.ticked::before {
     color: var(--art-canvas);
}

/* ------------------------------------------------------------
   13. GITHUB STATS — pressed specimens
   ------------------------------------------------------------ */
.stat-card-number {
     font-family: var(--font-heading);
     color: var(--art-terracotta);
     background: none;
     -webkit-text-fill-color: currentColor;
     text-shadow: none;
}

.stat-card-label {
     color: var(--art-ink-soft);
     font-family: var(--font-hand);
     font-size: 0.72rem;
     letter-spacing: 0.14em;
     text-transform: uppercase;
}

.stat-skeleton {
     background: linear-gradient(90deg, var(--art-canvas-warm) 0%, var(--art-sky) 50%, var(--art-canvas-warm) 100%);
     border: 1.5px dashed var(--art-line);
     border-radius: 235px 12px 245px 20px / 18px 240px 14px 220px;
}

/* ------------------------------------------------------------
   14. TESTIMONIALS — pinned letters
   ------------------------------------------------------------ */
.testimonial-slide {
     border-radius: 18px 240px 14px 230px / 240px 16px 250px 19px;
     padding: clamp(1.6rem, 4vw, 2.6rem);
}

.testimonial-slide blockquote {
     font-family: var(--font-heading);
     font-style: italic;
     font-size: clamp(1.05rem, 2.4vw, 1.35rem);
     color: var(--art-ink);
     line-height: 1.7;
     text-wrap: pretty;
}

.testimonial-slide blockquote::before {
     content: "\201C";
     display: block;
     font-family: var(--font-heading);
     font-size: 3rem;
     line-height: 0.6;
     color: var(--art-terracotta);
     opacity: 0.5;
     margin-bottom: 0.6rem;
}

.testimonial-author-info .name {
     color: var(--art-ink);
     font-family: var(--font-heading);
}

.testimonial-author-info .title {
     color: var(--art-ink-soft);
     font-family: var(--font-hand);
     font-size: 0.74rem;
}

.testimonial-nav-btn {
     background: var(--art-surface);
     border: 1.5px solid var(--art-line-ink);
     border-radius: 50% 46% 52% 48% / 48% 52% 46% 52%;
     box-shadow: var(--art-drop);
}

.testimonial-nav-btn:hover {
     background: var(--art-wash-foliage);
     transform: translateY(-50%) rotate(-4deg);
}

.testimonial-dot {
     background: var(--art-line);
     border-radius: 50%;
}

.testimonial-dot.active {
     background: var(--art-terracotta);
     box-shadow: none;
}

/* ------------------------------------------------------------
   15. THE NATURALIST'S ALBUM — washi-taped plates
   ------------------------------------------------------------ */
.photography-tagline {
     font-family: var(--font-heading);
     font-style: italic;
     font-size: clamp(1.1rem, 2.6vw, 1.4rem);
     color: var(--art-ink);
}

.photography-desc {
     max-width: 58ch;
     margin-inline: auto;
     text-wrap: pretty;
}

.photography-coming-soon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 1.5rem;
     padding: 0.55rem 1rem;
     border: 1px solid var(--art-line);
     border-radius: 999px;
     background: var(--art-wash-foliage);
     color: var(--art-foliage);
     font-size: 0.95rem;
     font-weight: 600;
     letter-spacing: 0.02em;
}

.album-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
     gap: clamp(2rem, 5vw, 3.2rem);
     margin: 3.4rem auto 2.6rem;
     max-width: 1040px;
}

.album-plate {
     position: relative;
     margin: 0;
     padding: 0.85rem 0.85rem 1.1rem;
     background: var(--art-canvas-warm);
     border: 1px solid var(--art-line);
     box-shadow: var(--art-drop), var(--art-lift);
     transition: transform 0.4s var(--art-ease), box-shadow 0.4s var(--art-ease);
     will-change: transform;
}

.album-plate:nth-child(odd) {
     transform: rotate(-1.1deg);
}

.album-plate:nth-child(even) {
     transform: rotate(0.9deg);
}

.album-plate:hover {
     transform: rotate(0deg) translateY(-6px) scale(1.015);
     box-shadow: var(--art-drop-press), 0 26px 44px -26px rgba(30, 36, 43, 0.6);
}

/* semi-transparent washi tape holding each plate to the page */
.album-plate::before,
.album-plate::after {
     content: "";
     position: absolute;
     width: 86px;
     height: 26px;
     background: var(--art-tape);
     backdrop-filter: blur(1px);
     box-shadow: 0 1px 2px rgba(30, 36, 43, 0.12);
     pointer-events: none;
}

.album-plate::before {
     top: -12px;
     left: -16px;
     transform: rotate(-38deg);
}

.album-plate::after {
     bottom: -12px;
     right: -16px;
     transform: rotate(-38deg);
}

.album-plate img {
     display: block;
     width: 100%;
     height: 230px;
     object-fit: cover;
     filter: saturate(0.94) contrast(1.02);
}

.album-caption {
     display: block;
     margin-top: 0.85rem;
     font-family: var(--font-hand);
     font-size: 0.74rem;
     line-height: 1.6;
     letter-spacing: 0.03em;
     color: var(--art-ink-soft);
     text-align: left;
}

.album-caption strong {
     display: block;
     font-family: var(--font-heading);
     font-style: italic;
     font-size: 0.95rem;
     font-weight: 400;
     letter-spacing: 0;
     color: var(--art-ink);
     margin-bottom: 0.15rem;
}

.album-note {
     max-width: 54ch;
     margin: 0 auto 2.4rem;
     font-family: var(--font-hand);
     font-size: 0.74rem;
     letter-spacing: 0.03em;
     color: var(--art-ink-soft);
     opacity: 0.85;
}

/* ------------------------------------------------------------
   16. CONTACT FORM — a letter on the desk
   ------------------------------------------------------------ */
.contact-description {
     color: var(--art-ink-soft);
     max-width: 58ch;
     margin-inline: auto;
     text-wrap: pretty;
}

.contact-form {
     grid-template-columns: minmax(0, 1fr);
     background: var(--art-canvas-warm);
     border: 1.5px solid var(--art-line);
     border-radius: 18px 240px 14px 230px / 240px 16px 250px 19px;
     padding: clamp(1.6rem, 4vw, 2.6rem);
     box-shadow: var(--art-drop);
}

.form-group input,
.form-group textarea,
.form-group select {
     background: var(--art-surface);
     border: 1.5px solid var(--art-line-ink);
     border-radius: 16px 5px 16px 5px / 5px 16px 5px 16px;
     color: var(--art-ink);
     font-family: var(--font-body);
     transition: border-color 0.25s, box-shadow 0.25s var(--art-ease);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
     color: var(--art-ink-soft);
     opacity: 1;
}

.form-group input:focus,
.form-group textarea:focus {
     border-color: var(--art-terracotta);
     box-shadow: 0 0 0 0.8px var(--art-terracotta);
     outline: none;
}

.consent-group,
.consent-group label {
     color: var(--art-ink-soft);
}

#contact-submit-btn {
     background: var(--art-foliage);
     color: var(--art-on-accent);
     border-color: var(--art-foliage);
}

#contact-submit-btn:hover,
#contact-submit-btn:focus-visible {
     background: var(--art-button-hover);
     color: var(--art-on-accent);
     border-color: var(--art-button-hover);
}

.contact-success-state {
     background: var(--art-surface);
     color: var(--art-ink);
     border: 1.5px solid var(--art-line-ink);
     border-radius: 235px 12px 245px 20px / 18px 240px 14px 220px;
}

.success-headline {
     font-family: var(--font-heading);
     color: var(--art-foliage);
}

.success-message,
.success-tracking-id {
     color: var(--art-ink-soft);
}

.success-check-svg .check-circle,
.success-check-svg .check-tick {
     stroke: var(--art-foliage);
}

/* ------------------------------------------------------------
   17. FOOTER — the closing page of the chronicle
   ------------------------------------------------------------ */
footer#footer {
     background: var(--art-canvas-warm);
     border-top: 1.5px solid var(--art-line);
     color: var(--art-ink-soft);
}

footer#footer::before {
     background: none !important;
     content: none !important;
}

.footer-logo {
     color: var(--art-ink);
}

.footer-tagline {
     font-family: var(--font-hand);
     font-size: 0.74rem;
     letter-spacing: 0.1em;
     color: var(--art-terracotta);
}

.footer-bio,
.footer-text,
.trademark-disclaimer,
.footer-built-with,
.footer-email-label,
.status-text {
     color: var(--art-ink-soft);
}

.footer-col-title {
     font-size: 0.98rem;
     color: var(--art-ink);
}

.footer-links a {
     color: var(--art-ink-soft);
     transition: color 0.2s, transform 0.2s var(--art-ease);
     display: inline-block;
}

.footer-links a:hover {
     color: var(--art-terracotta);
     transform: translateX(3px);
}

.footer-socials a {
     background: var(--art-surface);
     border: 1.5px solid var(--art-line);
     border-radius: 14px 5px 14px 5px / 5px 14px 5px 14px;
     transition: transform 0.25s var(--art-ease), background-color 0.25s;
}

.footer-socials a:hover {
     background: var(--art-wash-foliage);
     transform: translateY(-3px) rotate(-4deg);
}

.status-dot {
     background: var(--art-foliage);
     box-shadow: 0 0 0 4px var(--art-wash-foliage);
}

.footer-divider {
     background: var(--art-line);
     height: 1px;
}

/* ------------------------------------------------------------
   18. ACCESSIBILITY WIDGET
   ------------------------------------------------------------ */
#accessibility-settings-btn {
     background: var(--art-terracotta);
     border: 1.5px solid var(--art-ink);
     border-radius: 52% 48% 45% 55% / 48% 55% 45% 52%;
     box-shadow: var(--art-drop);
}

#accessibility-settings-btn:hover {
     transform: rotate(-6deg) scale(1.05);
}

.access-main-svg {
     filter: brightness(0) invert(1);
}

.access-item,
.access-list-item {
     background: transparent;
     color: var(--art-ink);
     border: 1px solid var(--art-line);
     border-radius: 12px 4px 12px 4px / 4px 12px 4px 12px;
}

.access-item:hover,
.access-list-item:hover,
.access-list-item.active {
     background: var(--art-wash-foliage);
     color: var(--art-foliage);
}

#reading-guide {
     background: rgba(200, 90, 50, 0.4);
     box-shadow: none;
}

.noscript-warning {
     background: var(--art-terracotta-warm);
     color: #2B1810;
     border-bottom: 2px solid var(--art-terracotta);
}

/* ------------------------------------------------------------
   19. INK REVEAL — replaces the cipher scramble
   ------------------------------------------------------------ */
.ink-word {
     display: inline-block;
     opacity: 0;
     filter: blur(6px);
     transform: translateY(0.22em);
     transition: opacity 0.7s var(--art-ease-soft), filter 0.7s var(--art-ease-soft), transform 0.7s var(--art-ease-soft);
}

.ink-word.bloomed {
     opacity: 1;
     filter: blur(0);
     transform: translateY(0);
}

/* ------------------------------------------------------------
   19B. SIGNAGE — nav, submenus and the drawer, hand-lettered
   ------------------------------------------------------------ */
.nav-links a {
     font-family: var(--font-hand);
     font-size: 0.78rem;
     font-weight: 500;
     letter-spacing: 0.04em;
     color: var(--art-ink-soft);
}

.nav-links a::after {
     height: 2px;
     border-radius: 0;
     background: var(--art-terracotta);
}

.nav-links a:hover,
.nav-links a.active {
     color: var(--art-ink);
}

.nav-links .submenu {
     background: var(--art-surface);
     border: 1px solid var(--art-line);
     border-radius: 12px;
     box-shadow: var(--art-lift);
     padding: 0.4rem;
}

.nav-links .submenu li a {
     font-family: var(--font-hand);
     font-size: 0.75rem;
     border-radius: 8px;
     color: var(--art-ink-soft);
}

.nav-links .submenu li a:hover {
     background: var(--art-wash-foliage);
     color: var(--art-ink);
}

.mobile-nav {
     background: var(--art-canvas);
     border-left: 1px solid var(--art-line);
}

.mobile-nav-links a {
     font-family: var(--font-hand);
     color: var(--art-ink);
     border-bottom: 1px solid var(--art-line);
}

/* ------------------------------------------------------------
   19C. PUBLICATION MARGINALIA — badges, links, progress beads
   ------------------------------------------------------------ */
.pub-badge {
     background: var(--art-wash-foliage);
     border: 1px solid var(--art-line);
     border-radius: 999px;
     color: var(--art-foliage);
     font-family: var(--font-hand);
     font-size: 0.68rem;
     font-weight: 500;
     letter-spacing: 0.08em;
}

.pub-link {
     background: transparent;
     border: 1.5px solid var(--art-line-ink);
     border-radius: 999px;
     color: var(--art-ink);
     font-family: var(--font-hand);
     font-size: 0.75rem;
     font-weight: 500;
     box-shadow: 2px 3px 0 rgba(30, 36, 43, 0.08);
     transition: transform 0.25s var(--art-ease-soft), background 0.25s ease, color 0.25s ease;
}

.pub-link:hover {
     background: var(--art-terracotta);
     border-color: var(--art-terracotta);
     color: var(--art-canvas);
     transform: translateY(-2px) rotate(-0.4deg);
     box-shadow: 2px 4px 0 rgba(30, 36, 43, 0.16);
}

.education-progress .dot {
     background: var(--art-foliage);
     border: 1px solid var(--art-line-ink);
     box-shadow: none;
}

.education-progress .dot.dimming {
     background: var(--art-terracotta-warm);
}

.education-institution {
     color: var(--art-foliage);
}

.impact-stat {
     font-size: clamp(1.5rem, 3vw, 2rem);
     line-height: 1;
}

/* leaf-fall easter egg canvas */
#leaf-storm-canvas {
     position: fixed;
     inset: 0;
     z-index: 9997;
     pointer-events: none;
     opacity: 0;
     transition: opacity 1.2s var(--art-ease-soft);
}

#leaf-storm-canvas.active {
     opacity: 1;
}

.chronicle-hint {
     position: fixed;
     left: 50%;
     bottom: 2rem;
     transform: translateX(-50%) translateY(12px);
     padding: 0.55rem 1.1rem;
     background: var(--art-surface);
     border: 1.5px solid var(--art-line-ink);
     border-radius: 18px 6px 18px 6px / 6px 18px 6px 18px;
     font-family: var(--font-hand);
     font-size: 0.74rem;
     color: var(--art-ink-soft);
     box-shadow: var(--art-drop);
     opacity: 0;
     transition: opacity 0.6s var(--art-ease-soft), transform 0.6s var(--art-ease-soft);
     z-index: 9996;
     pointer-events: none;
}

.chronicle-hint.visible {
     opacity: 1;
     transform: translateX(-50%) translateY(0);
}

/* ------------------------------------------------------------
   20. RESPONSIVE & MOTION PREFERENCES
   ------------------------------------------------------------ */
@media (max-width: 768px) {
     .about-content p::first-letter {
          font-size: 2.8rem;
     }

     .album-plate img {
          height: 200px;
     }

     .impact-card:first-child::after {
          width: 160px;
          height: 160px;
     }
}

@media (prefers-reduced-motion: reduce) {

     *,
     *::before,
     *::after {
          animation-duration: 0.001ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.001ms !important;
     }

     .ink-word {
          opacity: 1;
          filter: none;
          transform: none;
     }

     .ink-underline path {
          stroke-dashoffset: 0;
     }
}

@media print {

     body::after,
     #nature-canvas,
     #loading-splash {
          display: none !important;
     }
}

/* Hero actions: one clear primary, one outlined destination, one quiet document link. */
.hero .cta-buttons {
     align-items: center;
     gap: 1rem 1.25rem;
}

.hero .cta-buttons .hero-cta-primary {
     color: var(--art-canvas);
     background: var(--art-foliage);
     border-color: var(--art-foliage);
     box-shadow: var(--art-drop);
}

.hero .cta-buttons .hero-cta-secondary {
     color: var(--art-ink);
     border-color: var(--art-foliage);
     box-shadow: none;
}

.hero .cta-buttons .hero-cta-secondary:hover {
     color: var(--art-canvas);
     background: var(--art-foliage);
}

.hero .hero-cv-link {
     display: inline-flex;
     min-height: 44px;
     align-items: center;
     gap: 0.45rem;
     padding: 0.5rem 0.65rem;
     color: var(--art-foliage);
     font-weight: 600;
     text-decoration: underline;
     text-underline-offset: 0.2em;
}

.hero .hero-cv-link i {
     font-size: 0.85em;
}

.hero .cta-buttons a:focus-visible,
.mobile-tabbar a:focus-visible,
.mobile-tabbar button:focus-visible,
.mobile-more-sheet a:focus-visible,
.mobile-more-sheet button:focus-visible,
#accessibility-settings-btn:focus-visible,
#accessibility-panel button:focus-visible,
#footer-music-toggle:focus-visible,
.contact-form input:focus-visible,
.contact-form textarea:focus-visible,
.contact-form button:focus-visible,
.contact-fallback a:focus-visible {
     outline: 3px solid var(--art-terracotta);
     outline-offset: 3px;
}

.contact-form .form-group label {
     display: block;
     margin: 0 0 0.45rem;
     color: var(--art-ink);
     font-weight: 600;
}

.contact-form .form-group input,
.contact-form .form-group textarea {
     min-height: 48px;
     color: var(--art-ink);
     background: var(--art-surface);
     border-color: var(--art-line-ink);
}

.contact-form .form-group textarea {
     min-height: 140px;
}

.contact-encryption-note,
.contact-form-status,
.contact-fallback {
     max-width: 700px;
     margin: 0 auto;
     color: var(--art-ink-soft);
     line-height: 1.5;
}

.contact-encryption-note {
     margin-top: 0.25rem;
}

.contact-form-status:not(:empty) {
     margin-top: 1rem;
     padding: 0.8rem 1rem;
     border-left: 3px solid var(--art-terracotta);
     background: var(--art-wash-terracotta);
     color: var(--art-ink);
}

.contact-fallback {
     margin-top: 1rem;
     text-align: center;
}

.contact-fallback a {
     color: var(--art-foliage);
     font-weight: 700;
     text-underline-offset: 0.2em;
}

#contact-submit-btn,
.consent-group input,
.consent-group label {
     min-height: 44px;
}

body {
     padding-bottom: calc(112px + env(safe-area-inset-bottom));
}

header#header nav {
     justify-content: space-between;
}

header#header .logo {
     text-decoration: none;
}

.mobile-tabbar {
     --active-tab: 0;
     position: fixed;
     z-index: 1201;
     left: 50%;
     bottom: calc(14px + env(safe-area-inset-bottom));
     transform: translateX(-50%);
     display: flex;
     align-items: stretch;
     width: min(92vw, 460px);
     padding: 6px;
     border: 1.5px solid var(--art-line);
     border-radius: 999px;
     background: color-mix(in srgb, var(--art-surface) 94%, transparent);
     color: var(--art-ink);
     backdrop-filter: blur(16px) saturate(130%);
     -webkit-backdrop-filter: blur(16px) saturate(130%);
     box-shadow: 0 10px 30px color-mix(in srgb, var(--art-dark-base) 22%, transparent), inset 0 1px color-mix(in srgb, var(--art-ink) 8%, transparent);
}

.tabbar-indicator {
     position: absolute;
     z-index: 0;
     inset: 6px auto 6px 6px;
     width: calc((100% - 12px) / 5);
     border: 1px solid color-mix(in srgb, var(--tab-sun) 55%, var(--art-surface));
     border-radius: 999px;
     background: radial-gradient(ellipse at top, color-mix(in srgb, var(--tab-sun) 55%, #FFFDF7), var(--tab-sun));
     box-shadow: 0 3px 10px color-mix(in srgb, var(--tab-sun) 22%, transparent), inset 0 1px color-mix(in srgb, var(--tab-sun) 40%, #FFFDF7);
     transform: translateX(calc(var(--active-tab) * 100%));
     transition: transform 550ms cubic-bezier(.34, 1.45, .5, 1), scale 180ms ease;
     pointer-events: none;
}

.mobile-tabbar.pressing .tabbar-indicator {
     scale: 1.04;
}

.mobile-tab-link {
     position: relative;
     z-index: 1;
     display: flex;
     flex: 1 1 0;
     flex-direction: column;
     min-width: 0;
     min-height: 64px;
     align-items: center;
     justify-content: center;
     gap: 5px;
     padding: 8px 0;
     border: 0;
     border-radius: 999px;
     background: transparent;
     color: var(--art-ink-soft);
     font: 600 14px/1.2 var(--font-body);
     text-align: center;
     text-decoration: none;
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
     transition: color 180ms ease;
}

.mobile-tab-link svg {
     width: 24px;
     height: 24px;
     fill: none;
     stroke: currentColor;
     stroke-width: 1.8;
     stroke-linecap: round;
     stroke-linejoin: round;
     transition: transform 500ms cubic-bezier(.34, 1.8, .5, 1);
}

.mobile-tab-link:hover {
     color: var(--art-ink);
}

.mobile-tab-link.is-active {
     color: var(--tab-sun-ink);
}

.mobile-tab-link.is-active svg {
     transform: translateY(-2px) rotate(-6deg) scale(1.08);
}

.mobile-more-sheet[hidden] {
     display: none !important;
}

.mobile-more-sheet {
     position: fixed;
     z-index: 1200;
     left: 50%;
     bottom: calc(106px + env(safe-area-inset-bottom));
     transform: translateX(-50%);
     width: min(92vw, 460px);
     max-height: calc(100dvh - 200px - env(safe-area-inset-bottom));
     overflow-y: auto;
     overscroll-behavior: contain;
     padding: 12px;
     border: 1.5px solid var(--art-line);
     border-radius: 24px;
     background: color-mix(in srgb, var(--art-surface) 97%, transparent);
     color: var(--art-ink);
     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);
     box-shadow: var(--art-lift);
     animation: sheet-entrance 280ms var(--art-ease-soft);
}

@keyframes sheet-entrance {
     from { opacity: 0; transform: translate(-50%, 12px) scale(.98); }
     to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

.mobile-more-sheet-heading {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 4px 8px;
}

.mobile-more-sheet-heading h2 {
     margin: 0;
     color: var(--art-ink);
     font: 600 16px/1.4 var(--font-body);
}

.mobile-more-close,
.mobile-more-sheet li a {
     min-height: 44px;
     padding: 12px;
     border: 1px solid transparent;
     border-radius: 16px;
     background: transparent;
     color: var(--art-ink);
     font: 600 14px/1.4 var(--font-body);
     text-decoration: none;
     cursor: pointer;
}

.mobile-more-close {
     color: var(--art-ink-soft);
}

.mobile-more-sheet ul {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 6px;
     margin: 0;
     padding: 0;
     list-style: none;
}

.mobile-more-sheet li a {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     background: var(--art-wash-foliage);
}

.mobile-more-sheet a:hover,
.mobile-more-close:hover {
     color: var(--art-ink);
     border-color: var(--art-line-ink);
     background: var(--art-wash-terracotta);
}

.mobile-more-sheet li a[aria-current="location"] {
     background: var(--tab-sun);
     color: var(--tab-sun-ink);
}

body.more-sheet-open #accessibility-panel {
     visibility: hidden;
}

@media (max-width: 360px) {
     .mobile-tabbar, .mobile-more-sheet { width: calc(100vw - 16px); }
     .mobile-tab-link { letter-spacing: -0.025em; }
}

@media print {
     .mobile-tabbar, .mobile-more-sheet { display: none !important; }
}

@media (max-width: 768px) {
     #accessibility-settings-btn {
          bottom: calc(112px + env(safe-area-inset-bottom));
          left: 12px;
          z-index: 1003;
          width: 48px;
          height: 48px;
     }

     #accessibility-panel {
          bottom: calc(168px + env(safe-area-inset-bottom));
          left: 12px;
          width: min(300px, calc(100vw - 24px));
          max-height: calc(100dvh - 200px - env(safe-area-inset-bottom));
          overflow-y: auto;
     }

     #accessibility-panel .access-item,
     #accessibility-panel .access-list-item {
          min-height: 44px;
     }

     #footer-music-toggle {
          position: fixed;
          z-index: 1003;
          right: 12px;
          bottom: calc(112px + env(safe-area-inset-bottom));
          min-height: 48px;
          padding: 0.5rem 0.75rem;
          border: 1px solid var(--art-line-ink);
          background: var(--art-surface);
          color: var(--art-ink);
          box-shadow: var(--art-drop);
     }

     body.more-sheet-open #accessibility-settings-btn,
     body.more-sheet-open #accessibility-panel,
     body.more-sheet-open #footer-music-toggle {
          visibility: hidden;
          pointer-events: none;
     }

     #contact {
          padding-bottom: calc(8rem + env(safe-area-inset-bottom));
     }

     .hero .cta-buttons {
          flex-direction: column;
          align-items: center;
          gap: 0.65rem;
     }

     .hero .cta-buttons .hero-cta-primary,
     .hero .cta-buttons .hero-cta-secondary {
          width: min(100%, 350px);
          justify-content: center;
     }

     .hero .cta-buttons .hero-cv-link {
          justify-content: center;
     }
}

@media (prefers-reduced-motion: reduce) {
     .mobile-tabbar,
     .mobile-more-sheet,
     .mobile-tab-link,
     #accessibility-panel,
     #accessibility-settings-btn,
     #footer-music-toggle {
          animation: none !important;
          transition: none !important;
     }
}

.sr-only {
     position: absolute;
     width: 1px;
     height: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
     border: 0;
}

.goals-container {
     grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

/* Legacy components must use paired foreground and surface tokens. */
.isbn-badge,
.badge,
.skill-tag {
     color: var(--art-ink-soft);
     background: var(--art-wash-foliage);
     border-color: var(--art-line);
}

.photography-desc,
.pub-desc,
.testimonial-text,
.stat-card-label {
     color: var(--art-ink-soft);
}

.footer-email-cta,
.testimonial-link {
     color: var(--art-on-accent);
     background: var(--art-foliage);
     border: 1px solid var(--art-foliage);
     box-shadow: var(--art-drop);
}

.footer-email-cta:hover,
.testimonial-link:hover {
     color: var(--art-on-accent);
     background: var(--art-button-hover);
     border-color: var(--art-button-hover);
     box-shadow: var(--art-drop);
}

.pub-link:hover,
.pub-link:focus-visible {
     background: var(--art-foliage);
     border-color: var(--art-foliage);
     color: var(--art-on-accent);
}

.search-result-item mark {
     color: var(--art-ink);
     text-decoration-color: var(--art-foliage);
}

.search-result-item.terminal-item:hover,
.search-result-item.terminal-item.focused {
     background: var(--art-wash-foliage);
     color: var(--art-ink);
}

[data-theme="dark"] #footer-music-toggle .nav-svg-icon,
[data-theme="dark"] .social-svg-icon,
[data-theme="dark"] .testimonial-nav-svg {
     filter: brightness(0) invert(1);
}

[data-theme="dark"] .btn-primary .btn-svg-icon,
[data-theme="dark"] .access-main-svg {
     filter: brightness(0);
}

#accessibility-settings-btn {
     color: var(--art-on-accent);
}

@media (prefers-reduced-motion: reduce) {
     html { scroll-behavior: auto !important; }
     .mobile-tabbar.pressing .tabbar-indicator { scale: 1; }
     .mobile-tab-link.is-active svg { transform: none; }
}

.project-filter-controls {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 0.5rem;
     margin-bottom: 1.25rem;
}

.project-filter-controls[hidden] {
     display: none !important;
}

.project-filter-button {
     min-height: 44px;
     padding: 0.55rem 0.9rem;
     border: 1px solid var(--art-line-ink);
     border-radius: 999px;
     background: var(--art-surface);
     color: var(--art-ink);
     font: 600 0.82rem/1.3 var(--font-hand);
     cursor: pointer;
     transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.project-filter-button:hover {
     border-color: var(--art-foliage);
}

.project-filter-button[aria-pressed="true"] {
     border-color: var(--art-foliage);
     background: var(--art-foliage);
     color: var(--art-canvas);
}

.project-filter-button:focus-visible {
     outline: 3px solid var(--art-terracotta);
     outline-offset: 3px;
}

.project-card[hidden] {
     display: none !important;
}

@media (prefers-reduced-motion: reduce) {
     .project-filter-button {
          transition: none;
     }
}