/* Layout: fixed left rail with the name set vertically (top bar on phones); full-screen auto-rotating hero;
   numbered sections alternating white / mist / deep navy bands. One deliberate light look with navy bands. */
:root{
  color-scheme:light;
  --bg:#ffffff; --surface:#ffffff; --mist:#f1f4f9; --line:#dfe5ee;
  --ink:#1b2a3d; --muted:#5c6b80;
  --navy:#1f3756; --navy-deep:#0f1f36; --on-dark:#ffffff; --on-dark-muted:#b7c4d8;
  --accent:#2f6fe0; --accent-ink:#ffffff; --sky:#7fb0ff; --gold:#e3a83b; --danger:#c0362c;
  --globe-hi:#3c6aa8; --globe-lo:#16305a;
  --f-display:"Raleway","Heebo",system-ui,sans-serif;
  --f-body:"Heebo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --rail:5.5rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.7 var(--f-body)}
img{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;margin:0;line-height:1.05}
p{margin:0}
.eyebrow{font:500 .78rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}

/* ---------- rail + menu ---------- */
.rail{position:fixed;inset:0 auto 0 0;width:var(--rail);background:var(--surface);border-right:1px solid var(--line);z-index:30;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding-block:2rem}
.rail .name{writing-mode:vertical-rl;transform:rotate(180deg);font:900 1.7rem/1 var(--f-display);color:var(--navy);text-decoration:none;letter-spacing:-.01em;margin-block:auto}
.rail .social{display:flex;flex-direction:column;gap:.9rem}
.icon-link{display:grid;place-items:center;width:2rem;height:2rem;color:var(--navy);border-radius:6px;transition:color .2s,transform .2s}
.icon-link:hover{color:var(--accent);transform:translateY(-2px)}
.icon-link svg{width:18px;height:18px;fill:currentColor}

.burger{position:fixed;top:calc(env(safe-area-inset-top,0px) + 1.25rem);right:1.25rem;z-index:50;width:3rem;height:3rem;border:0;border-radius:10px;
  background:var(--navy-deep);cursor:pointer;display:grid;place-content:center;gap:6px;box-shadow:0 6px 20px rgb(15 31 54/.25)}
.burger span{display:block;width:22px;height:2px;background:var(--on-dark);transition:transform .3s}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:40;background:var(--navy-deep);color:var(--on-dark);display:grid;align-content:center;
  padding:5rem clamp(1.5rem,8vw,8rem);visibility:hidden;opacity:0;transition:opacity .35s,visibility .35s}
.menu.open{visibility:visible;opacity:1}
.menu ol{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.menu a{display:inline-flex;align-items:baseline;gap:1rem;color:var(--on-dark);text-decoration:none;font:900 clamp(2rem,6vw,3.6rem)/1.15 var(--f-display);
  transform:translateX(-24px);opacity:0;transition:transform .5s,opacity .5s,color .2s}
.menu a small{font:500 .9rem var(--f-mono);color:var(--gold)}
.menu a:hover{color:var(--sky)}
.menu.open a{transform:none;opacity:1}
.menu.open li:nth-child(2) a{transition-delay:.05s}.menu.open li:nth-child(3) a{transition-delay:.1s}
.menu.open li:nth-child(4) a{transition-delay:.15s}.menu.open li:nth-child(5) a{transition-delay:.2s}
.menu.open li:nth-child(6) a{transition-delay:.25s}.menu.open li:nth-child(7) a{transition-delay:.3s}
.menu.open li:nth-child(8) a{transition-delay:.35s}

.main{margin-left:var(--rail)}

/* ---------- hero slider ---------- */
.hero{position:relative;height:100svh;min-height:36rem;overflow:hidden;background:var(--navy-deep);color:var(--on-dark)}
.slide{position:absolute;inset:0;display:grid;align-content:end;padding:clamp(1.5rem,6vw,5.5rem);padding-bottom:8.5rem;opacity:0;visibility:hidden;transition:opacity 1.1s,visibility 1.1s}
.slide.on{opacity:1;visibility:visible}
.slide .bg{position:absolute;inset:0;background:var(--g);background-size:cover;background-position:center;transform:scale(1.1);transition:transform 8s ease-out}
.slide.on .bg{transform:scale(1)}
.slide .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(15 31 54/.15) 0%,rgb(15 31 54/.35) 45%,rgb(15 31 54/.9) 100%)}
.slide .big-num{position:absolute;right:clamp(1rem,5vw,5rem);top:18%;font:900 clamp(8rem,24vw,20rem)/1 var(--f-display);color:transparent;-webkit-text-stroke:1.5px rgb(255 255 255/.14);pointer-events:none}
.slide .content{position:relative;max-width:50rem;display:grid;gap:1.1rem}
.slide .content>*{opacity:0;transform:translateY(28px);transition:opacity .9s,transform .9s}
.slide.on .content>*{opacity:1;transform:none}
.slide.on .content>*:nth-child(2){transition-delay:.15s}
.slide.on .content>*:nth-child(3){transition-delay:.3s}
.slide.on .content>*:nth-child(4){transition-delay:.45s}
.slide h1,.slide h2{font:900 clamp(2.6rem,7vw,5.6rem)/1.02 var(--f-display);letter-spacing:-.02em}
.slide .motto{font:800 clamp(2rem,5.2vw,4rem)/1.12 var(--f-display);letter-spacing:-.01em}
.slide .motto::before{content:"\201C";display:block;color:var(--gold);font-size:1.6em;line-height:.6}
.slide p.sub{font-size:clamp(1.05rem,2vw,1.3rem);color:var(--on-dark-muted);max-width:36rem}
.slide .he-line{font:900 clamp(2rem,6vw,4.4rem)/1.1 "Frank Ruhl Libre","Heebo",serif}
.cta{display:inline-flex;align-items:center;gap:.8rem;justify-self:start;color:var(--on-dark);text-decoration:none;font:700 1rem var(--f-display);
  border:1.5px solid rgb(255 255 255/.5);padding:.8rem 1.3rem;border-radius:999px;transition:background .25s,color .25s,border-color .25s}
.cta:hover{background:var(--on-dark);color:var(--navy-deep);border-color:var(--on-dark)}
.cta .arr{transition:transform .25s}.cta:hover .arr{transform:translateX(4px)}
.hero-nav{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:clamp(.75rem,3vw,2.5rem);
  padding:1.4rem clamp(1.5rem,6vw,5.5rem);background:rgb(15 31 54/.55);backdrop-filter:blur(8px)}
.hero-nav button{background:none;border:0;cursor:pointer;padding:0;position:relative;width:2rem;height:2rem;display:grid;place-items:center}
/* Each dot is a different shape; the active one turns gold and grows. */
.hero-nav .dot::before{content:"";width:.85rem;height:.85rem;background:rgb(255 255 255/.45);transition:background .25s,transform .25s}
.hero-nav .dot:hover::before{background:rgb(255 255 255/.85)}
.hero-nav .dot:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
.hero-nav .circle::before{border-radius:50%}
.hero-nav .square::before{border-radius:2px}
.hero-nav .diamond::before{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.hero-nav .triangle::before{clip-path:polygon(50% 4%,100% 92%,0 92%)}
.hero-nav .hexagon::before{clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%)}
.hero-nav .moon::before{border-radius:50%;-webkit-mask:radial-gradient(circle at 75% 28%,transparent 46%,#000 48%);mask:radial-gradient(circle at 75% 28%,transparent 46%,#000 48%)}
.hero-nav .dot[aria-current="true"]::before{background:var(--gold);transform:scale(1.35)}
.hero-nav button::after{content:"";position:absolute;left:.25rem;bottom:-.1rem;height:2px;width:0;max-width:1.5rem;background:var(--gold)}
.hero-nav button[aria-current="true"]::after{animation:progress var(--slide-ms,4000ms) linear forwards}
@keyframes progress{to{width:100%}}
.hero-nav .down{margin-left:auto;color:var(--on-dark);text-decoration:none;font:500 .85rem var(--f-mono);display:flex;gap:.5rem;align-items:center}
.hero-nav .down span{display:inline-block;animation:bob 1.8s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(5px)}}

/* intro slide: big name + portrait */
.slide.intro h1{font:900 clamp(3.4rem,9.5vw,7.5rem)/.95 var(--f-display);letter-spacing:-.03em}
.slide.intro .content,.slide.has-portrait .content{max-width:min(46rem,58%)}
.slide.has-portrait .big-num{display:none}
.hero-portrait{position:absolute;right:clamp(1.5rem,6vw,6rem);bottom:5.2rem;height:min(76%,40rem);aspect-ratio:3/4;width:auto;object-fit:cover;object-position:center 20%;
  border-radius:24px 24px 0 0;box-shadow:0 30px 60px rgb(0 0 0/.35);transform:translateY(20px);opacity:0;transition:transform 1.1s .2s,opacity 1.1s .2s}
.slide.on .hero-portrait{transform:none;opacity:1}

/* ---------- sections ---------- */
.sec{--py:clamp(4.5rem,10vw,8rem);--px:clamp(16px,6vw,5.5rem);padding:var(--py) var(--px)}
.sec.mist{background:var(--mist)}
.sec.navy{background:var(--navy);color:var(--on-dark)}
.inner{max-width:72rem;margin:0 auto;display:grid;gap:clamp(2rem,4vw,3.5rem)}
.sec-head{display:grid;gap:.9rem}
.sec-head .no{font:500 .9rem var(--f-mono);color:var(--gold)}
.sec-head h2{font:900 clamp(2.4rem,5.5vw,4.2rem)/1.02 var(--f-display);color:var(--navy);letter-spacing:-.02em}
.navy .sec-head h2{color:var(--on-dark)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.split>*{min-width:0}
.lead{font-size:clamp(1.15rem,1.8vw,1.35rem);line-height:1.6}
.prose{display:grid;gap:1.1rem;color:var(--ink)}
.navy .prose{color:var(--on-dark-muted)}

/* about */
.roles-line{display:flex;flex-wrap:wrap;gap:.5rem}
.roles-line span{font:600 .95rem var(--f-display);padding:.45rem .9rem;border-radius:999px;background:var(--mist);color:var(--navy)}
.portrait{margin:1rem 0 0;border-radius:18px;overflow:hidden;aspect-ratio:4/5;width:100%;max-width:27rem;background:var(--mist)}
.portrait img{width:100%;height:100%;object-fit:cover}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.tile{background:var(--surface);padding:clamp(1.4rem,3vw,2.2rem);display:grid;gap:.5rem;align-content:start;transition:background .3s}
.tile:hover{background:var(--mist)}
.tile .n{font:900 clamp(2.8rem,5vw,4rem)/1 var(--f-display);color:var(--accent);font-variant-numeric:tabular-nums}
.tile .n.he{font-family:"Frank Ruhl Libre","Heebo",serif}
.tile b{font:800 1.35rem/1.15 var(--f-display);color:var(--navy)}
.tile span{color:var(--muted);font-size:.95rem;line-height:1.45}

/* journey band */
.journey{margin:0;display:grid;justify-items:center}
.journey svg{width:100%;max-width:36rem;height:auto;overflow:visible}
.journey .g-hi{stop-color:var(--globe-hi)}
.journey .g-lo{stop-color:var(--globe-lo)}
.journey .graticule *{fill:none;stroke:rgb(255 255 255/.16);stroke-width:1}
.journey .rim{fill:none;stroke:rgb(255 255 255/.35);stroke-width:1.2}
.journey .route{fill:none;stroke:var(--gold);stroke-width:2.2;stroke-dasharray:2 7;stroke-linecap:round}
.journey .city,.journey .pulse{fill:var(--sky)}
.journey .plane path{fill:var(--on-dark)}
.journey .arc-title{font:900 22px var(--f-display);letter-spacing:.2em;fill:var(--on-dark)}
.journey .city-label{font:500 13px var(--f-mono);fill:var(--on-dark-muted)}

/* updates feed (shared with admin) */
.filters{display:flex;flex-wrap:wrap;gap:.5rem}
.filters button{font:600 .85rem var(--f-display);padding:.45rem 1rem;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);cursor:pointer;transition:all .2s}
.filters button:hover{border-color:var(--navy);color:var(--navy)}
.filters button[aria-pressed="true"]{background:var(--navy);color:var(--on-dark);border-color:var(--navy)}
.feed{display:grid;gap:1rem}
.post{display:grid;grid-template-columns:7.5rem 1fr;gap:1.25rem;padding:1.5rem;background:var(--surface);border:1px solid var(--line);border-radius:16px;transition:transform .25s,box-shadow .25s}
.post:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgb(15 31 54/.08)}
.post time{font:400 .8rem/1.5 var(--f-mono);color:var(--muted);font-variant-numeric:tabular-nums}
.post .tag{display:block;font:500 .7rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-top:.25rem}
.post .body{min-width:0;display:grid;gap:.45rem}
.post h3{font:800 1.35rem/1.2 var(--f-display);color:var(--navy)}
.post p{white-space:pre-wrap;overflow-wrap:anywhere}
.post .tools{display:flex;gap:.4rem;margin-top:.3rem}
.post .pics{display:grid;gap:.4rem;margin-top:.35rem;border-radius:12px;overflow:hidden}
.post .pics.n2,.post .pics.n4{grid-template-columns:1fr 1fr}
.post .pics.n3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr}
.post .pics.n3 a:first-child{grid-row:span 2}
.post .pics a{display:block;background:var(--mist)}
.post .pics img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.post .pics.n1 img{aspect-ratio:auto;max-height:32rem}
.post .pics.n3 a:first-child img{aspect-ratio:auto}
.thumbs{display:flex;flex-wrap:wrap;gap:.5rem}
.thumbs:empty{display:none}
.thumbs figure{position:relative;width:6rem;height:6rem;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.thumbs button{position:absolute;top:.25rem;right:.25rem;width:1.6rem;height:1.6rem;border:0;border-radius:50%;background:rgb(15 31 54/.75);color:#fff;font-size:.8rem;cursor:pointer}
.empty{padding:1.75rem;border:1px dashed var(--line);border-radius:16px;color:var(--muted);text-align:center;background:var(--surface)}

/* buttons + composer (admin) */
.btn{display:inline-flex;align-items:center;gap:.5rem;font:700 .95rem var(--f-display);border-radius:999px;padding:.7rem 1.3rem;border:1.5px solid var(--accent);background:var(--accent);color:var(--accent-ink);cursor:pointer;text-decoration:none;transition:transform .2s,background .2s}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--accent)}
.btn.small{padding:.3rem .75rem;font-size:.8rem;border-color:var(--line);background:transparent;color:var(--muted)}
.btn.small:hover{color:var(--ink);border-color:var(--ink)}
.btn.small.warn{color:var(--danger);border-color:var(--danger)}
.btn:disabled{opacity:.5;cursor:default;transform:none}
.composer{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.25rem;display:grid;gap:.8rem}
.composer label{font:500 .75rem var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:grid;gap:.35rem}
.composer input,.composer textarea,.composer select{font:400 1rem var(--f-body);color:var(--ink);background:var(--mist);border:1px solid var(--line);border-radius:10px;padding:.65rem .75rem;width:100%;text-transform:none;letter-spacing:0}
.composer textarea{min-height:8rem;resize:vertical}
.row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.actions{display:flex;gap:.5rem;justify-content:flex-end;align-items:center;flex-wrap:wrap}
.status{font-size:.85rem;color:var(--muted);margin-right:auto}
.wrap{max-width:48rem;margin:0 auto;padding-block:3rem 4rem;display:grid;gap:2rem}
body.admin{padding:0 16px;background:var(--mist)}

