:root{
  --paper:#f8f4ea; --paper-deep:#efe8d8; --ink:#1d2a21; --ink-soft:#4b584f;
  --green:#32743c; --green-deep:#265a2f; --moss:#7fa585; --rule:rgba(30,42,35,.2);
  --serif:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --sans:"Barlow",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --gut:clamp(20px,4vw,56px); --frame:10px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper) url(../assets/paper.jpg) repeat;background-size:700px;color:var(--ink);font:400 18px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;border:var(--frame) solid var(--green);pointer-events:none;z-index:50}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-color:rgba(30,42,35,.35);text-underline-offset:.2em;text-decoration-thickness:1.5px}
a:hover{text-decoration-color:var(--green)}
:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.skip{position:absolute;left:-999px;top:12px;background:var(--paper);padding:8px 14px;z-index:60}
.skip:focus{left:calc(var(--frame) + 12px)}
.wrap{padding-inline:calc(var(--gut) + var(--frame));max-width:1360px;margin-inline:auto}
.narrow{max-width:800px;margin-inline:0;margin-left:max(0px,calc((100vw - 1360px)/2));}

/* header */
.top{display:flex;justify-content:space-between;align-items:baseline;gap:16px 32px;flex-wrap:wrap;padding:calc(var(--frame) + 22px) calc(var(--gut) + var(--frame)) 18px;max-width:1360px;margin-inline:auto}
.mark{font:500 28px/1 var(--serif);letter-spacing:.02em;text-decoration:none;letter-spacing:.005em}
.top nav{display:flex;gap:6px 28px;flex-wrap:wrap;font:500 17px/1 var(--sans)}
.top nav a{text-decoration:none;padding:8px 0;border-bottom:2px solid transparent}
.top nav a:hover{border-color:var(--moss)}
.top nav a[aria-current]{border-color:var(--green)}

/* hero */
.hero{margin:0 calc(var(--gut) + var(--frame));max-width:1360px;margin-inline:auto;padding-inline:calc(var(--gut) + var(--frame))}
.hero img{width:100%;aspect-ratio:16/8.4;max-height:74vh;object-fit:cover;box-shadow:0 0 0 1px var(--rule),0 18px 40px -26px rgba(30,42,35,.55)}
.intro{padding-block:36px 24px;display:grid;grid-template-columns:1fr;gap:6px}
.intro h1{font:500 clamp(56px,9vw,120px)/.92 var(--serif);letter-spacing:-.015em;margin:0}
.intro p{margin:0;font-size:clamp(19px,2vw,24px);color:var(--ink-soft);max-width:52ch}
.links{display:flex;gap:10px 28px;flex-wrap:wrap;font:500 16px/1.4 var(--sans);margin-top:14px!important}
.links a{padding:4px 0}

.blk{padding-block:56px 8px}
.blk-h{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-top:2px solid var(--green);padding-top:14px;margin-bottom:26px}
.blk-h h2,.sub,.series-h h2{font:500 clamp(34px,4vw,50px)/1.05 var(--serif);margin:0;letter-spacing:-.005em}
.blk-h a{font:500 16px var(--sans)}

/* pages */
.page-h{font:500 clamp(54px,7.5vw,96px)/.95 var(--serif);letter-spacing:-.015em;margin:28px 0 14px}
.lede{font-size:clamp(19px,2vw,23px);color:var(--ink-soft);margin:0 0 34px;max-width:40ch}
.note{font:400 16px/1.5 var(--sans);border-left:3px solid var(--green);padding:4px 0 4px 14px;margin:-12px 0 32px;max-width:62ch;color:var(--ink-soft)}
.sub{margin:64px 0 24px;border-top:2px solid var(--green);padding-top:14px}
.prose p{max-width:58ch;margin:0 0 1.1em;font-size:clamp(19px,2vw,22px);line-height:1.6}
.bigmail{font:500 clamp(34px,6vw,72px)/1.1 var(--serif);margin:0 0 40px;overflow-wrap:anywhere}

