/* ── Homepage-specific styles ── */
/* Loaded only by index.html */

:root { --bg: #fefefe; --hero-pad: clamp(104px, 12vw, 220px); }

/* ── STATIONARY NAV (scrolls away with the page, no pill/fixed behavior) ── */
.nav {
  position: relative !important;
  z-index: 1000 !important;
  background: #111 !important;
  border-bottom: none !important;
  backdrop-filter: none !important;
}
.theme-light .nav { background: var(--bg) !important; }
.nav::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='gamma' amplitude='1' exponent='0.5' offset='0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  background-blend-mode: normal;
  opacity: 0.2;
  -webkit-mask-image: radial-gradient(circle 560px at top left, #000, transparent 100%);
  mask-image: radial-gradient(circle 560px at top left, #000, transparent 100%);
}
.theme-light .nav::before { background-blend-mode: multiply; opacity: 0.6; }
.nav > * { position: relative; z-index: 1; }

.root { padding-top: 0; }

/* ── NAV LEFT LINKS ── */
.nav-l {
  display: flex;
  align-items: center;
  gap: 24px;
}
.nav-l .nl {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  transition: color 0.2s;
}
.nav-l .nl:hover, .nav-l .nl.on { color: rgba(255,255,255,0.92); }
.theme-light .nav-l .nl { color: rgba(20,18,14,0.7); }
.theme-light .nav-l .nl:hover, .theme-light .nav-l .nl.on { color: rgba(20,18,14,0.9); }
.nav-l .nl.nav-name {
  font-family: var(--serif);
  font-weight: 500;
  font-style: normal;
  font-size: 18px;
  letter-spacing: -0.01em;
  text-transform: none;
  color: rgba(255,255,255,0.88);
}
.nav-l .nl.nav-name:hover, .nav-l .nl.nav-name.on { color: rgba(255,255,255,0.88); }
.theme-light .nav-l .nl.nav-name { color: rgba(20,18,14,0.88); }
.theme-light .nav-l .nl.nav-name:hover, .theme-light .nav-l .nl.nav-name.on { color: rgba(20,18,14,0.88); }
.nav-l .nc {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  border: 0.75px solid rgba(255,255,255,0.22);
  border-radius: 100px;
  padding: 6px 14px;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.nav-l .nc:hover { color: rgba(255,255,255,0.92); border-color: rgba(255,255,255,0.5); }
.theme-light .nav-l .nc { color: rgba(20,18,14,0.7); border-color: rgba(20,18,14,0.35); }
.theme-light .nav-l .nc:hover { color: rgba(20,18,14,0.9); border-color: rgba(20,18,14,0.5); }

/* ── BURGER BUTTON ── */
.nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: none;
  padding: 4px;
  width: 32px;
}
.nb-line {
  display: block;
  width: 22px;
  height: 1.5px;
  background: #111;
  border-radius: 2px;
  box-shadow:
    -1px -1px 1px rgba(0,0,0,0.6),
    1px 1px 1px rgba(255,255,255,0.14);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.theme-light .nb-line {
  background: var(--bg);
  box-shadow:
    -1px -1px 1px rgba(20,18,14,0.35),
    1px 1px 1px rgba(255,255,255,0.85);
}
.nav-burger.open .nb-line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger.open .nb-line:nth-child(2) { opacity: 0; }
.nav-burger.open .nb-line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── BURGER PANEL ── */
.burger-panel {
  position: fixed;
  top: 0; left: 0;
  width: 260px;
  height: 100vh;
  background: #111;
  z-index: 999;
  padding: 88px 40px 40px;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.38s cubic-bezier(.22,.68,0,1.1);
}
.burger-panel.open { transform: translateX(0); }
.theme-light .burger-panel { background: var(--bg); }
.bp-flower { font-size: 28px; margin-bottom: 40px; }
.bp-nav { display: flex; flex-direction: column; gap: 2px; }
.bp-link {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: rgba(255,255,255,0.28);
  text-decoration: none;
  transition: color 0.2s;
  line-height: 1.25;
  cursor: none;
}
.bp-link:hover, .bp-link.on { color: rgba(255,255,255,0.92); }
.theme-light .bp-link { color: rgba(20,18,14,0.25); }
.theme-light .bp-link:hover, .theme-light .bp-link.on { color: rgba(20,18,14,0.9); }
.bp-resume {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 28px;
}
.burger-overlay {
  position: fixed; inset: 0;
  z-index: 998;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.burger-overlay.open { opacity: 1; pointer-events: all; }

/* ── NAV BRAND IMAGE ── */
.nav-brand-img {
  height: 28px;
  width: auto;
  display: block;
  filter: sepia(1) saturate(0.45) brightness(1.05);
  opacity: 0.8;
}

/* ── NAV SWITCHES ── */
.nav-switches {
  display: flex;
  align-items: center;
  gap: 18px;
  justify-content: flex-end;
}
.nav-name {
  font-family: var(--serif);
  font-weight: 200;
  font-style: normal;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,0.88);
  white-space: nowrap;
}
.theme-light .nav-name { color: rgba(20,18,14,0.88); }
.nav-token {
  height: 32px;
  width: auto;
  flex-shrink: 0;
}
.cs-theme-toggle {
  background: none;
  border: 0.5px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.5);
  height: 32px;
  border-radius: 100px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  padding: 0 12px;
}
.cs-theme-toggle svg {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s;
  display: block;
}
.cs-theme-toggle:hover {
  color: rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.5);
}
.cs-theme-toggle:hover svg { transform: rotate(20deg) scale(1.15); }
@keyframes spin-in {
  from { transform: rotate(-90deg) scale(0.6); opacity: 0; }
  to   { transform: rotate(0deg)  scale(1);   opacity: 1; }
}
.cs-theme-toggle.spin svg { animation: spin-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.theme-light .cs-theme-toggle { color: rgba(30,28,24,0.5) !important; border-color: rgba(30,28,24,0.22) !important; }
.theme-light .cs-theme-toggle:hover { color: rgba(30,28,24,0.9) !important; border-color: rgba(30,28,24,0.5) !important; }

/* ── HERO BAND ── */
.hero {
  background: #111;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  position: relative;
  overflow: visible;
  padding: 72px var(--hero-pad) 0px;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='gamma' amplitude='1' exponent='0.5' offset='0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  background-blend-mode: normal;
  opacity: 0.2;
  -webkit-mask-image: radial-gradient(circle 560px at top left, #000, transparent 100%);
  mask-image: radial-gradient(circle 560px at top left, #000, transparent 100%);
}
.hero > * { position: relative; z-index: 1; }

.hero-band-bottom {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  margin: 0;
  padding: 96px 0 80px;
  gap: 0;
}
.hero-big-name {
  font-family: var(--serif);
  font-size: clamp(13px, 1.1vw, 18px);
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  margin-bottom: 18px;
  animation: fu 0.6s ease 0s both;
}
.hero-left {
  text-align: center;
  max-width: 100%;
  width: 100%;
}
.hero-micro {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin: 0 0 20px;
  animation: fu 0.6s ease 0s both;
}
.theme-light .hero-micro { color: rgba(30,28,24,0.4) !important; }
.hero-name-big {
  font-family: var(--serif);
  font-size: clamp(36px, 6vw, 88px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: rgba(255,255,255,0.92);
  margin: 0 0 32px;
  animation: fu 0.6s ease 0.08s both;
}
.theme-light .hero-name-big { color: var(--ink) !important; }
.hero-line {
  font-family: var(--serif);
  font-size: clamp(52px, 9vw, 128px);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.04em;
  margin: 0;
  display: block;
  animation: fu 0.6s ease 0.1s both;
}
.hl-1 { color: rgba(255,255,255,0.92); }
.hl-2 { color: rgba(255,255,255,0.38); }
.hl-3 { color: rgba(255,255,255,0.22); }
.hl-4 { color: rgba(255,255,255,0.10); }
.hl-5 { color: rgba(255,255,255,0.05); }
.theme-light .hl-1 { color: rgba(30,28,24,0.92) !important; }
.theme-light .hl-2 { color: rgba(30,28,24,0.38) !important; }
.theme-light .hl-3 { color: rgba(30,28,24,0.18) !important; }
.theme-light .hl-4 { color: rgba(30,28,24,0.08) !important; }
.theme-light .hl-5 { color: rgba(30,28,24,0.04) !important; }
.hero-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 16px;
  animation: fu 0.6s ease 0.05s both;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: none;
  color: rgba(255,255,255,0.38);
  white-space: nowrap;
  flex-wrap: wrap;
  row-gap: 6px;
}
.hero-meta-rule {
  width: 28px;
  height: 0.5px;
  background: rgba(255,255,255,0.2);
  flex-shrink: 0;
  margin: 0 10px;
}
.hero-meta-sep { margin: 0 8px; opacity: 0.5; }
.hero-meta-title { color: rgba(255,255,255,0.72); }
.hero-meta-disc { color: var(--lily-color); opacity: 0.85; transition: color 0.55s ease; }
.hero-meta-email { color: rgba(255,255,255,0.55); }

.hero-role {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  margin: 0 0 36px;
  animation: fu 0.6s ease 0.05s both;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.hero-role-skills {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.7;
}
.hero-role-dot {
  opacity: 0.3;
}
.hero-role-lily {
  display: flex;
  align-items: center;
  color: var(--lily-color);
  transition: color 0.55s ease;
  opacity: 0.8;
  flex-shrink: 0;
}
.hero-greeting {
  font-family: var(--serif);
  font-size: clamp(14px, 1.35vw, 18px);
  font-weight: 400;
  font-style: normal;
  line-height: 1.8;
  color: rgba(255,255,255,0.5);
  margin: 0 0 28px;
  animation: fu 0.6s ease 0.1s both;
}
.theme-light .hero-greeting { color: rgba(30,28,24,0.68) !important; }
.hero-name {
  font-family: var(--serif);
  font-size: clamp(28px, 3.8vw, 58px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: rgba(255,255,255,0.92);
  margin-top: 0;
  margin-bottom: 28px;
  animation: fu 0.6s ease 0.12s both;
}
.hero-tagline {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(15px, 1.6vw, 22px);
  color: rgba(255,255,255,0.45);
  line-height: 1.5;
  margin: 10px 0 32px;
  animation: fu 0.6s ease 0.18s both;
}
.hero-desc {
  font-family: var(--serif);
  font-style: normal;
  font-size: clamp(14px, 1.35vw, 18px);
  line-height: 1.8;
  color: rgba(255,255,255,0.5);
  max-width: 100%;
  margin: 0 0 28px;
  animation: fu 0.6s ease 0.18s both;
}
.hd-name {
  font-style: normal;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
}
.hd-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0.5px solid rgba(255,255,255,0.18);
  border-radius: 5px;
  padding: 1px 7px 1px 5px;
  font-style: normal;
  color: rgba(255,255,255,0.7);
  white-space: nowrap;
  vertical-align: middle;
  position: relative;
  top: -1px;
  font-size: 0.9em;
}
.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  padding-bottom: 36px;
  animation: fu 0.6s ease 0.24s both;
}
.hero-feeling {
  color: var(--lily-color);
  font-style: italic;
  font-weight: 400;
  transition: color 0.55s ease;
}
.hero-word-icon {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 14px;
  color: var(--lily-color);
  transition: color 0.55s ease;
  opacity: 0.85;
}
.hero-word-icon svg { width: 28px; height: 28px; }
.hero-word-icon svg { display: block; }
.hero-cycling {
  display: inline;
  vertical-align: baseline;
  color: var(--lily-color);
  font-style: normal;
  font-weight: 400;
  transition: color 0.55s ease;
}
.hero-cursor {
  display: inline-block;
  width: 3px;
  background: var(--lily-color);
  border-radius: 1px;
  margin-left: 3px;
  vertical-align: baseline;
  height: 0.82em;
  position: relative;
  top: 0.05em;
  transition: background 0.55s ease;
  animation: cursor-blink 1s step-end infinite;
}
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
@media (max-width: 640px) {
  .hero-br { display: none; }
}
.hero-tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lily-color);
  border: 0.5px solid var(--lily-color);
  border-radius: 100px;
  padding: 5px 13px;
  opacity: 0.72;
  transition: color 0.55s ease, border-color 0.55s ease;
}

/* LOGO STRIP */
.logo-strip {
  padding: 16px 0 16px;
  animation: fu 0.6s ease 0.22s both;
}
.ls-eyebrow {
  font-size: 7px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.18);
  font-family: var(--mono);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.ls-eyebrow::before, .ls-eyebrow::after { content:''; flex:1; height:0.5px; background:rgba(255,255,255,0.15); }
.ls-track {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
}
.ls-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
}
.ls-logo {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  background: rgba(255,255,255,0.05);
  border: 0.5px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
  flex-shrink: 0;
}
.ls-item:hover .ls-logo {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.75);
  border-color: rgba(255,255,255,0.18);
}
/* Logo items with real images — no box, natural aspect ratio */
.ls-logo:has(img) {
  background: none !important;
  border: none !important;
  width: auto;
  height: auto;
  mix-blend-mode: multiply; /* light mode: kills white backgrounds */
}
.theme-dark .ls-logo:has(img),
.theme-airplane .ls-logo:has(img) {
  mix-blend-mode: screen; /* dark mode: kills white backgrounds on dark bg */
}
.ls-logo img {
  height: 44px;
  width: auto;
  display: block;
  filter: brightness(3) saturate(0.5) opacity(0.65);
  transition: filter 0.25s;
}
.ls-item:hover .ls-logo img {
  filter: brightness(3) saturate(1) opacity(1);
}
.ls-lily-cell {
  flex-shrink: 0;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* CONTENT WRAP — beige area */
.content-wrap {
  max-width: none;
  margin: 0 -64px;
  padding: 0 calc(var(--hero-pad) - 5px) 64px;
  position: relative;
}
.content-wrap .section-heading { margin-bottom: -10px; }
.content-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='gamma' amplitude='1' exponent='0.5' offset='0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  background-blend-mode: normal;
  -webkit-mask-image: radial-gradient(circle 560px at bottom right, #000, transparent 100%);
  mask-image: radial-gradient(circle 560px at bottom right, #000, transparent 100%);
}
.theme-light .content-wrap::before { background-blend-mode: multiply; opacity: 0.6; }

/* ── CARD FAN ── */
.card-fan {
  position: relative;
  width: 220px;
  height: 148px;
  margin: 32px auto 0;
  cursor: none;
}
.pick-a-card {
  text-align: center;
  font-family: var(--serif);
  font-size: 11px;
  font-style: italic;
  color: var(--muted);
  margin: 22px auto 0;
  opacity: 0.7;
}
.fan-card {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  background: rgba(24,22,18,0.92);
  backdrop-filter: blur(8px);
  border: 0.5px solid rgba(255,255,255,0.1);
  box-shadow: 0 4px 24px rgba(0,0,0,0.28);
  transform-origin: bottom center;
  transition: transform 0.44s cubic-bezier(.22,.68,0,1.2), opacity 0.3s ease, box-shadow 0.3s;
}
/* Fan positions */
.fan-card:nth-child(1) { transform: rotate(-6deg) translateY(6px);  z-index: 1; }
.fan-card:nth-child(2) { transform: rotate(0deg)  translateY(0px);  z-index: 3; }
.fan-card:nth-child(3) { transform: rotate(6deg)  translateY(6px);  z-index: 2; }
/* Hover: only center card lifts — sides stay in fan formation */
.card-fan:hover .fan-card:nth-child(2) {
  transform: scale(1.13) translateY(-12px);
  box-shadow: 0 22px 52px rgba(0,0,0,0.44);
  z-index: 5;
}
/* Exit: old center sweeps out */
@keyframes fc-exit-left  { 0% { transform:rotate(0) translateX(0) scale(1); opacity:1; } 100% { transform:rotate(-9deg) translateX(-60px) translateY(5px) scale(0.88); opacity:0; } }
@keyframes fc-exit-right { 0% { transform:rotate(0) translateX(0) scale(1); opacity:1; } 100% { transform:rotate(9deg)  translateX(60px)  translateY(5px) scale(0.88); opacity:0; } }
/* Enter: new center sweeps in */
@keyframes fc-enter-right { 0% { transform:rotate(10deg) translateX(70px) translateY(6px) scale(0.92); opacity:0.2; } 60% { transform:rotate(-1deg) translateX(-4px) translateY(-3px) scale(1.02); opacity:1; } 100% { transform:rotate(0) translateX(0) translateY(0) scale(1); opacity:1; } }
@keyframes fc-enter-left  { 0% { transform:rotate(-10deg) translateX(-70px) translateY(6px) scale(0.92); opacity:0.2; } 60% { transform:rotate(1deg) translateX(4px) translateY(-3px) scale(1.02); opacity:1; } 100% { transform:rotate(0) translateX(0) translateY(0) scale(1); opacity:1; } }
.fan-card:nth-child(2).fc-exit-l  { animation: fc-exit-left  0.24s ease-in forwards; z-index:5!important; transition:none!important; }
.fan-card:nth-child(2).fc-exit-r  { animation: fc-exit-right 0.24s ease-in forwards; z-index:5!important; transition:none!important; }
.fan-card:nth-child(2).fc-enter-r { animation: fc-enter-right 0.52s cubic-bezier(.34,1.25,.64,1) forwards; z-index:5!important; transition:none!important; }
.fan-card:nth-child(2).fc-enter-l { animation: fc-enter-left  0.52s cubic-bezier(.34,1.25,.64,1) forwards; z-index:5!important; transition:none!important; }
/* Side cards fade briefly on update */
.card-fan.updating .fan-card:nth-child(1),
.card-fan.updating .fan-card:nth-child(3) { opacity: 0.45; }
/* Phrase accent — last words match lily color */
.phrase-accent { color: var(--lily-color); transition: color 0.5s ease; }
/* Fan nav arrows */
.fan-wrap { display:flex; align-items:center; justify-content:center; gap:18px; margin:32px auto 0; }
.card-fan { margin: 0; }
.fan-nav {
  background: none; border: none; cursor: none; padding: 4px;
  color: var(--muted); opacity: 0.55;
  transition: opacity 0.22s, color 0.22s, transform 0.22s;
  flex-shrink: 0;
}
.fan-nav:hover { opacity: 1; color: var(--lily-color); transform: scale(1.2); }
/* Card content */
.fc-stripe { height: 3px; flex-shrink: 0; }
.fc-body {
  flex: 1;
  padding: 12px 13px 13px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.fc-tag {
  font-size: 6.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-family: var(--mono);
  color: rgba(255,255,255,0.7);
  margin-bottom: 8px;
  display: inline-block;
  background: rgba(255,255,255,0.12);
  border: 0.5px solid rgba(255,255,255,0.18);
  border-radius: 100px;
  padding: 3px 8px;
}
.fc-title {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  line-height: 1.2;
}

/* ── HERO PROJECT CARD ── */
.hero-card-wrap {
  margin: 32px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.hero-project-card {
  display: flex;
  flex-direction: column;
  width: 210px;
  height: 140px;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  background: rgba(22,20,16,0.95);
  border: 0.5px solid rgba(255,255,255,0.1);
  box-shadow: 0 8px 36px rgba(0,0,0,0.38);
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
  cursor: none;
  position: relative;
  z-index: 5;
}
.hero-project-card:hover {
  transform: scale(1.04) translateY(-5px);
  box-shadow: 0 20px 56px rgba(0,0,0,0.5);
}
.hero-card-media {
  flex: 1;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  position: relative;
}
.hero-card-body {
  padding: 8px 11px 10px;
  flex-shrink: 0;
  background: rgba(16,14,11,0.97);
}
.hero-card-tag {
  font-family: var(--mono);
  font-size: 6.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  margin-bottom: 4px;
}
.hero-card-title {
  font-family: var(--serif);
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  line-height: 1.2;
}
.hero-card-hint {
  font-family: var(--serif);
  font-style: italic;
  font-size: 10px;
  color: rgba(255,255,255,0.2);
  margin: 0;
  letter-spacing: 0.02em;
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes card-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-8px) scale(0.97); }
}
.hero-project-card.card-in  { animation: card-in  0.38s cubic-bezier(.34,1.2,.64,1) forwards; }
.hero-project-card.card-out { animation: card-out 0.22s ease-in forwards; pointer-events: none; }

/* ── NAV TICKER ── */
.nav-ticker {
  display: none !important;
  grid-column: 2;
  position: relative;
  width: clamp(260px, 54vw, 740px);
  margin: 0 auto;
  flex-direction: column;
  align-items: stretch;
}
.nav-ticker-clip {
  overflow-x: clip;
  overflow-y: visible;
  display: flex;
  align-items: center;
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}
.nav-switches {
  grid-column: 3;
}
.nav-ticker:hover .nav-ticker-clip {
  mask-image: none;
  -webkit-mask-image: none;
}
.nav-ticker:hover .nav-ticker-track {
  animation-play-state: paused;
}
.nav-ticker-track {
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
  animation: nav-ticker 28s linear infinite;
}
@keyframes nav-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.nt-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 9.5px;
  letter-spacing: normal;
  text-transform: none;
  color: rgba(255,255,255,0.35);
  flex-shrink: 0;
}
.nt-logo {
  height: 14px;
  width: auto;
  flex-shrink: 0;
  display: block;
}
.nt-sep {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  color: var(--lily-color);
  opacity: 0.7;
  display: inline-block;
}
.theme-light .nt-item { color: rgba(20,18,14,0.45); }

/* ── TICKER TOOLTIP ── */
.ticker-tooltip {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: #1c1c1c;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 16px 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 10;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
}
.nav-ticker:hover .ticker-tooltip {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.tt-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px 20px;
}
.tt-tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.tt-logo {
  height: 36px;
  width: auto;
  display: block;
}
.tt-tool span {
  font-family: var(--mono);
  font-size: 7.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  text-align: center;
  white-space: nowrap;
}
.theme-light .ticker-tooltip {
  background: #fefefe;
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}
.theme-light .tt-tool span { color: rgba(20,18,14,0.55); }

/* ── PAGE LOADER ── */
#loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #f8f7f4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  transition: opacity 0.5s ease;
}
#loader.out { opacity: 0; pointer-events: none; }
#loader-card {
  width: clamp(280px, 36vw, 520px);
  aspect-ratio: 16/10;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.14);
  position: relative;
}
.lc-frame {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.lc-frame.wipe-in {
  animation: lc-wipe 0.28s cubic-bezier(0.4,0,0.2,1) forwards;
}
@keyframes lc-wipe {
  from { clip-path: inset(0 0 100% 0 round 0px); }
  to   { clip-path: inset(0 0 0% 0 round 0px); }
}
.lc-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 55%);
}
.lc-logo {
  position: absolute;
  top: 20px; left: 20px;
  max-height: 36px; max-width: 120px;
  filter: brightness(0) invert(1);
  object-fit: contain;
}
.lc-text {
  position: absolute;
  bottom: 14px; left: 18px; right: 18px;
}
.lc-tag {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 5px;
}
.lc-name {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 700;
  color: rgba(255,255,255,0.95);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
#loader-bar {
  width: clamp(280px, 36vw, 520px);
  height: 2px;
  background: rgba(20,18,14,0.1);
  border-radius: 2px;
  overflow: hidden;
}
#loader-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--lily-color);
  transition: width 0.08s linear;
  border-radius: 2px;
}

