/* Layout concept: the logo stretched wide. Paper, black hairlines and leaves at the page edges, with the art hung on center. */
:root{
  --page:#E5E2D9; --mat:#EFECE4; --ink:#141412; --soft:#4F4D46; --sage:#4A564E; --leaf:#7C877D; --cream:#F2EDE1; --rule:rgba(20,20,18,.3);
  --shadow:rgba(30,28,22,.3);
  --display:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --text:"Jost","Avenir Next",Avenir,"Century Gothic",system-ui,sans-serif;
  --in:10px; --measure:58ch; --head:106px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font:400 1.09rem/1.7 var(--text);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
a:focus-visible,button:focus-visible{outline:2px solid var(--sage);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:500;font-variation-settings:"opsz" 28;line-height:1.14;text-wrap:balance;margin:0;color:var(--ink)}
h1{font-size:clamp(2.3rem,5vw,3.75rem)}
h2{font-size:clamp(1.7rem,3vw,2.4rem)}
h3{font-size:1.3rem}
p{margin:0}
.wrap{position:relative;z-index:1;max-width:1240px;margin-inline:auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.label{font-size:.74rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--sage)}
.lede{font-size:1.2rem;line-height:1.55;max-width:42ch;color:var(--soft)}
.prose{display:grid;gap:1.1em;max-width:var(--measure);justify-items:center;text-align:center;margin-inline:auto}
.prose p{color:var(--soft)}

.top{position:relative;z-index:2}
.top .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding-block:16px}
.logo-link{grid-column:2;display:block}
.logo{display:block;height:74px;width:auto}
.nav{grid-column:3;justify-self:end;display:flex;gap:26px;font-size:.78rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.nav a{text-decoration:none;padding-block:4px;border-bottom:1px solid transparent;white-space:nowrap}
.nav a:hover,.nav a[aria-current]{border-bottom-color:var(--ink)}
.burger,.close{display:none;width:52px;height:52px;border-radius:50%;border:1px solid var(--ink);background:transparent;color:var(--ink);padding:0;cursor:pointer;place-items:center}
.burger svg,.close svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round}

.leafy{position:relative;overflow:hidden}
.hero,.page-top{margin-top:calc(-1*var(--head));padding-top:var(--head)}
body:has(.hero) .logo-link{visibility:hidden}
.bot{position:absolute;pointer-events:none;user-select:none;height:auto;z-index:0}
.bot.tl{top:0;left:0;width:var(--tl)}
.bot.tr{top:calc(var(--head) - 24px);right:0;width:var(--tr)}
.bot.bl{bottom:0;left:0;width:var(--bl)}
.bot.br{bottom:0;right:0;width:var(--br)}
.hero{--tl:clamp(170px,22vw,330px);--tr:clamp(120px,16vw,250px);--bl:clamp(190px,26vw,400px);--br:clamp(130px,19vw,290px)}
.hero{border-bottom:1px solid var(--rule)}
.hero .wrap{display:grid;gap:22px;justify-items:center;text-align:center;padding-block:clamp(30px,5vw,72px) clamp(56px,8vw,110px)}
.lock{width:min(430px,100%);margin-bottom:10px}
.page-top{--tl:clamp(110px,14vw,210px);--tr:clamp(90px,12vw,180px)}
.page-top>.wrap{padding-top:clamp(20px,3vw,36px)}

.btn{display:inline-block;background:var(--sage);color:var(--cream);text-decoration:none;font-size:.8rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;line-height:1.3;padding:16px 32px;border:1px solid var(--sage);text-align:center;transition:background .2s,color .2s}
.btn:hover{background:transparent;color:var(--sage)}
.more{font-size:.78rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase}

.section{padding-block:clamp(44px,6vw,76px)}
.section.page-top{padding-top:var(--head)}
.section+.section{border-top:1px solid var(--rule)}
.head{display:grid;justify-items:center;text-align:center;gap:12px;margin-bottom:clamp(32px,5vw,56px)}
.head>div{display:grid;gap:10px;justify-items:center;min-width:0}
.head h2{display:grid;grid-template-columns:minmax(16px,64px) auto minmax(16px,64px);gap:16px;align-items:end;line-height:1.1}
.head h2::before,.head h2::after{content:"";height:1px;background:var(--ink);margin-bottom:.14em}