/* video */
.vgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:40px 28px}
.vgrid.three{grid-template-columns:repeat(3,1fr)}
.vgrid.vert{grid-template-columns:repeat(4,1fr)}
.vid h3{font:500 25px/1.15 var(--serif);margin:12px 0 2px}
.vid p{font:400 15.5px/1.45 var(--sans);color:var(--ink-soft);margin:0}
.lock{display:inline-block;margin-left:6px;padding:0 8px;border:1.5px solid var(--green);font-size:13px;color:var(--green)}
.vid-btn{all:unset;display:block;width:100%;cursor:pointer}
.vid-btn:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.vid-poster{display:grid;place-items:center;position:relative;aspect-ratio:var(--r);width:100%;background:var(--green) center/cover no-repeat;color:var(--paper);overflow:hidden}
.vid-btn:hover .play{transform:scale(1.08)}
.play{transition:transform .2s;filter:drop-shadow(0 1px 6px rgba(0,0,0,.45))}
.vid-note{position:absolute;left:0;right:0;bottom:22px;text-align:center;font:500 14px var(--sans)}
.vid iframe{display:block;width:100%;aspect-ratio:var(--r);border:0;background:#000}

/* photography */
.idx{display:flex;flex-wrap:wrap;gap:8px 26px;font:500 16px var(--sans);margin:0 0 20px}
.series{padding-top:56px;scroll-margin-top:10px}
.series-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 24px;border-top:2px solid var(--green);padding-top:14px;margin-bottom:26px}
.series-h p{margin:0;font:400 16px var(--sans);color:var(--ink-soft)}
.pgrid{column-count:3;column-gap:16px}
.ph{margin:0 0 16px;break-inside:avoid}
.ph button{all:unset;display:block;cursor:zoom-in;width:100%}
.ph button:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.ph img{width:100%;height:auto;background:var(--paper-deep)}
.covs{display:grid;grid-template-columns:1fr 1fr;gap:28px 24px}
.cov{text-decoration:none;display:block}
.cov img{aspect-ratio:4/5;width:100%;object-fit:cover}
.cov span{display:block;font:500 16px/1.35 var(--sans);margin-top:10px}
.cov:hover span{text-decoration:underline;text-decoration-color:var(--green)}

dialog#lb{border:0;padding:0;max-width:none;max-height:none;width:100vw;height:100vh;background:rgba(24,32,27,.95);color:var(--paper);overflow:hidden}
dialog#lb::backdrop{background:rgba(24,32,27,.95)}
#lb img{position:absolute;inset:56px 72px 56px;width:calc(100% - 144px);height:calc(100% - 112px);object-fit:contain;margin:0}
#lb button{position:absolute;background:none;border:0;color:var(--paper);font:500 16px var(--sans);padding:12px 14px;cursor:pointer}
#lb button:hover{text-decoration:underline}
.lb-x{top:8px;right:8px}.lb-p{left:2px;top:50%}.lb-n{right:2px;top:50%}
.lb-c{position:absolute;left:0;right:0;bottom:14px;text-align:center;margin:0;font:400 15px var(--sans);opacity:.85}

/* footer */
.foot{position:relative;margin-top:110px;padding:0 0 calc(var(--frame) + 56px)}
.foot::before{content:"";display:block;height:2px;background:var(--green);margin:0 calc(var(--gut) + var(--frame)) 56px;margin-inline:auto}
body{overflow-x:hidden}
.foot-in{position:relative;z-index:1}
.tower{position:absolute;right:calc(max(0px,(100vw - 1360px)/2) + var(--gut) + var(--frame));bottom:calc(var(--frame) + 10px);height:400px;width:auto;opacity:.9;pointer-events:none}
.foot-line{font:500 clamp(32px,4vw,46px)/1.1 var(--serif);margin:0 0 20px}
.contact-list{list-style:none;padding:0;margin:0;display:grid;gap:10px;font:500 16.5px var(--sans)}
.contact-list li{display:flex;align-items:center;gap:12px}
.contact-list img{width:22px;height:22px}

