/* Motion direction 4. CSS starts the hero immediately, without waiting for JS.
   All visibility gates require BOTH js and motion-ok from the head bootstrap.
   The separate font-stability stylesheet retains the verified CLS correction. */
:root{--motion-ease:cubic-bezier(.16,1,.3,1)}
html{scroll-padding-top:100px}
.motion-mask{display:inline-block;overflow:hidden;vertical-align:bottom;line-height:1.08;padding-bottom:.12em;margin-bottom:-.12em}
.motion-word{display:block;line-height:inherit}
.hero,.page-head{isolation:isolate}
.hero .wrap,.page-head .wrap{position:relative;z-index:3}
.hero .arch-mark,.page-head .arch-mark{z-index:0}
.hero::before,.page-head::before{content:"";position:absolute;pointer-events:none;z-index:1;top:-45%;bottom:-45%;left:-90%;width:80%;background:linear-gradient(105deg,transparent 20%,rgba(246,239,224,.28) 50%,transparent 80%);opacity:0;transform:translateX(0) rotate(-12deg)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse at 15% 25%,rgba(246,239,224,.07),transparent 58%),linear-gradient(110deg,transparent,rgba(14,24,48,.24))}
.hero .portrait{position:relative;min-width:0;min-height:0;box-shadow:0 24px 64px rgba(0,0,0,.2)}
.hero .portrait picture{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:hidden;transform-origin:50% 50%}
.hero .portrait::after{content:"";position:absolute;inset:10px;border:1px solid rgba(246,239,224,.3);pointer-events:none;z-index:4}
.hero .portrait::before{content:"";position:absolute;inset:0;background:var(--cream);pointer-events:none;z-index:3;transform:scaleY(0);transform-origin:top}
.motion-reveal{opacity:1;transform:none}
.photo.motion-reveal{isolation:isolate;overflow:hidden}
.photo.motion-reveal::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:var(--cream);transform:scaleY(0);transform-origin:bottom}
.photo-frame.motion-reveal::after{inset:0 0 18px 18px}
.nav a{position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:right}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{border-bottom-color:transparent}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--red);pointer-events:none;transform:scaleX(var(--scroll-progress,0));transform-origin:left;z-index:2}
.btn{position:relative;isolation:isolate;overflow:hidden}
.btn::before{content:"";position:absolute;inset:-60% auto -60% -70%;width:55%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);transform:translateX(0) rotate(18deg);opacity:0;z-index:-1}
.motion-number{display:inline-block;position:relative;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:700}
.motion-number-base{display:inline-block}
.motion-number-visual{position:absolute;inset:0;text-align:right;pointer-events:none}
.motion-number.is-counting .motion-number-base{opacity:0}
/* The original cover-sized box stays in the grid. Only its inner surface tilts.
   A transparent outline, slight image overscan and clipped glare prevent seams.
   The shadow kernel is static: only its transform and opacity are animated. */
