/* Fonts loaded via <link> in HTML — no @import blocking here */

/* ─── Custom Properties ─────────────────────────────────────────── */
:root {
  --bg:          #F7F8FA;
  --bg-2:        #EDEEF2;
  --bg-glass:    rgba(247, 248, 250, 0.72);
  --text:        #0d0d10;
  --text-2:      #0d0d10;
  --muted:       #60607A;
  --rule:        #C8CBD8;
  --green:       #00956e;
  --green-mid:   #00b882;
  --green-dim:   rgba(0, 149, 110, 0.08);
  --green-glow:  rgba(0, 149, 110, 0.20);

  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Sora', 'DM Sans', system-ui, sans-serif;
  --font-mono:    'Space Mono', 'Courier New', monospace;

  --nav-h: 66px;
  --max-w: 640px;
  --pad-x: clamp(20px, 5vw, 40px);

  --transition-theme: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

/* ─── Dark Mode ──────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:        #0d0d0f;
  --bg-2:      #141418;
  --bg-glass:  rgba(13, 13, 15, 0.76);
  --text:      #f0f0f4;
  --text-2:    #f0f0f4;
  --muted:     #9090a0;
  --rule:      rgba(255, 255, 255, 0.08);
  --green:     #00d4aa;
  --green-mid: #00f5c4;
  --green-dim: rgba(0, 212, 170, 0.10);
  --green-glow: rgba(0, 212, 170, 0.25);
}

/* ─── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Solid base colour so the page is never white — when the wave canvas makes
     the body transparent, this shows through instead of a white flash. */
  background: var(--bg);
  scroll-padding-top: calc(var(--nav-h) + 12px);
  /* Disable horizontal swipe-to-go-back navigation (Chrome/Android, iOS 16+) */
  overscroll-behavior-x: none;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.18rem;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  transition: var(--transition-theme);
  cursor: none;
}

/* ─── Cursor — system default, pointer styled blue via accent ────── */
* { cursor: default; }
a, button, [role="button"], input[type="submit"], label, select { cursor: pointer; }
input[type="text"], input[type="email"], input[type="password"],
textarea { cursor: text; }


/* ─── Reading Progress Bar ───────────────────────────────────────── */
#progress-bar {
  position: fixed;
  top: var(--nav-h, 58px); /* sits below nav — initials stay unobstructed */
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--green), var(--green-mid));
  z-index: 999; /* below nav (1000) so nav renders in front */
  transition: width 0.1s linear;
  pointer-events: none;
}

/* ─── SPA Page Panels ────────────────────────────────────────────── */
.page-panel { display: none; }
.page-panel.active { display: block; }

/* ─── Navigation ─────────────────────────────────────────────────── */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad-x);
  /* Solid background for mobile — no blur layer, no Safari compositing ghost */
  background: #F7F8FA;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, background 0.35s ease, transform 0.3s ease;
}

[data-theme="dark"] nav {
  background: #0d0d0f;
}

nav.scrolled {
  border-bottom-color: var(--rule);
}

/* Desktop only: blur layer behind nav children */
@media (min-width: 641px) {
  nav {
    background: transparent;
  }

  nav::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(247, 248, 250, 0.88);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    transition: background 0.35s ease;
  }

  [data-theme="dark"] nav {
    background: transparent;
  }

  [data-theme="dark"] nav::before {
    background: rgba(13, 13, 15, 0.88);
  }
}


.nav-logo {
  font-family: var(--font-display);
  font-size: 1.72rem;
  font-weight: 600;
  font-style: italic;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.01em;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 0.04em;
  transition: opacity 0.2s ease;
  user-select: none;
  /* Ensure initials render above the nav backdrop-filter layer */
  position: relative;
  z-index: 1;
}

.logo-m {
  color: var(--text);
  transition: color 0.2s ease;
}

.logo-a {
  color: var(--green);
  transition: color 0.2s ease;
}

.nav-logo:hover { opacity: 0.70; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}

.nav-links li {
  display: flex;
  align-items: center;
}

.nav-links a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 14px;
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  position: relative;
  transition: color 0.2s ease, background 0.2s ease;
}

.nav-links a svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s ease;
}

.nav-links a:hover {
  color: var(--text);
  background: var(--green-dim);
}

.nav-links a.active {
  color: var(--green);
}

/* Active top-bar indicator (mirrors mobile pill) */
.nav-links a.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 2px;
  background: var(--green);
  border-radius: 0 0 2px 2px;
}

.nav-links a.active svg { transform: scale(1.12); }

/* ─── Nav Controls (right side with links + theme toggle) ─────────── */
.nav-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* ─── Theme Toggle ───────────────────────────────────────────────── */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: none;
  cursor: none;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.3s ease;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.theme-toggle:hover {
  border-color: var(--green);
  background: var(--green-dim);
  transform: rotate(20deg);
}

.theme-toggle svg {
  width: 14px;
  height: 14px;
  stroke: var(--muted);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.2s ease, opacity 0.3s ease, transform 0.3s ease;
  position: absolute;
}

.theme-toggle .icon-sun { opacity: 1; transform: scale(1) rotate(0deg); }
.theme-toggle .icon-moon { opacity: 0; transform: scale(0.5) rotate(-90deg); }

[data-theme="dark"] .theme-toggle .icon-sun  { opacity: 0; transform: scale(0.5) rotate(90deg); }
[data-theme="dark"] .theme-toggle .icon-moon { opacity: 1; transform: scale(1) rotate(0deg); }
[data-theme="dark"] .theme-toggle svg { stroke: var(--green); }

/* ─── Layout Wrapper ─────────────────────────────────────────────── */
main {
  padding-top: var(--nav-h);
}

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  position: relative;
  z-index: 10;
}

