@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;1,6..72,300;1,6..72,400&family=Inter:wght@300;400;500&display=swap');

/* ===== tokens ===== */
:root{
  --bg:#100b18; --bg2:#160f22; --bg3:#1c1430;
  --ink:#f3e9da; --soft:rgba(243,233,218,.66); --faint:rgba(243,233,218,.4);
  --glow:#f0c069; --rose:#d98a9a; --teal:#7fae9f;
  --line:rgba(243,233,218,.14);
  --display:'Fraunces',Georgia,serif; --prose:'Newsreader',Georgia,serif; --ui:'Inter',system-ui,sans-serif;
  --wrap:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{ background:var(--bg); color:var(--ink); font-family:var(--prose); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a{color:inherit}
img{max-width:100%;display:block}
.wrap{ max-width:var(--wrap); margin:0 auto; }
.eyebrow{ font-family:var(--ui); font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color:var(--glow); display:flex; align-items:center; gap:.7rem; }
.eyebrow::before{ content:''; width:30px; height:1px; background:var(--glow); opacity:.7; }
.stitle{ font-family:var(--display); font-weight:300; font-size:clamp(30px,4vw,52px); line-height:1.04; letter-spacing:-.015em; margin:1rem 0 1.4rem; }
.stitle em{ font-style:italic; color:var(--glow); }
.lead{ font-size:clamp(1.05rem,1.4vw,1.22rem); color:var(--soft); max-width:60ch; }
section{ position:relative; padding:clamp(5rem,11vh,9rem) 6vw; }
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal].d1{transition-delay:.08s}[data-reveal].d2{transition-delay:.16s}[data-reveal].d3{transition-delay:.24s}[data-reveal].d4{transition-delay:.32s}

/* ===== nav ===== */
.nav{ position:fixed; top:0; left:0; right:0; z-index:40; display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 3vw; transition:background .4s ease, border-color .4s, padding .4s; border-bottom:1px solid transparent; }
.nav.scrolled{ background:rgba(16,11,24,.82); backdrop-filter:blur(12px); border-bottom-color:var(--line); padding:.7rem 3vw; }
.nav .brand{ font-family:var(--display); font-weight:400; font-size:1.18rem; letter-spacing:.01em; text-decoration:none; }
.nav .brand b{font-weight:600}
.nav-links{ display:flex; align-items:center; gap:1.7rem; }
@media (max-width:860px){ .nav-links .navlink{display:none} }
.navlink{ font-family:var(--ui); font-size:.74rem; letter-spacing:.15em; text-transform:uppercase; color:var(--soft); text-decoration:none; position:relative; padding-bottom:3px; }
.navlink::after{ content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--glow); transition:width .35s cubic-bezier(.2,.7,.2,1); }
.navlink:hover{ color:var(--ink); } .navlink:hover::after{ width:100%; }
.nav-cta{ font-family:var(--ui); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); text-decoration:none; border:1px solid var(--line); border-radius:999px; padding:.5rem 1rem; transition:.3s; }
.nav-cta:hover{ border-color:var(--glow); color:var(--glow); }
.lang{ font-family:var(--ui); font-size:.68rem; letter-spacing:.1em; border:1px solid var(--line); border-radius:999px; padding:.4rem .66rem; color:var(--soft); background:none; cursor:pointer; transition:.3s; }
.lang:hover{ border-color:var(--glow); } .lang b{color:var(--ink)}

