:root{
  --bg:#15110e; --bg2:#1d1814; --ink:#e9e1d3; --mute:#a0958650; --soft:#a09586; --gold:#b8955c; --line:#ffffff1c;
  --serif:"Cormorant Garamond","Iowan Old Style",Georgia,serif;
  color-scheme:dark;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.25rem/1.65 var(--serif)}
a{color:inherit;text-decoration-color:var(--gold);text-underline-offset:.25em}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;display:flex;justify-content:space-between;align-items:baseline;
  padding:1rem clamp(1rem,4vw,3rem);background:linear-gradient(var(--bg),#15110ee6 70%,#15110e00)}
nav .name{font-size:1.35rem;font-style:italic;text-decoration:none}
nav ul{display:flex;gap:clamp(1rem,3vw,2.2rem);list-style:none;margin:0;padding:0}
nav ul a{text-decoration:none;font-size:1.1rem;color:var(--soft);padding-bottom:.15rem;border-bottom:1px solid transparent}
nav ul a[aria-current="page"]{color:var(--ink);border-color:var(--gold)}
main{min-height:70vh}
.page{display:none}.page.on{display:block}
/* hero */
.hero{position:relative;height:calc(100svh - 3.6rem);min-height:480px;margin-top:-3.6rem;display:flex;align-items:flex-end;overflow:hidden;background:var(--bg2)}
.hero img{object-position:70% 50%;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(#15110e00 35%,#15110ef0 100%)}
.hero .txt{position:relative;z-index:2;padding:0 clamp(1.2rem,6vw,5rem) clamp(2rem,8vh,5rem)}
.hero small{display:block;font-size:1.15rem;font-style:italic;color:var(--soft)}
.hero h1{margin:.1em 0 .5em;font-weight:500;font-size:clamp(3rem,11vw,8rem);line-height:.95;letter-spacing:-.01em}
.hero .links{display:flex;gap:1.6rem;flex-wrap:wrap}
.btn{display:inline-block;padding:.55rem 1.5rem;border:1px solid var(--gold);text-decoration:none;color:var(--ink);font-size:1.1rem;background:none;font-family:inherit;cursor:pointer}
.btn:hover{background:var(--gold);color:var(--bg)}
.verse{max-width:36rem;margin:5rem auto 0;padding:0 1.5rem;text-align:center;font-style:italic;font-size:1.6rem;color:var(--soft)}
.verse span{display:block;font-size:1rem;font-style:normal;margin-top:.4rem}
/* text sections */
.sec{max-width:40rem;margin:0 auto;padding:5rem 1.5rem 0}
.sec h2{font-weight:500;font-size:2.2rem;margin:0 0 1.2rem;font-style:italic;color:var(--gold)}
.sec p{margin:0 0 1.2em}
.sec p:first-of-type::first-letter{font-size:1.15em}
.cv h3{font-size:1.1rem;font-weight:600;margin:2rem 0 .5rem;color:var(--soft)}
.cv p{margin:0 0 .5em;font-size:1.1rem;line-height:1.45;padding-left:3.2rem;text-indent:-3.2rem}
.cv b{font-weight:600;color:var(--ink)}
footer{margin-top:6rem;padding:2rem 1.5rem calc(2rem + env(safe-area-inset-bottom,0px));text-align:center;color:var(--soft);font-size:1rem;border-top:1px solid var(--line)}
/* works */
.works{max-width:64rem;margin:0 auto;padding:2rem clamp(1rem,4vw,3rem) 0}
.works h1,.shop h1,.contact h1{font-weight:500;font-style:italic;font-size:2.4rem;margin:0 0 3rem;color:var(--gold)}
.work{margin:0 0 6rem}

.frame{display:block;text-align:center}
.frame img{display:block;margin:0 auto;max-width:100%;max-height:88vh;width:auto;height:auto;cursor:zoom-in;box-shadow:0 10px 40px #00000070}
.ph{padding:4rem 1rem;text-align:center;color:var(--soft);font-style:italic}
.cap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:1rem}
.cap h2{margin:0;font-weight:500;font-size:1.6rem}
.cap p{margin:0;color:var(--soft);font-size:1.05rem}
details{margin-top:.6rem;color:var(--soft)}
summary{cursor:pointer;color:var(--gold);font-size:1.05rem}
details p{max-width:36rem;margin:.6rem 0 0}details p+p{margin-top:1.1rem}
/* shop */
.shop,.contact{max-width:60rem;margin:0 auto;padding:2rem clamp(1rem,4vw,3rem) 0}
.items{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 2rem;align-items:start}.items .col{display:flex;flex-direction:column;gap:3rem}.item .frame img{width:100%;max-height:none;margin:0}
@media (max-width:520px){.items{gap:1rem}.items .col{gap:2rem}.item h2{font-size:1.15rem}.item p{font-size:.95rem}.item .btn{padding:.4rem 1rem;font-size:1rem}}

.item h2{margin:.8rem 0 0;font-weight:500;font-size:1.5rem}
.item p{margin:.1rem 0 .7rem;color:var(--soft);font-size:1.05rem}
.yrs{font-size:1.2rem;color:var(--soft);font-style:normal;margin-left:1rem}
.cwrap{display:flex;gap:2.5rem;flex-wrap:wrap;align-items:flex-start}.portrait{width:min(100%,19rem);height:auto;display:block}
.dot{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;background:#c4382c;margin-right:.55rem;vertical-align:.08em}

#join{position:fixed;inset:0;z-index:30;display:none;align-items:center;justify-content:center;padding:1.2rem;background:#0d0a08d9}
#join.on{display:flex}
#join .card{position:relative;width:min(100%,30rem);padding:2.6rem 2rem 2rem;background:var(--bg2);border:1px solid var(--gold);text-align:center;box-shadow:0 20px 60px #000a}
#join h2{margin:0 0 .6rem;font-weight:500;font-style:italic;font-size:2.2rem;color:var(--gold)}
#join p{margin:0 0 1.4rem;color:var(--ink);font-size:1.2rem;line-height:1.5}
#join form{display:flex;gap:.6rem;flex-wrap:wrap}
#join input[type=email]{flex:1 1 12rem;min-width:0;padding:.65rem .8rem;font:inherit;font-size:1.15rem;color:var(--ink);background:var(--bg);border:1px solid var(--line)}
#join input[type=email]:focus{outline:2px solid var(--gold);outline-offset:2px}
#join .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
#join .btn{flex:0 0 auto}
#join .fine{margin:1rem 0 0;font-size:.95rem;color:var(--soft)}
#join .x{position:absolute;top:.4rem;right:.6rem;background:none;border:0;color:var(--soft);font:inherit;font-size:2rem;line-height:1;cursor:pointer;padding:.3rem .6rem}
#join .x:hover{color:var(--ink)}
@media (prefers-reduced-motion:no-preference){#join.on .card{animation:rise .9s ease-out both}}
.sold{color:var(--soft);font-style:italic}
.contact p{max-width:34rem}

/* lightbox */
#lb{position:fixed;inset:0;z-index:20;background:#0d0a08f2;display:none;align-items:center;justify-content:center;padding:1rem;cursor:zoom-out}
#lb.on{display:flex}#lb img{max-width:100%;max-height:100%}
@media (prefers-reduced-motion:no-preference){.hero .txt{animation:rise 1.6s ease-out both}@keyframes rise{from{opacity:0}to{opacity:1}}}
@media (max-width:520px){nav{flex-direction:column;gap:.4rem}.hero{margin-top:-5.6rem;height:calc(100svh - 5.6rem)}}

.sub{max-width:34rem;margin:6rem auto 0;padding:3rem 1.5rem 0;text-align:center;border-top:1px solid var(--line)}
.sub h2{margin:0 0 .6rem;font-weight:500;font-style:italic;font-size:2.2rem;color:var(--gold)}
.sub p{margin:0 0 1.4rem;font-size:1.2rem;line-height:1.5}
.sub form{display:flex;gap:.6rem;flex-wrap:wrap;position:relative}
.sub input[type=email]{flex:1 1 12rem;min-width:0;padding:.65rem .8rem;font:inherit;font-size:1.15rem;color:var(--ink);background:var(--bg2);border:1px solid var(--line)}
.sub input[type=email]:focus{outline:2px solid var(--gold);outline-offset:2px}
.sub .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.sub .fine{margin:1rem 0 0;font-size:.95rem;color:var(--soft)}

nav.solid{background:var(--bg);box-shadow:0 1px 0 var(--line)}