/* The approved 1774 × 887 composition is the source of truth for this preview. */
body{background:#f8f4ec;color:#101314}
.reference-hero{min-height:100svh;position:relative;display:flex;align-items:flex-start;overflow:hidden;background:radial-gradient(ellipse at 48% 30%,#fcf8f1,#f6f2e9)}
.reference-composition{position:relative;width:100%;aspect-ratio:1774/887;isolation:isolate;flex:none}
.reference-header{position:absolute;left:2.6%;right:2.65%;top:3.25%;display:flex;align-items:center;justify-content:space-between;z-index:30;line-height:1}
.reference-brand{font-size:1.92vw;letter-spacing:.075em;font-weight:600;white-space:nowrap}
.reference-header nav{display:flex;align-items:center;gap:3.16vw;font-size:1.13vw;letter-spacing:-.03em}
.search-button{padding:0;margin-left:1.35vw;width:1.6vw;height:1.6vw;display:grid;place-items:center}
.search-button span{width:1.05vw;height:1.05vw;border:2px solid currentColor;border-radius:50%;display:block;position:relative}
.search-button span:after{content:'';position:absolute;width:.58vw;height:2px;background:currentColor;right:-.43vw;bottom:-.16vw;transform:rotate(47deg)}
.reference-intro{position:absolute;top:7.65%;left:20%;right:20%;text-align:center;z-index:20}
.reference-intro h1{margin:0;font-size:2.72vw;font-weight:400;letter-spacing:-.047em;line-height:1.16;white-space:nowrap}
.reference-intro p{font-size:1.6vw;letter-spacing:-.035em;margin:.16vw 0 0;line-height:1.18}
.reference-note{position:absolute;left:89.5%;top:10.6%;margin:0;color:#85888a;font-size:1.12vw;letter-spacing:.09em;line-height:1.31;z-index:20}
.reference-chapters{position:absolute;inset:0;perspective:2200px}
.reference-piece{position:absolute;padding:0;border:0;background:none;outline-offset:-16px!important;touch-action:pan-y}
.reference-art{position:absolute;inset:0;display:block;pointer-events:none;transform-origin:50% 55%;transform:perspective(1800px) translate3d(0,var(--lift,0px),var(--depth,0px)) rotateY(var(--yaw,0deg)) rotateX(var(--pitch,0deg));will-change:transform}
.reference-art svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(5px 12px 10px #302a1f35)}
.reference-piece:focus-visible{outline:2px solid #a96742;border-radius:1px}
.reference-tools{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:17px 5%;border-top:1px solid #29332320;color:#79786c;font-size:9px;background:#f8f4ec}.reference-tools>span{letter-spacing:.12em}.reference-tools>a{color:#333b2f}
.practice-principles{display:grid;grid-template-columns:repeat(3,1fr);gap:6%;margin-top:65px}.practice-principles>div{border-top:1px solid #8a8f7c60;padding-top:22px}.practice-principles small{font-size:8px;letter-spacing:.12em;color:#858b7b}.practice-principles h3{font-size:25px;font-weight:400;letter-spacing:-.035em;margin:28px 0 15px}
#section-search{width:min(560px,90vw);padding:35px;background:#f8f4ec;color:#20231f;border:1px solid #b4b7a3;box-shadow:0 25px 90px #1116}#section-search::backdrop{background:#20231f88;backdrop-filter:blur(8px)}.search-close{display:block;margin-left:auto;font-size:12px;padding:8px 0}#section-search h2{font-size:35px;font-weight:400;letter-spacing:-.055em}#section-search label{display:block;font-size:11px;margin:25px 0 12px}#section-query{font:inherit;background:none;border:0;border-bottom:1px solid #7d8573;padding:14px 0;width:100%;color:inherit;border-radius:0}#section-search nav{display:flex;flex-direction:column;margin-top:20px}#section-search nav a{padding:13px 0;border-bottom:1px solid #9aa18b44}#section-search nav p{font-size:12px;color:#737b6b}
@media(max-width:700px){.reference-hero{min-height:70svh}.reference-brand{font-size:2.2vw}.reference-header nav{font-size:1.7vw;gap:2.4vw}.reference-intro h1{font-size:2.7vw}.reference-note{font-size:1.15vw}.reference-tools{flex-wrap:wrap;font-size:8px}.practice-principles{grid-template-columns:1fr;gap:30px}}
@media(prefers-reduced-motion:reduce){.reference-art{will-change:auto}}

/* Recording 21:59 — an editorial fan of illustrated planes, not UI cards. */
.reference-hero{min-height:calc(100svh - 68px);padding:0 3.5%;align-items:flex-start;background:#f6f0e7}
.reference-composition{aspect-ratio:1774/1010;max-width:1850px;margin:0 auto}
.reference-header{top:2.7%;left:0;right:0;padding-bottom:1.65%;border-bottom:1px solid #453c2e28;gap:2.7vw}
.reference-brand{font-size:clamp(20px,1.65vw,32px);letter-spacing:.055em}
.reference-studio{margin:0 auto 0 0;font-size:clamp(7px,.56vw,11px);letter-spacing:.08em;line-height:1.65;color:#656254}
.reference-header nav{font-size:clamp(11px,.85vw,17px);gap:2.6vw}
.reference-intro{top:9.3%;left:12%;right:12%}
.reference-intro h1{font-size:clamp(30px,3.1vw,61px);line-height:1.03;letter-spacing:-.055em}
.reference-intro h1 span{font-weight:300;font-family:Barlow,Arial,sans-serif;font-size:1.1em}
.reference-intro p{margin:.8vw 0 0;font-size:clamp(11px,.96vw,19px);color:#4e4b43;letter-spacing:-.025em}
.reference-chapters{inset:10% 0 1%;perspective:2400px}
.reference-art{transform:perspective(1800px) translate3d(var(--shift,0%),var(--lift,0px),var(--depth,0px)) rotateY(var(--yaw,0deg)) rotateX(var(--pitch,0deg))}
.reference-art svg{filter:drop-shadow(1px 1px 0 #40342760) drop-shadow(7px 16px 9px #30271940);transition:filter .55s}
.is-active .reference-art svg{filter:drop-shadow(1px 1px 0 #40342770) drop-shadow(11px 22px 13px #30271955)}
.reference-explore{position:absolute;bottom:8.3%;left:0;right:0;font-size:clamp(8px,.65vw,13px);letter-spacing:.02em;color:#25231c}
.reference-piece:nth-child(2) .reference-explore,.reference-piece:nth-child(4) .reference-explore,.reference-piece:nth-child(5) .reference-explore{color:#faf2e6}
.reference-tools{background:#f6f0e7;padding:15px 5%;color:#635e52;min-height:68px;font-size:10px}
.reference-tools>span:first-child{letter-spacing:0;font-size:11px}.reference-tools>span:last-child{font-size:8px;letter-spacing:.1em}
.reference-tools .settings{margin-left:auto}
.story-section{background:#181916;color:#f4efe5;padding:100px 0 125px;min-height:72svh}
.story-section[data-tone=light]{background:#f2e9dc;color:#20221e}
.story-section p{color:#c0bdb2}.story-section[data-tone=light] p{color:#55594e}
.profile figure img{filter:none}.profile .lead{color:#f0e9dd}
.practice-principles small{color:#b2ad9b}.practice-principles>div{border-color:#c3b9a54d}
.story-section[data-tone=light] .service-list details{border-color:#504a3e42}
.story-section[data-tone=light] .service-list summary small{opacity:.7}
.journey-rail{position:absolute;top:0;bottom:0;width:10.5%;pointer-events:none;z-index:1;overflow:hidden;color:#d8bd93;opacity:.62}
.journey-rail.is-left{left:0}.journey-rail.is-right{right:0}
.story-section[data-tone=light] .journey-rail{color:#7b6550;opacity:.62}
.journey-rail svg{width:100%;height:100%;display:block;overflow:hidden}
.journey-rail line,.journey-rail path{fill:none;stroke:currentColor;stroke-width:1.25;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.journey-thread{opacity:.28}.journey-cube{opacity:.8}
.story-section .section-shell{transform:translateY(var(--section-rise,0px));will-change:transform}
.no-motion .journey-rail{display:none}.no-motion .section-shell{transform:none;will-change:auto}
@media(max-width:1000px){.reference-tools>span:last-child{display:none}.reference-studio{font-size:6px}.reference-header nav{gap:20px}.reference-tools{font-size:9px}}
@media(max-width:700px){.reference-hero{min-height:65svh;padding:0 3%}.reference-composition{aspect-ratio:1774/1220}.reference-header{top:4%}.reference-brand{font-size:14px}.reference-studio{display:none}.reference-header nav{font-size:10px;gap:13px}.reference-intro{top:17%}.reference-intro h1{font-size:6vw}.reference-intro p{font-size:10px;margin:9px 0}.reference-chapters{inset:28% 0 1%}.reference-tools>span:first-child{font-size:9px}.reference-explore{font-size:6px}.journey-rail{opacity:.35}.story-section{padding:65px 0 85px}}

/* Recording 22:28 — dark entrance flowing directly into the practice. */
body,.reference-hero,.reference-tools{background:#181916;color:#f2ebdf}
.reference-header{border-color:#e5d7bd26}.reference-studio,.reference-intro p,.reference-tools{color:#b9b2a4}
.reference-tools{border-color:#e5d7bd26}.reference-tools>a{color:#f2ebdf}
.reference-art svg{filter:drop-shadow(1px 1px 0 #ead4ac50) drop-shadow(8px 18px 12px #0008)}
.is-active .reference-art svg{filter:drop-shadow(1px 1px 0 #ead4ac70) drop-shadow(10px 22px 14px #000a)}
.cursor-geometry{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:80}
.portrait-frame{position:relative;max-width:340px;padding:12px;border:1px solid #b6a18650;background:#252621;transform:perspective(1000px) rotateX(var(--portrait-y,0deg)) rotateY(var(--portrait-x,0deg));transition:transform .3s ease-out,box-shadow .4s;isolation:isolate}
.portrait-frame::before{content:'';position:absolute;inset:5px;border:1px solid #d6be9f30;pointer-events:none}
.portrait-frame::after{content:'';position:absolute;inset:12px;background:radial-gradient(circle at var(--shine-x,50%) var(--shine-y,50%),#ffebc221,transparent 65%);opacity:0;transition:opacity .4s;pointer-events:none}
.portrait-frame:hover{box-shadow:12px 18px 35px #0004}.portrait-frame:hover::after{opacity:1}
.profile .portrait-frame img{max-width:none;width:100%;filter:none}
.no-motion .portrait-frame{transform:none;transition:none}.no-motion .portrait-frame::after{display:none}
@media(prefers-reduced-motion:reduce){.portrait-frame{transform:none}.portrait-frame::after{display:none}}

/* Recording 2026-09-22: more breathing room below navigation. */
.reference-intro,.reference-chapters{translate:0 clamp(20px,2.5vw,48px)}
.collections .collection-links a{display:grid;grid-template-columns:24px 1fr minmax(180px,.65fr) 24px;align-items:center;gap:24px;padding:28px 0;border-bottom:1px solid #c3b9a52d;transition:color .25s}
.collections .collection-links a:hover{color:#bec4a0}
.collections .collection-links h3{font-size:clamp(28px,3vw,48px);font-weight:400;letter-spacing:-.045em;margin:0}
.collections .collection-links small{font-size:9px;color:#b2ad9b}
.collections .collection-description{font-size:11px;color:#b9b2a4}
.collections .collection-links a>span:last-child{font-size:25px;text-align:right}
.collections .section-index{margin-bottom:25px}
@media(max-width:700px){.collections .collection-links a{grid-template-columns:18px 1fr 20px;gap:12px;padding:24px 0}.collections .collection-description{display:none}}
/* Tall/narrow browser panes should follow artwork height, not viewport height. */
@media(max-aspect-ratio:4/3){.reference-hero{min-height:0;padding-bottom:24px}}
/* Keep collections and the artist connected instead of reserving an empty screen. */
.story-section.collections{min-height:0;padding:clamp(55px,7vw,100px) 0}
.story-section.collections .section-shell{transform:none;will-change:auto}
.collections+.story-section.profile{padding-top:40px}
@media(max-aspect-ratio:4/3){.story-section{min-height:0}}
.profile[data-tone=light] .lead{color:#34372f}
.profile[data-tone=light] .facts small{color:#626655}
.profile[data-tone=light] .text-link{border-color:#747b665f}
.contact[data-tone=dark] footer{color:#b2b6a7}
.contact[data-tone=dark] .contact-heading>span{color:#b8c2a4}
.reference-intro h1{font-family:Arial,sans-serif;font-weight:400;font-size:clamp(16px,3.1vw,61px);line-height:1.16;white-space:nowrap}
.reference-intro p{margin:.2em 0 0;font-size:clamp(11px,1.65vw,32px)}
@media(max-width:700px){.reference-intro{left:3%;right:3%}.reference-intro h1{font-size:4.1vw}.reference-intro p{font-size:2.2vw}}
/* Full rectangular panels share one 3D space; depth is animated, never z-index. */
.reference-chapters{transform-style:preserve-3d;perspective:2200px}
.reference-piece{top:23%;width:21%;height:72%;transform-style:preserve-3d;cursor:pointer;z-index:auto}
.reference-art{display:flex;flex-direction:column;background:#e6e2d8;color:#181916;transform:translate3d(var(--shift,0%),var(--lift,0px),var(--depth,0px)) rotateY(var(--yaw,0deg)) rotateX(var(--pitch,0deg));box-shadow:5px 15px 25px #0006;border:1px solid #ffffff20;backface-visibility:hidden}
.reference-art svg,.is-active .reference-art svg{height:80%;width:100%;overflow:hidden;filter:none;flex:none}
.panel-name{display:flex;align-items:center;justify-content:center;text-align:center;flex:1;padding:6px 8%;font-size:clamp(12px,1.8vw,34px);font-weight:400;letter-spacing:-.04em;line-height:1.08}
.reference-piece:nth-child(2) .reference-art{background:#b56948;color:#fff5e9}
.reference-piece:nth-child(4) .reference-art{background:#526864;color:#f4f1e8}
.reference-piece:nth-child(5) .reference-art{background:#bb884d;color:#fff5e9}
.reference-art{transform:translate3d(var(--shift,0%),var(--lift,0px),var(--depth,0px)) rotateY(var(--yaw,0deg)) rotateX(var(--pitch,0deg))}
@media(max-width:700px){.reference-piece{top:10%;height:81%}.panel-name{font-size:2.5vw}}
/* Each rectangular illustration is a complete layer, with no plane slicing. */
.reference-chapters{transform-style:flat;perspective:none}
.reference-piece{transform-style:flat;isolation:isolate}
.reference-art{transform:perspective(1400px) translate3d(var(--shift,0%),var(--lift,0px),var(--depth,0px)) rotateY(var(--yaw,0deg)) rotateX(var(--pitch,0deg));box-shadow:1px 2px 4px #0005,8px 8px 13px #0004,14px 24px var(--shadow-blur,24px) rgb(0 0 0 / var(--shadow-alpha,.32));border-color:#fff2}
.panel-name{white-space:normal;min-width:0;font-size:clamp(12px,1.65vw,31px);padding:6px 12%}
@media(max-width:700px){.panel-name{font-size:2.3vw}}
/* Light entrance study; subsequent sections retain their existing themes. */
.reference-hero,.reference-tools{background:#f6f1e8;color:#20221e}
.reference-header{border-color:#453c2e26}
.reference-studio,.reference-intro p,.reference-tools{color:#666154}
.reference-tools{border-color:#453c2e26}
.reference-tools>a{color:#20221e}
/* Scroll the whole fan underneath an opaque foreground ribbon. */
.reference-hero{z-index:0;isolation:isolate}
.reference-chapters{transform:translate3d(0,var(--entrance-drop,0px),0);will-change:transform}
.reference-tools{position:relative;z-index:3}
.reference-tools::before{content:'';position:absolute;left:0;right:0;bottom:100%;height:clamp(50px,7vw,110px);background:linear-gradient(to top,#15130f70,#15130f26 32%,transparent);opacity:var(--entrance-shadow,0);pointer-events:none}
.story-section{position:relative;z-index:2}
.no-motion .reference-chapters{transform:none;will-change:auto}
@media(prefers-reduced-motion:reduce){.reference-chapters{transform:none;will-change:auto}.reference-tools::before{display:none}}