/* ═══ FRONT OF HOUSE — two-colour riso, marked up by hand ═════════ */
:root{
  --stock:#F1EEE4;
  --stock-2:#E7E3D5;
  --key:#141318;
  --key-2:#43414A;
  --quiet:#817E73;
  --line:#CBC5B4;
  --ink-a:#2A20D6;
  --ink-b:color-mix(in srgb,var(--ink-a) 34%,#FFFDF4);
  --klein:var(--ink-a);
  --paper:var(--stock);
  --ink:var(--key);
  --f-serif:'Bodoni Moda','Didot','Bodoni MT',Georgia,serif;
  --f-hand:'Caveat','Bradley Hand',cursive;
}
body[data-mode="front"]{
  background:var(--stock);color:var(--key);
  font-family:var(--f-body);overflow-y:auto;overflow-x:hidden;touch-action:auto;
}
body[data-mode="front"] #back{display:none}
body[data-mode="back"] #front{display:none}
body[data-mode="back"] #grain,body[data-mode="back"] #inks{display:none}

#front{
  color:var(--key);font-size:clamp(1rem,.28vw+.94rem,1.09rem);line-height:1.62;
  position:relative;overflow:hidden;
  transition:--x 0s;
}
#front .mono{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--quiet)}
#front :focus-visible{outline:2px solid var(--ink-b);outline-offset:3px}
.f-wrap{max-width:1300px;margin-inline:auto;padding-inline:clamp(18px,4.4vw,64px);position:relative}
.f-serif{font-family:var(--f-serif);font-weight:500;line-height:.98;letter-spacing:-.012em;margin:0}
.f-serif em{font-style:italic;font-weight:400}
.hand{font-family:var(--f-hand);font-size:clamp(1.05rem,1.7vw,1.45rem);line-height:1.15;color:var(--ink-a);font-weight:600}

/* ── the stock: grain + a faint press impression ────────────────── */
#grain{
  position:fixed;inset:0;z-index:70;pointer-events:none;mix-blend-mode:multiply;opacity:.36;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='.42'/></svg>");
}

/* ── hand-drawn rules ───────────────────────────────────────────── */
.hrule{display:block;width:100%;height:9px;color:var(--line);overflow:visible}
.hrule path{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;vector-effect:non-scaling-stroke}

/* ── nav ────────────────────────────────────────────────────────── */
#fnav{
  position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--stock) 92%,transparent);
  backdrop-filter:blur(10px);border-bottom:1.5px solid var(--key);
}
.fnav-in{display:flex;align-items:center;gap:16px;height:60px}
.f-mark{
  margin-right:auto;font-family:var(--f-serif);font-weight:600;font-size:19px;
  text-decoration:none;color:var(--key);display:flex;align-items:center;gap:10px;
}
.f-mark i{
  width:13px;height:13px;background:var(--ink-a);display:block;flex:none;
  border-radius:52% 48% 44% 56% / 50% 55% 45% 50%;transform:rotate(-8deg);
}
.f-link{text-decoration:none;color:var(--key-2);font-family:var(--f-mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;position:relative}
.f-link:hover{color:var(--ink-a)}
.f-link:hover::after{
  content:"";position:absolute;left:-3px;right:-3px;bottom:-5px;height:5px;
  background:var(--ink-a);opacity:.85;
  clip-path:polygon(0 40%,12% 10%,28% 55%,44% 15%,61% 60%,78% 20%,92% 55%,100% 30%,100% 100%,0 100%);
}
@media(max-width:900px){.f-link{display:none}}

/* mode switch — lives in both houses */
.swap{
  display:inline-flex;align-items:center;border:1.5px solid var(--key);flex:none;overflow:hidden;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
}
.swap span{padding:7px 10px;color:var(--key-2);white-space:nowrap}
.swap span.now{background:var(--key);color:var(--stock)}
.swap:hover span:not(.now){color:var(--ink-a)}
#back .swap{border-color:var(--rule)}
#back .swap span{color:var(--dim)}
#back .swap span.now{background:var(--signal);color:#0A0C10}
#back .swap:hover span:not(.now){color:var(--bone)}

/* ── ink picker ─────────────────────────────────────────────────── */
#inks{
  position:fixed;left:16px;bottom:16px;z-index:40;display:flex;align-items:center;gap:9px;
  padding:9px 12px;background:color-mix(in srgb,var(--stock) 93%,transparent);
  border:1.5px solid var(--key);backdrop-filter:blur(8px);
}
#inks .mono{color:var(--key-2)}
.blobs{display:flex;gap:7px}
.blob{
  width:24px;height:24px;border:1.5px solid var(--key);cursor:pointer;position:relative;
  border-radius:54% 46% 42% 58% / 48% 56% 44% 52%;
  transition:transform .22s cubic-bezier(.2,1.4,.4,1);
}
.blob:nth-child(2n){border-radius:44% 56% 58% 42% / 56% 44% 56% 44%}
.blob:nth-child(3n){border-radius:60% 40% 50% 50% / 42% 58% 42% 58%}
.blob i{position:absolute;inset:0;display:block;border-radius:inherit}