.cover-stage{position:relative;align-self:start;perspective:1000px;min-width:0;min-height:0;background:var(--navy-deep);isolation:isolate}
.cover-stage::before{content:"";position:absolute;inset:2% 3%;background:var(--navy);box-shadow:0 18px 30px rgba(14,24,48,.3);opacity:0;transform:translate3d(var(--shadow-x,0px),var(--shadow-y,10px),0) scale(.96);pointer-events:none;z-index:0}
.cover-surface{position:absolute;inset:0;overflow:hidden;background:var(--navy-deep);outline:1px solid transparent;backface-visibility:hidden;transform:translateZ(0);transform-origin:50% 60%;z-index:1}
.cover-image{display:block;width:100%;height:100%;object-fit:contain;backface-visibility:hidden;transform:translateZ(0) scale(1.003)}
.mini-cover .cover-image{object-fit:cover}
.cover-glare{position:absolute;inset:-50%;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.85),rgba(255,255,255,.2) 24%,transparent 58%);mix-blend-mode:soft-light;opacity:0;transform:translate3d(var(--glare-x,0%),var(--glare-y,0%),0);z-index:2}
.book-links a{min-height:24px;display:inline-flex;align-items:center}
.book :focus-visible{outline-color:var(--cream);outline-offset:4px}
@media (prefers-reduced-motion:no-preference){
  html.js.motion-ok .motion-word{animation:ecu-word 1.1s var(--motion-ease) var(--word-delay,0ms) both}
  html.js.motion-ok .hero .label,html.js.motion-ok .page-head .label{animation:ecu-eyebrow .9s var(--motion-ease) both}
  html.js.motion-ok .hero h1.rule::before,html.js.motion-ok .page-head h1.rule::before{transform-origin:left;animation:ecu-rule 1s var(--motion-ease) .08s both}
  html.js.motion-ok .hero .lead,html.js.motion-ok .page-head .lead{animation:ecu-copy 1.05s var(--motion-ease) .2s both}
  html.js.motion-ok .hero .btn-row{animation:ecu-copy .95s var(--motion-ease) .65s both}
  html.js.motion-ok .hero .portrait{transform:translate3d(0,var(--portrait-y,0px),0)}
  html.js.motion-ok .hero .portrait picture{animation:ecu-portrait 1.5s var(--motion-ease) .03s both}
  html.js.motion-ok .hero .portrait img{transform:translate3d(var(--pointer-x,0px),var(--pointer-y,0px),0) scale(1.06)}
  html.js.motion-ok .hero .portrait::before{animation:ecu-shutter 1.3s var(--motion-ease) .03s both}
  html.js.motion-ok .hero .arch-mark{transform:translate3d(0,var(--mark-y,0px),0)}
  html.js.motion-ok .hero::before,html.js.motion-ok .page-head::before{animation:ecu-light 4.6s linear .05s both}
  html.js.motion-ok .motion-reveal:not(.is-visible){opacity:0;transform:translate3d(0,40px,0)}
  html.js.motion-ok .motion-reveal.is-visible{opacity:1;transform:none}
  html.js.motion-ok .motion-reveal.is-entering{animation:ecu-reveal 1.05s var(--motion-ease) var(--motion-delay,0ms) both}
  html.js.motion-ok .photo.motion-reveal:not(.is-visible)::after{transform:scaleY(1)}
  html.js.motion-ok .photo.motion-reveal.is-entering::after{animation:ecu-shutter 1.3s var(--motion-ease) var(--motion-delay,0ms) both}
  html.js.motion-ok .motion-reveal.is-entering .rule::before,html.js.motion-ok .motion-reveal.rule.is-entering::before{transform-origin:left;animation:ecu-rule 1.15s var(--motion-ease) var(--motion-delay,0ms) both}
  html.js.motion-ok .nav a::after{transition:transform .35s var(--motion-ease)}
  html.js.motion-ok .nav a:hover::after,html.js.motion-ok .nav a:focus-visible::after{transform:scaleX(1);transform-origin:left}
  html.js.motion-ok .btn{transition:transform .35s var(--motion-ease);transform:translate3d(var(--magnet-x,0px),var(--magnet-y,0px),0)}
  html.js.motion-ok .btn::before{transition:transform .65s var(--motion-ease),opacity .2s}
  html.js.motion-ok .btn:active{transform:scale(.98)}
  html.js.motion-ok .text-link{transition:transform .3s var(--motion-ease)}
  html.js.motion-ok .text-link:hover,html.js.motion-ok .text-link:focus-visible{transform:translateX(5px)}
  html.js.motion-ok .cover-surface{transition:transform .45s var(--motion-ease)}
  html.js.motion-ok .cover-glare,html.js.motion-ok .cover-stage::before{transition:opacity .4s var(--motion-ease),transform .45s var(--motion-ease)}
  html.js.motion-ok .book:focus-within .cover-surface,html.js.motion-ok .mini-book:focus-within .cover-surface{transform:rotateX(3deg) rotateY(-6deg) translate3d(0,-6px,0) scale(.985)}
  html.js.motion-ok .book:focus-within .cover-glare,html.js.motion-ok .mini-book:focus-within .cover-glare{opacity:.45}
  html.js.motion-ok .cover-stage.is-tilting .cover-surface{will-change:transform}
  html.js.motion-ok .cover-stage.is-tilting .cover-glare{will-change:transform,opacity}
  html.js.motion-ok .nav-toggle .bars::before,html.js.motion-ok .nav-toggle .bars::after,html.js.motion-ok .nav-toggle .bars span{transition:transform .3s var(--motion-ease),opacity .2s}
  html.js.motion-ok .nav-toggle[aria-expanded="true"] .bars::before{transform:translateY(5px) rotate(45deg)}
  html.js.motion-ok .nav-toggle[aria-expanded="true"] .bars::after{transform:translateY(-5px) rotate(-45deg)}
  html.js.motion-ok .nav-toggle[aria-expanded="true"] .bars span{opacity:0}
  html.js.motion-ok .nav.open{animation:ecu-menu .35s var(--motion-ease) both}
  @media (hover:hover) and (pointer:fine){
    html.js.motion-ok .cover-stage:hover .cover-surface{transform:rotateX(var(--tilt-x,4deg)) rotateY(var(--tilt-y,-7deg)) translate3d(0,-7px,0) scale(.985)}
    html.js.motion-ok .cover-stage:hover .cover-glare{opacity:.65}
    html.js.motion-ok .cover-stage:hover::before{opacity:.65}
    html.js.motion-ok .btn:hover::before,html.js.motion-ok .btn:focus-visible::before{transform:translateX(370%) rotate(18deg);opacity:1}
    html.js.motion-ok .card.is-visible:not(.is-entering),html.js.motion-ok .topics > li.is-visible:not(.is-entering),html.js.motion-ok .contact-item.is-visible:not(.is-entering){transition:transform .4s var(--motion-ease)}
    html.js.motion-ok .card.is-visible:not(.is-entering):hover,html.js.motion-ok .topics > li.is-visible:not(.is-entering):hover,html.js.motion-ok .contact-item.is-visible:not(.is-entering):hover{transform:translateY(-6px)}
  }
}
@keyframes ecu-word{from{transform:translate3d(0,110%,0)}to{transform:translate3d(0,0,0)}}
@keyframes ecu-eyebrow{from{transform:translate3d(0,18px,0);opacity:0}to{transform:none;opacity:1}}
@keyframes ecu-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ecu-copy{from{transform:translate3d(0,28px,0);opacity:0}to{transform:none;opacity:1}}
@keyframes ecu-portrait{from{transform:scale(1.08)}to{transform:scale(1)}}
@keyframes ecu-shutter{from{transform:scaleY(1)}to{transform:scaleY(0)}}
@keyframes ecu-light{0%{transform:translate3d(0,0,0) rotate(-12deg);opacity:0}12%{opacity:1}75%{opacity:1}100%{transform:translate3d(355%,0,0) rotate(-12deg);opacity:0}}
@keyframes ecu-reveal{from{transform:translate3d(0,40px,0);opacity:0}to{transform:none;opacity:1}}
@keyframes ecu-menu{from{transform:translateY(-8px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .motion-word,.motion-reveal,.hero .portrait,.hero .portrait picture,.hero .portrait img,.cover-surface,.cover-image,.btn,.text-link{opacity:1!important;transform:none!important}
  .hero .arch-mark{transform:none!important}
  .motion-number-base{opacity:1!important}
  .motion-number-visual,.hero::before,.page-head::before,.hero .portrait::before,.photo.motion-reveal::after,.cover-glare,.site-header::after{display:none!important}
}
@media print{
  *,*::before,*::after{animation:none!important;transition:none!important}
  .motion-word,.motion-reveal,.motion-number-base{opacity:1!important;transform:none!important}
  .motion-number-visual,.hero::before,.page-head::before,.hero .portrait::before,.photo.motion-reveal::after,.cover-glare,.site-header::after{display:none!important}
}