/* ===== THEME: only 2 colors. Change these two lines to re-theme the whole site ===== */
:root{--ink:#000000;--glow:#ffffff;
--line:color-mix(in srgb,var(--glow) 25%,transparent);--soft:color-mix(in srgb,var(--glow) 8%,var(--ink));--mute:color-mix(in srgb,var(--glow) 70%,var(--ink))}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--glow);font-family:'Manrope',sans-serif;line-height:1.7;overflow-x:hidden}
h1,h2,h3,.logo{font-family:'Unbounded',sans-serif;line-height:1.1;font-weight:700}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--glow);outline-offset:3px}
.wrap{max-width:1100px;margin:auto;padding:0 24px}
section{padding:96px 0}
h2{font-size:clamp(1.8rem,4vw,3rem);margin-bottom:16px}
p.lead{color:var(--mute);max-width:60ch}
/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:50;backdrop-filter:blur(14px);background:color-mix(in srgb,var(--ink) 80%,transparent);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;justify-content:space-between;align-items:center;height:68px}
.logo{font-size:1.1rem}
nav ul{display:flex;gap:28px;list-style:none;font-weight:600;font-size:.95rem}
nav ul a:hover,nav ul a.on{text-decoration:underline;text-underline-offset:6px}
.burger{display:none;background:none;border:1px solid var(--line);color:var(--glow);padding:6px 12px;border-radius:8px;font:inherit;cursor:pointer}
.btn{display:inline-block;padding:14px 28px;border-radius:999px;font-weight:700;border:2px solid var(--glow);transition:.25s;cursor:pointer;font-family:inherit;font-size:1rem}
.btn.fill{background:var(--glow);color:var(--ink)}
.btn:hover{transform:translateY(-3px) rotateX(12deg);box-shadow:0 10px 0 var(--line)}
/* hero + 3D ring */
.hero{min-height:100vh;display:grid;align-items:center;padding-top:100px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(2.4rem,6vw,4.6rem);margin-bottom:20px}
.hero .btns{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
.stage{perspective:1100px;height:420px;display:grid;place-items:center}
.ring{position:relative;width:200px;height:290px;transform-style:preserve-3d;animation:spin 24s linear infinite;transition:transform .3s}
.stage:hover .ring{animation-play-state:paused}
.frame{position:absolute;inset:0;border:2px solid var(--glow);border-radius:18px;display:flex;align-items:flex-end;padding:18px;font-family:'Unbounded';font-weight:700;background:linear-gradient(160deg,var(--soft),var(--ink));backface-visibility:visible;background-size:cover;background-position:center;text-shadow:0 2px 12px #000;box-shadow:inset 0 0 40px var(--line)}
.frame::before{content:"";position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:2px solid var(--glow);box-shadow:0 0 0 6px var(--line)}
.frame:nth-child(1){transform:rotateY(0) translateZ(300px)}
.frame:nth-child(2){transform:rotateY(72deg) translateZ(300px)}
.frame:nth-child(3){transform:rotateY(144deg) translateZ(300px)}
.frame:nth-child(4){transform:rotateY(216deg) translateZ(300px)}
.frame:nth-child(5){transform:rotateY(288deg) translateZ(300px)}
@keyframes spin{to{transform:rotateY(360deg)}}
/* tilt cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;margin-top:40px;perspective:1000px}
.card{border:1px solid var(--line);border-radius:20px;padding:28px;background:var(--soft);transform-style:preserve-3d;transition:transform .15s,border-color .3s;will-change:transform}
.card:hover{border-color:var(--glow)}
.card h3{font-size:1.15rem;margin:60px 0 10px;transform:translateZ(30px)}
.card p{color:var(--mute);font-size:.95rem;transform:translateZ(15px)}
.thumb{height:150px;border-radius:12px;margin:-4px 0 18px;background:repeating-linear-gradient(45deg,var(--line) 0 2px,transparent 2px 14px),var(--ink);display:grid;place-items:center;font-size:.8rem;color:var(--mute)}
.card .thumb+h3{margin-top:0}
.tag{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:2px 12px;font-size:.8rem;margin-bottom:10px}
/* about */
.about{background:var(--soft);border-block:1px solid var(--line)}
.about .wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:50px;align-items:center}
.portrait{aspect-ratio:4/5;border-radius:24px;border:2px solid var(--glow);display:grid;place-items:center;color:var(--mute);text-align:center;padding:20px;transform:rotate(-3deg);transition:.4s;background:var(--ink)}
.portrait:hover{transform:rotate(0) scale(1.03)}
.portrait img{width:100%;height:100%;object-fit:cover;border-radius:22px}
/* contact */
form{display:grid;gap:14px;max-width:560px;margin-top:30px}
input,textarea{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:14px;color:var(--glow);font:inherit}
input::placeholder,textarea::placeholder{color:var(--mute)}
footer{border-top:1px solid var(--line);padding:30px 0;text-align:center;color:var(--mute);font-size:.9rem}
.pagehead{padding:150px 0 40px}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.filters button{background:none;border:1px solid var(--line);color:var(--glow);padding:8px 18px;border-radius:999px;font:inherit;cursor:pointer}
.filters button.on,.filters button:hover{background:var(--glow);color:var(--ink)}
@media(max-width:820px){
.hero .wrap,.about .wrap{grid-template-columns:1fr}
.stage{height:340px;transform:scale(.65)}
.burger{display:block}
nav ul{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;background:var(--ink);padding:20px 24px;border-bottom:1px solid var(--line)}
nav ul.open{display:flex}}
@media(prefers-reduced-motion:reduce){.ring{animation:none}*{transition:none!important}}


/* ===== GLOW EFFECTS ===== */
:root{--g1:color-mix(in srgb,var(--glow) 55%,transparent);--g2:color-mix(in srgb,var(--glow) 18%,transparent)}
h1,h2{text-shadow:0 0 24px var(--g1),0 0 60px var(--g2)}
.logo{text-shadow:0 0 14px var(--g1)}
.hero::before{content:"";position:absolute;width:700px;height:700px;right:-120px;top:50%;translate:0 -50%;background:radial-gradient(circle,var(--g2),transparent 65%);pointer-events:none;animation:pulse 5s ease-in-out infinite}
.hero{position:relative}
@keyframes pulse{50%{opacity:.45;scale:1.12}}
.frame{box-shadow:inset 0 0 40px var(--line),0 0 28px var(--g2);animation:edge 4s ease-in-out infinite}
@keyframes edge{50%{box-shadow:inset 0 0 40px var(--line),0 0 50px var(--g1)}}
.btn.fill{box-shadow:0 0 22px var(--g1)}
.btn:hover{box-shadow:0 10px 0 var(--line),0 0 36px var(--g1)}
.card:hover{box-shadow:0 0 34px var(--g2),inset 0 0 24px var(--g2)}
.portrait{box-shadow:0 0 40px var(--g2)}
input:focus,textarea:focus{outline:none;border-color:var(--glow);box-shadow:0 0 18px var(--g1)}
.filters button.on,.filters button:hover{box-shadow:0 0 18px var(--g1)}
nav{box-shadow:0 1px 24px var(--g2)}
.cursor-glow{position:fixed;width:380px;height:380px;border-radius:50%;pointer-events:none;z-index:1;translate:-50% -50%;background:radial-gradient(circle,var(--g2),transparent 65%);transition:opacity .3s;opacity:0}
@media(prefers-reduced-motion:reduce){.hero::before,.frame{animation:none}}
@media(hover:none){.cursor-glow{display:none}}
/* keep the ring clear of the hero text */
@media(min-width:821px){.stage{transform:translateX(50px) scale(.92)}}
.logo{display:flex;align-items:center;gap:10px}.lm{width:34px;height:34px;border-radius:50%}

/* reel cards */
.reels{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin:30px 0 34px;perspective:1000px}
.reelcard{display:block;padding:0;overflow:hidden;border-radius:14px;background:var(--glow);color:var(--ink)}
.rthumb{position:relative;aspect-ratio:4/5;background-image:var(--t),repeating-linear-gradient(45deg,var(--line) 0 2px,transparent 2px 14px);background-color:var(--ink);background-size:cover;background-position:center}
.rthumb::after{content:"";position:absolute;inset:0;background:linear-gradient(color-mix(in srgb,var(--ink) 15%,transparent),color-mix(in srgb,var(--ink) 45%,transparent))}
.play{position:absolute;top:42%;left:50%;width:84px;height:84px;translate:-50% -50%;z-index:2;filter:drop-shadow(0 0 18px var(--g1));transition:.25s}
.play::before{content:"";position:absolute;left:22px;top:6px;border-left:56px solid var(--glow);border-top:36px solid transparent;border-bottom:36px solid transparent;border-radius:6px}
.reelcard:hover .play{scale:1.15}
.rl{position:absolute;left:0;right:0;top:calc(42% + 52px);text-align:center;z-index:2;font-weight:700;color:var(--glow);text-shadow:0 2px 10px var(--ink)}
.rbar{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;font-weight:700;border-top:1px solid var(--line)}

/* hero cards with photos (front and back both readable) */
.frame{display:block;padding:0;background:none;transform-style:preserve-3d}
.frame::before{display:none}
.face{position:absolute;inset:0;border-radius:16px;background-color:var(--ink);backface-visibility:hidden;display:flex;align-items:flex-end;padding:18px;font-family:'Unbounded',sans-serif;font-weight:700;color:var(--glow)}
.face.back{transform:rotateY(180deg)}
.face::before{content:"";position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;border:2px solid var(--glow);box-shadow:0 0 0 6px var(--line)}
.card .thumb{height:190px}