/* ===== hero ===== */
.hero{ --mx:50vw; --my:46vh; position:relative; height:100vh; min-height:600px; overflow:hidden; isolation:isolate; background:var(--bg); cursor:none; }
@media (pointer:coarse){ .hero{cursor:auto} }
.hero .photo,.hero .photo-lit{ position:absolute; inset:0; background:url('assets/live-wide.jpg') center 42%/cover; animation:fadein 1.8s ease forwards; }
.hero .photo{ z-index:0; filter:grayscale(.12) brightness(.34) contrast(1.06); }
.hero .photo-lit{ z-index:1; filter:brightness(1.02) contrast(1.05) saturate(1.06);
  -webkit-mask-image:radial-gradient(circle 300px at var(--mx) var(--my), #000 0%, rgba(0,0,0,.6) 42%, transparent 70%);
          mask-image:radial-gradient(circle 300px at var(--mx) var(--my), #000 0%, rgba(0,0,0,.6) 42%, transparent 70%); }
@media (max-width:760px){ .hero .photo,.hero .photo-lit{ background-image:url('assets/live-close.jpg'); background-position:center 34%; } }
@keyframes fadein{ from{opacity:0} to{opacity:1} }
.hero .grain{ position:absolute; inset:0; opacity:.4; mix-blend-mode:overlay; pointer-events:none; z-index:2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E"); }
.hero .scrim{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(90deg, rgba(14,10,22,.92) 0%, rgba(14,10,22,.58) 26%, rgba(14,10,22,.08) 52%, transparent 66%),
    linear-gradient(0deg, rgba(14,10,22,.95) 0%, rgba(14,10,22,.2) 26%, transparent 42%),
    linear-gradient(180deg, rgba(14,10,22,.66) 0%, transparent 16%); }
.hero .candle{ position:absolute; left:0; top:0; width:720px; height:720px; z-index:3; pointer-events:none; mix-blend-mode:screen;
  transform:translate(calc(var(--mx) - 50%), calc(var(--my) - 50%));
  background:radial-gradient(circle, rgba(255,216,150,.34) 0%, rgba(255,188,118,.14) 30%, rgba(255,170,110,.05) 50%, transparent 64%);
  opacity:0; animation:ignite 1.6s ease .4s forwards; }
@media (pointer:coarse){ .hero .candle{display:none} .hero .photo{filter:brightness(.6) contrast(1.05)} .hero .photo-lit{-webkit-mask-image:none;mask-image:none;filter:brightness(.66)} }
@keyframes ignite{ to{opacity:1} }
.hero .notes{ position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden; }
.note{ position:absolute; color:var(--glow); text-shadow:0 0 12px rgba(240,192,105,.85); opacity:0; animation:noteUp 5s ease-out forwards; }
@keyframes noteUp{ 0%{opacity:0; transform:translateY(0) scale(.7)} 14%{opacity:.95} 80%{opacity:.7} 100%{opacity:0; transform:translateY(-44vh) translateX(5vw) scale(1.1)} }
.hero-inner{ position:relative; z-index:4; height:100%; display:flex; align-items:center; padding:0 6vw; }
.htext{ max-width:560px; }
.htext .kicker{ font-family:var(--ui); font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color:var(--soft); display:flex; align-items:center; gap:.7rem; margin-bottom:1.4rem; text-shadow:0 1px 12px rgba(0,0,0,.6);}
.htext .kicker::before{ content:''; width:34px; height:1px; background:currentColor; opacity:.6;}
.h1{ font-family:var(--display); font-weight:300; font-size:clamp(42px,5.4vw,82px); line-height:.98; letter-spacing:-.02em; text-shadow:0 2px 40px rgba(0,0,0,.7);}
.h1 em{ font-style:italic; color:var(--glow); text-shadow:0 0 38px rgba(240,192,105,.5);}
.htext .sub{ font-family:var(--prose); font-weight:400; font-size:clamp(1.08rem,1.45vw,1.28rem); line-height:1.6; color:rgba(243,233,218,.9); max-width:40ch; margin-top:1.5rem; text-shadow:0 1px 16px rgba(0,0,0,.7);}
.cta{ display:flex; align-items:center; gap:1.6rem; margin-top:2rem; flex-wrap:wrap;}
.btn{ font-family:var(--ui); font-size:.84rem; letter-spacing:.04em; padding:.74rem 1.5rem; border-radius:999px; background:var(--glow); color:#2a1c0c; border:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;}
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 44px rgba(240,192,105,.5);}
.btn.ghost{ background:transparent; color:var(--ink); border:1px solid var(--line);}
.btn.ghost:hover{ border-color:var(--glow); color:var(--glow); box-shadow:none;}
.link{ font-family:var(--ui); font-size:.84rem; color:var(--ink); text-decoration:none; border-bottom:1px solid rgba(243,233,218,.4); padding-bottom:2px; transition:.3s;}
.link:hover{ border-color:var(--glow); color:var(--glow);}
.hero .footline{ position:absolute; bottom:0; left:0; right:0; z-index:4; display:flex; justify-content:space-between; align-items:center; padding:1.1rem 6vw; font-family:var(--ui); font-size:.72rem; letter-spacing:.1em; color:rgba(244,236,224,.7);}
.nowplay{ display:flex; align-items:center; gap:.6rem; cursor:none; text-shadow:0 1px 12px rgba(0,0,0,.7);}
@media (pointer:coarse){ .nowplay{cursor:pointer} }
.eq{ display:inline-flex; gap:2px; align-items:flex-end; height:13px;}
.eq i{ width:2px; background:var(--glow); display:inline-block; height:3px; }
.playing .eq i{ animation:eq 1.1s ease-in-out infinite;}
.playing .eq i:nth-child(2){animation-delay:.2s}.playing .eq i:nth-child(3){animation-delay:.45s}.playing .eq i:nth-child(4){animation-delay:.7s}.playing .eq i:nth-child(5){animation-delay:.3s}
@keyframes eq{ 0%,100%{height:3px} 50%{height:13px} }
.hero .flame{ position:absolute; left:0; top:0; z-index:6; width:14px; height:14px; pointer-events:none; transform:translate(calc(var(--mx) - 50%), calc(var(--my) - 50%));
  border-radius:50% 50% 50% 50%/60% 60% 40% 40%; background:radial-gradient(circle at 50% 65%, #fff7e6, #f0c069 45%, #e08a3a 80%); box-shadow:0 0 22px 7px rgba(240,192,105,.7); opacity:0; animation:ignite 1.6s ease .4s forwards, flick 2.4s ease-in-out .4s infinite;}
@media (pointer:coarse){ .hero .flame{display:none} }
@keyframes flick{ 0%,100%{opacity:.9} 45%{opacity:1} 70%{opacity:.84} }
.scrollcue{ position:absolute; left:50%; bottom:8vh; z-index:5; transform:translateX(-50%); font-family:var(--ui); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); animation:cue 2.6s ease-in-out infinite;}
@keyframes cue{ 0%,100%{opacity:.4; transform:translate(-50%,0)} 50%{opacity:.9; transform:translate(-50%,6px)} }

/* ===== ambient blooms for content sections ===== */
.bloomfield{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.bloomfield i{ position:absolute; border-radius:50%; filter:blur(110px); opacity:.18; }
.section-inner{ position:relative; z-index:1; }

/* ===== manifesto ===== */
.manifesto{ background:linear-gradient(180deg,#100b18, #160f22); text-align:center; }
.manifesto .quote{ font-family:var(--display); font-weight:300; font-style:italic; font-size:clamp(26px,3.4vw,46px); line-height:1.25; max-width:20ch; margin:1.4rem auto 1.6rem; }
.manifesto .quote b{ color:var(--glow); font-weight:300; }
.manifesto .by{ font-family:var(--ui); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); }

/* ===== music ===== */
.music{ background:var(--bg2); }
.grid2{ display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center; }
@media (max-width:860px){ .grid2{ grid-template-columns:1fr; gap:2rem; } }
.player-card{ position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line); aspect-ratio:16/10; cursor:pointer; box-shadow:0 26px 60px rgba(0,0,0,.45); }
.player-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(.1) brightness(.7); transition:transform .6s ease, filter .6s; }
.player-card:hover img{ transform:scale(1.05); filter:grayscale(0) brightness(.82); }
.player-card .pc-grad{ position:absolute; inset:0; background:linear-gradient(0deg,rgba(16,11,24,.85),transparent 60%); }
.player-card .pc-play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:74px; height:74px; border-radius:50%; background:rgba(240,192,105,.92); color:#2a1c0c; display:flex; align-items:center; justify-content:center; font-size:1.3rem; box-shadow:0 0 0 0 rgba(240,192,105,.5); animation:pulse 2.6s ease-out infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(240,192,105,.45)} 100%{box-shadow:0 0 0 26px rgba(240,192,105,0)} }
.player-card .pc-meta{ position:absolute; left:1.2rem; bottom:1.1rem; }
.player-card .pc-meta .t{ font-family:var(--display); font-style:italic; font-size:1.4rem; }
.player-card .pc-meta .s{ font-family:var(--ui); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--soft); }
.tracklist{ list-style:none; }
.trackrow{ display:flex; align-items:center; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--line); cursor:pointer; transition:.3s; }
.trackrow:hover{ padding-left:.5rem; }
.trackrow .n{ font-family:var(--ui); font-size:.78rem; color:var(--faint); width:1.5rem; }
.trackrow .tt{ font-family:var(--display); font-size:1.15rem; flex:1; }
.trackrow .ic{ color:var(--glow); opacity:.8; }
.trackrow:hover .ic{ opacity:1; }

/* ===== diaries ===== */
.diaries{ background:linear-gradient(180deg,var(--bg2),var(--bg)); }
.evenings{ list-style:none; margin-top:2.5rem; }
.evening{ display:grid; grid-template-columns:auto 1fr auto; gap:1.6rem; align-items:center; padding:1.5rem 0; border-top:1px solid var(--line); }
.evening:last-child{ border-bottom:1px solid var(--line); }
.evening .date{ font-family:var(--display); font-size:1.05rem; color:var(--glow); min-width:8.5rem; }
.evening .ev-t{ font-family:var(--display); font-size:1.25rem; }
.evening .ev-v{ font-family:var(--ui); font-size:.8rem; letter-spacing:.08em; color:var(--soft); }
.evening .ev-act .link{ white-space:nowrap; }
.tag-soon{ font-family:var(--ui); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--glow); border:1px solid rgba(240,192,105,.4); border-radius:999px; padding:.3rem .6rem; }
.notify{ display:flex; gap:.6rem; margin-top:2.2rem; max-width:420px; flex-wrap:wrap; }
.input{ flex:1; min-width:220px; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:999px; padding:.8rem 1.2rem; color:var(--ink); font-family:var(--prose); font-size:1rem; }
.input:focus{ outline:none; border-color:var(--glow); }

/* ===== teaching ===== */
.teaching{ background:var(--bg2); }
.teach-list{ list-style:none; margin:1.6rem 0; }
.teach-list li{ padding:.7rem 0 .7rem 1.6rem; position:relative; border-bottom:1px solid var(--line); color:var(--soft); }
.teach-list li::before{ content:'♪'; position:absolute; left:0; color:var(--glow); opacity:.8; }
.teach-list li b{ color:var(--ink); font-weight:500; }

/* ===== books ===== */
.books{ background:linear-gradient(180deg,var(--bg2),var(--bg3)); }
.bookgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; margin-top:2.5rem; }
@media (max-width:760px){ .bookgrid{ grid-template-columns:1fr; } }
.book{ position:relative; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.03); padding:1.4rem; min-height:230px; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; }
.book .spine{ position:absolute; left:0; top:0; bottom:0; width:6px; background:linear-gradient(180deg,var(--glow),var(--rose)); opacity:.8; }
.book .bk-t{ font-family:var(--display); font-style:italic; font-size:1.3rem; margin-bottom:.4rem; }
.book .bk-d{ font-family:var(--prose); color:var(--soft); font-size:.96rem; }
.book .tag-soon{ position:absolute; top:1rem; right:1rem; }

