/* roccogiancarlo.com: "Slot Light", from the approved mockup.
   One deliberate look: canyon-dark and gallery-white sections alternate, in any viewer theme. */
:root{
  --paper:#F5F5F2; --ink:#161413; --muted:#726D66; --rule:#DCD8D1;
  --night:#110E0D; --night2:#1B1716; --bone:#EEEAE4; --bone2:#A7A098; --nightrule:#2C2624;
  --display:"Archivo", "Arial Narrow", system-ui, sans-serif;
  --sans:"Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --serif:"Newsreader", "Iowan Old Style", Georgia, serif;
  --ease:cubic-bezier(.22,.61,.2,1);
  --gutter:clamp(16px,4.2vw,64px);
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--night)}
html.lock{overflow:hidden}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--sans);font-stretch:100%;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit} img{max-width:100%;display:block}
.cond{font-family:var(--display);font-stretch:62%;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:.86}
.mono{font:400 12px/1.65 var(--mono);letter-spacing:.01em}
.eyebrow{font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}
h2.eyebrow{margin:0}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.wrap{padding-inline:var(--gutter)}
.skip{position:fixed;z-index:60;left:12px;top:-80px;background:var(--ink);color:var(--paper);padding:10px 16px;font:500 12px/1 var(--mono);text-decoration:none}
.skip:focus{top:12px}
.back{color:var(--muted);text-decoration:none}
.back:hover{color:var(--ink)}

/* ---------- header ---------- */
.top{position:fixed;z-index:30;left:0;right:0;top:0;padding-top:env(safe-area-inset-top,0px);color:var(--bone);transition:background .4s,color .4s,border-color .4s;border-bottom:1px solid transparent}
.top.solid{background:rgba(245,245,242,.94);color:var(--ink);border-bottom-color:var(--rule);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.top .in{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px var(--gutter)}
.brand{font:600 13px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.menu-btn{display:inline-flex;align-items:center;gap:12px;background:none;border:1px solid currentColor;border-radius:999px;color:inherit;font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;padding:11px 18px;cursor:pointer}
.menu-btn i{display:inline-block;width:18px;height:7px;border-block:1px solid currentColor}

/* ---------- full-screen menu ---------- */
.menu{position:fixed;inset:0;z-index:40;background:var(--night);color:var(--bone);visibility:hidden;opacity:0;filter:blur(14px);transition:opacity .6s ease,filter .8s var(--ease),visibility 0s linear .8s;display:grid;grid-template-rows:auto 1fr auto;overflow-y:auto;padding-top:env(safe-area-inset-top,0px)}
.menu.open{visibility:visible;opacity:1;filter:blur(0);transition:opacity .6s ease,filter .8s var(--ease),visibility 0s}
.menu .bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.menu .bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:right center;opacity:0;transform:scale(1.06);transition:opacity .7s ease,transform 2.4s var(--ease)}
.menu .bg img.on{opacity:.34;transform:scale(1)}
.menu > *{position:relative;z-index:1}
.menu .mtop{display:flex;justify-content:space-between;align-items:center;padding:18px var(--gutter)}
.menu .body{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(24px,5vw,80px);align-content:center;padding:32px var(--gutter)}
.menu .mlabel{display:inline-block;color:var(--bone2);margin-bottom:18px;text-decoration:none}
.menu .mlabel:hover{color:var(--bone)}
.menu ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.menu ol a{display:flex;align-items:baseline;gap:16px;text-decoration:none;color:var(--bone2);transition:color .3s,transform .4s var(--ease)}
.menu ol a:hover,.menu ol a:focus-visible{color:var(--bone);transform:translateX(10px)}
.menu ol a .cond{font-size:clamp(40px,7.4vw,112px)}
.menu ol a .mono{color:var(--bone2)}
.menu .side{display:grid;gap:22px;align-content:end}
.menu .side a{font:400 italic clamp(24px,2.6vw,34px)/1.2 var(--serif);text-decoration:none;color:var(--bone)}
.menu .side .email{margin:12px 0 0;color:var(--bone2)}
.menu .foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:20px var(--gutter) 28px;color:var(--bone2)}
.menu .foot a{text-decoration:none} .menu .foot a:hover{color:var(--bone)}
.menu.open ol li,.menu.open .side > *{animation:focusIn .9s var(--ease) both}
.menu.open ol li:nth-child(2){animation-delay:.05s}.menu.open ol li:nth-child(3){animation-delay:.1s}.menu.open ol li:nth-child(4){animation-delay:.15s}.menu.open ol li:nth-child(5){animation-delay:.2s}.menu.open ol li:nth-child(6){animation-delay:.25s}