@media (max-width:1000px){
  .vgrid.three{grid-template-columns:1fr 1fr}.vgrid.vert{grid-template-columns:repeat(3,1fr)}.pgrid{column-count:2}.covs{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  :root{--frame:6px;--gut:18px}
  body{font-size:17px}
  .vgrid,.vgrid.three{grid-template-columns:1fr}.vgrid.vert{grid-template-columns:1fr 1fr}
  .pgrid{column-gap:10px}.ph{margin-bottom:10px}
  .hero img{aspect-ratio:4/3}
  .tower{height:260px;opacity:.7;right:var(--gut)}
  #lb img{inset:52px 8px 60px;width:calc(100% - 16px)}
  .lb-p{top:auto;bottom:6px;left:6px}.lb-n{top:auto;bottom:6px;right:6px}
}

.top,main,.foot{position:relative;z-index:1}
.climber{position:fixed;z-index:0;top:var(--frame);right:clamp(24px,7vw,150px);width:clamp(120px,13vw,190px);height:auto;pointer-events:none;
  filter:drop-shadow(1.5px 1.5px 0 rgba(255,255,255,.85)) drop-shadow(-1px -1px 0 rgba(60,50,30,.10))}
.tower{height:560px!important;bottom:0!important;filter:drop-shadow(1.5px 1.5px 0 rgba(255,255,255,.8)) drop-shadow(-1px -1px 0 rgba(60,50,30,.08));opacity:1!important}
@media (max-width:640px){.climber{width:96px;right:12px}.tower{height:340px!important}}
.climber{--cw:clamp(110px,12vw,170px);width:var(--cw);right:calc(var(--frame) - var(--cw)*.095)!important}
@media (max-width:640px){.climber{--cw:96px}}
.tower{height:430px!important}
.foot{margin-top:130px}
@media (max-width:640px){.tower{height:300px!important}.foot{margin-top:90px}}

/* about: bio with the worm running down the right */
.about-rows{position:relative;max-width:1060px;margin-top:8px;padding-bottom:70px}
.ab-row{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:0 64px;margin-bottom:56px;min-height:190px}
.ab-row p{margin:0;max-width:58ch;font-size:clamp(19px,2vw,21.5px);line-height:1.6}
.ab-row:first-child p::first-line{font-weight:500}
.worm{position:absolute;top:0;right:0;width:300px;height:100%;overflow:visible;opacity:.62;pointer-events:none}
.worm .body{fill:var(--green)}
.worm .parts{stroke:var(--green);fill:none;stroke-linejoin:round}
.worm .ink,.worm .ink *{fill:none}
.worm .glove,.worm .glove *{fill:#fbf8f1}
.worm .dot{fill:var(--green)}
.worm .waver{transform-box:fill-box;transform-origin:0% 100%}
@media (prefers-reduced-motion:no-preference){
  .worm .waver{animation:wave 2.6s ease-in-out infinite}
  @keyframes wave{0%,60%,100%{transform:rotate(0)}70%{transform:rotate(-10deg)}80%{transform:rotate(6deg)}90%{transform:rotate(-6deg)}}
}
@media (max-width:820px){
  .worm{display:none}
  .ab-row{grid-template-columns:1fr;min-height:0;margin-bottom:28px}
  .about-rows{padding-bottom:0}
}

/* home: selected-work carousel */
.car{position:relative}
.car-track{list-style:none;margin:0;padding:4px 2px 18px;display:grid;grid-auto-flow:column;grid-auto-columns:clamp(260px,31%,420px);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--moss) transparent;overscroll-behavior-x:contain}
.car-track::-webkit-scrollbar{height:6px}
.car-track::-webkit-scrollbar-thumb{background:var(--moss);border-radius:3px}
.car-track:focus-visible{outline:3px solid var(--green);outline-offset:4px}
.car-item{scroll-snap-align:start}
.car-btn{position:absolute;top:calc((min(31vw,420px) * 9 / 16) / 2 - 22px);z-index:2;width:44px;height:44px;border-radius:50%;border:2px solid var(--green);background:var(--paper);color:var(--green);display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 16px -10px rgba(30,42,35,.6)}
.car-btn:hover{background:var(--green);color:var(--paper)}
.car-btn.prev{left:-14px}.car-btn.next{right:-14px}
.car-btn[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.car-track{scroll-behavior:auto}}
@media (max-width:1000px){.car-track{grid-auto-columns:clamp(240px,46%,420px)}.car-btn{top:calc((46vw * 9 / 16) / 2 - 22px)}}
@media (max-width:640px){.car-track{grid-auto-columns:82%;gap:14px}.car-btn{display:none}}
.hero img{object-position:50% 58%}
/* home album covers: always a 2 x 2 block; wider screens get a shorter frame so the block stays compact */
@media (min-width:1001px){.cov img{aspect-ratio:3/2}}
@media (min-width:1001px){.cov[href$="#slow-life"] img{object-position:50% 41%!important}}

/* full-screen video overlay */
dialog#vlb{border:0;padding:0;margin:0;max-width:none;max-height:none;width:100vw;height:100vh;height:100dvh;background:rgba(18,24,20,.94);overflow:hidden}
dialog#vlb::backdrop{background:rgba(18,24,20,.94)}
dialog#vlb[open]{display:grid;place-items:center}
.vlb-frame{--r:16/9;aspect-ratio:var(--r);width:min(80vw,calc(76vh * (var(--r))));max-height:76vh;background:#000;box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}
.vlb-frame iframe{display:block;width:100%;height:100%;border:0}
.vlb-x{position:absolute;top:14px;right:16px;background:none;border:2px solid var(--paper);color:var(--paper);font:500 15px var(--sans);padding:8px 16px;border-radius:999px;cursor:pointer}
.vlb-x:hover{background:var(--paper);color:var(--ink)}
@media (max-width:640px){.vlb-x{top:10px;right:10px}}
/* home hero: 2 x 2 photo grid */
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hero-grid img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;max-height:none;box-shadow:0 0 0 1px var(--rule)}
@media (max-width:640px){.hero-grid{gap:6px}}

/* mixed-ratio (social) carousel: equal heights, widths follow each cut's shape */
.car.mixed{--th:clamp(240px,26vw,360px)}
.car.mixed .car-track{grid-auto-columns:max-content}
.car.mixed .car-item{width:calc(var(--th) * (var(--r)))}
.car.mixed .car-btn{top:calc(var(--th) / 2 - 22px)}
@media (max-width:640px){.car.mixed{--th:300px}}
.blk-h .pill{font:500 15px var(--sans);text-decoration:none;border:2px solid var(--green);color:var(--green);padding:6px 14px;border-radius:999px;white-space:nowrap}
.blk-h .pill:hover{background:var(--green);color:var(--paper)}
/* collection pages */
.crumb{font:500 15px var(--sans);margin:22px 0 -14px}
.cgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:40px 28px}
.cgrid.mixed{display:flex;flex-wrap:wrap;gap:36px 24px;align-items:flex-start}
.cgrid.mixed .cg-item{width:calc(360px * (var(--r)))}
@media (max-width:640px){.cgrid{grid-template-columns:1fr}.cgrid.mixed .cg-item{width:calc(300px * (var(--r)))}}
/* Work dropdown */
.nav-dd{position:relative;display:flex;align-items:center;gap:2px}
.dd-btn{background:none;border:0;padding:6px 4px;color:inherit;cursor:pointer;display:grid;place-items:center}
.dd{position:absolute;top:100%;left:-14px;z-index:20;min-width:190px;padding:8px;background:var(--paper);border:2px solid var(--green);box-shadow:0 14px 30px -18px rgba(30,42,35,.6);display:none;flex-direction:column}
.dd a{padding:9px 10px!important;border:0!important;white-space:nowrap}
.dd a:hover,.dd a[aria-current]{background:rgba(50,116,60,.1)}
.nav-dd:hover .dd,.nav-dd:focus-within .dd,.nav-dd.open .dd{display:flex}
.nav-dd.open .dd-btn svg{transform:rotate(180deg)}
.top{z-index:30!important}
.sub-h{margin-top:64px}
.top nav a.is-section{border-color:var(--green)}
/* all-work: category tiles */
.sub-h.first{margin-top:24px}
.cat-tile{display:block;text-decoration:none;color:inherit}
.cat-poster{aspect-ratio:16/9;background:var(--green);display:grid;place-items:center}
.cat-name{font:500 clamp(26px,2.6vw,36px)/1 var(--serif);color:var(--paper);letter-spacing:.01em}
.cat-tile:hover .cat-poster{filter:brightness(1.08)}
.cat-tile:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.empty{font:400 18px var(--sans);color:var(--ink-soft);margin:8px 0 40px}
.cat-tile h3{font:500 25px/1.15 var(--serif);margin:12px 0 2px}