/* ─── Sections ───────────────────────────────────────────────────── */
section {
  padding: 48px 0;
  border-top: 1px solid var(--rule);
  transition: border-color 0.35s ease;
}

section:first-of-type {
  border-top: none;
}

/* ─── Eyebrow Labels ─────────────────────────────────────────────── */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 12px;
}

.eyebrow::before {
  content: '';
  display: block;
  width: 22px;
  height: 1px;
  background: var(--green);
  flex-shrink: 0;
}

/* ─── Typography ─────────────────────────────────────────────────── */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text);
  line-height: 1.08;
  letter-spacing: -0.015em;
  transition: color 0.35s ease;
}

h1 { font-size: clamp(3rem, 8.5vw, 5rem); }
h2 { font-size: clamp(2.4rem, 6vw, 3.2rem); margin-bottom: 28px; font-weight: 600; line-height: 1.1; }
h3 { font-size: clamp(1.3rem, 3.5vw, 1.6rem); font-weight: 600; font-family: var(--font-body); letter-spacing: 0; }

.italic-green { font-style: italic; font-weight: 500; color: var(--green-mid); }

p {
  font-size: clamp(1.18rem, 2.5vw, 1.26rem);
  color: var(--text-2);
  line-height: 1.84;
  letter-spacing: 0.011em;
  margin-bottom: 1.2em;
  font-weight: 400;
  font-optical-sizing: auto;
  transition: color 0.35s ease;
}

[data-theme="dark"] p { font-weight: 400; }

p:last-child { margin-bottom: 0; }

a { color: inherit; }

/* ─── Hero ───────────────────────────────────────────────────────── */
.hero {
  padding-top: clamp(40px, 8vw, 72px);
  padding-bottom: 24px;
  border-top: none;
  display: grid;
  grid-template-columns: 1fr 172px;
  grid-template-areas:
    "name  photo"
    "prose photo"
    "meta  photo";
  column-gap: 32px;
  align-items: start;
}

/* Pages without a photo — single column */
.hero:not(:has(.profile-photo-wrap)) {
  grid-template-columns: 1fr;
  grid-template-areas:
    "name"
    "prose"
    "meta";
}

.hero-name {
  grid-area: name;
  font-family: var(--font-display);
  font-size: clamp(3rem, 8.5vw, 5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 32px;
}

.hero-name span {
  display: block;
}

.hero-prose { grid-area: prose; }
.hero-meta  { grid-area: meta; }

/* ─── Profile Photo Area ─────────────────────────────────────────── */
.profile-photo-wrap {
  grid-area: photo;
  margin: 0;
  position: relative;
  display: block;
  align-self: start;
}

.profile-photo-frame {
  width: 210px;
  height: 210px;
  border-radius: 20px;
  border: 1px solid var(--rule);
  overflow: hidden;
  position: relative;
  background: var(--bg-2);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.profile-photo-frame:hover {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-dim), 0 0 24px var(--green-glow);
}

.profile-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Pixel art SVG placeholder inside frame */
.profile-photo-svg {
  width: 100%;
  height: 100%;
  display: block;
}


/* Admin upload trigger (shown in admin mode) */
.profile-photo-upload-btn {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(0, 140, 100, 0.6);
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: none;
  border-radius: 6px;
  backdrop-filter: blur(4px);
  transition: opacity 0.2s ease;
}

body.admin-mode .profile-photo-upload-btn { display: flex; }

/* ─── Hero sub-elements ──────────────────────────────────────────── */
.hero-prose {
  font-family: var(--font-body);
  font-size: clamp(1.18rem, 2.5vw, 1.26rem);
  color: var(--text);
  line-height: 1.8;
  letter-spacing: 0;
  max-width: 560px;
  margin-bottom: 28px;
  font-weight: 400;
}
.hero-prose p {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  font-weight: inherit;
  margin-bottom: 1.2em;
}
.hero-prose p:last-child { margin-bottom: 0; }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  margin-right: 6px;
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 var(--green-glow); }
  50% { opacity: 0.7; transform: scale(0.85); box-shadow: 0 0 0 4px transparent; }
}

.hero-meta-sep {
  width: 1px;
  height: 10px;
  background: var(--rule);
}


/* ─── Scroll Reveal ──────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* ─── Card Scroll Reveal ─────────────────────────────────────────── */
.card-reveal {
  opacity: 0;
  transform: translateY(80px) scale(0.93);
  transition: opacity 1.3s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-reveal.card-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* Natural stagger for cards entering together */
.card-reveal:nth-child(2) { transition-delay: 0.15s; }
.card-reveal:nth-child(3) { transition-delay: 0.30s; }
.card-reveal:nth-child(4) { transition-delay: 0.45s; }
.card-reveal:nth-child(5) { transition-delay: 0.60s; }

/* h2 headings: fast fade + very subtle scale */
h2.reveal {
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
h2.reveal.visible {
  opacity: 1;
  transform: scale(1);
}

.d1 { transition-delay: 0.03s; }
.d2 { transition-delay: 0.06s; }
.d3 { transition-delay: 0.10s; }
.d4 { transition-delay: 0.14s; }

/* ─── Hero Entrance Animations ───────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.a1 { animation: fadeUp 0.42s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.05s; }
.a2 { animation: fadeUp 0.42s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.13s; }
.a3 { animation: fadeUp 0.42s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.21s; }
.a4 { animation: fadeUp 0.42s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.29s; }

/* ─── Timeline (Work) ────────────────────────────────────────────── */
.timeline {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-left: 26px;
}
/* Continuous spine running down the left edge */
.timeline::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--rule);
}