/* ---------- motion vocabulary ---------- */
@keyframes focusIn{from{filter:blur(12px);opacity:.5;transform:translateY(10px)}to{filter:blur(0);opacity:1;transform:none}}
@keyframes pull{from{filter:blur(10px)}to{filter:blur(0)}}
@keyframes drift{from{transform:scale(1.09)}to{transform:scale(1)}}
/* Reveals never hide anything by default: a print is always visible, and only animates open when its entry is seen. */
@keyframes slotOpen{from{clip-path:inset(0 47% 0 47%);filter:brightness(1.35)}to{clip-path:inset(0 0 0 0);filter:brightness(1)}}
@keyframes riseIn{from{opacity:.2;transform:translateY(24px);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
.slot.go{animation:slotOpen 1.25s var(--ease) both}
.rise.go{animation:riseIn 1.1s var(--ease) both}
/* Pages load blurred and come into focus. */
.enter{animation:focusIn 1.4s var(--ease) backwards}

/* ---------- hero: opens full screen, pulls back once to the whole print, then holds still ---------- */
.hero{position:relative;height:clamp(560px,100svh,1200px);background:var(--night);color:var(--bone);overflow:hidden;touch-action:pan-y}
.hero .stage{position:absolute;inset:0}
.hero .slides{position:absolute;inset:0}
.hero .slide{position:absolute;inset:0;visibility:hidden;z-index:1}
.hero .slide.on{visibility:visible;z-index:2}
.hero .slide.prev{visibility:visible;z-index:1}
/* The next print is revealed through a soft, feathered edge (not a hard cut), and the band of light rides that edge. */
.hero{--wipe:2.1s;--wease:cubic-bezier(.37,0,.63,1)}
/* Same feathered edge as a mask sliding 300% wide (stops 40/60%), done by moving a fixed soft-edged window
   (.win) across the screen while the print inside (.pane) moves the other way, so the print holds still and
   only transforms animate: phones can't redraw a moving full-screen mask smoothly. */
.hero .win{position:absolute;top:0;bottom:0;left:0;width:100%}
.hero .pane{position:absolute;top:0;bottom:0;left:0;width:100%}
.hero .slide.in-r .win,.hero .slide.in-l .win{width:300%;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.hero .slide.in-r .pane,.hero .slide.in-l .pane{width:33.3333%}
.hero .slide.in-r .win{-webkit-mask-image:linear-gradient(90deg,transparent 0 40%,#000 60% 100%);mask-image:linear-gradient(90deg,transparent 0 40%,#000 60% 100%);animation:winR var(--wipe) var(--wease) both}
.hero .slide.in-l .win{-webkit-mask-image:linear-gradient(90deg,#000 0 40%,transparent 60% 100%);mask-image:linear-gradient(90deg,#000 0 40%,transparent 60% 100%);animation:winL var(--wipe) var(--wease) both}
.hero .slide.in-r .pane{animation:paneR var(--wipe) var(--wease) both}
.hero .slide.in-l .pane{animation:paneL var(--wipe) var(--wease) both}
@keyframes winR{from{transform:translateX(0)}to{transform:translateX(-66.6667%)}}
@keyframes paneR{from{transform:translateX(0)}to{transform:translateX(200%)}}
@keyframes winL{from{transform:translateX(-66.6667%)}to{transform:translateX(0)}}
@keyframes paneL{from{transform:translateX(200%)}to{transform:translateX(0)}}
/* The outgoing print softens out of focus while the incoming one sharpens into focus. */
.hero .slide.in-r .fg,.hero .slide.in-l .fg{animation:blurIn var(--wipe) var(--wease) both}
.hero .slide.prev .fg{animation:blurOut var(--wipe) var(--wease) both}
@keyframes blurIn{from{filter:blur(14px)}to{filter:blur(0)}}
@keyframes blurOut{from{filter:blur(0)}to{filter:blur(12px) brightness(.85)}}
/* The glow is pre-blurred and dimmed by build.py (blur 72px, brightness .62, saturate 1.3), so only transform and opacity ever animate. */
.hero .bg{position:absolute;left:-8%;top:-8%;width:116%;height:116%;max-width:none;object-fit:cover;will-change:transform;animation:glowDrift 22s ease-in-out infinite alternate}
.hero .veil{position:absolute;inset:0;background:var(--night);pointer-events:none;opacity:.28;animation:breathe 9s ease-in-out infinite alternate}
/* Prints that aren't on screen rest. */
.hero .slide:not(.on):not(.prev) .bg,.hero .slide:not(.on):not(.prev) .veil{animation-play-state:paused}
@keyframes glowDrift{0%{transform:scale(1) translate(0,0)}50%{transform:scale(1.14) translate(-4%,2.5%)}100%{transform:scale(1.06) translate(3%,-2%)}}
@keyframes breathe{from{opacity:.14}to{opacity:.42}}
.hero .fg{position:absolute;z-index:1;left:0;top:0;max-width:none;object-fit:cover;transform-origin:0 0;transition:transform 1.9s var(--ease)}
.hero.instant .fg,.hero.instant .shade{transition:none}
.hero.first .slide.on .fg{animation:pull 1.6s var(--ease) both}
/* Only while a print is still on its way (set and cleared by the script, with a time limit). */
.hero.waiting .fg,img.waiting{opacity:0}
.hero.off .bg,.hero.off .veil,.hero.off .prog i{animation-play-state:paused}
.hero .shade{position:absolute;inset:0;z-index:2;pointer-events:none;transition:opacity 1.9s var(--ease);background:linear-gradient(to top,rgba(17,14,13,.62),rgba(17,14,13,0) 52%),linear-gradient(to right,rgba(17,14,13,.3),rgba(17,14,13,0) 60%)}
.hero .left{position:absolute;z-index:4;left:var(--gutter);bottom:clamp(20px,3.4vh,36px);display:flex;flex-direction:column;gap:clamp(16px,2.6vh,32px);pointer-events:none;min-width:0}
.hero .left .ctl{pointer-events:auto}
.hero .name{margin:0;font-size:clamp(56px,12vw,240px);white-space:nowrap;color:var(--bone);display:block;width:max-content;max-width:none}
.hero .name span{display:block;animation:focusIn 1.8s var(--ease) both}
.hero .name span:nth-child(2){animation-delay:.12s}
.hero .foot{display:flex;justify-content:space-between;align-items:end;gap:16px;color:var(--bone2)}
.hero .foot b{color:var(--bone);font-weight:500}
.hero .where{color:var(--bone2)}
.hero .ctl{display:flex;align-items:center;gap:10px;font-variant-numeric:tabular-nums}
.hero .ctl button{width:34px;height:34px;border-radius:50%;background:rgba(17,14,13,.25);border:1px solid rgba(238,234,228,.5);color:var(--bone);cursor:pointer;font:400 14px var(--mono)}
.hero .hit{position:absolute;inset:0;z-index:3}
.hero .beam{position:absolute;top:0;bottom:0;left:-160px;width:320px;z-index:3;pointer-events:none;opacity:0;
  background:
    linear-gradient(90deg,transparent calc(50% - 1.5px),rgba(255,247,236,.95) 50%,transparent calc(50% + 1.5px)),
    linear-gradient(90deg,transparent 40%,rgba(255,232,204,.45) 50%,transparent 60%),
    linear-gradient(90deg,transparent 0%,rgba(255,210,165,.16) 50%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent)}
.hero .beam.r{animation:beamR var(--wipe) var(--wease) both}
.hero .beam.l{animation:beamL var(--wipe) var(--wease) both}
@keyframes beamR{0%{transform:translateX(150vw);opacity:0}32%{opacity:.9}68%{opacity:.9}100%{transform:translateX(-50vw);opacity:0}}
@keyframes beamL{0%{transform:translateX(-50vw);opacity:0}32%{opacity:.9}68%{opacity:.9}100%{transform:translateX(150vw);opacity:0}}
.hero .prog{position:relative;height:1px;background:rgba(238,234,228,.22);overflow:hidden}
.hero .prog i{position:absolute;inset:0;background:var(--bone);transform:scaleX(0);transform-origin:0 50%}
.hero .prog i.run{animation:progress 6s linear both}
@keyframes progress{to{transform:scaleX(1)}}
@media (hover:hover){.hero:hover .prog i{animation-play-state:paused}}
#heroLabel.swap{animation:focusIn .9s var(--ease) both}

/* ---------- statement ---------- */
.statement{padding-block:clamp(80px,12vw,168px);display:grid;justify-items:center;text-align:center;gap:28px}
.statement .eyebrow{color:var(--muted)}
.statement .tag{margin:0;font:400 italic clamp(34px,5.6vw,84px)/1.08 var(--serif);letter-spacing:-.01em;max-width:16ch;text-wrap:balance}
.statement p{margin:0;max-width:60ch;color:var(--muted)}
.vr{width:1px;height:clamp(48px,7vw,90px);background:currentColor;opacity:.3}

/* ---------- the canyon (pinned horizontal) ---------- */
.canyon{position:relative;background:var(--night);color:var(--bone)}
.canyon .stick{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr);padding-top:clamp(84px,11vh,120px)}
.canyon .head{display:flex;justify-content:space-between;align-items:end;gap:24px;padding-inline:var(--gutter)}
.canyon h2{margin:0;font-size:clamp(48px,9vw,150px)}
.canyon .head .mono{color:var(--bone2);text-align:right}
.canyon .head a{color:var(--bone)}
.trackwrap{display:flex;align-items:center;overflow:visible;min-width:0}
.track{display:flex;align-items:center;gap:clamp(28px,4vw,72px);padding-inline:var(--gutter) 30vw;will-change:transform}
.piece{flex:0 0 auto;display:grid;gap:14px;text-decoration:none;color:var(--bone)}
.piece .pic{height:min(58svh,720px);aspect-ratio:3/4;background:var(--night2);overflow:hidden}
.piece .pic img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.piece:hover .pic img{transform:scale(1.03)}
.piece .mono{color:var(--bone2)} .piece .mono b{display:block;color:var(--bone);font:500 16px/1.3 var(--sans)}
.piece:nth-child(even){transform:translateY(clamp(18px,4vh,48px))}
.canyon .progress{position:absolute;left:var(--gutter);right:var(--gutter);bottom:26px;height:1px;background:var(--nightrule)}
.canyon .progress i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--bone)}
/* Not pinned (reduced motion on a wide screen): the strip scrolls sideways on its own, nothing moves by itself. */
.canyon.static .stick{position:relative;height:auto;padding-block:clamp(84px,11vh,120px) 56px}
.canyon.static .track{overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:var(--gutter);padding-block:32px 8px}
.canyon.static .piece{scroll-snap-align:start}
.canyon.static .progress{display:none}

/* ---------- series index ---------- */
.index-sec{padding-block:clamp(80px,11vw,150px)}
.index-sec.flush{padding-top:0}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-bottom:1px solid var(--rule);padding-bottom:16px;color:var(--muted)}
.sec-head a{text-decoration:none} .sec-head a:hover{color:var(--ink)}
.series{list-style:none;margin:0;padding:0}
.series a{display:grid;grid-template-columns:3.2em 1fr auto;align-items:baseline;gap:18px;padding:clamp(14px,1.8vw,22px) 0;border-bottom:1px solid var(--rule);text-decoration:none;transition:padding .5s var(--ease)}
.series a .cond{font-size:clamp(40px,7.2vw,112px);transition:color .35s}
.series a .mono{color:var(--muted);font-variant-numeric:tabular-nums}
.series:hover a .cond{color:#B9B3AB}
.series a:hover .cond,.series a:focus-visible .cond{color:var(--ink)}
.series a:hover{padding-left:14px}
.follow{position:fixed;z-index:20;left:0;top:0;width:clamp(200px,20vw,320px);pointer-events:none;opacity:0;transition:opacity .3s;will-change:transform}
.follow img{width:100%;height:auto;box-shadow:0 30px 60px -30px rgba(0,0,0,.45)}
.follow.show{opacity:1}
.series .th{display:none}

/* ---------- writing ---------- */
.writing-sec{padding-block:0 clamp(80px,11vw,150px)}
.entries{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,4vw,64px)}
.entries a{display:grid;gap:14px;padding:28px 0;border-bottom:1px solid var(--rule);text-decoration:none}
.entries .mono{color:var(--muted)}
.entries h2,.entries h3{margin:0;font:400 italic clamp(28px,3.2vw,44px)/1.1 var(--serif)}
.entries p{margin:0;color:var(--muted);max-width:52ch}
.listing{padding-bottom:120px}

/* ---------- footer ---------- */
footer{overflow:hidden;background:var(--night);color:var(--bone2);padding:clamp(56px,8vw,110px) var(--gutter) calc(28px + env(safe-area-inset-bottom,0px))}
footer .big{width:max-content;margin:0 0 clamp(40px,6vw,80px);font-size:clamp(52px,12.6vw,220px);color:var(--bone);white-space:nowrap}
footer .row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px}
footer a{text-decoration:none} footer a:hover{color:var(--bone)}
.email{user-select:all}

/* ---------- inner pages ---------- */
.page-hero{position:relative;height:clamp(540px,100svh,1100px);background:var(--night);color:var(--bone);overflow:hidden}
/* Pre-blurred glow at brightness .62; opacity .84 over night brings it to the design's .52. */
.page-hero .bg{position:absolute;left:-8%;top:-8%;width:116%;height:116%;max-width:none;object-fit:cover;opacity:.84;will-change:transform;animation:glowDrift 22s ease-in-out infinite alternate}
.page-hero .fg{position:absolute;right:0;top:0;height:100%;width:auto;max-width:60vw;object-fit:contain;object-position:right center;animation:pull 1.6s var(--ease) both}
.page-hero .txt{position:absolute;left:var(--gutter);bottom:clamp(28px,4vw,56px);display:grid;gap:16px;min-width:0;width:40vw}
.page-hero .eyebrow{color:var(--bone2)}
.page-hero h1{margin:0;font-size:clamp(56px,9vw,170px);animation:focusIn 1.6s var(--ease) both;text-wrap:balance}
.page-hero .mono{color:var(--bone2)}
.intro{padding-block:clamp(56px,8vw,110px) clamp(24px,4vw,56px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(24px,5vw,80px);align-items:start}
.intro .eyebrow{color:var(--muted)}
.intro p{margin:0;font:400 clamp(19px,1.6vw,22px)/1.55 var(--serif);max-width:52ch}
.wall{display:flex;flex-direction:column;gap:clamp(80px,12vw,180px);padding-block:clamp(24px,4vw,56px) clamp(96px,12vw,170px)}
.page-hero + .wall{padding-top:clamp(56px,8vw,110px)}
.work{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:end;gap:24px}
.work a.pic{display:block;background:#E9E7E2}
.work a.pic[data-view]{cursor:zoom-in}
.work a.pic img{width:100%;height:auto}
.work .mono{color:var(--muted)} .work .mono b{display:block;color:var(--ink);font:500 17px/1.3 var(--sans)} .work .mono a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.work.l a.pic{grid-column:2 / span 5}.work.l .mono{grid-column:7 / span 3}
.work.r a.pic{grid-column:7 / span 5}.work.r .mono{grid-column:4 / span 3;grid-row:1;text-align:right}
.work.c a.pic{grid-column:4 / span 5}.work.c .mono{grid-column:9 / span 3}
.work.w a.pic{grid-column:2 / span 7}.work.w .mono{grid-column:9 / span 3}

.print{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start;padding-top:clamp(104px,12vw,150px);padding-bottom:clamp(80px,10vw,140px)}
.print .pic{position:sticky;top:96px}
.print .pic img{width:100%;height:auto;max-height:84svh;object-fit:contain;object-position:left top;animation:pull 1.4s var(--ease) both}
.print h1{margin:14px 0 22px;font-size:clamp(56px,7.6vw,128px)}
.print .desc{max-width:52ch;margin:0 0 32px;font:400 19px/1.6 var(--serif)}
.spec{border-top:1px solid var(--rule);margin:0 0 32px;padding:0}
.spec div{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--rule);font:400 13px/1.5 var(--mono)}
.spec dt{color:var(--muted)} .spec dd{margin:0}
.btn{display:inline-flex;align-items:center;gap:14px;background:var(--ink);color:var(--paper);font:500 11.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;padding:18px 28px;border:0;border-radius:999px;cursor:pointer;text-decoration:none;transition:gap .3s var(--ease)}
.btn:hover{gap:22px}
.btn[disabled]{opacity:.5;cursor:default}
.pn{display:flex;justify-content:space-between;gap:16px;margin-top:56px;padding-top:18px;border-top:1px solid var(--rule)}
.pn a{text-decoration:none;color:var(--muted)} .pn a:hover{color:var(--ink)}

.plain{padding-top:clamp(120px,15vw,200px);padding-bottom:clamp(32px,5vw,56px);border-bottom:1px solid var(--rule)}
.plain .eyebrow{color:var(--muted)}
.plain h1{margin:14px 0 18px;font-size:clamp(64px,12vw,200px)}
.plain p{margin:0;color:var(--muted);max-width:56ch}
.essay{max-width:66ch;margin:0 auto;padding-top:clamp(120px,14vw,180px);padding-bottom:clamp(80px,10vw,140px)}
.essay h1{font:400 clamp(44px,6.4vw,84px)/1.02 var(--serif);letter-spacing:-.015em;margin:18px 0 16px;text-wrap:balance}
.essay .by{color:var(--muted);margin-bottom:56px}
.essay .dek{margin:-24px 0 48px;font:400 italic 23px/1.5 var(--serif);color:var(--muted)}
.essay .body p{font:400 21px/1.72 var(--serif);margin:0 0 1.15em}
.essay .body p:first-child::first-letter{font:400 4.1em/.8 var(--serif);float:left;padding:.06em .08em 0 0}
.essay .body p.turn{font-style:italic;font-size:26px;line-height:1.45;margin:1.6em 0}
.ifgo{display:grid;gap:14px;margin-top:56px;padding-top:22px;border-top:1px solid var(--rule)}
.ifgo .eyebrow{color:var(--muted)}
.ifgo p{margin:0;font:400 13px/1.8 var(--mono)}
.ifgo b{display:block;margin-bottom:4px;font:500 17px/1.3 var(--sans)}
.ifgo a{text-decoration:none;border-bottom:1px solid var(--rule)}

.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,6vw,96px);align-items:start;padding-block:clamp(56px,8vw,110px)}
.about img{width:100%;height:auto}
.about p{font:400 19px/1.7 var(--serif);margin:0 0 1.1em;max-width:58ch}
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(28px,6vw,96px);padding-block:clamp(56px,8vw,110px)}
.contact blockquote{margin:0;font:400 italic clamp(28px,3.4vw,46px)/1.2 var(--serif)}
.contact cite{display:block;margin-top:14px;font:400 12px var(--mono);font-style:normal;color:var(--muted)}
.contact .email{margin-top:36px;color:var(--muted)}
form{display:grid;gap:20px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
label.f{display:grid;gap:6px;font:400 12px var(--mono);color:var(--muted)}
input,textarea{font:400 17px/1.4 var(--sans);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--rule);padding:10px 0;border-radius:0}
input:focus,textarea:focus{border-bottom-color:var(--ink);outline:none}
textarea{min-height:150px;resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sent{font:400 13px var(--mono);color:var(--muted);min-height:1.5em;margin:0}
.sent.done{color:var(--ink)}

/* ---------- viewer for untitled works ---------- */
.viewer{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--night);color:var(--bone);overflow:hidden}
.viewer::backdrop{background:var(--night)}
.viewer .vbar{position:absolute;z-index:2;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:calc(18px + env(safe-area-inset-top,0px)) var(--gutter) 18px;color:var(--bone2)}
.viewer .vbar .menu-btn{color:var(--bone)}
.viewer figure{position:absolute;inset:clamp(72px,10vh,96px) clamp(16px,7vw,110px) clamp(24px,5vh,56px);margin:0}
.viewer img{width:100%;height:100%;object-fit:contain}
.viewer img.swap{animation:pull .9s var(--ease) both}
.viewer .vnav{position:absolute;z-index:2;top:50%;margin-top:-22px;width:44px;height:44px;border-radius:50%;background:rgba(17,14,13,.35);border:1px solid rgba(238,234,228,.5);color:var(--bone);cursor:pointer;font:400 16px var(--mono)}
.viewer .vprev{left:clamp(8px,2vw,32px)} .viewer .vnext{right:clamp(8px,2vw,32px)}