.blob:hover{transform:scale(1.22) rotate(8deg)}
.blob.on{transform:scale(1.15)}
.blob.on::after{
  content:"";position:absolute;inset:-7px;border:1.5px solid var(--key);
  border-radius:50% 46% 54% 48% / 52% 50% 50% 48%;
}
@media(max-width:760px){
  #inks{left:10px;bottom:10px;padding:6px 7px;gap:6px}
  #inks .mono{display:none}
  #inks .blobs{display:none}
  #inks.open .blobs{display:flex}
  #inkPeek{display:grid}
  .ring svg{top:-15%;height:130%}
}
#inkPeek{
  display:none;place-items:center;width:26px;height:26px;border:1.5px solid var(--key);
  background:var(--ink-a);cursor:pointer;border-radius:52% 48% 44% 56% / 50% 55% 45% 50%;
}

/* ── marked-up headline ──────────────────────────────────────────
   Black type, legible. One ink. The marks are drawn on, the way you
   would correct a proof: a cross-out, a replacement, a marker ring. -- */
.mk{position:relative;display:inline-block;white-space:nowrap}
.mk svg{
  position:absolute;overflow:visible;pointer-events:none;color:var(--ink-a);
  left:0;top:0;width:100%;height:100%;
}
.mk svg path{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.ring svg{left:-3.5%;top:-19%;width:107%;height:139%}
.ring svg path{stroke-width:2.6}
.strike svg{left:-4%;top:0;width:108%;height:100%}
.strike svg path{stroke-width:2.4}
.mk path{stroke-dasharray:var(--l,600);stroke-dashoffset:var(--l,600)}
.mk.inked path{stroke-dashoffset:0;transition:stroke-dashoffset .82s cubic-bezier(.6,0,.25,1)}
.mk.inked path:nth-child(2){transition-delay:.16s}
.ins{
  font-family:var(--f-hand);color:var(--ink-a);font-weight:700;
  display:inline-block;text-decoration:none;line-height:1;
  font-size:1.02em;transform:rotate(-2.5deg);padding:0 .06em;
}
/* inside the headline the handwriting is an annotation, not a shout */
.f-h1 .ins{font-size:.44em;transform:rotate(-3.5deg) translateY(-.34em);padding:0 .12em}
.eqn{
  font-family:var(--f-hand);color:var(--ink-a);font-weight:600;max-width:44ch;
  font-size:clamp(1.05rem,1.7vw,1.5rem);margin:20px 0 0;transform:rotate(-.8deg);line-height:1.25;
}
.eqn em{font-style:normal;opacity:.62;padding:0 .12em}

/* ── hero ───────────────────────────────────────────────────────── */
.f-hero{padding-block:clamp(38px,6vw,86px) clamp(40px,7vw,90px)}
.f-hero-grid{display:grid;gap:clamp(28px,4vw,54px);grid-template-columns:minmax(0,1fr)}
@media(min-width:940px){.f-hero-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:start}}
.f-h1{font-size:clamp(2.05rem,4.7vw,4.05rem);letter-spacing:-.016em}
.h1-sub{display:block;font-size:.44em;margin-top:.5em;letter-spacing:-.008em;color:var(--key-2)}
.f-kicker{display:flex;gap:12px;align-items:center;margin-bottom:clamp(18px,2.6vw,30px);flex-wrap:wrap}
.f-kicker s{width:34px;height:1px;background:var(--key);display:block;text-decoration:none}
.f-lede{max-width:58ch;color:var(--key-2);margin:clamp(24px,3vw,36px) 0 0;font-size:clamp(1.02rem,.3vw+.96rem,1.16rem)}
.f-lede b{color:var(--key);font-weight:600;background:linear-gradient(transparent 62%,color-mix(in srgb,var(--ink-a) 26%,transparent) 62%)}
.f-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3vw,36px);align-items:center;position:relative}
.f-btn{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;cursor:pointer;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  padding:14px 20px;border:1.5px solid var(--key);color:var(--key);background:none;
  transition:transform .18s cubic-bezier(.2,1.3,.4,1),background .18s,color .18s;
}
.f-btn:hover{background:var(--key);color:var(--stock);transform:translate(-2px,-2px) rotate(-.6deg)}
.f-btn.fill{background:var(--ink-a);border-color:var(--ink-a);color:#fff}
.f-btn.fill:hover{background:var(--ink-b);border-color:var(--ink-b);color:var(--key)}
.scrawl{position:absolute;pointer-events:none;color:var(--ink-a)}
.scrawl path{fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.draw path{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);transition:stroke-dashoffset 1.1s cubic-bezier(.5,0,.2,1)}
.draw.seen path{stroke-dashoffset:0}

/* ── plates: printed, taped, slightly off ───────────────────────── */
.plate{
  position:relative;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(158deg,var(--stock-2),color-mix(in srgb,var(--ink-a) 7%,var(--stock-2)));
  border:1.5px solid var(--key);
  transition:transform .45s cubic-bezier(.2,.9,.25,1),box-shadow .35s;
}
.plate::before{
  content:"";position:absolute;inset:0;mix-blend-mode:multiply;opacity:0;
  background:radial-gradient(70% 60% at var(--px,50%) var(--py,50%),var(--ink-b),transparent 70%);
  transition:opacity .35s;
}
.plate:hover::before{opacity:.5}
.plate:hover{transform:rotate(0deg) translateY(-4px);box-shadow:10px 10px 0 -1px var(--ink-a)}
.plate span{
  position:relative;z-index:1;color:var(--key-2);font-family:var(--f-mono);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:0 12px;
}
.plate.tall{aspect-ratio:4/5}
.plate.wide{aspect-ratio:16/11}
.plate.sq{aspect-ratio:1}
.tape{
  position:absolute;z-index:2;width:104px;height:28px;
  background:color-mix(in srgb,var(--ink-b) 30%,#FFFDF5);
  border-left:1px solid rgba(0,0,0,.07);border-right:1px solid rgba(0,0,0,.07);
  mix-blend-mode:multiply;
  clip-path:polygon(3% 6%,97% 0,100% 84%,96% 100%,4% 94%,0 12%);
}

/* ── section frame ──────────────────────────────────────────────── */
.f-sec{padding-block:clamp(46px,7vw,96px)}
.f-head{display:grid;gap:14px;grid-template-columns:minmax(0,1fr);margin-bottom:clamp(30px,4vw,54px)}
@media(min-width:940px){.f-head{grid-template-columns:13rem minmax(0,1fr);gap:36px;align-items:start}}
.stamp{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  border:1.5px solid var(--ink-a);color:var(--ink-a);padding:6px 11px;transform:rotate(-1.6deg);
  font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
}
.f-h2{font-size:clamp(2rem,4.6vw,3.7rem);max-width:20ch}
.f-deck{max-width:56ch;color:var(--key-2);margin:14px 0 0}

/* ── work ───────────────────────────────────────────────────────── */
.work-list{display:flex;flex-direction:column;gap:clamp(48px,7vw,112px)}
.work-item{display:grid;gap:clamp(20px,3vw,46px);grid-template-columns:minmax(0,1fr);align-items:center;position:relative}
@media(min-width:940px){
  .work-item{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)}
  .work-item.flip .w-media{order:2}
}
.w-num{
  position:absolute;left:-58px;top:0;font-family:var(--f-serif);font-size:4.4rem;line-height:.8;
  color:transparent;-webkit-text-stroke:1.4px var(--ink-a);writing-mode:vertical-rl;
  transform:rotate(180deg);opacity:.85;
}
@media(max-width:1180px){.w-num{display:none}}
.w-txt{display:flex;flex-direction:column;gap:13px}
.w-idx{display:flex;gap:12px;align-items:center;color:var(--quiet)}
.w-idx s{flex:1;height:1px;background:var(--line);display:block;text-decoration:none;max-width:110px}
.w-name{font-size:clamp(2rem,4.4vw,3.4rem)}
.w-role{color:var(--ink-a)}
.w-copy{margin:0;color:var(--key-2);max-width:52ch}
.w-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.w-tag{
  border:1.5px solid var(--line);padding:5px 9px;color:var(--quiet);
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  transition:transform .2s,border-color .2s,color .2s;
}
.w-tag:hover{transform:rotate(-2.5deg) scale(1.06);border-color:var(--ink-b);color:var(--ink-b)}
.w-jump{
  align-self:flex-start;margin-top:6px;color:var(--ink-a);background:none;border:none;cursor:pointer;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  padding:0 0 6px;position:relative;
}
.w-jump::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--ink-a);
  clip-path:polygon(0 55%,9% 15%,22% 62%,36% 18%,50% 60%,64% 20%,78% 58%,91% 22%,100% 50%,100% 100%,0 100%);
  transition:background .2s,transform .25s;transform-origin:left;
}
.w-jump:hover{color:var(--ink-b)}
.w-jump:hover::after{background:var(--ink-b);transform:scaleX(1.06)}