.timeline-item {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 4px 0 26px;
}
.timeline-item:last-child { padding-bottom: 0; }
/* Node marker on the spine */
.timeline-item::before {
  content: '';
  position: absolute;
  left: -26px;
  top: 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--rule);
  transition: border-color 0.3s ease, background 0.3s ease;
}
.timeline-item:hover::before {
  border-color: var(--green);
  background: var(--green);
}

.timeline-header {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 0 32px;
  align-items: start;
}

.timeline-body {
  padding-top: 10px;
}

.timeline-date {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--text-2);
  text-transform: uppercase;
  padding-top: 3px;
  line-height: 1.7;
}

.timeline-loc {
  display: block;
  margin-top: 4px;
}

.timeline-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.timeline-role {
  font-family: var(--font-body);
  font-size: clamp(0.97rem, 2.5vw, 1.08rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 3px;
}

.role-inf {
  color: var(--green);
  font-weight: 500;
}

.timeline-org {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  color: var(--text-2);
  font-size: 1rem;
  letter-spacing: 0.01em;
  margin-bottom: 0;
  display: block;
}

.timeline-desc {
  font-size: 1.1rem;
  color: var(--text-2);
  line-height: 1.80;
  letter-spacing: 0.011em;
  font-weight: 400;
  margin-bottom: 0;
}

/* ─── Recognition ────────────────────────────────────────────────── */
.recognition-list {
  display: flex;
  flex-direction: column;
}

.recognition-item {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 20px 4px;
  border-bottom: 1px solid var(--rule);
  transition: padding-left 0.3s ease;
}
.recognition-item:first-child { padding-top: 4px; }
.recognition-item:last-child { border-bottom: none; }

.recognition-item:hover { padding-left: 10px; }

.recognition-glyph {
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--green);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  flex-shrink: 0;
  width: 28px;
  padding-top: 6px;
  opacity: 0.55;
}

.recognition-text {
  font-size: clamp(1.12rem, 2vw, 1.2rem);
  color: var(--text-2);
  line-height: 1.72;
  font-weight: 400;
  margin: 0;
}

/* ─── Contact Rows ───────────────────────────────────────────────── */
.contact-section {
  padding-bottom: 48px !important;
}

.contact-section h2 {
  margin-bottom: 10px !important;
}

.contact-note {
  font-size: clamp(1.12rem, 2.2vw, 1.2rem);
  color: var(--text-2);
  line-height: 1.8;
  margin-bottom: 15px !important;
}

.contact-list {
  display: flex;
  flex-direction: column;
  margin-top: 0 !important;
}

.contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 4px;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--text);
  transition: padding-left 0.25s ease;
}

.contact-row:hover {
  padding-left: 12px;
}
.contact-row:hover .contact-value { color: var(--green); }

.contact-row:last-child { border-bottom: none; }

.contact-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}

.contact-value {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 2.5vw, 1.2rem);
  color: var(--text);
  transition: color 0.25s ease;
}

.contact-value--with-icon {
  display: flex;
  align-items: center;
  gap: 8px;
}

.contact-brand-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.contact-arrow {
  width: 20px;
  height: 20px;
  stroke: var(--muted);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  margin-left: 16px;
  transition: transform 0.25s ease, stroke 0.25s ease;
}

.contact-row:hover .contact-arrow {
  transform: translateX(5px);
  stroke: var(--green);
}

/* ─── Life Page ──────────────────────────────────────────────────── */
/* Image Grid Layouts */
.img-slot {
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  transition: border-color 0.35s ease, background 0.35s ease;
}

.img-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.img-slot:hover img { transform: scale(1.04); }

.img-slot-wide     { aspect-ratio: 16 / 7; }
.img-slot-portrait { aspect-ratio: 3 / 4; }
.img-slot-square   { aspect-ratio: 1 / 1; }

.img-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--rule);
}

.img-placeholder-icon {
  font-size: 1.4rem;
  opacity: 0.6;
}

.img-placeholder-text {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Screen grid */
.screen-grid-top    { margin-bottom: 0; }
.screen-grid-mid    { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 4px; }
.screen-grid-bottom { margin-bottom: 0; }

/* Captions */
.img-caption { padding-top: 14px; margin-bottom: 0; }

.img-caption-title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  display: block;
  transition: color 0.35s ease;
}

.img-caption-desc {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  display: block;
}

.caption-row   { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; margin-top: 14px; }
.caption-row-2 { display: grid; grid-template-columns: 1.55fr 1fr; gap: 4px; margin-top: 14px; }

.music-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; }
.hobby-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 4px; }

/* Pull quote */
.pull-quote {
  padding: 36px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

blockquote {
  border-left: 2px solid var(--green);
  padding-left: 24px;
  margin: 0;
}

blockquote p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.15rem, 3.5vw, 1.5rem);
  color: var(--text);
  line-height: 1.4;
  letter-spacing: -0.015em;
  margin-bottom: 16px;
}

blockquote cite {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-style: normal;
}

/* ─── Perspectives Page ──────────────────────────────────────────── */
.article-list { display: flex; flex-direction: column; }

.article-row {
  display: block;
  padding: 32px 4px;
  border-bottom: 1px solid var(--rule);
  cursor: none;
  text-decoration: none;
  transition: padding-left 0.3s ease;
}
.article-row:first-child { padding-top: 8px; }
.article-row:last-child { border-bottom: none; }

.article-row:hover {
  padding-left: 12px;
}

.article-cover { margin-bottom: 20px; }
.article-cover .img-slot-wide { border: 1px solid var(--rule); border-radius: 10px; }

.article-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.article-category {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
}

.article-date-read {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.article-title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 4vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text);
  line-height: 1.15;
  margin-bottom: 12px;
  transition: color 0.2s ease;
}

