/* eMmiyo — emmiyo.com */
:root{
  --bg:#0d0d2b; --bg2:#12123a; --violet:#4a4ae8; --red:#ff1e3c;
  --ink:#f4f1ea; --muted:#8b8bd9; --teal:#3fbfae; --sand:#efe7da;
  --serif:"Georgia","Times New Roman",serif;
  --sans:-apple-system,"Helvetica Neue","Inter",Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
/* overflow-x:clip (NOT hidden) — hidden on html makes Safari double-render
   the page as a duplicate offset layer; clip kills sideways scroll without
   creating a scroll container */
html{scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;overflow-x:clip}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
body{background:var(--blend,var(--bg));color:var(--ink);font-family:var(--sans);overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
b{font-weight:800}

/* Preloader */
.preloader{position:fixed;inset:0;z-index:100;background:var(--bg2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem;transition:opacity .7s ease,visibility .7s}
.preloader.done{opacity:0;visibility:hidden}
.preloader-word{font-family:var(--serif);font-style:italic;font-size:clamp(2.5rem,8vw,5rem);display:flex}
.preloader-word span{opacity:0;transform:translateY(.4em);animation:rise .6s cubic-bezier(.2,.7,.2,1) forwards}
.preloader-word span:nth-child(2){animation-delay:.07s;color:var(--red)}
.preloader-word span:nth-child(3){animation-delay:.14s}
.preloader-word span:nth-child(4){animation-delay:.21s}
.preloader-word span:nth-child(5){animation-delay:.28s}
.preloader-word span:nth-child(6){animation-delay:.35s}
@keyframes rise{to{opacity:1;transform:none}}
.preloader-line{width:0;height:1px;background:var(--red);animation:line 1.1s .3s ease forwards}
@keyframes line{to{width:min(60vw,320px)}}

/* Grain */
.grain{position:fixed;inset:-8%;z-index:90;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 8s steps(10) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-2%,1.5%)}40%{transform:translate(1.5%,-2%)}60%{transform:translate(-1.5%,-1.5%)}80%{transform:translate(2%,2%)}}

/* Nav — full-width clear glass bar: barely-there blur, bubble-glass sheen */
/* bar is invisible over the hero — only the bubble + Breathe In show. The
   glass bar (and logo) fade in once you scroll past the header. Borderless. */
.nav{position:fixed;top:0;left:0;right:0;width:100%;z-index:80;display:flex;align-items:center;justify-content:space-between;padding:.75rem 4vw;border-radius:0 0 22px 22px;background:transparent;border:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;transition:background .6s,backdrop-filter .6s,box-shadow .6s}
.nav.scrolled{background:linear-gradient(180deg,rgba(255,255,255,.032),rgba(255,255,255,.008));backdrop-filter:blur(7px) saturate(1.45);-webkit-backdrop-filter:blur(7px) saturate(1.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 12px 44px rgba(0,0,0,.2)}
.nav-logo{font-family:var(--serif);font-style:italic;font-size:2rem;opacity:0;pointer-events:none;transition:opacity .6s;animation:logoFloat 6s ease-in-out infinite;will-change:transform}
.nav.scrolled .nav-logo{opacity:1;pointer-events:auto}
@keyframes logoFloat{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-5px) rotate(.6deg)}}
.nav-links{display:flex;gap:1.7rem;font-size:.95rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500}
.nav-links a{opacity:.8;transition:opacity .25s,text-shadow .25s}
.nav-links a:hover{opacity:1;text-shadow:0 0 18px rgba(244,241,234,.5)}
.nav-right{display:flex;align-items:center;gap:.8rem}
/* round "e" bubble button — the menu on ALL viewports, floats like a bubble */
.nav-e{display:flex;width:46px;height:46px;border-radius:50%;cursor:pointer;align-items:center;justify-content:center;color:var(--ink);background:radial-gradient(120% 120% at 30% 22%,rgba(255,255,255,.22),rgba(255,255,255,.04) 55%,rgba(255,255,255,0));border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(4px) saturate(1.4);-webkit-backdrop-filter:blur(4px) saturate(1.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -6px 12px rgba(255,255,255,.05),0 8px 24px rgba(0,0,0,.3);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s}
.nav-e span{font-family:var(--serif);font-style:italic;font-size:1.5rem;line-height:1;transform:translateY(-1px)}
.nav-e:hover{transform:scale(1.1);border-color:rgba(255,255,255,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 26px rgba(255,30,60,.25),0 8px 24px rgba(0,0,0,.35)}
.nav-e[aria-expanded="true"]{border-color:var(--red);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 30px rgba(255,30,60,.35)}
/* the bubble floats — slow bob + drift, like it's suspended in liquid */
@keyframes eFloat{0%,100%{transform:translateY(0) rotate(-2deg)}33%{transform:translateY(-4px) rotate(1.5deg)}66%{transform:translateY(2px) rotate(-.5deg)}}
.nav-e{animation:eFloat 5s ease-in-out infinite}
.nav-e:hover,.nav-e[aria-expanded="true"]{animation-play-state:paused}
/* desktop: exaggerated bubble + menu, breathing in place */
@media (min-width:821px){
  .nav-right{gap:1.9rem}
  .nav-e{width:74px;height:74px;animation:eFloatBig 5.5s ease-in-out infinite}
  .nav-e span{font-size:3.1rem}
}
@keyframes eFloatBig{0%,100%{transform:translateY(0) scale(1) rotate(-2deg)}33%{transform:translateY(-8px) scale(1.05) rotate(2deg)}66%{transform:translateY(4px) scale(.98) rotate(-1deg)}}
@media (prefers-reduced-motion:reduce){.nav-e{animation:none}}
/* bubble glass menu */
/* the menu is a liquid blot — irregular border-radius that slowly morphs */
.e-menu{position:fixed;top:70px;right:3vw;z-index:108;display:flex;flex-direction:column;min-width:150px;padding:.85rem .9rem;border-radius:58% 42% 64% 36%/44% 56% 40% 60%;background:radial-gradient(140% 140% at 28% 12%,rgba(255,255,255,.14),rgba(255,255,255,.03) 60%,rgba(255,255,255,0));border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(8px) saturate(1.5);-webkit-backdrop-filter:blur(8px) saturate(1.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -10px 24px rgba(255,255,255,.04),0 22px 60px rgba(0,0,0,.4);transform-origin:top right;transform:scale(.7) translateY(-10px);opacity:0;pointer-events:none;visibility:hidden;transition:transform .38s cubic-bezier(.2,.9,.25,1.2),opacity .3s,visibility .38s;animation:blob 9s ease-in-out infinite}
@keyframes blob{0%,100%{border-radius:58% 42% 64% 36%/44% 56% 40% 60%}33%{border-radius:42% 58% 38% 62%/58% 42% 60% 40%}66%{border-radius:52% 48% 58% 42%/40% 62% 44% 56%}}
.e-menu.open{transform:none;opacity:1;pointer-events:auto;visibility:visible}
@media (prefers-reduced-motion:reduce){.e-menu{animation:none}}
/* links hug their text (align-self:center) so the hover pill stays inside the
   blob, and the pill itself wobbles like a bubble while hovered */
.e-menu a:not(.e-bub){align-self:center;width:fit-content;padding:.6rem 1.1rem;font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;text-align:center;opacity:.85;transition:opacity .25s,color .3s}
/* hover: no bar — the text goes eMmiyo red and bobs like a bubble */
.e-menu a:not(.e-bub):hover{opacity:1;color:var(--red);text-shadow:0 0 18px rgba(255,30,60,.45);animation:textBub 4.5s ease-in-out infinite}
@keyframes textBub{0%,100%{transform:translateY(0) scale(1.04)}50%{transform:translateY(-2px) scale(1.08)}}
/* mini social bubbles at the foot of the menu — same glass + float physics as the e */
.e-menu-social{display:flex;justify-content:center;gap:.9rem;margin-top:1rem;padding:0}
.e-menu .e-bub{display:flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border-radius:54% 46% 60% 40%/46% 58% 42% 54%;opacity:1;color:var(--ink);background:radial-gradient(120% 120% at 30% 22%,rgba(255,255,255,.22),rgba(255,255,255,.04) 55%,rgba(255,255,255,0));border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(4px) saturate(1.4);-webkit-backdrop-filter:blur(4px) saturate(1.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -6px 12px rgba(255,255,255,.05),0 8px 24px rgba(0,0,0,.3);animation:eFloat 5s ease-in-out infinite,bubMorph 6.5s ease-in-out infinite;scale:1;transition:box-shadow .3s,border-color .3s,color .3s,scale .35s cubic-bezier(.34,1.56,.64,1)}
/* each bubble wobbles and floats on its own clock */
.e-menu .e-bub:nth-child(2){animation-delay:-1.7s,-2.2s;animation-duration:5.6s,7.3s}
.e-menu .e-bub:nth-child(3){animation-delay:-3.4s,-4.1s;animation-duration:4.7s,5.9s}
@keyframes bubMorph{0%,100%{border-radius:54% 46% 60% 40%/46% 58% 42% 54%}25%{border-radius:44% 56% 42% 58%/58% 44% 56% 42%}50%{border-radius:58% 42% 52% 48%/42% 56% 44% 58%}75%{border-radius:46% 54% 58% 42%/54% 42% 58% 46%}}
.e-menu .e-bub svg{width:18px;height:18px}
.e-menu .e-bub:hover{scale:1.25;background:radial-gradient(120% 120% at 30% 22%,rgba(255,255,255,.3),rgba(255,255,255,.06) 55%,rgba(255,255,255,0));color:var(--pc);border-color:var(--pc);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 24px color-mix(in srgb,var(--pc) 55%,transparent)}
@media (prefers-reduced-motion:reduce){.e-menu .e-bub{animation:none}}
/* desktop open menu = huge organic blob (~2/5 screen) with oversized links.
   Placed AFTER the base .e-menu rules so these overrides actually win. */
@media (min-width:821px){
  .e-menu{top:76px;right:2vw;width:min(31.5vw,450px);min-height:min(43.5vh,480px);min-width:0;padding:2.25rem 1.8rem;gap:.22rem;justify-content:center}
  .e-menu a:not(.e-bub){font-size:clamp(1.8rem,2.9vw,2.7rem);letter-spacing:.14em;padding:.52rem .9rem}
}
@media (prefers-reduced-motion:reduce){.nav-logo{animation:none}}
.breathe-btn{display:flex;align-items:center;gap:.5rem;border:1px solid rgba(244,241,234,.35);border-radius:999px;padding:.5rem 1rem;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;transition:border-color .3s,background .3s}
.breathe-btn:hover{border-color:var(--teal);background:rgba(63,191,174,.12)}
.breathe-dot{width:8px;height:8px;border-radius:50%;background:var(--teal);animation:breathe 4s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(.7);opacity:.5}50%{transform:scale(1.3);opacity:1}}

/* Hero — 2-viewport pinned scene */
.hero{position:relative;height:180vh}
.hero-sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:14vh;overflow:hidden;perspective:1100px;perspective-origin:50% 42%}
.hero-fill{position:absolute;inset:-12%;z-index:0;will-change:transform;overflow:hidden}
/* source is a 48px thumb — native upscale does most of the softening, so the
   GPU blur radius can be much smaller than the old 46px */
.hero-fill img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:blur(24px) brightness(.5) saturate(1.35);transform:scale(1.2)}
/* mobile: the cover portrait fills the screen, so the blurred fill layer is
   invisible — don't pay a full-screen blur for it */
/* mobile: keep the blurred fill ON as a full-bleed backdrop that extends
   past every edge, and pull the sharp portrait back a touch. The portrait is
   framed a little more zoomed-out; any surround (incl. above the top edge) is
   covered by the blurred image, so the blue page background never shows. */
@media (max-width:820px){
  .hero-fill{display:block;inset:-16%}
  .hero-fill::after{opacity:.35}
  .hero-fill::before{background:rgba(15,15,50,.18)}
  .hero-bg{inset:-4% -4%}
  /* landscape header on a tall phone: fill (no scale-down gaps), framed higher on eMmiyo */
  .hero-bg img{object-position:50% 60%;transform:scale(1.06)}
}
/* pull the backdrop into the site's ultraviolet palette */
.hero-fill::after{content:"";position:absolute;inset:0;background:#3535a8;mix-blend-mode:color;opacity:.8}
.hero-fill::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(15,15,50,.35)}
.hero-bg{position:absolute;inset:-16% -6%;z-index:1;will-change:transform}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.hero-veil{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(13,13,43,.25) 0%,rgba(13,13,43,.05) 40%,rgba(13,13,43,.92) 92%)}
.hero-title{position:relative;z-index:3;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(4rem,16vw,13rem);line-height:.95;mix-blend-mode:screen;transform-style:preserve-3d;will-change:transform}
.hero-line{display:block;overflow:hidden}
.hero-word{display:inline-block;transform:translateY(110%);animation:heroRise 1s .9s cubic-bezier(.2,.7,.2,1) forwards;will-change:transform,opacity}
.hero-word.free{animation:none;transform:none}
.hero-line.free{overflow:visible}
.hero-word b{color:var(--red)}
.hl{display:inline-block}
@keyframes heroRise{to{transform:none}}
.hero-sub{position:relative;z-index:3;letter-spacing:.3em;text-transform:uppercase;font-size:.8rem;margin-top:1.4rem;color:var(--sand);text-align:center;padding:0 1.2rem}
.hs-line{display:block}
.hs-line+.hs-line{margin-top:.45em}
.hero-tag{position:relative;z-index:3;font-family:var(--serif);font-style:italic;color:var(--muted);margin-top:.6rem}
.scroll-hint{position:absolute;bottom:2rem;z-index:3;font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;opacity:.6;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.scroll-hint span{width:1px;height:34px;background:var(--ink);animation:drop 1.8s ease-in-out infinite;transform-origin:top}
@keyframes drop{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}

/* Marquee */
.marquee{overflow:hidden;border-block:1px solid rgba(244,241,234,.1);padding:.9rem 0;background:transparent}
/* removed on phones — the scroll-driven ticker sits static there */
@media (max-width:820px){.marquee{display:none}}
.marquee-inner{display:flex;white-space:nowrap;font-size:.85rem;letter-spacing:.35em;will-change:transform}
.marquee-inner span{color:var(--red)}
@media (prefers-reduced-motion:reduce){.marquee-inner{animation:marq 22s linear infinite}}
.marquee-inner.css-run{animation:marq 26s linear infinite}
@keyframes marq{to{transform:translateX(-33.33%)}}

/* EP — cover left, title right, cinematic dissolve entrance */
.ep{padding:6vh 6vw 8vh;background:none}
.ep-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:5vw;align-items:center;max-width:1200px;margin:0 auto}
.ep-cover{position:relative;border-radius:8px;overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 120px rgba(74,74,232,.35);will-change:transform,opacity;opacity:0}
.ep-cover img{will-change:filter;width:100%;height:auto}
.ep-title span{display:inline-block;will-change:transform,opacity;opacity:0}
.split-side{will-change:transform}
.kicker{font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;color:var(--red);margin-bottom:1.2rem}
.kicker.center{text-align:center}
.ep-copy{position:relative;z-index:2}
.ep-title{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(3rem,6.8vw,6.4rem);line-height:.98;margin-bottom:1.6rem;will-change:transform;text-shadow:0 8px 50px rgba(0,0,0,.65)}
.ep-title span{display:inline-block}
/* line breaks are breakpoint-conditional: desktop keeps 3 lines
   (I Used / To Write / Poetry); mobile becomes 2 (I Used To / Write Poetry). */
