@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:block;
  src:url(instrument-serif.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:block;
  src:url(instrument-serif-italic.woff2) format('woff2')}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 600;font-display:swap;
  src:url(newsreader.woff2) format('woff2')}

:root{
  --paper:#ece7dc;
  --ink:#2b2721;
  --ink-soft:rgba(43,39,33,.58);
  --ink-faint:rgba(43,39,33,.36);
  --hairline:rgba(43,39,33,.14);
  --earth:#9a6a3e;
  --display:'Instrument Serif',"New York",Georgia,'Times New Roman',serif;
  --font:'Newsreader',"New York",Georgia,'Times New Roman',serif;
  --track-caps:.24em;
  --track-nav:.06em;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);font-weight:400;background:var(--paper);color:var(--ink);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
::selection{background:rgba(43,39,33,.85);color:var(--paper)}

/* the painted ground the whole page sits on */
.wash{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:url(bg-wash2.jpg) center top / cover no-repeat;
  opacity:.85;
}
.wash:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(236,231,220,.25) 0%,rgba(236,231,220,.72) 58%,var(--paper) 88%);
}

/* ---------------- top bar ---------------- */
.top{
  position:fixed;top:0;left:0;right:0;z-index:500;
  display:flex;flex-direction:column;align-items:center;gap:11px;
  padding-inline:clamp(16px,4vw,48px);padding-block:18px 64px;pointer-events:none;text-align:center;
}
.top>*{pointer-events:auto}
.top:before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(240,236,226,.94),rgba(240,236,226,.7) 48%,rgba(240,236,226,0));
  -webkit-backdrop-filter:blur(14px) saturate(.95);backdrop-filter:blur(14px) saturate(.95);
  -webkit-mask-image:linear-gradient(180deg,#000 46%,transparent);
  mask-image:linear-gradient(180deg,#000 46%,transparent);
}
.top .name{
  font-family:var(--display);font-size:clamp(24px,2.4vw,30px);letter-spacing:.01em;
  white-space:nowrap;line-height:1;
}
.top nav{
  display:flex;gap:clamp(14px,2vw,26px);font-size:15px;align-items:center;
  letter-spacing:var(--track-nav);font-weight:300;
}
.top nav a{color:var(--ink-soft);transition:color .2s}
.top nav a:hover,.top nav a[aria-current]{color:var(--ink)}
.top nav .top-socials{
  display:flex;align-items:center;gap:13px;margin-left:2px;padding-left:clamp(12px,1.6vw,20px);
  border-left:1px solid var(--hairline);
}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;padding:4px;color:var(--ink-soft);transition:color .2s}
.icon-btn:hover{color:var(--ink)}
.top .icon-btn svg{width:16px;height:16px;display:block}
@media (max-width:640px){
  .top{padding-inline:12px;padding-block:13px 50px;gap:8px}
  .top .name{font-size:20px}
  .top nav{gap:11px;font-size:13px}
  .top nav .top-socials{gap:9px;padding-left:10px}
  .top .icon-btn{padding:2px}
  .top .icon-btn svg{width:14px;height:14px}
}

/* ---------------- hero ---------------- */
.hero{
  position:relative;display:grid;justify-items:center;align-content:center;
  min-height:100svh;overflow-anchor:none;
  padding:clamp(112px,13svh,152px) 0 clamp(72px,10svh,120px);
}
.botany{
  position:absolute;bottom:0;width:clamp(120px,15vw,250px);opacity:.5;
  pointer-events:none;user-select:none;z-index:0;
}
.botany.l{left:clamp(-40px,-1vw,0px);bottom:2%}
.botany.r{right:clamp(-30px,0vw,10px);bottom:-2%;width:clamp(100px,12vw,200px)}
@media (max-width:900px){.botany{display:none}}

.hero-kicker{
  font-size:12px;font-weight:400;letter-spacing:var(--track-caps);text-align:center;
  color:var(--ink-soft);margin:0 0 clamp(22px,3.4vh,40px);text-transform:uppercase;
}
.hero-down{
  position:absolute;bottom:30px;left:50%;transform:translateX(-50%);border:0;background:transparent;
  padding:10px 14px;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;
  animation:cue-breathe 2.6s ease-in-out infinite;z-index:3;
}
.hero-down:hover{animation:none;opacity:1}
@keyframes cue-breathe{0%,100%{opacity:.15}50%{opacity:.7}}
@media (prefers-reduced-motion:reduce){.hero-down{animation:none;opacity:.5}}