.article-row:hover .article-title { color: var(--green); }

.article-excerpt {
  font-size: 0.94rem;
  color: var(--text-2);
  font-weight: 400;
  line-height: 1.72;
  margin-bottom: 16px;
}

.article-read-more {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.25s ease;
}

.article-row:hover .article-read-more { gap: 12px; }

/* ─── Article Overlay ────────────────────────────────────────────── */
#article-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--bg);
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  will-change: scroll-position;
  touch-action: pan-y;
  opacity: 0;
  transform: translateY(24px);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease, background 0.35s ease;
}

#article-overlay.open {
  opacity: 1;
  transform: none;
  pointer-events: all;
}

.overlay-topbar {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  padding: 0 var(--pad-x);
  z-index: 10;
  transition: background 0.35s ease, border-color 0.35s ease;
}

[data-theme="dark"] .overlay-topbar {
  background: rgba(13, 13, 15, 0.95);
}

#overlay-back {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: none;
  cursor: none;
  padding: 8px 0;
  transition: color 0.2s ease;
}

#overlay-back:hover { color: var(--green); }

.back-icon {
  width: 28px;
  height: 28px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  transition: border-color 0.2s ease;
}

#overlay-back:hover .back-icon { border-color: var(--green); }

#overlay-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--green), var(--green-mid));
  z-index: 10002;
  transition: width 0.1s linear;
}

.overlay-content {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(40px, 8vw, 72px) var(--pad-x) 120px;
}

.overlay-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 20px;
}

.overlay-eyebrow::before {
  content: '';
  display: block;
  width: 22px;
  height: 1px;
  background: var(--green);
  flex-shrink: 0;
}

#overlay-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 16px;
}

.overlay-date {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
  display: block;
  margin-bottom: 32px;
}

#overlay-cover {
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  display: block;
  margin-bottom: 48px;
  border: 1px solid var(--rule);
  border-radius: 16px;
}

#overlay-body {
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 3vw, 1.30rem);
  line-height: 1.74;
  color: var(--text-2);
}

#overlay-body p {
  margin-bottom: 1.5em;
  font-weight: 400;
  letter-spacing: -0.005em;
}

#overlay-body h3 {
  font-family: var(--font-display);
  font-size: clamp(1.28rem, 3.5vw, 1.62rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 2.2em 0 0.7em;
  color: var(--text);
}

/* ─── Admin Mode ─────────────────────────────────────────────────── */

/* Admin FAB (Floating Action Button) */
.admin-fab {
  display: none;
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 3000;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

body.admin-mode .admin-fab { display: flex; }

.admin-fab-main {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--green);
  border: none;
  cursor: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px var(--green-glow);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1;
}

.admin-fab-main:hover {
  transform: scale(1.1) rotate(45deg);
  box-shadow: 0 6px 30px var(--green-glow);
}

.admin-fab-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.admin-fab.open .admin-fab-actions {
  opacity: 1;
  transform: none;
  pointer-events: all;
}

.admin-fab-action {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 24px;
  padding: 8px 16px 8px 12px;
  cursor: none;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.admin-fab-action:hover {
  background: var(--green-dim);
  border-color: var(--green);
  color: var(--green);
}

.admin-fab-action-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--green-dim);
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  flex-shrink: 0;
  transition: background 0.2s ease;
}

.admin-fab-action:hover .admin-fab-action-icon {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}

/* Admin badge in nav */
.admin-badge {
  display: none;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--green);
  padding: 3px 8px;
  border-radius: 20px;
}

body.admin-mode .admin-badge { display: flex; }

/* Admin lock button */
.admin-lock-btn {
  display: none;
  background: none;
  border: none;
  cursor: none;
  color: var(--muted);
  font-size: 0.75rem;
  padding: 4px;
  transition: color 0.2s ease;
}

body.admin-mode .admin-lock-btn { display: block; }
.admin-lock-btn:hover { color: var(--green); }

/* ─── Admin Modal ────────────────────────────────────────────────── */
.admin-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  padding: 20px;
}

.admin-modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.admin-modal {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 36px;
  width: 100%;
  max-width: 480px;
  max-height: 80vh;
  overflow-y: auto;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.25s ease, background 0.35s ease;
  box-shadow: 0 24px 64px rgba(0,0,0,0.2);
}

.admin-modal-overlay.open .admin-modal {
  transform: none;
}

.admin-modal-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 4px;
}

.admin-modal-sub {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 28px;
  display: block;
}

.admin-form-group {
  margin-bottom: 18px;
}

.admin-form-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.admin-form-input,
.admin-form-textarea,
.admin-form-select {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s ease, background 0.35s ease;
  cursor: text;
}

.admin-form-input:focus,
.admin-form-textarea:focus,
.admin-form-select:focus {
  border-color: var(--green);
}

.admin-form-textarea {
  resize: vertical;
  min-height: 90px;
  line-height: 1.6;
}

.admin-form-select { cursor: none; }

.admin-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 24px;
  justify-content: flex-end;
}

