/* The Gay Wizard — cosmic, glittering, gayer than gay. */
:root {
  color-scheme: dark;
  --bg: #0b0716;
  --bg-raised: #150d28;
  --text: #fbf6ee;
  --muted: #bdb2d3;
  --dim: #8f84a8;
  --violet: #b78cff;
  --lilac: #e6c4ff;
  --pink: #ff7ac6;
  --gold: #ffd98a;
  --mint: #6ff0a8;
  --sky: #5fc4ff;
  --line: #ffffff17;
  --glass: #ffffff08;
  --rainbow: linear-gradient(90deg, #ff5f8f, #ffa95e, #ffe46b, #6ff0a8, #5fc4ff, #b78cff, #ff5f8f);
  --display: 'Fraunces', Georgia, serif;
  --sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --radius: 22px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.7 var(--sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--pink); color: #1a0b25; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; border-radius: 6px; }
h1, h2, h3, p { margin-top: 0; }
.wrap { width: min(1240px, 90%); margin-inline: auto; }

/* ---------- Night sky ---------- */
.sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: radial-gradient(ellipse 120% 80% at 50% -10%, #2a1452 0%, transparent 60%), var(--bg); }
.sky::before, .sky::after {
  content: '';
  position: absolute;
  inset: -50%;
  background-image:
    radial-gradient(1.5px 1.5px at 20px 30px, #fff, transparent),
    radial-gradient(1px 1px at 90px 140px, #ffffffcc, transparent),
    radial-gradient(1.5px 1.5px at 160px 60px, #ffe9c4, transparent),
    radial-gradient(1px 1px at 230px 190px, #fff, transparent),
    radial-gradient(1px 1px at 300px 90px, #e6c4ffdd, transparent),
    radial-gradient(2px 2px at 360px 250px, #ffffffaa, transparent),
    radial-gradient(1px 1px at 50px 280px, #c8f0ff, transparent);
  background-size: 400px 320px;
  opacity: .55;
  animation: drift 160s linear infinite;
}
.sky::after { inset: 0; background: url(/tile-face.webp) 0 0 / 280px; opacity: .05; animation: tiledrift 200s linear infinite; }
.aurora { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .45; animation: aurora 22s ease-in-out infinite alternate; }
.aurora-one { width: 620px; height: 520px; top: -160px; right: -120px; background: #8b3dff; }
.aurora-two { width: 520px; height: 460px; top: 40vh; left: -220px; background: #ff4fa6; opacity: .22; animation-delay: -8s; }
.aurora-three { width: 480px; height: 420px; bottom: -200px; right: 15%; background: #2fb8ff; opacity: .18; animation-delay: -14s; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 14px;
  z-index: 20;
  height: 64px;
  margin-top: 14px;
  padding: 0 10px 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  background: #120a24b3;
  border: 1px solid var(--line);
  border-radius: 999px;
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 10px 40px #0006;
}
.brand { font: 600 12px/1 var(--mono); letter-spacing: 2px; display: flex; align-items: center; gap: 10px; }
.brand-star { font-size: 24px; line-height: 1; background: var(--rainbow); background-size: 200%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 6s linear infinite; }
.brand-dot { color: var(--pink); margin-left: -8px; }
nav { display: flex; gap: 6px; font-size: 13px; font-weight: 500; color: var(--muted); }
nav a { padding: 8px 14px; border-radius: 999px; transition: background .25s, color .25s; }
nav a:hover { background: #ffffff10; color: var(--text); }
.header-link { font-size: 13px; font-weight: 600; padding: 10px 18px; border-radius: 999px; background: var(--text); color: #1a0b25; transition: transform .25s var(--ease), box-shadow .25s; }
.header-link:hover { transform: translateY(-2px); box-shadow: 0 8px 30px #ff7ac655; }
.header-link span { padding-left: 6px; }

/* ---------- Shared type ---------- */
.eyebrow { font: 500 11px/1.5 var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--violet); margin: 0 0 22px; }
h1, h2 { font-family: var(--display); font-weight: 500; letter-spacing: -.025em; line-height: 1.02; font-variation-settings: 'SOFT' 100; }
h2 { font-size: clamp(38px, 4.6vw, 64px); margin-bottom: 0; }
h1 em, h2 em {
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(100deg, var(--pink), var(--violet) 45%, var(--sky));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: .08em;
}
.text-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); background: linear-gradient(var(--violet), var(--violet)) 0 100% / 0 1px no-repeat, linear-gradient(#ffffff30, #ffffff30) 0 100% / 100% 1px no-repeat; padding-bottom: 4px; transition: background-size .35s var(--ease), color .25s; }
.text-link:hover { color: var(--lilac); background-size: 100% 1px, 100% 1px; }

/* ---------- Buttons ---------- */
.button { position: relative; border-radius: 999px; padding: 15px 26px; font-size: 14px; font-weight: 600; border: 1px solid #ffffff2e; display: inline-flex; align-items: center; justify-content: center; gap: 12px; cursor: pointer; transition: transform .3s var(--ease), box-shadow .3s, background .3s; }
.button:hover { transform: translateY(-3px); }
.primary { color: #1a0b25; border-color: transparent; background: linear-gradient(100deg, #ffc1e3, #e6c4ff 50%, #b8e6ff); box-shadow: 0 10px 40px -8px #c28bff99; }
.primary:hover { box-shadow: 0 16px 50px -6px #ff7ac6aa; }
.secondary { background: #ffffff0a; color: var(--text); backdrop-filter: blur(8px); }
.secondary:hover { background: #ffffff16; border-color: #ffffff55; }

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; min-height: min(860px, 92vh); padding-block: 60px 80px; gap: 30px; }
.hero .eyebrow { display: inline-flex; align-items: center; gap: 4px; padding: 8px 16px; border: 1px solid #b78cff40; border-radius: 999px; background: #b78cff12; color: var(--lilac); }
.tiny-star { font-size: 13px; margin-right: 6px; color: var(--gold); }
h1 { font-size: clamp(72px, 9vw, 136px); position: relative; margin-bottom: 28px; }
h1 em { font-weight: 500; background: var(--rainbow); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; animation: shimmer 8s linear infinite; }
.name + br { display: none; }
.name { display: block; font: 600 20px/1.2 var(--sans); letter-spacing: 0; color: var(--muted); margin-bottom: 14px; }
.title-star { font-size: .45em; color: var(--gold); margin-left: .15em; display: inline-block; vertical-align: top; text-shadow: 0 0 30px #ffd98aaa; animation: twinkle 3.5s ease-in-out infinite; }
.hero-subtitle { font-size: 21px; line-height: 1.55; margin-bottom: 16px; }
.hero-subtitle strong { font-weight: 700; background: var(--rainbow); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 8s linear infinite; }
.hero-description { max-width: 440px; color: var(--muted); font-size: 16px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-footnote { font: 400 11px/1.5 var(--mono); color: var(--dim); margin: 28px 0 0; display: flex; align-items: center; gap: 10px; }
.status-dot { height: 8px; width: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px #6ff0a826, 0 0 14px var(--mint); animation: pulse 2.4s ease-in-out infinite; }

.hero-art { position: relative; aspect-ratio: 1 / 1.08; display: flex; align-items: center; justify-content: center; }
.halo { position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(from 0deg, #ff5f8f, #ffa95e, #ffe46b, #6ff0a8, #5fc4ff, #b78cff, #ff5f8f); filter: blur(70px); opacity: .38; animation: spin 24s linear infinite; }
.orbit { position: absolute; border: 1px solid #e6c4ff2e; border-radius: 50%; width: 92%; height: 80%; transform: rotate(-28deg); }
.orbit-two { width: 74%; height: 98%; transform: rotate(34deg); border-style: dashed; border-color: #e6c4ff24; animation: wobble 30s linear infinite; }
.art-star { position: absolute; color: var(--gold); font-size: 34px; text-shadow: 0 0 24px #ffd98acc; animation: twinkle 4s ease-in-out infinite; }
.star-one { top: 14%; right: 12%; }
.star-two { top: 40%; left: 0; font-size: 54px; color: var(--pink); text-shadow: 0 0 24px #ff7ac6aa; animation-delay: -1.3s; }
.star-three { bottom: 12%; right: 14%; font-size: 22px; color: var(--sky); text-shadow: 0 0 20px #5fc4ffaa; animation-delay: -2.6s; }
.art-note { position: absolute; font: 500 9px/1 var(--mono); letter-spacing: 2.6px; color: var(--muted); padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: #0b071699; backdrop-filter: blur(6px); z-index: 2; }
.note-top { top: 2%; right: 8%; transform: rotate(6deg); }
.note-bottom { bottom: 1%; left: 18%; }
.art-seal { position: absolute; right: 2%; bottom: 20%; height: 118px; width: 118px; border-radius: 50%; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(12deg); background: radial-gradient(circle at 30% 30%, #2c1952, #150b2b); box-shadow: 0 0 0 1px #e6c4ff55, 0 0 0 7px #0b0716, 0 0 0 8px #e6c4ff30, 0 14px 40px #000a; }
.art-seal span { font: 600 32px/1 var(--display); background: linear-gradient(135deg, var(--gold), var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.art-seal small { font: 500 7px/1 var(--mono); letter-spacing: 1.6px; margin-top: 6px; color: var(--lilac); }

/* ---------- Kaleidoscope: every layer is the same Merlin portrait ---------- */
.kscope { position: absolute; width: 94%; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 1px #ffd98a55, 0 0 0 10px #0b071680, 0 0 0 11px #e6c4ff30, 0 40px 120px -20px #000; }
.kaleido { --src: url(/merlin.webp); --size: 260%; --pos: 10% 40%; position: absolute; inset: 0; border-radius: 50%; overflow: hidden; animation: spin 120s linear infinite; }
.kaleido::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px #ffd98a77, inset 0 0 50px #0b0716cc; pointer-events: none; }
.kaleido i { position: absolute; inset: 0; clip-path: polygon(50% 50%, 49.5% -2%, 80.5% -2%); }
.kaleido i::before { content: ''; position: absolute; left: 42%; top: -6%; width: 46%; height: 62%; background: var(--src) var(--pos) / var(--size) no-repeat; animation: kdrift 16s ease-in-out infinite alternate; }
.kaleido i:nth-child(1) { transform: rotate(0deg); }
.kaleido i:nth-child(2) { transform: rotate(60deg) scaleX(-1); }
.kaleido i:nth-child(3) { transform: rotate(60deg); }
.kaleido i:nth-child(4) { transform: rotate(120deg) scaleX(-1); }
.kaleido i:nth-child(5) { transform: rotate(120deg); }
.kaleido i:nth-child(6) { transform: rotate(180deg) scaleX(-1); }
.kaleido i:nth-child(7) { transform: rotate(180deg); }
.kaleido i:nth-child(8) { transform: rotate(240deg) scaleX(-1); }
.kaleido i:nth-child(9) { transform: rotate(240deg); }
.kaleido i:nth-child(10) { transform: rotate(300deg) scaleX(-1); }
.kaleido i:nth-child(11) { transform: rotate(300deg); }
.kaleido i:nth-child(12) { transform: rotate(360deg) scaleX(-1); }
.k-mid { inset: 14%; --size: 210%; --pos: 50% 33%; animation-duration: 80s; animation-direction: reverse; }
.k-inner { inset: 25%; --size: 460%; --pos: 92% 8%; animation-duration: 50s; }
.k-inner i::before { animation-duration: 11s; }
.face-ring { position: absolute; inset: 7%; animation: spin 70s linear infinite reverse; }
.face-ring span { position: absolute; left: 45%; top: 45%; width: 10%; aspect-ratio: 1; border-radius: 50%; background: url(/merlin-portrait.webp) center / cover; box-shadow: 0 0 0 2px #ffd98a, 0 6px 16px #000a; transform: rotate(calc(var(--k) * 30deg)) translateY(-500%); }
.face-ring span:nth-child(1) { --k: 0; }
.face-ring span:nth-child(2) { --k: 1; }
.face-ring span:nth-child(3) { --k: 2; }
.face-ring span:nth-child(4) { --k: 3; }
.face-ring span:nth-child(5) { --k: 4; }
.face-ring span:nth-child(6) { --k: 5; }
.face-ring span:nth-child(7) { --k: 6; }
.face-ring span:nth-child(8) { --k: 7; }
.face-ring span:nth-child(9) { --k: 8; }
.face-ring span:nth-child(10) { --k: 9; }
.face-ring span:nth-child(11) { --k: 10; }
.face-ring span:nth-child(12) { --k: 11; }
.portrait { position: relative; z-index: 2; width: 36%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; padding: 5px; background: conic-gradient(from 0deg, #ff5f8f, #ffa95e, #ffe46b, #6ff0a8, #5fc4ff, #b78cff, #ff5f8f); box-shadow: 0 0 0 5px #0b0716, 0 0 60px #ff7ac6aa, 0 0 120px #b78cff88; animation: bob 6s ease-in-out infinite; transition: scale .6s var(--ease); }
.spellbound .kaleido, .spellbound .face-ring { animation-duration: 6s; }
.spellbound .portrait { scale: 1.12; animation: bob 6s ease-in-out infinite, spell 1.4s var(--ease); }
.spellbound .halo { opacity: .8; }
@keyframes kdrift { to { transform: translate(-10%, 8%) scale(1.25) rotate(8deg); } }
@keyframes bob { 50% { transform: translateY(-10px); } }

/* Portrait card */
.portrait-card { margin: 48px 0 0; max-width: 440px; }
.portrait-frame { padding: 4px; border-radius: 26px; background: var(--rainbow); background-size: 200% 100%; animation: shimmer 8s linear infinite; box-shadow: 0 30px 80px -24px #ff7ac688; transform: rotate(-2deg); transition: transform .6s var(--ease); }
.portrait-frame:hover { transform: rotate(0) scale(1.02); }
.portrait-frame img { display: block; width: 100%; height: auto; border-radius: 22px; }
.portrait-card figcaption { margin-top: 18px; font-size: 13px; color: var(--muted); }
.portrait-card strong { color: var(--text); }

/* Mirrored-tile fractal backdrops */
.craft::after, .reading::after, .lore::after { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; translate: -50% 0; background: var(--tile) 0 0 / 300px; opacity: .12; -webkit-mask: linear-gradient(transparent, #000 25%, #000 75%, transparent); mask: linear-gradient(transparent, #000 25%, #000 75%, transparent); animation: tiledrift 90s linear infinite; pointer-events: none; }
.craft::after { --tile: url(/tile-disco.webp); }
.reading::after { --tile: url(/tile-rainbow.webp); }
.lore::after { --tile: url(/tile-face.webp); opacity: .14; }
@keyframes tiledrift { to { background-position: 600px 300px; } }

/* Ribbon separators are tiny Merlins */
.ribbon span { display: inline-block; width: 30px; height: 30px; border-radius: 50%; background: url(/merlin-portrait.webp) center / cover; color: transparent; font-size: 0; box-shadow: 0 0 0 2px #ffd98a, 0 0 16px #ff7ac688; }

/* Dossier mugshot */
.dossier-photo { position: absolute; z-index: 2; top: -46px; right: -26px; width: 136px; padding: 8px 8px 0; background: #f6efe2; border-radius: 3px; transform: rotate(8deg); box-shadow: 0 18px 40px #000a; }
.dossier-photo::before { content: ''; display: block; aspect-ratio: 1; background: url(/merlin.webp) 50% 37% / 360%; }
.dossier-photo span { display: block; padding: 7px 0 9px; text-align: center; font: 600 8px/1 var(--mono); letter-spacing: 1.4px; color: #3a2350; }

/* Finale kaleidoscope */
.birthday-kscope { position: relative; width: 170px; aspect-ratio: 1; margin: 0 auto 30px; border-radius: 50%; box-shadow: 0 0 0 2px #ffd98a88, 0 0 80px #ff7ac688; }
.birthday-kscope .kaleido { animation-duration: 40s; }
.birthday-face { position: absolute; inset: 27%; border-radius: 50%; background: url(/merlin-portrait.webp) center / cover; box-shadow: 0 0 0 3px #0b0716, 0 0 0 5px var(--gold); }

/* Story + 404 medallion */
.story-medallion { display: block; width: 116px; height: 116px; border-radius: 50%; padding: 4px; margin-bottom: 30px; background: conic-gradient(#ff5f8f, #ffa95e, #ffe46b, #6ff0a8, #5fc4ff, #b78cff, #ff5f8f); box-shadow: 0 0 50px #ff7ac688; }

/* Hero group chat */
.hero-copy { grid-column: 1; grid-row: 1; }
.hero-art { grid-column: 2; grid-row: 1; }
.chat { grid-column: 2; grid-row: 1; align-self: end; justify-self: start; position: relative; z-index: 3; width: 300px; margin: 0 0 -10px -110px; border-radius: 26px; background: #120a24d9; border: 1px solid #ffffff1f; backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 30px 80px -20px #000, 0 0 0 1px #ff7ac620, 0 0 60px -10px #b78cff55; transform: rotate(-3deg); overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #ffffff06; }
.chat-head strong { display: block; font-size: 13px; line-height: 1.2; }
.chat-head small { font-size: 10.5px; color: var(--dim); }
.chat-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--rainbow); font-size: 16px; }
.chat-live { margin-left: auto; font: 500 9px/1 var(--mono); letter-spacing: 1px; color: var(--mint); text-transform: uppercase; }
.chat-log { list-style: none; margin: 0; padding: 14px 14px 10px; height: 236px; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; overflow: hidden; -webkit-mask: linear-gradient(transparent, #000 22%); mask: linear-gradient(transparent, #000 22%); }
.msg { flex: none; max-width: 82%; align-self: flex-start; animation: bubble .45s var(--ease) both; }
.msg p { margin: 0; padding: 8px 13px; border-radius: 18px 18px 18px 5px; background: #2a1f40; font-size: 13px; line-height: 1.4; }
.msg-from { display: block; font-size: 10px; color: var(--dim); margin: 0 0 2px 10px; }
.msg.me { align-self: flex-end; }
.msg.me p { border-radius: 18px 18px 5px 18px; color: #1a0b25; font-weight: 500; background: linear-gradient(120deg, #ff9ad1, #c9a2ff 55%, #8fd4ff); box-shadow: 0 6px 20px -8px #ff7ac6aa; }
.chat-log .is-pending { display: none; }
.typing { flex: none; display: none; gap: 4px; align-self: flex-start; padding: 11px 13px; border-radius: 18px 18px 18px 5px; background: #2a1f40; }
.typing.me { align-self: flex-end; background: #c9a2ff55; }
.typing.on { display: flex; }
.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: dot 1s ease-in-out infinite; }
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
.chat figcaption { padding: 8px 16px 11px; font: 400 9px/1.3 var(--mono); letter-spacing: .5px; color: var(--dim); border-top: 1px solid var(--line); }
@keyframes bubble { from { opacity: 0; transform: translateY(12px) scale(.92); } }
@keyframes dot { 50% { transform: translateY(-4px); opacity: .5; } }

/* ---------- Ribbon marquee ---------- */
.ribbon { position: relative; overflow: hidden; padding: 22px 0; background: linear-gradient(90deg, #ff5f8f1f, #ffa95e14, #6ff0a814, #5fc4ff14, #b78cff1f); border-block: 1px solid var(--line); transform: rotate(-1.2deg); margin-inline: -2%; }
.ribbon-track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.ribbon-track > div { display: flex; align-items: center; gap: 32px; padding-right: 32px; white-space: nowrap; font: 500 14px/1 var(--mono); letter-spacing: 3px; }
.ribbon:hover .ribbon-track { animation-play-state: paused; }

/* ---------- Sections ---------- */
.section { padding-block: 120px; position: relative; }
.section + .section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, #e6c4ff30, transparent); }

.legend { display: grid; grid-template-columns: 1fr 1.05fr; gap: 90px; align-items: start; }
.legend-copy { font-size: 16px; color: var(--muted); padding: 36px 38px 34px; border-radius: var(--radius); background: linear-gradient(160deg, #ffffff0c, #ffffff03); border: 1px solid var(--line); box-shadow: inset 0 1px 0 #ffffff12; }
.legend-copy p:first-child { color: var(--text); font-size: 20px; line-height: 1.6; }
#birthday-story .legend-copy { background: linear-gradient(160deg, #ff7ac612, #b78cff08 60%, #ffffff03); border-color: #ff7ac62e; }
#birthday-story > div:first-child { order: 2; }

/* Craft */
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 35px; margin-bottom: 56px; }
.section-heading > p { font-size: 15px; color: var(--muted); margin: 0; max-width: 340px; }
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.project {
  --accent: var(--violet);
  position: relative;
  padding: 36px 32px 32px;
  border-radius: var(--radius);
  background: linear-gradient(var(--bg-raised), var(--bg-raised)) padding-box, linear-gradient(160deg, #ffffff26, #ffffff08 40%, #ffffff10) border-box;
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  isolation: isolate;
  transition: transform .45s var(--ease), box-shadow .45s;
}
.project::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 60%); opacity: .55; transition: opacity .45s; }
.project:hover { transform: translateY(-8px); box-shadow: 0 30px 70px -20px color-mix(in srgb, var(--accent) 55%, transparent); }
.project:hover::before { opacity: 1; }
.project:nth-child(2) { --accent: var(--mint); }
.project:nth-child(3) { --accent: var(--pink); }
.project-icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; font-size: 28px; line-height: 1; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); box-shadow: 0 0 30px color-mix(in srgb, var(--accent) 30%, transparent); margin-bottom: 34px; }
.mint, .peach { color: transparent; }
.project-icon { color: transparent; font-size: 0; background: url(/merlin.webp) var(--crop) / 900% no-repeat; }
.project:nth-child(1) .project-icon { --crop: 22% 3%; }
.project:nth-child(2) .project-icon { --crop: 96% 8%; }
.project:nth-child(3) .project-icon { --crop: 55% 13%; }
.project .eyebrow { font-size: 10px; margin-bottom: 12px; color: var(--accent); }
.project h3 { font: 500 30px/1.15 var(--display); margin-bottom: 14px; }
.project > p:not(.eyebrow) { font-size: 14.5px; color: var(--muted); margin-bottom: 30px; }
.project .text-link { margin-top: auto; }

/* Reading shelf */
.reading > .profile-intro { max-width: 760px; }
.reading-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 52px; counter-reset: shelf; }
.reading-list article { counter-increment: shelf; position: relative; padding: 34px 34px 30px; border-radius: var(--radius); background: var(--glass); border: 1px solid var(--line); transition: border-color .35s, background .35s, transform .45s var(--ease); }
.reading-list article::after { content: counter(shelf, decimal-leading-zero); position: absolute; top: 26px; right: 30px; font: italic 500 44px/1 var(--display); color: transparent; -webkit-text-stroke: 1px #e6c4ff38; }
.reading-list article:hover { border-color: #b78cff55; background: #b78cff0d; transform: translateY(-4px); }
.reading-list h3, .tool-note h3 { font: 500 25px/1.3 var(--display); padding-right: 50px; }
.reading-list h3 a { transition: color .25s; }
.reading-list h3 a:hover { color: var(--lilac); }
.reading-list p:not(.eyebrow), .tool-note p { color: var(--muted); font-size: 14.5px; }
.reading-list .eyebrow { font-size: 10px; margin-bottom: 16px; color: var(--gold); }
.tool-note { margin-top: 22px; padding: 30px 34px; border-radius: var(--radius); border: 1px dashed #b78cff55; background: repeating-linear-gradient(-45deg, #b78cff06 0 12px, transparent 12px 24px); }
.tool-note h3 { padding-right: 0; }
.tool-note p { margin-bottom: 0; }

/* Profiles */
.profile-intro { color: var(--muted); margin-top: 24px; font-size: 16px; }
.profile-links { list-style: none; padding: 0; margin: 44px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.profile-links li { position: relative; padding: 26px 24px; border-radius: 18px; background: var(--glass); border: 1px solid var(--line); transition: transform .4s var(--ease), border-color .3s, background .3s; }
.profile-links li:hover { transform: translateY(-5px); border-color: #ff7ac655; background: #ff7ac60c; }
.profile-links .text-link { font-size: 14px; background: none; padding: 0; }
.profile-links .text-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.profile-links p { font-size: 13px; color: var(--muted); margin: 10px 0 0; }

/* Lore / dossier */
.lore { display: grid; grid-template-columns: 1fr 1.1fr; gap: 85px; align-items: center; }
.lore-intro { color: var(--muted); font-size: 16px; margin-top: 26px; }
.dossier { position: relative; border-radius: 14px; background: linear-gradient(180deg, #1d1236, #150c29); border: 1px solid #b78cff40; transform: rotate(1.2deg); box-shadow: 0 40px 90px -30px #000, 0 0 0 8px #ffffff05; transition: transform .6s var(--ease); }
.dossier:hover { transform: rotate(0); }
.dossier::before { content: ''; position: absolute; top: -12px; left: 40px; width: 110px; height: 24px; background: #ffd98a3d; border-radius: 3px; transform: rotate(-3deg); backdrop-filter: blur(2px); }
.dossier-top, .dossier-bottom { font: 500 10px/1.4 var(--mono); letter-spacing: 1.8px; padding: 20px 30px; display: flex; justify-content: space-between; align-items: center; color: var(--lilac); }
.dossier-top { border-bottom: 1px dashed #ffffff22; }
.dossier-top span:last-child { color: var(--gold); font-size: 16px; }
.dossier-row { padding: 28px 30px; }
.dossier-row + .dossier-row { border-top: 1px dashed #ffffff22; }
.dossier-label { display: inline-block; font: 500 9px/1 var(--mono); letter-spacing: 1.5px; color: #1a0b25; background: var(--lilac); padding: 6px 9px; border-radius: 4px; }
.dossier-row[data-nosnippet] .dossier-label { background: var(--pink); }
.dossier h3 { font: 500 28px/1.2 var(--display); margin: 14px 0 10px; }
.dossier p { font-size: 14px; line-height: 1.75; color: var(--muted); }
.dossier-bottom { border-top: 1px dashed #ffffff22; background: #ffffff04; border-radius: 0 0 14px 14px; }
.dossier-bottom span { visibility: hidden; }
.dossier-bottom::after { content: 'FABULOUS'; position: absolute; right: 22px; bottom: 12px; font: 700 15px/1 var(--mono); letter-spacing: 3px; color: #ff7ac6; border: 2px solid #ff7ac6; padding: 7px 10px; border-radius: 6px; transform: rotate(-14deg); opacity: .5; mix-blend-mode: screen; pointer-events: none; }

/* Birthday finale */
.birthday {
  position: relative;
  text-align: center;
  margin-block: 40px 100px;
  padding: 110px 6% 100px;
  border-radius: 36px;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(ellipse at 50% 0%, #b78cff40, transparent 60%), radial-gradient(ellipse at 0% 100%, #ff5f8f30, transparent 50%), radial-gradient(ellipse at 100% 100%, #5fc4ff2a, transparent 50%), linear-gradient(#140b29e6, #140b29e6), url(/tile-disco.webp) 0 0 / 240px;
}
.birthday::before { content: ''; position: absolute; inset: 0; z-index: -1; padding: 1.5px; border-radius: inherit; background: var(--rainbow); background-size: 200% 100%; animation: shimmer 6s linear infinite; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.birthday .eyebrow { color: var(--lilac); }
.birthday h2 { font-size: clamp(48px, 7.5vw, 104px); }
.birthday > p:not(.eyebrow):not(.birthday-signoff) { color: var(--muted); margin: 28px auto 34px; font-size: 18px; max-width: 520px; }
.birthday-signoff { font: 500 10px/1.5 var(--mono); letter-spacing: 2.5px; color: var(--dim); margin: 40px 0 0; }

/* Footer */
footer { display: flex; justify-content: space-between; align-items: center; gap: 25px; padding-block: 36px 44px; border-top: 1px solid var(--line); }
footer p { font-size: 12px; color: var(--muted); margin: 0; text-align: center; }
footer > a:last-child { font-size: 13px; font-weight: 600; }
footer > a:hover { color: var(--lilac); }

/* ---------- Utilities ---------- */
.skip { position: fixed; top: -100px; left: 10px; z-index: 30; padding: 10px 20px; border-radius: 999px; background: var(--text); color: var(--bg); }
.skip:focus { top: 10px; }
#spell-message:empty { display: none; }
#spell-message { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); padding: 16px 28px; background: linear-gradient(100deg, #ffc1e3, #e6c4ff 50%, #b8e6ff); color: #1a0b25; font-weight: 600; border-radius: 999px; box-shadow: 0 14px 60px #ff7ac666; z-index: 25; max-width: 90%; width: max-content; font-size: 15px; text-align: center; animation: pop .5s var(--ease); }
.confetti { position: fixed; top: -24px; pointer-events: none; z-index: 24; width: 9px; height: 15px; border-radius: 2px; animation: fall 3s cubic-bezier(.3, .6, .5, 1) forwards; }
.confetti.round { border-radius: 50%; width: 10px; height: 10px; }
.confetti.star { width: auto; height: auto; background: none !important; font-size: 18px; line-height: 1; }
.spellbound .halo { opacity: .7; }

/* Scroll reveal — only applied once JavaScript has run. */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Motion ---------- */
@keyframes float { 50% { transform: translateY(-16px) rotate(-6deg); } }
@keyframes spell { 0% { rotate: 0deg; scale: 1; } 40% { rotate: -8deg; scale: 1.06; } 70% { rotate: 6deg; } 100% { rotate: 0deg; scale: 1; } }
@keyframes shimmer { to { background-position: 200% 0; } }
@keyframes twinkle { 50% { opacity: .45; transform: scale(.82) rotate(15deg); } }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px #6ff0a810, 0 0 18px var(--mint); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes wobble { to { transform: rotate(394deg); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes drift { to { transform: translate(400px, 320px); } }
@keyframes aurora { to { transform: translate(-80px, 60px) scale(1.15); } }
@keyframes fall { to { transform: translateY(108vh) rotate(720deg); opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translate(-50%, 16px) scale(.94); } }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  nav a { padding: 8px 10px; }
  .profile-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .hero { min-height: 0; padding-block: 50px 70px; }
  .legend, .lore { gap: 44px; }
  .project { padding: 28px 24px; }
  .section { padding-block: 90px; }
  .art-seal { width: 92px; height: 92px; }
  .art-seal span { font-size: 25px; }
  .chat { width: 270px; margin-left: -40px; }
}
@media (max-width: 860px) {
  nav { display: none; }
  .project-grid { grid-template-columns: 1fr; }
  .legend, .lore { grid-template-columns: 1fr; }
  #birthday-story > div:first-child { order: 0; }
}
@media (max-width: 700px) {
  html { scroll-padding-top: 80px; }
  .wrap { width: 90%; }
  .site-header { height: 56px; top: 10px; margin-top: 10px; padding-left: 16px; }
  .brand { font-size: 10px; letter-spacing: 1.2px; gap: 8px; }
  .brand-star { font-size: 20px; }
  .header-link { font-size: 12px; padding: 8px 14px; }
  .hero { grid-template-columns: 1fr; padding-block: 44px 40px; }
  .hero .eyebrow { font-size: 9px; letter-spacing: 1.4px; }
  h1 { font-size: clamp(64px, 19vw, 90px); }
  .name { font-size: 17px; }
  .hero-subtitle { font-size: 18px; }
  .hero-description { font-size: 15px; }
  .hero-art { grid-column: 1; grid-row: 2; width: min(100%, 440px); margin: 20px auto 0; }
  .chat { grid-column: 1; grid-row: 3; justify-self: center; width: min(100%, 330px); margin: -70px 0 0; transform: rotate(-2deg); }
  .ribbon-track > div { font-size: 11px; gap: 22px; padding-right: 22px; }
  .section { padding-block: 70px; }
  h2 { font-size: clamp(36px, 10vw, 46px); }
  .legend { gap: 28px; }
  .legend-copy { padding: 26px 22px; }
  .legend-copy p:first-child { font-size: 18px; }
  .section-heading { display: block; margin-bottom: 34px; }
  .section-heading > p { margin-top: 22px; max-width: none; }
  .project h3 { font-size: 28px; }
  .reading-list { grid-template-columns: 1fr; }
  .reading-list article { padding: 28px 24px; }
  .reading-list h3 { font-size: 23px; }
  .tool-note { padding: 26px 22px; }
  .profile-links { grid-template-columns: 1fr; }
  .dossier { transform: none; margin-top: 30px; }
  .dossier-photo { width: 92px; top: -34px; right: -6px; }
  .portrait-card { margin-top: 34px; }
  .dossier-row, .dossier-top, .dossier-bottom { padding-inline: 22px; }
  .dossier-bottom::after { font-size: 12px; right: 14px; bottom: 12px; }
  .birthday { padding: 70px 7% 64px; border-radius: 26px; margin-bottom: 60px; }
  .birthday > p:not(.eyebrow):not(.birthday-signoff) { font-size: 16px; }
  footer { flex-direction: column; text-align: center; gap: 14px; }
  .eyebrow { margin-bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Chronicle (story) page ---------- */
.story-page { max-width: 880px; padding-block: 90px 100px; }
.story-page h1 { font-size: clamp(46px, 7vw, 92px); margin-bottom: 26px; }
.story-deck { color: var(--muted); font: italic 400 24px/1.5 var(--display); max-width: 680px; }
.fiction-note { position: relative; border: 1px solid #b78cff40; border-radius: 16px; background: linear-gradient(135deg, #b78cff14, #ff7ac60a); padding: 20px 26px 20px 58px; font-size: 14.5px; color: var(--muted); margin: 40px 0 64px; max-width: 760px; }
.fiction-note::before { content: '✧'; position: absolute; left: 24px; top: 18px; font-size: 20px; color: var(--gold); }
.fiction-note strong { color: var(--text); }
.story-prose { max-width: 700px; font-size: 19px; line-height: 1.9; color: #e9e2f2; }
.story-prose h2 { font-size: 38px; margin: 64px 0 26px; }
.story-prose h2::before { content: '✦'; display: block; font-size: 16px; margin-bottom: 18px; color: var(--pink); }
.story-prose p { margin-bottom: 24px; }
.story-prose em { color: var(--lilac); }
.story-prose pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 26px; padding: 18px 22px 18px 50px; position: relative; border-radius: 12px; border: 1px solid var(--line); background: #07040f; color: var(--mint); font: 15px/1.6 var(--mono); box-shadow: inset 0 1px 0 #ffffff0d; }
.story-prose pre::before { content: '$'; position: absolute; left: 22px; color: var(--dim); }
.story-ending { margin-top: 48px; padding: 28px 30px; border-radius: 18px; background: linear-gradient(135deg, #ff7ac618, #b78cff14, #5fc4ff10); border: 1px solid #ff7ac640; color: var(--text); font: italic 400 21px/1.6 var(--display); }
.story-page > .button { margin-top: 36px; }
@media (max-width: 700px) {
  .story-page { padding-block: 50px 64px; }
  .story-prose { font-size: 17px; }
  .story-deck { font-size: 19px; }
  .story-prose h2 { font-size: 30px; }
  .fiction-note { padding: 16px 18px 16px 48px; font-size: 13.5px; }
  .fiction-note::before { left: 18px; top: 14px; }
  .story-page h1 { overflow-wrap: break-word; }
  .story-ending { font-size: 18px; padding: 22px; }
}

/* ---------- 404 ---------- */
.not-found { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.not-found h1 { font-size: clamp(56px, 10vw, 120px); }
.not-found > p:not(.eyebrow) { color: var(--muted); font-size: 18px; margin-bottom: 30px; }