/* ── NEW HERO LAYOUT ── */
.hn-name-top {
  font-family: var(--serif);
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin: 0 0 40px;
}
.theme-light .hn-name-top { color: rgba(20,18,14,0.45); }
.hn-filters {
  display: flex;
  gap: clamp(4px, 1.4cqw, 8px);
  flex-wrap: nowrap;
  margin-bottom: 16px;
  container-type: inline-size;
}
.hn-filter-pill {
  font-family: var(--mono);
  font-size: clamp(9px, 3.2cqw, 11.5px);
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  background: none;
  border: 0.5px solid rgba(255,255,255,0.3);
  border-radius: 14px;
  padding: clamp(5px, 1.4cqw, 8px) clamp(7px, 2.8cqw, 16px);
  cursor: none;
  transition: all 0.2s;
  flex: 1 1 0;
  min-width: 0;
  white-space: normal;
  text-align: center;
}
.hn-filter-pill:hover {
  color: rgba(255,255,255,1);
  border-color: rgba(255,255,255,0.6);
}
.theme-light .hn-filter-pill {
  color: var(--ink);
  border-color: var(--bord2);
}
.theme-light .hn-filter-pill:hover {
  color: var(--ink);
  border-color: rgba(20,18,14,0.5);
}
.hn-hero-img {
  width: calc(100% + 178px);
  margin-left: -89px;
  aspect-ratio: 21/4.8;
  background: none;
  border-radius: 14px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.hn-hero-img::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: var(--hp-grid-size, 36px) var(--hp-grid-size, 36px);
  background-position: center center;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 40%, transparent 100%);
}
.theme-light .hn-hero-img::before {
  background-image:
    linear-gradient(rgba(20,18,14,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,18,14,0.08) 1px, transparent 1px);
}
.hn-hero-img::after {
  content: '';
  position: absolute;
  inset: -30px;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 42% 52% at 0% 0%, #e0295a 0%, transparent 62%),
    radial-gradient(ellipse 42% 52% at 100% 0%, #3c56d6 0%, transparent 62%),
    radial-gradient(ellipse 42% 52% at 0% 100%, #3c56d6 0%, transparent 62%),
    radial-gradient(ellipse 42% 52% at 100% 100%, #e0295a 0%, transparent 62%),
    radial-gradient(ellipse 30% 40% at 50% 0%, #ffb3c6 0%, transparent 65%),
    radial-gradient(ellipse 30% 40% at 50% 100%, #9dc8ff 0%, transparent 65%);
  -webkit-mask-image: radial-gradient(ellipse 66% 64% at 50% 50%, transparent 62%, #000 100%);
  mask-image: radial-gradient(ellipse 66% 64% at 50% 50%, transparent 62%, #000 100%);
  opacity: 0;
  filter: blur(24px);
  transform: scale(0.82);
  transform-origin: center;
  transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  animation: hn-token-peek-glow 14s ease-in-out infinite;
}
.hn-hero-img:has(.hn-hero-name:hover)::after { opacity: 0.7; transform: scale(1); }
.hn-hero-img.hp-glow-leaving::after {
  opacity: 0;
  transform: scale(1.3);
  transition: opacity 1.4s ease, transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.hn-token {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: clamp(30px, 3.2vw, 50px);
  height: auto;
  pointer-events: auto;
  will-change: transform;
  filter: drop-shadow(0 3px 2px rgba(0,0,0,0.3));
  cursor: grab;
  touch-action: none;
  isolation: isolate;
}
.hn-token.dragging {
  cursor: grabbing;
  z-index: 6;
  filter: drop-shadow(0 6px 4px rgba(0,0,0,0.4));
}
.hn-token.hn-token-peek {
  cursor: pointer;
  z-index: 4;
}
.hn-token.hn-token-peek::before {
  content: '';
  position: absolute;
  inset: -34px -28px;
  z-index: -1;
  border-radius: 20px;
  background:
    radial-gradient(closest-side, #e0295a 0%, transparent 72%),
    radial-gradient(closest-side, #3c56d6 0%, transparent 72%),
    radial-gradient(closest-side, #e8b34e 0%, transparent 72%);
  background-position: 22% 42%, 78% 58%, 50% 82%;
  background-repeat: no-repeat;
  background-size: 55% 75%, 55% 75%, 50% 65%;
  opacity: 0.35;
  filter: blur(26px);
  pointer-events: none;
  animation: hn-token-peek-glow 14s ease-in-out infinite;
}
@keyframes hn-token-peek-glow {
  0%   { background-position: 22% 42%, 78% 58%, 50% 82%; background-size: 55% 75%, 55% 75%, 50% 65%; }
  25%  { background-position: 28% 34%, 70% 66%, 44% 76%; background-size: 60% 82%, 50% 68%, 46% 60%; }
  50%  { background-position: 16% 50%, 84% 46%, 56% 88%; background-size: 48% 66%, 60% 82%, 54% 70%; }
  75%  { background-position: 26% 38%, 74% 62%, 48% 80%; background-size: 58% 78%, 52% 70%, 48% 62%; }
  100% { background-position: 22% 42%, 78% 58%, 50% 82%; background-size: 55% 75%, 55% 75%, 50% 65%; }
}
.hn-token.hn-token--xl {
  width: clamp(60px, 6.4vw, 100px);
  z-index: 5;
}
.hn-token-reset {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 7;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  background: rgba(0,0,0,0.35);
  border: 0.75px solid rgba(255,255,255,0.25);
  border-radius: 100px;
  padding: 6px 14px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.hn-token-reset:hover {
  color: rgba(255,255,255,0.95);
  border-color: rgba(255,255,255,0.5);
  background: rgba(0,0,0,0.5);
}
.hn-token-reset.visible { display: block; }
.hn-token-img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.hn-token.tint-white .hn-token-img { filter: brightness(0) invert(1); }
.hn-token.tint-1 .hn-token-img { filter: url(#token-tint-1); }
.hn-token.tint-2 .hn-token-img { filter: url(#token-tint-2); }
.hn-token.tint-3 .hn-token-img { filter: url(#token-tint-3); }
.hn-token.tint-4 .hn-token-img { filter: url(#token-tint-4); }
.hn-token.tint-5 .hn-token-img { filter: url(#token-tint-5); }
.hn-token.tint-6 .hn-token-img { filter: url(#token-tint-6); }
.hn-hero-name {
  position: relative;
  z-index: 2;
  font-family: var(--serif);
  font-weight: 200;
  font-style: normal;
  font-size: clamp(58px, 8.4vw, 116px);
  letter-spacing: -0.02em;
  line-height: 1.0;
  color: rgba(255,255,255,0.88);
  white-space: nowrap;
  pointer-events: auto;
  cursor: none;
  user-select: none;
}
.theme-light .hn-hero-name { color: rgba(20,18,14,0.88); }
.hn-hero-name-tooltip {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%) translateY(4px);
  margin-bottom: 14px;
  padding: 6px 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(20,18,14,0.92);
  background: rgba(250,248,244,0.96);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease;
  transition-delay: 0s;
  pointer-events: none;
}
.hn-hero-name:hover .hn-hero-name-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0.5s;
}
.hn-hero-psst {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%) translateY(10px);
  margin-bottom: 18px;
  padding: 7px 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: rgba(20,18,14,0.92);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
}
.hn-hero-psst::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 8px solid #fff;
}
.hn-hero-psst.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.hn-hero-name-punct {
  display: inline-block;
  transform-origin: bottom center;
  animation: hn-punct-bounce 2.4s infinite;
  pointer-events: none;
  margin-left: 4px;
}
.hn-letter {
  display: inline-block;
}
.hn-letter-space {
  width: 0.28em;
}
@keyframes hn-punct-bounce {
  0%   { transform: translateY(0);        animation-timing-function: cubic-bezier(.17,.89,.32,1.05); }
  8%   { transform: translateY(-1em);      animation-timing-function: cubic-bezier(.55,0,1,.45); }
  16%  { transform: translateY(0);         animation-timing-function: cubic-bezier(.17,.89,.32,1.05); }
  22%  { transform: translateY(-0.38em);   animation-timing-function: cubic-bezier(.55,0,1,.45); }
  28%  { transform: translateY(0);         animation-timing-function: cubic-bezier(.17,.89,.32,1.05); }
  32%  { transform: translateY(-0.12em);   animation-timing-function: cubic-bezier(.55,0,1,.45); }
  36%, 100% { transform: translateY(0); }
}
.hn-main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}
.hn-text-col {
  padding-top: 64px;
  max-width: none;
  width: 136%;
  margin-left: -6%;
  transform: scale(0.78);
  transform-origin: top left;
  margin-bottom: 0px;
}
.hn-previously { margin-bottom: 24px; }
.hn-visual { display: none; }
@media (max-width: 768px) {
  .hn-main { grid-template-columns: 1fr; gap: 0; }
}
.hn-bio {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(16px, 1.7vw, 26px);
  font-weight: 500;
  line-height: 1.6;
  color: rgba(255,255,255,0.88);
  letter-spacing: -0.012em;
  margin: 0 0 28px;
}
.theme-light .hn-bio { color: rgba(20,18,14,0.88); }
.hn-redact {
  display: inline-block;
  height: 0.82em;
  vertical-align: middle;
  position: relative;
  top: -0.05em;
  background: #c4b4e4;
  border-radius: 100px;
  margin: 0 3px;
  filter: blur(3px);
  overflow: hidden;
}
.hn-redact--gif {
  filter: none;
  background: transparent;
  height: 1.15em;
  width: 82px !important;
  top: -0.18em;
  border-radius: 8px;
}
.hn-pill-gif {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 100px;
  display: block;
}
.hn-previously {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.hn-prev-label {
  display: inline-block;
  font-family: var(--mono);
  font-style: normal;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  background: none;
  border: none;
  padding: 0;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s;
}
.theme-light .hn-prev-label {
  color: var(--ink);
}
.hn-prev-rects {
  display: flex;
  gap: 7px;
  align-items: center;
}
.hn-prev-rect {
  height: 42px;
  background: none;
  border: none;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
}
.hn-prev-logo {
  height: 44px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1) opacity(0.55);
  transition: filter 0.2s;
}
.theme-light .hn-prev-logo { filter: brightness(0) opacity(0.55); }
.hn-prev-rect:hover .hn-prev-logo { opacity: 0.9; }
.hn-prev-logo--petal { height: 34px; max-width: 90px; object-fit: cover; object-position: center center; }
.hn-prev-logo--hirshhorn { height: 30px; max-width: 95px; object-fit: contain; }

.hn-bio-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "bio prev" "bio buttons";
  align-items: start;
  column-gap: 48px;
  row-gap: 8px;
}
.hn-bio-left { grid-area: bio; min-width: 0; }
.hn-prev-grid-col { grid-area: prev; display: flex; flex-direction: column; align-items: center; transform: translate(18px, 20px); }
.hn-hero-cta-row { grid-area: buttons; }
@media (max-width: 1000px) {
  :root { --hero-pad: 48px; }
  .content-wrap { margin: 0; padding: 0 48px 64px; }
  .hn-text-col { width: 100%; margin-left: 0; transform: none; }
  .hn-hero-img { width: 100%; margin-left: 0; }
  .hn-bio-row {
    grid-template-columns: 1fr;
    grid-template-areas: "bio" "buttons" "prev";
    justify-items: center;
    text-align: center;
    gap: 24px;
  }
  .hn-bio-left { width: 100%; padding: 0 20px; }
  .hn-filters { justify-content: center; }
  .hn-bio { font-size: clamp(16px, 1.9vw, 22px); margin-bottom: 0; text-align: center; }
  .hn-prev-grid-col { display: none; }
  .hn-hero-cta-row { width: 100% !important; max-width: 460px; padding: 0 20px; margin-top: 0; margin-bottom: 32px; transform: none !important; }
  .hn-hero-cta { padding: 8px 14px !important; min-width: 0; }
}
@media (max-width: 400px) {
  .hn-hero-cta-row { flex-direction: column; }
  .hn-hero-cta-row .hn-hero-cta:last-child { flex: 1; }
}
.hn-prev-grid-col .hn-prev-label {
  display: inline-block;
  width: fit-content;
  margin-bottom: 10px;
}
.hn-prev-rects--grid {
  display: grid;
  grid-template-columns: repeat(3, 110px);
  grid-auto-rows: 42px;
  gap: 8px;
  margin-top: 4px;
}
.hn-prev-rects--grid .hn-prev-rect { width: 100%; height: 100%; }
.hn-prev-rects--grid .hn-what-else--mob {
  margin-left: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
}

.hn-marquee {
  position: relative;
  width: clamp(260px, calc(26.7vw - 6.7px), 380px);
  max-width: 100%;
  height: clamp(52px, calc(25.33px + 2.667vw), 64px);
  overflow: hidden;
  margin: 9px auto 5px;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.hn-marquee-track {
  display: flex;
  align-items: flex-start;
  width: max-content;
  animation: hn-marquee-scroll 11s linear infinite;
  animation-play-state: paused;
  will-change: transform;
  transform: translateZ(0);
}
.hn-marquee-track.hn-ready {
  animation-play-state: running;
}
@keyframes hn-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.hn-hero-cta-row {
  display: flex;
  gap: 8px;
  margin-top: -4px;
  width: clamp(220px, calc(57.8vw - 358px), 480px);
  max-width: 100%;
  transform: translateX(18px);
}
.hn-hero-cta {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  font-family: var(--mono);
  font-size: clamp(10px, calc(7.22px + 0.278vw), 11.25px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  border: 0.75px solid rgba(255,255,255,0.22);
  border-radius: 8px;
  padding: clamp(8px, calc(-5.33px + 1.333vw), 14px);
  opacity: 0.6;
  transition: color 0.2s, border-color 0.2s, background 0.2s, opacity 0.2s;
}
.hn-hero-cta-row .hn-hero-cta:last-child { flex: 0.5; }
.hn-hero-cta > span:first-child { min-width: 0; overflow-wrap: break-word; }
.hn-hero-cta > span:last-child { flex-shrink: 0; }
.hn-hero-cta:hover { color: rgba(255,255,255,0.92); border-color: rgba(255,255,255,0.5); opacity: 1; }
.theme-light .hn-hero-cta { color: rgba(20,18,14,0.92); border-color: rgba(20,18,14,0.35); }
.theme-light .hn-hero-cta:hover { color: rgba(20,18,14,1); border-color: rgba(20,18,14,0.5); }

.hn-prev-rects {
  position: relative;
}
.hn-bio-title {
  position: relative;
  display: inline-block;
  color: #e090b8;
  padding: 0 1px;
  line-height: inherit;
  font-style: italic;
}
.hn-bio-underline {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--rose);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.hn-bio-title::after {
  display: none;
}
.hn-bio-title-silver {
  color: inherit;
}
.hn-bio-sparkle {
  display: inline-block;
  font-style: normal;
  font-size: 0.85em;
  letter-spacing: 0.08em;
  color: inherit;
}
.hn-bio-title-silver::after {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(180,180,200,0.45) 25%,
    rgba(220,220,235,0.65) 50%,
    rgba(255,255,255,0.85) 68%,
    transparent 100%
  );
}
.hn-prev-text {
  font-family: var(--serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
  padding: 0 4px;
}
.theme-light .hn-prev-text { color: rgba(20,18,14,0.38); }
.hn-prev-rect--text:hover .hn-prev-text { color: rgba(255,255,255,0.85); }
.theme-light .hn-prev-rect--text:hover .hn-prev-text { color: rgba(20,18,14,0.72); }
.hn-what-else {
  position: absolute;
  bottom: 140px;
  right: 0;
  font-family: var(--mono);
  font-style: normal;
  font-size: 8.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #0c0906;
  text-decoration: none;
  border: 0.5px solid rgba(255,255,255,0.92);
  border-radius: 20px;
  padding: 8px 16px;
  transition: all 0.2s;
  white-space: nowrap;
  z-index: 10;
  background: rgba(255,255,255,0.92);
}
.hn-what-else:hover {
  background: rgba(255,255,255,1);
  border-color: white;
}
.hn-what-else--mob {
  display: inline-flex;
  position: static;
  flex-shrink: 0;
  margin-left: auto;
}
@media (max-width: 768px) {
  .hn-visual { display: none; }
  .hn-what-else--mob { margin-top: 20px; margin-left: 0; }
  .hn-redact--gif { width: 42px !important; }
  .hn-previously { align-items: flex-start; }
  .hn-prev-rects { overflow-x: auto !important; overflow-y: visible !important; gap: 5px; }
  .hn-prev-rect { height: 40px; padding: 0 8px !important; }
  .hn-prev-logo { height: 22px !important; max-width: 58px !important; }
}
/* ── FLOATING VISUAL ── */
.hn-visual {
  position: relative;
  height: 320px;
  transform: translateX(90px);
}
.hn-float {
  position: absolute;
  border-radius: 10px;
  overflow: hidden;
  will-change: transform;
  transition: background 0.55s ease, transform 0.18s cubic-bezier(.22,.68,0,1.1);
  box-shadow: 0 8px 48px rgba(0,0,0,0.5);
  border: 0.5px solid rgba(255,255,255,0.08);
  background: #14100d;
}
.hn-float img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hn-float-num {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  font-family: var(--serif);
  font-size: 48px;
  font-style: italic;
  color: rgba(255,255,255,0.5);
  pointer-events: none;
  z-index: 3;
}
.hn-float-1 {
  width: 48%;
  aspect-ratio: 1;
  top: 8%;
  right: 0;
  z-index: 1;
  background: #1e1428;
  border-color: rgba(255,255,255,0.07);
}
.hn-float-2 {
  width: 38%;
  aspect-ratio: 1;
  top: 20%;
  left: 29%;
  z-index: 4;
  background-color: var(--lily-color, #c4687a);
  background-image: linear-gradient(rgba(196,104,122,0.45), rgba(196,104,122,0.45)), url('/public/images/b48f2a8b493cf601f77f67e72261a8a4_mtro7e.jpg');
  background-size: cover;
  background-position: center;
  border-color: transparent;
}
.hn-float-3 {
  width: 24%;
  aspect-ratio: 1;
  top: 3%;
  left: 58%;
  z-index: 3;
  background: #0e2028;
  border-color: rgba(255,255,255,0.06);
}
.hn-float-4 {
  width: 32%;
  aspect-ratio: 1;
  top: 60%;
  left: 19%;
  z-index: 1;
  background: #22180a;
  border-color: rgba(255,255,255,0.06);
}
.hn-float-5 {
  width: 26%;
  aspect-ratio: 1;
  top: 40%;
  right: -2%;
  z-index: 2;
  background: #1a1030;
  border-color: rgba(255,255,255,0.06);
}

/* all non-photo floats nest behind float-2 — peek only from top and right, angled */
.hn-float-1 {
  translate: -26% 19%;
  scale: 0.9;
  rotate: 6deg;
  transition: translate 0.65s cubic-bezier(.22,.68,0,1.15), scale 0.65s cubic-bezier(.22,.68,0,1.15), rotate 0.65s cubic-bezier(.22,.68,0,1.15);
}
.hn-float-3 {
  translate: -35% 65%;
  scale: 0.9;
  rotate: -8deg;
  transition: translate 0.65s cubic-bezier(.22,.68,0,1.15), scale 0.65s cubic-bezier(.22,.68,0,1.15), rotate 0.65s cubic-bezier(.22,.68,0,1.15);
  transition-delay: 0.05s;
}
.hn-float-4 {
  translate: 31% -140%;
  scale: 0.9;
  rotate: -5deg;
  transition: translate 0.65s cubic-bezier(.22,.68,0,1.15), scale 0.65s cubic-bezier(.22,.68,0,1.15), rotate 0.65s cubic-bezier(.22,.68,0,1.15);
  transition-delay: 0.1s;
}
.hn-float-5 {
  translate: -69% -80%;
  scale: 0.9;
  rotate: 4deg;
  transition: translate 0.65s cubic-bezier(.22,.68,0,1.15), scale 0.65s cubic-bezier(.22,.68,0,1.15), rotate 0.65s cubic-bezier(.22,.68,0,1.15);
  transition-delay: 0.15s;
}

/* expand on hover — straighten and fly out */
.hn-visual:hover .hn-float-1 { translate: 0 0; scale: 1; rotate: 0deg; transition-delay: 0s; }
.hn-visual:hover .hn-float-3 { translate: 0 0; scale: 1; rotate: 0deg; transition-delay: 0.06s; }
.hn-visual:hover .hn-float-4 { translate: 0 0; scale: 1; rotate: 0deg; transition-delay: 0.11s; }
.hn-visual:hover .hn-float-5 { translate: 0 0; scale: 1; rotate: 0deg; transition-delay: 0.17s; }

/* ── DARK SECTION OVERRIDES ── */
.bg-dark .section-label { color: rgba(255,255,255,0.3); }
.bg-dark .section-link  { color: var(--rose); }
.bg-dark .va-btn        { color: var(--rose); }

/* ── PEEK PHOTOS ── */
.fcard-wrap {
  position: relative;
}
.peek {
  position: absolute;
  width: 76px;
  height: 96px;
  border-radius: 8px;
  overflow: hidden;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.38s cubic-bezier(.22,.68,0,1.15), opacity 0.3s ease;
  box-shadow: 0 4px 18px rgba(0,0,0,0.45);
}
.peek img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* default (hidden) positions — all tucked behind center of card */
.peek-1 { top: 30%;  right: -10px; transform: translate(0, 10px) rotate(8deg)  scale(0.82); }
.peek-2 { top: 15%;  left:  -10px; transform: translate(0, 10px) rotate(-12deg) scale(0.82); }
.peek-3 { bottom: 18%; right: -10px; transform: translate(0, 10px) rotate(14deg) scale(0.82); }
/* peek disabled — card scales up instead */
.fcard-wrap:hover .peek { opacity: 0; }
/* stagger delays */
.peek-1 { transition-delay: 0s; }
.peek-2 { transition-delay: 0.05s; }
.peek-3 { transition-delay: 0.1s; }
/* keep fcard on top */
.fcard-wrap .fcard { position: relative; z-index: 1; }

/* ── BIO PARAGRAPH ── */
.bio-para {
  position: relative;
  padding: 96px 0 96px;
  border-top: 0.5px solid rgba(255,255,255,0.08);
  margin-bottom: 0;
  overflow: hidden;
}
.bio-para-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  text-align: left;
}
.bio-para-title {
  flex-shrink: 0;
  font-family: var(--serif);
  font-weight: 200;
  font-style: normal;
  font-size: clamp(32px, 4.6vw, 68px);
  letter-spacing: -0.02em;
  line-height: 1.0;
  color: rgba(255,255,255,0.88);
  white-space: nowrap;
}
.theme-light .bio-para-title { color: rgba(20,18,14,0.88); }
.bio-para::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.13) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(ellipse 70% 115% at 50% 50%, transparent 0%, transparent 22%, #000 42%, #000 48%, transparent 68%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 115% at 50% 50%, transparent 0%, transparent 22%, #000 42%, #000 48%, transparent 68%, transparent 100%);
}
.theme-light .bio-para::before {
  background-image:
    linear-gradient(rgba(20,18,14,0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,18,14,0.13) 1px, transparent 1px);
}
.bio-para > * {
  position: relative;
  z-index: 1;
}
.bio-para .section-row { justify-content: center; }
.bio-para p {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(12.5px, 1.33vw, 20.3px);
  line-height: 1.55;
  color: rgba(255,255,255,0.82);
  letter-spacing: -0.012em;
  font-weight: 500;
  max-width: 620px;
  margin: 0;
}
.bio-feels-label {
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-top: 72px;
  position: relative;
  z-index: 1;
}
.theme-light .bio-feels-label { color: #000; }
.bio-feels-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 14px;
  position: relative;
  z-index: 1;
}
.bio-feels-btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  padding: 12px 20px;
  border-radius: 24px;
  text-decoration: none;
  transition: all 0.2s;
  cursor: none;
}
.bio-feels-btn:hover { border-color: #e0295a; color: #e0295a; }
.theme-light .bio-feels-btn { color: rgba(20,18,14,0.82); border-color: rgba(20,18,14,0.18); }
.theme-light .bio-feels-btn:hover { border-color: #e0295a; color: #e0295a; }

/* ── TESTIMONIALS MARQUEE ── */
.testimonials-section {
  padding: 48px 0;
  border-top: 0.5px solid rgba(255,255,255,0.08);
  border-bottom: 0.5px solid rgba(255,255,255,0.08);
  overflow: hidden;
  position: relative;
}
.testimonials-section .section-row { margin-bottom: 28px; }
.testimonials-marquee-wrap {
  overflow: hidden;
  position: relative;
}
.testimonials-marquee-wrap::before,
.testimonials-marquee-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 1;
  pointer-events: none;
}
.testimonials-marquee-wrap::before { left: 0; background: linear-gradient(to right, var(--bg, #1a1814), transparent); }
.testimonials-marquee-wrap::after  { right: 0; background: linear-gradient(to left,  var(--bg, #1a1814), transparent); }
.testimonials-marquee {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: t-scroll-x 30s linear infinite;
}
.testimonials-marquee:hover { animation-play-state: paused; }
@keyframes t-scroll-x {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.t-card {
  background: rgba(255,255,255,0.05);
  border: 0.5px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 20px 22px;
  width: 280px;
  flex-shrink: 0;
}
.t-quote {
  font-family: var(--serif);
  font-size: 13px;
  font-style: italic;
  line-height: 1.6;
  color: rgba(255,255,255,0.75);
  margin: 0 0 12px;
}
.t-author { display: flex; flex-direction: column; gap: 2px; }
.t-name {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.9);
}
.t-role {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.03em;
}
body:not(.theme-light) .t-quote { color: rgba(255,255,255,0.75) !important; }
body:not(.theme-light) .t-name  { color: rgba(255,255,255,0.9)  !important; }
body:not(.theme-light) .t-role  { color: rgba(255,255,255,0.4)  !important; }
.theme-light .testimonials-section { border-color: rgba(30,28,24,0.1); }
.theme-light .t-card { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); }
.theme-light .t-quote { color: rgba(30,28,24,0.75) !important; }
.theme-light .t-name { color: rgba(30,28,24,0.9) !important; }
.theme-light .t-role { color: rgba(30,28,24,0.4) !important; }
.theme-light .testimonials-marquee-wrap::before { background: linear-gradient(to right, var(--bg, #f5f2ec), transparent); }
.theme-light .testimonials-marquee-wrap::after  { background: linear-gradient(to left,  var(--bg, #f5f2ec), transparent); }
.bio-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 28px;
  border-radius: 100px;
  overflow: hidden;
  vertical-align: middle;
  position: relative;
  top: -2px;
  margin: 0 2px;
  flex-shrink: 0;
}
.bio-chip-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── FILTER PILLS ── */
.filter-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.fpill {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  background: rgba(255,255,255,0.05);
  border: 0.5px solid rgba(255,255,255,0.1);
  border-radius: 100px;
  padding: 5px 13px;
  cursor: none;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.fpill:hover {
  color: rgba(255,255,255,0.72);
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.2);
}
.fpill.active {
  color: var(--lily-color);
  background: rgba(255,255,255,0.07);
  border-color: var(--lily-color);
}
/* filtered-out cards */
.fcard-wrap.filtered-out,
.mcard.filtered-out {
  opacity: 0.15;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.fcard-wrap,
.mcard {
  transition: transform 0.5s cubic-bezier(0.25,0,0.1,1), box-shadow 0.5s ease, opacity 0.3s ease;
}

/* ── MOBILE ── */
@media (max-width: 768px) {
  /* Nav */
  .nav { grid-template-columns: auto 1fr auto; padding: 14px 20px; }
  .nav-l { display: none; }
  .nav-ticker { display: none; }
  .nav-burger { display: flex; }

  /* Hero */
  .hero { padding: 24px 20px 0; overflow: hidden; }
  .hn-hero-img { width: 100%; margin-left: 0; aspect-ratio: 16/9; }
  .hn-main { grid-template-columns: 1fr; gap: 0; }
  .hn-text-col { min-width: 0; width: 100%; margin-left: 0; transform: none; }
  .hn-redact--gif { width: 50px !important; height: 1.05em; top: -0.12em; }
  .hn-previously { flex-direction: column; align-items: flex-start; gap: 4px; }
  .hn-prev-rects { overflow-x: auto; max-width: 100%; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .hn-prev-rects::-webkit-scrollbar { display: none; }

  /* Content wrap */
  .content-wrap { margin: 0; padding: 0 40px 48px; }
}




/* ── SKY VIDEO ── */
#sky-video {
  position: fixed;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
.theme-airplane #sky-video {
  opacity: 1;
  visibility: visible;
  filter: saturate(2.2) hue-rotate(-15deg) brightness(1.1);
}

/* ── THEME: AIRPLANE ── */
/* Lift all page layers above the z-index:0 video */
.theme-airplane .nav,
.theme-airplane .hero,
.theme-airplane .content-wrap,
.theme-airplane .site-footer   { position: relative; z-index: 5; }
.theme-airplane .hero          { background: rgba(8,12,18,0.35) !important; }
.theme-airplane .content-wrap  { background-color: rgba(8,12,18,0.45) !important; background-image: none !important; }
.theme-airplane .site-footer   { background: rgba(8,12,18,0.6) !important; }
.theme-airplane .nav           { background: var(--lily-color) !important; backdrop-filter: none; z-index: 100 !important; transition: background 0.6s ease; }

/* ── DARK MODE: force content-wrap dark ── */
.root .content-wrap {
  background-color: #111 !important;
  background-image: none !important;
  color: rgba(255,255,255,0.88);
}

/* ── THEME: LIGHT ── */
.theme-light .hero {
  background: var(--bg) !important;
}
.theme-light .hero::before { background-blend-mode: multiply; opacity: 0.6; }
.theme-light .hero-big-name     { color: rgba(30,28,24,0.4) !important; }
.theme-light .hero-name         { color: var(--ink) !important; }
.theme-light .hero-tagline      { color: rgba(30,28,24,0.62) !important; }
.theme-light .hero-role         { color: rgba(30,28,24,0.62) !important; }
.theme-light .hero-desc         { color: rgba(30,28,24,0.68) !important; }
.theme-light .hd-name           { color: rgba(30,28,24,0.92) !important; }
.theme-light .hd-chip           { color: rgba(30,28,24,0.7) !important; border-color: rgba(30,28,24,0.2) !important; }
.theme-light .hero-tag          { opacity: 0.65 !important; }
.theme-light .logo-strip        { border-color: rgba(30,28,24,0.08) !important; }
.theme-light .ls-logo           { background: rgba(30,28,24,0.05) !important; border-color: rgba(30,28,24,0.1) !important; color: rgba(30,28,24,0.4) !important; }
.theme-light .ls-logo:has(img)  { background: none !important; border: none !important; }
.theme-light .ls-logo img       { filter: brightness(0) opacity(0.45) !important; }
.theme-light .ls-item:hover .ls-logo img { filter: brightness(0) opacity(0.75) !important; }
.theme-light .see-logo          { filter: grayscale(1) opacity(0.55) !important; }
.theme-light .ls-sublabel       { color: rgba(30,28,24,0.45) !important; }
.theme-light .ls-eyebrow        { color: rgba(30,28,24,0.35) !important; }
.theme-light .ls-eyebrow::before, .theme-light .ls-eyebrow::after { background: rgba(30,28,24,0.15) !important; }
.theme-light .ls-track          { border-color: rgba(30,28,24,0.07) !important; }
.theme-light .hero-band-bottom  { border-color: rgba(30,28,24,0.1) !important; }
.theme-light .content-wrap      { background-color: var(--bg) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0.3'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E") !important; color: var(--ink) !important; }
.theme-light .section-label     { color: var(--muted) !important; }
.theme-light .bio-para          { border-color: rgba(30,28,24,0.1) !important; }
.theme-light .bio-para p        { color: var(--ink) !important; }
.theme-light .nav               { background: var(--bg) !important; border-color: transparent !important; }
.theme-light .nav-logo          { color: rgba(30,28,24,0.88) !important; }
.theme-light .nc                { color: rgba(30,28,24,0.5) !important; }
.theme-light .fan-card          { background: rgba(30,28,24,0.07) !important; border-color: rgba(30,28,24,0.12) !important; }
.theme-light .fc-title          { color: rgba(30,28,24,0.9) !important; }
.theme-light .fc-tag            { color: rgba(30,28,24,0.4) !important; }
.theme-light .fcard.soon        { background-blend-mode: luminosity; }
/* footer light mode handled in core.css */

/* ── WIDGET STACK (aligned badge container) ── */
#widget-stack {
  position: fixed;
  bottom: 28px;
  right: 36px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* ── SPINNING BADGE WIDGETS ── */
.widget-badge {
  --spin-dur: 14s;
  position: relative;
  width: 96px;
  height: 96px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
#theme-trigger { cursor: none; }

/* Spinning SVG layer */
.wbadge-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: badge-spin var(--spin-dur) linear infinite;
  transform-origin: center;
  overflow: visible;
}

/* Scalloped badge body — stroke tracks the accent color */
.badge-shape {
  fill: rgba(30,28,24,0.85);
  stroke: var(--lily-color);
  stroke-width: 0.7;
  stroke-opacity: 0.45;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,0.35));
  transition: stroke 0.5s ease, fill 0.3s ease;
}

/* Inner circle background for icon */
.badge-inner {
  fill: rgba(18,16,12,0.9);
}

/* Circular text on badge — tracks --lily-color */
.badge-text {
  font-size: 7px;
  fill: var(--lily-color);
  font-family: var(--mono), monospace;
  font-weight: 600;
  text-transform: uppercase;
  transition: fill 0.5s ease;
}

/* Counter-rotating icon stays upright — ✦ tracks --lily-color */
.wbadge-icon {
  position: relative;
  z-index: 2;
  font-size: 22px;
  line-height: 1;
  animation: badge-counter-spin var(--spin-dur) linear infinite;
  transform-origin: center;
  pointer-events: none;
  user-select: none;
  color: var(--lily-color);
  transition: color 0.5s ease;
}

@keyframes badge-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes badge-counter-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* Hover — scale up so text is readable, speed up spin */
.widget-badge:hover {
  --spin-dur: 3s;
  transform: scale(1.45);
}

/* Theme open state — speed up spin */
#theme-widget.open .widget-badge { --spin-dur: 3s; }

/* Light theme badge adjustments */
.theme-light .badge-shape {
  fill: rgba(240,236,226,0.92);
  stroke: var(--lily-color);
  stroke-opacity: 0.5;
}
.theme-light .badge-inner { fill: rgba(220,215,204,0.96); }

/* ── THEME WIDGET WRAPPER ── */
#theme-widget {
  position: relative;
}

/* ── THEME MENU (absolute, pops up above badge) ── */
.tw-menu {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  width: max-content;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px) scale(0.95);
  transform-origin: bottom right;
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(.22,.68,0,1.2);
}
#theme-widget.open .tw-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.tw-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 9px;
  border-radius: 20px;
  background: rgba(20,18,14,0.8);
  border: 0.5px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
  color: rgba(255,255,255,0.7);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: none;
  transition: background 0.18s, color 0.18s;
  white-space: nowrap;
}
.tw-opt:hover { background: rgba(40,36,30,0.92); color: rgba(255,255,255,0.95); }
.tw-opt.active { border-color: var(--lily-color); color: var(--lily-color); }
.tw-swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
}
.tw-swatch-dark     { background: #14100d; border: 1px solid rgba(255,255,255,0.2); }
.tw-swatch-airplane { background: transparent; line-height: 1; }
.tw-swatch-light    { background: #f0ece2; border: 1px solid rgba(30,28,24,0.2); }
.theme-light .tw-opt {
  background: rgba(240,236,226,0.9);
  border-color: rgba(30,28,24,0.12);
  color: rgba(30,28,24,0.6);
}
.theme-light .tw-opt:hover { background: rgba(220,215,205,0.95); color: rgba(30,28,24,0.9); }
.theme-light .tw-opt.active { border-color: var(--rose); color: var(--rose); }

/* ── PAPER PLANES feature ─────────────────────────────────────── */
/* Note overlay */
.ap-note {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(14,12,10,0.45);
  opacity: 0; transition: opacity 0.35s ease;
  backdrop-filter: blur(3px);
}
.ap-note--in { opacity: 1; }
.ap-note-card {
  background: #faf8f2;
  width: 300px; max-width: 90vw;
  padding: 44px 36px 36px;
  border-radius: 2px;
  transform: scale(0.88) rotate(-1.5deg);
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
  font-family: Georgia, serif;
  box-shadow: 0 8px 40px rgba(0,0,0,0.22);
}
.ap-note--in .ap-note-card { transform: scale(1) rotate(-0.5deg); }
.ap-note-icon { font-size: 28px; opacity: 0.35; margin-bottom: 16px; }
.ap-note-text {
  font-size: 15px; line-height: 1.75; color: #2a2520;
  font-style: italic; margin: 0 0 20px;
}
.ap-note-from {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #bbb; margin-bottom: 22px; font-family: var(--mono);
}
.ap-note-close {
  background: none; border: 1px solid #ddd; padding: 6px 18px;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer; color: #888; border-radius: 20px;
  font-family: var(--mono); transition: border-color 0.2s, color 0.2s;
}
.ap-note-close:hover { border-color: #aaa; color: #555; }

/* Write modal */
.ap-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(14,12,10,0.5);
  opacity: 0; transition: opacity 0.3s ease;
  backdrop-filter: blur(4px);
}
.ap-modal--in { opacity: 1; }
.ap-modal-card {
  background: #faf8f2; width: 360px; max-width: 92vw;
  padding: 44px 40px 36px; border-radius: 2px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.25);
  transform: translateY(18px);
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.ap-modal--in .ap-modal-card { transform: translateY(0); }
.ap-modal-icon { font-size: 32px; margin-bottom: 10px; }
.ap-modal-title {
  font-family: var(--serif); font-size: 20px; font-weight: 700;
  color: #14100d; margin: 0 0 4px;
}
.ap-modal-sub {
  font-size: 12px; color: #aaa; margin: 0 0 22px;
  font-style: italic; font-family: Georgia,serif;
}
.ap-modal-ta {
  width: 100%; height: 96px; box-sizing: border-box;
  border: 1px solid #e0dbd0; border-radius: 3px;
  padding: 12px 14px; font-family: var(--mono); font-size: 13px;
  color: #2a2520; background: #fefcf8; resize: none; outline: none;
  transition: border-color 0.2s;
}
.ap-modal-ta:focus { border-color: var(--rose); }
.ap-modal-row {
  display: flex; justify-content: space-between;
  align-items: center; margin-top: 16px;
}
.ap-modal-cancel {
  background: none; border: none; font-size: 11px; color: #bbb;
  cursor: pointer; letter-spacing: 0.1em; text-transform: uppercase;
  font-family: var(--mono); transition: color 0.2s;
}
.ap-modal-cancel:hover { color: #888; }
.ap-modal-send {
  background: var(--rose); border: none; color: #fff;
  padding: 9px 22px; border-radius: 20px; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
  font-family: var(--mono); transition: opacity 0.2s;
}
.ap-modal-send:hover { opacity: 0.82; }
.ap-modal-send:disabled { opacity: 0.5; cursor: default; }

/* Write button (fixed, only shows in airplane mode) */
.ap-write-btn {
  position: fixed; bottom: 20px; right: 140px; z-index: 152;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,0.92);
  border: none; cursor: pointer; font-size: 20px;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
  transition: transform 0.2s, box-shadow 0.2s;
}
.theme-airplane .ap-write-btn { display: flex; }
.ap-write-btn:hover { transform: scale(1.1) rotate(-10deg); box-shadow: 0 4px 20px rgba(0,0,0,0.22); }

/* #flower-btn badge styles handled by .widget-badge above */

/* First-visit tooltip */
#mode-tip {
  position: fixed; bottom: 80px; right: 20px; z-index: 10001;
  background: rgba(30,28,24,0.92); backdrop-filter: blur(10px);
  color: rgba(255,255,255,0.88); font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.08em;
  padding: 10px 14px; border-radius: 10px;
  pointer-events: none;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  white-space: nowrap;
}
#mode-tip::after {
  content: '';
  position: absolute; bottom: -6px; right: 18px;
  width: 10px; height: 10px;
  background: rgba(30,28,24,0.92);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
#mode-tip.tip-in { opacity: 1; transform: translateY(0); }