:root{--story-ease:cubic-bezier(.22,.7,.2,1)}
html{scroll-padding-top:88px}
body{overflow-x:clip}
.page-shell{max-width:none;overflow:visible}
.site-header{position:fixed;inset:0 0 auto;z-index:60;height:88px;background:transparent;transition:background .45s ease,box-shadow .45s ease}
.site-header.is-solid,.site-header.menu-open{background:rgb(245 241 233 / .94);box-shadow:0 1px 0 rgb(36 43 43 / .12);backdrop-filter:blur(14px)}
.menu-toggle{display:none;border:0;background:transparent;color:var(--blue);font-weight:600}
.entry-curtain{display:none;position:fixed;inset:0;z-index:100;background:var(--paper);place-items:center;text-align:center;transition:opacity .65s ease,visibility .65s ease}
body.entry-active{overflow:hidden}
body.entry-active .entry-curtain{display:grid;grid-template-rows:1fr auto auto 1fr;gap:22px}
body.entry-leaving .entry-curtain{opacity:0;visibility:hidden;pointer-events:none}
.entry-curtain__mark{grid-row:2;display:flex;align-items:center;gap:13px;color:var(--blue);font:italic clamp(36px,6vw,80px)/1 var(--font-serif);letter-spacing:-.07em;animation:entry-rise .9s var(--story-ease) both}
.entry-curtain__star{font:clamp(28px,4vw,49px)/1 var(--font-sans);color:var(--coral);animation:entry-turn 1.5s var(--story-ease) both}
.entry-curtain__line{grid-row:3;width:min(56vw,540px);height:1px;background:var(--blue);transform-origin:left;animation:entry-draw 1.4s .25s var(--story-ease) both}
.entry-curtain__note{grid-row:4;align-self:start;color:var(--muted);font-size:13px;letter-spacing:.03em;animation:entry-rise .8s .4s var(--story-ease) both}
@keyframes entry-rise{from{opacity:0;transform:translateY(22px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes entry-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes entry-turn{from{opacity:0;transform:rotate(-60deg) scale(.7)}to{opacity:1;transform:rotate(0) scale(1)}}

.story-track{position:relative}
.story-pin{position:relative}
.story-world{position:relative;background:var(--paper)}
.story-panel{position:relative;z-index:1;min-height:100vh}
.story-thread{pointer-events:none;fill:none;color:#82948d}
.story-thread__path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.story-thread__dot{fill:var(--coral);stroke:var(--paper);stroke-width:2;opacity:0}
html:not(.motion-enabled) .story-thread__path{stroke-dashoffset:0}
.story-thread--desktop{display:none}
.story-thread--mobile{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.46}
.story-panel.hero{padding-top:125px}
.story-panel.statement{background:transparent;min-height:690px}
.story-panel.statement:before{content:"";position:absolute;inset:11% 3% 8%;background:#e5e7dd;z-index:-1;border-radius:50% 45% 48% 45%/9% 12% 10% 10%;opacity:.8}
.story-reveal,.scroll-reveal{transition:opacity .9s ease-out,filter .9s ease-out,transform .9s var(--story-ease)}
.motion-enabled .story-reveal:not([data-shown]),.motion-enabled .scroll-reveal:not([data-shown]){opacity:0;filter:blur(12px);transform:translateY(14px)}

.sketch-panel{display:flex;align-items:center;justify-content:center;padding:120px clamp(24px,5vw,86px) 90px;text-align:center;overflow:hidden}
.sketch-panel>.section-index{position:absolute;left:clamp(24px,5vw,86px);top:125px}
.sketch-center{position:relative;z-index:2;max-width:760px}
.sketch-center p{font-size:16px;color:var(--muted);margin-bottom:20px}
.sketch-center h2{font-size:clamp(66px,8vw,130px);line-height:.94;margin:0 0 30px}
.sketch-center>span{font:italic 23px var(--font-serif);color:var(--blue)}
.sketch-object{position:absolute;z-index:1;display:grid;justify-items:center;gap:4px;color:var(--blue);font:italic 18px var(--font-serif)}
.sketch-object svg{width:100%;height:auto;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sketch-object--laptop{width:clamp(145px,17vw,240px);left:7%;top:18%;transform:rotate(-9deg)}
.sketch-object--spark{width:clamp(90px,11vw,155px);right:8%;top:13%;transform:rotate(13deg)}
.sketch-object--note{right:7%;bottom:12%;padding:24px 31px 13px;background:#d5e4f0;border-radius:49% 48% 54% 45%;font:italic clamp(25px,3vw,42px)/.97 var(--font-serif);transform:rotate(8deg)}
.sketch-object--note svg{width:90px;margin-top:10px}
.motion-enabled .sketch-object[data-shown] svg{animation:object-float 5s ease-in-out infinite}
.motion-enabled .sketch-object--spark[data-shown] svg{animation-delay:-1.6s}
@keyframes object-float{0%,100%{translate:0 0;rotate:-2deg}50%{translate:0 -10px;rotate:3deg}}

.ideas-panel{padding:135px clamp(24px,7vw,120px) 90px;overflow:hidden}
.ideas-panel h2{font-size:clamp(70px,7vw,120px);line-height:.95;max-width:850px;margin:46px 0}
.ideas-list{position:relative;z-index:2;max-width:690px;margin-left:auto}
.ideas-list p{display:flex;gap:25px;align-items:baseline;border-bottom:1px solid var(--line);padding:18px 0;margin:0;font:italic clamp(20px,2.2vw,32px)/1.2 var(--font-serif)}
.ideas-list p span{min-width:80px;font:600 13px var(--font-sans);color:var(--blue)}
.ideas-orbit{position:absolute;left:5%;bottom:8%;width:min(27vw,360px);color:#789088;transform:rotate(-15deg)}
.ideas-orbit svg{width:100%;stroke:currentColor;stroke-width:1.5}
.motion-enabled .ideas-orbit[data-shown] svg{animation:orbit-sway 7s ease-in-out infinite}
@keyframes orbit-sway{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
.handoff-panel{display:grid;place-items:center;text-align:center;padding:120px 24px 85px;overflow:hidden}
.handoff-content{position:relative;z-index:2}
.handoff-content .section-index{margin-bottom:32px}
.handoff-content h2{font-size:clamp(80px,9vw,150px);line-height:.93;margin:0 0 32px}
.handoff-content>p:not(.section-index){font-size:18px;color:var(--muted);margin-bottom:28px}
.handoff-link{display:inline-flex;gap:24px;align-items:center;padding:15px 24px;border:1px solid var(--blue);border-radius:999px;background:var(--blue);color:var(--paper);text-decoration:none;font-weight:600;transition:transform .25s var(--story-ease),background .25s ease,color .25s ease}
.handoff-link:hover{transform:translateY(-4px);background:transparent;color:var(--blue)}
.handoff-link span{font-size:23px;line-height:1}
.handoff-doodle{position:absolute;right:7%;bottom:11%;width:180px;stroke:var(--coral);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform:rotate(17deg)}

.motion-enabled .project-card{transition:opacity .65s ease,filter .65s ease,transform .65s var(--story-ease)}
.motion-enabled .project-card:not([data-shown]){opacity:0;filter:blur(10px);transform:translateY(32px)}
.motion-enabled .project-grid.is-changing{opacity:.35;filter:blur(5px);transform:translateY(8px)}
.project-grid{transition:opacity .2s ease,filter .2s ease,transform .2s ease}
.project-art{transition:clip-path .8s var(--story-ease)}
.motion-enabled .project-card:not([data-shown]) .project-art{clip-path:inset(0 0 100% 0)}
.project-card .project-art{clip-path:inset(0)}
.motion-enabled .project-card[data-shown] .project-art :is(.art-harbor__window,.art-signal__paper,.art-field__disc){transition:transform .7s var(--story-ease)}
.motion-enabled .project-card:hover .art-harbor__window{transform:rotate(-1deg) translateY(-7px)}
.motion-enabled .project-card:hover .art-signal__paper{transform:rotate(3deg) translateY(-7px)}
.motion-enabled .project-card:hover .art-field__disc{transform:rotate(-15deg)}

@media (min-width:800px) and (prefers-reduced-motion:no-preference){
  .motion-ready .story-pin{position:sticky;top:0;height:100vh;overflow:hidden}
  .motion-ready .story-world{display:flex;width:500vw;height:100vh;will-change:transform}
  .motion-ready .story-panel{flex:0 0 100vw;width:100vw;height:100vh;min-height:0}
  .motion-ready .story-thread--desktop{display:block;position:absolute;z-index:0;inset:0;width:500vw;height:100vh;opacity:.55}
  .motion-ready .story-thread--mobile{display:none}
  .motion-ready .hero{padding-top:110px;min-height:0}
  .motion-ready .hero-copy{padding-top:18px}
  .motion-ready .hero-art{height:calc(100vh - 155px);min-height:0}
  .motion-ready .boat-drawing{max-height:100%}
  .motion-ready .statement{display:flex;flex-direction:column;justify-content:space-between;padding-top:115px;padding-bottom:55px}
  .motion-ready .statement-grid{width:100%;margin:auto}
  .motion-ready .statement-foot{width:100%}
}

@media (max-width:799px){
  .site-header{height:78px;padding:0 23px}
  .menu-toggle{display:inline-flex;align-items:center;gap:9px;padding:10px 0}
  .menu-toggle span{font-size:24px;font-weight:400;line-height:1;transition:transform .3s ease}
  .site-header.menu-open .menu-toggle span{transform:rotate(45deg)}
  .site-nav{position:fixed;inset:78px 0 auto;display:grid;gap:0;padding:12px 23px 28px;background:var(--paper);box-shadow:0 12px 22px rgb(36 43 43 / .1);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-12px);transition:opacity .3s ease,transform .3s ease,visibility .3s ease}
  .site-header.menu-open .site-nav{opacity:1;visibility:visible;pointer-events:auto;transform:none}
  .site-nav a{padding:15px 0;border-bottom:1px solid var(--line);font:italic 30px var(--font-serif);color:var(--ink)}
  .site-nav a:last-child{color:var(--blue)}
  .story-panel.hero{padding-top:115px}
  .sketch-panel{min-height:720px;padding:130px 25px 90px}
  .sketch-panel>.section-index{top:72px;left:25px}
  .sketch-center{margin-top:70px}
  .sketch-center h2{font-size:clamp(58px,11vw,88px)}
  .sketch-object--laptop{left:3%;top:13%;width:125px}
  .sketch-object--spark{right:5%;top:12%;width:85px}
  .sketch-object--note{right:4%;bottom:7%;padding:16px 19px 8px;font-size:24px}
  .sketch-object--note svg{width:60px}
  .story-panel.statement{min-height:680px;padding-top:115px}
  .ideas-panel{min-height:710px;padding:110px 24px 80px}
  .ideas-panel h2{font-size:clamp(58px,10vw,88px)}
  .ideas-list{margin-top:45px}
  .ideas-list p{font-size:clamp(19px,4vw,28px)}
  .ideas-orbit{width:170px;bottom:3%;left:4%}
  .handoff-panel{min-height:650px}
  .handoff-content h2{font-size:clamp(65px,11vw,100px)}
  .handoff-doodle{width:125px;right:2%;bottom:4%}
}
@media (max-width:440px){
  .site-header{height:72px;flex-direction:row;align-items:center;padding:0 22px}
  .site-nav{inset:72px 0 auto}
  .story-panel.hero{padding-top:113px}
  .sketch-panel{min-height:660px}
  .sketch-center h2{font-size:56px}
  .sketch-object--laptop{width:95px;top:9%}
  .sketch-object--spark{width:72px;top:9%}
  .ideas-panel{min-height:660px}
  .ideas-panel h2{font-size:55px}
  .ideas-list p{gap:15px}
  .ideas-list p span{min-width:55px}
  .handoff-panel{min-height:610px}
  .handoff-content h2{font-size:59px}
}
@media (max-height:650px) and (min-width:800px){
  .motion-ready .hero h1{font-size:clamp(56px,7vw,104px)}
  .motion-ready .hero-kicker{margin-bottom:20px}
  .motion-ready .hero-intro{font-size:15px;margin-bottom:15px}
  .motion-ready .statement h2{font-size:clamp(52px,5.5vw,82px)}
  .motion-ready .sketch-center h2{font-size:clamp(60px,7vw,104px)}
  .motion-ready .ideas-panel h2{font-size:clamp(58px,6vw,90px);margin:24px 0}
  .motion-ready .handoff-content h2{font-size:clamp(67px,8vw,110px)}
}
@media (prefers-reduced-motion:reduce){
  .entry-curtain{display:none!important}
  .story-reveal,.scroll-reveal,.project-card,.project-art{opacity:1!important;filter:none!important;transform:none!important;clip-path:none!important}
  .story-thread__path{stroke-dashoffset:0!important}
  .story-thread__dot{opacity:0!important}
  .sketch-object svg,.ideas-orbit svg{animation:none!important}
}