/* isaackataryeba.com — public site. Cinematic dark by default, light via the
   toggle. The dashboard keeps its own stylesheet (style.css). */

@font-face{ font-family:'Grift'; src:url('../fonts/grift-regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Grift'; src:url('../fonts/grift-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face{ font-family:'Grift'; src:url('../fonts/grift-medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Grift'; src:url('../fonts/grift-semibold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:'Grift'; src:url('../fonts/grift-bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Grift'; src:url('../fonts/grift-extrabold.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap; }
@font-face{ font-family:'Grift'; src:url('../fonts/grift-black.woff2') format('woff2'); font-weight:900; font-style:normal; font-display:swap; }

/* ---------- tokens ---------- */
:root{
  --bg:#08080a; --bg-2:#101013; --card:#151518;
  --ink:#f3f0ea; --ink-2:#aeaba6; --ink-3:#6f6d6a;
  --line:rgba(243,240,234,.12); --line-2:rgba(243,240,234,.22);
  --violet:#a255df; --pink:#f93e8f; --teal:#6aaab8; --amber:#ffb86b;
  --grad:linear-gradient(115deg,var(--violet),var(--pink) 55%,var(--amber));
  --grad-cool:linear-gradient(135deg,#a255df,#f93e8f,#6aaab8);
  --ambient-opacity:.34; --grain-opacity:.075; --shadow:0 50px 120px -30px rgba(0,0,0,.8);
  --pad:clamp(16px,3.2vw,48px); --top:76px;
  --ease:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.76,0,.24,1);
  --font:'Grift','Segoe UI',system-ui,-apple-system,sans-serif;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f2efe9; --bg-2:#e9e5dd; --card:#ffffff;
  --ink:#0d0d0f; --ink-2:#4d4b48; --ink-3:#8b8883;
  --line:rgba(13,13,15,.12); --line-2:rgba(13,13,15,.24);
  --ambient-opacity:.3; --grain-opacity:.05; --shadow:0 50px 120px -40px rgba(40,20,60,.45);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-home{height:100vh; height:100dvh; overflow:hidden}
a{color:inherit; text-decoration:none}
img,video{display:block; max-width:100%}
button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer}
h1,h2,h3{margin:0; font-weight:800; line-height:1.05; letter-spacing:-.02em}
::selection{background:var(--pink); color:#fff}
[hidden]{display:none !important}
.muted{color:var(--ink-3)}
.eyebrow{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-3); margin-bottom:18px}
.i-arrow{width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none}
:focus-visible{outline:2px solid var(--pink); outline-offset:3px; border-radius:6px}

/* ---------- ambient light + grain ---------- */
.ambient{position:fixed; inset:0; z-index:-1; overflow:hidden; background:var(--bg); pointer-events:none}
.ambient canvas{
  position:absolute; left:62%; top:50%; width:110vmax; height:110vmax; transform:translate(-50%,-50%);
  filter:blur(70px) saturate(1.25); opacity:0; transition:opacity 1.4s var(--ease);
}
body.has-ambient .ambient canvas{opacity:var(--ambient-opacity)}
body:not(.is-home) .ambient canvas{opacity:calc(var(--ambient-opacity) * .45)}
.ambient-mesh{position:absolute; inset:0; opacity:.38; transition:opacity 1.4s}
body.has-ambient .ambient-mesh{opacity:.12}
.ambient-mesh i{position:absolute; width:55vmax; height:55vmax; border-radius:50%; filter:blur(90px); opacity:.45; will-change:transform}
.ambient-mesh i:nth-child(1){background:var(--violet); left:-12vmax; top:-18vmax; animation:drift1 22s ease-in-out infinite alternate}
.ambient-mesh i:nth-child(2){background:var(--pink); right:-16vmax; top:20vh; animation:drift2 26s ease-in-out infinite alternate}
.ambient-mesh i:nth-child(3){background:var(--teal); left:25vw; bottom:-30vmax; animation:drift3 30s ease-in-out infinite alternate; opacity:.3}
:root[data-theme="light"] .ambient-mesh i{opacity:.28}
@keyframes drift1{to{transform:translate(18vw,14vh) scale(1.15)}}
@keyframes drift2{to{transform:translate(-22vw,-10vh) scale(.9)}}
@keyframes drift3{to{transform:translate(-10vw,-18vh) scale(1.2)}}
/* Keep the light pooled around the story card; the name side stays dark enough to read. */
.ambient::after{content:""; position:absolute; inset:0; background:
  radial-gradient(70% 85% at 64% 48%, transparent 15%, var(--bg) 78%),
  linear-gradient(90deg, color-mix(in srgb, var(--bg) 55%, transparent), transparent 55%)}

.grain{
  position:fixed; inset:-50%; z-index:70; pointer-events:none; opacity:var(--grain-opacity);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .9s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)}
}

/* ---------- intro (first visit per session, home only) ---------- */
.intro{display:none}
html.intro-run .intro{
  display:flex; position:fixed; inset:0; z-index:95; background:#060607; color:#f3f0ea;
  flex-direction:column; justify-content:center; padding:var(--pad);
  clip-path:inset(0 0 0 0); transition:clip-path 1.05s var(--ease-io);
}
html.intro-run .intro.done{clip-path:inset(0 0 100% 0)}
.intro-name{display:flex; flex-direction:column; font-weight:900; text-transform:uppercase; font-size:clamp(52px,11vw,200px); line-height:.84; letter-spacing:-.045em}
.intro-name > span{overflow:hidden; display:block}
.intro-name > span:last-child{color:transparent; -webkit-text-stroke:1.5px #f3f0ea}
.intro-name .ch{display:inline-block; transform:translateY(105%); animation:introUp 1s var(--ease) forwards; animation-delay:calc(var(--i) * 40ms + 100ms)}
@keyframes introUp{to{transform:none}}
.intro-foot{position:absolute; left:var(--pad); right:var(--pad); bottom:var(--pad); display:flex; justify-content:space-between; align-items:flex-end; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:#8b8883}
.intro-count{font-size:clamp(48px,8vw,120px); font-weight:900; color:#f3f0ea; letter-spacing:-.04em; line-height:.8; font-variant-numeric:tabular-nums}
.intro-count::after{content:"%"; font-size:.35em; vertical-align:top; margin-left:4px; color:var(--pink)}

/* ---------- page wipe ---------- */
.wipe{position:fixed; inset:0; z-index:85; pointer-events:none; transform:scaleY(0); transform-origin:50% 100%; background:var(--grad)}
.wipe span{position:absolute; inset:0; background:var(--bg); transform:scaleY(0); transform-origin:50% 100%}
.wipe.in{transform:scaleY(1); transition:transform .55s var(--ease-io)}
.wipe.in span{transform:scaleY(1); transition:transform .55s var(--ease-io) .08s}
.wipe.out{transform:scaleY(0); transform-origin:50% 0; transition:transform .6s var(--ease-io) .08s}
.wipe.out span{transform:scaleY(0); transform-origin:50% 0; transition:transform .6s var(--ease-io)}

/* ---------- top bar ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:50; height:var(--top);
  display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 var(--pad);
  transition:background .4s, backdrop-filter .4s;
}
body:not(.is-home) .topbar.scrolled{background:color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-bottom:1px solid var(--line)}
.brand{display:flex; align-items:center; gap:12px}
.brand img{width:26px; height:26px; object-fit:contain; filter:invert(1); transition:transform .8s var(--ease)}
:root[data-theme="light"] .brand img{filter:none}
.brand:hover img{transform:rotate(-360deg)}
.brand-name{font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.14em}
.topnav{display:flex; gap:clamp(18px,2.4vw,40px)}
.topnav a{position:relative; display:inline-flex; align-items:flex-start; gap:4px; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.1em; overflow:hidden; height:1.35em; line-height:1.35}
.topnav sup{font-size:9px; color:var(--pink); line-height:1; margin-top:1px}
.topnav a::after{content:""; position:absolute; left:50%; bottom:0; width:4px; height:4px; border-radius:50%; background:var(--pink); transform:translate(-50%,6px) scale(0); transition:transform .4s var(--ease)}
.topnav a.active::after{transform:translate(-50%,0) scale(1)}
.topnav a.active{padding-bottom:0}
.topbar-right{display:flex; gap:10px; align-items:center}
.icon-btn{width:42px; height:42px; border-radius:50%; border:1px solid var(--line-2); display:grid; place-items:center; transition:border-color .3s, transform .3s var(--ease)}
.icon-btn:hover{border-color:var(--ink)}
.icon-btn svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; transition:transform .8s var(--ease)}
.icon-btn svg .fill{fill:currentColor; stroke:none}
#theme-toggle:hover svg{transform:rotate(180deg)}
.menu-btn{display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px}
.menu-btn span{display:block; width:16px; height:1.5px; background:currentColor; transition:transform .4s var(--ease)}
body.menu-open .menu-btn span:first-child{transform:translateY(3.25px) rotate(45deg)}
body.menu-open .menu-btn span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

/* Rolling text: the label slides up and an identical copy (text-shadow) rolls in under it. */
.roll{display:inline-block; text-shadow:0 1.35em 0 var(--pink); transition:transform .5s var(--ease)}
a:hover .roll, .roll-host:hover .roll{transform:translateY(-1.35em)}

/* ---------- mobile menu sheet ---------- */
.menu-sheet{
  position:fixed; inset:0; z-index:48; background:var(--bg); display:flex; flex-direction:column; justify-content:space-between;
  padding:calc(var(--top) + 24px) var(--pad) 32px; clip-path:circle(0 at calc(100% - 40px) 38px); transition:clip-path .8s var(--ease-io); visibility:hidden;
}
body.menu-open .menu-sheet{clip-path:circle(150% at calc(100% - 40px) 38px); visibility:visible}
.menu-sheet nav{display:flex; flex-direction:column}
.menu-sheet nav a{display:flex; align-items:flex-start; gap:10px; font-size:clamp(40px,12vw,72px); font-weight:900; text-transform:uppercase; letter-spacing:-.03em; line-height:1.02; opacity:0; transform:translateY(30px); transition:opacity .5s, transform .7s var(--ease)}
.menu-sheet nav a sup{font-size:12px; color:var(--pink); letter-spacing:0; margin-top:10px; font-weight:600}
body.menu-open .menu-sheet nav a{opacity:1; transform:none}
body.menu-open .menu-sheet nav a:nth-child(2){transition-delay:.05s} body.menu-open .menu-sheet nav a:nth-child(3){transition-delay:.1s}
body.menu-open .menu-sheet nav a:nth-child(4){transition-delay:.15s} body.menu-open .menu-sheet nav a:nth-child(5){transition-delay:.2s}
body.menu-open .menu-sheet nav a:nth-child(6){transition-delay:.25s}
.menu-sheet nav a.active{color:transparent; -webkit-text-stroke:1.5px var(--ink)}
.menu-foot{display:flex; flex-direction:column; gap:8px; font-size:14px; color:var(--ink-2)}
.menu-foot div{display:flex; gap:18px}

/* ---------- sections ---------- */
.section{display:none}
.section.active{display:block}
html:not(.js) .section{display:block}

/* rise-in reveal */
[data-rise]{opacity:0; transform:translateY(32px); transition:opacity .9s var(--ease), transform 1.2s var(--ease); transition-delay:calc(var(--d, 0) * 70ms)}
[data-rise].in{opacity:1; transform:none}
html:not(.js) [data-rise]{opacity:1; transform:none}

/* split headings: each character rises out of a mask */
.split .w{display:inline-block; white-space:nowrap}
.split .ch{display:inline-block; transform:translateY(108%) rotate(6deg); transform-origin:0 100%; transition:transform 1.15s var(--ease); transition-delay:calc(var(--i) * 28ms + var(--d0, 0ms))}
.split.in .ch{transform:none}
.outline, .outline .ch{color:transparent; -webkit-text-stroke:max(1px,.014em) var(--ink)}

/* ============================ HOME ============================ */
.home{
  position:relative; height:100vh; height:100dvh; padding:calc(var(--top) + 8px) var(--pad) 76px;
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(210px,260px); align-items:center; column-gap:clamp(24px,4.6vw,88px);
}
.home-copy{position:relative; z-index:1; align-self:end; padding-bottom:clamp(8px,4vh,48px); min-width:0}
.kicker{display:flex; align-items:center; gap:10px; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-2); margin:0 0 clamp(14px,2.4vh,28px)}
.live-dot{width:8px; height:8px; border-radius:50%; background:#2bd576; box-shadow:0 0 0 0 rgba(43,213,118,.6); animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(43,213,118,0)} 100%{box-shadow:0 0 0 0 rgba(43,213,118,0)}}
#clock{font-variant-numeric:tabular-nums}

.mega{font-weight:900; text-transform:uppercase; font-size:clamp(56px, min(9.4vw, 19vh), 196px); line-height:.84; letter-spacing:-.05em; margin:0 0 clamp(14px,2.6vh,30px); white-space:nowrap}
/* Clip only top/bottom (the rise-in mask) so the long surname can run behind the story card. */
.mega-line{display:block; clip-path:inset(0 -100vw 0 -.2em); padding:.02em 0 .05em; margin-bottom:-.05em}
.mega-outline .ch{color:transparent; -webkit-text-stroke:max(1.2px,.012em) var(--ink); transition:transform 1.15s var(--ease), color .5s var(--ease), -webkit-text-stroke-color .5s; transition-delay:calc(var(--i) * 28ms + var(--d0, 0ms)), calc(var(--i) * 45ms), calc(var(--i) * 45ms)}
.mega:hover .mega-outline .ch{color:var(--c, var(--pink)); -webkit-text-stroke-color:var(--c, var(--pink))}
.mega-line:first-child .ch{--d0:120ms}
.mega-outline .ch{--d0:260ms}

.role-line{display:flex; align-items:baseline; gap:.4em; flex-wrap:nowrap; font-size:clamp(18px,1.9vw,30px); font-weight:500; margin:0 0 clamp(18px,3.2vh,36px); color:var(--ink-2)}
.role-roll{position:relative; display:inline-grid; height:1.25em; line-height:1.25em; overflow:hidden; font-weight:800; color:var(--ink)}
.role-word{grid-area:1/1; white-space:nowrap; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; transform:translateY(110%); transition:transform .8s var(--ease)}
.role-word.on{transform:none}
.role-word.off{transform:translateY(-110%)}

.home-ctas{display:flex; gap:12px; flex-wrap:wrap}
.pill{position:relative; display:inline-flex; align-items:center; gap:10px; height:52px; padding:0 26px; border-radius:99px; font-size:14px; font-weight:700; letter-spacing:.02em; overflow:hidden; isolation:isolate; transition:color .4s}
.pill .i-arrow{width:16px; height:16px; transition:transform .5s var(--ease)}
.pill:hover .i-arrow{transform:rotate(45deg)}
.pill::before{content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:var(--grad); transform:translateY(101%); transition:transform .55s var(--ease)}
.pill:hover::before{transform:none}
.pill-solid{background:var(--ink); color:var(--bg)}
.pill-solid:hover{color:#fff}
.pill-ghost{border:1px solid var(--line-2)}
.pill-ghost:hover{color:#fff; border-color:transparent}
.magnetic{will-change:transform}

/* story deck */
/* Width comes from the card (9:16 of its height minus the caption row), not the caption text. */
.home-stage{position:relative; z-index:2; --stage-h:min(74vh, 720px); height:var(--stage-h); width:calc((var(--stage-h) - 32px) * .5625); display:flex; flex-direction:column; align-items:center; gap:14px}
.deck{position:relative; flex:1; min-height:0; aspect-ratio:9/16; perspective:1400px}
.deck-back,.story-slot{position:absolute; inset:0; border-radius:26px}
.deck-back{background:#1a1a1e center/cover no-repeat; box-shadow:var(--shadow); transition:transform .7s var(--ease), opacity .7s, filter .7s}
.deck-back-1{transform:translate(4%, -3.5%) rotate(3.5deg) scale(.95); opacity:.6; filter:brightness(.5) saturate(.8)}
.deck-back-2{transform:translate(7.5%, -6.5%) rotate(7deg) scale(.9); opacity:.3; filter:brightness(.35) saturate(.6)}
.deck-back-1.promote{transform:none; opacity:1; filter:none}
.deck-back-2.promote{transform:translate(4%, -3.5%) rotate(3.5deg) scale(.95); opacity:.6; filter:brightness(.5) saturate(.8)}
.deck.no-anim .deck-back{transition:none}

.story-card{
  position:absolute; inset:0; border-radius:26px; overflow:hidden; background:#111 center/cover no-repeat; color:#fff;
  box-shadow:var(--shadow), 0 0 0 1px rgba(255,255,255,.08) inset; cursor:pointer;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .5s var(--ease), opacity .5s;
  -webkit-tap-highlight-color:transparent; outline-offset:6px;
}
.story-card.leave-next{transform:translateX(-70%) rotate(-14deg) scale(.86); opacity:0; transition:transform .6s var(--ease-io), opacity .5s .1s}
.story-card.leave-prev{transform:translateX(55%) translateY(8%) rotate(12deg) scale(.86); opacity:0; transition:transform .6s var(--ease-io), opacity .5s .1s}
.story-card.snap{transition:none !important}
.story-media{position:absolute; inset:0}
.story-media video,.story-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.story-media video{opacity:0; transition:opacity .35s}
.story-media video.ready{opacity:1}
.kenburns{animation:kenburns 14s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.02)} to{transform:scale(1.18) translate(-3%,-2%)}}
.story-shade{position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,.55), transparent 22%, transparent 62%, rgba(0,0,0,.7)); pointer-events:none}
.story-bars{position:absolute; top:12px; left:12px; right:12px; display:flex; gap:4px; z-index:2}
.story-bars span{flex:1; height:2.5px; border-radius:2px; background:rgba(255,255,255,.28); overflow:hidden}
.story-bars span i{display:block; height:100%; background:#fff; transform:scaleX(0); transform-origin:0 50%}
.story-bars span.done i{transform:scaleX(1)}
.story-top{position:absolute; top:26px; left:14px; right:12px; display:flex; align-items:center; gap:9px; z-index:3; font-size:13px}
.story-avatar{width:32px; height:32px; border-radius:50%; padding:2px; background:var(--grad-cool); flex:none}
.story-avatar img{width:100%; height:100%; border-radius:50%; object-fit:cover; border:2px solid #111}
.story-handle{font-weight:700}
.story-age{opacity:.65}
.story-sound,.story-close{margin-left:auto; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:rgba(0,0,0,.35); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.story-close{display:none; margin-left:0; font-size:24px; line-height:1}
.story-sound svg{width:18px; height:18px; fill:none; stroke:#fff; stroke-width:1.7; stroke-linecap:round}
.story-sound svg .fill{fill:#fff; stroke:none}
.story-sound .on{display:none}
.story-card.unmuted .story-sound .on{display:inline}
.story-card.unmuted .story-sound .off{display:none}
.story-caption{position:absolute; left:16px; right:16px; bottom:16px; margin:0; z-index:3; font-size:14px; line-height:1.45; font-weight:500; text-shadow:0 1px 12px rgba(0,0,0,.6); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.story-caption:empty{display:none}
.story-hit{position:absolute; top:70px; bottom:70px; z-index:2; display:none}
.story-hit-prev{left:0; width:35%}
.story-hit-next{right:0; width:65%}
.story-tap{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3; padding:10px 18px; border-radius:99px; background:rgba(0,0,0,.5); backdrop-filter:blur(10px); font-size:13px; font-weight:700; pointer-events:none}
.story-card.is-empty{cursor:default}

.stage-meta{display:flex; align-items:center; gap:14px; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3); white-space:nowrap}
.stage-count{color:var(--ink); font-variant-numeric:tabular-nums}

/* viewer (story card lifted out full-size) */
.story-backdrop{position:fixed; inset:0; z-index:60; background:rgba(5,5,7,.8); backdrop-filter:blur(24px) saturate(1.2); -webkit-backdrop-filter:blur(24px); opacity:0; pointer-events:none; transition:opacity .5s var(--ease)}
.story-backdrop.open{opacity:1; pointer-events:auto}
.story-card.is-open{
  position:fixed; inset:auto; z-index:61; left:50%; top:50%; height:min(94dvh, 940px); width:auto; aspect-ratio:9/16; max-width:100vw;
  translate:-50% -50%; transform:none; cursor:default; box-shadow:0 60px 160px rgba(0,0,0,.8);
}
.story-card.is-open .story-hit{display:block}
.story-card.is-open .story-close{display:grid}
.story-card.is-open .story-caption{font-size:15px; -webkit-line-clamp:6}

/* home index */
.home-index{position:relative; z-index:2; display:flex; flex-direction:column; border-top:1px solid var(--line)}
.home-index a{position:relative; display:grid; grid-template-columns:30px 1fr auto; grid-template-rows:auto auto; column-gap:8px; padding:clamp(12px,2.1vh,22px) 0; border-bottom:1px solid var(--line)}
.home-index a::before{content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--grad); transform:scaleX(0); transform-origin:0 50%; transition:transform .6s var(--ease)}
.home-index a:hover::before{transform:scaleX(1)}
.idx-num{grid-row:1/3; font-size:11px; font-weight:700; color:var(--pink); padding-top:.55em; font-variant-numeric:tabular-nums}
.idx-label{display:block; overflow:hidden; height:1.35em; line-height:1.35; font-size:clamp(22px,2.1vw,34px); font-weight:800; text-transform:uppercase; letter-spacing:-.02em; transition:transform .5s var(--ease)}
.home-index a:hover .idx-label{transform:translateX(6px)}
.idx-sub{grid-column:2; font-size:12px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.home-index .i-arrow{grid-column:3; grid-row:1/3; align-self:center; width:20px; height:20px; color:var(--ink-3); transition:transform .5s var(--ease), color .3s}
.home-index a:hover .i-arrow{transform:rotate(45deg); color:var(--pink)}

/* marquee */
.marquee{position:absolute; left:0; right:0; bottom:0; height:56px; border-top:1px solid var(--line); overflow:hidden; display:flex; align-items:center; z-index:1; mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)}
.marquee-track{display:flex; width:max-content; animation:marquee 42s linear infinite}
.marquee-group{display:flex; align-items:center; gap:28px; padding-right:28px}
.marquee span{font-size:22px; font-weight:800; text-transform:uppercase; letter-spacing:-.01em; white-space:nowrap}
.marquee span.outline{color:transparent; -webkit-text-stroke:1px var(--ink)}
.marquee i{font-style:normal; color:var(--pink); font-size:16px}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ============================ PAGES ============================ */
.section.page{max-width:1480px; margin:0 auto; padding:calc(var(--top) + clamp(40px,7vw,110px)) var(--pad) clamp(60px,8vw,120px)}
.page-head{margin-bottom:clamp(40px,6vw,96px)}
.page-num{display:inline-block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.16em; color:var(--pink); margin-bottom:18px}
.page-title{font-weight:900; text-transform:uppercase; font-size:clamp(46px,9vw,164px); line-height:.86; letter-spacing:-.05em}
.page-title .split{display:inline-block; clip-path:inset(0 -.2em); padding-bottom:.05em; margin-bottom:-.05em; vertical-align:top}
/* Heavy weights + tight tracking swallow apostrophes; give them room. */
.ch.ap{margin:0 .05em 0 .03em}

.prose p{margin:0 0 1.1em; color:var(--ink-2)}
.prose a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--pink); text-underline-offset:4px}
.prose.lead p:first-child{font-size:clamp(21px,1.9vw,30px); line-height:1.38; color:var(--ink); font-weight:500; letter-spacing:-.01em}
.prose.lead p{font-size:17px}

/* about */
.about{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px,6vw,110px); align-items:start}
.about-portrait{position:sticky; top:calc(var(--top) + 24px); margin:0}
.about-portrait img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:26px; box-shadow:var(--shadow)}
.about-portrait figcaption{margin-top:14px; font-size:12px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.1em}
.about-actions{display:flex; gap:12px; flex-wrap:wrap; margin:36px 0 64px}
.skills{border-top:1px solid var(--line); padding-top:28px}
.skill{display:grid; grid-template-columns:1fr auto; gap:10px 16px; padding:18px 0; border-bottom:1px solid var(--line)}
.skill-name{font-size:clamp(20px,2vw,30px); font-weight:800; text-transform:uppercase; letter-spacing:-.02em}
.skill-pct{font-size:14px; font-weight:700; color:var(--ink-3); align-self:center; font-variant-numeric:tabular-nums}
.skill-track{grid-column:1/-1; height:2px; background:var(--line)}
.skill-fill{display:block; height:100%; width:var(--pct); background:var(--grad); transform:scaleX(0); transform-origin:0 50%; transition:transform 1.6s var(--ease) .2s}
.skills.in .skill-fill{transform:scaleX(1)}

/* work */
.work-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,4vw,64px) clamp(20px,3vw,48px)}
.work-card:nth-child(even){margin-top:clamp(0px,12vw,180px)}
.work-media{position:relative; aspect-ratio:4/3; border-radius:24px; overflow:hidden; background:var(--card)}
.work-card.is-square .work-media{aspect-ratio:1/1}
.work-media img{width:100%; height:100%; object-fit:cover; transform:scale(1.02); transition:transform 1.4s var(--ease), filter .6s}
.work-card:hover .work-media img{transform:scale(1.09)}
.work-meta{display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:4px 14px; padding:20px 4px 0}
.work-num{font-size:12px; font-weight:700; color:var(--pink)}
.work-meta h2{font-size:clamp(24px,2.6vw,40px); text-transform:uppercase; letter-spacing:-.03em}
.work-client{grid-column:2; font-size:13px; color:var(--ink-3)}
.work-meta .i-arrow{grid-column:3; grid-row:1; width:24px; height:24px; color:var(--ink-3); transition:transform .5s var(--ease), color .3s}
.work-card:hover .i-arrow{transform:rotate(45deg); color:var(--pink)}

.detail{display:none}
.detail.active{display:block}
.back-link{display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-2); margin-bottom:40px; transition:color .3s, gap .4s var(--ease)}
.back-link:hover{color:var(--ink); gap:16px}
.pf-layout{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(28px,5vw,80px); align-items:start}
.pf-carousel{position:relative; border-radius:26px; overflow:hidden; background:var(--card); box-shadow:var(--shadow)}
.pf-slide{display:none}
.pf-slide.active{display:block; animation:fadeIn .6s var(--ease)}
.pf-slide img,.pf-slide video{width:100%; max-height:calc(100vh - 200px); object-fit:contain; margin:0 auto}
@keyframes fadeIn{from{opacity:0; transform:scale(1.02)}}
.pf-btn{position:absolute; top:50%; translate:0 -50%; width:48px; height:48px; border-radius:50%; background:rgba(0,0,0,.45); color:#fff; font-size:26px; backdrop-filter:blur(10px)}
.pf-prev{left:14px} .pf-next{right:14px}
.pf-count{position:absolute; right:16px; bottom:14px; padding:4px 12px; border-radius:99px; background:rgba(0,0,0,.5); color:#fff; font-size:12px; font-weight:700}
.pf-text{position:sticky; top:calc(var(--top) + 24px)}
.pf-text h1{font-size:clamp(40px,5vw,84px); text-transform:uppercase; letter-spacing:-.04em; line-height:.9; margin-bottom:28px}
.pf-text .prose{margin-bottom:28px}

/* writing */
.post-list{border-top:1px solid var(--line)}
.post-row{position:relative; display:grid; grid-template-columns:160px minmax(0,1fr) auto; grid-template-rows:auto auto; gap:8px 32px; padding:clamp(22px,3vw,40px) 0; border-bottom:1px solid var(--line)}
.post-row::before{content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--grad); transform:scaleX(0); transform-origin:0 50%; transition:transform .7s var(--ease)}
.post-row:hover::before{transform:scaleX(1)}
.post-date{grid-row:1/3; font-size:13px; font-weight:600; color:var(--ink-3); padding-top:.7em; text-transform:uppercase; letter-spacing:.08em}
.post-title{font-size:clamp(26px,3.4vw,54px); font-weight:800; line-height:1; letter-spacing:-.03em; transition:transform .6s var(--ease)}
.post-row:hover .post-title{transform:translateX(12px)}
.post-excerpt{grid-column:2; color:var(--ink-3); font-size:15px; max-width:70ch}
.post-row .i-arrow{grid-column:3; grid-row:1/3; align-self:center; width:30px; height:30px; color:var(--ink-3); transition:transform .5s var(--ease), color .3s}
.post-row:hover .i-arrow{transform:rotate(45deg); color:var(--pink)}
.writing-detail{max-width:820px; margin:0 auto}
.article-head h1{font-size:clamp(38px,5.4vw,84px); letter-spacing:-.04em; line-height:.95}
.article-hero{width:100%; border-radius:24px; margin:44px 0; max-height:70vh; object-fit:cover}
.article-body p{font-size:clamp(17px,1.35vw,20px); line-height:1.75; color:var(--ink-2)}

.filter-tabs{display:flex; flex-wrap:wrap; gap:8px; margin:-24px 0 36px}
.filter-tabs a{padding:10px 18px; border-radius:99px; border:1px solid var(--line-2); font-size:13px; font-weight:700; letter-spacing:.04em; color:var(--ink-2); transition:color .3s, border-color .3s, background .3s}
.filter-tabs a:hover{color:var(--ink); border-color:var(--ink)}
.filter-tabs a.on{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.tag{display:inline-block; margin-right:8px; padding:2px 10px; border-radius:99px; background:color-mix(in srgb, var(--pink) 16%, transparent); color:var(--pink); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; vertical-align:1px}
.pager{display:flex; justify-content:space-between; align-items:center; padding-top:32px; font-size:14px; font-weight:700}
.pager a{padding:12px 20px; border:1px solid var(--line-2); border-radius:99px}
.pager a:hover{border-color:var(--ink)}
.pager-info{color:var(--ink-3); font-weight:600}
.lead-text{font-size:clamp(18px,1.6vw,24px); color:var(--ink-2); max-width:56ch; margin:0 0 28px}

/* devotional */
.scripture{margin:40px 0 44px; padding:clamp(24px,3vw,40px); border-radius:24px; background:linear-gradient(135deg, color-mix(in srgb, var(--violet) 14%, transparent), color-mix(in srgb, var(--pink) 10%, transparent)); border:1px solid var(--line); position:relative; overflow:hidden}
.scripture::before{content:"\201C"; position:absolute; right:18px; top:-30px; font-size:180px; font-weight:900; line-height:1; color:var(--pink); opacity:.18}
.scripture blockquote{margin:0 0 18px; font-size:clamp(20px,1.9vw,28px); line-height:1.45; font-weight:500; letter-spacing:-.01em; color:var(--ink)}
.scripture figcaption{font-size:13px; color:var(--ink-2); letter-spacing:.04em}
.scripture figcaption strong{color:var(--pink); font-weight:800; text-transform:uppercase; letter-spacing:.1em}
.prayer{margin:44px 0 0; padding:28px 32px; border-left:3px solid var(--pink); background:color-mix(in srgb, var(--ink) 4%, transparent); border-radius:0 18px 18px 0}
.prayer .eyebrow{color:var(--pink); margin-bottom:12px}
.prayer p{margin:0 0 .8em; font-size:clamp(17px,1.3vw,19px); line-height:1.7; font-style:italic; color:var(--ink)}
.prayer p:last-child{margin:0}
.post-nav{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:64px; padding-top:28px; border-top:1px solid var(--line)}
.post-nav a{display:flex; flex-direction:column; gap:6px; padding:18px 20px; border:1px solid var(--line); border-radius:18px; transition:border-color .3s}
.post-nav a:hover{border-color:var(--pink)}
.post-nav a.next{text-align:right}
.post-nav span{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3)}
.post-nav strong{font-size:16px; line-height:1.3}
@media (max-width:640px){ .post-nav{grid-template-columns:1fr} .post-nav a.next{text-align:left} }

/* campaign */
.campaign{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(32px,6vw,100px); align-items:center}
.campaign-poster{margin:0; transform:rotate(-2.5deg); transition:transform 1s var(--ease)}
.campaign-poster.in{transform:rotate(-2.5deg)}
.campaign-poster:hover{transform:rotate(0) scale(1.02)}
.campaign-poster img{width:100%; border-radius:22px; box-shadow:var(--shadow)}
.campaign-title{font-size:clamp(48px,7.4vw,136px); margin-bottom:24px}
.campaign-tagline{font-size:clamp(24px,2.6vw,40px); font-weight:800; line-height:1.1; letter-spacing:-.02em; margin:0 0 28px; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.campaign .pill{margin-top:12px}
.media-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px}
.media-card{margin:0; border-radius:20px; overflow:hidden; background:var(--card)}
.media-card img,.media-card video{width:100%}
.media-card figcaption{padding:12px 16px; font-size:14px; color:var(--ink-2)}

/* contact */
.big-mail{display:inline-block; font-size:clamp(28px,5.6vw,100px); font-weight:900; letter-spacing:-.045em; line-height:1; margin-bottom:clamp(48px,7vw,110px); background:linear-gradient(var(--ink),var(--ink)) 0 100%/100% 3px no-repeat; padding-bottom:10px; transition:background-size .6s var(--ease), color .4s; word-break:break-word}
.big-mail:hover{background-image:var(--grad); color:var(--pink)}
.contact{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,6vw,100px); align-items:start}
.contact-form{display:grid; gap:10px}
.field{position:relative}
.field input,.field textarea{width:100%; padding:30px 0 12px; background:transparent; border:0; border-bottom:1px solid var(--line-2); color:var(--ink); font:inherit; font-size:18px; outline:none; resize:vertical; border-radius:0}
.field label{position:absolute; left:0; top:28px; color:var(--ink-3); font-size:18px; pointer-events:none; transform-origin:0 0; transition:transform .4s var(--ease), color .3s}
.field input:focus + label,.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,.field textarea:not(:placeholder-shown) + label{transform:translateY(-22px) scale(.7); color:var(--pink)}
.field::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--grad); transform:scaleX(0); transform-origin:0 50%; transition:transform .6s var(--ease)}
.field:focus-within::after{transform:scaleX(1)}
.contact-form .pill{justify-self:start; margin-top:18px; height:58px; padding:0 32px}
.ok-box,.error-box{padding:12px 16px; border-radius:14px; font-size:14px; font-weight:600}
.ok-box{background:rgba(43,213,118,.12); color:#2bd576}
.error-box{background:rgba(255,84,112,.12); color:#ff5470}
.contact-details dl{display:grid; grid-template-columns:110px 1fr; gap:18px 20px; margin:0 0 32px}
.contact-details dt{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3); padding-top:3px}
.contact-details dd{margin:0; color:var(--ink-2)}
.contact-details a:hover{color:var(--pink)}
.socials{display:flex; gap:18px; flex-wrap:wrap}
.contact-map{width:100%; aspect-ratio:16/10; border:0; border-radius:22px; filter:grayscale(1) invert(.9) contrast(.9); transition:filter .6s}
:root[data-theme="light"] .contact-map{filter:grayscale(1)}
.contact-map:hover{filter:none}

/* footer (pages only) */
.site-footer{max-width:1480px; margin:0 auto; padding:0 var(--pad) 32px}
body.is-home .site-footer{display:none}
.footer-cta{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:clamp(28px,4vw,56px) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:clamp(44px,9vw,160px); font-weight:900; text-transform:uppercase; letter-spacing:-.035em; line-height:1}
.footer-cta .roll{height:auto}
.footer-cta{overflow:hidden}
.footer-cta .i-arrow{width:.6em; height:.6em; stroke-width:1.5; transition:transform .6s var(--ease), color .3s}
.footer-cta:hover .i-arrow{transform:rotate(45deg); color:var(--pink)}
.footer-row{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:24px; font-size:13px; color:var(--ink-3)}
.footer-links{display:flex; gap:20px; flex-wrap:wrap}
.footer-links a:hover{color:var(--ink)}

/* ---------- cursor + hover preview (pointer devices only) ---------- */
.cursor{display:none}
@media (hover:hover) and (pointer:fine){
  html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor [role="button"]{cursor:none}
  .cursor{display:block; position:fixed; left:0; top:0; z-index:100; pointer-events:none}
  .cursor-dot{position:absolute; width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%; background:var(--ink); transition:opacity .3s, transform .3s var(--ease)}
  .cursor-ring{position:absolute; width:38px; height:38px; margin:-19px 0 0 -19px; border-radius:50%; border:1px solid var(--line-2); display:grid; place-items:center; transition:width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease), background .35s, border-color .35s}
  .cursor-ring em{font-style:normal; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:#fff; opacity:0; transition:opacity .25s}
  .cursor.is-link .cursor-ring{width:58px; height:58px; margin:-29px 0 0 -29px; border-color:var(--ink)}
  .cursor.is-link .cursor-dot{transform:scale(0)}
  .cursor.has-label .cursor-ring{width:92px; height:92px; margin:-46px 0 0 -46px; background:var(--grad); border-color:transparent}
  .cursor.has-label .cursor-ring em{opacity:1}
  .cursor.has-label .cursor-dot{opacity:0}
  .cursor.is-hidden{opacity:0}
  .cursor.is-down .cursor-ring{border-color:var(--pink)}
}
.hover-preview{position:fixed; left:0; top:0; z-index:40; width:260px; aspect-ratio:4/5; margin:-160px 0 0 -130px; border-radius:18px; overflow:hidden; pointer-events:none; opacity:0; transition:opacity .35s; box-shadow:var(--shadow)}
.hover-preview img{width:100%; height:100%; object-fit:cover; transform:scale(1.25); transition:transform .8s var(--ease)}
.hover-preview.show{opacity:1}
.hover-preview.show img{transform:scale(1)}
@media (hover:none){ .hover-preview{display:none} }

/* ============================ RESPONSIVE ============================ */
@media (max-width:1180px){
  .home{grid-template-columns:minmax(0,1fr) auto minmax(180px,210px)}
  .topnav{gap:18px}
  .brand-name{display:none}
}
@media (max-width:900px){
  :root{--top:64px}
  .topnav{display:none}
  .menu-btn{display:flex}
  .brand-name{display:inline}

  .home{grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto; align-items:stretch; gap:14px; padding:calc(var(--top) + 2px) 16px 56px}
  .home-copy{align-self:start; padding:0; text-align:left}
  .kicker,.home-ctas{display:none}
  .mega{font-size:min(15.6vw, 9.5vh); margin-bottom:8px}
  .role-line{font-size:min(4.6vw, 20px); margin:0}
  .home-stage{height:auto; width:auto; min-height:0}
  .stage-meta{display:none}
  .deck{height:100%; max-width:100%}
  .deck-back-1{transform:translate(7%,-1.5%) rotate(4deg) scale(.94)}
  .deck-back-2{transform:translate(13%,-3%) rotate(8deg) scale(.88)}
  .home-index{flex-direction:row; gap:8px; border:0; overflow-x:auto; scrollbar-width:none; margin:0 -16px; padding:0 16px}
  .home-index::-webkit-scrollbar{display:none}
  .home-index a{display:inline-flex; flex:none; padding:10px 16px; border:1px solid var(--line-2); border-radius:99px}
  .home-index a::before,.idx-num,.idx-sub,.home-index .i-arrow{display:none}
  .idx-label{font-size:13px; font-weight:700; letter-spacing:.06em; height:auto}
  .marquee{height:42px}
  .marquee span{font-size:16px}

  .story-card.is-open{height:100dvh; width:100vw; aspect-ratio:auto; border-radius:0}

  .about,.pf-layout,.campaign,.contact{grid-template-columns:minmax(0,1fr)}
  .about-portrait,.pf-text{position:static}
  .work-grid{grid-template-columns:minmax(0,1fr)}
  .work-card:nth-child(even){margin-top:0}
  .post-row{grid-template-columns:minmax(0,1fr) auto; gap:8px 16px}
  .post-date{grid-row:auto; grid-column:1; padding:0}
  .post-title,.post-excerpt{grid-column:1}
  .post-row .i-arrow{grid-row:1/4; width:22px; height:22px}
  .contact-details dl{grid-template-columns:90px 1fr}
}
@media (max-height:640px) and (min-width:901px){
  .kicker{display:none}
  .home-index a{padding:8px 0}
}

html.static *,html.static *::before,html.static *::after{transition:none !important; animation-delay:-60s !important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; transition-delay:0s !important}
  .marquee-track{animation:none}
}