.admin-btn-cancel {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 8px 16px;
  cursor: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.admin-btn-cancel:hover { color: var(--text); border-color: var(--muted); }

.admin-btn-save {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--green);
  border: 1px solid var(--green);
  border-radius: 4px;
  padding: 8px 16px;
  cursor: none;
  transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

.admin-btn-save:hover {
  opacity: 0.85;
  box-shadow: 0 0 12px var(--green-glow);
}

/* ─── Toast Notifications ────────────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 90px;
  right: 28px;
  z-index: 5000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--text);
  color: var(--bg);
  padding: 10px 16px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  animation: toastIn 0.3s ease forwards, toastOut 0.3s ease 2.7s forwards;
  max-width: 260px;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@keyframes toastOut {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(10px); }
}

/* ─── Footer ─────────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--rule);
  padding: 28px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-w);
  margin: 0 auto;
  transition: border-color 0.35s ease;
}

.footer-name {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.footer-loc {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Secret admin trigger (clicking footer-loc 5 times) */
.footer-loc { user-select: none; }

/* ─── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .timeline-header { grid-template-columns: 1fr; gap: 6px; }
  .timeline-date { font-size: 0.56rem; }
}

@media (max-width: 500px) {
  .music-grid     { grid-template-columns: 1fr 1fr; }
  .caption-row    { grid-template-columns: 1fr 1fr; }
  .hobby-grid     { grid-template-columns: 1fr; }
  .caption-row-2  { grid-template-columns: 1fr; }
  .screen-grid-mid { grid-template-columns: 1fr; }
  .admin-fab { bottom: 16px; right: 16px; }
  .admin-modal { padding: 24px; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE — primary target, fully optimized
   ═══════════════════════════════════════════════════════════════════ */

/* ── Bottom navigation — always rendered, hidden only on desktop ── */
.mobile-bottom-nav {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  height: calc(62px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  /* Explicit hex — no CSS variable, no compositing ghost on Safari */
  background: #F7F8FA;
  border-top: none;
  box-shadow: none;
  justify-content: space-around;
  align-items: center;
  transition: background 0.35s ease;
}

[data-theme="dark"] .mobile-bottom-nav {
  background: #0d0d0f;
}


.mbn-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1;
  height: 100%;
  min-height: 44px;
  color: var(--muted);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: color 0.18s ease;
}

.mbn-item.active { color: var(--green); }

/* Active pill indicator above icon */
.mbn-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 2px;
  background: var(--green);
  border-radius: 0 0 2px 2px;
}

/* Tap feedback */
.mbn-item:active { opacity: 0.6; }

.mbn-item svg {
  width: 26px;
  height: 26px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s ease;
}
.mbn-item.active svg { transform: scale(1.12); }
/* Theme button icon is inside a circle — don't scale the circle on active */
.mbn-theme-btn svg { width: 15px; height: 15px; }

/* Theme icon: show moon in light mode, sun in dark mode */
.mbn-sun-icon  { display: none; }
.mbn-moon-icon { display: block; }
[data-theme="dark"] .mbn-sun-icon  { display: block; }
[data-theme="dark"] .mbn-moon-icon { display: none; }

/* Circle container — visually separates theme toggle from nav items */
.mbn-theme-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  opacity: 0.65;
  transition: opacity 0.18s ease, border-color 0.18s ease;
}
.mbn-theme-btn:active .mbn-theme-circle { opacity: 0.4; }
.mbn-theme-circle svg {
  width: 15px;
  height: 15px;
}

.mbn-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Hide on desktop */
@media (min-width: 641px) {
  .mobile-bottom-nav { display: none; }
}

/* ── Mobile layout + performance ────────────────────────────────── */
@media (max-width: 640px) {
  footer { margin-top: 32px; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }

  /* Push FAB above bottom nav */
  .admin-fab { bottom: 76px !important; }

  /* Hide top nav links — bottom nav handles navigation */
  .nav-links { display: none; }

  /* Font sizes already set globally — no overrides needed */

  /* Prevent inputs zooming on iOS */
  input, textarea, select { font-size: 16px !important; }

  /* Contact section spacing */
  .contact-section h2 { margin-bottom: 10px !important; }
  .contact-note { margin-bottom: 15px !important; }
  .contact-list { margin-top: 0 !important; }

  /* Touch-friendly tap targets */
  .article-row  { padding: 24px 2px; }
  .contact-row  { min-height: 52px; padding: 16px 2px; }
  .timeline { padding-left: 22px; }

  /* Hero: photo beside name only, prose+meta span full width */
  .hero {
    display: grid;
    grid-template-columns: 1fr 130px;
    grid-template-areas:
      "name  photo"
      "prose prose"
      "meta  meta";
    column-gap: 16px;
    row-gap: 32px;
    padding-top: 32px;
  }
  .hero-name, .hero-prose, .hero-meta { min-width: 0; }
  .hero-prose { max-width: none; margin-bottom: 0; }
  .profile-photo-wrap { margin: 0; }
  .profile-photo-frame { width: 130px; height: 130px; border-radius: 14px; }

  /* ── Kill GPU-expensive effects on mobile ── */

  /* Orbs: hide — blur(120px) is too heavy for mobile GPUs */
  .ambient-orb { display: none !important; }

  /* Neural canvas stays visible — JS uses fewer particles on mobile */

  /* Kill nav scrolled border and progress bar — both cause Safari compositing seams */
  nav.scrolled    { border-bottom-color: transparent !important; }
  #progress-bar   { display: none; }


  /* No parallax on mobile */
  .hero { transform: none !important; }

  /* Simpler reveal — no transform, just fade */
  .reveal         { transform: none !important; }
  .reveal.visible { opacity: 1; }

  /* Card animations: less travel on small screens */
  .card-reveal { transform: translateY(40px) scale(0.96) !important; }
  .card-reveal.card-in { transform: translateY(0) scale(1) !important; }
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .timeline-header { grid-template-columns: 1fr; gap: 6px; }
  .timeline-date { font-size: 0.56rem; }
}

@media (max-width: 500px) {
  .music-grid      { grid-template-columns: 1fr 1fr; }
  .caption-row     { grid-template-columns: 1fr 1fr; }
  .hobby-grid      { grid-template-columns: 1fr; }
  .caption-row-2   { grid-template-columns: 1fr; }
  .screen-grid-mid { grid-template-columns: 1fr; }
  .admin-modal     { padding: 24px; }
}

