/* Reveal the pigment stroke once its section enters the viewport. */
.home-scene{background:var(--paper);isolation:isolate}
.home-scene:before{content:"";position:absolute;left:0;top:33%;width:67%;height:67%;pointer-events:none;background:url('assets/sea-source.jpg') left 47%/270% auto no-repeat;opacity:.48;filter:saturate(.65) brightness(1.12);mask-image:linear-gradient(to right,transparent 0%,#000 14%,#000 65%,transparent 100%),linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.4) 22%,#000 55%,#000 70%,transparent 100%);mask-composite:intersect}
@media(max-width:600px){.home-scene:before{top:38%;width:82%;height:62%;background-size:330% auto;opacity:.36}}
.hero-film{position:absolute;left:34%;right:0;top:0;bottom:0;pointer-events:none;mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.08) 8%,rgba(0,0,0,.35) 18%,rgba(0,0,0,.72) 28%,#000 40%,#000 92%,transparent 100%),linear-gradient(to bottom,transparent,#000 9%,#000 90%,transparent);mask-composite:intersect}
.hero-film video{width:100%;height:100%;object-fit:cover;object-position:52% 32%;opacity:0;transition:opacity .4s;filter:saturate(.86) brightness(1.035)}
.hero-film video.is-ready{opacity:1}
.home-heading{z-index:2}
.film-controls{position:absolute;z-index:3;right:8%;bottom:3%;display:flex;gap:8px;align-items:center}
.film-controls button{font:16px var(--serif);color:#234763;background:#f8f5efed;border:1px solid #9bafae;border-radius:4px;padding:7px 12px;cursor:pointer}
.film-controls button:focus-visible{outline:2px solid #234763;outline-offset:3px}
#film-status{font:14px var(--serif);background:#f8f5ef;color:#234763}
#film-status:empty{display:none}
@media(max-width:600px){.home-scene{background:var(--paper)}.hero-film{left:20%;right:0;top:0;bottom:0;mask-image:linear-gradient(to right,transparent,#000 32%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent)}.film-controls{right:5%;bottom:3%;gap:6px}.film-controls button{font-size:14px;padding:7px 9px}}
.header.reading-navigation{position:fixed;top:0;left:0;right:0;height:clamp(55px,4.78vw,92px);z-index:30;background:url('assets/home-plate.png') center top/100% auto no-repeat;transition:height .3s,box-shadow .3s}
.reading-navigation nav a{position:relative;font-size:clamp(18px,2.45vw,47px);transition:font-size .3s,color .3s}
.reading-navigation nav a:after{content:"";position:absolute;left:3%;right:3%;bottom:-9px;height:3px;background:#345971;border-radius:65% 35% 60% 40%;transform:scaleX(0) rotate(-2deg);transform-origin:left;transition:transform .35s}
.reading-navigation nav a[aria-current="location"]{color:#234763}
.reading-navigation nav a[aria-current="location"]:after{transform:scaleX(1) rotate(-2deg)}
.reading-navigation.is-reading{height:64px;box-shadow:0 3px 14px #39526518;background-color:#c2d5df}
.reading-navigation.is-reading nav a{font-size:23px}
.has-reading-navigation{scroll-padding-top:85px}
@media(max-width:600px){.has-reading-navigation .home:before{content:"";display:block;height:55px}.header.reading-navigation,.reading-navigation.is-reading{height:55px;background-size:auto 680px;clip-path:none}.reading-navigation nav a,.reading-navigation.is-reading nav a{font-size:clamp(14px,4.6vw,18px)}.has-reading-navigation{scroll-padding-top:72px}}
.js-motion .illustration{opacity:0;transform:translateY(28px);transition:opacity 1.6s ease .15s,transform 1.8s cubic-bezier(.22,1,.36,1) .15s}
.js-motion .illustration.illustration-visible{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.js-motion .illustration{opacity:1;transform:none;transition:none}}
.js-motion .reveal .paint-label{color:transparent;transition:color .45s .35s}
.js-motion .reveal.visible .paint-label{color:var(--ink)}
.js-motion .reveal.visible .paint-label.navy{color:#fff8e7}
.js-motion .reveal .paint-label:before{transform-origin:left center;transform:scaleX(.02);opacity:0;transition:transform .85s cubic-bezier(.22,1,.36,1),opacity .3s}
.js-motion .reveal.visible .paint-label:before{transform:scaleX(1);opacity:1}
.portal{transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s;background-image:url('assets/home-plate.png');background-size:373% 327.868%;background-repeat:no-repeat}
.portal-about{background-position:10.1106% 89.784%}
.portal-work{background-position:50% 89.784%}
.portal-contact{background-position:89.8894% 89.784%}
@media(hover:hover) and (pointer:fine){.portal:hover{transform:translateY(-5px) rotate(-.5deg);box-shadow:3px 10px 20px #58493526}.portal-work:hover{transform:translateY(-5px) rotate(.5deg)}}
.portal:focus-visible{transform:translateY(-3px)}
.card-expansion{overflow:hidden}
.card:not(.is-expanded) .plus{transform:rotate(0)}
.card.is-expanded .plus{transform:rotate(45deg)}
@media(max-width:600px){.portal{background-size:385% 335%}.portal-about{background-position:10% 89%}.portal-work{background-position:50% 89%}.portal-contact{background-position:90% 89%}}
@media(prefers-reduced-motion:reduce){.portal:hover,.portal:focus-visible{transform:none!important}.js-motion .reveal .paint-label{color:var(--ink)}.js-motion .reveal .paint-label.navy{color:#fff8e7}.js-motion .reveal .paint-label:before{transform:none;opacity:1}}