.ep-title .brk{display:none}
@media (min-width:821px){.ep-title .brk-d{display:block}}
@media (max-width:820px){
  .ep-title .brk-m{display:block}
  /* sized so the longest line ("Write Poetry") fills the width on one line */
  .ep-title{font-size:clamp(2.6rem,14vw,3.4rem);white-space:nowrap}
}
.ep-blurb{color:var(--muted);max-width:44ch;line-height:1.7;margin:0 0 2rem}
.btn{display:inline-block;padding:.9rem 1.7rem;border-radius:999px;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;transition:transform .25s,box-shadow .25s,background .25s;margin:0 .6rem .6rem 0}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(255,30,60,.4)}
.btn-ghost{border:1px solid rgba(244,241,234,.4)}
.btn-ghost:hover{background:rgba(244,241,234,.1);transform:translateY(-3px)}

/* Split catalog — pinned door scene on desktop, panels sized to content */
.catalog{padding:4vh 0 0;background:none}
.split-stage{margin-top:1.2rem}
.split{display:grid;grid-template-columns:1fr 1fr;min-height:64vh}
@media (min-width:821px){
  .split-stage{height:120vh;position:relative}
  .split{position:sticky;top:13vh;height:70vh;min-height:0;margin:0 6vw;gap:16px}
  .split-side{overflow:hidden;padding-top:4.5vh;border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
  .side-core{border-right:none;box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 60px rgba(255,30,60,.08)}
  .side-breathe{box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 60px rgba(63,191,174,.12)}
}
.split-side{padding:8vh 6vw}
.side-core{background:#0a0a24;border-right:1px solid rgba(255,30,60,.25)}
.side-breathe{background:var(--sand);color:#22303c}
.side-title{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.7rem,3vw,2.5rem);margin-bottom:.35rem}
.side-core .side-title{color:var(--red)}
.side-breathe .side-title{color:#177566}
.side-sub{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;opacity:.6;margin-bottom:1.5rem}
.tracks{list-style:none}
.track a{display:grid;grid-template-columns:2.4rem 1fr;grid-template-rows:auto auto;align-items:baseline;padding:.85rem .4rem;border-bottom:1px solid rgba(128,128,160,.25);transition:padding-left .3s,background .3s}
.track a:hover{padding-left:1rem;background:rgba(255,30,60,.07)}
.side-breathe .track a:hover{background:rgba(23,117,102,.08)}
.tno{grid-row:1/3;font-size:.75rem;opacity:.45}
.tname{font-family:var(--serif);font-size:1.2rem}
.tname em{font-style:italic;font-size:.95rem;opacity:.7}
.ttag{grid-column:2;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;opacity:.5;margin-top:.25rem}

/* Poet — floating HD art panel, half-frame, lyrics flying around it */
.poet{height:160vh;position:relative}
.poet-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center;justify-content:center;perspective:1000px}
.poet-sticky::before{content:"";position:absolute;inset:0;background:radial-gradient(62% 72% at 50% 45%,rgba(40,40,126,.55) 0%,rgba(24,24,84,.25) 45%,rgba(13,13,43,0) 75%)}
.poet-img{position:relative;z-index:1;width:min(48vw,600px);aspect-ratio:1;border-radius:16px;overflow:hidden;box-shadow:0 40px 110px rgba(0,0,0,.6),0 0 140px rgba(74,74,232,.4),0 0 60px rgba(255,30,60,.12);will-change:transform,opacity,filter}
.poet-img img{width:100%;height:100%;object-fit:cover;filter:saturate(1.08) brightness(.9)}
.verse{transform-style:preserve-3d}
.poet-verses{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 6vw}
@media (max-width:820px){.poet-img{width:82vw}}
.verse{font-family:var(--serif);font-style:italic;font-size:clamp(1.9rem,4.6vw,3.6rem);line-height:1.5;text-shadow:0 2px 30px rgba(0,0,0,.7);opacity:0;will-change:transform,opacity}
@media (prefers-reduced-motion:reduce){.verse,.ep-cinema,.ep-title span{opacity:1!important}}

/* Live */
.live{padding:3vh 6vw 8vh;max-width:none;background:none;content-visibility:auto;contain-intrinsic-size:auto 800px}
.live>*{max-width:1000px;margin-left:auto;margin-right:auto}
.section-title{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(2.4rem,6vw,4.5rem);margin-bottom:2.5rem}
.live-list{list-style:none}
.live-row{display:grid;grid-template-columns:7rem 1fr auto;gap:1rem;align-items:center;padding:1.5rem .4rem;border-bottom:1px solid rgba(139,139,217,.3)}
.ld{grid-column:1;grid-row:1/3;align-self:center;font-size:.85rem;letter-spacing:.1em;color:var(--red)}
.ln{grid-column:2;grid-row:1;font-family:var(--serif);font-size:1.25rem}
.lv{grid-column:2;grid-row:2;font-size:.8rem;color:var(--muted)}
.lp{grid-column:3;grid-row:1/3;align-self:center;justify-self:end;font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;border:1px solid rgba(244,241,234,.35);border-radius:999px;padding:.4rem .9rem}
.live-row.past{opacity:.5}
.live-note{margin-top:2rem;font-size:.85rem;color:var(--muted)}
.live-note a{text-decoration:underline;text-underline-offset:3px}

/* Connect */
.connect{padding:8vh 6vw 6vh;background:none;text-align:center}
/* no content-visibility here: the giant word now animates on mobile too, and
   content-visibility's implicit contain:paint would clip its 3D transform. */
.giant-word{font-size:clamp(4rem,16vw,13rem);line-height:.9;font-weight:800;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1.5px rgba(244,241,234,.92);margin-bottom:2rem;will-change:transform,text-shadow;transform-style:preserve-3d}
.giant-word.inview{color:rgba(244,241,234,.14)}
.connect-sub{color:var(--muted);margin-bottom:3.5rem}
.link-wall{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(139,139,217,.25);max-width:960px;margin:0 auto 5rem;border:1px solid rgba(139,139,217,.25)}
.wall-link{background:var(--bg);padding:1.6rem 1rem;display:flex;flex-direction:column;gap:.35rem;font-family:var(--serif);font-size:1.1rem;transition:background .3s,transform .3s}
.wall-link span{font-family:var(--sans);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.wall-link:hover{background:#1a1a4d;transform:translateY(-3px)}
.footer{font-size:.75rem;color:var(--muted);line-height:2}
.footer a{text-decoration:underline;text-underline-offset:3px}

/* Connect quote */
.connect-quote{font-family:var(--serif);font-style:italic;font-size:1.25rem;color:var(--sand);opacity:.85;margin-bottom:1rem}

/* Newsletter — thin embossed strip above the footer */
.newsletter{max-width:520px;margin:0 auto 1.2rem;text-align:center}
.newsletter-title{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--muted);margin-bottom:1rem}
.newsletter-row{display:flex;gap:.6rem}
.newsletter input[type="email"]{flex:1;min-width:0;padding:.85rem 1.3rem;border-radius:999px;border:1px solid rgba(139,139,217,.25);background:rgba(6,6,22,.7);color:var(--ink);font-size:.9rem;outline:none;box-shadow:inset 0 2px 8px rgba(0,0,0,.65),inset 0 -1px 0 rgba(255,255,255,.05),0 1px 0 rgba(255,255,255,.05);transition:border-color .3s,box-shadow .3s}
.newsletter input[type="email"]::placeholder{color:rgba(139,139,217,.55)}
.newsletter input[type="email"]:focus{border-color:rgba(255,30,60,.55);box-shadow:inset 0 2px 8px rgba(0,0,0,.65),0 0 22px rgba(255,30,60,.22)}
.newsletter-btn{padding:.85rem 1.5rem;border-radius:999px;border:none;cursor:pointer;background:var(--red);color:#fff;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 0 22px rgba(255,30,60,.3);transition:transform .25s,box-shadow .25s}
.newsletter-btn:hover{transform:translateY(-2px);box-shadow:0 0 34px rgba(255,30,60,.5)}
.newsletter-msg{margin-top:.8rem;font-size:.8rem;color:var(--teal);min-height:1.2em;font-style:italic}
.newsletter-msg.err{color:var(--red)}
@media (max-width:600px){.newsletter-row{flex-direction:column}.newsletter-btn{width:100%}}

/* Reveal system */
.reveal{opacity:0;transform:perspective(900px) translateY(34px) rotateX(9deg);transform-origin:50% 100%;transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.inview{opacity:1;transform:perspective(900px) translateY(0) rotateX(0)}

/* Responsive */
@media (max-width:820px){
  .ep-grid,.split{grid-template-columns:1fr}
  /* catalog: floating glass cards on mobile too — compact, so the whole
     card fits in view and the hover motion actually reads */
  .split{gap:20px;padding:0 5vw;min-height:0}
  .split-side{border-radius:18px;border:1px solid rgba(139,139,217,.16);animation:cardFloat 7s ease-in-out infinite;padding:3.6vh 5vw}
  .split-side .side-title{font-size:1.45rem}
  .split-side .side-sub{margin-bottom:1rem;font-size:.66rem}
  .split-side .track a{padding:.6rem .4rem;margin-bottom:.45rem}
  .split-side .tname{font-size:1.05rem}
  .split-side .ttag{font-size:.62rem;margin-top:.15rem}
  .side-core{border-right:none;box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 44px rgba(255,30,60,.09)}
  .side-breathe{box-shadow:0 24px 60px rgba(0,0,0,.45),0 0 44px rgba(63,191,174,.14);animation-delay:-3.5s}
  .live-row{grid-template-columns:5.4rem 1fr auto}
  .link-wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wall-link{min-width:0;overflow-wrap:anywhere}
  /* shorter hero scroll-through — the lyric fly-by zone reads as intent, not dead space */
  .hero{height:145vh}
  /* catalog kicker was clipping off the right edge */
  .catalog .kicker{font-size:.66rem;letter-spacing:.18em;padding:0 1.4rem}
  /* poet stage: bigger type, longer pin so the lines linger */
  .poet{height:185vh}
}
/* mobile: taller poet stage => the same lyric animation spreads over more
   scroll distance, so the sentences pass slowly enough to read */
@media (max-width:820px){
  .poet{height:300vh}
  .verse{font-size:clamp(1.15rem,5.2vw,1.6rem);line-height:1.55}
  .poet-verses{padding:0 4vw}
  /* STILL WRITING must clear the quote below it */
  .giant-word{margin-bottom:3.2rem}
  /* perf: backdrop-filter on many cards is the #1 scroll cost on mobile —
     swap for solid translucent fills, visually near-identical on phones */
  .track a,.live-row,.wall-link,.picon{backdrop-filter:none;-webkit-backdrop-filter:none}
  .track a{background:rgba(24,24,66,.55)}
  .side-breathe .track a{background:rgba(255,255,255,.5)}
  .live-row{background:rgba(18,18,58,.72)}
  .wall-link{background:rgba(18,18,58,.78)}
  .picon{background:rgba(18,18,58,.78)}
  /* perf: no site-breath rescaling of big blocks on mobile */
  .ep-copy,.live-list,.link-wall,.icon-row,.poet-verses{animation:none}
}
/* mobile catalog cards hover in place — pure compositor, no scroll cost */
@keyframes cardFloat{0%,100%{transform:translateY(0) rotate(-.35deg)}50%{transform:translateY(-7px) rotate(.35deg)}}
@media (prefers-reduced-motion:reduce){.split-side{animation:none!important}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- Futuristic layer ---------- */

main,header,section{position:relative;z-index:1}

/* Custom cursor ring */
.cursor{position:fixed;top:0;left:0;z-index:120;width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid rgba(244,241,234,.8);border-radius:50%;pointer-events:none;mix-blend-mode:difference;transition:width .25s,height .25s,margin .25s,border-color .25s,opacity .3s;opacity:0}
.cursor.on{opacity:1}
.cursor.hot{width:64px;height:64px;margin:-32px 0 0 -32px;border-color:var(--red);mix-blend-mode:normal;background:rgba(255,30,60,.08)}
.cursor::after{content:"";position:absolute;inset:0;margin:auto;width:4px;height:4px;border-radius:50%;background:currentColor;color:rgba(244,241,234,.9)}
@media (pointer:coarse){.cursor{display:none}}

/* Scroll progress beam — the page's only scroll indicator */
.beam{position:fixed;top:0;left:0;height:5px;width:0;z-index:110;background:linear-gradient(90deg,var(--teal),var(--violet),var(--red));box-shadow:0 0 14px rgba(255,30,60,.55),0 0 30px rgba(74,74,232,.35)}

@media (max-width:820px){.nav{padding:.7rem .9rem}.nav-logo{font-size:1.6rem}.nav-right{gap:.55rem}.nav-e{width:42px;height:42px}.nav-e span{font-size:1.35rem}.breathe-btn{padding:.45rem .8rem;font-size:.7rem}}

/* Spotify player dock — liquid glass, Spotlight-style */
.dock{position:fixed;right:1.2rem;bottom:1.2rem;z-index:115;width:min(380px,calc(100vw - 2.4rem));background:rgba(22,22,64,.22);border:1px solid rgba(255,255,255,.18);border-radius:22px;backdrop-filter:blur(30px) saturate(1.8);-webkit-backdrop-filter:blur(30px) saturate(1.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(255,255,255,.05),0 24px 70px rgba(0,0,0,.5),0 0 50px rgba(74,74,232,.2);transform:translateY(120%) scale(.95);opacity:0;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .5s;pointer-events:none;overflow:hidden}
.dock.open{transform:none;opacity:1;pointer-events:auto}
.dock-head{display:flex;align-items:center;gap:.6rem;padding:.65rem .9rem;border-bottom:1px solid rgba(139,139,217,.25)}
.dock-title{flex:1;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sand);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dock-ext{font-size:.9rem;opacity:.7;transition:opacity .2s}
.dock-ext:hover{opacity:1}
.dock-close{background:none;border:none;color:var(--ink);font-size:1.25rem;line-height:1;cursor:pointer;opacity:.7;transition:opacity .2s,transform .2s;padding:0 .2rem}
.dock-close:hover{opacity:1;transform:rotate(90deg)}
.dock-eq{display:flex;align-items:flex-end;gap:2px;height:12px}
.dock-eq b{width:3px;background:var(--teal);border-radius:2px;animation:eq 1s ease-in-out infinite}
.dock-eq b:nth-child(2){animation-delay:.25s;background:var(--violet)}
.dock-eq b:nth-child(3){animation-delay:.5s;background:var(--red)}
@keyframes eq{0%,100%{height:4px}50%{height:12px}}
.dock-frame{height:152px}
.dock-frame iframe{display:block;width:100%;height:152px;border:0}
@media (max-width:600px){.dock{right:.6rem;left:.6rem;bottom:.6rem;width:auto}}
@media (prefers-reduced-motion:reduce){.dock{transition:none}.dock-eq b{animation:none;height:8px}}

/* Desktop hero: full portrait, editorial frame — no face crop */
@media (min-width:821px){
  /* landscape header fills the wide viewport edge-to-edge — no fill/mask hack */
  .hero-fill{display:none}
  .hero-bg{inset:-9% -7%}
  .hero-bg img{object-fit:cover;object-position:50% 42%;transform:scale(1.0) translateY(-3%)}
  .hero-veil{background:linear-gradient(180deg,rgba(13,13,43,.12) 0%,rgba(13,13,43,0) 42%,rgba(13,13,43,.9) 92%)}
}

@media (min-width:821px){
  .split .split-side{padding-top:4.5vh}
  /* roomier track cards: taller rows, more breathing space, larger titles */
  .split .track a{padding:1.5rem 1.4rem;margin-bottom:1.1rem}
  .split .tname{font-size:1.5rem}
  .split .tname em{font-size:1.1rem}
  .split .ttag{font-size:.76rem;margin-top:.5rem}
  .split .tno{font-size:.9rem}
}


/* ---------- V2 cinematic layer: glass, neon ---------- */

/* Flying lyric field — her writing drifts past the camera; back layer sits
   behind the page, front layer sails over the hero portrait */
#lyricfield{position:fixed;inset:0;z-index:0;pointer-events:none;perspective:900px;perspective-origin:50% 46%;opacity:0}
#lyricfront{position:fixed;inset:0;z-index:4;pointer-events:none;perspective:900px;perspective-origin:50% 46%;opacity:0}
.lyric{position:absolute;top:50%;left:50%;white-space:nowrap;font-family:var(--serif);font-style:italic;color:var(--sand);opacity:0;will-change:transform,opacity,filter;text-shadow:0 0 26px rgba(74,74,232,.5),0 2px 18px rgba(0,0,0,.6)}
.lyric-red{color:var(--red);text-shadow:0 0 30px rgba(255,30,60,.55),0 2px 18px rgba(0,0,0,.6)}

/* neon gradient display type */
.side-title,.section-title{background:linear-gradient(100deg,var(--teal) 0%,#8b8bff 45%,var(--red) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.side-breathe .side-title{background:linear-gradient(100deg,#177566,#3fbfae 60%,#0e4f45);-webkit-background-clip:text;background-clip:text}

/* glass track cards */
.track a{border:1px solid rgba(139,139,217,.16);border-radius:12px;margin-bottom:.7rem;background:rgba(244,241,234,.03);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:padding-left .3s,background .3s,border-color .3s,box-shadow .3s,transform .3s}
.track a:hover{border-color:rgba(255,30,60,.55);box-shadow:0 0 24px rgba(255,30,60,.22),inset 0 0 18px rgba(255,30,60,.06);transform:translateY(-2px)}
.side-breathe .track a{background:rgba(255,255,255,.35);border-color:rgba(23,117,102,.2)}
.side-breathe .track a:hover{border-color:rgba(23,117,102,.6);box-shadow:0 0 24px rgba(23,117,102,.25)}

/* glass live rows */
.live-row{border:1px solid rgba(139,139,217,.18);border-radius:14px;margin-bottom:1rem;padding:1.5rem 1.4rem;background:rgba(18,18,58,.42);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:border-color .3s,box-shadow .3s,transform .3s}
.live-row:hover{border-color:rgba(63,191,174,.55);box-shadow:0 0 30px rgba(63,191,174,.2);transform:translateY(-2px)}

/* wall links become glowing glass metric cards with 3D tilt */
.link-wall{gap:14px;background:none;border:none}
.wall-link{border:1px solid rgba(139,139,217,.22);border-radius:16px;background:rgba(18,18,58,.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transform-style:preserve-3d;transition:border-color .35s,box-shadow .35s,background .35s}
.wall-link:hover{background:rgba(26,26,77,.7);border-color:rgba(255,30,60,.5);box-shadow:0 0 34px rgba(255,30,60,.25),0 0 80px rgba(74,74,232,.18)}

/* glow CTAs */
.btn-red{box-shadow:0 0 24px rgba(255,30,60,.35)}
.btn-red:hover{box-shadow:0 0 40px rgba(255,30,60,.6),0 12px 30px rgba(255,30,60,.4)}
.breathe-btn:hover{box-shadow:0 0 24px rgba(63,191,174,.35)}

/* Platform icon row — animated brand glyphs, headline row above the wall */
.icon-row{display:flex;justify-content:center;flex-wrap:wrap;gap:1.4rem;margin:0 auto 3.4rem;max-width:900px}
/* desktop: all 11 platform circles on a single row — no wrap, fluid size.
   .icon-row .picon outranks the base .picon rule regardless of order. */
@media (min-width:821px){
  .icon-row{flex-wrap:nowrap;gap:clamp(.55rem,1.1vw,1rem);max-width:none}
  .icon-row .picon{width:clamp(46px,4.9vw,64px);height:clamp(46px,4.9vw,64px);flex:0 0 auto}
  .icon-row .picon svg{width:clamp(22px,2.3vw,30px);height:clamp(22px,2.3vw,30px)}
}
.picon{position:relative;display:flex;align-items:center;justify-content:center;width:78px;height:78px;border-radius:50%;border:1px solid rgba(139,139,217,.3);background:rgba(18,18,58,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--ink);transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s,color .35s,background .35s}
.picon svg{width:36px;height:36px;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.picon span{position:absolute;top:calc(100% + .55rem);left:50%;transform:translate(-50%,6px);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;color:var(--sand)}
.picon:hover{color:var(--pc);border-color:var(--pc);background:rgba(18,18,58,.8);transform:translateY(-6px) scale(1.08);box-shadow:0 0 26px color-mix(in srgb,var(--pc) 55%,transparent),0 10px 30px rgba(0,0,0,.4)}
.picon:hover svg{transform:scale(1.15) rotate(-6deg)}
.picon:hover span{opacity:1;transform:translate(-50%,0)}
@media (max-width:600px){.picon{width:60px;height:60px}.picon svg{width:27px;height:27px}}
@media (prefers-reduced-motion:reduce){.picon,.picon svg,.picon span{transition:none}}

/* ---------- V2.1 cinematic pass: electricity, breath, seamless blend ---------- */

/* red electricity flash layer */
#zap{position:fixed;inset:0;z-index:3;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}

/* the whole site breathes — slow inhale/exhale on content blocks */
@keyframes siteBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.014)}}
.ep-copy,.live-list,.link-wall,.icon-row,.poet-verses{animation:siteBreath 9s ease-in-out infinite;transform-origin:50% 60%}
@keyframes veilBreath{0%,100%{opacity:.9}50%{opacity:1}}
.hero-veil{animation:veilBreath 9s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.ep-copy,.live-list,.link-wall,.icon-row,.poet-verses,.hero-veil{animation:none}}

/* On Stage — bigger cinematic blocks */
.live-row{grid-template-columns:9.5rem 1fr auto;padding:2.6rem 2.2rem;margin-bottom:1.3rem;border-radius:18px;background:rgba(18,18,58,.5)}
.live-row .ld{font-size:1.05rem;letter-spacing:.14em}
.live-row .ln{font-size:clamp(1.4rem,2.6vw,2rem)}
.live-row .lv{font-size:.95rem;margin-top:.3rem}
.live-row .lp{font-size:.85rem;padding:.6rem 1.3rem}
.live-row:not(.past){border-color:rgba(255,30,60,.35);box-shadow:0 0 34px rgba(255,30,60,.1),inset 0 0 30px rgba(255,30,60,.04)}
.section-title{margin-bottom:1.8rem}

/* mobile cinema crop */
@media (max-width:820px){
  /* narrower date column + smaller type so the event name isn't squeezed into
     a word-per-line stack */
  .live-row{grid-template-columns:4.8rem 1fr auto;padding:1.6rem 1.1rem;gap:.7rem}
  .live-row .ln{font-size:1.06rem;line-height:1.25}
  .live-row .ld{font-size:.78rem}
  .live-row .lv{font-size:.75rem;line-height:1.3}
  .live-row .lp{font-size:.72rem;padding:.5rem .9rem}
}

/* ---------- Contact modal — glass bubble ---------- */
.connect-cta{display:flex;flex-direction:column;align-items:center;gap:.7rem;margin-bottom:2.4rem}
/* pronounced red-glass CTA — same look on mobile */
.btn-work{cursor:pointer;font-family:inherit;font-size:.92rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;padding:1.15rem 2.8rem;border-radius:999px;border:1px solid rgba(255,95,115,.55);background:linear-gradient(180deg,rgba(255,54,84,.44),rgba(198,20,46,.34));backdrop-filter:blur(9px) saturate(1.5);-webkit-backdrop-filter:blur(9px) saturate(1.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -7px 18px rgba(255,30,60,.28),0 0 34px rgba(255,30,60,.42),0 12px 36px rgba(0,0,0,.38);animation:workPulse 3.2s ease-in-out infinite;transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s,background .28s}
.btn-work:hover{transform:translateY(-3px) scale(1.05);background:linear-gradient(180deg,rgba(255,66,96,.58),rgba(210,26,52,.46));box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 52px rgba(255,30,60,.65),0 16px 44px rgba(0,0,0,.42)}
@keyframes workPulse{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -7px 18px rgba(255,30,60,.28),0 0 30px rgba(255,30,60,.38),0 12px 36px rgba(0,0,0,.38)}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -7px 18px rgba(255,30,60,.28),0 0 46px rgba(255,30,60,.6),0 12px 36px rgba(0,0,0,.38)}}
@media (prefers-reduced-motion:reduce){.btn-work{animation:none}}

.contact-overlay{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;padding:5vh 5vw;background:rgba(8,8,24,.55);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .5s,visibility .5s}
.contact-overlay.open{opacity:1;visibility:visible;pointer-events:auto}
.contact-card{position:relative;width:min(680px,100%);max-height:90vh;overflow-y:auto;padding:clamp(1.8rem,4vw,3.2rem);text-align:left;border-radius:34px;background:radial-gradient(150% 120% at 20% 0%,rgba(74,74,232,.28),rgba(18,18,58,.75) 55%,rgba(13,13,43,.9));border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 40px 120px rgba(0,0,0,.6),0 0 90px rgba(74,74,232,.35);transform:translateY(34px) scale(.94);opacity:0;transition:transform .55s cubic-bezier(.2,.8,.2,1.05),opacity .5s}
.contact-overlay.open .contact-card{transform:none;opacity:1}
.contact-close{position:absolute;top:1.1rem;right:1.3rem;background:none;border:none;color:var(--ink);font-size:1.8rem;line-height:1;cursor:pointer;opacity:.6;transition:opacity .25s,transform .3s}
.contact-close:hover{opacity:1;transform:rotate(90deg)}
.contact-title{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(2.2rem,5vw,3.4rem);line-height:1;margin:.4rem 0 1rem}
.contact-lead{color:var(--muted);line-height:1.6;margin-bottom:2rem;max-width:46ch}
.contact-form{display:flex;flex-direction:column;gap:1.1rem}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.cf-field{display:flex;flex-direction:column;gap:.4rem}
.cf-field span{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sand);opacity:.8}
.cf-field input,.cf-field select,.cf-field textarea{width:100%;font-family:inherit;font-size:1rem;color:var(--ink);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:.85rem 1rem;transition:border-color .25s,background .25s,box-shadow .25s;-webkit-appearance:none;appearance:none}
.cf-field textarea{resize:vertical;min-height:96px}
.cf-field select{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23bcbce6' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center}
.cf-field select option{background:#141438;color:var(--ink)}
.cf-field input:focus,.cf-field select:focus,.cf-field textarea:focus{outline:none;border-color:rgba(255,30,60,.6);background:rgba(255,255,255,.1);box-shadow:0 0 0 3px rgba(255,30,60,.12)}
.cf-field input::placeholder,.cf-field textarea::placeholder{color:rgba(244,241,234,.35)}
.cf-submit{margin-top:.4rem;align-self:flex-start;padding:.95rem 2.2rem;border:none;border-radius:999px;background:var(--red);color:#fff;font-family:inherit;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;box-shadow:0 0 26px rgba(255,30,60,.4);transition:transform .25s,box-shadow .25s}
.cf-submit:hover{transform:translateY(-3px);box-shadow:0 0 42px rgba(255,30,60,.65)}
.cf-msg{font-size:.85rem;color:var(--sand);min-height:1.2em}
.cf-msg.err{color:#ff7088}
.contact-sent .contact-form{display:none}
.contact-thanks{display:none;font-family:var(--serif);font-style:italic;font-size:1.4rem;line-height:1.5;color:var(--sand)}
.contact-sent .contact-thanks{display:block}
@media (max-width:600px){.cf-row{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.contact-overlay,.contact-card,.contact-close{transition:none}}

/* ---------- Contact modal: smoke-materialize ---------- */
.smoke-defs{position:absolute;width:0;height:0;overflow:hidden}
.contact-card{position:relative;z-index:1}
/* while forming, the card is displaced by turbulent noise (driven from JS) */
.contact-card.smoking{filter:url(#smokeFilter);transition:none}

/* rising smoke wisps behind the card, only during the open animation */
.smoke-layer{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:0}
.smoke-layer.run{opacity:1}
.smoke-layer i{position:absolute;bottom:14%;width:clamp(180px,28vw,360px);height:clamp(180px,28vw,360px);border-radius:50%;filter:blur(30px);opacity:0;will-change:transform,opacity;background:radial-gradient(circle at 50% 55%,rgba(150,150,230,.55),rgba(120,90,205,.22) 42%,transparent 70%)}
.smoke-layer.run i{animation:smokeRise 1.7s cubic-bezier(.3,.5,.4,1) forwards}
.smoke-layer i:nth-child(1){left:42%}
.smoke-layer i:nth-child(2){left:30%;animation-delay:.08s;background:radial-gradient(circle at 50% 55%,rgba(255,120,150,.4),rgba(200,70,110,.16) 45%,transparent 70%)}
.smoke-layer i:nth-child(3){left:54%;animation-delay:.05s}
.smoke-layer i:nth-child(4){left:22%;animation-delay:.16s;width:clamp(140px,22vw,280px)}
.smoke-layer i:nth-child(5){left:64%;animation-delay:.12s;width:clamp(150px,24vw,300px);background:radial-gradient(circle at 50% 55%,rgba(120,200,190,.4),rgba(70,150,140,.16) 45%,transparent 70%)}
.smoke-layer i:nth-child(6){left:46%;animation-delay:.22s}
@keyframes smokeRise{
  0%{opacity:0;transform:translateY(80px) scale(.45)}
  22%{opacity:.75}
  100%{opacity:0;transform:translateY(-180px) scale(1.9)}
}
@media (max-width:820px){.smoke-layer{display:none}}
@media (prefers-reduced-motion:reduce){.smoke-layer{display:none}.contact-card.smoking{filter:none}}


/* menu smoke-materialize (shares the #smokeFilter) */
.e-menu.smoking{filter:url(#smokeFilter);transition:none}