/* ══════════════════════════════════════════════════════════════════
   AI-INSPIRED AMBIENT EFFECTS
   ══════════════════════════════════════════════════════════════════ */

/* ── Touch ripple ────────────────────────────────────────────── */
@keyframes ripple-out {
  to { transform: scale(1); opacity: 0; }
}

/* ── Page load / exit transitions ────────────────────────────── */
body {
  animation: page-fade-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes page-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body.page-exit {
  opacity: 0;
  transition: opacity 0.12s ease;
}

/* ── Background canvas ───────────────────────────────────────── */
#bg-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, black 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 72%, transparent 100%);
}

/* ── Gradient orbs ───────────────────────────────────────────── */
.ambient-orb {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  transition: opacity 2s ease;
}
.orb-blue {
  background: var(--green);
  filter: blur(50px);
  opacity: 0.07;
  animation: orb-drift-a 26s ease-in-out infinite alternate;
}
.orb-violet {
  background: #7C3AED;
  filter: blur(40px);
  opacity: 0.055;
  animation: orb-drift-b 32s ease-in-out infinite alternate-reverse;
}
.orb-warm {
  background: var(--green-mid);
  filter: blur(50px);
  opacity: 0.04;
  animation: orb-drift-a 20s ease-in-out 4s infinite alternate;
}
[data-theme="dark"] .orb-blue   { opacity: 0.13; }
[data-theme="dark"] .orb-violet { opacity: 0.10; }
[data-theme="dark"] .orb-warm   { opacity: 0.07; }

@keyframes orb-drift-a {
  0%   { transform: translate(0, 0)       scale(1);    }
  40%  { transform: translate(40px, -30px) scale(1.07); }
  100% { transform: translate(-20px, 50px) scale(0.96); }
}
@keyframes orb-drift-b {
  0%   { transform: translate(0, 0)        scale(1);    }
  50%  { transform: translate(-50px, 20px) scale(1.05); }
  100% { transform: translate(30px, -40px) scale(0.98); }
}



/* ── Staggered word reveal ───────────────────────────────────── */
.split-word       { display: inline-block; overflow: hidden; vertical-align: bottom; }
.split-word-inner {
  display: inline-block;
  transform: translateY(105%);
  opacity: 0;
  transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1),
              opacity   0.36s ease;
}
.reveal.visible .split-word-inner { transform: translateY(0); opacity: 1; }

/* Keep footer above background layers */
footer { position: relative; z-index: 10; }

/* ─── Utility ────────────────────────────────────────────────────── */
.section-heading { margin-bottom: 40px; }
.mt-0 { margin-top: 0; }

/* ─── 3D Carousel ────────────────────────────────────────────────── */
.carousel-wrap {
  display: none;
  margin-top: 48px;
  user-select: none;
}
.carousel-wrap.has-items { display: block; }
/* Hidden while the "Explore" gate is shown in its place. */
/* The carousel stays rendered behind the gate (no display:none), so revealing
   it is just fading the gate overlay — no reflow, no heavy first paint, no jank.
   While gated it's only made non-interactive. */
.carousel-wrap.has-items.carousel-gated { pointer-events: none; }
/* Gate entrance (no 3D children, so transform here is cheap and smooth). */
@keyframes carouselReveal {
  from { opacity: 0; transform: translateY(26px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* ── "Explore" gate ─────────────────────────────────────────────── */
/* Positioning context so the gate can overlay the carousel exactly. */
.carousel-gate-holder { position: relative; }

.carousel-gate {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--bg-glass);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  cursor: pointer;
  transition: opacity 0.45s ease, transform 0.45s ease;
  animation: carouselReveal 0.7s cubic-bezier(0.16,1,0.3,1) both;
}
/* animation:none clears the entrance keyframe's retained state so the fade-out
   transition can actually run (a finished fill:both animation otherwise wins). */
.carousel-gate.hiding { animation: none; opacity: 0; transform: scale(0.96); pointer-events: none; }

.carousel-gate-btn {
  width: 76px; height: 76px;
  border-radius: 50%;
  border: 1px solid var(--green);
  background: var(--green-dim);
  color: var(--green);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  position: relative;
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  animation: gatePulse 2.4s ease-in-out infinite;
}
.carousel-gate-btn svg {
  width: 26px; height: 26px;
  fill: currentColor; stroke: none;
  margin-left: 4px;            /* optical centering of the play triangle */
}
.carousel-gate:hover .carousel-gate-btn {
  transform: scale(1.06);
  background: var(--green);
  color: #fff;
  box-shadow: 0 10px 30px var(--green-glow);
}

.carousel-gate-label {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text);
}
.carousel-gate-sub {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  opacity: 0.55;
}

/* While the theme player is still network-loading after a first-visit tap, the
   button shows a spinning ring and the play glyph dims, so the single press
   reads as "starting…" rather than doing nothing. */
.carousel-gate.loading { cursor: progress; }
.carousel-gate.loading .carousel-gate-btn {
  animation: none;
  background: var(--green-dim);
}
.carousel-gate.loading .carousel-gate-btn svg { opacity: 0.35; }
.carousel-gate.loading .carousel-gate-btn::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--green);
  border-right-color: var(--green);
  animation: gateSpin 0.7s linear infinite;
}
@keyframes gateSpin { to { transform: rotate(360deg); } }

@keyframes gatePulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--green-glow); }
  50%      { box-shadow: 0 0 0 14px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .carousel-gate, .carousel-gate-btn { animation: none; }
}

