/* =====================================================================
   AURACANVAS — STYLES
   A calm digital night studio with controlled orange energy.
   Organized in sections: Reset, Tokens, Layout, Components,
   Aura Map, Appearance Panel, Favorites Wall, Forms, Visual Modes,
   Density / Contrast / Motion / Text-size overrides, Responsive.
   ===================================================================== */

/* NOTE ON EXTERNAL REQUESTS: the rest of this file deliberately avoids
   external requests (see "Type" below). The one exception is this
   @import, added for the Midnight Vale heading typeface by request. It
   costs one network request (cached after first load) and means the
   page is no longer fully self-contained/offline-safe in that one mode.
   Remove this line and the 'UnifrakturCook' reference in the Midnight
   Vale block to go back to a system-fonts-only, zero-request page. */
@import url('https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&family=Anton&family=Kaushan+Script&family=Patrick+Hand&family=Bodoni+Moda:wght@700&family=Fredoka:wght@700&display=swap');

/* ---------- 1. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { overflow-x: hidden; }
img, svg { max-width: 100%; display: block; }
button { font: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; }

/* ---------- 2. DESIGN TOKENS ---------- */
:root {
  /* AuraCanvas palette — exact values, do not change */
  --midnight: #1e223d;
  --electric: #f54f1b;
  --surface: #2a2f54;
  --text-primary: #f1f5f9;
  --text-muted: #94a3b8;
  --paper: #f8f9fa;

  /* Working aliases (derived roles, same six hex values) */
  --bg: var(--midnight);
  --bg-surface: var(--surface);
  --text: var(--text-primary);
  --muted: var(--text-muted);
  --accent: var(--electric);
  --ink: var(--midnight); /* dark text used on light/paper surfaces */
  --border: rgba(241, 245, 249, 0.12);
  --border-strong: rgba(241, 245, 249, 0.22);
  --focus-ring: #ffffff;

  /* Favorites-wall box tokens — separate from --bg-surface so each mode
     can give the wall its own material (paper, kraft, beige, ivory...)
     without affecting cards/panels elsewhere. Defaults match the
     original bright "paper" look (Future Folk keeps this unchanged). */
  --fav-bg: var(--paper);
  --fav-text: var(--ink);
  --fav-label: var(--electric);
  --fav-border: rgba(30,34,61,0.12);

  /* Type — system stacks only (no external font requests, by design) */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Noto Serif", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* Scale — base document size, overridden literally in pt by data-text-size */
  --space-1: 0.4rem;
  --space-2: 0.8rem;
  --space-3: 1.2rem;
  --space-4: 1.8rem;
  --space-5: 2.6rem;
  --space-6: 4rem;
  --space-7: 6rem;

  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 26px;

  --shadow-sm: 0 2px 10px rgba(0,0,0,0.25);
  --shadow-md: 0 12px 32px rgba(0,0,0,0.35);

  --dur-fast: 150ms;
  --dur-base: 260ms;
  --dur-slow: 420ms;
  --ease: cubic-bezier(0.2, 0.65, 0.3, 1);

  --container-max: 68rem;
  --rotate-card: 0deg;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}
html[data-motion="reduced"] { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 3. BASE / TYPOGRAPHY ---------- */
html {
  font-size: 12pt; /* = the "md" text-size option; overridden by data-text-size below */
  scroll-behavior: smooth;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  font-size: 1.05rem;
  -webkit-font-smoothing: antialiased;
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
  position: relative;
}
/* Shared decorative background layer — each visual mode sets
   --mode-bg-image to its own layered gradients; everything else
   (header, sections, forms) paints above it normally. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--mode-bg-image, none);
  background-attachment: fixed;
  background-size: var(--mode-bg-size, auto);
  transition: background var(--dur-slow) var(--ease);
}
html[data-mode="gallery-light"] body::before { animation: shimmer-drift 22s ease-in-out infinite alternate; }
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 var(--space-2);
  letter-spacing: 0.01em;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
h3 { font-size: 1.2rem; margin-bottom: var(--space-1); }
p { margin: 0 0 var(--space-3); }
.muted-inline { color: var(--muted); font-size: 0.92em; }
.eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  color: var(--accent);
  margin: 0 0 var(--space-2);
}

/* Focus visibility everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Skip link */
.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -100px;
  background: var(--paper);
  color: var(--ink);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  z-index: 2000;
  transition: top var(--dur-fast) var(--ease);
  font-weight: 600;
}
.skip-link:focus { top: var(--space-2); }

/* ---------- 4. LAYOUT ---------- */
.section { padding: var(--space-7) 0; border-bottom: 1px solid var(--border); }
.section-tight { padding: var(--space-6) 0; }
.section-inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-4); }
.section-teaser { color: var(--muted); max-width: 42rem; }

.hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 5. HEADER ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}
.site-header-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-2) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.site-brand {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display); font-size: 1.1rem; color: var(--text);
  background: none; border: none; padding: 0; cursor: pointer;
}
.brand-mark {
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--accent), transparent 65%), var(--surface);
  border: 1px solid var(--border-strong);
  flex-shrink: 0;
}
.appearance-toggle {
  display: flex; align-items: center; gap: var(--space-1);
  background: transparent; border: 1px solid var(--border-strong);
  color: var(--text); padding: 0.5rem 0.9rem; border-radius: 999px;
  cursor: pointer; font-size: 0.85rem;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.appearance-toggle:hover { border-color: var(--accent); }

/* ---------- 6. BUTTONS ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.75rem 1.4rem; border-radius: var(--radius-md);
  font-weight: 600; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; font-size: 0.95rem;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.button-primary { background: var(--accent); color: #1a1200; }
.button-primary:hover { transform: translateY(-1px); }
.button-secondary { background: transparent; color: var(--text); border-color: var(--border-strong); }
.button-secondary:hover { border-color: var(--accent); }
.button-ghost { background: transparent; color: var(--muted); border-color: var(--border); padding: 0.55rem 1rem; font-size: 0.85rem; }
.button-ghost:hover { color: var(--text); border-color: var(--border-strong); }
.icon-button { background: transparent; border: none; color: var(--text); font-size: 1.1rem; cursor: pointer; padding: 0.3rem; line-height: 1; border-radius: var(--radius-sm); }

.control-row, .global-expand-controls { display: flex; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-3) 0; }

/* ---------- 7. HERO ---------- */
.hero-inner {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-6);
  align-items: center; padding-top: var(--space-5);
}
.hero-tagline { font-size: 1.2rem; color: var(--text); font-family: var(--font-display); }
.hero-intro { color: var(--muted); max-width: 34rem; }
.hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }

.hero-art { position: relative; aspect-ratio: 1 / 1; }
.constellation { position: relative; width: 100%; height: 100%; }
.star {
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent);
  animation: twinkle 4s ease-in-out infinite;
}
.star-1 { top: 12%; left: 20%; animation-delay: 0s; }
.star-2 { top: 30%; left: 65%; width: 5px; height: 5px; animation-delay: 0.6s; background: var(--text); box-shadow:none; }
.star-3 { top: 55%; left: 15%; width: 6px; height: 6px; animation-delay: 1.2s; background: var(--text); box-shadow:none; }
.star-4 { top: 68%; left: 55%; animation-delay: 1.8s; }
.star-5 { top: 20%; left: 45%; width: 4px; height: 4px; animation-delay: 2.2s; background: var(--muted); box-shadow:none; }
.star-6 { top: 80%; left: 30%; width: 5px; height: 5px; animation-delay: 2.6s; background: var(--text); box-shadow:none; }
.star-7 { top: 45%; left: 80%; width: 5px; height: 5px; animation-delay: 3.1s; background: var(--muted); box-shadow:none; }
@keyframes twinkle { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* Calm: slower, quieter twinkle — a meditative, almost still glow. */
html[data-density="calm"] .star { animation-duration: 9s; }
/* Playful: livelier twinkle plus a slow color drift through the warm
   end of the spectrum — a small, continuous, hypnotic shimmer. */
html[data-density="playful"] .star { animation: twinkle 2.4s ease-in-out infinite, hue-drift 9s ease-in-out infinite; }
@keyframes hue-drift { 0%, 100% { filter: hue-rotate(0deg); } 50% { filter: hue-rotate(28deg); } }

.line { position: absolute; height: 1px; background: linear-gradient(90deg, transparent, var(--border-strong), transparent); transform-origin: left center; }
.line-a { top: 14%; left: 21%; width: 44%; transform: rotate(18deg); }
.line-b { top: 31%; left: 22%; width: 30%; transform: rotate(-6deg); }
.line-c { top: 56%; left: 21%; width: 40%; transform: rotate(10deg); }
.line-d { top: 46%; left: 46%; width: 34%; transform: rotate(30deg); }
.line-e { top: 69%; left: 30%; width: 25%; transform: rotate(-14deg); }

.orbit { position: absolute; border: 1px dashed var(--border); border-radius: 50%; }
.orbit-1 { width: 70%; height: 70%; top: 10%; left: 8%; }
.orbit-2 { width: 42%; height: 42%; top: 30%; left: 32%; }
html[data-motion="reduced"] .orbit, .no-motion .orbit { animation: none; }
.orbit-1 { animation: spin-slow 60s linear infinite; }
.orbit-2 { animation: spin-slow 40s linear infinite reverse; }
@keyframes spin-slow { to { transform: rotate(360deg); } }

.card-fragment { position: absolute; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.fragment-1 { width: 22%; height: 16%; top: 6%; right: 8%; transform: rotate(-6deg); }
.fragment-2 { width: 18%; height: 14%; bottom: 14%; left: 4%; transform: rotate(4deg); }
.fragment-3 { width: 16%; height: 12%; bottom: 6%; right: 20%; transform: rotate(-3deg); }

/* ---------- 7b. FEATURED PHOTO & TAGLINE ---------- */
.featured-photo-inner { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.featured-photo-frame { position: relative; width: 11rem; height: 11rem; flex-shrink: 0; }
.featured-photo-placeholder {
  width: 100%; height: 100%; border-radius: 50%;
  background: var(--bg-surface); border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--muted); font-size: 0.85rem; padding: var(--space-2);
}
.featured-photo-text { flex: 1; min-width: 14rem; }
.featured-tagline { font-family: var(--font-display); font-size: clamp(1.3rem, 2.6vw, 1.8rem); margin: 0; }
.frame-corner { position: absolute; width: 1.6rem; height: 1.6rem; opacity: 0; pointer-events: none; }

/* Future Folk (default): a slow-turning dashed orbit ring, matching the hero. */
.featured-photo-frame::before {
  content: ""; position: absolute; inset: -0.6rem; border-radius: 50%;
  border: 1px dashed var(--border-strong);
  animation: spin-slow 50s linear infinite;
}

/* ---------- 8. DETAILS / SUMMARY (cards, section reveals) ---------- */
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }

.section-details > summary {
  display: inline-flex; align-items: center; gap: var(--space-1);
  color: var(--accent); font-weight: 600; padding: var(--space-1) 0;
  border-bottom: 1px solid transparent;
}
.section-details > summary:hover { border-color: var(--accent); }
.section-details[open] > summary .chevron { transform: rotate(180deg); }
.chevron { display: inline-block; transition: transform var(--dur-base) var(--ease); }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--space-3); margin: var(--space-4) 0; }

.card {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: var(--space-3);
  transition: border-color var(--dur-fast) var(--ease);
}
.card:hover { border-color: var(--border-strong); }
.card > summary { display: block; }
.card > summary h3 { display: inline; }
.card[open] { grid-column: 1 / -1; }
.card-meta { margin: var(--space-1) 0 0; }
.tag {
  display: inline-block; font-family: var(--font-mono); font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent);
  border-radius: 999px; padding: 0.15rem 0.6rem; margin-right: var(--space-1);
}
.tag-archived { background: rgba(148,163,184,0.16); color: var(--muted); }

.archive-card { border-style: dashed; opacity: 0.92; }

.plain-list li { margin-bottom: var(--space-2); padding-left: var(--space-3); position: relative; }
.plain-list li::before { content: "•"; position: absolute; left: 0; color: var(--accent); }

/* ---------- 9. FAVORITES WALL ---------- */
.favorites-wall {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--space-4); margin: var(--space-4) 0;
  align-items: start;
}
.fav-card {
  background: var(--fav-bg); color: var(--fav-text); border-radius: var(--radius-sm);
  padding: var(--space-3); box-shadow: var(--shadow-sm);
  transform: rotate(var(--rotate-card));
  transition: transform var(--dur-base) var(--ease), background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
  position: relative;
}
.fav-card p { margin: 0; color: var(--fav-text); }
.fav-label { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fav-label); margin-bottom: var(--space-1) !important; }

.fav-thumb-strip {
  display: grid; grid-template-columns: repeat(10, 1fr);
  gap: var(--space-2); margin: var(--space-3) 0 0; max-width: 30rem;
}
.fav-thumb-tile {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--fav-bg) 60%, var(--bg-surface));
  border: 1px dashed var(--fav-border); font-size: 1rem; line-height: 1;
}
@media (max-width: 600px) {
  .fav-thumb-strip { grid-template-columns: repeat(5, 1fr); max-width: 20rem; }
}
.fav-thumb {
  display: flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; margin-bottom: var(--space-1);
  border-radius: var(--radius-sm); background: color-mix(in srgb, var(--fav-bg) 60%, var(--bg-surface));
  border: 1px dashed var(--fav-border); font-size: 1rem; line-height: 1;
}

.fav-tape::before {
  content: ""; position: absolute; top: -0.5rem; left: 50%; transform: translateX(-50%) rotate(-2deg);
  width: 2.6rem; height: 1rem; background: color-mix(in srgb, var(--accent) 35%, transparent);
}
.fav-postcard { border: 1px solid var(--fav-border); border-radius: 2px; }
.fav-polaroid { padding-bottom: var(--space-5); border: 1px solid var(--fav-border); }
.fav-index { border-left: 3px solid var(--fav-label); border-radius: 2px; }
.fav-record { border-radius: 50%; aspect-ratio: 1; display: flex; flex-direction: column; justify-content: center; text-align: center; }

/* Decoration density: calm breathes quietly in place; playful sways and
   drifts continuously, each card on its own slow, staggered rhythm so
   the wall never moves in lockstep — a small, steady, hypnotic effect
   rather than a distraction. Both fall back to a static state under
   reduced motion (handled globally). */
html[data-density="calm"] .fav-card {
  --rotate-card: 0deg;
  animation: fav-breathe 11s ease-in-out infinite;
}
html[data-density="calm"] .fav-card:nth-child(2n) { animation-delay: 2.2s; }
html[data-density="calm"] .fav-card:nth-child(3n) { animation-delay: 4.4s; }
html[data-density="calm"] .fav-card:nth-child(5n) { animation-delay: 6.6s; }
@keyframes fav-breathe {
  0%, 100% { box-shadow: var(--shadow-sm); transform: rotate(var(--rotate-card)) scale(1); }
  50% { box-shadow: 0 8px 26px color-mix(in srgb, var(--accent) 14%, transparent); transform: rotate(var(--rotate-card)) scale(1.015); }
}

html[data-density="playful"] .fav-card:nth-child(4n+1) { --rotate-card: -3deg; animation: fav-sway-a 7s ease-in-out infinite; animation-delay: 0s; }
html[data-density="playful"] .fav-card:nth-child(4n+2) { --rotate-card: 2deg; animation: fav-sway-b 8.4s ease-in-out infinite; animation-delay: 1.3s; }
html[data-density="playful"] .fav-card:nth-child(4n+3) { --rotate-card: -1.5deg; animation: fav-sway-a 7.8s ease-in-out infinite; animation-delay: 2.6s; }
html[data-density="playful"] .fav-card:nth-child(4n+4) { --rotate-card: 2.5deg; animation: fav-sway-b 6.6s ease-in-out infinite; animation-delay: 0.7s; }
html[data-density="playful"] .fav-card:hover { animation-play-state: paused; transform: rotate(0deg) translateY(-3px); }
@keyframes fav-sway-a {
  0%, 100% { transform: rotate(var(--rotate-card)) translateY(0); }
  50% { transform: rotate(calc(var(--rotate-card) - 2.5deg)) translateY(-6px); }
}
@keyframes fav-sway-b {
  0%, 100% { transform: rotate(var(--rotate-card)) translateY(0); }
  50% { transform: rotate(calc(var(--rotate-card) + 2.5deg)) translateY(-5px); }
}

/* ---------- 10. FORMS ---------- */
.field { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: var(--space-3); font-size: 0.95rem; color: var(--muted); min-width: 0; max-width: 100%; }
.field-label-strong { color: var(--text); font-weight: 600; }
.field input[type="text"], .field input[type="email"], .field textarea, .field select {
  background: var(--bg-surface); color: var(--text); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 0.65rem 0.8rem; font: inherit; font-family: var(--font-body);
  width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); }
.field textarea { resize: vertical; }
/* Belt-and-braces: nothing inside a form should ever be able to force
   horizontal scroll of the page, even if a control ignores width:100%. */
.questionnaire-form, .contact-form, .qa-body, .qa-repeat { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
input, select, textarea { max-width: 100%; }
.switch-row { display: flex; align-items: flex-start; gap: var(--space-2); margin: var(--space-2) 0; color: var(--muted); }
.switch-row input { margin-top: 0.3rem; }

.privacy-note { font-size: 0.85rem; color: var(--muted); background: rgba(148,163,184,0.08); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); }

