body{margin:0;background:#FAFAF7}
a{color:#1E56A0}a:hover{color:#123A6E}
html{scroll-behavior:smooth}
:root{--ease:cubic-bezier(.22,1,.36,1)}

/* ---------- ON LOAD ---------- */
/* Name lines rise in one after another */
.hl-line{display:block;overflow:hidden;padding-bottom:.04em}
.hl-line > span{display:block;animation:hl-rise 1.1s var(--ease) both}
.hl-d1 > span,.hl-d1{animation-delay:.15s}
.hl-d2 > span,.hl-d2{animation-delay:.28s}
.hl-d3{animation-delay:.5s}
.hl-d4{animation-delay:.65s}
.hl-d5{animation-delay:.8s}
@keyframes hl-rise{from{transform:translateY(105%)}to{transform:none}}
.hl-fade{animation:hl-fadeup .9s var(--ease) both}
@keyframes hl-fadeup{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* Header slides down */
.hl-head{animation:hl-down .8s var(--ease) both}
@keyframes hl-down{from{transform:translateY(-100%)}to{transform:none}}
/* Nav links appear one by one */
.hl-nav a{animation:hl-fadeup .7s var(--ease) both}
.hl-nav a:nth-child(1){animation-delay:.3s}.hl-nav a:nth-child(2){animation-delay:.36s}.hl-nav a:nth-child(3){animation-delay:.42s}
.hl-nav a:nth-child(4){animation-delay:.48s}.hl-nav a:nth-child(5){animation-delay:.54s}.hl-nav a:nth-child(6){animation-delay:.6s}
/* Eyebrow line draws in */
.hl-rule{display:inline-block;width:40px;height:2px;background:#1E56A0;vertical-align:middle;margin-right:12px;transform-origin:left;animation:hl-draw .9s var(--ease) .1s both}
@keyframes hl-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* Portrait: wipe in from the bottom, then a slow float */
.hl-wipe{animation:hl-wipe 1.3s var(--ease) .35s both, hl-float 6s ease-in-out 1.7s infinite alternate}
@keyframes hl-wipe{from{clip-path:inset(100% 0 0 0 round 6px)}to{clip-path:inset(0 0 0 0 round 6px)}}
@keyframes hl-float{to{transform:translateY(-8px)}}
/* Soft blue glow drifting behind the hero */
.hl-glow{position:absolute;width:520px;height:520px;right:-80px;top:-60px;border-radius:50%;background:radial-gradient(circle,rgba(30,86,160,.14),rgba(30,86,160,0) 70%);pointer-events:none;animation:hl-drift 14s ease-in-out infinite alternate}
@keyframes hl-drift{to{transform:translate3d(-60px,50px,0) scale(1.12)}}
/* Scroll hint pulses */
.hl-hint{animation:hl-bob 1.8s ease-in-out infinite}
@keyframes hl-bob{50%{transform:translateY(6px);opacity:.5}}

/* ---------- ON SCROLL (pure CSS, no script) ---------- */
@supports (animation-timeline: view()){
.hl-top{opacity:0}
/* Reading progress bar at the top */
.hl-progress{animation:hl-bar linear both;animation-timeline:scroll(root)}
@keyframes hl-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* Header gets a shadow once you scroll */
.hl-head{animation:hl-down .8s var(--ease) both, hl-shadow linear both;animation-timeline:auto, scroll(root);animation-range:normal, 0 160px}
@keyframes hl-shadow{to{box-shadow:0 6px 24px rgba(21,23,28,.08)}}
/* Back-to-top button appears after the hero */
.hl-top{animation:hl-show linear both;animation-timeline:scroll(root);animation-range:400px 700px}
@keyframes hl-show{from{opacity:0;transform:translateY(20px);pointer-events:none}to{opacity:1;transform:none;pointer-events:auto}}
/* Hero content drifts up and fades as you leave it */
.hl-leave{animation:hl-out linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
@keyframes hl-out{to{opacity:.2;transform:translateY(-40px)}}
/* Fade up as elements enter, with stagger */
.hl-rv{animation:hl-fadeup linear both;animation-timeline:view();animation-range:entry 5% cover 25%}
.hl-rv2{animation:hl-fadeup linear both;animation-timeline:view();animation-range:entry 15% cover 32%}
.hl-rv3{animation:hl-fadeup linear both;animation-timeline:view();animation-range:entry 25% cover 40%}
/* Headings slide in from the left, underline draws */
.hl-h2{position:relative;padding-bottom:14px;animation:hl-slide linear both;animation-timeline:view();animation-range:entry 0% cover 25%}
@keyframes hl-slide{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}
.hl-h2::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:3px;background:#1E56A0;transform-origin:left;animation:hl-draw linear both;animation-timeline:view();animation-range:entry 20% cover 35%}
/* Story line grows with the scroll, dots pop */
.hl-grow{transform-origin:top;animation:hl-grow linear both;animation-timeline:view();animation-range:entry 10% cover 70%}
@keyframes hl-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.hl-dot{animation:hl-pop linear both;animation-timeline:view();animation-range:entry 20% cover 35%}
@keyframes hl-pop{from{transform:scale(0)}to{transform:scale(1)}}
/* Images open with a wipe on scroll */
.hl-wiperv{animation:hl-wipe linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
/* Dark section fades in from light */
.hl-dark{animation:hl-darken linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
@keyframes hl-darken{from{background-color:#FAFAF7;color:#15171C}to{background-color:#15171C;color:#F2F3F5}}
/* Advice quotes get a highlighter sweep */
.hl-mark{background:linear-gradient(transparent 62%,rgba(30,86,160,.18) 62%) 0 0/0% 100% no-repeat;animation:hl-sweep linear both;animation-timeline:view();animation-range:entry 30% cover 50%}
@keyframes hl-sweep{to{background-size:100% 100%}}
/* Big name in the footer grows in */
.hl-big{animation:hl-scale linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
@keyframes hl-scale{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
}

/* ---------- CONTINUOUS (always running) ---------- */
/* Rotating text ring next to the portrait */
.hl-spin{animation:hl-spin 22s linear infinite}
@keyframes hl-spin{to{transform:rotate(360deg)}}
/* Pulsing "currently" dot */
.hl-pulse{position:relative}
.hl-pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:#2E8B57;animation:hl-ping 2s ease-out infinite}
@keyframes hl-ping{from{transform:scale(1);opacity:.6}to{transform:scale(2.8);opacity:0}}
/* Slow keyword ticker */
.hl-ticker{display:flex;width:max-content;animation:hl-marquee 60s linear infinite}
.hl-ticker-wrap:hover .hl-ticker{animation-play-state:paused}
@keyframes hl-marquee{to{transform:translateX(-50%)}}
/* Light travelling down the story line */
.hl-travel{position:absolute;left:-3px;width:8px;height:80px;border-radius:4px;background:linear-gradient(transparent,rgba(30,86,160,.9),transparent);animation:hl-travel 5s ease-in-out infinite}
@keyframes hl-travel{from{top:0;opacity:0}15%{opacity:1}85%{opacity:1}to{top:calc(100% - 80px);opacity:0}}
/* Drifting dot grid in the dark section */
.hl-dots{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:28px 28px;animation:hl-dotdrift 40s linear infinite;pointer-events:none}
@keyframes hl-dotdrift{to{background-position:280px 280px}}
/* Rotating featured quote */
.hl-rot{position:relative;min-height:3.2em}
.hl-rot > p{position:absolute;inset:0;margin:0;opacity:0;animation:hl-cycle 25s infinite}
.hl-rot > p:nth-child(2){animation-delay:5s}.hl-rot > p:nth-child(3){animation-delay:10s}
.hl-rot > p:nth-child(4){animation-delay:15s}.hl-rot > p:nth-child(5){animation-delay:20s}
@keyframes hl-cycle{0%{opacity:0;transform:translateY(12px)}4%{opacity:1;transform:none}18%{opacity:1;transform:none}22%{opacity:0;transform:translateY(-12px)}100%{opacity:0}}
/* Main button arrow nudges */
.hl-nudge{display:inline-block;animation:hl-nudge 2.4s ease-in-out infinite}
@keyframes hl-nudge{0%,60%,100%{transform:none}75%{transform:translateX(5px)}}
/* Slow shine across the footer name */
.hl-shine{background:linear-gradient(100deg,#F2F3F5 40%,#8FB4E8 50%,#F2F3F5 60%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:hl-shinemove 7s linear infinite}
@keyframes hl-shinemove{from{background-position:100% 0}to{background-position:-150% 0}}

/* ---------- HOVER ---------- */
.hl-card{transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.hl-card:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(21,23,28,.10);border-color:#1E56A0}
.hl-u{background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .35s var(--ease);text-decoration:none}
.hl-u:hover{background-size:100% 1.5px}
.hl-btn{transition:background-color .3s,color .3s,border-color .3s,transform .3s var(--ease)}
.hl-btn:hover{transform:translateY(-2px)}
.hl-btn-dark:hover{background-color:#1E56A0 !important;color:#FFFFFF !important}
.hl-btn-line:hover{background-color:#15171C !important;color:#FAFAF7 !important}
.hl-arrow{display:inline-block;transition:transform .3s var(--ease)}
a:hover .hl-arrow{transform:translateX(6px)}
.hl-row{transition:padding .35s var(--ease),color .35s,background-color .35s}
.hl-row:hover{padding-left:16px !important;padding-right:16px !important;background-color:#EEF2F8;color:#1E56A0 !important}
.hl-img{transition:transform .8s var(--ease)}
.hl-imgbox:hover .hl-img{transform:scale(1.05)}
.hl-quote{transition:transform .35s var(--ease)}
.hl-quote:hover{transform:translateX(6px)}

@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation:none !important;transition:none !important}
}

/* ---------- WordPress additions (not in the canvas draft) ---------- */
.admin-bar .hl-head{top:32px}
@media (max-width:782px){.admin-bar .hl-head{top:46px}}
/* Photo slot until real photos are set in functions.php */
.hl-mono{height:100%;display:flex;align-items:center;justify-content:center;background:#E6E8EC;border-radius:6px;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:72px;letter-spacing:-0.02em;color:#C3C8D0}
.hl-photo{width:100%;height:100%;object-fit:cover;display:block;border-radius:6px}
/* Article pages */
.hl-article{max-width:760px;margin:0 auto;padding:80px 32px 96px}
.hl-article h1{margin:0 0 16px;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(36px,5vw,56px);line-height:1.08;letter-spacing:-0.02em}
.hl-meta{margin:0 0 40px;font-size:15px;color:#4A4F57}
.hl-content h2{margin:48px 0 16px;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:32px;line-height:1.15}
.hl-content h3{margin:36px 0 12px;font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:24px}
.hl-content img{max-width:100%;height:auto;border-radius:6px}
.hl-content blockquote{margin:32px 0;padding:0 0 0 24px;border-left:3px solid #1E56A0;font-size:22px;font-style:italic;color:#2B2F36}
.hl-content figure{margin:32px 0}
.hl-content figcaption{font-size:15px;color:#4A4F57;margin-top:8px}
.hl-list{max-width:1200px;margin:0 auto;padding:80px 32px 96px}
.hl-list h1{margin:0 0 32px;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:44px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}