@font-face{font-family:GlassSerif;src:url('assets/serif.woff2') format('woff2');font-weight:500;font-display:swap}
@property --glass-left{syntax:'<color>';inherits:true;initial-value:#f5f0df}
@property --glass-middle{syntax:'<color>';inherits:true;initial-value:#f5f0df}
@property --glass-right{syntax:'<color>';inherits:true;initial-value:#f5f0df}
:root{--ink:#152221;--ivory:#f5f0df;--lead:#263331;--ease:cubic-bezier(.65,0,.18,1)}
*{box-sizing:border-box}body{margin:0;background:var(--ivory);color:var(--ink);font-family:Arial,sans-serif}button,a,input{-webkit-tap-highlight-color:transparent}button{color:inherit;cursor:pointer;font:inherit}header{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 3.1%;gap:24px;background:#f7f3e8}button{border:0;background:none}button:focus-visible,a:focus-visible{outline:3px solid currentColor;outline-offset:5px}header .wordmark{font:500 clamp(27px,3vw,47px)/1 GlassSerif,Georgia,serif;white-space:nowrap;padding:0}nav{display:flex;gap:32px}nav :is(button,a){font:500 23px GlassSerif,Georgia,serif;padding:8px 0;border-bottom:1px solid transparent}nav :is(button,a):hover{border-color:currentColor}
#window{position:relative;isolation:isolate;height:calc(100svh - 124px);min-height:580px;max-height:1050px;background:var(--lead);overflow:hidden}#panes{position:absolute;inset:0}.pane{position:absolute;background:var(--color);clip-path:var(--shape);transition:top 950ms var(--ease),left 950ms var(--ease),width 950ms var(--ease),height 950ms var(--ease),clip-path 950ms var(--ease),transform 950ms var(--ease),filter 250ms ease;will-change:transform}.pane.glass.artwork-home-glass{background-image:linear-gradient(105deg,var(--glass-left),var(--glass-middle) 52%,var(--glass-right));transition:top 950ms var(--ease),left 950ms var(--ease),width 950ms var(--ease),height 950ms var(--ease),clip-path 950ms var(--ease),transform 950ms var(--ease),filter 250ms ease,--glass-left 2200ms ease-in-out,--glass-middle 2200ms ease-in-out,--glass-right 2200ms ease-in-out}.pane.glass.artwork-glass-initializing{transition:none!important}.pane.glass:before{content:'';position:absolute;inset:0;background-image:url('assets/optimized/ba8d5542336f6b-1254.webp');background-size:600px 600px;mix-blend-mode:soft-light;opacity:.65;pointer-events:none;transform:rotate(0deg)}.pane.glass:after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 45px #162c231b;pointer-events:none}.pane.title:before{opacity:.27;background-size:850px}.pane img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}.pane.fox img,.pane.wave img{object-fit:contain;padding:5% 7%;background:#eee9de}.pane.fox{background:#eee9de}.pane-hit{position:absolute;inset:0;width:100%;height:100%;padding:0;z-index:2;outline:none!important}.pane-label{position:absolute;left:var(--lx,50%);top:var(--ly,50%);transform:translate(-50%,-50%);font:500 clamp(29px,3.5vw,59px)/.95 GlassSerif,Georgia,serif;text-align:center;width:max-content;max-width:87%;text-wrap:balance;transition:opacity 220ms ease,transform 400ms ease;text-shadow:0 1px 0 #ffffff0a}.pane-label svg{display:block;width:58px;height:28px;margin:20px auto 0;stroke:currentColor;fill:none;stroke-width:1.3;transition:transform 350ms ease}.pane-hit:hover .pane-label svg{transform:translateX(10px)}.pane:has(.pane-hit:hover){filter:brightness(1.12)}.pane-hit:focus-visible .pane-label{outline:2px solid currentColor;outline-offset:12px}.pane-hit:focus-visible .pane-label svg{transform:translateX(9px)}.title-copy{position:absolute;left:65%;top:59%;transform:translate(-50%,-50%);text-align:center;width:79%}h1{font:500 clamp(62px,min(7.1vw,10.2vh),139px)/.82 GlassSerif,Georgia,serif;letter-spacing:-.045em;margin:0 0 16px}.title-copy p{font:500 clamp(18px,2.05vw,33px)/1.2 GlassSerif,Georgia,serif;margin:0}.about .pane-label{font-size:clamp(23px,2.4vw,41px)}.commission .pane-label{font-size:clamp(27px,3vw,49px)}.about .pane-label svg{width:40px;margin-top:12px}#leading{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;transition:opacity 280ms ease}#leading polygon{stroke:var(--lead);fill:none;stroke-width:5;stroke-linejoin:round;vector-effect:non-scaling-stroke}#leading .glint{stroke:#c6baa3;stroke-width:.5;opacity:.55}.is-open #leading{opacity:0}.pane.selected{z-index:4;filter:none;box-shadow:0 0 40px #0003}.is-open .pane-hit{pointer-events:none}.is-open .pane-label,.is-open .title-copy{opacity:0}.is-open .pane:not(.selected){filter:brightness(.85)}
#detail{position:absolute;inset:5% 6%;z-index:5;color:var(--detail-ink,#fff9df);padding:30px 4%;overflow:auto;opacity:0;transform:translateY(14px);transition:opacity 450ms ease,transform 450ms ease}#detail.visible{opacity:1;transform:none}#detail[hidden]{display:none}.back{display:flex;align-items:center;gap:12px;font-size:14px;letter-spacing:.03em;padding:8px 0}.back svg{width:30px;height:20px;stroke:currentColor;stroke-width:1.4;fill:none}.detail-layout{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:center;min-height:calc(100% - 60px);padding:25px 0}.detail-copy h2{font:500 clamp(42px,5.5vw,82px)/.95 GlassSerif,Georgia,serif;letter-spacing:-.02em;margin:0 0 25px;max-width:650px}.detail-copy>p{font:500 clamp(21px,2vw,30px)/1.25 GlassSerif,Georgia,serif;max-width:530px}.detail-copy #detail-note{font:13px/1.7 Arial,sans-serif;opacity:.85;margin-top:28px;max-width:390px}.detail-layout figure{margin:0;height:min(52vh,560px);min-height:250px;display:flex;flex-direction:column;align-items:center;gap:12px}.detail-layout figure img{width:100%;height:calc(100% - 35px);object-fit:contain}.detail-layout figcaption{font-size:12px;line-height:1.4;text-align:center}#choices{display:flex;flex-direction:column;align-items:flex-start;gap:0}#choices button{font:500 22px/1.2 GlassSerif,Georgia,serif;padding:8px 0;opacity:.75;text-align:left;border-bottom:1px solid transparent}#choices button:hover,#choices button[aria-pressed=true]{opacity:1;border-color:currentColor}footer{min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 3.1%;font-size:11px;color:#43524c;letter-spacing:.025em;background:#f7f3e8}footer p{margin:0}footer span{padding:0 9px}footer label{display:flex;align-items:center;gap:7px;white-space:nowrap;cursor:pointer}footer input{accent-color:#174a4b;margin:0}.reduce-motion *, .reduce-motion *:before,.reduce-motion *:after{transition:none!important;animation:none!important}
@media(min-width:1800px){#window{max-height:none}}
/* Keep every destination available above the artwork. */
header nav{gap:clamp(12px,1.8vw,28px);align-items:center}
header nav :is(button,a){font-size:clamp(16px,1.65vw,23px);white-space:nowrap}
@media(min-width:701px) and (max-width:1000px){header{gap:16px}header .wordmark{font-size:27px}}
@media(max-width:700px){header nav{display:grid;grid-template-columns:1fr 1fr;gap:4px 20px;width:100%;max-width:420px}header nav :is(button,a){font-size:17px;min-height:40px}}
@media(max-width:700px){header{height:auto;min-height:102px;padding:17px 20px 12px;flex-wrap:wrap;justify-content:center;gap:13px}header .wordmark{font-size:33px}nav{gap:28px}nav :is(button,a){font-size:18px;padding:2px 0}#window{height:calc(200vw);min-height:820px;max-height:none}.pane-label{font-size:clamp(25px,7.6vw,45px)}.pane-label svg{width:38px;height:24px;margin-top:13px}.commission .pane-label{font-size:clamp(26px,7.2vw,43px)}.about .pane-label{font-size:30px}.about .pane-label svg{display:inline-block;width:30px;margin:0 0 0 12px;vertical-align:middle}.title-copy{left:50%;top:47%;width:90%}h1{font-size:clamp(60px,17vw,105px);line-height:.84;margin-bottom:18px}.title-copy p{font-size:21px}.pane.fox img,.pane.wave img{padding:5% 3%}#leading polygon{stroke-width:3.5}.pane.glass:before{background-size:450px}#detail{inset:3% 5%;padding:20px 6%;}.detail-layout{grid-template-columns:1fr;gap:25px;align-items:start;padding-top:28px}.detail-copy h2{font-size:48px;margin-bottom:18px}.detail-copy>p{font-size:23px}.detail-copy #detail-note{margin-top:20px;font-size:12px}.detail-layout figure{height:320px;min-height:0}.detail-layout figcaption{font-size:11px}.back{font-size:12px}#choices{flex-direction:row;gap:6px 15px}#choices button{font-size:20px}footer{align-items:flex-start;padding:14px 18px;font-size:10px;gap:12px}footer p{max-width:200px;line-height:1.6}footer span{padding:0 4px}footer label{padding-top:3px}.is-open{min-height:970px!important;height:970px!important}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}

@media(min-width:701px){.pane.fox img{position:absolute;width:75%;height:79%;left:58%;top:51%;transform:translate(-50%,-50%);padding:0}.pane.wave img{padding:6% 12%;background:none}.pane.wave{background:#eee9de}}

/* Homepage glass: artwork fills its pane; solder and facets echo the collections. */
#window{background:#000}
.pane.glass{background-image:linear-gradient(125deg,#ffffff35,transparent 47%,#ffffff19 75%,#102e3620)}
.pane.glass:before{background-size:380px;opacity:.58}
.pane.glass:after{background:linear-gradient(140deg,#ffffff15,transparent 46%,#fff9eb12);box-shadow:inset 0 0 38px #162c2312}
.pane.title{--color:#e7eac8!important}
.pane.title:before{background-size:380px;opacity:.4}
.pane-artwork{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
#leading polygon{stroke:#000;stroke-width:2}
#leading .glint{display:none}
@media(max-width:700px){
 #leading polygon{stroke-width:2}
 #leading .glint{stroke-width:1.5}
}

.pane.fox{background:linear-gradient(135deg,#e4e9ef,#b7c7de 70%,#a2b8d6)}
.pane.fox img{position:absolute;inset:auto;width:82%;height:88%;left:56%;top:50%;transform:translate(-50%,-50%);object-fit:contain;padding:0;background:none;mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 5%,#000 94%,transparent);mask-composite:intersect}



@media(min-width:701px){.commission .pane-label{font-size:clamp(27px,2.4vw,40px)}}

/* Lift the wider tomato photograph to match the brighter detail view. */
.pane.botanical .pane-artwork{filter:brightness(1.22) saturate(1.08)}


/* Interior pages are ready immediately; GlassMotion handles their entrance. */
#window.is-open #panes,#window.is-open #leading{visibility:hidden}
#window.is-open{background:var(--ivory)}
#window.is-open #detail{transition:none}

/* Individual glass materials inspired by Trish’s work, October 11. */
.pane.available{--glass-sample:url('assets/optimized/d8e36dfe337628-1254.webp')}
.pane.collections{--glass-sample:linear-gradient(#003e4852,#003e4852),url('assets/optimized/d4f7d24509bf06-1254.webp')}
.pane.title{--glass-sample:url('assets/optimized/1e63b7a086203b-1254.webp')}
.pane.glass{background-image:var(--glass-sample);background-size:cover;background-position:center}
.pane.glass::before{display:none}
.pane.glass::after{background:none;box-shadow:inset 0 0 30px #162c230c}
.pane.title .title-copy{position:absolute;z-index:1}

.pane.commission{--glass-sample:linear-gradient(#12275626,#12275626),url('assets/optimized/9c869c8d8afcf8-1254.webp')}
.pane.about{--glass-sample:linear-gradient(#e8f0cf30,#e8f0cf30),url('assets/optimized/486ceb83850946-1254.webp')}
.pane.leaf{--glass-sample:url('assets/optimized/486ceb83850946-1254.webp');background-position:80% 25%}
.pane.ruby{--glass-sample:url('assets/optimized/51eaf30e2f606c-1254.webp')}
.pane.aqua,.pane.cyan{--glass-sample:url('assets/optimized/e5690ad0ad0939-1254.webp')}
.pane.cyan{background-position:20% 75%}
.pane.gold{--glass-sample:url('assets/optimized/d8e36dfe337628-1254.webp');background-position:right top}
.pane.glass.artwork-home-glass{background-image:var(--glass-sample)}
.pane.glass.artwork-home-glass::before{display:block;background:linear-gradient(105deg,var(--glass-left),var(--glass-middle) 52%,var(--glass-right));background-image:linear-gradient(105deg,var(--glass-left),var(--glass-middle) 52%,var(--glass-right));mix-blend-mode:color;opacity:.78}
#window.is-open #detail .detail-copy{padding:clamp(16px,2.5vw,30px);background:rgba(255,248,229,.64);box-shadow:0 10px 30px #173d3222;border:1px solid #fff8e48c}
@media(max-width:700px){#window.is-open #detail .detail-copy{padding:18px;background:rgba(255,248,229,.72)}}

/* Keep the artist biography paragraphs distinct. */
#detail-note{white-space:pre-line}

/* The process link stays last, with room for all destinations. */
header nav a{color:inherit;text-decoration:none;text-align:center}
header nav{gap:clamp(12px,1.4vw,22px)}
header nav :is(button,a){font-size:clamp(16px,1.4vw,20px)}
@media(min-width:701px) and (max-width:1150px){header{height:auto;min-height:82px;flex-wrap:wrap;justify-content:center;padding-top:16px;padding-bottom:12px;gap:12px}header nav{justify-content:center;flex-wrap:wrap;width:100%}}
@media(max-width:700px){header nav :is(button,a){font-size:17px}header nav a[href="#process"]{grid-column:1 / -1;display:flex;align-items:center;justify-content:center}}

/* Full-color photographs remain untouched; only decorative material is softened. */
.pane.glass{filter:saturate(.7)}
.pane.glass::after{background:rgba(255,250,243,.3)}
header .wordmark{color:inherit;text-decoration:none}
#menu-toggle{display:none}
header nav a[href="available/"]{border-bottom-color:#687b6b}
@media(max-width:700px){
 header{min-height:72px;height:auto;padding:14px 16px;display:grid;grid-template-columns:1fr auto;gap:10px}
 header .wordmark{font-size:27px}
 .js #menu-toggle{display:block;min-height:44px;padding:8px 4px;font:18px GlassSerif,Georgia,serif}
 header nav#main-navigation{display:grid;grid-column:1/-1;max-width:none;gap:6px 16px}
 .js header nav#main-navigation{display:none}
 .js header nav#main-navigation.is-expanded{display:grid}
 header nav a{min-height:44px;display:flex;justify-content:center;align-items:center}
 header nav a:last-child{grid-column:1/-1}
}

/* Quiet browsing routes beneath the phone mosaic. */
.home-browse{display:none}
@media(max-width:700px){body:not(.in-collections) .home-browse{display:flex;flex-direction:column;align-items:center;gap:4px;padding:20px;background:#f7f3e8}.home-browse a{font:22px/1.3 GlassSerif,Georgia,serif;color:#173c35;padding:10px 4px;min-height:44px}}

/* Six clear top-level destinations, including project work for builders. */
header nav a[href="available/"]{border-bottom-color:transparent}
header nav a[aria-current="page"]{border-bottom-color:#687b6b}
@media(min-width:701px) and (max-width:1300px){header{height:auto;min-height:82px;flex-wrap:wrap;justify-content:center;padding-top:16px;padding-bottom:12px;gap:12px}header nav{justify-content:center;flex-wrap:wrap;width:100%}}
@media(max-width:700px){header nav a:last-child{grid-column:auto}}