/* ── Interactive wave background (offline page) ─────────────────── */
.wave-bg {
  position: fixed;
  inset: 0;
  z-index: -1;            /* behind all content; canvas paints the base bg */
  pointer-events: none;
  display: block;
}
/* Let the fixed canvas show through the page (it draws the base colour). */
body.has-wave-bg { background: transparent; }

/* ── Page theme song: floating mute/unmute control ──────────────── */
.page-theme-toggle {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 60;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--bg-glass);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.page-theme-toggle:hover { transform: scale(1.08); color: var(--green); border-color: var(--green); }
.page-theme-toggle svg { width: 20px; height: 20px; }
.page-theme-toggle .ptt-off { display: none; }
.page-theme-toggle.muted { color: var(--text-2); }
.page-theme-toggle.muted .ptt-on  { display: none; }
.page-theme-toggle.muted .ptt-off { display: block; }
/* Keep clear of the mobile bottom nav */
@media (max-width: 768px) {
  .page-theme-toggle { bottom: 72px; left: 16px; width: 40px; height: 40px; }
}

.carousel-scene {
  perspective: 1100px;
  /* Front card is pushed toward the viewer (translateZ); perspective
     magnifies it — height set generously so it clears even with many cards. */
  height: 440px;
  position: relative;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
}
.carousel-wrap.grabbing .carousel-scene { cursor: grabbing; }

/* Zero-size pivot at center of scene */
.carousel-track {
  width: 0; height: 0;
  position: absolute;
  top: 50%; left: 50%;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Each card floats around the pivot as a portrait poster (2:3) */
.carousel-card {
  position: absolute;
  width: 210px; height: 315px;
  top: -157px; left: -105px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--bg-2);
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  /* Dim/desaturate non-front cards for depth; front card resets these. */
  opacity: 0.5;
  filter: saturate(0.8) brightness(0.82);
  transition: opacity 0.45s ease, filter 0.45s ease,
              border-color 0.45s ease, box-shadow 0.45s ease;
}

.carousel-card.active {
  opacity: 1;
  filter: none;
  border-color: var(--green);
  box-shadow: 0 0 0 1px var(--green-dim), 0 18px 48px rgba(0,0,0,0.28);
}

.carousel-card img {
  width: 100%; height: 100%;
  /* Card and poster share the 2:3 shape, so cover fills edge-to-edge at
     full quality with no bars and no meaningful crop. */
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* Music carousel — album art is square, so make the card square too so
   cover fills edge-to-edge with no crop and no letterbox bars. */
#music-carousel-wrap .carousel-card {
  width: 210px;
  height: 210px;
  top: -105px;
}

#music-carousel-wrap .carousel-card img {
  object-fit: cover;
}

/* Square cards are shorter than posters, so the generous scene height leaves
   a big gap below them — tighten it so the song/artist label sits just under. */
#music-carousel-wrap .carousel-scene {
  height: 320px;
}

/* Admin: delete control on each real carousel card */
.carousel-card-del {
  position: absolute;
  top: 8px; right: 8px;
  width: 26px; height: 26px;
  display: none;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  z-index: 6;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  transition: background 0.2s ease, transform 0.15s ease;
}
body.admin-mode .carousel-card-del { display: flex; }
.carousel-card-del:hover { background: #e05252; transform: scale(1.12); }

/* Blank card — a clean two-tone coloured slide (no emoji, no clip-art) */
.carousel-card--blank {
  background:
    radial-gradient(120% 120% at 30% 20%,
      hsl(var(--card-hue, 170) 42% 30%) 0%,
      hsl(var(--card-hue, 170) 46% 16%) 70%);
}
[data-theme="dark"] .carousel-card--blank {
  background:
    radial-gradient(120% 120% at 30% 20%,
      hsl(var(--card-hue, 170) 38% 26%) 0%,
      hsl(var(--card-hue, 170) 44% 12%) 70%);
}

.carousel-card-inner {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 26px;
  text-align: center;
}

.carousel-card-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  line-height: 1.5;
}

/* Info panel below carousel */
.carousel-info {
  text-align: center;
  min-height: 46px;
  padding-top: 4px;
}

.carousel-info-title {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  transition: color 0.35s ease;
}

.carousel-info-desc {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.60rem;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin-top: 4px;
  transition: color 0.35s ease;
}

/* Nav row: prev · dots · next */
.carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
}

.carousel-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--bg-2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.carousel-btn svg {
  width: 15px; height: 15px;
  stroke: var(--muted);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.2s ease;
}
.carousel-btn:hover { border-color: var(--green); background: var(--green-dim); }
.carousel-btn:hover svg { stroke: var(--green); }

/* Mute button sits between dots and next arrow; slightly smaller */
.carousel-btn--mute { width: 30px; height: 30px; }
.carousel-btn--mute svg { width: 13px; height: 13px; }
.carousel-btn--mute.muted { border-color: var(--muted); }
.carousel-btn--mute.muted svg { stroke: var(--muted); opacity: 0.55; }

.carousel-dots { display: flex; gap: 6px; align-items: center; }

.carousel-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--rule);
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}
.carousel-dot.active {
  background: var(--green);
  transform: scale(1.4);
}


/* ══════════════════════════════════════════════════════════════════
   OFFLINE — Interactive suggestion box
   ══════════════════════════════════════════════════════════════════ */
.suggest-intro {
  font-size: clamp(1.05rem, 2.2vw, 1.18rem);
  color: var(--text-2);
  line-height: 1.75;
  margin-bottom: 26px;
  max-width: 52ch;
}

.suggest-box {
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--bg-2);
  padding: 22px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.suggest-box:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 1px var(--green-dim), 0 18px 44px rgba(0,0,0,0.14);
}