/* ---------------- sketchbook ---------------- */
.hero,.hero *{-webkit-user-select:none;-moz-user-select:none;user-select:none}
.hero img{-webkit-user-drag:none;user-drag:none}
.sb-wrap{display:grid;justify-items:center;gap:20px;width:100%;position:relative;z-index:2}
.sb-stage{
  display:flex;align-items:center;justify-content:center;width:100%;
  position:relative;
  touch-action:pan-y;
}
.sb-arrow{
  flex:none;display:inline-flex;align-items:center;justify-content:center;padding:6px 2px;
  border:0;background:transparent;color:var(--ink-faint);cursor:pointer;transition:color .2s;
  -webkit-tap-highlight-color:transparent;z-index:8;
}
.sb-arrow:hover{color:var(--ink)}

/* The box is the book's own untransformed frame: the loupe lives here, on
   the desk, while only .sb-tilt leans and scales underneath it. */
.sb-3d{
  position:relative;flex:1 1;min-width:0;max-width:min(1100px,76vw,118vh);
  perspective:1750px;perspective-origin:50% 46%;
  --zpad:280px;
}
.sb-tilt{
  position:relative;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--zoom,1));
  will-change:transform;
}
.sb-book{position:relative;width:100%;aspect-ratio:1760/1240;transform-style:preserve-3d;z-index:1}

/* The book sits on a surface, so its shadow is a soft pool underneath —
   no box, no filter on the artwork, nothing with an edge of its own.
   Both blobs fade to zero well inside their own bounds, and both ease
   off while a leaf is in the air. */
.sb-cast{position:absolute;pointer-events:none;z-index:0}
.sb-cast.ambient{
  left:5%;right:5%;top:27%;bottom:2%;
  background:radial-gradient(50% 50% at 50% 58%,
    rgba(58,44,26,.34) 0%,rgba(58,44,26,.19) 40%,rgba(58,44,26,0) 74%);
  filter:blur(26px);
  opacity:calc(1 - var(--shade,0) * .42);
}
.sb-cast.contact{
  left:9%;right:9%;top:62%;bottom:10%;
  background:radial-gradient(50% 44% at 50% 42%,
    rgba(44,32,14,.40) 0%,rgba(44,32,14,.17) 48%,rgba(44,32,14,0) 78%);
  filter:blur(11px);
  opacity:calc(1 - var(--shade,0) * .5);
}
.sb-cast.hair{
  left:12%;right:12%;top:70%;bottom:17%;
  background:radial-gradient(50% 52% at 50% 40%,
    rgba(40,28,10,.34) 0%,rgba(40,28,10,0) 76%);
  filter:blur(4px);
  opacity:calc(1 - var(--shade,0) * .62);
}
.sb-full{position:absolute;inset:0}
.sb-full img{width:100%;height:auto;display:block}
.sb-half{position:absolute;top:0;bottom:0;width:50%;overflow-x:clip;overflow-y:visible}
.sb-half.left{left:0}
.sb-half.right{left:50%}
.sb-half-img{width:200%;max-width:none;height:auto;display:block}
.sb-half-img.right{margin-left:-100%}
/* the shadow the lifting leaf throws onto the page beneath it */
.gutter-shade{
  position:absolute;top:var(--pg,21.8%);bottom:var(--pg,21.8%);width:46%;
  pointer-events:none;opacity:calc(var(--shade,0) * .62);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 5.2%,#000 94.8%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 5.2%,#000 94.8%,transparent 100%);
}
.gutter-shade.left{right:0;background:linear-gradient(270deg,rgba(52,38,20,.30),rgba(52,38,20,0) 82%)}
.gutter-shade.right{left:0;background:linear-gradient(90deg,rgba(52,38,20,.24),rgba(52,38,20,0) 82%)}