.vlb-stage{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px}
.vlb-cap{display:flex;gap:10px 14px;align-items:baseline;flex-wrap:wrap;justify-content:center;color:var(--paper);font:400 15px var(--sans);text-align:center}
.vlb-cap strong{font:500 22px/1.1 var(--serif)}
.vlb-cap span{opacity:.8}
.vlb-cap em{font-style:normal;opacity:.55;font-size:13px}
.vlb-nav{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;border-radius:50%;border:2px solid var(--paper);background:rgba(18,24,20,.4);color:var(--paper);display:grid;place-items:center;cursor:pointer}
.vlb-nav:hover{background:var(--paper);color:var(--ink)}
.vlb-nav:focus-visible{outline:3px solid var(--paper);outline-offset:3px}
.vlb-prev{left:max(16px,2vw)}.vlb-next{right:max(16px,2vw)}
dialog#vlb.single .vlb-nav,dialog#vlb.single .vlb-cap em{display:none}
@media (max-width:640px){
  .vlb-frame{width:min(100vw,calc(68vh * (var(--r))));max-height:68vh}
  .vlb-nav{top:auto;bottom:18px;transform:none;width:48px;height:48px}
  .vlb-prev{left:18px}.vlb-next{right:18px}
  .vlb-cap{padding:0 76px}
}
/* runtime badge on video thumbnails */
.vid-poster .rt{position:absolute;right:8px;bottom:8px;padding:3px 7px;border-radius:4px;background:rgba(18,24,20,.78);color:var(--paper);font:600 12.5px/1 var(--sans);letter-spacing:.02em;font-variant-numeric:tabular-nums}
/* justified two-up rows: both videos in a row share a height, each keeps its shape */
.cgrid.justified{display:flex;flex-direction:column;gap:40px}
.jrow{display:flex;gap:24px;align-items:flex-start}
.jrow .cg-item{min-width:0}
@media (max-width:640px){.jrow{flex-direction:column;gap:36px}.jrow .cg-item{flex:none!important;width:100%}.jrow .cg-item[style*="9/16"],.jrow .cg-item[style*="4/5"]{width:66%}.cg-spacer{display:none}}
/* Work dropdown: sub-pages indented under All Work */
.dd .dd-sub{padding-left:22px!important;font-weight:400}
.dd-rule{display:block;height:1px;background:var(--rule);margin:6px 10px}
.cat-poster{background-size:cover;background-position:center}