/* ---------- not found ---------- */
.lost{position:relative;min-height:100svh;background:var(--night);color:var(--bone);overflow:hidden;display:grid;align-items:end}
.lost .bg{position:absolute;left:-8%;top:-8%;width:116%;height:116%;max-width:none;object-fit:cover;opacity:.84;will-change:transform;animation:glowDrift 22s ease-in-out infinite alternate}
.lost .txt{position:relative;display:grid;gap:20px;padding:120px var(--gutter) clamp(40px,8vh,96px)}
.lost h1{margin:0;font-size:clamp(64px,12vw,200px)}
.lost p{margin:0;color:var(--bone2);max-width:40ch}
.lost nav{display:flex;gap:28px}
.lost nav a{color:var(--bone);text-decoration:none;border-bottom:1px solid var(--bone2)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .menu .body{grid-template-columns:1fr}
  .intro,.about,.contact,.print{grid-template-columns:1fr}
  .print .pic{position:static}
  .entries{grid-template-columns:1fr}
  .work.l a.pic,.work.r a.pic,.work.c a.pic,.work.w a.pic{grid-column:1 / span 8}
  .work.l .mono,.work.c .mono,.work.w .mono{grid-column:9 / span 4}
  .work.r a.pic{grid-column:5 / span 8}.work.r .mono{grid-column:1 / span 4}
}
@media (max-width:720px){
  .canyon .stick{position:relative;height:auto;padding-block:96px 56px}
  .canyon .head{flex-direction:column;align-items:flex-start;gap:16px}
  .canyon .head .mono{text-align:left}
  .canyon{height:auto!important}
  .track{overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:var(--gutter);transform:none!important;padding-block:32px 8px;-webkit-overflow-scrolling:touch}
  .piece{scroll-snap-align:start}
  .piece .pic{height:auto;width:72vw}
  .piece:nth-child(even){transform:none}
  .canyon .progress{display:none}
  .series a{grid-template-columns:56px 1fr auto}
  .series .th{display:block;width:56px;height:56px;background:#E9E7E2}
  .series .th img{width:100%;height:100%;object-fit:cover}
  .series a .n{display:none}
  .follow{display:none}
  .work{grid-template-columns:1fr;gap:14px}
  .work.l a.pic,.work.r a.pic,.work.c a.pic,.work.w a.pic,.work.l .mono,.work.r .mono,.work.c .mono,.work.w .mono{grid-column:1;grid-row:auto;text-align:left}
  .row2{grid-template-columns:1fr}
  .spec div{grid-template-columns:1fr;gap:2px}
  .page-hero{height:auto}
  .page-hero .fg{position:relative;width:100%;height:auto;max-width:none;max-height:72svh;object-position:center}
  .page-hero .txt{position:relative;left:auto;bottom:auto;width:auto!important;padding:24px var(--gutter) 32px}
  .viewer figure{inset:72px 0 84px}
  .viewer .vnav{top:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px));margin-top:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}