/* ---- the turning leaf: nested strips forming a curved surface ---- */
.curl{
  position:absolute;top:0;height:100%;
  width:calc(var(--bw,0px) * var(--span));
  transform-style:preserve-3d;z-index:6;
}
.curl.next{left:50%;transform-origin:left center;transform:rotateY(calc(-1 * var(--tt,0deg)))}
.curl.prev{right:50%;transform-origin:right center;transform:rotateY(var(--tt,0deg))}
.strip{
  position:absolute;top:0;height:100%;
  width:calc(var(--bw,0px) * var(--span) / var(--n));
  transform-style:preserve-3d;
}
.curl.next .strip{transform-origin:left center}
.curl.prev .strip{transform-origin:right center}
.curl.next>.strip{left:0}
.curl.prev>.strip{right:0;left:auto}
.curl.next .strip .strip{left:100%;transform:rotateY(var(--td,0deg))}
.curl.prev .strip .strip{right:100%;transform:rotateY(calc(-1 * var(--td,0deg)))}
.face{
  position:absolute;top:0;bottom:0;left:0;right:-1.1px;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background-repeat:no-repeat;background-size:var(--bw,0px) auto;
}
.face.back{transform:rotateY(180deg)}
.face .sh,.face .gl{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 5.2%,#000 94.8%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 5.2%,#000 94.8%,transparent 100%);
}
.strip.edge .face .sh,.strip.edge .face .gl{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%),var(--hf);
  mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%),var(--hf);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