/* photography hero: stacked frames, cross-fade */
.hero-fade{position:relative;width:min(100% - 2*(var(--gut) + var(--frame)),1300px,74vh*1.6);aspect-ratio:1.6;margin-inline:auto;padding:0;overflow:hidden;box-shadow:0 0 0 1px var(--rule),0 18px 40px -26px rgba(30,42,35,.55);background:var(--paper-deep)}
.hero-fade img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;max-height:none;object-fit:cover;object-position:50% 50%;box-shadow:none;opacity:0;transition:opacity 2.4s ease}
.hero-fade img.on,.hero-fade img:only-child{opacity:1}
@media (max-width:640px){.hero-fade{aspect-ratio:3/2;width:calc(100% - 2*(var(--gut) + var(--frame)))}}
/* photo carousels */
.pcar .car-item .ph{margin:0}
.pcar .car-item img{height:var(--th);width:100%;object-fit:cover}
@media (max-width:640px){.car.pcar{--th:220px}}
.series.blk{padding-top:0}
main.wrap>.series{padding-top:0}
.pgrid.mason{column-count:auto;display:flex;gap:16px;align-items:flex-start}.pcol{flex:1 1 0;min-width:0}
@media (max-width:640px){.pgrid.mason{gap:10px}}
.intro.ph-intro{gap:0}.intro.ph-intro h1{margin-bottom:22px}.intro.ph-intro{padding-bottom:40px}
/* contact section on the About page */
.ab-contact{margin-top:20px;scroll-margin-top:20px}
.ab-contact .lede{margin:0 0 18px;max-width:none}
.ab-contact .bigmail{margin:0 0 22px}
.ab-contact .contact-list{font-size:18px}
.foot-bare{padding-bottom:calc(var(--frame) + 60px)}
.ab-contact + .links{margin-top:34px!important}
main{z-index:2}   /* page content sits above the footer tower, so its antennae tuck behind photos */