/* music */
.video{position:relative;aspect-ratio:16/9;max-width:100%;border-radius:18px;overflow:hidden;background:var(--navy-deep);box-shadow:0 24px 50px rgb(15 31 54/.18)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lyric{margin:0;padding:2rem 1.5rem;border-radius:18px;background:var(--navy-deep);color:var(--on-dark);display:grid;gap:.7rem;text-align:center;position:relative;overflow:hidden}
.lyric::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent,rgb(127 176 255/.18),transparent 30%);animation:spin 14s linear infinite}
.lyric>*{position:relative}
.lyric blockquote{margin:0;font:900 clamp(1.9rem,4.4vw,3rem)/1.2 "Frank Ruhl Libre","Heebo",serif;text-wrap:balance}
.lyric blockquote::before{content:"\201D";color:var(--gold)}
.lyric blockquote::after{content:"\201C";color:var(--gold)}
.lyric figcaption{font-size:.9rem;color:var(--on-dark-muted);font-style:italic}
@keyframes spin{to{transform:rotate(360deg)}}
.chip{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.1rem;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--navy);font:700 .9rem var(--f-display);background:var(--surface);transition:all .2s}
.chip:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}

.spotify{width:100%;max-width:100%;border:0;border-radius:14px;display:block}
.links-row{display:flex;flex-wrap:wrap;gap:.5rem}

/* instagram marquee */
.reel-strip{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.reel-track{display:flex;gap:1.1rem;width:max-content;animation:reel-scroll var(--dur,40s) linear infinite}
.reel-strip:hover .reel-track,.reel-strip:focus-within .reel-track{animation-play-state:paused}
.reel{flex:none;width:13rem;aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:var(--navy-deep);transition:transform .3s}
.reel:hover{transform:scale(1.03)}
.reel video{width:100%;height:100%;object-fit:cover;display:block}
@keyframes reel-scroll{to{transform:translateX(calc(-50% - .55rem))}}

/* story: INFUSE-style chapter banners (photo under a deep-blue tint, big white type) */
.story{display:grid;gap:clamp(3rem,6vw,5rem)}
.chapter{display:grid;gap:clamp(1.5rem,3vw,2.25rem)}
.banner{position:relative;min-height:clamp(17rem,34vw,25rem);border-radius:20px;overflow:hidden;background:var(--navy-deep);display:grid;align-items:center;isolation:isolate}
.bn-media{position:absolute;inset:-12% 0;z-index:-2;will-change:transform}
.bn-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.35) contrast(1.05);animation:kenburns 18s ease-in-out infinite alternate}
.banner.multi .bn-media img{opacity:0;transition:opacity 1.6s ease}
.banner.multi .bn-media img.on{opacity:1}
.banner::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgb(17 45 110/.94) 0%,rgb(28 72 160/.78) 45%,rgb(40 95 190/.42) 100%);mix-blend-mode:multiply}
.banner::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgb(12 30 70/.55),transparent 70%)}
.bn-text{padding:clamp(1.75rem,5vw,4rem);display:grid;gap:.8rem;max-width:44rem;color:var(--on-dark)}
.bn-text h3{font:900 clamp(2.4rem,6vw,4.6rem)/.98 var(--f-display);text-transform:uppercase;letter-spacing:-.01em}
.bn-text p{font-size:clamp(1.05rem,1.8vw,1.3rem);color:rgb(255 255 255/.9)}
.chapter .text{display:grid;gap:1rem;max-width:46rem;padding-inline:clamp(0rem,3vw,4rem)}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.12)}}
/* navy sections with a tinted photo behind them */
.sec.tinted{position:relative;isolation:isolate;overflow:hidden}
.sec-bg{position:absolute;inset:0;z-index:-2}
.sec-bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35);animation:kenburns 22s ease-in-out infinite alternate}
.sec.tinted::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgb(17 45 110/.95) 0%,rgb(28 72 160/.86) 50%,rgb(31 55 86/.8) 100%)}
.contact-banner{min-height:clamp(15rem,28vw,20rem)}
.contact-banner h2{font:900 clamp(2.6rem,6vw,4.6rem)/.98 var(--f-display);text-transform:uppercase}


/* photo credits */
.credits{flex-basis:100%;font-size:.75rem}
.credits summary{cursor:pointer;color:var(--on-dark-muted)}
.credits ul{margin:.5rem 0 0;padding-left:1.1rem;display:grid;gap:.25rem}
.credits a{color:var(--sky)}