/* ── client links + the AI content strip ────────────────────────── */
.w-links{display:flex;flex-wrap:wrap;gap:20px;align-items:center;margin-top:6px}
.w-jump{margin-top:0}
.w-out{text-decoration:none;display:inline-block}
.strip{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:10px}
.strip-i{
  padding:0;border:1.5px solid var(--key);background:var(--stock-2);cursor:pointer;
  aspect-ratio:3/4;overflow:hidden;line-height:0;transition:transform .28s cubic-bezier(.2,.9,.25,1),box-shadow .28s;
}
.strip-i img{width:100%;height:100%;object-fit:cover;display:block}
.strip-i:hover{transform:translateY(-4px);box-shadow:6px 6px 0 -1px var(--ink-a);z-index:2}
@media(max-width:620px){.strip{grid-template-columns:repeat(3,1fr)}}

/* ── practice ───────────────────────────────────────────────────── */
.stations{position:relative}
.station{
  display:grid;grid-template-columns:3.2rem minmax(0,1fr);gap:16px;padding:17px 0;
  align-items:baseline;position:relative;transition:padding-left .3s cubic-bezier(.2,.9,.3,1);
}
@media(min-width:860px){.station{grid-template-columns:3.2rem 15rem minmax(0,1fr);gap:26px}}
.station + .station{border-top:1px dashed var(--line)}
.station b{font-family:var(--f-serif);font-weight:500;font-size:clamp(1.3rem,2.4vw,1.95rem);line-height:1;transition:color .25s}
.station p{margin:0;color:var(--key-2);font-size:.97rem}
.station:hover{padding-left:16px}
.station:hover b{color:var(--ink-a)}
.station:hover::before{
  content:"";position:absolute;left:0;top:50%;width:9px;height:9px;background:var(--ink-a);
  transform:translateY(-50%) rotate(12deg);border-radius:56% 44% 48% 52% / 50% 54% 46% 50%;
}

