#about-page{--intro-text-size:clamp(22px,2vw,30px);max-width:1520px;box-sizing:border-box;margin:auto;padding:0 clamp(24px,7.2vw,110px);}
.view-about #work-page main{padding-top:0;padding-bottom:0;}
.about-intro-stage{height:150svh;position:relative;}
.about-hello{max-width:1240px;margin-inline:auto;height:100svh;position:sticky;top:0;display:flex;align-items:center;justify-content:center;padding:80px 0;text-align:center;box-sizing:border-box;}
.about-hello h1{transform:translate3d(0,var(--intro-drift,0px),0);opacity:var(--intro-opacity,1);text-wrap:balance;will-change:transform,opacity;}
.about-hello h1{font:400 var(--intro-text-size)/1.5 var(--body-font);letter-spacing:0;margin:32px 0 40px;color:#53656b;}
.about-hello h1 em,.about-perspective h2 em{font-family:var(--accent-font);font-weight:100;}
.about-hello h1 em{display:inline;font-size:1.15em;line-height:inherit;letter-spacing:.005em;margin-right:.10em;}
.about-tagline{display:inline;font:inherit;letter-spacing:inherit;}
.about-lead{font-size:clamp(22px,2.5vw,32px);line-height:1.5;max-width:750px;color:#53656b;font-weight:200;}
.about-note{font-size:18px;line-height:1.8;max-width:580px;color:#6a797e;font-weight:400;margin-top:24px;}
.about-perspective{display:flex;align-items:center;justify-content:center;min-height:75svh;padding:8vh 0;text-align:center;box-sizing:border-box;}
.about-perspective div>p{margin-inline:auto;}
.about-experience{max-width:960px;margin:0 auto;padding:6vh 0 24vh;}
.about-perspective h2{font:200 clamp(32px,4vw,52px)/1.2 var(--body-font);margin:0 0 35px;}
.about-perspective div>p,.experience-card p{font-size:17px;font-weight:400;line-height:1.8;color:#65757b;max-width:620px;}
.about-experience>.work-kicker{margin-bottom:70px;}
.experience-cards{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;gap:0 7%;padding-inline:12px;}
.experience-slot{perspective:1000px;min-width:0;}
.experience-slot:nth-child(2){padding-top:160px;}
.experience-slot:nth-child(3){margin:20px 0 0 17%;}
.experience-card{--paper:#f4f0e7;--rest-angle:-4deg;position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;min-height:290px;padding:clamp(26px,4vw,46px);box-sizing:border-box;border:1px solid #b5aa8e55;border-radius:2px 3px 2px 1px;background:radial-gradient(ellipse at 22% 15%,#fffdf04d,transparent 65%),linear-gradient(115deg,#c3af8914,transparent 40%,#a59c8314),var(--paper);box-shadow:inset 0 0 0 1px #fffbee70,inset 0 0 22px #93836812,0 18px 30px -12px #527f7633;transform:translate3d(var(--paper-x,0px),var(--paper-y,0px),0) rotateX(var(--paper-tilt,0deg)) rotate(var(--paper-angle,var(--rest-angle))) scale(var(--paper-scale,1));filter:var(--paper-refraction,blur(0px)) blur(var(--paper-blur,0px));opacity:var(--paper-visibility,1);transform-origin:48% 65%;}
.experience-slot:nth-child(2) .experience-card{--paper:#e9eeea;--rest-angle:5deg;min-height:310px;}
.experience-slot:nth-child(3) .experience-card{--paper:#eeeaf0;--rest-angle:-2.5deg;min-height:265px;}
.experience-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.8;mix-blend-mode:multiply;background-image:url("assets/postcard-paper.svg");background-size:320px 320px;z-index:-1;}
.experience-card::after{content:"";position:absolute;inset:12px;pointer-events:none;border:1px solid #8e826b26;border-radius:1px;z-index:-1;}
.paper-number{position:absolute;top:28px;left:clamp(26px,4vw,46px);font-size:11px;letter-spacing:.18em;color:#8c918b;}
.experience-card h3{color:#435d58;font:100 italic clamp(28px,3.2vw,40px)/1.15 var(--accent-font);margin:50px 0 18px;}
.experience-card p{margin:0;}
.about-footer{padding:14vh 0 3vh;display:flex;align-items:baseline;justify-content:space-between;gap:25px;}
.about-footer>p{font:100 italic clamp(24px,3vw,36px)/1.3 var(--accent-font);color:#73858b;}
#work-page>header a[aria-current="page"]{text-decoration:none;}
@media(max-width:700px){
 .about-hello{padding:80px 0;}
 .experience-cards{grid-template-columns:1fr;gap:42px;max-width:420px;margin:auto;padding-inline:8px;}
 .experience-slot:nth-child(2){padding-top:0;margin-left:7%;}
 .experience-slot:nth-child(3){margin:0 6% 0 0;}
 .experience-card,.experience-slot:nth-child(2) .experience-card,.experience-slot:nth-child(3) .experience-card{min-height:260px;}
 .about-perspective{padding:7vh 0;}
 .about-footer{display:block;padding-top:8vh;}
}
@media(prefers-reduced-motion:reduce){
 .about-intro-stage{height:100svh;}
 .about-hello{position:relative;}
 .about-hello h1{transform:none;opacity:1;will-change:auto;}
 .experience-card{transform:rotate(var(--rest-angle));opacity:1;}
}

/* A thin moving layer of water remains above the paper, including its printed ink. */
.paper-water-sheen{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;z-index:1;background:linear-gradient(125deg,#ffffff55,transparent 55%,#dce9e533);opacity:var(--water-veil,.10);}
.paper-water-sheen::before{content:"";position:absolute;inset:-50%;transform:translateX(var(--water-shift,0%)) rotate(-18deg);background:radial-gradient(ellipse at 32% 18%,#ffffff66,transparent 62%);filter:blur(18px);}
.paper-touch{position:absolute;inset:0;z-index:2;width:100%;height:100%;border:0;border-radius:inherit;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.paper-touch:focus-visible{outline:2px solid #597d78;outline-offset:5px;background:#e2f2ea14;}

@media(prefers-reduced-motion:reduce){.experience-card{filter:none;opacity:1;}.paper-water-sheen{opacity:.10;}.paper-water-sheen::before{transform:rotate(-18deg);}}

/* The open pond resolves into a quiet editorial frame as the perspective arrives. */
.about-perspective{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,5vw,78px);align-items:start;min-height:65svh;margin:4vh 0 14vh;padding:clamp(42px,6vw,84px) clamp(24px,3vw,44px);text-align:left;}
.perspective-frame{position:absolute;inset:0;z-index:-1;pointer-events:none;background:#ffffff;clip-path:inset(7% 4%);opacity:0;transition:clip-path 1.2s cubic-bezier(.2,.7,.2,1),opacity .9s;}
.perspective-frame::before,.perspective-frame::after{content:"";position:absolute;inset:0;border:1px solid #78898538;transform:scaleX(0);transition:transform 1.15s cubic-bezier(.2,.7,.2,1);transform-origin:left;}
.perspective-frame::after{inset:0 auto 0 29%;border:0;border-left:1px solid #78898526;transform:scaleY(0);transform-origin:top;transition-delay:.15s;}
.perspective-frame i{position:absolute;width:11px;height:11px;opacity:.65;}
.perspective-frame i::before,.perspective-frame i::after{content:"";position:absolute;background:#74827d;}
.perspective-frame i::before{left:5px;top:0;width:1px;height:11px;}
.perspective-frame i::after{left:0;top:5px;width:11px;height:1px;}
.perspective-frame i:nth-child(1){left:0;top:0;}.perspective-frame i:nth-child(2){right:0;top:0;}.perspective-frame i:nth-child(3){left:0;bottom:0;}.perspective-frame i:nth-child(4){right:0;bottom:0;}
.about-perspective .perspective-label,.about-perspective .perspective-footnote{font:400 10px/1.6 var(--body-font);letter-spacing:.14em;text-transform:uppercase;color:#78847d;margin:0;}
.about-perspective h2{font:400 clamp(20px,2.1vw,29px)/1.35 var(--body-font);letter-spacing:-.025em;margin:48px 0 40px;color:#3c4945;}
.perspective-signature{font:100 italic clamp(22px,2.5vw,34px)/1.2 var(--accent-font);color:#6f8077;}
.about-perspective .perspective-statement{font:400 clamp(31px,3.6vw,51px)/1.15 var(--body-font);letter-spacing:-.035em;color:#283833;margin:0;max-width:none;}
.perspective-statement em{font-family:var(--accent-font);font-weight:100;}
.about-perspective .perspective-history{font:400 clamp(26px,3vw,42px)/1.25 var(--body-font);letter-spacing:-.03em;color:#89938b;margin:clamp(32px,5vw,64px) 0;max-width:none;}
.perspective-history span{color:inherit;}
.about-perspective .perspective-footnote{border-top:1px solid #78898526;padding-top:20px;}
.frame-ready .perspective-aside,.frame-ready .perspective-copy{opacity:0;transform:translateY(22px);transition:opacity .9s ease .15s,transform 1s cubic-bezier(.2,.7,.2,1) .15s;}
.frame-ready .perspective-copy{transition-delay:.27s;}
.frame-in .perspective-frame{opacity:1;clip-path:inset(0);}
.frame-in .perspective-frame::before,.frame-in .perspective-frame::after{transform:scale(1);}
.frame-in .perspective-aside,.frame-in .perspective-copy{opacity:1;transform:none;}
@media(max-width:700px){
 .about-perspective{grid-template-columns:1fr;gap:34px;padding:36px 24px;margin:0 0 10vh;min-height:auto;}
 .perspective-frame::after{display:none;}
 .about-perspective h2{margin:18px 0 0;font-size:25px;}
 .perspective-signature{display:none;}
 .perspective-aside{border-bottom:1px solid #78898526;padding-bottom:28px;}
 .about-perspective .perspective-statement{font-size:clamp(30px,6.5vw,40px);}
 .about-perspective .perspective-history{font-size:clamp(25px,5.7vw,34px);margin:30px 0;}
}
@media(prefers-reduced-motion:reduce){
 .perspective-frame,.perspective-frame::before,.perspective-frame::after,.frame-ready .perspective-aside,.frame-ready .perspective-copy{transition:none;transform:none;opacity:1;clip-path:none;}
}

/* A white panel opens from the center of the full-size pond. */
.about-scroll-stage{height:250svh;position:relative;}
.about-scroll-viewport{position:sticky;top:0;height:100svh;}
.about-scroll-viewport .about-intro-stage{position:absolute;inset:0;height:100%;}
.about-scroll-viewport .about-hello{position:absolute;inset:0;height:100%;}
.about-scroll-viewport .about-perspective{position:absolute;inset:0;min-height:0;margin:0;padding:clamp(100px,16svh,180px) clamp(24px,3vw,46px);gap:clamp(30px,5vw,76px);grid-template-columns:minmax(0,1fr);align-content:center;opacity:var(--editorial-opacity,0);transform:translateY(var(--editorial-rise,22px));pointer-events:none;}
.about-scroll-viewport .perspective-frame{display:block;inset:clamp(76px,12svh,130px) 0;background:transparent;opacity:var(--panel-opacity,0);clip-path:none;transition:none;filter:url(#panel-feather);}
.about-scroll-viewport .perspective-frame::before{display:block;inset:var(--panel-inset,18%);background:radial-gradient(ellipse at 50% 50%,#ffffff 0%,#fffffff5 42%,#ffffffb8 66%,#ffffff45 82%,#ffffff00 100%);border:0;border-radius:42%;transform:none;transition:none;}
.about-scroll-viewport .perspective-frame::after,.about-scroll-viewport .perspective-frame i{display:none;}
 .pond-frame-slot{display:none;}
.about-scroll-viewport .perspective-aside{padding-right:clamp(20px,2.6vw,40px);border-right:1px solid #78898538;}
.pond-frame-slot{width:100%;aspect-ratio:1.034;margin-bottom:clamp(28px,4vw,60px);outline:1px solid #75867c44;outline-offset:clamp(8px,1vw,16px);box-shadow:inset 0 0 0 1px #75867c26;}
.about-scroll-viewport .perspective-label{font-size:clamp(10px,1.3vw,20px);}
.about-scroll-viewport .perspective-aside h2{font-size:clamp(20px,2.5vw,38px);line-height:1.4;margin:clamp(26px,3.4vw,52px) 0 clamp(24px,3vw,46px);}
.about-scroll-viewport .perspective-signature{display:none;}
.about-scroll-viewport .perspective-copy{align-self:center;text-align:center;font-kerning:normal;}
.about-scroll-viewport .perspective-statement{font-size:clamp(28px,3.2vw,48px);line-height:1.35;letter-spacing:-.022em;text-wrap:balance;}
.about-scroll-viewport .perspective-statement em{letter-spacing:-.015em;}
.about-scroll-viewport .perspective-history{font-size:clamp(20px,2vw,28px);line-height:1.55;letter-spacing:-.01em;max-width:48ch;margin:clamp(32px,3.4vw,48px) auto 0;text-wrap:balance;color:#75817b;}
body.view-about{background:#ffffff;}
body.view-about #water{transform:none;}
@media(max-width:700px){
 .about-scroll-stage{height:260svh;}
 .perspective-break{display:none;}
 .about-scroll-viewport .about-perspective{grid-template-columns:1fr;padding:90px 22px;gap:20px;align-content:center;}
 .about-scroll-viewport .perspective-aside{display:block;border-right:0;border-bottom:1px solid #78898526;padding:0 0 16px;align-items:center;}
 .pond-frame-slot{grid-row:1/3;margin:0;}
 .about-scroll-viewport .perspective-frame{inset:70px 0;}
 .about-scroll-viewport .perspective-label{font-size:9px;align-self:end;}
 .about-scroll-viewport .perspective-aside h2{font-size:20px;margin:8px 0 0;align-self:start;}
 .about-scroll-viewport .perspective-statement{font-size:clamp(25px,6vw,32px);}
 .about-scroll-viewport .perspective-history{font-size:clamp(18px,4.5vw,22px);margin:28px auto 0;}
 .about-scroll-viewport .perspective-footnote{font-size:9px;}
}
@media(prefers-reduced-motion:reduce){
 .about-scroll-stage{height:auto;}
 .about-scroll-viewport{position:relative;height:auto;}
 .about-scroll-viewport .about-intro-stage{position:relative;height:100svh;}
 .about-scroll-viewport .about-perspective{position:relative;opacity:1;transform:none;padding:60px 0;}
 .about-scroll-viewport .perspective-frame{--panel-inset:0%;inset:0;opacity:1;clip-path:none;}
 .pond-frame-slot{display:none;}
 .about-scroll-viewport .perspective-aside{display:block;}
}

/* One motion vocabulary: settle, reframe, then read. No looping UI animation. */
.pond-scroll-cue{position:absolute;bottom:32px;left:0;right:0;text-align:center;font:400 10px/1.5 var(--body-font);letter-spacing:.12em;color:#75847c;opacity:var(--scroll-cue-opacity,1);pointer-events:none;}
.pond-scroll-cue span{display:inline-block;margin-left:9px;}
.about-scroll-viewport .pond-frame-slot{outline-color:rgba(117,134,124,calc(var(--frame-opacity,0)*.25));opacity:var(--frame-opacity,0);}
.about-scroll-viewport .perspective-label,.about-scroll-viewport .perspective-aside h2{opacity:var(--aside-opacity,0);}
.about-scroll-viewport .perspective-aside{border-color:rgba(120,137,133,calc(var(--frame-opacity,0)*.22));}
.about-scroll-viewport .perspective-statement{opacity:var(--statement-opacity,0);transform:translateY(var(--copy-rise,16px));}
.about-scroll-viewport .perspective-history,.about-scroll-viewport .perspective-footnote{opacity:var(--history-opacity,0);transform:translateY(var(--copy-rise,16px));}
#work-page nav a{position:relative;transition:color .25s ease;}
#work-page nav a::after{content:"";position:absolute;left:0;right:.2em;bottom:-5px;height:1px;background:currentColor;opacity:.55;transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.2,.7,.2,1);}
#work-page nav a:hover::after,#work-page nav a:focus-visible::after{transform:scaleX(1);}
@media(prefers-reduced-motion:reduce){
 .pond-scroll-cue{display:none;}
 .about-scroll-viewport .perspective-label,.about-scroll-viewport .perspective-aside h2,.about-scroll-viewport .perspective-statement,.about-scroll-viewport .perspective-history,.about-scroll-viewport .perspective-footnote{opacity:1;transform:none;}
 #work-page nav a,#work-page nav a::after{transition:none;}
}

/* The surface is continuous, so reflected light also crosses the card outlines. */
/* Match the hero's white base and broad, blended color washes. */
.experience-cards::before{display:none;}
.experience-water{position:absolute;inset:-95px -14%;width:128%;height:calc(100% + 190px);z-index:-1;pointer-events:none;mask-image:radial-gradient(ellipse,black 35%,#000b 55%,transparent 74%);-webkit-mask-image:radial-gradient(ellipse,black 35%,#000b 55%,transparent 74%);}

/* One light weight for the home page's sans-serif typography. */
body.view-about #work-page nav a,
#about-page,
#about-page .about-lead,
#about-page .work-kicker,
#about-page .paper-number{font-weight:400;}

/* A small falling droplet quietly invites the next scroll. */
.pond-scroll-cue{bottom:28px;font-size:10px;letter-spacing:.04em;color:#7d8d89;display:flex;flex-direction:column;align-items:center;gap:7px;}
.pond-scroll-cue .pond-cue-drop{position:relative;display:block;width:48px;height:44px;margin:0;}
.pond-cue-drop::before,.pond-cue-drop::after{content:"";position:absolute;left:7px;top:5px;width:34px;height:34px;border:0;border-radius:50%;background:radial-gradient(ellipse,transparent 40%,#729b8799 51%,#ffffffed 61%,#a7c9b65c 69%,transparent 79%);opacity:0;animation:pond-cue-ripple 3.6s linear infinite;}
.pond-cue-drop::after{animation-delay:-1.8s;}
@keyframes pond-cue-ripple{0%{opacity:0;transform:scale(.25);}18%{opacity:.95;}65%{opacity:.6;}100%{opacity:0;transform:scale(1.35);}}
@media(prefers-reduced-motion:reduce){.pond-scroll-cue{display:none;}.pond-cue-drop::before,.pond-cue-drop::after{animation:none;}}


.about-scroll-viewport .perspective-unified{max-width:36ch;margin-inline:auto;font-size:var(--intro-text-size);line-height:1.5;letter-spacing:0;text-wrap:balance;}

.about-scroll-viewport .pond-journey-cue{opacity:var(--journey-cue-opacity,0);bottom:28px;}
.pond-journey-cue .pond-cue-drop::before{animation-delay:0s;}
.pond-journey-cue .pond-cue-drop::after{animation-delay:-1.8s;}

.about-scroll-viewport .perspective-unified em{font-size:1.15em;letter-spacing:.005em;}

body.view-about #work-page nav a{letter-spacing:.08em;}
#about-page .work-kicker,#about-page .paper-number{letter-spacing:.12em;}

/* Three compact floating postcards share one row. */
.about-experience{max-width:1000px;padding-top:8vh;}
.experience-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,42px);max-width:none;padding-inline:8px;}
.experience-slot:nth-child(2),.experience-slot:nth-child(3){padding-top:0;margin:0;}
.experience-card,.experience-slot:nth-child(2) .experience-card,.experience-slot:nth-child(3) .experience-card{min-height:205px;padding:24px;}
.paper-number{top:22px;left:24px;}
.experience-card h3{font-size:clamp(23px,2.3vw,30px);margin:46px 0 12px;}
.experience-card p{font-size:14px;line-height:1.5;}
@media(max-width:600px){
 .experience-cards{grid-template-columns:repeat(3,220px);gap:26px;overflow-x:auto;margin-inline:-20px;padding:26px 24px 48px;scroll-snap-type:x proximity;}
 .experience-slot{scroll-snap-align:center;}
}

/* Three scroll-driven slides remain on one continuous pond. */
.about-scroll-stage{height:420svh;}
.about-scroll-viewport .about-experience{position:absolute;inset:0;display:flex;align-items:center;width:100%;max-width:none;padding:80px 0;box-sizing:border-box;opacity:var(--journey-opacity,0);transform:translate3d(var(--journey-drift,0px),var(--journey-rise,calc(100svh + 80px)),0) scale(var(--journey-scale,1));pointer-events:none;}
.about-scroll-viewport .about-experience:not([inert]){pointer-events:auto;}
.about-scroll-viewport .experience-cards{width:100%;box-sizing:border-box;}
.about-scroll-viewport .experience-water{display:none;}
@media(prefers-reduced-motion:reduce){
 .about-scroll-stage{height:auto;}
 .about-scroll-viewport .about-experience{position:relative;min-height:70svh;opacity:1;transform:none;pointer-events:auto;}
}

/* The ripple's center sits on the slide edge, suggesting more below. */
/* Keep the scroll transition clipped vertically while tilted paper and shadows
   can extend into the page’s horizontal gutters. */
.about-scroll-viewport{overflow-x:visible;overflow-y:clip;}
.pond-scroll-cue,.about-scroll-viewport .pond-journey-cue{bottom:-22px;}

/* Life beyond work is the fourth slide, with lighter object studies. */
.about-scroll-stage{height:540svh;}
.about-scroll-viewport .pond-life-cue{opacity:var(--journey-opacity,0);}
.about-life{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:80px 20px;box-sizing:border-box;text-align:center;opacity:var(--life-opacity,0);transform:translateY(var(--life-rise,80px));pointer-events:none;color:#53656b;}
.life-label{font:400 10px/1.5 var(--body-font);letter-spacing:.1em;margin:0 0 16px;color:#788982;}
.life-heading h2{font:400 var(--intro-text-size)/1.4 var(--body-font);margin:0;}
.life-heading h2 em{font:100 italic 1.15em var(--accent-font);}
/* Small keepsakes arranged like an open scrapbook. */
.about-life{padding:80px 0 24px;justify-content:center;}
.life-label{margin-bottom:8px;}
.life-heading h2{font-size:clamp(22px,2vw,28px);}
.life-collage{position:relative;width:min(680px,100%);height:min(66svh,620px);margin-top:24px;}
.life-tile{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;background:var(--tile-bg,#e8eeeb);color:#7c8983;transform:translateY(calc(var(--life-detail-rise,0px) * var(--depth,1)));box-shadow:0 5px 18px #516e6010;}
.life-tile figcaption{font:400 9px/1.5 var(--body-font);letter-spacing:.06em;}
.life-tile-photo{background:linear-gradient(145deg,#ffffff70,transparent 65%),var(--tile-bg,#e8eeeb);}
.life-tile-photo::before{content:"";width:15px;height:12px;border:1px solid currentColor;opacity:.3;margin-bottom:8px;}
.life-tile svg{width:80%;height:66%;color:#7c988d;}
.life-tile-biking figcaption,.life-tile-pottery figcaption{font-size:11px;letter-spacing:0;}
.life-tile-note{background:#f4f3eb;}
.life-tile-note figcaption{font:100 italic clamp(14px,1.7vw,21px)/1.25 var(--accent-font);letter-spacing:0;}
.life-tile-1{--x:30%;--y:0%;--w:16%;--h:19%;--tile-bg:#f0f1e9;--depth:.6;}
.life-tile-2{--x:67%;--y:7%;--w:13%;--h:20%;--tile-bg:#e8e9e4;--depth:1.3;}
.life-tile-3{--x:34%;--y:18%;--w:20%;--h:24%;--tile-bg:#cdded5;--depth:.9;}
.life-tile-4{--x:6%;--y:29%;--w:18%;--h:24%;--tile-bg:#eae0d7;--depth:1.4;}
.life-tile-5{--x:71%;--y:33%;--w:18%;--h:24%;--tile-bg:#e6e9ef;--depth:.7;}
.life-tile-6{--x:49%;--y:46%;--w:14%;--h:17%;--depth:1.4;}
.life-tile-7{--x:2%;--y:61%;--w:16%;--h:19%;--tile-bg:#dce5e3;--depth:.7;}
.life-tile-8{--x:21%;--y:55%;--w:12%;--h:16%;--tile-bg:#e9e1e1;--depth:1.2;}
.life-tile-9{--x:79%;--y:60%;--w:14%;--h:18%;--tile-bg:#e1e5d8;--depth:1.1;}
.life-tile-10{--x:30%;--y:79%;--w:15%;--h:20%;--depth:.8;}
.life-tile-11{--x:48%;--y:69%;--w:19%;--h:24%;--tile-bg:#d8e1e7;--depth:1.3;}
.life-tile-12{--x:67%;--y:86%;--w:12%;--h:14%;--tile-bg:#e6ddd2;--depth:.5;}
@media(max-width:600px){.life-collage{width:100%;height:min(62svh,520px);margin-top:28px;}.life-tile figcaption{font-size:8px;}.life-tile-biking figcaption,.life-tile-pottery figcaption{font-size:10px;}.life-tile-note figcaption{font-size:14px;}.life-tile-6{--w:20%;}.life-tile-10{--x:25%;--w:20%;}.life-tile-photo figcaption{white-space:nowrap;font-size:7px;}}
@media(max-height:550px){.about-life{padding-top:60px;}.life-collage{height:64svh;margin-top:12px;}.life-label{display:none;}}
@media(prefers-reduced-motion:reduce){.about-scroll-stage{height:auto;}.about-life{position:relative;min-height:100svh;opacity:1;transform:none;}.life-tile{transform:none;}}

/* Folded paper boats on the journey's open water. */
.about-scroll-viewport .experience-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,3vw,56px);max-width:1180px;margin:auto;padding:30px 4vw;overflow:visible;}
.experience-card.paper-boat,.experience-slot:nth-child(2) .paper-boat,.experience-slot:nth-child(3) .paper-boat{min-height:0;padding:0;width:100%;aspect-ratio:400/280;display:block;background:none;border:0;border-radius:0;box-shadow:none;filter:none;transform:none;animation:boat-float 13s ease-in-out infinite;}
.paper-boat .boat-folds{display:block;width:100%;height:100%;filter:drop-shadow(0 4px 7px #527f7624);}
.experience-card.paper-boat::before,.experience-card.paper-boat::after{inset:41% auto auto -9%;width:22%;height:18%;border:0;border-top:1px solid #91b8aa45;border-radius:50%;opacity:.65;mix-blend-mode:normal;background:none;transform:rotate(-20deg);z-index:-1;}
.experience-card.paper-boat::after{top:47%;left:-14%;width:27%;transform:rotate(20deg);border-top:0;border-bottom:1px solid #91b8aa30;}
.paper-boat .paper-number{top:15%;left:0;right:0;text-align:center;font-size:9px;color:#999887;}
.experience-card.paper-boat h3{position:absolute;top:49%;left:0;right:0;margin:0;text-align:center;font-size:clamp(20px,2.1vw,28px);line-height:1.1;color:#52665f;}
.experience-card.paper-boat p{position:absolute;top:88%;left:8%;right:8%;margin:0;text-align:center;font-size:clamp(10px,1vw,13px);line-height:1.3;color:#748078;}
.experience-slot:nth-child(1) .paper-boat{--boat-angle:-17deg;}
.experience-slot:nth-child(2) .paper-boat{--boat-angle:13deg;animation-duration:16.7s;animation-delay:-3s;top:38px;}
.experience-slot:nth-child(3) .paper-boat{--boat-angle:-9deg;animation-duration:14.9s;animation-delay:-5s;top:-18px;}
@keyframes boat-float{
  0%,100%{transform:translate3d(-3px,1px,0) rotate(calc(var(--boat-angle) + var(--current-turn,0deg) - .7deg));}
  23%{transform:translate3d(4px,-4px,0) rotate(calc(var(--boat-angle) + var(--current-turn,0deg) + .4deg));}
  54%{transform:translate3d(7px,2px,0) rotate(calc(var(--boat-angle) + var(--current-turn,0deg) + 1.3deg));}
  78%{transform:translate3d(0px,5px,0) rotate(calc(var(--boat-angle) + var(--current-turn,0deg) - .2deg));}
}
.experience-slot:nth-child(2){transform:translateX(var(--boat-arrival-lag,0px));}
.experience-slot:nth-child(3){transform:translateX(calc(var(--boat-arrival-lag,0px) * 1.65));}

@media(max-width:600px){
 .about-scroll-viewport .experience-cards{grid-template-columns:1fr;gap:0;width:min(100%,400px);padding:0 20px;}
 .experience-cards .experience-slot{width:68%;margin:0;padding:0;}
 .experience-cards .experience-slot:nth-child(2){justify-self:end;margin-top:-14px;}
 .experience-cards .experience-slot:nth-child(3){margin-top:-14px;margin-left:5%;}
 .experience-slot:nth-child(2) .paper-boat,.experience-slot:nth-child(3) .paper-boat{top:0;}
 .experience-card.paper-boat h3{font-size:23px;}
 .experience-card.paper-boat p{font-size:10px;}
}
@media(prefers-reduced-motion:reduce){
 .experience-card.paper-boat{animation:none;transform:rotate(var(--boat-angle));}
}
.paper-boat .paper-water-sheen{clip-path:polygon(0% 50%,47% 26%,100% 50%,47% 74%);}
.experience-card.paper-boat{filter:var(--paper-refraction,blur(0px));}
@media(prefers-reduced-motion:reduce){.experience-card.paper-boat{filter:none;}}

/* Keep accessible lettering over the 3D folded hull; SVG remains the no-WebGL fallback. */
.boats-3d .paper-boat .boat-folds{visibility:hidden;}
.boats-3d .paper-boat .paper-water-sheen{display:none;}

.boat-string{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:-1;}
.boat-string path{fill:none;stroke:#9daaa3;stroke-width:1.2;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.65;}
.boat-string .string-light{stroke:#ffffff;stroke-width:.5;opacity:.8;}

@media(prefers-reduced-motion:reduce){.experience-slot:nth-child(2),.experience-slot:nth-child(3){transform:none;}}

/* The white center follows just behind the timed water front. */
@media (prefers-reduced-motion:no-preference){
 .about-scroll-viewport .perspective-frame{
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 max(0px,calc(var(--panel-radius,0px) - 36px)),transparent var(--panel-radius,0px));
  mask-image:radial-gradient(circle at 50% 50%,#000 max(0px,calc(var(--panel-radius,0px) - 36px)),transparent var(--panel-radius,0px));
 }
}

/* An open left-hand current balances a compact column of recent work. */
.about-scroll-viewport .about-experience{padding:0;}
.journey-editorial{position:relative;width:100%;height:100%;margin:0;}
.about-scroll-viewport .journey-editorial .experience-cards{position:absolute;inset:0;display:block;width:100%;max-width:none;height:100%;padding:0;margin:0;}
.about-scroll-viewport .experience-cards .experience-slot{position:absolute;width:min(22vw,29svh,310px);padding:0;margin:0;transform:translate(-50%,-50%);}
.about-scroll-viewport .experience-cards .experience-slot:nth-child(1){left:17%;top:29%;}
.about-scroll-viewport .experience-cards .experience-slot:nth-child(2){left:31%;top:52%;}
.about-scroll-viewport .experience-cards .experience-slot:nth-child(3){left:45%;top:75%;}
.about-scroll-viewport .experience-slot .paper-boat{top:0;transform-origin:50% 50%;}
.experience-slot:nth-child(1) .paper-boat{--boat-angle:38deg;}
.experience-slot:nth-child(2) .paper-boat{--boat-angle:63deg;}
.experience-slot:nth-child(3) .paper-boat{--boat-angle:24deg;}
.journey-heading{position:absolute;left:57%;top:21%;margin:0;color:#354a42;font:100 italic clamp(28px,2.5vw,38px)/1.2 var(--accent-font);letter-spacing:0;}
.journey-notes{position:absolute;left:57%;top:calc(21% + 76px);width:min(330px,36%);display:flex;flex-direction:column;gap:26px;}
.journey-note{color:#354a42;font-family:var(--body-font);font-weight:400;}
.journey-note h3{font:400 10px/1.4 var(--body-font);text-transform:uppercase;letter-spacing:.12em;margin:0 0 5px;color:#62756c;}
.journey-note p{font:400 16px/1.4 var(--body-font);margin:0;}
.journey-note p span{display:block;margin-top:3px;font-size:12px;line-height:1.4;color:#839087;white-space:nowrap;}
.boat-string path{stroke-width:.8;opacity:.42;}
.boat-string .string-light{opacity:.45;}
@media(max-height:720px) and (min-width:601px){
 .journey-heading{top:17%;}
 .journey-notes{top:calc(17% + 56px);gap:18px;}
 .journey-note p{font-size:14px;}
}
@media(max-width:600px){
 .journey-heading{left:46%;top:18%;font-size:29px;}
 .journey-notes{left:46%;top:calc(18% + 58px);width:49%;gap:24px;}
 .journey-note h3{font-size:9px;letter-spacing:.08em;}
 .journey-note p{font-size:13px;}
 .journey-note p span{font-size:11px;}
 .about-scroll-viewport .experience-cards .experience-slot{width:34vw;}
 .about-scroll-viewport .experience-cards .experience-slot:nth-child(1){left:16%;top:32%;}
 .about-scroll-viewport .experience-cards .experience-slot:nth-child(2){left:27%;top:56%;}
 .about-scroll-viewport .experience-cards .experience-slot:nth-child(3){left:38%;top:80%;}
}
@media(prefers-reduced-motion:reduce){
 .about-scroll-stage{--boat-arrival-lag:0px !important;}
 .about-scroll-viewport .about-experience{height:max(700px,100svh);}
}

.about-scroll-viewport .perspective-unified{max-width:52ch;font-weight:400;}
@media(max-width:700px){.perspective-break{display:none;}}

/* Spacious opening wordmark, using the existing serif and regular sans. */
.about-scroll-viewport .about-hello{padding:80px 0 calc(80px + 8svh);}
.about-hello h1{display:flex;flex-direction:column;align-items:center;gap:clamp(24px,4.7svh,44px);margin:0;}
.about-hello h1 em{display:block;margin:0;font-size:clamp(64px,11.8vw,168px);line-height:1.08;letter-spacing:-.025em;white-space:nowrap;color:#53656b;}
.about-hello .about-tagline{display:block;font:400 clamp(19px,2.7vw,32px)/1.4 var(--body-font);letter-spacing:0;color:#a1b7bf;}
@media(max-width:600px){.about-hello h1 em{font-size:clamp(52px,13vw,78px);}.about-hello h1{gap:24px;}}

/* Complete the pond journey before the contact footer enters normal flow. */
.about-scroll-stage{height:550svh;}
@media(prefers-reduced-motion:reduce){.about-scroll-stage{height:auto;}}

/* Figma 489:377: the small centered wordmark sits in an open, living pond. */
.about-scroll-viewport .about-hello{padding:16px 0 0;}
.about-hello h1{display:block;margin:0;line-height:1;}
.home-wordmark{display:block;width:223.739px;height:48.576px;max-width:70vw;object-fit:contain;}
.about-intro-stage>.pond-scroll-cue{font-size:12px;line-height:15px;letter-spacing:.4px;bottom:-22px;}

/* Current offsets live on the anchors; the hulls and string share their motion. */
.about-scroll-viewport .experience-cards .experience-slot{transform:translate(calc(-50% + var(--current-x,0px)),calc(-50% + var(--current-y,0px)));}
.journey-heading,.journey-notes{opacity:var(--journey-copy-opacity,0);transform:translateY(var(--journey-copy-rise,18px));}
@media(prefers-reduced-motion:reduce){
 .about-scroll-viewport .experience-cards .experience-slot{transform:translate(-50%,-50%);}
 .journey-heading,.journey-notes{opacity:1;transform:none;}
}

/* Figma 496:421: centered contact sign-off, after the pond journey. */
/* Pull the sign-off into the unused bottom edge of the journey viewport. */
.home-contact{position:relative;margin:calc(-1 * clamp(48px,10svh,120px)) auto 0;max-width:1220px;color:#354a42;}
.contact-main{padding:0 0 48px;display:flex;flex-direction:column;align-items:center;gap:32px;text-align:center;}
.contact-note{margin:0;font:400 14px/1.8 var(--body-font);color:#62756c;}
.home-contact h2{margin:0;font:100 italic 48px/1 var(--accent-font);color:#53656b;}
.thank-you-wave{display:block;line-height:1.833333;white-space:nowrap;}
.contact-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;}
.contact-button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:44px;padding:8px 16px;border:1px solid #354a4238;border-radius:999px;color:#354a42;background:transparent;font:400 12px/1.6 var(--body-font);text-decoration:none;transition:background .2s ease,border-color .2s ease;}
.contact-button span{font-size:16px;}
.contact-button[href]:hover{background:#354a4209;border-color:#354a4280;}
.contact-button:focus-visible{outline:2px solid #354a42;outline-offset:4px;}
@media(max-width:600px){.home-contact{margin-top:-40px;}.contact-main{padding:0 0 32px;}}
@media(prefers-reduced-motion:reduce){.contact-button{transition:none;}}

/* Three loose sheets drifting above the pond. */
.journey-heading{left:0;top:23%;width:100%;text-align:center;font-size:clamp(32px,3.2vw,46px);}
.journey-notes{left:50%;top:39%;width:100%;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.5vw,38px);transform:translate(-50%,var(--journey-copy-rise,18px));}
.journey-note{--card-angle:-4deg;--card-lift:0px;position:relative;isolation:isolate;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;min-height:clamp(180px,28svh,250px);padding:clamp(18px,2vw,28px);color:#354a42;white-space:normal;border:1px solid #d9d9cd;border-radius:2px 3px 1px 2px;background:linear-gradient(125deg,#ffffffb3,transparent 65%),#f7f5ec;box-shadow:0 3px 5px #536f6410,0 18px 32px -15px #536f6438,inset 0 0 22px #b5ac8e0c;transform:translateY(var(--card-lift)) rotate(var(--card-angle));}
.journey-note:nth-child(2){--card-angle:3deg;--card-lift:22px;background-color:#f0f3ec;}
.journey-note:nth-child(3){--card-angle:-3deg;--card-lift:0px;background-color:#f1f0f4;}
.journey-note:nth-child(4){--card-angle:-3deg;--card-lift:22px;background-color:#f1f0f4;}
.journey-note::before{content:"";position:absolute;inset:0;z-index:-1;background:url("assets/postcard-paper.svg") center/320px 320px;opacity:.5;mix-blend-mode:multiply;pointer-events:none;}
.journey-note::after{content:"";position:absolute;left:22px;right:22px;bottom:-8px;height:20px;z-index:-2;border-radius:50%;background:#52746614;filter:blur(10px);pointer-events:none;}
.journey-date{font:400 11px/1.4 var(--body-font);letter-spacing:.04em;color:#75847a;}
.journey-note h3{margin:auto 0 7px;padding-top:24px;font:400 10px/1.4 var(--body-font);text-transform:uppercase;letter-spacing:.12em;color:#62756c;}
.journey-note p{margin:0;font:400 clamp(15px,1.6vw,20px)/1.4 var(--body-font);color:#354a42;white-space:normal;}
@media(prefers-reduced-motion:no-preference){
 .journey-note{animation:paper-card-float 11s ease-in-out infinite;}
 .journey-note:nth-child(2){animation-duration:13s;animation-delay:-4s;}
 .journey-note:nth-child(3){animation-duration:12s;animation-delay:-7s;}
 .journey-note:nth-child(4){animation-duration:14s;animation-delay:-2s;}
}
@keyframes paper-card-float{
 0%,100%{transform:translateY(var(--card-lift)) rotate(var(--card-angle));}
 50%{transform:translateY(calc(var(--card-lift) - 8px)) rotate(calc(var(--card-angle) + 1deg));}
}
@media(max-width:600px){
 .journey-heading{top:16%;font-size:32px;}
 .journey-notes{top:28%;width:96%;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px;}
 .journey-note{min-height:172px;padding:20px 16px;}
 .journey-note:nth-child(2),.journey-note:nth-child(4){--card-lift:16px;}
 .journey-note h3{font-size:9px;letter-spacing:.07em;}
 .journey-note p{font-size:15px;}
 .journey-date{font-size:10px;}
}
@media(max-height:700px){
 .journey-heading{top:14%;}
 .journey-notes{top:26%;gap:24px 22px;}
 .journey-note{min-height:140px;padding:18px;}
 .journey-note h3{padding-top:16px;}
}
@media(max-height:500px) and (min-width:601px){
 .journey-heading{top:19%;font-size:30px;}
 .journey-notes{top:40%;width:96%;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
 .journey-note{padding:16px 12px;min-height:135px;}
 .journey-note p{font-size:14px;}
}
@media(prefers-reduced-motion:reduce){
 .journey-notes{transform:translateX(-50%);}
}

/* Soaked white paper: the shader supplies fibers, creases, and refracted light. */
.journey-note,.journey-note:nth-child(n){background-color:#f4f8f7;background-image:none;border-color:#dce6e233;box-shadow:0 2px 3px #56786c0b,0 12px 24px -12px #56786c35;}
.journey-note::after{display:none;}
.journey-note.has-paper-shader{background:transparent;border-color:transparent;}
.journey-note.has-paper-shader::before{display:none;}
.paper-shader{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;}
.journey-note.has-paper-shader .journey-date,.journey-note.has-paper-shader h3,.journey-note.has-paper-shader p{text-shadow:none;opacity:.96;}