.qa-panel { border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: var(--space-2); background: var(--bg-surface); overflow: hidden; }
.qa-panel > summary { padding: var(--space-3); font-weight: 600; font-family: var(--font-display); }
.qa-panel[open] > summary { border-bottom: 1px solid var(--border); }
.qa-body { padding: var(--space-3); }
.qa-desc { color: var(--muted); font-size: 0.9rem; }
.qa-repeat { border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: var(--space-3); margin-bottom: var(--space-3); }
.qa-repeat legend { font-family: var(--font-mono); text-transform: uppercase; font-size: 0.75rem; color: var(--accent); letter-spacing: 0.06em; padding: 0 0.4rem; }
.qa-footer { margin-top: var(--space-4); border-top: 1px solid var(--border); padding-top: var(--space-4); }

.form-success {
  background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid var(--accent); color: var(--text);
  border-radius: var(--radius-sm); padding: var(--space-3); margin-bottom: var(--space-3);
}

/* ---------- 11. FOOTER ---------- */
.site-footer { padding: var(--space-6) 0 var(--space-7); }
.footer-inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.footer-tagline { font-family: var(--font-display); font-size: 1.2rem; }
.back-to-top { margin-top: var(--space-2); }

/* ---------- 12. SCROLL PROGRESS ---------- */
.scroll-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 1100; background: transparent; }
.scroll-progress-fill { height: 100%; width: 0%; background: var(--accent); transition: width 80ms linear; }

/* ---------- 13. AURA MAP (floating navigation) — required placement rules ---------- */
.aura-map {
  position: fixed;
  z-index: 1000;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(5.75rem, env(safe-area-inset-bottom));
}
@media (max-width: 480px) {
  .aura-map {
    right: 0.9rem;
    bottom: max(6.5rem, env(safe-area-inset-bottom));
  }
}

.aura-map-button {
  display: flex; align-items: center; gap: 0.5rem;
  min-width: 48px; min-height: 48px;
  padding: 0 1.1rem;
  border-radius: 999px;
  background: var(--bg-surface);
  border: 1.5px solid var(--accent);
  color: var(--text);
  box-shadow: var(--shadow-md);
  cursor: pointer;
}
.aura-map-button[aria-expanded="true"] { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent), var(--shadow-md); }
html[data-density="calm"] .aura-map-dot { animation: dot-breathe 6s ease-in-out infinite; }
html[data-density="playful"] .aura-map-dot { animation: dot-breathe 2.2s ease-in-out infinite, hue-drift 9s ease-in-out infinite; }
@keyframes dot-breathe { 0%, 100% { box-shadow: 0 0 0 transparent; } 50% { box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 70%, transparent); } }
.aura-map-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.aura-map-label { font-weight: 600; font-size: 0.9rem; white-space: nowrap; }

.aura-map-panel {
  position: absolute; bottom: calc(100% + 0.75rem); right: 0;
  width: min(16rem, calc(100vw - 2rem));
  max-height: min(70vh, 28rem);
  overflow-y: auto;
  background: var(--bg-surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-3);
}
.aura-map-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.aura-map-panel-title { font-family: var(--font-display); font-weight: 600; }
.aura-map-list li .aura-map-link {
  display: block; width: 100%; text-align: left;
  padding: 0.6rem 0.7rem; border-radius: var(--radius-sm);
  background: none; border: none; cursor: pointer;
  font: inherit; text-decoration: none; color: var(--text);
}
.aura-map-list li .aura-map-link:hover, .aura-map-list li .aura-map-link.is-active { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }

/* ---------- 14. APPEARANCE PANEL ---------- */
/* Positioned relative to .site-header (which is itself a positioning
   context) rather than sitting inline in the header's own box — this way
   a tall panel never inflates the sticky header itself, which is what was
   making the lower controls (density, text size, contrast, motion) become
   unreachable on short mobile viewports. The panel scrolls internally
   instead. */
.appearance-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 950;
  max-height: min(78vh, 34rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
  background: var(--bg-surface);
  box-shadow: var(--shadow-md);
}
.appearance-panel-inner { max-width: var(--container-max); margin: 0 auto; padding: var(--space-4); }
.appearance-panel-header { display: flex; align-items: center; justify-content: space-between; }
.appearance-panel-desc { color: var(--muted); font-size: 0.9rem; }
.appearance-hint { color: var(--muted); font-size: 0.82rem; margin-top: var(--space-1); }
.appearance-group { border: none; padding: 0; margin: 0 0 var(--space-3); }
.appearance-group legend { font-family: var(--font-mono); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.08em; color: var(--muted); margin-bottom: var(--space-1); }
.mode-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--space-2); }
.mode-option, .segmented label {
  display: flex; align-items: center; gap: 0.5rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem; cursor: pointer; font-size: 0.88rem;
}
.mode-option:has(input:checked), .segmented label:has(input:checked) { border-color: var(--accent); color: var(--accent); }
.segmented { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* Literal point-size demonstration — these use the absolute "pt" unit,
   so each glyph renders at its true size no matter what text-size
   setting is currently active on the rest of the page. */
.text-size-demo { display: flex; align-items: baseline; gap: 0.4rem; }
.demo-a { font-family: var(--font-display); line-height: 1; color: var(--text); }
.demo-a-sm { font-size: 10pt; }
.demo-a-md { font-size: 12pt; }
.demo-a-lg { font-size: 14pt; }
.demo-num { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); }
.appearance-controls-row { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-3); }

/* ================================================================
   15. VISUAL MODES
   Each mode restyles tokens, background art, and card texture only —
   content, order, and navigation stay identical across every mode.
   "No stark white" is a hard rule below: every light-leaning mode
   uses a cream, gold, or sepia base instead.
   ================================================================ */

/* ---- Quiet Haven — soft, hushed lavender and violet, a faint floral
   scatter in the background. Peaceful and unhurried. ---- */