/* ── the two sides ──────────────────────────────────────────────── */
.duo{display:grid;gap:0;border:1.5px solid var(--key)}
@media(min-width:880px){.duo{grid-template-columns:1fr 1fr}}
.duo > div{padding:clamp(24px,3.4vw,46px);display:flex;flex-direction:column;gap:14px}
.duo > div + div{border-top:1.5px solid var(--key)}
@media(min-width:880px){.duo > div + div{border-top:none;border-left:1.5px solid var(--key)}}
.side-a{background:var(--stock);position:relative;overflow:hidden}
.side-a::after{
  content:"";position:absolute;right:-70px;bottom:-70px;width:230px;height:230px;
  background:var(--ink-b);mix-blend-mode:multiply;opacity:.24;
  border-radius:52% 48% 40% 60% / 44% 56% 44% 56%;
}
.side-a p{margin:0;color:var(--key-2);position:relative;z-index:1}
.side-a h3{position:relative;z-index:1}
.duo h3{margin:0;font-size:clamp(1.5rem,3vw,2.3rem)}
.side-b{background:var(--key);color:#DEDBD2}
.side-b h3{
  font-family:var(--f-mono);font-weight:500;font-size:clamp(1rem,1.9vw,1.32rem);
  letter-spacing:-.01em;text-transform:uppercase;color:#fff;line-height:1.3;
}
.side-b p{margin:0;color:#A8A59B;font-family:var(--f-mono);font-size:.78rem;line-height:1.85}
.side-b .mono{color:#6E6B62}

/* ── contact ────────────────────────────────────────────────────── */
.f-contact{padding-block:clamp(56px,8vw,110px) clamp(34px,5vw,60px);position:relative}
.f-mail{
  display:inline-block;margin-top:20px;text-decoration:none;color:var(--key);position:relative;
  font-family:var(--f-serif);font-weight:500;font-size:clamp(1.5rem,5.2vw,4rem);line-height:1.05;
  word-break:break-word;
}
.f-mail em{font-style:normal;position:relative;z-index:1}
.f-mail .ul{position:absolute;left:-4px;right:-4px;bottom:-6px;height:16px;color:var(--ink-b)}
.f-mail:hover{color:var(--ink-a)}
.f-foot{padding-block:22px 46px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
.f-foot>span.mono{margin-right:auto}
#front .f-social{text-decoration:none;transition:color .2s}
#front .f-social:hover{color:var(--ink-a)}

/* ── draggable stickers ─────────────────────────────────────────── */
.sticker{
  position:absolute;z-index:12;cursor:grab;user-select:none;touch-action:none;
  transition:box-shadow .2s;
}
.sticker.grabbed{cursor:grabbing;z-index:24}
.sticker.nudge{animation:nudge 1.5s ease-in-out 3}
@keyframes nudge{0%,100%{transform:rotate(var(--rot,0deg))}
  40%{transform:rotate(calc(var(--rot,0deg) + 5deg)) translateY(-3px)}
  70%{transform:rotate(calc(var(--rot,0deg) - 4deg))}}
.badge{
  width:118px;height:118px;border-radius:50%;background:var(--ink-a);color:#fff;
  display:grid;place-items:center;text-align:center;padding:14px;
  font-family:var(--f-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;line-height:1.7;
  box-shadow:5px 5px 0 -1px var(--key);
}
.chiprow{
  display:flex;gap:0;border:1.5px solid var(--key);background:var(--stock);padding:5px;
  box-shadow:4px 4px 0 -1px var(--ink-b);
}
.chiprow i{width:26px;height:34px;display:block}
.note{
  background:color-mix(in srgb,var(--ink-b) 22%,#FFFCF2);border:1.5px solid var(--key);
  padding:9px 13px;box-shadow:4px 4px 0 -1px var(--key);max-width:190px;
}
.note b{display:block;font-family:var(--f-hand);font-size:1.25rem;color:var(--key);font-weight:600;line-height:1.2}
@media(max-width:1080px){.sticker{display:none}}


/* ── the photograph ─────────────────────────────────────────────── */
.photo{
  position:relative;overflow:hidden;border:1.5px solid var(--key);background:var(--stock-2);
  transition:transform .45s cubic-bezier(.2,.9,.25,1),box-shadow .35s;
}
.photo img{display:block;width:100%;height:auto;filter:contrast(1.04) saturate(.96)}
.photo .wash{
  position:absolute;inset:0;background:var(--ink-b);mix-blend-mode:multiply;opacity:.14;
  transition:opacity .5s ease;pointer-events:none;
}
.photo:hover{transform:rotate(0deg) translateY(-4px);box-shadow:12px 12px 0 -1px var(--ink-a)}
.photo:hover .wash{opacity:0}

/* ── printed compositions inside the plates ─────────────────────── */
.plate{background:var(--stock)}
.pcomp{position:absolute;inset:8%;width:84%;height:84%;mix-blend-mode:multiply;opacity:.94}
.plate span{
  position:absolute;left:10px;bottom:9px;z-index:2;padding:0;text-align:left;
  background:color-mix(in srgb,var(--stock) 82%,transparent);padding:3px 6px;
}

/* ── the lab ────────────────────────────────────────────────────── */
.lab{display:grid;gap:1.5px;background:var(--key);border:1.5px solid var(--key)}
@media(min-width:760px){.lab{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.lab{grid-template-columns:repeat(3,1fr)}}
.lab-item{background:var(--stock);padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;gap:11px;position:relative;overflow:hidden}
.lab-item h3{margin:0;font-size:clamp(1.5rem,3vw,2.1rem)}
.lab-item p{margin:0;color:var(--key-2);font-size:.93rem;line-height:1.62}
.lab-item p b{color:var(--key);font-weight:600}
.lab-item::after{
  content:"";position:absolute;right:-46px;top:-46px;width:120px;height:120px;
  background:var(--ink-a);mix-blend-mode:multiply;opacity:.16;
  border-radius:50% 46% 54% 42% / 48% 52% 44% 56%;transition:transform .5s cubic-bezier(.2,.9,.3,1);
}
.lab-item:hover::after{transform:translate(-14px,14px) scale(1.25)}

/* ── credentials ────────────────────────────────────────────────── */
.creds{display:grid;gap:22px;margin-top:clamp(38px,5vw,60px);padding-top:26px;border-top:1px dashed var(--line)}
@media(min-width:820px){.creds{grid-template-columns:repeat(2,1fr);gap:26px 44px}}
@media(min-width:1180px){.creds{grid-template-columns:repeat(3,1fr)}}
.creds p{margin:7px 0 0;color:var(--key-2);font-size:.87rem;line-height:1.62}
.creds a{color:var(--ink-a)}

/* ── project photography ───────────────────────────────────────── */
.shot{
  position:relative;overflow:hidden;border:1.5px solid var(--key);background:var(--stock-2);
  transition:transform .45s cubic-bezier(.2,.9,.25,1),box-shadow .35s;line-height:0;
}
.shot img{display:block;width:100%;height:100%;object-fit:cover}
.shot .wash{
  position:absolute;inset:0;background:var(--ink-a);mix-blend-mode:multiply;
  opacity:.10;transition:opacity .45s;pointer-events:none;
}
.shot:hover{transform:rotate(0deg) translateY(-5px);box-shadow:12px 12px 0 -1px var(--ink-a)}
.shot:hover .wash{opacity:0}
.shot figcaption{
  position:absolute;left:9px;bottom:9px;right:9px;line-height:1.3;
  background:color-mix(in srgb,var(--stock) 90%,transparent);padding:5px 8px;
  font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--quiet);
  opacity:0;transition:opacity .3s;
}
.shot:hover figcaption{opacity:1}
.shot.tall{aspect-ratio:4/5}
.shot.wide{aspect-ratio:16/11}
.shot.sq{aspect-ratio:1}

/* ── the gallery ────────────────────────────────────────────────── */
.gallery{columns:2;column-gap:clamp(14px,2vw,26px)}
@media(min-width:820px){.gallery{columns:3}}
@media(min-width:1180px){.gallery{columns:4}}
.art{
  break-inside:avoid;margin:0 0 clamp(14px,2vw,26px);position:relative;cursor:pointer;
  border:1.5px solid var(--key);background:var(--stock-2);display:block;width:100%;padding:0;
  transition:transform .4s cubic-bezier(.2,.9,.25,1),box-shadow .35s;
}
.art img{display:block;width:100%;height:auto}
.art::after{
  content:"";position:absolute;inset:0;background:var(--ink-a);mix-blend-mode:multiply;
  opacity:.04;transition:opacity .4s;pointer-events:none;
}
.art:hover{transform:rotate(0deg) translateY(-5px);box-shadow:11px 11px 0 -1px var(--ink-a);z-index:2}
.art:hover::after{opacity:0}
.art figcaption{
  position:absolute;left:8px;bottom:8px;right:8px;display:flex;justify-content:space-between;gap:8px;
  background:color-mix(in srgb,var(--stock) 88%,transparent);padding:5px 8px;opacity:0;transition:opacity .3s;
}
.art:hover figcaption{opacity:1}
.art figcaption b{font-family:var(--f-serif);font-weight:600;font-size:.9rem;color:var(--key)}
.art figcaption span{font-family:var(--f-mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--quiet)}

/* ── lightbox ───────────────────────────────────────────────────── */
#lightbox{
  position:fixed;inset:0;z-index:85;background:var(--stock);
  display:flex;align-items:center;justify-content:center;padding:clamp(46px,6vw,74px) clamp(16px,5vw,90px);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;
}
#lightbox.open{opacity:1;visibility:visible}
.lb-fig{margin:0;display:flex;flex-direction:column;gap:12px;align-items:center;max-height:100%}
.lb-imgwrap{border:1.5px solid var(--key);background:var(--stock-2);line-height:0;max-height:78vh;overflow:hidden;box-shadow:14px 14px 0 -1px var(--ink-a)}
.lb-imgwrap img{display:block;max-height:78vh;max-width:100%;width:auto;height:auto}
.lb-fig figcaption{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;justify-content:center}
.lb-fig figcaption b{font-family:var(--f-serif);font-weight:600;font-size:1.25rem;color:var(--key)}
.lb-fig figcaption span{color:var(--quiet);font-family:var(--f-mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase}
.lb-close{position:fixed;top:16px;right:18px;border:1.5px solid var(--key);padding:8px 12px;background:var(--stock);color:var(--key);cursor:pointer}
.lb-nav{
  position:fixed;top:50%;transform:translateY(-50%);border:1.5px solid var(--key);background:var(--stock);
  color:var(--key);width:44px;height:44px;cursor:pointer;font-size:15px;
}
.lb-nav:hover,.lb-close:hover{background:var(--ink-a);border-color:var(--ink-a);color:#fff}
.lb-nav.prev{left:14px}.lb-nav.next{right:14px}
@media(max-width:700px){.lb-nav{top:auto;bottom:14px;transform:none}.lb-nav.prev{left:14px}.lb-nav.next{right:14px}}

/* ── reveal ─────────────────────────────────────────────────────── */
.rise{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.rise.seen{opacity:1;transform:none}

/* ═══ the switch: x-ray + wipe ════════════════════════════════════ */
#front.xray, #front.xray *{
  background:none !important;color:var(--ink-a) !important;border-color:var(--ink-a) !important;
  box-shadow:none !important;
}
#front.xray *{outline:1px solid color-mix(in srgb,var(--ink-a) 34%,transparent);outline-offset:-1px}
#front.xray{background:var(--stock) !important}
#front.xray .riso .lay.a,#front.xray .riso .lay.b{opacity:0}
#wipe{position:fixed;inset:0;z-index:90;pointer-events:none;display:grid;grid-template-columns:repeat(14,1fr)}
#wipe i{display:block;background:var(--key);transform:scaleY(0);transform-origin:top}
#wipe.dark i{background:var(--void)}
#wipe.light i{background:var(--stock)}
#wipe b{
  position:fixed;inset:0;display:grid;place-items:center;opacity:0;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.34em;text-transform:uppercase;font-weight:400;
  transition:opacity .22s ease;
}
#wipe.dark b{color:var(--signal)}
#wipe.light b{color:var(--ink-b)}
#wipe.on b{opacity:1}

/* first-visit note in the back of house */
#brief{
  position:fixed;left:0;right:0;bottom:0;z-index:25;padding:14px 20px 18px;
  display:none;gap:16px;align-items:flex-start;
  background:linear-gradient(0deg,rgba(9,11,15,.97) 60%,rgba(9,11,15,0));
}
#brief.show{display:flex}
#brief p{margin:0;max-width:74ch;color:var(--dim);font-size:.86rem;line-height:1.6}
#brief p b{color:var(--bone);font-weight:600}
@media(max-width:760px){#brief{display:none !important}}

@media (prefers-reduced-motion: reduce){
  .rise{opacity:1;transform:none}
  .sticker.nudge{animation:none}
  .draw path{stroke-dashoffset:0}
  #wipe i{transition:none !important}
}