/* ===== about ===== */
.about{ background:var(--bg3); }
.about .grid2{ grid-template-columns:.85fr 1.15fr; }
@media (max-width:860px){ .about .grid2{ grid-template-columns:1fr; } }
.portrait-frame{ position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line); aspect-ratio:4/5; box-shadow:0 26px 60px rgba(0,0,0,.45); }
.portrait-frame img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.1) contrast(1.03); }
.portrait-frame .glow{ position:absolute; inset:0; background:radial-gradient(90% 70% at 70% 4%, rgba(240,192,105,.28), transparent 60%); mix-blend-mode:screen; }
.about p{ margin-bottom:1.1rem; color:var(--soft); font-size:clamp(1.04rem,1.3vw,1.18rem); }
.about p b{ color:var(--ink); font-weight:500; }
.signoff{ font-family:'Fraunces',serif; } /* fallback */
.signoff{ display:inline-block; margin-top:.6rem; font-size:2.2rem; color:var(--glow); }
.signoff.hand{ font-family:'Caveat',cursive; transform:rotate(-3deg); }

/* ===== contact ===== */
.contact{ background:linear-gradient(180deg,var(--bg3),#0e0a16); }
.contact .grid2{ grid-template-columns:1fr 1fr; gap:3rem; align-items:start; }
@media (max-width:860px){ .contact .grid2{ grid-template-columns:1fr; } }
.field{ margin-bottom:1rem; }
.field label{ display:block; font-family:var(--ui); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:.4rem; }
.field input,.field textarea{ width:100%; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:12px; padding:.85rem 1rem; color:var(--ink); font-family:var(--prose); font-size:1rem; }
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--glow); }
.socials{ list-style:none; margin-top:1.5rem; }
.socials li{ padding:.85rem 0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.socials a{ font-family:var(--ui); font-size:.82rem; letter-spacing:.08em; text-decoration:none; color:var(--ink); transition:.3s; }
.socials a:hover{ color:var(--glow); }
.socials .h{ font-family:var(--ui); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.placeholder-note{ font-family:var(--ui); font-size:.68rem; letter-spacing:.04em; color:var(--rose); opacity:.85; margin-top:.3rem; }

/* ===== footer ===== */
footer{ background:#0e0a16; padding:3rem 6vw 2.4rem; border-top:1px solid var(--line); }
.foot-top{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; }
.foot-brand{ font-family:var(--display); font-size:1.5rem; }
.foot-tag{ font-family:var(--prose); font-style:italic; color:var(--soft); margin-top:.3rem; }
.foot-links{ display:flex; gap:1.4rem; font-family:var(--ui); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; }
.foot-links a{ color:var(--soft); text-decoration:none; } .foot-links a:hover{ color:var(--glow); }
.foot-bottom{ display:flex; justify-content:space-between; margin-top:2.5rem; font-family:var(--ui); font-size:.7rem; letter-spacing:.06em; color:var(--faint); flex-wrap:wrap; gap:.6rem; }

/* ===== mini player ===== */
.mini{ position:fixed; right:18px; bottom:18px; z-index:60; width:340px; max-width:88vw; background:rgba(20,14,28,.96); backdrop-filter:blur(12px);
  border:1px solid rgba(243,196,107,.3); border-radius:14px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.6);
  opacity:0; transform:translateY(16px) scale(.98); pointer-events:none; transition:opacity .4s ease, transform .4s cubic-bezier(.2,.7,.2,1); }
.mini.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.mini-head{ display:flex; align-items:center; justify-content:space-between; padding:.55rem .8rem; border-bottom:1px solid rgba(255,255,255,.08); }
.mini-title{ font-family:var(--prose); font-style:italic; font-size:1rem; }
.mini-actions{ display:flex; align-items:center; gap:.3rem; }
.mini-yt,.mini-close{ background:none; border:none; color:var(--soft); font-size:.85rem; cursor:pointer; text-decoration:none; line-height:1; padding:.25rem .42rem; border-radius:6px; }
.mini-yt:hover,.mini-close:hover{ color:#fff; background:rgba(255,255,255,.1); }
.mini-body{ position:relative; aspect-ratio:16/9; background:#000; }
.mini-body iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .note,.hero .candle,.hero .flame,.playing .eq i,.player-card .pc-play,.scrollcue{ animation:none !important; }
  .hero .photo-lit{ -webkit-mask-image:none; mask-image:none; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .hero{ cursor:auto; } .hero .flame{ display:none; }
}