:root{--ink:#3a3a32;--ink2:#6d6a5c;--card:rgba(255,250,247,.58);--line:rgba(58,58,50,.18);--serif:"Cormorant Garamond",Georgia,serif;--sans:"Jost",system-ui,sans-serif;color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-behavior:smooth;scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:#f3dcd9;color:var(--ink);font:300 17px/1.7 var(--sans);transition:color .8s}
body.dark{--ink:#f1ebe4;--ink2:#c3d0d8;--card:rgba(0,49,83,.45);--line:rgba(241,235,228,.25)}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:-1;display:block}
#veil{position:fixed;inset:0;z-index:20;background:#f3dcd9;display:grid;place-items:center;font:300 clamp(28px,6vw,60px) var(--serif);color:#3a3a32;transition:opacity 1s .2s,visibility 0s 1.3s}
#veil.off{opacity:0;visibility:hidden}
#prog{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:left;z-index:6;opacity:.6}
nav{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:calc(18px + env(safe-area-inset-top,0px)) 5vw 18px}
nav a{color:var(--ink);text-decoration:none;font-size:13px;letter-spacing:.18em;text-transform:uppercase;margin-left:26px;position:relative}
nav a.logo{margin:0;font:500 22px var(--serif);letter-spacing:.04em;text-transform:none}
nav a:not(.logo)::after{content:"";position:absolute;left:0;bottom:-4px;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s}
nav a:hover::after,nav a:focus-visible::after,nav a.on::after{transform:scaleX(1)}
section{min-height:100vh;padding:14vh 5vw 10vh;display:flex;align-items:center;position:relative}
.wrap{width:100%;max-width:1100px;margin:0 auto}
h1,h2,h3{font-family:var(--serif);font-weight:300;margin:0;line-height:1.02}
h1{font-size:clamp(54px,11vw,150px);letter-spacing:-.01em}
h1 em{font-style:italic;color:var(--ink2)}
h1 span,h1 em{display:inline-block;animation:up 1.4s cubic-bezier(.2,.7,.2,1) 1s both}
h1 em{animation-delay:1.2s}
@keyframes up{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
h2{font-size:clamp(38px,6vw,76px);margin-bottom:.4em}
.kick{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink2);margin:0 0 22px}
.lead{max-width:34ch;font:italic 300 clamp(22px,2.6vw,32px)/1.35 var(--serif);margin:28px 0 0}
.hint{position:absolute;bottom:5vh;left:5vw;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink2)}
.about{display:grid;grid-template-columns:1.1fr .9fr;gap:6vw;align-items:center}
.about p{max-width:46ch}
figure{margin:0}
.photo{border-radius:200px 200px 6px 6px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(80,60,50,.5)}
.photo img{display:block;width:100%;height:auto;object-fit:cover}
figcaption{font-size:12px;letter-spacing:.12em;color:var(--ink2);margin-top:10px}
.list{display:grid;gap:14px;margin-top:34px}
.item{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:64px 1fr auto;gap:18px;align-items:baseline;padding:26px 28px;background:var(--card);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:4px;transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color .4s,opacity 1.1s;color:var(--ink)}
.item:hover,.item:focus-visible{transform:translateX(14px);border-color:var(--ink)}
.item:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.item .n{font:300 18px var(--serif);color:var(--ink2)}
.item h3{font-size:clamp(28px,3.6vw,44px)}
.item small{display:block;font-size:14px;color:var(--ink2);margin-top:4px}
.item .go{font-size:22px;transition:transform .4s}
.item:hover .go{transform:translateX(6px)}
.contact{text-align:center}
.btn{display:inline-block;margin:22px 8px 0;padding:16px 38px;border:1px solid var(--ink);color:var(--ink);text-decoration:none;font-size:13px;letter-spacing:.22em;text-transform:uppercase;transition:background .4s,color .4s;cursor:pointer}
.btn:hover,.btn:focus-visible{background:var(--ink);color:#f6e3df}
.btn.ghost{border-color:var(--line)}
footer{padding:0 5vw calc(30px + env(safe-area-inset-bottom,0px));text-align:center;font-size:12px;color:var(--ink2);letter-spacing:.08em}
footer a{color:inherit}
dialog{border:0;padding:0;width:min(1100px,94vw);max-height:90vh;background:#f8ece8;color:#3a3a32;border-radius:6px;overflow:auto;box-shadow:0 40px 100px rgba(0,0,0,.35)}
dialog.dk{background:#0c2b42;color:#f1ebe4}
dialog::backdrop{background:rgba(40,30,30,.5);backdrop-filter:blur(4px)}
.dh{padding:36px 36px 8px;display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.dh h2{margin:0}.dh p{max-width:52ch;margin:10px 0 0;opacity:.8}
.x{all:unset;cursor:pointer;font-size:30px;line-height:1;padding:6px 12px}
.x:focus-visible,.nv:focus-visible{outline:2px solid currentColor}
.grid{columns:3 220px;column-gap:14px;padding:20px 36px 36px}
.grid figure{break-inside:avoid;margin-bottom:14px;overflow:hidden;border-radius:3px;cursor:zoom-in}
.grid img{display:block;width:100%;height:auto;transition:transform .8s}
.grid figure:hover img{transform:scale(1.05)}
.grid figure:focus-visible{outline:2px solid currentColor}
#lb{width:100vw;max-width:100vw;height:100vh;max-height:100vh;background:rgba(20,16,16,.92);display:none;place-items:center;border-radius:0;overflow:hidden}
#lb[open]{display:grid}
#lb img{max-width:88vw;max-height:86vh;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lbx{position:absolute;top:14px;right:18px;color:#fff;z-index:2}
.nv{all:unset;cursor:pointer;position:absolute;top:50%;transform:translateY(-50%);font-size:56px;color:#fff;padding:20px;opacity:.7}
.nv:hover{opacity:1}.prev{left:8px}.next{right:8px}
.rv{opacity:0;transform:translateY(30px);transition:opacity 1.1s,transform 1.1s}
.rv.in{opacity:1;transform:none}
@media(max-width:760px){.about{grid-template-columns:1fr}.item{grid-template-columns:40px 1fr;padding:20px}.item .go{display:none}nav a:not(.logo){margin-left:14px;font-size:11px}.dh{padding:24px 22px 4px}.grid{padding:14px 22px 24px}.nv{font-size:40px;padding:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.rv{opacity:1;transform:none;transition:none}h1 span,h1 em{animation:none}#veil{transition:none}}