/* Kind selector */
.suggest-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.suggest-kind {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.suggest-kind:hover { color: var(--text); border-color: var(--muted); }
.suggest-kind.active {
  color: #fff;
  background: var(--green);
  border-color: var(--green);
}
[data-theme="dark"] .suggest-kind.active { color: #07120f; }

/* Text field */
.suggest-field { position: relative; }
.suggest-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 14px 70px 14px 16px;
  font-family: var(--font-body);
  font-size: 1.02rem;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s ease;
}
.suggest-input:focus { border-color: var(--green); }
.suggest-count {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  pointer-events: none;
}

/* Quick-suggestion chips */
.suggest-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  min-height: 30px;
}
.suggest-chip {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--text-2);
  background: var(--bg);
  border: 1px dashed var(--rule);
  border-radius: 999px;
  padding: 6px 13px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  animation: suggest-chip-in 0.32s cubic-bezier(0.23,1,0.32,1) forwards;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.suggest-chip:hover {
  color: var(--green);
  border-color: var(--green);
  border-style: solid;
}
@keyframes suggest-chip-in {
  to { opacity: 1; transform: translateY(0); }
}

/* Name + submit row */
.suggest-row {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  align-items: stretch;
}
.suggest-name {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s ease;
}
.suggest-name:focus { border-color: var(--green); }
.suggest-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--green);
  border: 1px solid var(--green);
  border-radius: 10px;
  padding: 13px 22px;
  margin-top: 16px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
}
[data-theme="dark"] .suggest-submit { color: #07120f; }
.suggest-submit:hover { transform: translateY(-1px); }
.suggest-submit:disabled { opacity: 0.55; cursor: default; transform: none; }
.suggest-submit-arrow { width: 15px; height: 15px; transition: transform 0.2s ease; }
.suggest-submit:hover .suggest-submit-arrow { transform: translateX(3px); }

/* Success message */
.suggest-success {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--green);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.4s ease, margin-top 0.4s ease;
}
.suggest-success.show {
  max-height: 60px;
  opacity: 1;
  margin-top: 14px;
}

/* Admin-only inbox */
.suggest-admin { display: none; margin-top: 40px; }
body.admin-mode .suggest-admin { display: block; }
.suggest-admin-list { display: flex; flex-direction: column; }
.suggest-admin-item {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--rule);
}
.suggest-admin-item:last-child { border-bottom: none; }
.suggest-admin-kind {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  flex-shrink: 0;
  width: 58px;
  padding-top: 2px;
}
.suggest-admin-body { flex: 1; min-width: 0; }
.suggest-admin-text { color: var(--text); font-size: 0.98rem; line-height: 1.5; }
.suggest-admin-meta {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-top: 3px;
}
.suggest-admin-empty { color: var(--muted); font-size: 0.92rem; }

@media (max-width: 640px) {
  .suggest-box { padding: 18px; }
  .suggest-row { flex-direction: column; }
  .suggest-submit { padding: 13px 22px; justify-content: center; }
}


/* ══════════════════════════════════════════════════════════════════
   OFFLINE PAGE — cinematic entrance & scroll animations
   Uses the existing reveal/IntersectionObserver + .a* hero system.
   Each section gets its own distinct motion so the page feels alive
   as you scroll rather than everything doing the same fade.
   ══════════════════════════════════════════════════════════════════ */


/* --- Section eyebrows: fast upward pop --------------------------- */
@keyframes eyebrowPop {
  from { opacity: 0; transform: translateY(8px) scaleX(0.92); letter-spacing: 0.22em; }
  to   { opacity: 1; transform: none; letter-spacing: 0.12em; }
}
.offline-page .eyebrow.reveal.visible {
  animation: eyebrowPop 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: none;
}

/* --- Section h2 headings: larger, slower scale reveal ------------ */
@keyframes headingReveal {
  from { opacity: 0; transform: scale(0.94) translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.offline-page h2.reveal.visible {
  animation: headingReveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: none;
}

/* --- Carousel section: drift up from further away ---------------- */
@keyframes driftUp {
  from { opacity: 0; transform: translateY(44px); }
  to   { opacity: 1; transform: none; }
}
.carousel-wrap.reveal.visible {
  animation: driftUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: none;
}

/* --- Hobby images: scale up from slightly smaller + fade --------- */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: none; }
}
.hobby-grid.reveal.visible {
  animation: scaleIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: none;
}

/* --- Suggestion box: slides up with a spring bounce -------------- */
@keyframes springUp {
  0%   { opacity: 0; transform: translateY(36px) scale(0.97); }
  60%  { transform: translateY(-4px) scale(1.005); }
  100% { opacity: 1; transform: none; }
}
.suggest-box.reveal.visible {
  animation: springUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: none;
}

/* --- Pull-quote: slow fade with upward drift ---------------------- */
@keyframes quoteIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
.pull-quote .reveal.visible {
  animation: quoteIn 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: none;
}

/* --- Stagger delays used with d1/d2/d3 --------------------------- */
.offline-page .reveal { transition-delay: 0s; }   /* reset global delays */
.offline-page .d1.reveal.visible { animation-delay: 0.04s; }
.offline-page .d2.reveal.visible { animation-delay: 0.12s; }
.offline-page .d3.reveal.visible { animation-delay: 0.22s; }

/* Respect reduced motion — fall back to a plain opacity fade */
@media (prefers-reduced-motion: reduce) {
  .offline-page .eyebrow.reveal.visible,
  .offline-page h2.reveal.visible,
  .carousel-wrap.reveal.visible,
  .hobby-grid.reveal.visible,
  .suggest-box.reveal.visible,
  .pull-quote .reveal.visible {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}