/* Site-wide motion layer, shared by every page: header actions, floating nav, smooth scroll
   support, the rocket scroll meter, and scroll reveals for the inner pages.
   Native scrolling stays in charge; everything degrades to a static page without JavaScript. */

/* =================== HEADER (inner pages that share the home page's top bar) =================== */
.topbar{max-width:1280px;margin:0 auto;padding-left:clamp(16px,5vw,64px);padding-right:clamp(16px,5vw,64px);padding-top:20px;padding-bottom:20px;display:flex;align-items:center;justify-content:space-between;gap:20px}
:is(.topbar,.snav) .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
:is(.topbar,.snav) .brand span{font-family:"Lora",Georgia,serif;font-weight:600;font-size:20px;letter-spacing:-.01em}
:is(.topbar,.snav) .navr{display:flex;align-items:center;gap:26px}
:is(.topbar,.snav) .navlinks{display:flex;gap:22px;font-size:15px;font-weight:500}
:is(.topbar,.snav) .cvbtn{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1.5px solid currentColor;border-radius:999px;font-size:14px;font-weight:600;text-decoration:none}
:is(.topbar,.snav) .mnav{display:none;position:relative}
:is(.topbar,.snav) .mnav summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1.5px solid #5A5F68;border-radius:999px;font-size:14px;font-weight:600}
:is(.topbar,.snav) .mnav summary::-webkit-details-marker{display:none}
:is(.topbar,.snav) .mnav-panel{position:absolute;right:0;top:54px;z-index:30;min-width:230px;background:#F6F4EF;border-radius:18px;padding:8px;box-shadow:0 18px 40px rgba(0,0,0,.35);display:flex;flex-direction:column}
:is(.topbar,.snav) .mnav-panel a{color:#15171B;text-decoration:none;padding:12px 14px;border-radius:10px;font-weight:500}
:is(.topbar,.snav) .mnav-panel a:hover{background:#EDE9E0;color:#15171B}
.topbar a{color:inherit}
@media (max-width:900px){:is(.topbar,.snav) .navlinks{display:none !important}:is(.topbar,.snav) .mnav{display:block}}
@media (max-width:600px){:is(.topbar,.snav) .cvbtn{display:none}}

/* =================== NAV LINKS: roll to a second copy, Morse underline =================== */
.nl{display:inline-flex;flex-direction:column;height:1.25em;line-height:1.25em;overflow:hidden;vertical-align:bottom}
.nl>span{display:block;transition:transform .45s cubic-bezier(.6,0,.2,1)}
.nl>span+span{color:#E2711D}
:is(.navlinks,.nav-links) a{position:relative;text-decoration:none !important}
.navlinks a{padding:6px 0}
:is(.navlinks,.nav-links) a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,#E2711D 0 4px,transparent 4px 7px,#E2711D 7px 19px,transparent 19px 22px,#E2711D 22px 26px,transparent 26px);background-repeat:no-repeat;transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.6,0,.2,1)}
:is(.navlinks,.nav-links) a:hover .nl>span,:is(.navlinks,.nav-links) a:focus-visible .nl>span{transform:translateY(-100%)}
:is(.navlinks,.nav-links) a:hover::after,:is(.navlinks,.nav-links) a:focus-visible::after,:is(.navlinks,.nav-links) a.cur::after{transform:scaleX(1)}
:is(.navlinks,.nav-links) a.cur .nl>span:first-child{color:#E2711D}

/* brand: the logo re-sends its signal on hover */
.brand svg{transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.brand:hover svg{transform:rotate(-8deg) scale(1.06)}
.brand:hover svg g>*{animation:sx-sig 1.1s ease both}
.brand:hover svg g>*:nth-child(2){animation-delay:.12s}.brand:hover svg g>*:nth-child(3){animation-delay:.24s}
@keyframes sx-sig{0%{opacity:1}12%{opacity:.15}24%{opacity:1}36%{opacity:.15}48%{opacity:1}}

/* =================== DOWNLOAD CV: fill sweep, dropping arrow, tick on click, nudge =================== */
.cvx{position:relative;overflow:hidden;isolation:isolate;gap:8px;transition:color .3s ease,border-color .3s ease,background-color .3s ease,transform .2s ease}
.cvx::before{content:"";position:absolute;inset:0;z-index:-1;background:#E2711D;border-radius:inherit;transform:translateY(101%);transition:transform .45s cubic-bezier(.6,0,.2,1)}
.cvx:hover,.cvx:focus-visible{color:#15171B !important;border-color:#E2711D !important}
.cvx:hover::before,.cvx:focus-visible::before{transform:none}
.cvx:active{transform:scale(.96)}
.cv-ic{display:inline-flex;width:18px;height:18px;margin-left:-2px;flex:0 0 auto}
.cv-ic svg{width:18px;height:18px;overflow:visible}
.cv-arrow{transition:opacity .2s ease}
.cv-check{stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.cvx:hover .cv-arrow,.cvx.nudge .cv-arrow{animation:cv-drop .9s cubic-bezier(.5,0,.5,1) both}
.cvx:hover .cv-arrow{animation-iteration-count:infinite}
@keyframes cv-drop{0%{transform:none;opacity:1}45%{transform:translateY(7px);opacity:0}46%{transform:translateY(-9px);opacity:0}100%{transform:none;opacity:1}}
.cvx:hover .cv-tray{animation:cv-tray .9s ease infinite}
@keyframes cv-tray{40%,50%{transform:translateY(1.5px)}}
.cvx.done .cv-arrow{animation:none;opacity:0}
.cvx.done .cv-check{opacity:1;stroke-dashoffset:0;transition:stroke-dashoffset .45s ease .05s}
.cvx.done::before{transform:none;background:#1D5A46}
.cvx.done,.cvx.done:hover{color:#F6F4EF !important;border-color:#1D5A46 !important}

/* mobile menu: burger turns into a cross, items slide in */
.burger{display:inline-flex;flex-direction:column;justify-content:center;gap:3px;width:14px;height:12px}
.burger i{display:block;height:2px;border-radius:2px;background:currentColor;transition:transform .35s ease,opacity .2s ease}
.mnav[open] .burger i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.mnav[open] .burger i:nth-child(2){opacity:0}
.mnav[open] .burger i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.mnav[open] .mnav-panel{animation:mn-in .3s cubic-bezier(.2,.7,.2,1) both}
.mnav[open] .mnav-panel a{animation:mn-item .4s cubic-bezier(.2,.7,.2,1) both}
.mnav[open] .mnav-panel a:nth-child(2){animation-delay:.04s}.mnav[open] .mnav-panel a:nth-child(3){animation-delay:.08s}.mnav[open] .mnav-panel a:nth-child(4){animation-delay:.12s}
.mnav[open] .mnav-panel a:nth-child(5){animation-delay:.16s}.mnav[open] .mnav-panel a:nth-child(6){animation-delay:.2s}.mnav[open] .mnav-panel a:nth-child(7){animation-delay:.24s}
@keyframes mn-in{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}}
@keyframes mn-item{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}

/* =================== FLOATING NAV (slides in when scrolling back up) =================== */
.snav{position:fixed;left:50%;top:12px;z-index:45;width:min(1180px,calc(100% - 24px));translate:-50% -140%;transition:translate .45s cubic-bezier(.2,.7,.2,1);background:rgba(246,244,239,.9);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border:1px solid #E6E1D6;border-radius:999px;box-shadow:0 14px 34px rgba(21,23,27,.12);padding:8px 10px 8px 18px;display:flex;align-items:center;justify-content:space-between;gap:16px;color:#15171B;font-family:"Inter",Arial,sans-serif}
.snav.show{translate:-50% 0}
.snav a{color:#15171B}
.snav .brand{color:#15171B}
.snav .brand svg{width:30px;height:30px}
.snav .brand svg path:first-child{stroke:#15171B}
.snav .brand span{font-size:17px}
.snav .navr{gap:18px}
.snav .navlinks{gap:18px;font-size:14px}
.snav .navlinks a{color:#3A3F47}
.snav .cvbtn{min-height:40px;border-color:#15171B;color:#15171B}
.snav .mnav summary{min-height:40px;border-color:#3A3F47;color:#15171B}
.snav .mnav-panel{box-shadow:0 18px 40px rgba(21,23,27,.18);border:1px solid #E6E1D6;top:50px}
@media (max-width:900px){.snav{padding:6px 8px 6px 14px}}
@media (max-width:600px){.snav .brand span{font-size:16px}}

/* =================== ROCKET SCROLL METER =================== */
.rk-rail{position:fixed;right:16px;top:96px;bottom:26px;width:26px;z-index:40;pointer-events:none}
.rk-rail.off{display:none}
.rk-track{position:absolute;left:50%;top:0;bottom:6px;width:0;border-left:2px dotted rgba(128,128,128,.45);translate:-1px 0}
.rk-fill{position:absolute;left:50%;bottom:6px;width:2px;height:calc(100% - 46px);translate:-1px 0;background:linear-gradient(0deg,rgba(226,113,29,.15),#E2711D);transform:scaleY(0);transform-origin:bottom}
.rk-pad{position:absolute;left:50%;bottom:0;width:22px;height:3px;border-radius:3px;background:rgba(128,128,128,.55);translate:-50% 0}
.rk{all:unset;position:absolute;left:0;bottom:4px;width:26px;height:42px;cursor:pointer;pointer-events:auto;will-change:transform}
.rk::before{content:"";position:absolute;inset:-12px -14px}
.rk svg{width:26px;height:42px;display:block;overflow:visible}
.rk:focus-visible{outline:2px solid #E2711D;outline-offset:4px;border-radius:8px}
.rk-flame,.rk-flame2{transform-box:fill-box;transform-origin:top center;animation:flame .18s ease-in-out infinite alternate;scale:1 .55;transition:scale .25s ease}
.rk-rail.burn .rk-flame,.rk-rail.burn .rk-flame2{scale:1 1.25}
@keyframes flame{to{transform:scaleY(.82) scaleX(.9)}}
.rk-tip{position:absolute;right:34px;bottom:12px;will-change:transform;padding:5px 10px;border-radius:999px;background:#15171B;color:#F6F4EF;font:600 11px/1.4 "Inter",Arial,sans-serif;letter-spacing:.06em;white-space:nowrap;opacity:0;translate:6px 0;transition:opacity .2s ease,translate .2s ease;pointer-events:none}
.rk-rail.hover .rk-tip{opacity:1;translate:0 0}
/* landing: legs out, flame pointing down, like a reusable booster coming home */
.rk-legs{opacity:0;transform-box:fill-box;transform-origin:top center;transform:scaleY(0);transition:opacity .25s ease,transform .35s cubic-bezier(.3,1.6,.5,1)}
.rk-rail.land .rk-legs{opacity:1;transform:none}
.rk-rail.land .rk-flame{scale:1.2 1.9}
.rk-rail.land .rk-flame2{scale:1.2 1.6}
.rk-dust{position:absolute;left:50%;bottom:2px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:rgba(160,160,160,.55);pointer-events:none}
/* back to top: appears at the bottom once you reach the end */
.rk-top{all:unset;position:absolute;right:34px;bottom:-2px;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:#E2711D;color:#15171B;font:600 12px/1 "Inter",Arial,sans-serif;letter-spacing:.04em;white-space:nowrap;cursor:pointer;pointer-events:none;opacity:0;translate:8px 0;transition:opacity .3s ease,translate .3s ease,background-color .2s ease;box-shadow:0 10px 24px rgba(21,23,27,.2)}
.rk-top svg{width:13px;height:13px;transition:transform .3s ease}
.rk-top:hover{background:#F2B33D}
.rk-top:hover svg{transform:translateY(-2px)}
.rk-top:focus-visible{outline:2px solid #15171B;outline-offset:3px}
.rk-rail.done .rk-top{opacity:1;translate:0 0;pointer-events:auto}
.rk-shot{position:absolute;left:50%;width:3px;height:18px;margin-left:-1.5px;border-radius:3px;background:linear-gradient(180deg,#FFE3A3,#E2711D 60%,rgba(226,113,29,0));box-shadow:0 0 8px rgba(226,113,29,.9),0 0 2px #FFF;pointer-events:none}
.rk-spark{position:absolute;left:50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:#F2B33D;box-shadow:0 0 6px #E2711D;pointer-events:none}
.rk-ring{position:absolute;left:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;border:2px solid #E2711D;pointer-events:none}
.rk.recoil svg{animation:rk-recoil .12s ease-out 3}
@keyframes rk-recoil{50%{transform:translateY(3px)}}
@media (max-width:700px){.rk-rail{right:2px;top:84px;bottom:18px;width:14px}.rk{width:14px;height:24px}.rk svg{width:14px;height:24px}.rk-fill{height:calc(100% - 28px)}.rk-pad{width:12px}.rk-tip{right:20px}.rk-top{right:20px;bottom:-4px}.rk-track{opacity:.6}}
@media print{.rk-rail,.snav{display:none}}

/* =================== INNER PAGES: scroll reveals =================== */
/* the opening headline is held back until the script animates it (a safety timer releases it) */
.js-sx .sx-h1-hold h1{opacity:0}
.sx-split .sw{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .08em .14em 0;margin:0 -.08em -.14em 0}
.sx-split .sw>span{display:inline-block;transform:translateY(108%);transition:transform .9s cubic-bezier(.2,.75,.2,1);transition-delay:calc(var(--i) * 45ms + var(--d0,0s))}
.sx-split.in .sw>span{transform:none}

[data-sx]{opacity:0;translate:0 26px;transition:opacity .7s ease var(--rd,0s),translate .85s cubic-bezier(.2,.7,.2,1) var(--rd,0s)}
[data-sx="left"]{translate:-34px 0}
[data-sx="right"]{translate:34px 0}
[data-sx="pop"]{translate:0 10px;scale:.86;transition:opacity .4s ease var(--rd,0s),translate .55s cubic-bezier(.3,1.5,.5,1) var(--rd,0s),scale .55s cubic-bezier(.3,1.5,.5,1) var(--rd,0s)}
[data-sx].in{opacity:1;translate:0 0;scale:1}

/* photos wipe open from the bottom */
img[data-sxi]{clip-path:inset(100% 0 0 0);transition:clip-path 1.1s cubic-bezier(.6,0,.2,1) var(--rd,0s),transform .5s ease,box-shadow .5s ease,filter .5s ease}
img[data-sxi].in{clip-path:inset(0 0 0 0)}

/* section labels transmit their Morse signal */
.sx-label.in svg>*{animation:sx-blink 1.4s ease both}
.sx-label.in svg>*:nth-child(2){animation-delay:.15s}
.sx-label.in svg>*:nth-child(3){animation-delay:.3s}
@keyframes sx-blink{0%{opacity:.15}20%{opacity:1}35%{opacity:.25}55%{opacity:1}}

/* big faint numbers behind chapters, projects and sections */
.sx-ghost{position:absolute;right:0;top:12px;z-index:0;font-family:"Lora",Georgia,serif;font-style:italic;font-weight:600;font-size:clamp(110px,13vw,200px);line-height:1;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px rgba(21,23,27,.08);pointer-events:none;user-select:none;opacity:0;translate:60px 0;transition:opacity 1s ease .1s,translate 1.4s cubic-bezier(.2,.7,.2,1) .1s}
.sx-ghost.in{opacity:1;translate:0 0}
.sx-ghost-host{position:relative}
.sx-ghost-host>*:not(.sx-ghost){position:relative;z-index:1}
@media (max-width:700px){.sx-ghost{font-size:90px}}

/* approach steps light up one after another */
.flow.sx-flow span{opacity:.2;transition:opacity .4s ease,background-color .4s ease,color .4s ease;transition-delay:var(--fd,0s)}
.flow.sx-flow i{opacity:.15;transition:opacity .4s ease;transition-delay:var(--fd,0s)}
.flow.sx-flow.in span,.flow.sx-flow.in i{opacity:1}

/* hover life for photos and cards */
.ev figure img,.pi img,.cols3>div,.steps>li,.minis>div,.post-card,.chap{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,clip-path 1.1s cubic-bezier(.6,0,.2,1) var(--rd,0s)}
.ev figure img:hover,.pi img:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(21,23,27,.16)}
.cols3>div:hover,.steps>li:hover,.minis>div:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(21,23,27,.10)}
.minis b{font-variant-numeric:tabular-nums}
.jump a{transition:transform .25s ease,background-color .25s ease,border-color .25s ease}
.jump a:hover{transform:translateY(-3px)}
.jump a.cur{border-color:#E2711D;background:rgba(226,113,29,.12)}

@media (prefers-reduced-motion:reduce){
  .nl>span,:is(.navlinks,.nav-links) a::after,.cvx::before,.snav{transition:none}
  .cvx:hover .cv-arrow,.cvx.nudge .cv-arrow,.cvx:hover .cv-tray,.mnav[open] .mnav-panel,.mnav[open] .mnav-panel a,.rk-flame,.rk-flame2,.brand:hover svg g>*{animation:none}
}