.curl.next .strip.edge .face.front,.curl.prev .strip.edge .face.back{
  --hf:linear-gradient(90deg,#000 0 22%,transparent 96%);
}
.curl.next .strip.edge .face.back,.curl.prev .strip.edge .face.front{
  --hf:linear-gradient(270deg,#000 0 22%,transparent 96%);
}
.face .sh{position:absolute;left:0;right:0;top:var(--pg,21.8%);bottom:var(--pg,21.8%);pointer-events:none}
.curl.next .face.front .sh,.curl.prev .face.back .sh{
  background:linear-gradient(90deg,rgba(58,43,20,var(--a1,0)),rgba(58,43,20,var(--a2,0)));
}
.curl.next .face.back .sh,.curl.prev .face.front .sh{
  background:linear-gradient(90deg,rgba(58,43,20,var(--a2,0)),rgba(58,43,20,var(--a1,0)));
}
.face .gl{
  position:absolute;left:0;right:0;top:var(--pg,21.8%);bottom:var(--pg,21.8%);
  pointer-events:none;background:#fffaf0;
  opacity:calc(var(--shade,0) * var(--lit,1) * var(--lit,1) * .20);
}

/* ---- the loupe: a real magnifier lying on the page.  Pick it up and
       drag it across the book; it stays where you put it. ---- */
.loupe{
  position:absolute;left:0;top:0;
  width:var(--lr,270px);height:var(--lr,270px);
  pointer-events:none;z-index:80;opacity:0;
  transition:opacity .25s ease;
  will-change:transform;
}
.loupe.on{opacity:1}
.loupe.held .ring{cursor:grabbing}
.loupe .ring{
  position:absolute;inset:0;border-radius:50%;
  pointer-events:auto;cursor:grab;
  padding:calc(var(--lr,270px) * .058);
  box-shadow:
    0 1px 2px rgba(58,44,26,.30),
    0 10px 18px rgba(58,44,26,.24),
    0 26px 40px rgba(58,44,26,.20),
    0 48px 66px rgba(58,44,26,.13);
}
/* the bezel is an annulus, so the glass really is see-through */
.loupe .ring:before{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:linear-gradient(146deg,
    #fdf7e9 0%,#e6d7b4 14%,#b69d70 32%,#7d6740 50%,
    #cdbb92 66%,#f4ead3 80%,#9b8459 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.8),
    inset 0 -2px 3px rgba(70,52,26,.5);
  -webkit-mask-image:radial-gradient(circle closest-side at 50% 50%,transparent 0 88.2%,#000 89.8% 100%);
  mask-image:radial-gradient(circle closest-side at 50% 50%,transparent 0 88.2%,#000 89.8% 100%);
}
/* the handle, drawn before the bezel so the ring covers its inner end */
.loupe .grip{
  position:absolute;left:50%;top:50%;
  width:calc(var(--lr,270px) * .74);height:calc(var(--lr,270px) * .125);
  transform-origin:0 50%;
  transform:rotate(40deg) translate(calc(var(--lr,270px) * .33),-50%);
  border-radius:calc(var(--lr,270px) * .06);
  pointer-events:auto;cursor:grab;
  background:
    linear-gradient(180deg,rgba(255,255,255,.46) 0 13%,rgba(255,255,255,0) 44%,
                    rgba(0,0,0,.26) 100%),
    linear-gradient(90deg,#d9bd82 0 14%,#a9884e 14% 20%,#6d4c2b 20% 62%,
                    #5a3d22 62% 92%,#7a563180 92% 100%);
  box-shadow:0 8px 15px rgba(58,44,26,.26),0 18px 26px rgba(58,44,26,.14);
}
.lens{
  position:relative;display:block;width:100%;height:100%;border-radius:50%;
  background-repeat:no-repeat;overflow:hidden;
  box-shadow:
    inset 0 0 0 1px rgba(52,40,22,.55),
    inset 0 4px 12px rgba(40,30,14,.28),
    inset 0 -7px 16px rgba(255,250,240,.14);
}
.lens .mag{display:none}
/* A second copy of the book, sitting beside the glass outside the tilt, and
   scaled about whichever page point the glass is currently over.  Padded out
   past the book's own edges so the circular mask never gets clipped by this
   box while the glass rests half off the page. */
.zoomwrap{
  position:absolute;inset:calc(var(--zpad) * -1);overflow:hidden;pointer-events:none;z-index:2;
  opacity:0;
}
.zoominner{position:absolute;inset:var(--zpad);transform-origin:0 0}
.lens:before,.lens:after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none}
.lens:before{z-index:1}
.lens:after{z-index:2}
/* the glass bends and darkens toward its rim, with a faint colour fringe */
.lens:before{
  background:radial-gradient(circle at 50% 50%,
    rgba(0,0,0,0) 54%,rgba(58,44,26,.10) 76%,rgba(46,34,16,.34) 100%);
  box-shadow:
    inset 0 0 0 2px rgba(130,162,196,.26),
    inset 0 0 0 4px rgba(206,158,112,.15);
}
/* the dome: one broad specular and a tight crescent opposite it */
.lens:after{
  background:
    radial-gradient(36% 26% at 29% 19%,rgba(255,255,255,.30),rgba(255,255,255,0) 76%),
    radial-gradient(24% 16% at 74% 86%,rgba(255,255,255,.12),rgba(255,255,255,0) 80%),
    linear-gradient(150deg,rgba(255,255,255,.06) 0 18%,rgba(255,255,255,0) 42%);
}

/* ---- controls ---- */
.sb-tools{
  display:flex;align-items:center;gap:6px;
  border:1px solid var(--hairline);border-radius:999px;
  padding:5px 7px;background:rgba(250,246,238,.62);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.tool{
  width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;background:transparent;color:var(--ink-soft);
  cursor:pointer;transition:background-color .18s ease,color .18s ease;
}
.tool:hover{background:rgba(255,252,244,.9);color:var(--ink)}
.tool[aria-pressed="true"]{background:rgba(154,106,62,.16);color:var(--earth)}
.tool:disabled{opacity:.32;cursor:default;background:transparent}
.tool svg{width:15px;height:15px;display:block}
.tool-sep{width:1px;height:17px;background:var(--hairline);margin:0 2px}
.zoom-read{
  font-size:11px;letter-spacing:.1em;color:var(--ink-faint);
  min-width:40px;text-align:center;font-variant-numeric:tabular-nums;
}
@media (pointer:coarse){.loupe{display:none}}

.sb-zone{position:absolute;top:0;bottom:0;border:0;background:transparent;cursor:grab;z-index:60;-webkit-tap-highlight-color:transparent}
.sb-zone:active{cursor:grabbing}
.sb-prev{left:0;width:50%}
.sb-next{right:0;width:50%}

.sb-captions{display:grid;justify-items:center}
.sb-captions>*{grid-area:1/1;margin:0}
.sb-captions{top:60px;position:absolute;width:100%;}
.sb-caption{font-size:15px;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-soft);
  animation:sb-cap-in .5s ease both}
.sb-caption.live{animation:none}
@keyframes sb-cap-in{0%{opacity:0}}
@keyframes sb-cap-out{to{opacity:0}}
.sb-hint{
  margin:0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
  transition:opacity .4s ease;
}
.sb-hint.gone{opacity:0}
/* handwritten-feeling caption laid over a page, to sit alongside the painted art */
.sb-page-text{
  position:absolute;left:0;width:50%;top:50%;transform:translateY(-50%);
  margin:0;z-index:2;pointer-events:none;
  padding:0 9%;text-align:center;
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(15px,1.75vw,22px);line-height:1.32;
  color:var(--ink-soft);
  text-shadow:0 1px 0 rgba(255,252,244,.55);
}
.sb-page-text.right{left:50%}
.sb-half .sb-page-text{width:100%;left:0}
.sb-half.right .sb-page-text{left:0}
@media (max-width:640px){
  .sb-page-text{font-size:12.5px;padding:0 7%}
}
.sb-wrap.intro .sb-full img,.sb-wrap.intro .sb-half-img{filter:url(#sb-mblur-1)}
.sb-wrap.intro.b2 .sb-full img,.sb-wrap.intro.b2 .sb-half-img{filter:url(#sb-mblur-2)}
.sb-wrap.intro .sb-caption{animation:none}
.sb-wrap.intro .sb-caption.cap-out{display:none}
@media (max-width:640px){
  .hero-kicker{font-size:10.5px;letter-spacing:.16em}
  .sb-wrap{width:100vw;margin-inline:calc(50% - 50vw)}
  .sb-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:70;padding:12px 6px}
  .sb-arrow.left{left:2px}
  .sb-arrow.right{right:2px}
  .sb-3d{max-width:none}
  .sb-hint{font-size:9.5px;letter-spacing:.1em;padding:0 16px;text-align:center}
}

/* ---------------- painted rules + sections ---------------- */
.rule{
  display:block;width:min(1080px,86vw);margin:clamp(30px,6vh,64px) auto;
  height:clamp(26px,4vw,46px);
  background:url(divider.png) center / 100% auto no-repeat;
  opacity:.5;
}
.rule.short{width:min(420px,52vw);opacity:.4}
.section-label{
  font-size:11px;letter-spacing:var(--track-caps);text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 18px;
}
.about{
  position:relative;max-width:1080px;margin:0 auto;
  padding:0 clamp(20px,5vw,48px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,5vw,60px);align-items:start;
}
.bio{font-size:clamp(17px,1.7vw,20px);line-height:1.74;letter-spacing:.005em;margin:0;font-weight:300;max-width:56ch}
.bio-link{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(43,39,33,.28);
  text-underline-offset:4px;transition:text-decoration-color .2s}
.bio-link:hover{text-decoration-color:var(--ink)}
.bloom{width:clamp(150px,17vw,260px);opacity:.9;user-select:none;align-self:center}
@media (max-width:760px){
  .about{grid-template-columns:1fr}
  .bloom{width:170px;justify-self:center}
}

.contact{max-width:1080px;margin:0 auto;padding:0 clamp(20px,5vw,48px)}
.contact-social{
  margin:20px 0 0;display:flex;flex-wrap:wrap;gap:22px;
  font-size:12px;letter-spacing:var(--track-caps);text-transform:uppercase;
}
.about .bio + .bio{margin-top:1.1em}

.plates{max-width:1080px;margin:0 auto;padding:0 clamp(20px,5vw,48px)}
.plate-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--hairline)}
.plate{
  display:grid;grid-template-columns:3.4em minmax(0,1fr) auto;gap:18px;align-items:baseline;
  width:100%;padding:15px 4px;border:0;border-bottom:1px solid var(--hairline);
  background:transparent;text-align:left;cursor:pointer;color:inherit;
  transition:background-color .22s ease,padding-left .22s ease;
}
.plate:hover,.plate[aria-current="true"]{background:rgba(255,252,244,.5);padding-left:12px}
.plate .n{font-size:12px;color:var(--ink-faint);letter-spacing:var(--track-nav)}
.plate .t{font-family:var(--display);font-size:clamp(19px,2.1vw,26px)}
.plate .p{font-size:12.5px;color:var(--ink-faint);letter-spacing:.08em;text-transform:uppercase;text-align:right}
.plate[aria-current="true"] .p{color:var(--earth)}

.foot{font-size:11.5px;letter-spacing:var(--track-caps);text-transform:uppercase;
  color:var(--ink-faint);text-align:center;margin-top:clamp(48px,7vh,84px);padding-bottom:44px}