html[data-mode="quiet-haven"] {
  --bg: #362f47;
  --bg-surface: #453c5c;
  --accent: #c9a9e0;
  --text: #ece6d6;
  --border: rgba(224,201,235,0.16);
  --border-strong: rgba(224,201,235,0.3);
  --fav-bg: #ece6d6;
  --fav-text: #362f47;
  --fav-label: #6a4f82;
  --fav-border: rgba(224,201,235,0.45);
  --rotate-card: 0deg;
  --font-display: "Century Gothic", "Futura", "Avenir Next", "Trebuchet MS", -apple-system, sans-serif;
  --font-body: "Segoe UI Light", "Helvetica Neue Light", "Segoe UI", -apple-system, sans-serif;
  --mode-bg-image:
    radial-gradient(circle at 12% 20%, rgba(224,184,208,0.14) 0 3%, transparent 9%),
    radial-gradient(circle at 16% 24%, rgba(201,169,224,0.12) 0 2%, transparent 7%),
    radial-gradient(circle at 82% 14%, rgba(224,184,208,0.13) 0 3%, transparent 9%),
    radial-gradient(circle at 86% 18%, rgba(201,169,224,0.11) 0 2%, transparent 7%),
    radial-gradient(circle at 28% 72%, rgba(224,184,208,0.12) 0 3%, transparent 9%),
    radial-gradient(circle at 32% 76%, rgba(201,169,224,0.1) 0 2%, transparent 7%),
    radial-gradient(circle at 70% 82%, rgba(224,184,208,0.13) 0 3%, transparent 9%),
    radial-gradient(circle at 74% 86%, rgba(201,169,224,0.11) 0 2%, transparent 7%),
    linear-gradient(180deg, #362f47 0%, #2c2639 100%);
}
html[data-mode="quiet-haven"] .button-primary { color: #2a1f38; }
html[data-mode="quiet-haven"] .card, html[data-mode="quiet-haven"] .qa-panel {
  border-color: var(--border-strong);
}
html[data-mode="quiet-haven"] .tag { background: rgba(201,169,224,0.18); color: #dcc4ec; }
html[data-mode="quiet-haven"] .orbit { border-color: rgba(224,201,235,0.2); }

/* ---- Future Folk — the site's home base. Per request, this mode
   keeps the original Midnight/Electric palette exactly as designed;
   its personality comes from shape and a faint retro-future scanline,
   built only from colors already in the palette. ---- */
html[data-mode="future-folk"] {
  --font-display: 'Fredoka', "Century Gothic", "Futura", "Avenir Next", "Trebuchet MS", -apple-system, sans-serif;
  --mode-bg-image:
    repeating-linear-gradient(0deg, rgba(241,245,249,0.025) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 20% 15%, rgba(245,79,27,0.10), transparent 30%),
    radial-gradient(circle at 82% 70%, rgba(245,79,27,0.08), transparent 32%);
}
html[data-mode="future-folk"] .card, html[data-mode="future-folk"] .qa-panel { border-radius: var(--radius-lg); }
html[data-mode="future-folk"] .button-primary, html[data-mode="future-folk"] .aura-map-button { border-radius: 999px; }
html[data-mode="future-folk"] .orbit { border-style: solid; opacity: 0.6; }
html[data-mode="future-folk"] .tag { box-shadow: 0 0 8px rgba(245,79,27,0.35); }
html[data-mode="future-folk"] .featured-photo-placeholder { border: 4px solid var(--accent); box-shadow: 0 0 0 2px var(--bg), 0 0 14px rgba(245,79,27,0.35); }

/* ---- Living Scrapbook — deep botanical greens, vines, kraft-tape cards ---- */
html[data-mode="living-scrapbook"] {
  --bg: #202f22;
  --bg-surface: #2c3f2b;
  --accent: #a9c98a;
  --border: rgba(226,216,185,0.16);
  --border-strong: rgba(226,216,185,0.3);
  --radius-md: 4px; --radius-lg: 10px;
  --fav-bg: #bccf9f;
  --fav-text: #263019;
  --fav-label: #3f5c2e;
  --fav-border: rgba(127,174,111,0.55);
  --rotate-card: -2deg;
  --font-display: 'Kaushan Script', "Segoe UI Semibold", "Helvetica Neue", "Trebuchet MS", -apple-system, sans-serif;
  --font-body: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mode-bg-image:
    radial-gradient(circle at 8% 18%, rgba(169,201,138,0.16), transparent 14%),
    radial-gradient(circle at 88% 12%, rgba(169,201,138,0.13), transparent 12%),
    radial-gradient(circle at 22% 68%, rgba(169,201,138,0.15), transparent 14%),
    radial-gradient(circle at 72% 82%, rgba(169,201,138,0.13), transparent 12%),
    radial-gradient(circle at 48% 42%, rgba(169,201,138,0.08), transparent 20%),
    repeating-linear-gradient(118deg, rgba(169,201,138,0.07) 0 2px, transparent 2px 64px),
    repeating-linear-gradient(28deg, rgba(169,201,138,0.05) 0 2px, transparent 2px 92px),
    linear-gradient(180deg, #223626 0%, #1b2a1c 100%);
}
html[data-mode="living-scrapbook"] h1, html[data-mode="living-scrapbook"] h2, html[data-mode="living-scrapbook"] h3,
html[data-mode="living-scrapbook"] .aura-map-panel-title, html[data-mode="living-scrapbook"] .featured-tagline,
html[data-mode="living-scrapbook"] .site-brand, html[data-mode="living-scrapbook"] .footer-tagline {
  font-weight: 400; letter-spacing: 0em;
}
html[data-mode="living-scrapbook"] .button-primary { color: #1a2410; }
html[data-mode="living-scrapbook"] .card,
html[data-mode="living-scrapbook"] .qa-panel {
  position: relative;
  border-style: solid; border-width: 1px;
  background-image: radial-gradient(rgba(241,245,249,0.03) 1px, transparent 1px);
  background-size: 14px 14px;
}
html[data-mode="living-scrapbook"] .card::before,
html[data-mode="living-scrapbook"] .qa-panel > summary::before {
  content: ""; position: absolute; top: -0.5rem; left: 1.2rem;
  width: 1.6rem; height: 1.6rem;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%3E%3Cpath%20d%3D%27M20%204%20C30%2010%2030%2026%2020%2036%20C10%2026%2010%2010%2020%204%20Z%27%20fill%3D%27%23a9c98a%27%20fill-opacity%3D%270.55%27%2F%3E%3Cpath%20d%3D%27M20%206%20L20%2034%27%20stroke%3D%27%237fae6f%27%20stroke-width%3D%271.2%27%20fill%3D%27none%27%2F%3E%3Cpath%20d%3D%27M20%2014%20L14%2011%20M20%2020%20L27%2017%20M20%2026%20L14%2024%27%20stroke%3D%27%237fae6f%27%20stroke-width%3D%270.8%27%20fill%3D%27none%27%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  transform: rotate(-8deg);
}
html[data-mode="living-scrapbook"] .fav-tape::before {
  content: "";
  position: absolute; top: -0.55rem; left: 50%; transform: translateX(-50%) rotate(-6deg);
  width: 1.4rem; height: 1.4rem;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%3E%3Cpath%20d%3D%27M20%204%20C30%2010%2030%2026%2020%2036%20C10%2026%2010%2010%2020%204%20Z%27%20fill%3D%27%23a9c98a%27%20fill-opacity%3D%270.55%27%2F%3E%3Cpath%20d%3D%27M20%206%20L20%2034%27%20stroke%3D%27%237fae6f%27%20stroke-width%3D%271.2%27%20fill%3D%27none%27%2F%3E%3Cpath%20d%3D%27M20%2014%20L14%2011%20M20%2020%20L27%2017%20M20%2026%20L14%2024%27%20stroke%3D%27%237fae6f%27%20stroke-width%3D%270.8%27%20fill%3D%27none%27%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}
html[data-mode="living-scrapbook"] .tag { background: rgba(169,201,138,0.18); color: #cfe6b8; }

/* ---- Open Notebook — black notebook page, multicolor gel-pen doodles ---- */
html[data-mode="open-notebook"] {
  --bg: #0d0d16;
  --bg-surface: #16161f;
  --text: #d9d6de;
  --accent: #ff6ec7;
  --border: rgba(255,255,255,0.1);
  --border-strong: rgba(255,255,255,0.22);
  --fav-bg: #16161f;
  --fav-text: #d9d6de;
  --fav-label: #2fe0c4;
  --fav-border: rgba(255,255,255,0.18);
  --rotate-card: 0deg;
  --font-display: 'Patrick Hand', "Bradley Hand", "Segoe Script", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: "Segoe UI Light", "Helvetica Neue Light", -apple-system, "Segoe UI", sans-serif;
  --mode-bg-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 34px),
    radial-gradient(circle at 14% 22%, rgba(255,110,199,0.16), transparent 16%),
    radial-gradient(circle at 82% 18%, rgba(77,227,255,0.16), transparent 16%),
    radial-gradient(circle at 28% 76%, rgba(182,255,77,0.13), transparent 16%),
    radial-gradient(circle at 76% 82%, rgba(185,139,255,0.16), transparent 16%),
    radial-gradient(circle at 55% 48%, rgba(255,182,72,0.12), transparent 18%),
    linear-gradient(180deg, #0d0d16 0%, #0a0a10 100%);
}
html[data-mode="open-notebook"] .card:nth-child(5n+1), html[data-mode="open-notebook"] .qa-panel:nth-of-type(5n+1) { border-color: #ff6ec7; box-shadow: 0 0 14px rgba(255,110,199,0.16); }
html[data-mode="open-notebook"] .card:nth-child(5n+2), html[data-mode="open-notebook"] .qa-panel:nth-of-type(5n+2) { border-color: #4de3ff; box-shadow: 0 0 14px rgba(77,227,255,0.16); }
html[data-mode="open-notebook"] .card:nth-child(5n+3), html[data-mode="open-notebook"] .qa-panel:nth-of-type(5n+3) { border-color: #b6ff4d; box-shadow: 0 0 14px rgba(182,255,77,0.14); }
html[data-mode="open-notebook"] .card:nth-child(5n+4), html[data-mode="open-notebook"] .qa-panel:nth-of-type(5n+4) { border-color: #b98bff; box-shadow: 0 0 14px rgba(185,139,255,0.16); }
html[data-mode="open-notebook"] .card:nth-child(5n+5), html[data-mode="open-notebook"] .qa-panel:nth-of-type(5n+5) { border-color: #ffb648; box-shadow: 0 0 14px rgba(255,182,72,0.14); }
html[data-mode="open-notebook"] .fav-card { box-shadow: 0 0 16px rgba(255,255,255,0.06); }
html[data-mode="open-notebook"] .tag { background: rgba(255,110,199,0.18); color: #ffb3e1; }
html[data-mode="open-notebook"] .fav-tape::before { background: rgba(47,224,196,0.45); }
html[data-mode="open-notebook"] h1, html[data-mode="open-notebook"] h2, html[data-mode="open-notebook"] h3 { font-style: italic; }

/* ---- Workshop — dark wood grain + hammered steel panels ---- */
html[data-mode="workshop"] {
  --bg: #35240f;
  --bg-surface: #3c4046;
  --accent: #b8bec7;
  --border: rgba(255,255,255,0.14);
  --border-strong: rgba(255,255,255,0.26);
  --radius-sm: 2px; --radius-md: 3px; --radius-lg: 6px;
  --fav-bg: #ced2d7;
  --fav-text: #2a2d31;
  --fav-label: #4a4f57;
  --fav-border: rgba(139,146,155,0.5);
  --rotate-card: 0deg;
  --font-display: 'Anton', "Arial Black", "Franklin Gothic Heavy", "Segoe UI Black", Impact, sans-serif;
  --font-body: "Segoe UI", Arial, "Helvetica Neue", sans-serif;
  --mode-bg-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.2) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 11px),
    linear-gradient(180deg, #4a3320 0%, #2e2013 100%);
}
html[data-mode="workshop"] h1, html[data-mode="workshop"] h2, html[data-mode="workshop"] h3 {
  text-transform: uppercase; letter-spacing: 0.02em;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  html[data-mode="workshop"] h1, html[data-mode="workshop"] h2, html[data-mode="workshop"] h3 {
    background-image:
      url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3" stitchTiles="stitch" result="noise"/><feColorMatrix in="noise" type="matrix" values="0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0 0 0 1 0" result="grey"/></filter><rect width="120" height="120" filter="url(%23n)"/></svg>'),
      linear-gradient(var(--accent), var(--accent));
    background-blend-mode: multiply;
    background-size: 120px 120px, auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
html[data-mode="workshop"] .card, html[data-mode="workshop"] .qa-panel {
  position: relative;
  border-width: 2px;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1.6px), linear-gradient(135deg, #4a4f57, #34383d);
  background-size: 9px 9px, auto;
}
html[data-mode="workshop"] .card::before, html[data-mode="workshop"] .card::after,
html[data-mode="workshop"] .qa-panel::before, html[data-mode="workshop"] .qa-panel::after {
  content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; top: 0.5rem;
  background: radial-gradient(circle at 35% 30%, #d7dbe0, #24272b);
  box-shadow: 0 1px 1px rgba(0,0,0,0.5);
}
html[data-mode="workshop"] .card::before, html[data-mode="workshop"] .qa-panel::before { left: 0.5rem; }
html[data-mode="workshop"] .card::after, html[data-mode="workshop"] .qa-panel::after { right: 0.5rem; }
html[data-mode="workshop"] .tag { background: color-mix(in srgb, var(--accent) 22%, transparent); color: #dfe2e6; }
/* Tiny hardware screw in place of tape, on the three "taped" boxes. */
html[data-mode="workshop"] .fav-tape::before {
  content: "";
  position: absolute; top: -0.55rem; left: 50%; transform: translateX(-50%);
  width: 1.3rem; height: 1.3rem;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%2720%27%20r%3D%2713%27%20fill%3D%27%238b929b%27%20fill-opacity%3D%270.3%27%20stroke%3D%27%23b8bec7%27%20stroke-width%3D%272.2%27%2F%3E%3Cpath%20d%3D%27M9%2020%20L31%2020%20M20%209%20L20%2031%27%20stroke%3D%27%235c6169%27%20stroke-width%3D%272.6%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

/* ---- Gallery Light — sunny, golden, shimmering, rounded and gleaming ---- */
html[data-mode="gallery-light"] {
  --bg: #fbf1dc;
  --bg-surface: #fff8ea;
  --text: #5c2d73;
  --muted: #8a744a;
  --accent: #1f8f7a;
  --border: rgba(139,100,20,0.18);
  --border-strong: rgba(139,100,20,0.32);
  --focus-ring: #5c2d73;
  --radius-md: 22px; --radius-lg: 34px;
  --space-6: 5rem; --space-7: 7.5rem;
  --mode-bg-size: 200% 200%;
  --mode-bg-image:
    radial-gradient(circle at 20% 10%, rgba(232,179,77,0.4), transparent 40%),
    radial-gradient(circle at 85% 25%, rgba(255,223,150,0.35), transparent 35%),
    radial-gradient(circle at 50% 95%, rgba(232,179,77,0.25), transparent 45%),
    linear-gradient(180deg, #fbf1dc 0%, #f6e4bf 100%);
  --fav-bg: #fff8ea;
  --fav-text: #5c2d73;
  --fav-label: #1f8f7a;
  --fav-border: rgba(139,100,20,0.28);
  --font-display: "Big Caslon", "Hoefler Text", Baskerville, Garamond, "Times New Roman", serif;
  --font-body: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --rotate-card: 0deg;
}
@keyframes shimmer-drift { 0% { background-position: 0% 0%; } 100% { background-position: 100% 30%; } }
html[data-mode="gallery-light"] h1, html[data-mode="gallery-light"] h2, html[data-mode="gallery-light"] h3,
html[data-mode="gallery-light"] .aura-map-panel-title, html[data-mode="gallery-light"] .featured-tagline,
html[data-mode="gallery-light"] .site-brand, html[data-mode="gallery-light"] .footer-tagline {
  font-style: italic; font-weight: 500; letter-spacing: 0.02em;
}
html[data-mode="gallery-light"] body { line-height: 1.7; }
html[data-mode="gallery-light"] .skip-link { background: #5c2d73; color: #fff8ea; }
html[data-mode="gallery-light"] .site-header, html[data-mode="gallery-light"] .appearance-panel { background: rgba(255,248,234,0.92); }
html[data-mode="gallery-light"] .card, html[data-mode="gallery-light"] .qa-panel {
  box-shadow: 0 10px 26px rgba(201,138,15,0.18);
  border: 1.5px solid #e8b34d;
}
html[data-mode="gallery-light"] .tag { background: transparent; border: 1px solid #c9860f; color: #a5690a; }
html[data-mode="gallery-light"] .button-primary { box-shadow: 0 4px 14px rgba(31,143,122,0.35); color: #f3fbf9; }
/* Tiny lavender flowers in place of tape, on the three "taped" boxes. */
html[data-mode="gallery-light"] .fav-tape::before {
  content: "";
  position: absolute; top: -0.6rem; left: 50%; transform: translateX(-50%);
  width: 1.4rem; height: 1.4rem;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%3E%3Cg%20fill%3D%27%23c9a9e0%27%20fill-opacity%3D%270.85%27%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%2712%27%20r%3D%276%27%2F%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2718%27%20r%3D%276%27%2F%3E%3Ccircle%20cx%3D%2729%27%20cy%3D%2718%27%20r%3D%276%27%2F%3E%3Ccircle%20cx%3D%2714%27%20cy%3D%2727%27%20r%3D%276%27%2F%3E%3Ccircle%20cx%3D%2726%27%20cy%3D%2727%27%20r%3D%276%27%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%2720%27%20r%3D%274.5%27%20fill%3D%27%23efe0dd%27%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.9;
}

/* ---- Rooted Heritage — sepia, aged newsprint, halftone texture ---- */
html[data-mode="rooted-heritage"] {
  --bg: #ddcda3;
  --bg-surface: #f1e6c9;
  --text: #3b2f22;
  --muted: #6b5a3f;
  --accent: #52683c;
  --border: rgba(59,47,34,0.25);
  --border-strong: rgba(59,47,34,0.42);
  --focus-ring: #3b2f22;
  --mode-bg-image:
    radial-gradient(circle at 50% 50%, transparent 50%, rgba(59,47,34,0.2) 100%),
    repeating-radial-gradient(circle at 0 0, rgba(59,47,34,0.09) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #ddcda3 0%, #d2c093 100%);
  --fav-bg: #c9b384;
  --fav-text: #3b2f22;
  --fav-label: #4a3c28;
  --fav-border: #c9b384;
  --rotate-card: 0deg;
  --font-display: 'Bodoni Moda', Rockwell, "Copperplate", "American Typewriter", Georgia, serif;
  --font-body: "American Typewriter", Georgia, "Iowan Old Style", "Times New Roman", serif;
}
html[data-mode="rooted-heritage"] .skip-link { background: #3b2f22; color: #efe3c8; }
html[data-mode="rooted-heritage"] .site-header, html[data-mode="rooted-heritage"] .appearance-panel { background: rgba(241,230,201,0.92); }
html[data-mode="rooted-heritage"] .card,
html[data-mode="rooted-heritage"] .qa-panel,
html[data-mode="rooted-heritage"] .archive-thumb {
  border-width: 1px; border-style: double; border-color: var(--border-strong);
  box-shadow: inset 0 0 0 1px rgba(59,47,34,0.06);
}
html[data-mode="rooted-heritage"] .fav-card::after {
  content: ""; position: absolute; inset: 0.35rem; border: 1px solid rgba(59,47,34,0.18); pointer-events: none;
}
html[data-mode="rooted-heritage"] h1, html[data-mode="rooted-heritage"] h2, html[data-mode="rooted-heritage"] h3,
html[data-mode="rooted-heritage"] .aura-map-panel-title, html[data-mode="rooted-heritage"] .featured-tagline,
html[data-mode="rooted-heritage"] .site-brand, html[data-mode="rooted-heritage"] .footer-tagline {
  font-weight: 700; letter-spacing: 0.005em;
  transform: scaleX(0.8); transform-origin: left center;
}
html[data-mode="rooted-heritage"] body { letter-spacing: 0.01em; }
html[data-mode="rooted-heritage"] .tag { background: transparent; border: 1px solid var(--accent); color: var(--accent); }
/* Tiny tree-of-life symbol in place of tape, on the three "taped" boxes. */
html[data-mode="rooted-heritage"] .fav-tape::before {
  content: "";
  position: absolute; top: -0.6rem; left: 50%; transform: translateX(-50%);
  width: 1.5rem; height: 1.5rem;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%3E%3Cpath%20d%3D%27M20%2036%20L20%2022%27%20stroke%3D%27%2352683c%27%20stroke-width%3D%272%27%20fill%3D%27none%27%2F%3E%3Cpath%20d%3D%27M20%2026%20L13%2020%20M20%2024%20L27%2018%27%20stroke%3D%27%2352683c%27%20stroke-width%3D%271.4%27%20fill%3D%27none%27%2F%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%2714%27%20r%3D%278%27%20fill%3D%27none%27%20stroke%3D%27%2352683c%27%20stroke-width%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2719%27%20r%3D%275.5%27%20fill%3D%27none%27%20stroke%3D%27%236b8050%27%20stroke-width%3D%271.4%27%2F%3E%3Ccircle%20cx%3D%2728%27%20cy%3D%2719%27%20r%3D%275.5%27%20fill%3D%27none%27%20stroke%3D%27%236b8050%27%20stroke-width%3D%271.4%27%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.85;
}

/* ---- Midnight Vale — almost-black, crimson, and silver. Heavy-hearted,
   still, and quiet rather than lively: no bounce, no wobble — just a
   slow, somber pulse, like a single low, held note. Delicate silver
   roses mark each card, the way tape marks a scrapbook page. ---- */
html[data-mode="midnight-vale"] {
  --bg: #0a0a0c;
  --bg-surface: #16131a;
  --accent: #b3182a;
  --text: #d8d4d6;
  --muted: #8b929b;
  --border: rgba(199,205,212,0.14);
  --border-strong: rgba(199,205,212,0.26);
  --focus-ring: #c7cdd4;
  --mode-bg-image:
    url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><g stroke="%234a4151" fill="none"><circle cx="150" cy="150" r="120" stroke-width="0.8" opacity="0.2"/><circle cx="150" cy="150" r="96" stroke-width="0.8" opacity="0.16"/><circle cx="150" cy="150" r="60" stroke-width="0.8" opacity="0.22"/><circle cx="150" cy="150" r="30" stroke-width="0.8" opacity="0.26"/><path d="M150.0,62.0 L226.2,194.0 L73.8,194.0 Z" stroke-width="0.7" opacity="0.24"/><path d="M150.0,238.0 L73.8,106.0 L226.2,106.0 Z" stroke-width="0.7" opacity="0.24"/><path d="M150.0,62.0 Q189.8,127.0 226.2,194.0" stroke-width="0.5" opacity="0.15"/><path d="M226.2,106.0 Q189.8,173.0 150.0,238.0" stroke-width="0.5" opacity="0.15"/><path d="M226.2,194.0 Q150.0,196.0 73.8,194.0" stroke-width="0.5" opacity="0.15"/><path d="M150.0,238.0 Q110.2,173.0 73.8,106.0" stroke-width="0.5" opacity="0.15"/><path d="M73.8,194.0 Q110.2,127.0 150.0,62.0" stroke-width="0.5" opacity="0.15"/><path d="M73.8,106.0 Q150.0,104.0 226.2,106.0" stroke-width="0.5" opacity="0.15"/><g stroke-width="0.85" opacity="0.30"><g transform="rotate(0 150 150)"><path d="M150,150 Q174,122 212,112 Q248,104 268,118 Q250,134 216,142 Q184,149 150,150 Z" stroke-width="0.85"/><path d="M160,140 Q192,130 226,122" stroke-width="0.5"/><path d="M157,150 Q194,143 230,133" stroke-width="0.5"/><path d="M154,150 Q190,148 222,142" stroke-width="0.4"/><ellipse cx="248" cy="118" rx="3" ry="2" fill="%234a4151" stroke="none" opacity="0.55"/><circle cx="200" cy="128" r="1.4" fill="%234a4151" stroke="none" opacity="0.4"/></g><g transform="rotate(60 150 150)"><path d="M150,150 Q174,122 212,112 Q248,104 268,118 Q250,134 216,142 Q184,149 150,150 Z" stroke-width="0.85"/><path d="M160,140 Q192,130 226,122" stroke-width="0.5"/><path d="M157,150 Q194,143 230,133" stroke-width="0.5"/><path d="M154,150 Q190,148 222,142" stroke-width="0.4"/><ellipse cx="248" cy="118" rx="3" ry="2" fill="%234a4151" stroke="none" opacity="0.55"/><circle cx="200" cy="128" r="1.4" fill="%234a4151" stroke="none" opacity="0.4"/></g><g transform="rotate(120 150 150)"><path d="M150,150 Q174,122 212,112 Q248,104 268,118 Q250,134 216,142 Q184,149 150,150 Z" stroke-width="0.85"/><path d="M160,140 Q192,130 226,122" stroke-width="0.5"/><path d="M157,150 Q194,143 230,133" stroke-width="0.5"/><path d="M154,150 Q190,148 222,142" stroke-width="0.4"/><ellipse cx="248" cy="118" rx="3" ry="2" fill="%234a4151" stroke="none" opacity="0.55"/><circle cx="200" cy="128" r="1.4" fill="%234a4151" stroke="none" opacity="0.4"/></g><g transform="rotate(180 150 150)"><path d="M150,150 Q174,122 212,112 Q248,104 268,118 Q250,134 216,142 Q184,149 150,150 Z" stroke-width="0.85"/><path d="M160,140 Q192,130 226,122" stroke-width="0.5"/><path d="M157,150 Q194,143 230,133" stroke-width="0.5"/><path d="M154,150 Q190,148 222,142" stroke-width="0.4"/><ellipse cx="248" cy="118" rx="3" ry="2" fill="%234a4151" stroke="none" opacity="0.55"/><circle cx="200" cy="128" r="1.4" fill="%234a4151" stroke="none" opacity="0.4"/></g><g transform="rotate(240 150 150)"><path d="M150,150 Q174,122 212,112 Q248,104 268,118 Q250,134 216,142 Q184,149 150,150 Z" stroke-width="0.85"/><path d="M160,140 Q192,130 226,122" stroke-width="0.5"/><path d="M157,150 Q194,143 230,133" stroke-width="0.5"/><path d="M154,150 Q190,148 222,142" stroke-width="0.4"/><ellipse cx="248" cy="118" rx="3" ry="2" fill="%234a4151" stroke="none" opacity="0.55"/><circle cx="200" cy="128" r="1.4" fill="%234a4151" stroke="none" opacity="0.4"/></g><g transform="rotate(300 150 150)"><path d="M150,150 Q174,122 212,112 Q248,104 268,118 Q250,134 216,142 Q184,149 150,150 Z" stroke-width="0.85"/><path d="M160,140 Q192,130 226,122" stroke-width="0.5"/><path d="M157,150 Q194,143 230,133" stroke-width="0.5"/><path d="M154,150 Q190,148 222,142" stroke-width="0.4"/><ellipse cx="248" cy="118" rx="3" ry="2" fill="%234a4151" stroke="none" opacity="0.55"/><circle cx="200" cy="128" r="1.4" fill="%234a4151" stroke="none" opacity="0.4"/></g></g><g stroke-width="0.6" opacity="0.20"><g transform="rotate(30 150 150)"><path d="M150,150 Q164,134 184,128 Q202,124 212,132 Q202,140 186,143 Q168,146 150,150 Z" stroke-width="0.6"/><circle cx="206" cy="130" r="1.6" fill="%234a4151" stroke="none" opacity="0.4"/></g><g transform="rotate(90 150 150)"><path d="M150,150 Q164,134 184,128 Q202,124 212,132 Q202,140 186,143 Q168,146 150,150 Z" stroke-width="0.6"/><circle cx="206" cy="130" r="1.6" fill="%234a4151" stroke="none" opacity="0.4"/></g><g transform="rotate(150 150 150)"><path d="M150,150 Q164,134 184,128 Q202,124 212,132 Q202,140 186,143 Q168,146 150,150 Z" stroke-width="0.6"/><circle cx="206" cy="130" r="1.6" fill="%234a4151" stroke="none" opacity="0.4"/></g><g transform="rotate(210 150 150)"><path d="M150,150 Q164,134 184,128 Q202,124 212,132 Q202,140 186,143 Q168,146 150,150 Z" stroke-width="0.6"/><circle cx="206" cy="130" r="1.6" fill="%234a4151" stroke="none" opacity="0.4"/></g><g transform="rotate(270 150 150)"><path d="M150,150 Q164,134 184,128 Q202,124 212,132 Q202,140 186,143 Q168,146 150,150 Z" stroke-width="0.6"/><circle cx="206" cy="130" r="1.6" fill="%234a4151" stroke="none" opacity="0.4"/></g><g transform="rotate(330 150 150)"><path d="M150,150 Q164,134 184,128 Q202,124 212,132 Q202,140 186,143 Q168,146 150,150 Z" stroke-width="0.6"/><circle cx="206" cy="130" r="1.6" fill="%234a4151" stroke="none" opacity="0.4"/></g></g><ellipse cx="150" cy="150" rx="11" ry="6" stroke-width="0.8" opacity="0.42"/><circle cx="150" cy="150" r="2.2" fill="%234a4151" stroke="none" opacity="0.55"/><line x1="150" y1="150" x2="150" y2="132" stroke-width="0.6" opacity="0.2"/><line x1="150" y1="150" x2="150" y2="168" stroke-width="0.6" opacity="0.2"/><line x1="150" y1="150" x2="132" y2="150" stroke-width="0.6" opacity="0.2"/><line x1="150" y1="150" x2="168" y2="150" stroke-width="0.6" opacity="0.2"/><g opacity="0.10" stroke-width="0.5"><line x1="150" y1="150" x2="150" y2="10"/><line x1="150" y1="150" x2="150" y2="290"/><line x1="150" y1="150" x2="10" y2="150"/><line x1="150" y1="150" x2="290" y2="150"/><line x1="150" y1="150" x2="51" y2="51"/><line x1="150" y1="150" x2="249" y2="51"/><line x1="150" y1="150" x2="51" y2="249"/><line x1="150" y1="150" x2="249" y2="249"/></g></g><g fill="%234a4151" opacity="0.28" stroke="none"><path d="M34,23 L37,29 L43,32 L37,35 L34,41 L31,35 L25,32 L31,29 Z"/><path d="M266,23 L269,29 L275,32 L269,35 L266,41 L263,35 L257,32 L263,29 Z"/><path d="M34,259 L37,265 L43,268 L37,271 L34,277 L31,271 L25,268 L31,265 Z"/><path d="M266,259 L269,265 L275,268 L269,271 L266,277 L263,271 L257,268 L263,265 Z"/></g><g fill="%234a4151" opacity="0.22" stroke="none"><circle cx="150" cy="18" r="1.3"/><circle cx="150" cy="282" r="1.3"/><circle cx="18" cy="150" r="1.3"/><circle cx="282" cy="150" r="1.3"/><circle cx="90" cy="60" r="1.3"/><circle cx="210" cy="60" r="1.3"/><circle cx="90" cy="240" r="1.3"/><circle cx="210" cy="240" r="1.3"/></g></svg>'),
    radial-gradient(circle at 50% 15%, rgba(179,24,42,0.16), transparent 45%),
    radial-gradient(circle at 50% 100%, rgba(179,24,42,0.1), transparent 55%),
    linear-gradient(180deg, #0a0a0c 0%, #060506 100%);
  --mode-bg-size: 300px 300px, auto, auto, auto;
  --fav-bg: #1c1720;
  --fav-text: #d8d4d6;
  --fav-label: #c7cdd4;
  --fav-border: rgba(199,205,212,0.22);
  --rotate-card: 0deg;
  --font-display: 'UnifrakturCook', Cambria, Georgia, "Times New Roman", serif;
  --font-body: Georgia, Cambria, "Times New Roman", serif;
}
html[data-mode="midnight-vale"] h1, html[data-mode="midnight-vale"] h2, html[data-mode="midnight-vale"] h3,
html[data-mode="midnight-vale"] .aura-map-panel-title, html[data-mode="midnight-vale"] .featured-tagline,
html[data-mode="midnight-vale"] .site-brand, html[data-mode="midnight-vale"] .footer-tagline {
  letter-spacing: 0.02em; font-weight: 700;
}
html[data-mode="midnight-vale"] body { line-height: 1.75; }
html[data-mode="midnight-vale"] .button-primary { background: var(--accent); color: #f2eceb; }
html[data-mode="midnight-vale"] .card, html[data-mode="midnight-vale"] .qa-panel {
  position: relative;
  border-color: var(--border-strong);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
html[data-mode="midnight-vale"] .card::before, html[data-mode="midnight-vale"] .qa-panel > summary::before {
  content: "";
  position: absolute; top: -0.55rem; right: 1.1rem;
  width: 1.6rem; height: 1.6rem;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%2715%27%20r%3D%277.5%27%20fill%3D%27none%27%20stroke%3D%27%23c7cdd4%27%20stroke-width%3D%271.3%27%2F%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%2715%27%20r%3D%274%27%20fill%3D%27none%27%20stroke%3D%27%23c7cdd4%27%20stroke-width%3D%271%27%2F%3E%3Cpath%20d%3D%27M20%2022%20L19%2036%27%20stroke%3D%27%238b929b%27%20stroke-width%3D%271.2%27%20fill%3D%27none%27%2F%3E%3Cpath%20d%3D%27M19%2028%20Q13%2028%2012%2023%27%20stroke%3D%27%238b929b%27%20stroke-width%3D%271%27%20fill%3D%27none%27%2F%3E%3Cpath%20d%3D%27M19%2031%20Q25%2031%2026%2026%27%20stroke%3D%27%238b929b%27%20stroke-width%3D%271%27%20fill%3D%27none%27%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.75;
  transform: rotate(8deg);
  pointer-events: none;
}
html[data-mode="midnight-vale"] .fav-card::before {
  content: "";
  position: absolute; top: -0.6rem; left: -0.4rem;
  width: 1.4rem; height: 1.4rem;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%2715%27%20r%3D%277.5%27%20fill%3D%27none%27%20stroke%3D%27%23c7cdd4%27%20stroke-width%3D%271.3%27%2F%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%2715%27%20r%3D%274%27%20fill%3D%27none%27%20stroke%3D%27%23c7cdd4%27%20stroke-width%3D%271%27%2F%3E%3Cpath%20d%3D%27M20%2022%20L19%2036%27%20stroke%3D%27%238b929b%27%20stroke-width%3D%271.2%27%20fill%3D%27none%27%2F%3E%3Cpath%20d%3D%27M19%2028%20Q13%2028%2012%2023%27%20stroke%3D%27%238b929b%27%20stroke-width%3D%271%27%20fill%3D%27none%27%2F%3E%3Cpath%20d%3D%27M19%2031%20Q25%2031%2026%2026%27%20stroke%3D%27%238b929b%27%20stroke-width%3D%271%27%20fill%3D%27none%27%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.7;
  transform: rotate(-6deg);
  pointer-events: none;
  z-index: 1;
}
html[data-mode="midnight-vale"] .tag { background: rgba(179,24,42,0.22); color: #e7b3ba; }
html[data-mode="midnight-vale"] .field input[type="text"],
html[data-mode="midnight-vale"] .field input[type="email"],
html[data-mode="midnight-vale"] .field input[type="file"],
html[data-mode="midnight-vale"] .field textarea,
html[data-mode="midnight-vale"] .field select {
  border-color: var(--accent);
}
html[data-mode="midnight-vale"] .field input:focus,
html[data-mode="midnight-vale"] .field textarea:focus,
html[data-mode="midnight-vale"] .field select:focus {
  border-color: #d94a5c;
}
/* A slow, heavy pulse — like a single low heartbeat — replaces any
   bounce or wobble in this mode. */
html[data-mode="midnight-vale"] .aura-map-dot { animation: vale-pulse 4.4s ease-in-out infinite !important; background: var(--accent); }
@keyframes vale-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(179,24,42,0); }
  45% { box-shadow: 0 0 10px rgba(179,24,42,0.55); }
}
html[data-mode="midnight-vale"] .star { background: var(--accent) !important; box-shadow: 0 0 8px rgba(179,24,42,0.5) !important; animation: vale-star 5s ease-in-out infinite !important; }
@keyframes vale-star { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.85; } }

/* ================================================================
   15b. FEATURED PHOTO FRAME — per mode
   Future Folk keeps the default dashed orbit ring (see section 7b).
   ================================================================ */
html[data-mode="quiet-haven"] .featured-photo-frame::before {
  content: ""; position: absolute; inset: -1rem; border-radius: 50%;
  border: none; animation: none;
  background: radial-gradient(circle, rgba(201,169,224,0.4), transparent 70%);
  filter: blur(1px);
}

html[data-mode="living-scrapbook"] .featured-photo-frame::before { content: none; }
html[data-mode="living-scrapbook"] .frame-corner {
  opacity: 1; width: 2rem; height: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%3E%3Cpath%20d%3D%27M20%204%20C30%2010%2030%2026%2020%2036%20C10%2026%2010%2010%2020%204%20Z%27%20fill%3D%27%23a9c98a%27%20fill-opacity%3D%270.7%27%2F%3E%3Cpath%20d%3D%27M20%206%20L20%2034%27%20stroke%3D%27%237fae6f%27%20stroke-width%3D%271.2%27%20fill%3D%27none%27%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat; background-size: contain;
}
html[data-mode="living-scrapbook"] .corner-tl { top: -0.6rem; left: -0.6rem; transform: rotate(-25deg); }
html[data-mode="living-scrapbook"] .corner-tr { top: -0.6rem; right: -0.6rem; transform: rotate(100deg); }
html[data-mode="living-scrapbook"] .corner-bl { bottom: -0.6rem; left: -0.6rem; transform: rotate(-100deg); }
html[data-mode="living-scrapbook"] .corner-br { bottom: -0.6rem; right: -0.6rem; transform: rotate(205deg); }

html[data-mode="open-notebook"] .featured-photo-frame::before {
  content: ""; position: absolute; inset: -0.5rem;
  border-radius: 48% 52% 45% 55% / 55% 45% 55% 45%;
  border: 2px dashed #4de3ff; animation: none;
}

html[data-mode="workshop"] .featured-photo-placeholder { border-radius: var(--radius-md); border-width: 3px; }
html[data-mode="workshop"] .featured-photo-frame::before { content: none; }
html[data-mode="workshop"] .frame-corner {
  opacity: 1; width: 1.2rem; height: 1.2rem;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%2720%27%20r%3D%2713%27%20fill%3D%27%238b929b%27%20fill-opacity%3D%270.4%27%20stroke%3D%27%23b8bec7%27%20stroke-width%3D%272.2%27%2F%3E%3Cpath%20d%3D%27M9%2020%20L31%2020%20M20%209%20L20%2031%27%20stroke%3D%27%235c6169%27%20stroke-width%3D%272.6%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat; background-size: contain;
}
html[data-mode="workshop"] .corner-tl { top: 0.3rem; left: 0.3rem; }
html[data-mode="workshop"] .corner-tr { top: 0.3rem; right: 0.3rem; }
html[data-mode="workshop"] .corner-bl { bottom: 0.3rem; left: 0.3rem; }
html[data-mode="workshop"] .corner-br { bottom: 0.3rem; right: 0.3rem; }

html[data-mode="gallery-light"] .featured-photo-frame::before {
  content: ""; position: absolute; inset: -0.5rem; border-radius: 50%;
  border: 3px solid #e8b34d; animation: none;
  box-shadow: 0 0 18px rgba(232,179,77,0.45);
}
html[data-mode="gallery-light"] .featured-photo-placeholder { border-color: #e8b34d; }

html[data-mode="rooted-heritage"] .featured-photo-frame::before { content: none; }
html[data-mode="rooted-heritage"] .featured-photo-placeholder { border-radius: 4px; }
html[data-mode="rooted-heritage"] .frame-corner { opacity: 1; background: #3b2f22; }
html[data-mode="rooted-heritage"] .corner-tl { top: -2px; left: -2px; clip-path: polygon(0 0, 100% 0, 0 100%); }
html[data-mode="rooted-heritage"] .corner-tr { top: -2px; right: -2px; clip-path: polygon(100% 0, 100% 100%, 0 0); }
html[data-mode="rooted-heritage"] .corner-bl { bottom: -2px; left: -2px; clip-path: polygon(0 0, 0 100%, 100% 100%); }
html[data-mode="rooted-heritage"] .corner-br { bottom: -2px; right: -2px; clip-path: polygon(100% 100%, 0 100%, 100% 0); }

html[data-mode="midnight-vale"] .featured-photo-frame::before {
  content: ""; position: absolute; inset: -0.5rem; border-radius: 50%;
  border: 2px solid var(--accent); animation: none;
}
html[data-mode="midnight-vale"] .featured-photo-frame::after {
  content: ""; position: absolute; inset: -0.95rem; border-radius: 50%;
  border: 1px solid #c7cdd4;
}
html[data-mode="midnight-vale"] .featured-photo-placeholder { border-color: #c7cdd4; }

/* ---------- 16. TEXT SIZE ---------- */
html[data-text-size="sm"] { font-size: 10pt; }
html[data-text-size="md"] { font-size: 12pt; }
html[data-text-size="lg"] { font-size: 14pt; }

/* ---------- 17. HIGH CONTRAST ---------- */
html[data-contrast="high"] {
  --border: rgba(241,245,249,0.4);
  --border-strong: rgba(241,245,249,0.65);
  --muted: #cbd5e1;
}
html[data-contrast="high"][data-mode="gallery-light"],
html[data-contrast="high"][data-mode="rooted-heritage"] {
  --border: rgba(30,34,61,0.35);
  --border-strong: rgba(30,34,61,0.55);
  --muted: #333a45;
}
html[data-contrast="high"] .card,
html[data-contrast="high"] .qa-panel,
html[data-contrast="high"] .fav-card { border-width: 2px; }
html[data-contrast="high"] .tag { outline: 1px solid currentColor; }

/* ---------- 18. RESPONSIVE ---------- */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-art { order: -1; max-width: 20rem; margin: 0 auto; }
}
@media (max-width: 600px) {
  .section { padding: var(--space-6) 0; }
  .site-header-inner { flex-wrap: wrap; }
  .appearance-toggle span:last-child { display: none; }
  .card[open] { grid-column: auto; }
}
@media (max-width: 380px) {
  .section-inner { padding: 0 var(--space-3); }
  .aura-map-panel { width: calc(100vw - 1.8rem); }
}

/* ---------- 19. PHOTO LIGHTBOX ---------- */
.favorites-photos-note { margin-top: var(--space-3); }

.lightbox { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; padding: var(--space-3); }
.lightbox[hidden] { display: none; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(10,10,16,0.78); }
.lightbox-content {
  position: relative; z-index: 1; background: var(--bg-surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); padding: var(--space-4);
  max-width: min(92vw, 24rem); width: 100%; text-align: center;
}
.lightbox-close { position: absolute; top: 0.6rem; right: 0.6rem; background: var(--bg); border-radius: 50%; }

/* ---------- Things Made: thumbnail gallery + project modal ---------- */
.thumb-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--space-3); margin: var(--space-4) 0;
}
.thumb-card {
  display: flex; flex-direction: column; align-items: stretch; gap: var(--space-1);
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-2); font: inherit; text-align: left; cursor: pointer;
}
.thumb-card:hover, .thumb-card:focus-visible { border-color: var(--border-strong); }
.thumb-media {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1; border-radius: var(--radius-sm);
  background: var(--fav-bg); border: 1px dashed var(--fav-border);
  font-size: 2rem;
}
.thumb-caption { display: flex; flex-direction: column; gap: 0.15rem; }
.thumb-title { font-family: var(--font-display); font-weight: 600; color: var(--text); font-size: 0.95rem; }
.thumb-meta { color: var(--muted); font-size: 0.78rem; }
.project-modal-content { max-width: min(92vw, 28rem); text-align: left; }
.thumb-media-large {
  display: flex; align-items: center; justify-content: center;
  width: 5rem; height: 5rem; margin: 0 auto var(--space-3);
  border-radius: var(--radius-sm); background: var(--fav-bg); border: 1px dashed var(--fav-border);
  font-size: 2.4rem;
}
.project-modal-content h3 { margin-top: 0; }

/* ---------- Living Archive: static + private thumb states ---------- */
.archive-thumb-static { cursor: default; }
.archive-thumb-static:hover, .archive-thumb-static:focus-visible { border-color: var(--border); }
.archive-thumb-private { cursor: not-allowed; opacity: 0.55; }
.archive-thumb-private:hover, .archive-thumb-private:focus-visible { border-color: var(--border); }
.archive-thumb-private .thumb-media { border-style: solid; }

/* ---------- 21. CONNECT WITH ME ---------- */
.connect-card { display: block; }
.connect-card h3 { margin-bottom: var(--space-2); }
.contact-reveal { margin: 0.2rem 0; }
.contact-revealed { font-family: var(--font-mono); color: var(--text); }

/* ---------- 22. BOTTOM-OF-SECTION COLLAPSE CONTROL ---------- */
.section-collapse-bottom {
  display: flex; align-items: center; gap: 0.35rem;
  margin: var(--space-4) 0 0 auto;
  background: transparent; border: 1px solid var(--border);
  color: var(--muted); font-size: 0.82rem;
  padding: 0.4rem 0.8rem; border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.section-collapse-bottom:hover { color: var(--accent); border-color: var(--accent); }