.wall{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(40px,5vw,72px) clamp(32px,5vw,72px)}
.hang{display:grid;gap:12px;justify-items:start;width:max(11rem,calc(var(--w)*var(--in)));max-width:100%;text-decoration:none}
.hang img{width:calc(var(--w)*var(--in));box-shadow:4px 7px 14px var(--shadow);transition:transform .25s}
.hang:hover img{transform:translateY(-3px)}
.cap{display:grid;gap:1px;font-size:.92rem;line-height:1.35;min-width:0}
.cap b{font-family:var(--display);font-weight:500;font-variation-settings:"opsz" 11;font-size:1.1rem;color:var(--ink)}
.cap span{color:var(--soft)}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;padding:0;margin:0;list-style:none;counter-reset:s;text-align:center}
.steps li{display:grid;gap:8px;align-content:start;justify-items:center;counter-increment:s;min-width:0}
.steps li::before{content:counter(s);font-family:var(--display);font-variation-settings:"opsz" 28;font-size:2.2rem;line-height:1;color:var(--sage)}
.steps p{color:var(--soft)}

.piece{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start;padding-block:clamp(20px,4vw,48px)}
.mat{background:var(--mat);padding:clamp(28px,6vw,72px);display:grid;place-items:center}
.mat img{width:min(100%,var(--shown));max-height:76vh;object-fit:contain;box-shadow:5px 9px 18px var(--shadow)}
.gallery{display:grid;gap:14px;min-width:0}
.thumbs{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.thumb{display:grid;gap:5px;justify-items:center;text-decoration:none;font-size:.85rem;color:var(--soft);padding:6px;border:1px solid transparent}
.thumb img{height:76px;width:auto}
.thumb[aria-current]{border-color:var(--ink);color:var(--ink)}
.info{display:grid;gap:22px;min-width:0}
.info h1{font-size:clamp(1.9rem,3.4vw,2.7rem)}
.by{font-size:1.1rem;color:var(--soft);margin-top:8px}
.facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 20px;margin:0;padding-block:16px;border-block:1px solid var(--rule);font-size:.98rem}
.facts dt{color:var(--sage)}
.facts dd{margin:0}
.ask{display:grid;gap:10px;justify-items:start}
.ask small{font-size:.92rem;color:var(--soft);line-height:1.45}
.crumb{padding-top:12px;font-size:.92rem}
.crumb a{color:var(--soft)}

.foot{--bl:clamp(170px,19vw,280px);--br:clamp(120px,14vw,200px);border-top:1px solid var(--rule)}
.foot .wrap{display:grid;gap:10px;justify-items:center;text-align:center;padding-block:44px 52px}
.foot .ig{display:block;width:28px;height:28px;color:var(--ink)}
.foot .ig svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5}
.foot a.mail{color:var(--soft);font-size:.98rem}
.foot small{font-size:.88rem;color:var(--soft)}

@media (max-width:980px){
  :root{--in:7px;--head:96px}
  .logo{height:64px}
  .burger,.close{display:grid}
  .burger{grid-column:3;justify-self:end}
  .nav{position:fixed;inset:0;justify-self:stretch;align-self:stretch;z-index:20;display:none;flex-direction:column;align-items:center;justify-content:center;gap:32px;background:var(--page);font-size:1.15rem;letter-spacing:.14em;font-weight:400;padding:env(safe-area-inset-top,0px) 24px env(safe-area-inset-bottom,0px)}
  .nav.open{display:flex}
  .close{position:absolute;top:calc(env(safe-area-inset-top,0px) + 22px);right:max(24px,env(safe-area-inset-right,0px))}
  .piece,.steps{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .hero{--tl:128px;--tr:96px;--bl:156px;--br:104px}
  .hero .wrap{padding-block:64px 176px}
  .page-top{--tl:92px;--tr:74px}
  .page-top>.wrap{padding-top:40px}
  .foot{--bl:128px;--br:88px}
  .foot .wrap{padding-bottom:128px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}