@font-face{font-family:Pinyon;src:url('/_astro/pinyon-script-400.DG755snz.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Noto;src:url('/_astro/noto-serif-display-300.DZCd2g7q.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:Jost;src:url('/_astro/jost-400.BzT6BTit.woff2') format('woff2');font-weight:400;font-display:swap}
:root{--wall:#c9c4bd;--ink:#16130f;--grey:#4f4a43;--glass:rgba(232,228,221,.62);color:var(--ink);font-family:Jost,sans-serif;font-synthesis:none}
*{box-sizing:border-box}html{background:var(--wall);scroll-padding-top:5rem}body{margin:0;background:transparent}a{color:inherit;text-underline-offset:.3em}
a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid currentColor;outline-offset:5px}
/* the rug: fixed behind everything, never covered by anything but the copy column */
.rl-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.4s ease}.rl-canvas.on{opacity:1}
html.rl-off body{background:var(--wall) url(/relief/poster.webp) right center/contain no-repeat fixed}
main{position:relative;z-index:1}
.nav{position:fixed;inset:0 0 auto;z-index:3;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:14px 4vw;font-size:14px}
.nav a{text-decoration:none}.catalogue{justify-self:end}.wordmark{font:38px/1.1 Pinyon,cursive}
.menu summary{cursor:pointer;list-style:none;min-height:44px;display:flex;align-items:center}.menu summary::-webkit-details-marker{display:none}
.menu nav{position:absolute;left:4vw;top:100%;width:min(320px,92vw);padding:18px 24px 24px;display:grid;gap:4px;background:var(--glass);backdrop-filter:blur(18px) saturate(1.1);-webkit-backdrop-filter:blur(18px) saturate(1.1);border-radius:14px;box-shadow:0 10px 40px rgba(40,30,20,.12)}
.menu nav a{padding:10px 0}
.skip{position:fixed;left:1rem;top:-8rem;z-index:4;padding:1rem;background:var(--wall)}.skip:focus{top:5rem}
/* copy column: left third on desktop, glass panels so the carving behind always shows */
.ch{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:120px 0 80px 5vw}
.panel{width:min(30vw,440px);padding:34px 36px;background:var(--glass);backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15);border:1px solid rgba(255,255,255,.35);border-radius:18px;box-shadow:0 18px 50px rgba(50,38,25,.12);font-size:17px;line-height:1.6}
.panel p{margin:18px 0 0;text-wrap:pretty}.panel .intro{margin:0 0 14px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.script{display:block;font-family:Pinyon,cursive;font-weight:400}
.caps{display:block;font-family:Noto,serif;font-weight:300;text-transform:uppercase;font-size:clamp(24px,2.4vw,38px);line-height:1.15;letter-spacing:.03em}
h1,h2{margin:0;font-weight:400}h1 .script{font-size:clamp(56px,5.4vw,84px);line-height:1.1}h1 .caps{padding-left:24px;font-size:clamp(32px,3vw,48px)}h2 .script{font-size:clamp(48px,4.4vw,68px);line-height:1.1}
.lead{font-size:20px;line-height:1.5}
.scroll-note{display:inline-flex;gap:14px;margin-top:26px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--grey)}
.works-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;margin-top:22px;padding-bottom:10px;scrollbar-width:thin}
.work{margin:0;flex:0 0 132px;scroll-snap-align:start}.work img{display:block;width:100%;height:132px;object-fit:cover;border-radius:8px}
.work figcaption{padding-top:8px;line-height:1.3;font-size:12px;color:var(--grey)}.work .script{font-size:26px;color:var(--ink)}
.text-link{display:inline-flex;gap:20px;margin-top:22px;padding:8px 0;border-bottom:1px solid currentColor;text-decoration:none}
.contacts{display:grid;gap:8px;margin-top:20px;font-size:14px;overflow-wrap:anywhere}.contacts a{text-decoration:none}
footer{margin-top:34px;padding-top:18px;border-top:1px solid rgba(22,19,15,.15)}footer .script{font-size:34px;text-decoration:none}footer p{margin:6px 0 0;font-size:12px;color:var(--grey)}
.reveal{opacity:.2;transform:translateY(16px);transition:opacity .9s ease,transform .9s cubic-bezier(.16,1,.3,1)}.reveal.in{opacity:1;transform:none}
/* phone: the rug owns the upper screen; copy rises from below on frosted sheets, with gaps so the rug shows between */
@media(max-width:899px){
.nav{padding:10px 18px}.wordmark{font-size:32px}
.ch{min-height:115svh;align-items:flex-end;padding:0 14px 14px}
.ch.hero{min-height:100svh}
.panel{width:100%;padding:24px 22px;font-size:16px;border-radius:16px}
/* phone: compact panels with long rug-only stretches between them, so the carving is never hidden for long */
.ch{min-height:160svh}
.panel{width:88%;padding:18px 18px;font-size:15px;line-height:1.5;background:rgba(244,240,232,.62);backdrop-filter:blur(8px) saturate(1.1);-webkit-backdrop-filter:blur(8px) saturate(1.1)}
.ch:not(#cta) .panel p+p{display:none}
.panel p{margin-top:10px}
h1 .script{font-size:54px}h1 .caps{font-size:32px;padding-left:16px}h2 .script{font-size:50px}.caps{font-size:26px}.lead{font-size:18px}
}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* the rug itself: a sticky stage where the real photograph opens out of the plaster (from the kiss), greyed like the
   carving at first and warming into its silk; three more views rise after. The relief keeps breathing behind it. */
.showcase{position:relative;height:280vh}
.sc-stage{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center;overflow:hidden}
.sc-photo{margin:0;width:min(60vw,1080px);aspect-ratio:3/2;border-radius:6px;overflow:hidden;
  clip-path:circle(var(--r,0%) at 52% 38%);filter:grayscale(var(--g,1)) contrast(var(--c,.8)) brightness(var(--b,1.12));
  transform:translate(var(--x,0),var(--y,0)) scale(var(--s,1));will-change:clip-path,filter,transform}
.sc-photo img{display:block;width:100%;height:100%;object-fit:cover}
.sc-caption{position:absolute;left:4vw;bottom:9vh;width:min(22vw,330px);opacity:var(--o,0);transform:translateY(calc((1 - var(--o,0)) * 24px))}
.sc-strip{position:absolute;right:5vw;bottom:7vh;display:flex;gap:16px;opacity:var(--o2,0);transform:translateY(calc((1 - var(--o2,0)) * 40px))}
.sc-strip figure{margin:0;flex:0 0 auto;width:min(15vw,240px)}
.sc-strip img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:4px;box-shadow:0 14px 34px rgba(40,30,20,.22)}
.sc-strip figcaption{margin-top:8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}
@media(max-width:899px){
.showcase{height:260svh}
.sc-photo{width:92vw}
.sc-caption{left:14px;right:14px;width:auto;bottom:auto;top:12vh}
.sc-strip{left:14px;right:14px;bottom:4vh;overflow-x:auto}
.sc-strip figure{flex:0 0 40vw;width:40vw}
.sc-photo{--x:0 !important;--y:0 !important;margin-top:8vh}
}
@media(prefers-reduced-motion:reduce){.sc-photo{clip-path:none;filter:none}.sc-caption,.sc-strip{opacity:1;transform:none}}