/* live globe */
.globe-live{width:100%;max-width:38rem;height:auto;overflow:visible}
.globe-live .gl-grat{fill:none;stroke:rgb(255 255 255/.09);stroke-width:.7}
.globe-live .gl-land{fill:#cfe0fb;fill-opacity:.92;stroke:rgb(15 31 54/.25);stroke-width:.4}
.globe-live .gl-route-full{fill:none;stroke:var(--gold);stroke-opacity:.35;stroke-width:1.5;stroke-dasharray:2 6;stroke-linecap:round}
.globe-live .gl-route{fill:none;stroke:var(--gold);stroke-width:2.6;stroke-linecap:round}
.globe-live .gl-pulse{fill:var(--sky)}
.globe-live .city{fill:var(--gold);stroke:var(--navy-deep);stroke-width:2}
.globe-live .city-label{font:600 14px var(--f-mono);fill:var(--on-dark);paint-order:stroke;stroke:var(--navy);stroke-width:3px}
.globe-live .plane path{fill:var(--on-dark);stroke:var(--navy-deep);stroke-width:.8}
.globe-live .g-hi{stop-color:var(--globe-hi)}.globe-live .g-lo{stop-color:var(--globe-lo)}
.globe-live .arc-title{font:900 20px var(--f-display);letter-spacing:.22em;fill:var(--on-dark)}

/* geography */
.geo-cta{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.geo-num{font:900 clamp(5rem,14vw,10rem)/.9 var(--f-display);color:transparent;-webkit-text-stroke:2px var(--sky)}
.geo-cta .prose{gap:1.4rem}
.geo-cta .cta{border-color:var(--sky)}

/* hall of fame */
.hof{background:rgb(255 255 255/.06);border:1px solid rgb(255 255 255/.12);border-radius:20px;padding:clamp(1.25rem,3vw,2rem);display:grid;gap:1rem}
.hof-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.hof-head h3{font:900 1.8rem var(--f-display)}
.hof-list{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.hof-list li{display:grid;grid-template-columns:2.2rem minmax(0,12rem) 1fr 3.5rem;gap:1rem;align-items:center;padding:.6rem .75rem;border-radius:10px}
.hof-list li.creator{background:rgb(227 168 59/.14)}
.hof-list .rank{font:500 .85rem var(--f-mono);color:var(--on-dark-muted)}
.hof-list .who{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hof-list .who small{font:500 .65rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-left:.3rem}
.hof-list .bar{height:6px;border-radius:99px;background:rgb(255 255 255/.12);position:relative;overflow:hidden}
.hof-list .bar::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:linear-gradient(90deg,var(--sky),var(--gold));border-radius:99px}
.hof-list b{font:800 1.05rem var(--f-display);text-align:right;font-variant-numeric:tabular-nums}
.hof-empty{display:block!important;color:var(--on-dark-muted)}
.hof-note{font-size:.85rem;color:var(--on-dark-muted)}

/* contact */
.contact-big{display:grid;gap:0;border-top:1px solid var(--line)}
.contact-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding-block:1.4rem;border-bottom:1px solid var(--line)}
.contact-row .label{font:500 .8rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.contact-row .val{font:800 clamp(1.2rem,3vw,2rem)/1.2 var(--f-display);color:var(--navy);text-decoration:none;overflow-wrap:anywhere;user-select:all}
a.contact-row{text-decoration:none;transition:padding .25s}
a.contact-row:hover{padding-left:.75rem}
a.contact-row .val{user-select:auto}
.contact-row .go{font:900 1.6rem var(--f-display);color:var(--accent);transition:transform .25s}
a.contact-row:hover .go{transform:translateX(6px)}
footer.site{padding:2rem clamp(16px,6vw,5.5rem);background:var(--navy-deep);color:var(--on-dark-muted);font-size:.85rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* scroll reveal (only when JS turns motion on) */
.motion .reveal{opacity:0;transform:translateY(36px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.motion .reveal.in{opacity:1;transform:none}
.motion .reveal.d1{transition-delay:.1s}.motion .reveal.d2{transition-delay:.2s}.motion .reveal.d3{transition-delay:.3s}

/* ---------- phones / tablets ---------- */
@media (max-width:900px){
  :root{--rail:0px}
  .rail{inset:0 0 auto 0;width:auto;height:calc(3.75rem + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) 5rem 0 16px;flex-direction:row;border-right:0;border-bottom:1px solid var(--line)}
  .rail .name{writing-mode:horizontal-tb;transform:none;font-size:1.3rem;margin:0}
  .rail .social{flex-direction:row;gap:.25rem}
  .burger{top:calc(env(safe-area-inset-top,0px) + .4rem);right:.6rem}
  .main{padding-top:3.75rem}
  .hero{height:calc(100svh - 3.75rem)}
  .split,.geo-cta{grid-template-columns:1fr}
  .slide.intro .content,.slide.has-portrait .content{max-width:none}
  .hero-portrait{right:50%;transform:translate(50%,20px);top:1.25rem;bottom:auto;height:31%;border-radius:20px}
  .slide.on .hero-portrait{transform:translate(50%,0)}
  .hof-list li{grid-template-columns:2rem minmax(0,1fr) 3.2rem}
  .hof-list .bar{display:none}
}
@media (max-width:600px){
  .rail .social{display:none}
  .tiles{grid-template-columns:1fr}
  .post{grid-template-columns:1fr;gap:.4rem}
  .row{grid-template-columns:1fr}
  .hero-nav{gap:.6rem}
  .hero-nav .down{display:none}
  .slide{padding-bottom:7rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .reel-strip{overflow-x:auto}
}

/* tiles: label first, then the number, then the detail */
.tile b{order:0}

/* journey: let the photo behind show through a little more */
.sec.tinted.light::before{background:linear-gradient(90deg,rgb(17 45 110/.9) 0%,rgb(28 72 160/.62) 48%,rgb(31 55 86/.55) 100%)}

/* Boston card with a waving flag */
.boston{position:relative;margin-top:clamp(2rem,4vw,3rem);border-radius:20px;overflow:hidden;background:rgb(10 22 45/.75);min-height:15rem;display:grid;align-items:center;isolation:isolate;border:1px solid rgb(255 255 255/.12)}
.boston canvas{position:absolute;right:-2%;top:50%;transform:translateY(-50%);height:118%;width:auto;max-width:none;z-index:-2;opacity:.9;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 38%);mask-image:linear-gradient(90deg,transparent 0%,#000 38%)}
.boston::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgb(10 22 45/.95) 0%,rgb(10 22 45/.6) 45%,rgb(10 22 45/.15) 100%)}
.boston h3{font:900 clamp(2.4rem,6vw,4rem)/1 var(--f-display);text-transform:uppercase}

/* music: a soft nature photo fading into the page under the video */
#music{position:relative;isolation:isolate;overflow:hidden}
.music-bg{position:absolute;left:0;bottom:0;width:58%;height:72%;z-index:-1;opacity:.5;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 40% 70%,#000 25%,transparent 75%);mask-image:radial-gradient(ellipse 70% 70% at 40% 70%,#000 25%,transparent 75%)}
.music-bg img{width:100%;height:100%;object-fit:cover}

/* Karnei Shomron: photo behind the chapter, fading into the page */
.story{position:relative;isolation:isolate}
.chapter.backdrop{position:relative}
.chapter-bg{position:absolute;inset:-4rem -6% -3rem;z-index:-1;opacity:.55;
  -webkit-mask-image:radial-gradient(ellipse 60% 62% at 50% 50%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 60% 62% at 50% 50%,#000 30%,transparent 80%)}
.chapter-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.chapter-bg.multi img{opacity:0;transition:opacity 1.6s ease}
.chapter-bg.multi img.on{opacity:1}
.banner.plain{background:transparent}
.banner.plain::before{mix-blend-mode:normal;background:linear-gradient(90deg,rgb(17 45 110/.92) 0%,rgb(28 72 160/.8) 55%,rgb(40 95 190/.6) 100%)}
.banner.plain::after{display:none}

@media (max-width:1100px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.tiles{grid-template-columns:1fr}.music-bg{width:100%;height:40%}.boston canvas{opacity:.45}}

/* hero photos on slides 03–05: no hard frame, edges fade into the slide */
.slide.has-portrait .hero-portrait{border-radius:0;box-shadow:none;height:min(90%,48rem);bottom:4.4rem;right:clamp(0rem,4vw,4rem);aspect-ratio:4/5;
  -webkit-mask-image:radial-gradient(ellipse 58% 60% at 50% 46%,#000 50%,transparent 100%);mask-image:radial-gradient(ellipse 58% 60% at 50% 46%,#000 50%,transparent 100%)}
.slide.has-portrait .bg::after{background:linear-gradient(90deg,rgb(15 31 54/.2) 0%,rgb(15 31 54/0) 60%),linear-gradient(180deg,rgb(15 31 54/.1) 0%,rgb(15 31 54/.85) 100%)}

/* latest updates: full-width photo header with centred text */
.updates-hero{position:relative;margin:calc(-1 * var(--py)) calc(-1 * var(--px)) clamp(2.5rem,5vw,4rem);min-height:clamp(24rem,62vh,38rem);display:grid;place-items:center;text-align:center;overflow:hidden;isolation:isolate;color:var(--on-dark)}
.updates-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;z-index:-2;animation:kenburns 22s ease-in-out infinite alternate}
.updates-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgb(10 20 40/.55),rgb(10 20 40/.72))}
.uh-text{display:grid;gap:1rem;justify-items:center;padding:2rem 16px;max-width:42rem}
.uh-text h2{font:900 clamp(2.6rem,6.5vw,5rem)/1 var(--f-display);letter-spacing:-.02em}
.uh-text p{font-size:clamp(1.05rem,1.8vw,1.25rem);color:rgb(255 255 255/.85)}
.uh-text .cta{justify-self:center}
@media (max-width:900px){
  .slide.has-portrait .hero-portrait{height:40%;top:.5rem;bottom:auto;right:50%;transform:translate(50%,20px)}
  .slide.has-portrait.on .hero-portrait{transform:translate(50%,0)}
}
/* keep chapter text readable where the photo sits behind it */
.chapter.backdrop .text{text-shadow:0 0 14px rgb(255 255 255/.95),0 0 3px rgb(255 255 255/.9)}
@media (max-width:900px){
  .chapter-bg{inset:-2rem -16px auto;height:24rem;opacity:.5}
}

/* Instagram mark above the heading */
.ig-mark{display:inline-flex;align-items:center;gap:1rem;text-decoration:none;color:var(--navy);margin-bottom:.5rem;justify-self:start}
.ig-mark svg{width:clamp(4.5rem,8vw,6.5rem);height:auto;filter:drop-shadow(0 18px 30px rgb(214 36 159/.35));transition:transform .4s;transform-origin:50% 85%;animation:igdance 2.8s ease-in-out infinite}
.ig-mark:hover svg{transform:rotate(-6deg) scale(1.06)}
.ig-mark span{display:grid;gap:.15rem}
.ig-mark b{font:800 1.2rem var(--f-display)}
.ig-mark small{font-size:.9rem;color:var(--muted)}
@keyframes igfloat{50%{translate:0 -8px}}
@keyframes igdance{0%,62%,100%{rotate:0deg;translate:0 0;scale:1}10%{rotate:-9deg;translate:0 -7px}20%{rotate:7deg;translate:0 -3px}30%{rotate:-5deg;translate:0 -6px;scale:1.05}40%{rotate:3deg;translate:0 0}50%{rotate:0deg;scale:.97}}

/* streaming logos next to the Music heading */
.music-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.stream-logos{display:flex;gap:clamp(.75rem,2vw,1.5rem);flex-wrap:wrap}
.stream-logos a{display:grid;justify-items:center;gap:.5rem;text-decoration:none;color:var(--navy);font:700 .85rem var(--f-display);
  padding:1rem 1.1rem;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:0 12px 28px rgb(15 31 54/.08);transition:transform .3s,box-shadow .3s}
.stream-logos a:nth-child(2){transform:translateY(-10px)}
.stream-logos a:hover{transform:translateY(-6px) scale(1.04);box-shadow:0 18px 36px color-mix(in srgb,var(--c) 30%,transparent)}
.stream-logos svg{width:clamp(3rem,5vw,4rem);height:auto}

/* phones: the photo fills the top of the slide and fades out under the text */
@media (max-width:900px){
  .slide .hero-portrait,.slide.has-portrait .hero-portrait,.slide.on .hero-portrait,.slide.has-portrait.on .hero-portrait{
    position:absolute;inset:0 0 auto 0;width:100%;height:72%;max-width:none;max-height:none;aspect-ratio:auto;
    transform:none;border-radius:0;box-shadow:none;object-fit:cover;
    -webkit-mask-image:linear-gradient(180deg,#000 45%,rgb(0 0 0/.35) 75%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 45%,rgb(0 0 0/.35) 75%,transparent 100%)}
  .slide .hero-portrait{opacity:0;transition:opacity 1s .2s}
  .slide.on .hero-portrait{opacity:.85}
  .slide .content{text-shadow:0 2px 18px rgb(8 18 36/.75)}
  .slide .big-num{display:none}
}

/* ---------- hero: bigger photo, livelier type (desktop) ---------- */
.slide .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.slide .w>span{display:inline-block;transform:translateY(110%);transition:transform 1.1s cubic-bezier(.2,.75,.2,1);transition-delay:calc(var(--i) * 70ms + .15s)}
.slide.on .w>span{transform:none}
.slide .grad,.slide .grad .w>span{background:linear-gradient(100deg,#fff 0%,#cfe0fb 40%,var(--gold) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.slide h2{background:linear-gradient(180deg,#fff 30%,#bcd2f5);-webkit-background-clip:text;background-clip:text}
.slide h2 .w>span{background:inherit;-webkit-background-clip:text;background-clip:text;color:transparent}
.slide .eyebrow{display:inline-flex;align-items:center;gap:.8rem}
.slide .eyebrow::before{content:"";width:2.6rem;height:2px;background:var(--gold)}
.slide .sub{border-left:3px solid var(--gold);padding-left:1.1rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.cta.solid{background:var(--on-dark);color:var(--navy-deep);border-color:var(--on-dark)}
.cta.solid:hover{background:var(--gold);border-color:var(--gold);color:var(--navy-deep)}
.route-chip{font:500 .85rem var(--f-mono);color:var(--on-dark-muted);padding:.6rem 1rem;border-radius:999px;background:rgb(255 255 255/.07);border:1px solid rgb(255 255 255/.14);backdrop-filter:blur(6px)}
.route-chip i{font-style:normal;color:var(--gold)}
@media (min-width:901px){
  .hero .slide .hero-portrait{top:0;right:0;bottom:0;left:auto;height:100%;width:60%;max-width:none;aspect-ratio:auto;border-radius:0;box-shadow:none;object-fit:cover;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgb(0 0 0/.55) 22%,#000 45%);mask-image:linear-gradient(90deg,transparent 0%,rgb(0 0 0/.55) 22%,#000 45%);
    transform:scale(1.06);opacity:0;transition:transform 8s ease-out,opacity 1.2s}
  .hero .slide.on .hero-portrait{transform:scale(1);opacity:1}
  .hero .slide.intro .content,.hero .slide.has-portrait .content{max-width:min(48rem,52%)}
  .hero .slide.intro::after,.hero .slide.has-portrait::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(180deg,transparent,rgb(15 31 54/.85));pointer-events:none}
  .hero .slide .content{z-index:1}
  .slide.intro h1{font-size:clamp(4rem,8.5vw,8rem)}
}
@media (prefers-reduced-motion:reduce){.slide .w>span{transform:none}}
@media (min-width:901px){
  .hero{height:clamp(36rem,90svh,56rem)}
  .slide{align-content:center;padding-top:3rem;padding-bottom:6.5rem}
}
.slide .grad,.slide .grad .w>span,.slide h2,.slide h2 .w>span{text-shadow:none}
@media (max-width:900px){.slide .grad .w>span,.slide h2 .w>span{filter:drop-shadow(0 2px 10px rgb(8 18 36/.6))}}

/* slide 01: low-res portrait shown narrower so it stays sharp, still full height with the faded left edge */
@media (min-width:901px){
  .hero .slide.intro .hero-portrait{width:min(44%,40rem);object-position:center 25%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgb(0 0 0/.6) 25%,#000 50%);mask-image:linear-gradient(90deg,transparent 0%,rgb(0 0 0/.6) 25%,#000 50%)}
}

/* smoother slide changes: the outgoing slide fades out fast, then resets out of sight */
.slide{transition:opacity 1.6s cubic-bezier(.4,0,.2,1),visibility 1.6s}
.slide .content>*{transition:opacity .7s ease,transform .7s ease}
.slide .content>:is(h1,h2,.motto,.he-line){transform:none}
.slide:not(.on) .content>*{opacity:0;transition:opacity .25s ease,transform 0s linear .5s}
.slide:not(.on) .w>span{transition:transform 0s linear .5s}
.hero .slide:not(.on) .hero-portrait{transition:opacity .5s ease,transform 0s linear .6s}
.slide:not(.on) .bg{transition:transform 0s linear .9s}

/* About photo: soft entrance (gentle fade, slight rise and settle) */
.portrait{position:relative}
.motion .portrait img{opacity:0;transform:translateY(18px) scale(1.04);transition:opacity 1.4s ease .2s,transform 1.8s cubic-bezier(.2,.7,.2,1) .2s}
.motion .reveal.in .portrait img{opacity:1;transform:none}
/* incoming words wait until the outgoing slide's text has faded */
.slide.on .w>span{transition-delay:calc(var(--i) * 60ms + .3s)}

/* slide transition v2: each line slides up and fades in, no per-word clipping */
.slide .content>*,.slide .content>:is(h1,h2,.motto,.he-line){opacity:0;transform:translateY(14px);transition:opacity 1s ease,transform 1.2s cubic-bezier(.2,.75,.2,1)}
.slide.on .content>*,.slide.on .content>:is(h1,h2,.motto,.he-line){opacity:1;transform:none}
.slide.on .content>:nth-child(1){transition-delay:.5s}
.slide.on .content>:nth-child(2){transition-delay:.65s}
.slide.on .content>:nth-child(3){transition-delay:.8s}
.slide.on .content>:nth-child(4){transition-delay:.95s}
.slide:not(.on) .content>*,.slide:not(.on) .content>:is(h1,h2,.motto,.he-line){opacity:0;transition:opacity .7s ease,transform 0s linear .8s}
.slide h2{color:transparent}
/* gradient-clipped text flickers while it animates in Chrome: keep slide headings solid */
.slide h2{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--on-dark)}
.slide .content>*{will-change:opacity,transform;backface-visibility:hidden}

/* About: Instagram still, soft edges and a gentle entrance */
.about-photo{margin:.5rem 0;position:relative;max-width:30rem}
.about-photo img{width:100%;aspect-ratio:9/10;object-fit:cover;object-position:center 40%;border-radius:22px;
  -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,#000 70%,transparent 100%)}
.about-photo figcaption{position:absolute;left:1rem;bottom:1.4rem;font:600 .8rem var(--f-mono);letter-spacing:.06em;color:var(--navy);background:rgb(255 255 255/.85);backdrop-filter:blur(6px);padding:.35rem .7rem;border-radius:999px}
.motion .about-photo img{opacity:0;transform:translateY(18px) scale(1.03);transition:opacity 1.4s ease .3s,transform 1.8s cubic-bezier(.2,.7,.2,1) .3s}
.motion .reveal.in .about-photo img{opacity:1;transform:none}

/* name: a gold band glides across the white name; it enters almost right away, and the name gently floats */
.slide.intro h1{background:linear-gradient(110deg,#fff 0%,#fff 30%,#cfe0fb 40%,#f0c66e 48%,var(--gold) 52%,#cfe0fb 60%,#fff 70%,#fff 100%);
  background-size:300% 100%;background-position:88% 0;-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;
  animation:goldsweep 6s ease .3s infinite alternate}
.slide.intro h1 .w1,.slide.intro h1 .grad{background:none;color:inherit;-webkit-background-clip:border-box;background-clip:border-box}
@keyframes goldsweep{from{background-position:88% 0}to{background-position:0 0}}
@keyframes namefloat{0%,100%{transform:none}50%{transform:translateY(-6px)}}
@media (max-width:900px){.slide.intro h1{filter:drop-shadow(0 2px 10px rgb(8 18 36/.55))}}

/* first visit: one elegant opening sequence (CSS only, runs once, ends in the normal state) */
@keyframes in-up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes in-fade{from{opacity:0}to{opacity:1}}
@keyframes in-left{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@keyframes in-line{from{width:0}to{width:2.6rem}}
@keyframes in-photo{from{opacity:0;transform:translateX(48px) scale(1.08)}to{opacity:1;transform:none}}
@keyframes in-photo-m{from{opacity:0;transform:scale(1.06)}to{opacity:.85;transform:none}}
.rail{animation:in-left .9s cubic-bezier(.2,.7,.2,1) .1s backwards}
.burger{animation:in-fade .8s ease .6s backwards}
.hero-nav{animation:in-up .9s cubic-bezier(.2,.7,.2,1) 1.5s backwards}
.slide.intro .content>.eyebrow{animation:in-up .8s cubic-bezier(.2,.7,.2,1) .35s backwards}
.slide.intro .content>.eyebrow::before{animation:in-line .8s ease .7s backwards}
.slide.intro .content>h1{animation:in-up 1s cubic-bezier(.2,.7,.2,1) .5s backwards,goldsweep 6s ease .3s infinite alternate,namefloat 5s ease-in-out 1.5s infinite}
.slide.intro .content>.sub{animation:in-up .9s cubic-bezier(.2,.7,.2,1) .8s backwards}
.slide.intro .content>.hero-actions{animation:in-up .9s cubic-bezier(.2,.7,.2,1) 1s backwards}
@media (min-width:901px){.hero .slide.intro .hero-portrait{animation:in-photo 1.6s cubic-bezier(.2,.7,.2,1) .2s backwards}}
@media (max-width:900px){.slide.intro .hero-portrait{animation:in-photo-m 1.4s ease .1s backwards}}
@media (prefers-reduced-motion:reduce){.rail,.burger,.hero-nav,.slide.intro .content>*,.slide.intro .content>.eyebrow::before,.slide.intro .hero-portrait{animation:none!important}}

/* slide 01: city at sunset behind, portrait warmed to match and melted into the skyline */
.slide.intro .bg.city{background-size:cover}
.slide.intro .bg.city::after{background:
  linear-gradient(90deg,rgb(22 14 40/.9) 0%,rgb(30 18 48/.72) 32%,rgb(40 22 55/.25) 62%,rgb(40 22 55/.1) 100%),
  linear-gradient(180deg,rgb(22 14 40/.1) 55%,rgb(15 18 40/.9) 100%)}
.slide.intro .eyebrow{color:#f5c27a}
.slide.intro .sub{border-left-color:#f5c27a;color:rgb(255 240 235/.85)}
@media (min-width:901px){
  .hero .slide.intro .hero-portrait{width:min(46%,42rem);
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgb(0 0 0/.35) 18%,rgb(0 0 0/.85) 42%,#000 60%),linear-gradient(180deg,#000 75%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent 0%,rgb(0 0 0/.35) 18%,rgb(0 0 0/.85) 42%,#000 60%),linear-gradient(180deg,#000 75%,transparent 100%);
    mask-composite:intersect}
}
@media (max-width:900px){
  .slide.intro .hero-portrait{-webkit-mask-image:linear-gradient(180deg,#000 40%,rgb(0 0 0/.3) 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 40%,rgb(0 0 0/.3) 72%,transparent 100%)}
}
/* slide 01 tuning: let the sunset show, and tie photo + city together with one shared tone */
.slide.intro .bg.city{background-position:30% 40%}
.slide.intro .bg.city::after{background:
  linear-gradient(90deg,rgb(22 14 40/.82) 0%,rgb(30 18 48/.55) 30%,rgb(40 22 55/.12) 55%,transparent 75%),
  linear-gradient(180deg,transparent 50%,rgb(15 18 40/.85) 100%)}
.slide.intro::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgb(255 120 150/.22) 0%,rgb(255 160 110/.12) 45%,rgb(20 16 40/.35) 100%);mix-blend-mode:soft-light}
.slide.intro .content{z-index:2}
.hero .slide.intro .hero-portrait{filter:saturate(1.08) brightness(.92) contrast(1.04)}
@media (min-width:901px){
  .hero .slide.intro .hero-portrait{width:min(50%,46rem);
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgb(0 0 0/.25) 22%,rgb(0 0 0/.7) 45%,#000 65%),linear-gradient(180deg,rgb(0 0 0/.55) 0%,#000 30%,#000 78%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0%,rgb(0 0 0/.25) 22%,rgb(0 0 0/.7) 45%,#000 65%),linear-gradient(180deg,rgb(0 0 0/.55) 0%,#000 30%,#000 78%,transparent 100%)}
}

/* slide 01 v2: city and portrait side by side, meeting in a soft seam */
.slide.intro .bg.city{right:auto;width:62%;
  -webkit-mask-image:linear-gradient(90deg,#000 70%,transparent 100%);mask-image:linear-gradient(90deg,#000 70%,transparent 100%)}
.slide.intro .bg.city::after{background:linear-gradient(90deg,rgb(22 14 40/.8) 0%,rgb(30 18 48/.5) 45%,rgb(30 18 48/.2) 100%),linear-gradient(180deg,transparent 55%,rgb(15 18 40/.85) 100%)}
.slide.intro{background:#1a1230}
@media (min-width:901px){
  .hero .slide.intro .hero-portrait{width:46%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 22%),linear-gradient(180deg,#000 80%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0%,#000 22%),linear-gradient(180deg,#000 80%,transparent 100%);
    -webkit-mask-composite:source-in;mask-composite:intersect}
}
@media (max-width:900px){
  .slide.intro .bg.city{width:58%;height:72%;bottom:auto}
  .slide.intro .hero-portrait,.slide.intro.on .hero-portrait{left:auto;right:0;width:56%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 25%),linear-gradient(180deg,#000 45%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0%,#000 25%),linear-gradient(180deg,#000 45%,transparent 100%);
    -webkit-mask-composite:source-in;mask-composite:intersect}
}
/* slide 01: portrait toned down — darker, natural colors with only a hint of warmth */
.hero .slide.intro .hero-portrait{filter:brightness(.8) contrast(1.08) saturate(.92) sepia(.06)}
.slide.intro::before{background:linear-gradient(90deg,rgb(255 120 150/.22) 0%,rgb(255 150 120/.12) 50%,rgb(255 170 130/.04) 75%,transparent 100%),linear-gradient(180deg,transparent 50%,rgb(20 16 40/.35) 100%)}
/* slide 03: show the whole photo top to bottom (it ends at the chest), instead of zooming in on the face */
@media (min-width:901px){
  .hero .slide .hero-portrait.idf-photo{width:auto;aspect-ratio:575/852;height:100%;object-fit:cover;object-position:center top;right:3%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 28%,#000 85%,transparent 100%),linear-gradient(180deg,#000 82%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0%,#000 28%,#000 85%,transparent 100%),linear-gradient(180deg,#000 82%,transparent 100%);
    -webkit-mask-composite:source-in;mask-composite:intersect}
}

/* slides 03–05: a scene on the left behind the text, the photo of Shaked on the right, meeting in a soft seam (same idea as 01) */
.slide .bg.scene{right:auto;width:62%;background-size:cover;
  -webkit-mask-image:linear-gradient(90deg,#000 68%,transparent 100%);mask-image:linear-gradient(90deg,#000 68%,transparent 100%)}
.slide .bg.scene::after{background:linear-gradient(90deg,rgb(12 18 34/.82) 0%,rgb(14 20 38/.55) 45%,rgb(14 20 38/.2) 100%),linear-gradient(180deg,transparent 55%,rgb(12 18 34/.85) 100%)}
.slide.has-portrait{background:#141826}
@media (min-width:901px){
  .hero .slide.has-portrait .hero-portrait:not(.idf-photo){width:46%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 22%),linear-gradient(180deg,#000 80%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0%,#000 22%),linear-gradient(180deg,#000 80%,transparent 100%);
    -webkit-mask-composite:source-in;mask-composite:intersect}
}
@media (max-width:900px){
  .slide .bg.scene{width:58%;height:72%;bottom:auto}
  .slide.has-portrait .hero-portrait,.slide.has-portrait.on .hero-portrait{left:auto;right:0;width:56%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 25%),linear-gradient(180deg,#000 45%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0%,#000 25%),linear-gradient(180deg,#000 45%,transparent 100%);
    -webkit-mask-composite:source-in;mask-composite:intersect}
}

/* slide 06: Jerusalem (left) flows into Singapore (right) */
.slide .bg.sg{left:30%}
.slide .bg.kotel{right:auto;width:62%;background-size:cover;z-index:1;
  -webkit-mask-image:linear-gradient(90deg,#000 55%,transparent 100%);mask-image:linear-gradient(90deg,#000 55%,transparent 100%)}
.slide .bg.kotel::after{background:linear-gradient(90deg,rgb(10 18 34/.8) 0%,rgb(10 18 34/.5) 45%,rgb(10 18 34/.15) 100%),linear-gradient(180deg,transparent 55%,rgb(10 18 34/.85) 100%)}
.slide .bg.sg::after{background:linear-gradient(180deg,rgb(10 18 34/.1) 40%,rgb(10 18 34/.8) 100%)}
.slide:has(.bg.kotel) .content{z-index:2}
@media (max-width:900px){.slide .bg.kotel{width:70%}.slide .bg.sg{left:25%}}
.hero-nav{z-index:5}

/* slide 04: start on the full Washington scene (monument, Capitol, Lincoln Memorial) and drift slowly upward */
.slide .bg.scene.pan-up{background-size:cover;background-position:center 82%;animation:pan-up 16s ease-in-out infinite alternate}
@keyframes pan-up{from{background-position:center 82%}to{background-position:center 45%}}
@media (prefers-reduced-motion:reduce){.slide .bg.scene.pan-up{animation:none}}

/* About: bright sky-and-field photo behind the section under a light wash (airy, positive) */
.sec.about-photo-bg{position:relative;isolation:isolate;overflow:hidden}
.about-bg{position:absolute;inset:0;z-index:-2}
.about-bg img{width:100%;height:100%;object-fit:cover;object-position:center 30%;animation:kenburns 26s ease-in-out infinite alternate}
.sec.about-photo-bg::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgb(255 255 255/.9) 0%,rgb(248 251 255/.82) 45%,rgb(240 246 255/.6) 100%),
             linear-gradient(180deg,rgb(255 255 255/.25) 0%,rgb(255 255 255/0) 40%,rgb(255 255 255/.85) 100%)}
.about-photo-bg .roles-line span{background:rgb(255 255 255/.75);backdrop-filter:blur(6px)}
.about-photo-bg .tiles{box-shadow:0 20px 50px rgb(15 31 54/.12)}
@media (max-width:900px){.sec.about-photo-bg::before{background:linear-gradient(180deg,rgb(255 255 255/.75),rgb(255 255 255/.9))}}

/* About: achievements fill the left column, beside the text */
#about .split{align-items:stretch}
#about .sec-head{display:flex;flex-direction:column;gap:1rem}
.side-tiles{flex:1;margin-top:1rem;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;background:rgb(223 229 238/.7);
  box-shadow:0 20px 50px rgb(15 31 54/.12);backdrop-filter:blur(4px)}
.side-tiles .tile{background:rgb(255 255 255/.86);padding:clamp(1.25rem,2.4vw,2rem);align-content:center}
.side-tiles .tile .n{font-size:clamp(2.6rem,4.2vw,3.8rem)}
@media (max-width:600px){.side-tiles{grid-template-columns:1fr 1fr}.side-tiles .tile .n{font-size:2.2rem}}
@media (max-width:380px){.side-tiles{grid-template-columns:1fr}}

/* Story: chapter text as a frosted card with a lead line, drop cap and gold accent */
.chapter .text{position:relative;margin-top:-3.25rem;margin-left:clamp(0rem,3vw,3rem);max-width:48rem;padding:clamp(1.5rem,3vw,2.4rem) clamp(1.4rem,3vw,2.6rem);
  background:rgb(255 255 255/.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:18px;
  border:1px solid rgb(255 255 255/.7);box-shadow:0 22px 50px rgb(15 31 54/.12);text-shadow:none!important}
.chapter .text::before{content:"";position:absolute;left:0;top:1.6rem;bottom:1.6rem;width:4px;border-radius:0 4px 4px 0;background:linear-gradient(var(--gold),var(--accent))}
.chapter .text>p:first-child{font-size:clamp(1.12rem,1.6vw,1.28rem);line-height:1.6;color:var(--navy);font-weight:500}
.chapter .text>p:first-child::first-letter{float:left;font:900 3.4em/.82 var(--f-display);color:var(--gold);margin:.06em .12em 0 0}
.chapter .text>p+p{color:#3b4a60}
@media (max-width:900px){.chapter .text{margin-top:-2rem;margin-left:0}}

/* Latest updates: light, techy backdrop (soft grid, dots and drifting glows) */
#updates{position:relative;isolation:isolate;overflow:hidden;
  background:
    radial-gradient(circle at 1px 1px,rgb(47 111 224/.18) 1px,transparent 1.6px) 0 0/26px 26px,
    linear-gradient(rgb(47 111 224/.05) 1px,transparent 1px) 0 0/104px 104px,
    linear-gradient(90deg,rgb(47 111 224/.05) 1px,transparent 1px) 0 0/104px 104px,
    linear-gradient(180deg,#f4f7fc,#eef3fb)}
#updates::before,#updates::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(70px);pointer-events:none}
#updates::before{width:34rem;height:34rem;left:-8rem;top:42%;background:rgb(127 176 255/.35);animation:drift1 18s ease-in-out infinite alternate}
#updates::after{width:28rem;height:28rem;right:-6rem;bottom:-6rem;background:rgb(227 168 59/.22);animation:drift2 22s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(8rem,-4rem)}}
@keyframes drift2{to{transform:translate(-6rem,-5rem)}}
#updates .post{background:rgb(255 255 255/.85);backdrop-filter:blur(8px)}
#updates .updates-hero{z-index:0}
@media (prefers-reduced-motion:reduce){#updates::before,#updates::after{animation:none}}

/* About stats v2: compact cards, and the left column stays in view while the text scrolls (no stretched empty boxes) */
#about .split{align-items:start}
#about .sec-head{position:sticky;top:2rem}
.side-tiles{flex:none;grid-auto-rows:auto;background:none;box-shadow:none;border:0;gap:.9rem;overflow:visible;backdrop-filter:none}
.side-tiles .tile{align-content:start;gap:.35rem;padding:1.3rem 1.4rem 1.4rem;border-radius:16px;background:rgb(255 255 255/.88);
  border:1px solid rgb(223 229 238/.9);box-shadow:0 10px 26px rgb(15 31 54/.08);position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s}
.side-tiles .tile::before{content:"";position:absolute;left:1.4rem;top:0;width:2.4rem;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,var(--gold),var(--accent))}
.side-tiles .tile:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgb(15 31 54/.12)}
.side-tiles .tile b{font:700 .78rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.side-tiles .tile .n{font-size:clamp(2.2rem,3.4vw,3rem);line-height:1}
.side-tiles .tile span:last-child{font-size:.88rem;line-height:1.45}
@media (max-width:900px){#about .sec-head{position:static}}

/* About stats: the "Years" unit sits smaller beside the number */
.side-tiles .tile .n .unit{font-size:.5em;font-weight:800;letter-spacing:0;margin-left:.1em}

/* About stats fill the column: roomier cards and larger text */
.side-tiles{gap:1.1rem}
.side-tiles .tile{padding:1.8rem 1.7rem 1.9rem;gap:.6rem;min-height:15rem;align-content:center}
.side-tiles .tile b{font-size:.9rem}
.side-tiles .tile .n{font-size:clamp(2.8rem,4.2vw,3.8rem)}
.side-tiles .tile span:last-child{font-size:1.05rem;line-height:1.55;color:#3b4a60}
.side-tiles .tile::before{left:1.7rem;width:3rem}

/* Story: wide text panel across the chapter, lighter so the photo behind shows through, sitting below the banner */
.chapter .text{margin:1.2rem 0 0;max-width:none;width:100%;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:clamp(1.5rem,4vw,3.5rem);row-gap:1rem;align-items:start;
  padding:clamp(1.6rem,3vw,2.4rem) clamp(1.6rem,3.5vw,3rem);
  background:rgb(255 255 255/.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.chapter .text>p:first-child{grid-row:1 / span 6;margin:0}
.chapter .text>p+p{grid-column:2;margin:0}
.chapter .text::before{top:1.8rem;bottom:1.8rem}
@media (max-width:900px){
  .chapter .text{grid-template-columns:1fr;margin-top:1rem}
  .chapter .text>p:first-child{grid-row:auto}
  .chapter .text>p+p{grid-column:1}
}

/* Story v3 (Pluto-inspired): lighter banner tint so the photo shows, and calm, uniform text */
.banner.plain::before{background:linear-gradient(90deg,rgb(17 45 110/.62) 0%,rgb(28 72 160/.38) 50%,rgb(40 95 190/.12) 100%)}
.banner .bn-text h3,.banner .bn-text p{text-shadow:0 2px 18px rgb(8 20 50/.45)}
.chapter-bg{opacity:.75}

.chapter .text{display:block;margin:1.5rem auto 0;max-width:52rem;width:100%;text-align:center;
  padding:clamp(1.8rem,3.4vw,2.8rem) clamp(1.6rem,4vw,3.4rem);
  background:rgb(255 255 255/.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgb(255 255 255/.8);border-radius:20px;box-shadow:0 18px 44px rgb(15 31 54/.08)}
.chapter .text::before{display:none}
.chapter .text .ch-label{display:block;margin-bottom:1rem;font:600 .78rem var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:#e0703f}
.chapter .text>p,.chapter .text>p:first-of-type,.chapter .text>p+p{grid-column:auto;grid-row:auto;margin:0 0 1rem;
  font:400 1.08rem/1.75 var(--f-body);color:#2c3a50}
.chapter .text>p:last-child{margin-bottom:0}
.chapter .text>p::first-letter{float:none;font:inherit;color:inherit;margin:0}
@media (max-width:900px){.chapter .text{text-align:left;margin-top:1rem}}

/* slide 01: zoomed-out portrait, whole photo visible and anchored to the bottom (sharper than the enlarged crop) */
@media (min-width:901px){
  .hero .slide.intro .hero-portrait{top:auto;bottom:0;height:96%;width:auto;aspect-ratio:1350/1800;right:4%;object-fit:cover;object-position:center top;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 88%,transparent 100%),linear-gradient(180deg,#000 82%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 88%,transparent 100%),linear-gradient(180deg,#000 82%,transparent 100%);
    -webkit-mask-composite:source-in;mask-composite:intersect}
}

/* About stats are links to the matching part of the story */
a.tile{text-decoration:none;color:inherit;cursor:pointer}
a.tile::after{content:"Read more →";font:600 .8rem var(--f-display);color:var(--accent);margin-top:.4rem;opacity:.75;transition:opacity .2s,transform .2s}
a.tile:hover::after{opacity:1;transform:translateX(4px)}
a.tile:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.chapter,#instagram{scroll-margin-top:2rem}

/* motto slide: words rise one by one, the quote mark pops, "choice" turns gold and gets underlined */
.slide .motto .w>span{transition-delay:calc(var(--i) * 70ms + .35s)}
.slide .motto::before{transform-origin:left bottom}
.slide.on .motto::before{animation:quotepop .7s cubic-bezier(.3,1.6,.5,1) .2s backwards}
@keyframes quotepop{from{opacity:0;transform:scale(.4) rotate(-12deg)}}
.slide .motto .hl{position:relative}
.slide .motto .hl>span{transition:transform .9s cubic-bezier(.2,.75,.2,1) calc(var(--i) * 70ms + .35s),color .6s ease 1.5s}
.slide.on .motto .hl>span{color:var(--gold)}
.slide .motto .hl::after{content:"";position:absolute;left:0;bottom:.04em;height:.07em;width:0;background:var(--gold);border-radius:2px}
.slide.on .motto .hl::after{animation:hl-line .6s ease 1.7s forwards}
@keyframes hl-line{to{width:100%}}
.slide.on .motto{animation:mottodrift 6s ease-in-out 1.8s infinite}
@keyframes mottodrift{0%,100%{transform:none}50%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){.slide.intro .content>h1,.slide.on .motto,.slide.on .motto::before{animation:none!important}}

/* Instagram: the story as two cards with an Instagram-gradient edge, and a gradient follow button */
.ig-story{display:grid;gap:1rem}
.ig-card{position:relative;padding:1.3rem 1.4rem 1.3rem 1.6rem;border-radius:18px;background:var(--surface);border:1px solid var(--line);
  box-shadow:0 14px 34px rgb(15 31 54/.07);overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.ig-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,#fdc468,#fd5949 35%,#d6249f 65%,#285AEB)}
.ig-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgb(214 36 159/.13)}
.ig-card h3{font:800 1.3rem/1.2 var(--f-display);color:var(--navy);margin:.35rem 0 .45rem}
.ig-card p{margin:0;line-height:1.65}
.ig-tag{font:500 .72rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;
  background:linear-gradient(90deg,#fd5949,#d6249f);-webkit-background-clip:text;background-clip:text;color:transparent}
.motion .ig-story .ig-card{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.motion .reveal.in .ig-card{opacity:1;transform:none}
.motion .reveal.in .ig-card+.ig-card{transition-delay:.18s}
.motion .reveal.in .ig-card:hover{transform:translateY(-4px)}
.ig-follow{display:inline-flex;align-items:center;gap:.55rem;margin-top:.3rem;padding:.8rem 1.35rem;border-radius:999px;text-decoration:none;color:#fff;
  font:700 .95rem var(--f-display);background:linear-gradient(90deg,#fd5949,#d6249f 55%,#285AEB);background-size:180% 100%;
  box-shadow:0 12px 26px rgb(214 36 159/.28);transition:background-position .5s,transform .25s}
.ig-follow:hover{background-position:100% 0;transform:translateY(-2px)}

/* Music: two quiet notes resting on the grass under the video */
.music-left{display:grid;gap:clamp(1.5rem,3vw,2.4rem)}
.music-notes{display:grid;gap:1rem;max-width:30rem}
.note{position:relative;padding:1.15rem 1.3rem 1.2rem;border-radius:18px;background:rgb(255 255 255/.62);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgb(255 255 255/.75);box-shadow:0 14px 34px rgb(15 31 54/.08)}
.note:nth-child(2){margin-left:clamp(1rem,4vw,3rem)}
.note p{margin:0;color:var(--ink);line-height:1.65}
.note-tag{display:inline-flex;align-items:center;gap:.55rem;margin-bottom:.45rem;font:500 .72rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.note-tag::before{content:"\266A";font-size:1rem;line-height:1;color:var(--gold)}
.note:nth-child(2) .note-tag::before{content:"\266B"}
@media (max-width:900px){.note:nth-child(2){margin-left:0}}
@media (prefers-reduced-motion:reduce){.ig-mark svg{animation:none}}

/* ================= 2026-10-15 batch ================= */

/* Instagram: follow button beside the heading, story cards side by side under the reels */
.ig-cta{display:flex;justify-content:flex-end;align-items:flex-end}
.ig-below{margin-top:clamp(2rem,4vw,3rem)}
.ig-story.cols{grid-template-columns:1fr 1fr;gap:clamp(1rem,2.5vw,1.6rem)}
@media (max-width:800px){.ig-story.cols{grid-template-columns:1fr}.ig-cta{justify-content:flex-start}}

/* Music: dancing streaming logos, a live equalizer, drifting notes and gently floating cards */
.eq{display:inline-flex;align-items:flex-end;gap:4px;height:.55em;margin-left:.25em;vertical-align:baseline}
.eq i{width:6px;height:100%;border-radius:3px;background:linear-gradient(180deg,var(--gold),#f0c66e);transform-origin:bottom;animation:eqbar 1.1s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:-.35s;animation-duration:.9s}.eq i:nth-child(3){animation-delay:-.7s;animation-duration:1.3s}
.eq i:nth-child(4){animation-delay:-.2s;animation-duration:1s}.eq i:nth-child(5){animation-delay:-.55s;animation-duration:1.2s}
@keyframes eqbar{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
.stream-logos svg{animation:igdance 3.2s ease-in-out infinite;transform-origin:50% 85%}
.stream-logos a:nth-child(2) svg{animation-delay:.5s}.stream-logos a:nth-child(3) svg{animation-delay:1s}
.music-float{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.music-float span{position:absolute;bottom:-2rem;font-size:clamp(1.4rem,2.4vw,2.2rem);color:var(--gold);opacity:0;animation:noterise 11s linear infinite}
.music-float span:nth-child(1){left:6%;animation-delay:0s}.music-float span:nth-child(2){left:18%;animation-delay:2.5s;color:var(--accent)}
.music-float span:nth-child(3){left:31%;animation-delay:5s}.music-float span:nth-child(4){left:47%;animation-delay:1.2s;color:#d6249f}
.music-float span:nth-child(5){left:63%;animation-delay:6.5s;color:var(--accent)}.music-float span:nth-child(6){left:78%;animation-delay:3.6s}
.music-float span:nth-child(7){left:91%;animation-delay:8s;color:#d6249f}
@keyframes noterise{0%{transform:translate(0,0) rotate(-10deg);opacity:0}10%{opacity:.45}50%{transform:translate(22px,-45vh) rotate(12deg)}90%{opacity:.35}100%{transform:translate(-10px,-95vh) rotate(-8deg);opacity:0}}
#music .video{animation:softfloat 7s ease-in-out infinite}
.note{animation:softfloat 6s ease-in-out infinite}.note:nth-child(2){animation-delay:-3s}
@keyframes softfloat{0%,100%{translate:0 0}50%{translate:0 -8px}}
.motion .music-notes .note{opacity:0;transform:translateX(-24px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.motion .music-notes.in .note{opacity:1;transform:none}.motion .music-notes.in .note:nth-child(2){transition-delay:.2s}

/* Latest updates: Read more, and the button to all posts */
.post .read-more{justify-self:start;font:700 .9rem var(--f-display);color:var(--accent);text-decoration:none;display:inline-flex;gap:.35rem;transition:gap .2s}
.post .read-more:hover{gap:.65rem}
.more-posts{display:flex;justify-content:center;margin-top:clamp(1.8rem,4vw,2.6rem)}
.more-btn{position:relative;display:inline-flex;align-items:center;gap:.9rem;padding:1.05rem 1.9rem;border-radius:999px;text-decoration:none;color:#fff;
  font:800 clamp(1rem,1.6vw,1.15rem) var(--f-display);isolation:isolate;overflow:hidden;
  background:linear-gradient(100deg,var(--navy-deep),var(--accent) 55%,var(--navy-deep));background-size:220% 100%;
  box-shadow:0 16px 34px rgb(47 111 224/.35);animation:btnshift 5s ease-in-out infinite,btnbreathe 2.6s ease-in-out infinite;transition:transform .25s,box-shadow .25s}
.more-btn::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgb(255 255 255/.35) 50%,transparent 70%);transform:translateX(-120%);animation:btnshine 3.2s ease-in-out infinite}
.more-btn::after{content:"";position:absolute;inset:-6px;border-radius:inherit;border:2px solid rgb(227 168 59/.7);opacity:0;animation:btnring 2.6s ease-out infinite;pointer-events:none}
.more-btn .mb-arrow{display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--gold);color:var(--navy-deep);animation:arrownudge 1.3s ease-in-out infinite}
.more-btn:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 22px 44px rgb(47 111 224/.45)}
@keyframes btnshift{50%{background-position:100% 0}}
@keyframes btnbreathe{50%{transform:scale(1.035)}}
@keyframes btnshine{0%,40%{transform:translateX(-120%)}80%,100%{transform:translateX(120%)}}
@keyframes btnring{0%{opacity:.8;transform:scale(.96)}100%{opacity:0;transform:scale(1.12)}}
@keyframes arrownudge{50%{transform:translateX(4px)}}
.more-btn:hover{animation-play-state:paused}

/* All posts page */
.posts-page{background:var(--mist)}
.pp-hero{position:relative;isolation:isolate;overflow:hidden;color:var(--on-dark);min-height:clamp(18rem,44vh,26rem);display:grid;align-content:space-between;padding:1.25rem clamp(16px,6vw,5rem) clamp(2rem,5vw,3.5rem)}
.pp-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;z-index:-2;animation:kenburns 22s ease-in-out infinite alternate}
.pp-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgb(10 20 40/.55),rgb(10 20 40/.8))}
.pp-back{color:var(--on-dark);text-decoration:none;font:500 .85rem var(--f-mono);opacity:.85}
.pp-back:hover{opacity:1;text-decoration:underline}
.pp-head{display:grid;gap:.6rem;max-width:44rem}
.pp-head h1{font:900 clamp(2.8rem,7vw,5rem)/1 var(--f-display);letter-spacing:-.02em}
.pp-head p{font-size:clamp(1rem,1.8vw,1.2rem);color:rgb(255 255 255/.85)}
.pp-main{max-width:56rem;margin:0 auto;padding:clamp(1.5rem,4vw,3rem) 16px 5rem;display:grid;gap:1.4rem}
.post .side{display:grid;align-content:start;gap:.25rem}
.like{margin-top:.8rem;justify-self:start;display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .8rem;border-radius:999px;border:1px solid var(--line);background:var(--surface);
  color:var(--muted);font:600 .82rem var(--f-display);cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.like .h{font-size:1.05rem;line-height:1}
.like:hover{border-color:#d6249f;color:#d6249f}
.like.on{background:#fdecf6;border-color:#d6249f;color:#d6249f}
.like.pop .h{animation:heartpop .5s cubic-bezier(.3,1.8,.5,1)}
@keyframes heartpop{40%{transform:scale(1.6)}}
.post.flash{animation:postflash 2.4s ease}
@keyframes postflash{0%,30%{box-shadow:0 0 0 3px var(--gold)}100%{box-shadow:0 0 0 0 transparent}}
.post .continue{background:linear-gradient(90deg,rgb(227 168 59/.28),rgb(227 168 59/0) 60%);border-radius:4px;animation:contfade 3.5s ease 1s forwards}
@keyframes contfade{to{background:transparent}}
.like-dialog{border:0;border-radius:20px;padding:0;max-width:min(26rem,calc(100vw - 32px));box-shadow:0 30px 80px rgb(15 31 54/.35)}
.like-dialog::backdrop{background:rgb(10 20 40/.55);backdrop-filter:blur(3px)}
.like-dialog form{display:grid;gap:.8rem;padding:1.6rem}
.like-dialog h2{font:900 1.6rem var(--f-display);color:var(--navy)}
.like-dialog p{margin:0;color:var(--muted);line-height:1.55}
.like-dialog label{font:500 .75rem var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:grid;gap:.35rem}
.like-dialog input{font:400 1rem var(--f-body);color:var(--ink);background:var(--mist);border:1px solid var(--line);border-radius:10px;padding:.65rem .75rem;text-transform:none;letter-spacing:0}
.like-dialog .actions{display:flex;justify-content:flex-end;gap:.5rem}
.like-dialog .status{font-size:.85rem;color:var(--danger);min-height:1em}
.ld-heart{font-size:2rem;color:#d6249f;line-height:1}

/* The path so far: a scroll-filled timeline, glowing dots, drifting photos, staggered text */
#timeline{position:relative;--p:0}
@media (min-width:901px){
  #timeline::before,#timeline::after{content:"";position:absolute;left:-1.6rem;top:0;width:3px;border-radius:3px}
  #timeline::before{bottom:0;background:var(--line)}
  #timeline::after{height:calc(var(--p) * 100%);background:linear-gradient(180deg,var(--gold),#e0703f,var(--accent));box-shadow:0 0 12px rgb(227 168 59/.6)}
  .chapter::before{content:"";position:absolute;left:calc(-1.6rem - 6px);top:2.2rem;width:15px;height:15px;border-radius:50%;background:var(--surface);border:3px solid var(--line);z-index:1;transition:border-color .5s,background .5s,box-shadow .5s,transform .5s}
  .chapter.lit::before{border-color:var(--gold);background:var(--gold);box-shadow:0 0 0 6px rgb(227 168 59/.18);transform:scale(1.15)}
}
.chapter-bg img{animation:kenburns 20s ease-in-out infinite alternate}
.motion .chapter .bn-text>*{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.motion .chapter.in .bn-text>*{opacity:1;transform:none}
.motion .chapter.in .bn-text>:nth-child(2){transition-delay:.12s}.motion .chapter.in .bn-text>:nth-child(3){transition-delay:.24s}
.motion .chapter .bn-text .eyebrow::before{width:0;transition:width .8s ease .3s}
.motion .chapter.in .bn-text .eyebrow::before{width:2.6rem}
.motion .chapter .banner{clip-path:inset(0 0 0 0 round 20px);transform:scale(.97);transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.motion .chapter.in .banner{transform:none}
.motion .chapter .text>*{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.motion .chapter.in .text>*{opacity:1;transform:none}
.motion .chapter.in .text>:nth-child(2){transition-delay:.3s}.motion .chapter.in .text>:nth-child(3){transition-delay:.42s}
.motion .chapter.in .text>:nth-child(4){transition-delay:.54s}.motion .chapter.in .text>:nth-child(5){transition-delay:.66s}
.motion .chapter.in .text>:nth-child(1){transition-delay:.18s}
.banner .bn-text h3{transition:letter-spacing .6s ease}
.banner:hover .bn-text h3{letter-spacing:.01em}

/* Contact: LinkedIn and Gmail logos */
.contact-row{justify-content:flex-start}
.contact-row .c-body{flex:1;min-width:0}
.c-logo{flex:none;display:grid;place-items:center;width:3.2rem;height:3.2rem;border-radius:14px;background:var(--surface);border:1px solid var(--line);box-shadow:0 8px 20px rgb(15 31 54/.08);transition:transform .3s}
.c-logo svg{width:1.9rem;height:1.9rem}
.contact-row:hover .c-logo{transform:rotate(-6deg) scale(1.08)}

/* Menu: deep gradient, glowing orbs, a hover-driven photo preview with a tech frame */
.menu{background:radial-gradient(120% 90% at 85% 15%,#1d3b72 0%,transparent 55%),radial-gradient(90% 80% at 10% 100%,#3b2152 0%,transparent 55%),#0a1528;
  align-content:stretch;padding:clamp(4.5rem,8vh,6rem) clamp(1.5rem,6vw,6rem) clamp(2rem,5vh,3rem);overflow:auto}
.menu::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:linear-gradient(rgb(127 176 255/.06) 1px,transparent 1px) 0 0/56px 56px,linear-gradient(90deg,rgb(127 176 255/.06) 1px,transparent 1px) 0 0/56px 56px;
  -webkit-mask-image:radial-gradient(ellipse at 70% 40%,#000,transparent 75%);mask-image:radial-gradient(ellipse at 70% 40%,#000,transparent 75%)}
.menu-glow{position:absolute;width:30rem;height:30rem;right:8%;top:12%;border-radius:50%;background:rgb(227 168 59/.16);filter:blur(90px);pointer-events:none;animation:drift1 16s ease-in-out infinite alternate}
.menu-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,5rem);align-items:center;min-height:100%}
.menu-list{display:grid;gap:1.4rem;align-content:center}
.menu-eyebrow{font:500 .78rem var(--f-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.menu ol{gap:.15rem}
.menu ol a{font-size:clamp(1.8rem,3.4vw,2.9rem);white-space:nowrap;position:relative;transition:transform .5s,opacity .5s,color .25s}
.menu ol a .mt{position:relative}
.menu ol a .mt::after{content:"";position:absolute;left:0;bottom:.08em;height:3px;width:0;background:var(--gold);border-radius:2px;transition:width .35s cubic-bezier(.2,.7,.2,1)}
.menu ol a:hover,.menu ol a.hot{color:#fff}
.menu ol a:hover .mt::after,.menu ol a.hot .mt::after{width:100%}
.menu ol:hover a:not(:hover):not(.hot){color:rgb(255 255 255/.35)}
.menu.open ol a:hover{transform:translateX(12px)}
.menu-foot{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;padding-top:1.2rem;border-top:1px solid rgb(255 255 255/.1)}
.menu .menu-foot a{font:500 .85rem var(--f-mono);color:var(--on-dark-muted);text-decoration:none;opacity:1;transform:none;display:inline}
.menu .menu-foot a:hover{color:var(--gold)}
.menu-preview{display:grid;gap:1rem;opacity:0;transform:translateY(20px) scale(.97);transition:opacity .7s ease .25s,transform .9s cubic-bezier(.2,.7,.2,1) .25s}
.menu.open .menu-preview{opacity:1;transform:none}
.mp-frame{position:relative;aspect-ratio:4/5;max-height:72vh;border-radius:26px;overflow:hidden;background:#0d1b33;
  box-shadow:0 40px 90px rgb(0 0 0/.45),0 0 0 1px rgb(127 176 255/.18);transform:perspective(1200px) rotateY(-6deg);transition:transform .8s}
.menu-preview:hover .mp-frame{transform:perspective(1200px) rotateY(0)}
.mp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity .7s ease,transform 1.4s cubic-bezier(.2,.7,.2,1);filter:saturate(1.05)}
.mp-img.on{opacity:1;transform:scale(1)}
.mp-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgb(8 16 32/.85)),
  linear-gradient(rgb(127 176 255/.07) 1px,transparent 1px) 0 0/100% 4px;pointer-events:none}
.mp-scan{position:absolute;left:0;right:0;height:30%;top:-30%;background:linear-gradient(180deg,transparent,rgb(127 176 255/.16),transparent);animation:scan 4.5s linear infinite;pointer-events:none;z-index:1}
@keyframes scan{to{top:100%}}
.mp-corner{position:absolute;width:22px;height:22px;border:2px solid var(--gold);z-index:2;opacity:.9}
.mp-corner.tl{top:14px;left:14px;border-right:0;border-bottom:0;border-top-left-radius:8px}
.mp-corner.tr{top:14px;right:14px;border-left:0;border-bottom:0;border-top-right-radius:8px}
.mp-corner.bl{bottom:14px;left:14px;border-right:0;border-top:0;border-bottom-left-radius:8px}
.mp-corner.br{bottom:14px;right:14px;border-left:0;border-top:0;border-bottom-right-radius:8px}
.mp-meta{position:absolute;left:1.4rem;right:1.4rem;bottom:1.3rem;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:1rem}
.mp-num{font:500 .8rem var(--f-mono);color:var(--gold);letter-spacing:.14em}
.mp-cap{font:800 clamp(1rem,1.6vw,1.3rem)/1.2 var(--f-display);color:#fff;text-align:right}
.mp-ticker{display:flex;justify-content:center;gap:.7rem;font:500 .8rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-muted)}
.mp-ticker i{font-style:normal;color:var(--gold);animation:arrownudge 1.6s ease-in-out infinite}
@media (max-width:900px){.menu-grid{grid-template-columns:1fr}.menu-preview{display:none}}
@media (prefers-reduced-motion:reduce){.eq i,.stream-logos svg,.music-float span,#music .video,.note,.more-btn,.more-btn::before,.more-btn::after,.more-btn .mb-arrow,.chapter-bg img,.mp-scan,.menu-glow,.mp-ticker i{animation:none!important}}

/* ---------- contact form ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(1.5rem,3vw,2.5rem);align-items:start}
.contact-form{position:relative;display:grid;gap:1.1rem;padding:clamp(1.5rem,3vw,2.4rem);background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:0 24px 60px rgb(15 31 54/.1);overflow:hidden}
.contact-form::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--gold),var(--accent),var(--gold));background-size:200% 100%;animation:barflow 6s linear infinite}
@keyframes barflow{to{background-position:200% 0}}
.cf-kicker{font:600 .78rem var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:#e0703f}
.cf-head p{margin:.35rem 0 0;color:var(--muted);font-size:.95rem}
.cf-topics{display:flex;flex-wrap:wrap;gap:.5rem}
.cf-chip{font:600 .88rem var(--f-display);padding:.5rem 1rem;border-radius:999px;border:1px solid var(--line);background:var(--mist);color:var(--navy);cursor:pointer;transition:background .25s,color .25s,transform .2s}
.cf-chip:hover{transform:translateY(-2px)}
.cf-chip.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.cf-field{display:grid;gap:.4rem}
.cf-field>span{font:600 .8rem var(--f-display);color:var(--navy)}
.cf-field em{font-style:normal;font-weight:400;color:var(--muted)}
.cf-field input,.cf-field textarea{font:400 1rem var(--f-body);color:var(--ink);background:#f7f9fc;border:1px solid var(--line);border-radius:12px;padding:.8rem .95rem;width:100%;transition:border-color .2s,box-shadow .2s,background .2s}
.cf-field input::placeholder,.cf-field textarea::placeholder{color:#a9b3c2;opacity:1}
.cf-field input:focus,.cf-field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgb(47 111 224/.12);background:#fff}
.cf-field textarea{resize:vertical;min-height:8rem}
.cf-actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.cf-send{position:relative;overflow:hidden;padding:.9rem 1.6rem;font-size:1rem}
.cf-send::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgb(255 255 255/.35) 50%,transparent 70%);transform:translateX(-120%);animation:btnshine 4.5s ease-in-out 2s infinite}
@keyframes btnshine{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.cf-note{font-size:.85rem;color:var(--muted)}
.cf-note.good{color:#1f8a4c;font-weight:600}
.cf-note.bad{color:var(--danger);font-weight:600}
.contact-form.sent{animation:sentpop .6s ease}
@keyframes sentpop{40%{transform:scale(1.015);box-shadow:0 30px 70px rgb(31 138 76/.22)}}
.contact-side{display:grid;gap:1.2rem}
.contact-side .contact-big{border-top:0}
/* staggered entrance of the form parts */
.motion .contact-form.reveal>*{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.motion .contact-form.reveal.in>*{opacity:1;transform:none}
.motion .contact-form.reveal.in>:nth-child(2){transition-delay:.08s}.motion .contact-form.reveal.in>:nth-child(3){transition-delay:.16s}
.motion .contact-form.reveal.in>:nth-child(4){transition-delay:.24s}.motion .contact-form.reveal.in>:nth-child(5){transition-delay:.32s}
.motion .contact-form.reveal.in>:nth-child(6){transition-delay:.4s}
.contact-banner{position:relative;overflow:hidden}
.contact-banner::after{content:"";position:absolute;width:30rem;height:30rem;right:-8rem;top:-12rem;border-radius:50%;background:radial-gradient(circle,rgb(127 176 255/.35),transparent 65%);animation:floatglow 9s ease-in-out infinite alternate;pointer-events:none}
@keyframes floatglow{to{transform:translate(-6rem,5rem)}}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}.cf-row{grid-template-columns:1fr}}

/* ---------- geography: more life ---------- */
#geography .geo-num{animation:geopulse 4s ease-in-out infinite}
@keyframes geopulse{50%{-webkit-text-stroke-color:var(--gold);filter:drop-shadow(0 0 18px rgb(227 168 59/.45))}}
#geography .inner{position:relative}
#geography .inner::before{content:"";position:absolute;right:-6rem;top:-4rem;width:26rem;height:26rem;border-radius:50%;
  border:1px dashed rgb(255 255 255/.18);box-shadow:inset 0 0 0 3rem rgb(255 255 255/.02);animation:orbit 40s linear infinite;pointer-events:none}
#geography .inner::after{content:"✈";position:absolute;right:6.6rem;top:-4.6rem;font-size:1.3rem;color:var(--gold);transform-origin:6.4rem 13.6rem;animation:orbit 12s linear infinite;pointer-events:none}
@keyframes orbit{to{transform:rotate(360deg)}}
.hof-list li{transition:transform .25s,background .25s}
.hof-list li:hover{transform:translateX(6px);background:rgb(255 255 255/.06)}
.motion .hof.reveal.in .hof-list li{animation:rowin .6s cubic-bezier(.2,.7,.2,1) both}
.motion .hof.reveal.in .hof-list li:nth-child(2){animation-delay:.08s}.motion .hof.reveal.in .hof-list li:nth-child(3){animation-delay:.16s}
.motion .hof.reveal.in .hof-list li:nth-child(4){animation-delay:.24s}.motion .hof.reveal.in .hof-list li:nth-child(5){animation-delay:.32s}
@keyframes rowin{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:none}}
.motion .hof.reveal.in .hof-list .bar::after{animation:barfill 1.4s cubic-bezier(.2,.7,.2,1) .3s both}
@keyframes barfill{from{width:0}}

/* ---------- the path so far: more motion ---------- */
.motion .chapter.reveal{opacity:1;transform:none}
.motion .chapter .banner{opacity:0;transform:translateX(-60px) scale(.98);transition:opacity 1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.motion .chapter:nth-of-type(even) .banner{transform:translateX(60px) scale(.98)}
.motion .chapter.in .banner{opacity:1;transform:none}
.motion .chapter .bn-text>*{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.motion .chapter.in .bn-text>*{opacity:1;transform:none}
.motion .chapter.in .bn-text>:nth-child(1){transition-delay:.35s}.motion .chapter.in .bn-text>:nth-child(2){transition-delay:.45s}.motion .chapter.in .bn-text>:nth-child(3){transition-delay:.6s}
.motion .chapter .text{opacity:0;transform:translateY(40px);transition:opacity .9s ease .5s,transform 1s cubic-bezier(.2,.7,.2,1) .5s}
.motion .chapter.in .text{opacity:1;transform:none}
.motion .chapter .chapter-bg{opacity:0;transition:opacity 1.6s ease .2s}
.motion .chapter.in .chapter-bg{opacity:.75}
.chapter .ch-label{position:relative;display:inline-block!important}
.chapter .ch-label::after{content:"";position:absolute;left:0;right:0;bottom:-.35rem;height:2px;background:#e0703f;transform:scaleX(0);transform-origin:left;transition:transform .9s ease 1.1s}
.chapter.in .ch-label::after{transform:scaleX(1)}
.banner .bn-text h3{transition:letter-spacing .5s}
.banner:hover .bn-text h3{letter-spacing:.01em}

@media (prefers-reduced-motion:reduce){
  .contact-form::before,.cf-send::after,.contact-banner::after,#geography .geo-num,#geography .inner::before,#geography .inner::after{animation:none!important}
}

/* Contact form: option A finishing touches */
.cf-live{display:inline-block;width:8px;height:8px;margin-right:.5rem;border-radius:50%;background:#22c55e;vertical-align:middle;box-shadow:0 0 0 0 rgb(34 197 94/.5);animation:livepulse 2s ease-out infinite}
@keyframes livepulse{0%{box-shadow:0 0 0 0 rgb(34 197 94/.5)}100%{box-shadow:0 0 0 9px rgb(34 197 94/0)}}
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-based{position:relative;overflow:hidden;display:grid;gap:.3rem;padding:1.4rem 1.5rem;border-radius:20px;color:#fff;
  background:linear-gradient(135deg,var(--navy) 0%,var(--accent) 100%);box-shadow:0 18px 40px rgb(47 111 224/.25)}
.cf-based::after{content:"✈";position:absolute;right:1.2rem;top:1rem;font-size:1.6rem;opacity:.35;animation:planefly 6s ease-in-out infinite}
@keyframes planefly{50%{transform:translate(8px,-6px) rotate(6deg)}}
.cf-based-k{font:500 .72rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.cf-based b{font:800 1.35rem var(--f-display)}
.cf-based p{margin:0;color:rgb(255 255 255/.85)}
@media (prefers-reduced-motion:reduce){.cf-live,.cf-based::after{animation:none}}
.contact-side .contact-row{flex-wrap:nowrap;padding-block:1.1rem}
.contact-side .contact-row .val{font-size:clamp(1rem,1.5vw,1.25rem);overflow-wrap:anywhere}

/* Hero nav: numbers 1–6 again (not 01, so they don't clash with the section numbers) */
.hero-nav .dot::before{display:none}
.hero-nav .dot{font:600 1rem var(--f-mono);color:rgb(255 255 255/.5);transition:color .25s,transform .25s}
.hero-nav .dot:hover{color:rgb(255 255 255/.9)}
.hero-nav .dot[aria-current="true"]{color:var(--gold);transform:scale(1.25)}
.hero-nav .dot:focus{outline:none}
.hero-nav .dot:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
/* a picked slide stays: the progress line shows full instead of counting down */
.hero.held .hero-nav button[aria-current="true"]::after{animation:none;width:1.5rem}
a.route-chip{text-decoration:none;transition:background .25s,border-color .25s,transform .25s}
a.route-chip:hover{transform:translateY(-2px);border-color:var(--gold)}

/* Menu v2: live tech network behind everything, and a wipe-in photo swap with a glitch beat */
.menu{background:radial-gradient(110% 80% at 80% 10%,#16305e 0%,transparent 55%),radial-gradient(80% 70% at 5% 100%,#2c1846 0%,transparent 60%),#070f1f}
.menu-net{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.menu::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,transparent 55%,rgb(3 8 18/.65) 100%)}
.menu-grid{z-index:1}
.menu ol a{font-size:clamp(1.5rem,2.5vw,2.4rem)}
@media (max-width:1100px){.menu ol a{white-space:normal}}
.mp-frame{background:#05090f}
.mp-img{opacity:1;z-index:0;clip-path:circle(0% at 0% 50%);transform:scale(1.12);filter:none;transition:none}
.mp-img.on{z-index:2;clip-path:circle(150% at 0% 50%);transform:scale(1);transition:clip-path .95s cubic-bezier(.77,0,.18,1),transform 1.6s cubic-bezier(.2,.7,.2,1)}
.mp-img.out{z-index:1;clip-path:circle(150% at 0% 50%);transform:scale(.92);filter:blur(6px) brightness(.55) saturate(1.3);transition:transform .9s ease,filter .9s ease}
.mp-frame::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:repeating-linear-gradient(180deg,rgb(127 176 255/.0) 0 9px,rgb(127 176 255/.35) 9px 11px,rgb(227 168 59/.0) 11px 23px,rgb(227 168 59/.3) 23px 24px)}
.mp-frame.swap::before{animation:glitch .55s steps(6) 1}
@keyframes glitch{0%{opacity:.9;transform:translateX(-6px)}20%{opacity:.4;transform:translateX(5px)}40%{opacity:.8;transform:translateX(-3px) skewX(-4deg)}60%{opacity:.3;transform:translateX(2px)}80%{opacity:.5;transform:none}100%{opacity:0}}
.mp-frame.swap .mp-num,.mp-frame.swap .mp-cap{animation:tick .5s steps(4) 1}
@keyframes tick{0%{opacity:0;transform:translateY(6px)}50%{opacity:.6}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.mp-img,.mp-img.on,.mp-img.out{transition:none}.mp-frame.swap::before,.mp-frame.swap .mp-num,.mp-frame.swap .mp-cap{animation:none}}
.mp-img{background:#05090f}

/* ---------- EN / עב language switch (both home pages) ---------- */
.lang-switch{position:fixed;top:calc(env(safe-area-inset-top,0px) + 1.25rem);right:5rem;z-index:50;height:3rem;display:flex;align-items:center;gap:.2rem;padding:.3rem;
  background:rgb(255 255 255/.92);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 20px rgb(15 31 54/.15)}
.lang-switch a{display:grid;place-items:center;height:100%;min-width:2.4rem;padding:0 .55rem;border-radius:7px;color:var(--navy);text-decoration:none;
  font:700 .78rem/1 var(--f-mono);letter-spacing:.06em;transition:background .2s,color .2s}
.lang-switch a[lang="he"]{font:700 .95rem/1 var(--f-body);letter-spacing:0}
.lang-switch a:not([aria-current]):hover{background:var(--mist);color:var(--accent)}
.lang-switch a[aria-current]{background:var(--navy-deep);color:#fff;cursor:default}
@media (max-width:900px){
  .lang-switch{top:calc(env(safe-area-inset-top,0px) + .55rem);right:4.1rem;height:2.65rem;padding:.25rem}
  .lang-switch a{min-width:2.1rem;padding:0 .4rem}
  .rail{padding-right:10rem}
}

/* ---------- Hebrew page (/he/): right to left ----------
   The text flows from the right, and the page chrome mirrors: rail on the right, menu button and switch on the left.
   Photos keep their composition, so in the hero the text block sits on the side opposite the portrait. */
/* Hebrew type: Rubik for headings, IBM Plex Sans Hebrew for text and labels (it pairs with the IBM Plex Mono used for numbers).
   Headings drop from Black to Bold, which reads cleaner in Hebrew. */
[dir="rtl"]{--f-display:"Rubik","Heebo",system-ui,sans-serif;--f-body:"IBM Plex Sans Hebrew","Heebo",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono","IBM Plex Sans Hebrew",ui-monospace,monospace}
[dir="rtl"] :is(.sec-head h2,.uh-text h2,.bn-text h3,.contact-banner h2,.boston h3,.hof-head h3,.slide h2,.menu a,.rail .name){font-weight:700}
[dir="rtl"] :is(.slide.intro h1,.slide .motto){font-weight:800}
[dir="rtl"] :is(.tile b,.post h3,.ig-card h3,.ig-mark b,.cf-based b,.contact-row .val,.mp-cap){font-weight:600}
[dir="rtl"] .sec-head h2,[dir="rtl"] .uh-text h2{line-height:1.1}
[dir="rtl"] .prose p,[dir="rtl"] .chapter .text p,[dir="rtl"] .note p,[dir="rtl"] .ig-card p{line-height:1.8}
[dir="rtl"] .prose .lead{font-weight:500}
/* Hebrew letters are never spaced out, so the small mono labels drop their tracking */
[dir="rtl"] :is(.eyebrow,.hero-nav .down,.route-chip,.about-photo figcaption,.side-tiles .tile b,.chapter .text .ch-label,.ig-tag,.note-tag,
  .menu-eyebrow,.menu .menu-foot a,.mp-ticker,.cf-kicker,.cf-based-k,.contact-row .label,.hof-list .who small,.journey .city-label,.globe-live .city-label){letter-spacing:.01em;font-weight:600}
[dir="rtl"] :is(.eyebrow,.chapter .text .ch-label,.ig-tag,.note-tag,.cf-kicker,.cf-based-k){font-size:.86rem}
/* Those labels use IBM Plex Mono in English; in Hebrew its wide spaces break the words apart, so they switch to Plex Sans Hebrew */
[dir="rtl"] :is(.eyebrow,.hero-nav .down,.route-chip,.about-photo figcaption,.side-tiles .tile b,.chapter .text .ch-label,.ig-tag,.note-tag,
  .menu-eyebrow,.menu .menu-foot a,.mp-ticker,.cf-kicker,.cf-based-k,.contact-row .label,.hof-list .who small,.journey .city-label,.globe-live .city-label,
  .post time,.like-dialog label,.pp-back){font-family:var(--f-body)}
[dir="rtl"] .side-tiles .tile b{font-size:.9rem;font-weight:600}
/* rail on the right, burger and switch on the left */
[dir="rtl"] .rail{inset:0 0 0 auto;border-right:0;border-left:1px solid var(--line)}
[dir="rtl"] .rail .name{transform:none}
[dir="rtl"] .main{margin-left:0;margin-right:var(--rail)}
[dir="rtl"] .burger{right:auto;left:1.25rem}
[dir="rtl"] .lang-switch{right:auto;left:5rem}
@media (max-width:900px){
  [dir="rtl"] .rail{inset:0 0 auto 0;border-left:0;padding:env(safe-area-inset-top,0px) 16px 0 10rem}
  [dir="rtl"] .burger{left:.6rem}
  [dir="rtl"] .lang-switch{left:4.1rem}
}
/* menu */
[dir="rtl"] .menu a{transform:translateX(24px)}
[dir="rtl"] .menu.open a{transform:none}
[dir="rtl"] .menu.open ol a:hover{transform:translateX(-12px)}
[dir="rtl"] .menu-glow{right:auto;left:8%}
[dir="rtl"] .mp-frame{transform:perspective(1200px) rotateY(6deg)}
[dir="rtl"] .menu-preview:hover .mp-frame{transform:perspective(1200px) rotateY(0)}
[dir="rtl"] .mp-cap{text-align:left}
[dir="rtl"] .mp-ticker,[dir="rtl"] .mp-meta{direction:rtl}
/* hero: text block on the left, away from the portrait; arrows point left */
[dir="rtl"] .slide{justify-items:end}
[dir="rtl"] .slide .content{justify-items:start}
[dir="rtl"] .cta{justify-self:start}
[dir="rtl"] .cta:hover .arr,[dir="rtl"] a.tile:hover::after{transform:translateX(-4px)}
[dir="rtl"] .slide .sub{border-left:0;padding-left:0;border-right:3px solid var(--gold);padding-right:1.1rem}
[dir="rtl"] .slide.intro .sub{border-right-color:#f5c27a}
[dir="rtl"] .hero-nav button::after{left:auto;right:.25rem}
[dir="rtl"] .hero-nav .down{margin-left:0;margin-right:auto}
[dir="rtl"] .slide .motto::before{content:"\201D";transform-origin:right bottom}
[dir="rtl"] .slide .motto .hl::after{left:auto;right:0}
[dir="rtl"] .slide h1,[dir="rtl"] .slide h2,[dir="rtl"] .slide.intro h1,[dir="rtl"] .slide .motto{letter-spacing:0}
/* sections */
[dir="rtl"] .credits ul{padding-left:0;padding-right:1.1rem}
[dir="rtl"] .credits ul[dir="ltr"]{padding-right:0;padding-left:1.1rem;text-align:left}
[dir="rtl"] .hof-list .who small{margin-left:0;margin-right:.3rem}
[dir="rtl"] .hof-list b{text-align:left}
[dir="rtl"] .hof-list li:hover{transform:translateX(-6px)}
[dir="rtl"] a.contact-row:hover{padding-left:0;padding-right:.75rem}
[dir="rtl"] a.contact-row:hover .go{transform:translateX(-6px)}
[dir="rtl"] .side-tiles .tile::before{left:auto;right:1.4rem;background:linear-gradient(270deg,var(--gold),var(--accent))}
[dir="rtl"] .side-tiles .tile .n .unit{margin-left:0;margin-right:.25em}
[dir="rtl"] .eq{margin-left:0;margin-right:.25em}
[dir="rtl"] .note:nth-child(2){margin-left:0;margin-right:clamp(1rem,4vw,3rem)}
[dir="rtl"] .motion .music-notes .note{transform:translateX(24px)}
[dir="rtl"] .ig-card::before{left:auto;right:0}
[dir="rtl"] .music-bg{left:auto;right:0}
[dir="rtl"] .cf-live{margin-right:0;margin-left:.5rem}
[dir="rtl"] .cf-hp{left:auto;right:-9999px}
[dir="rtl"] .cf-based::after{right:auto;left:1.2rem;transform:scaleX(-1)}
[dir="rtl"] .contact-banner::after{right:auto;left:-8rem}
[dir="rtl"] .more-btn .mb-arrow{display:inline-block}
[dir="rtl"] input[type="email"],[dir="rtl"] #email{text-align:right}
/* the path so far: the line and dots run down the right side; text accents flip */
[dir="rtl"] .chapter .text{margin-left:0;margin-right:clamp(0rem,3vw,3rem)}
[dir="rtl"] .chapter .text::before{left:auto;right:0;border-radius:4px 0 0 4px}
[dir="rtl"] .chapter .text>p:first-child::first-letter{float:none;font:inherit;color:inherit;margin:0}
[dir="rtl"] .chapter .ch-label::after{transform-origin:right}
[dir="rtl"] .motion .chapter .banner{transform:translateX(60px) scale(.98)}
[dir="rtl"] .motion .chapter:nth-of-type(even) .banner{transform:translateX(-60px) scale(.98)}
[dir="rtl"] .motion .chapter.in .banner{transform:none}
@media (min-width:901px){
  [dir="rtl"] #timeline::before,[dir="rtl"] #timeline::after{left:auto;right:-1.6rem}
  [dir="rtl"] .chapter::before{left:auto;right:calc(-1.6rem - 6px)}
}
@media (max-width:900px){
  [dir="rtl"] .chapter .text{margin-right:0;text-align:right}
  [dir="rtl"] .note:nth-child(2){margin-right:0}
}
/* the globe and route keep their map geometry */
[dir="rtl"] .journey svg{direction:ltr}
[dir="rtl"] a.tile::after{content:"לקריאה ←"}
[dir="rtl"] .mp-cap,[dir="rtl"] .hof-list .who{unicode-bidi:plaintext}
[dir="rtl"] .ig-mark b{text-align:right}
[dir="rtl"] .reel-strip{direction:ltr}
/* Boston card: the flag waves on the left, behind a wash that fades toward it */
[dir="rtl"] .boston canvas{right:auto;left:-2%;-webkit-mask-image:linear-gradient(270deg,transparent 0%,#000 38%);mask-image:linear-gradient(270deg,transparent 0%,#000 38%)}
[dir="rtl"] .boston::before{background:linear-gradient(270deg,rgb(10 22 45/.95) 0%,rgb(10 22 45/.6) 45%,rgb(10 22 45/.15) 100%)}
/* Glows and slide-in banners that poke past the edge must not make the page scroll sideways (phones, and RTL) */
.main{overflow-x:clip}
/* Hebrew paragraphs read better flush right than centred */
[dir="rtl"] .chapter .text{text-align:right}
[dir="rtl"] .chapter .text .ch-label{margin-inline:0 auto}
/* Latest updates: footnote under the posts */
.feed-note{margin:1.1rem 0 0;font-size:.85rem;color:var(--muted)}
/* Hebrew motto slide: the quote sits on the right (Shaked, 2026-10-18) */
[dir="rtl"] .slide:has(.motto){justify-items:start}
[dir="rtl"] .slide:has(.motto) .content{justify-items:start;text-align:right}