/* =====================================================================
   STYLE.CSS. Change NUMBERS and COLORS freely, leave class NAMES alone.
   px = fixed size, rem = ~16px, vw = 1% screen width, svh = 1% screen height,
   fr = share of space in a grid, clamp(min, middle, max).
   padding/margin: A B C D = top, right, bottom, left.
   ===================================================================== */

/* THE SETTINGS SHELF: colors, side spacing and fonts used everywhere. */
:root{
  --paper:#E9EAE5; --ink:#1E201F; --grey:#656966; --line:#CBCDC6;
  --coral:#bc3c4a; --coral-d:#9e2f3b; --fill:#DFE1DB; --hatch:#D1D4CD;
  --pad:clamp(1.25rem,4vw,3.5rem);
  --serif:"Newsreader",Georgia,serif; --sans:"Instrument Sans",system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{background:var(--paper);color:var(--ink);font:400 1rem/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--coral);outline-offset:4px}
h2{font:400 clamp(2.2rem,5vw,4rem)/1.05 var(--serif);letter-spacing:-.01em}

/* .ul = the self-drawing coral underline. Add class="ul" to any link or button. */
.ul{background:linear-gradient(var(--coral),var(--coral)) left 100%/0 2px no-repeat;transition:background-size .45s cubic-bezier(.2,.8,.2,1),color .3s;padding-bottom:.15em}
.ul:hover,.ul[aria-pressed="true"]{background-size:100% 2px}
.ul:hover{color:var(--coral-d)}

/* HEADER BAR (fixed to the top). If you make it taller, raise html scroll-padding-top too. */
.top{position:fixed;inset:0 0 auto;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem var(--pad);background:var(--paper);border-bottom:1px solid var(--line)}
.top>a,.menu a{animation:drop .85s cubic-bezier(.3,1.5,.5,1) backwards;animation-delay:calc(var(--i)*70ms + 100ms)}
@keyframes drop{from{transform:translateY(-4.5rem);opacity:0}}
.brand{display:flex;align-items:center;gap:.6rem;font:600 1.2rem var(--serif)}
.brand img{width:34px;height:34px;mix-blend-mode:multiply;transition:transform .6s cubic-bezier(.3,1.6,.5,1)}
.brand:hover img{transform:rotate(-24deg)}
.menu{display:flex;gap:clamp(1rem,2.6vw,2.2rem);font-weight:500;font-size:.95rem}

/* HERO: first screen. Two columns: name on the left, featured art on the right. */
.hero{min-height:100svh;display:grid;grid-template-columns:1.15fr .85fr;gap:var(--pad);align-items:center;padding:6.5rem var(--pad) 3rem}
.name{width:min(100%,640px);height:auto;overflow:visible}
.name text{stroke-linejoin:round}

/* The "writing itself" animation on your name. */
.fill text{fill:var(--coral);fill-opacity:0;stroke:var(--coral);stroke-width:2.5;stroke-dasharray:1500;stroke-dashoffset:1500;animation:draw 2.6s .5s ease forwards,fillin .8s 2.8s ease forwards}
.ink text{fill:none;stroke:var(--ink);stroke-width:1;stroke-dasharray:1500;stroke-dashoffset:1500;animation:draw 2.3s .9s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fillin{to{fill-opacity:1}}

.sub{font:italic 400 clamp(1.2rem,2.2vw,1.6rem)/1.3 var(--serif);margin:1.5rem 0 1.2rem;max-width:26ch;animation:fade .8s 3s backwards}
.go{display:inline-block;font-weight:500;animation:fade .8s 3.2s backwards}
@keyframes fade{from{opacity:0}}

/* FEATURED PIECE in the hero */
.feature{justify-self:end;width:min(100%,calc(70svh*.8))}
.feature .art{animation:wipe 1.1s 1.7s cubic-bezier(.7,0,.2,1) backwards}
.feature .cap{animation:fade .8s 2.8s backwards}
@keyframes wipe{from{clip-path:inset(0 0 100% 0)}}

/* HERO FAN: the featured piece with two cards hiding behind it */
.fan{position:relative;justify-self:end;width:min(100%,calc(70svh*.8))}
.fan .feature{position:relative;z-index:3;width:100%}
.fan-card{position:absolute;top:0;left:0;display:block;cursor:zoom-in;box-shadow:0 10px 30px rgba(30,32,31,.18);transition:transform .7s cubic-bezier(.2,.8,.2,1);animation:fade .8s 2.6s backwards}
.fan-card img{width:100%;height:auto}
.fan-a{width:55%;z-index:1;transform:translate(-8%,0) rotate(4deg)}
.fan-b{width:50%;z-index:2;transform:translate(-7%,-2%) rotate(-5deg)}
.fan-card::after{content:attr(data-title);position:absolute;top:100%;left:0;margin-top:.5rem;font:italic 400 1.15rem/1.2 var(--serif);opacity:0;transition:opacity .4s;pointer-events:none}
@media(hover:hover){
  .fan:hover .fan-a{transform:translate(-127%,258%) rotate(5deg)}
  .fan:hover .fan-b{transform:translate(-116%,0) rotate(-6deg)}
  .fan:hover .fan-card::after{opacity:1}
}
@media(hover:hover){
  .fan:has(:focus-visible) .fan-a{transform:translate(-127%,258%) rotate(5deg)}
  .fan:has(:focus-visible) .fan-b{transform:translate(-116%,0) rotate(-6deg)}
  .fan:has(:focus-visible) .fan-card::after{opacity:1}
}

/* .art = the picture frame. Placeholders get stripes; real images fit their own shape. */
.art{aspect-ratio:var(--r,4/5);background:repeating-linear-gradient(135deg,transparent 0 9px,var(--hatch) 9px 10px),var(--fill);display:grid;place-items:center;text-align:center;font:italic 400 1rem/1.4 var(--serif);color:var(--grey);transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s cubic-bezier(.2,.8,.2,1)}
.art:has(img){aspect-ratio:auto;background:none;display:block}
.art img{width:100%;height:auto}

/* .plate = one artwork + its caption */
.plate{display:block}
.plate[data-zoom],.feature{cursor:zoom-in}
.plate:hover .art{transform:translateY(-6px);box-shadow:7px 7px 0 var(--coral)}
.cap{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:.8rem}
.t{font:400 1.35rem/1.2 var(--serif);background:linear-gradient(var(--coral),var(--coral)) left 100%/0 2px no-repeat;transition:background-size .5s cubic-bezier(.2,.8,.2,1),transform .4s cubic-bezier(.2,.8,.2,1);padding-bottom:.1em}
.m{font-size:.9rem;color:var(--grey);white-space:nowrap}
.plate:hover .t{background-size:100% 2px;transform:translateX(6px)}

/* Caps how big each piece can get on the wall. Tall posters shrink; wide pieces
   (cards, Wilkins) are already under the cap, so they don't change.
   Make them smaller: lower 68svh / 640px. Bigger: raise them. */
.wall .plate{max-width:calc(min(500svh,5000px)*var(--ar,100))}
.index .plate{max-width:none}

/* WORK SECTION */
.work{padding:5rem var(--pad) 6rem}
.bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:1rem 2rem;margin-bottom:3.5rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.filters,.views{display:flex;gap:1.4rem;font-weight:500;font-size:.95rem}
.filters{margin-right:auto;margin-left:clamp(1.5rem,4vw,3rem)}

/* Subsection row (Advertising, Branding...) */
.subs{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;margin:-2.2rem 0 3rem;font-weight:500;font-size:.9rem;color:var(--grey)}
.subs button[aria-pressed="true"]{color:var(--ink)}

/* THE WALL. One grid with two columns. Pieces fill it in works.js order:
   1st = left, 2nd = right, then the next row. Each row starts at the same height.
   row-gap = space between rows, column-gap = space between left and right.
   These two numbers are the ONLY spacing between pieces, so it is always even. */
.wall{display:block}
.cat-block{margin-bottom:clamp(3rem,6vw,5rem)}
.cat-flow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(1rem,2vw,2rem);row-gap:clamp(3rem,6vw,5rem);align-items:start}

/* .set = one piece alone, OR a group that belongs together (front/back of a card). */
.set{display:grid;gap:clamp(.9rem,1.6vw,1.4rem);align-content:start;min-width:0}

/* layout:"row" group: takes a full row, pages side by side, same gap as the wall. */
.set.row{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(1rem,2vw,2rem)}

/* INDEX VIEW: pictures hidden, just a list of titles. */
.index .cat-block{margin-bottom:0}
.index .cat-flow{display:block}
.index .set{display:block}
.index .plate{margin:0;padding:1.1rem 0;border-top:1px solid var(--line)}
.index .set:last-child .plate:last-child{border-bottom:1px solid var(--line)}
.index .art{display:none}
.index .cap{margin:0}
.index .t{font-size:clamp(1.4rem,3vw,2.2rem)}

.empty{font:italic 400 1.2rem/1.4 var(--serif);color:var(--grey)}

/* ABOUT */
.about{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr 1.3fr;gap:var(--pad);padding:5rem var(--pad);border-top:1px solid var(--line)}
.bigmark{position:fixed;z-index:-1;left:50%;top:55%;transform:translate(-50%,-50%);width:min(400vw,75svh,640px);opacity:.10;mix-blend-mode:multiply;pointer-events:none}
.about>*{position:relative}
.about-copy{max-width:60ch;font:400 1.2rem/1.65 var(--serif)}
dl{margin-top:2rem;display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.5rem;font:400 1rem/1.5 var(--sans)}
dt{font-weight:500}
dd{color:var(--grey)}
.resume{margin-top:2rem;font:500 1rem/1.5 var(--sans)}

/* CONTACT */
.contact{padding:5rem var(--pad) 6rem;border-top:1px solid var(--line)}
.mail{display:inline-block;margin:1.5rem 0 1.2rem;font:400 clamp(1.8rem,6.5vw,5rem)/1.1 var(--serif);background-position:left 96%;background-size:0 4px}
.mail:hover{background-size:100% 4px}
.links{display:flex;gap:1.6rem;font-weight:500}
.foot{padding:1.5rem var(--pad);border-top:1px solid var(--line);font-size:.9rem;color:var(--grey)}

/* TIP BUBBLE (desktop only: hidden on touch devices).
   Hand-drawn: the outline is made by main.js and draws itself like your name intro. */
.lb-tip{display:none}
.lb.has-3d img{cursor:pointer}
@media(hover:hover) and (pointer:fine){

  /* .lb-tip = the invisible holder. It positions the bubble and fades it in and out.
     top = how far from the top of the screen. */
  .lb-tip{display:block;position:absolute;top:.6rem;left:50%;transform:translate(-50%,-6px);
    max-width:min(30rem,calc(100% - 14rem));color:var(--ink);opacity:0;pointer-events:none;
    transition:opacity .4s,transform .5s cubic-bezier(.3,1.5,.5,1)}   /* the springy settle when it appears */
  .lb-tip.on{opacity:1;transform:translate(-50%,0)}

  /* .tip-in = the bubble itself. padding = the space between the text and the outline.
     The animation is the slow float: 3.2s per bob, starts 1.4s in (after the line has drawn). */
  .tip-in{position:relative;padding:.8rem 1.6rem 1rem;animation:tipbob 3.2s ease-in-out 1.4s infinite}
  @keyframes tipbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

  /* The text: your italic serif, fades in after the line starts drawing (.45s delay) */
  .tip-t{position:relative;display:block;font:italic 400 1.1rem/1.3 var(--serif);text-align:center;
    opacity:0;transition:opacity .4s .45s}
  .lb-tip.on .tip-t{opacity:1}

  /* The three outlines, stacked */
  .tip-svg{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
  .tip-svg path{fill:none;stroke-linecap:round;stroke-linejoin:round}

  /* paper fill, so the menu behind it doesn't show through */
  .tip-svg .tip-bg{fill:var(--paper);stroke:none;opacity:0;transition:opacity .4s}
  .lb-tip.on .tip-bg{opacity:1}

  /* thin dark outline, nudged 4px right and 3px down: the same trick as your name */
  .tip-svg .tip-ink{stroke:var(--ink);stroke-width:1;transform:translate(4px,3px)}
  /* thick coral line on top. stroke-width = how bold it is. */
  .tip-svg .tip-line{stroke:var(--coral);stroke-width:2.4}

  /* the "draws itself" effect: the line starts hidden (dashoffset 1) and slides to
     fully drawn (0) over 1 second. The ink outline starts .15s later. */
  .tip-svg .tip-ink,.tip-svg .tip-line{stroke-dasharray:1 2;stroke-dashoffset:1;
    transition:stroke-dashoffset 1s cubic-bezier(.6,0,.2,1)}
  .tip-svg .tip-ink{transition-delay:.15s}
  .lb-tip.on .tip-ink,.lb-tip.on .tip-line{stroke-dashoffset:0}
}

/* IMAGE VIEWER POP-UP */
.lb{position:fixed;inset:0;z-index:100;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;padding:3.5rem 1rem 1.5rem;background:rgba(233,234,229,.97)}
.lb figure{min-width:0;display:grid;justify-items:center;gap:.8rem}
.lb img{max-width:100%;max-height:calc(100svh - 10.5rem);width:auto;height:auto;object-fit:contain}
.lb.has-info img{max-height:calc(100svh - 18rem)}
.lb figcaption{font:400 1.2rem/1.3 var(--serif);text-align:center}
.lb-t{display:block}
.lb-m{display:block;margin-top:.3rem;font:400 .9rem/1.4 var(--sans);color:var(--grey)}
.lb-i{display:block;max-width:60ch;max-height:7rem;overflow-y:auto;margin:.8rem auto 0;font:400 1rem/1.6 var(--sans);color:var(--ink);text-align:center;white-space:pre-line}
.lb-m:empty,.lb-i:empty{display:none}
.lb-x{position:absolute;top:1rem;right:var(--pad);font-weight:500}
/* Arrow buttons: soft coral highlight, slight grow + nudge on hover/focus,
   and a quick press-down on click so they feel satisfying. */
.lb-n{
  display:grid;place-items:center;width:3.25rem;height:3.25rem;padding:0;
  border-radius:50%;font:400 2rem/1 var(--serif);transform-origin:50% 50%;
  transition:color .25s,background-color .25s,transform .25s cubic-bezier(.3,1.6,.5,1),box-shadow .25s;
}
.lb-prev:hover,.lb-prev:focus-visible{
  color:var(--coral);background:rgba(188,60,74,.10);
  transform:translateX(-4px) scale(1.14);
  box-shadow:0 0 0 1px var(--coral) inset,0 6px 16px rgba(188,60,74,.18);
}
.lb-next:hover,.lb-next:focus-visible{
  color:var(--coral);background:rgba(188,60,74,.10);
  transform:translateX(4px) scale(1.14);
  box-shadow:0 0 0 1px var(--coral) inset,0 6px 16px rgba(188,60,74,.18);
}
.lb-n:active{transform:scale(.94)}
/* reduced motion: keep the coral highlight but skip the grow/nudge/press */
@media(prefers-reduced-motion:reduce){
  .lb-n{transition:color .25s,background-color .25s,box-shadow .25s}
  .lb-prev:hover,.lb-prev:focus-visible,.lb-next:hover,.lb-next:focus-visible,.lb-n:active{transform:none}
}
.lb.single .lb-n{visibility:hidden}

/* 3D VIEWER inside the pop-up */
.lb-mv{width:min(100%,900px);height:max(320px,calc(100svh - 12rem));background:#3b3b3b;--poster-color:#000}
.lb.has-info .lb-mv{height:max(320px,calc(100svh - 19rem))}
.lb-3d{font-weight:500}


/* EXPAND: bigger view inside the pop-up. main.js adds .expanded to .lb.
   The picture fills the window width and you scroll to see the rest.
   2200px is the biggest it will grow. Raise it for huge screens, lower it if images look soft. */
.lb-ex{position:fixed;top:1rem;right:calc(var(--pad) + 5rem);z-index:1;font-weight:500}
.lb.expanded{display:block;overflow:auto;padding:4rem var(--pad) 3rem}
.lb.expanded figure{display:grid;justify-items:center;gap:.8rem}
.lb.expanded img{width:100%;max-width:min(100%,1000px);max-height:none;cursor:zoom-out}
.lb.expanded .lb-mv,.lb.expanded.has-info .lb-mv{width:min(100%,1200px);height:calc(100svh - 8rem)}
.lb.expanded .lb-n,.lb.expanded .lb-tip{display:none}
.lb.expanded .lb-x,.lb.expanded .lb-ex{position:fixed;z-index:2;padding:.2rem .7rem;background-color:var(--paper)}
.lb img{cursor:zoom-in}

/* PHONE RULES (800px wide or less) */
@media(max-width:800px){
  .set.row{grid-template-columns:1fr}
  .top{flex-wrap:wrap;gap:.4rem 1rem}
  .menu{width:100%;gap:1.1rem;font-size:.9rem;overflow-x:auto}
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:8rem}
  .feature{justify-self:start;width:min(100%,420px)}
  .cat-flow{grid-template-columns:1fr}
  .cat-flow>.set{grid-column:1!important}
  .filters{margin-left:0;order:3;width:100%}
  .about{grid-template-columns:1fr}
  .lb{gap:.25rem;padding-inline:.5rem}
  .lb-n{padding:.5rem .4rem;font-size:1.5rem}
}

/* REDUCED MOTION */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .fill text{fill-opacity:1;stroke-dashoffset:0}
  .ink text{stroke-dashoffset:0}
}

/* HAND-DRAWN DOODLES (they draw themselves when scrolled into view) */
.doodle{position:absolute;pointer-events:none;overflow:visible;fill:none;stroke:var(--coral);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;animation:boil 1.4s steps(1) infinite}
.doodle path{stroke-dasharray:1 2;stroke-dashoffset:1.05;transition:stroke-dashoffset 1.2s cubic-bezier(.6,0,.2,1)}
.doodle.in path{stroke-dashoffset:0}
@keyframes boil{0%{transform:translate(0,0) rotate(0)}33%{transform:translate(1px,-1px) rotate(.4deg)}66%{transform:translate(-1px,1px) rotate(-.4deg)}}


/* The long line down the left side that draws as you scroll */
.trail{position:fixed;left:0;top:0;width:6rem;height:100svh;z-index:-1;pointer-events:none;fill:none;stroke:var(--coral);stroke-width:2;stroke-linecap:round;opacity:.55}
.trail path{stroke-dasharray:1 2;stroke-dashoffset:1.05}
@media(max-width:800px){.trail{display:none}}


/* leaves blown by wind. The path each leaf follows is now built in leaves.js,
   so the CSS only has to draw the leaf and its small flutter. */
.leaves{position:fixed;inset:0;z-index:10000;pointer-events:none;overflow:hidden}
.leaves i{position:absolute;left:0;top:0;width:var(--w);height:calc(var(--w)*.55);will-change:transform}
.leaves i::before{content:"";position:absolute;inset:0;background:var(--c);border-radius:0 100% 0 100%;animation:flutter var(--flap) ease-in-out infinite alternate}
@keyframes flutter{
  from{transform:translateY(calc(var(--wob) * -1)) rotate(calc(var(--spin) * -1))}
  to{transform:translateY(var(--wob)) rotate(var(--spin))}
}

/* INSTAGRAM WARNING POP-UP (social.js) */
.ig-back{position:fixed;inset:0;z-index:20000;display:grid;place-items:center;padding:1rem;background:rgba(30,32,31,.35)}
.ig-win{width:min(22rem,100%);background:var(--paper);border:2px solid var(--ink);box-shadow:7px 7px 0 var(--ink);
  animation:pop .6s cubic-bezier(.3,1.5,.5,1) backwards;transform-origin:50% 60%;
  transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
.ig-win.t1{transform:rotate(-10deg) translateY(6px)}
.ig-win.t2{transform:rotate(8deg) translateY(-2px)}
.ig-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.35rem .5rem .35rem .8rem;background:var(--coral);color:var(--paper);border-bottom:2px solid var(--ink);font:500 .9rem/1.2 var(--sans)}
.ig-x{width:1.4rem;height:1.4rem;display:grid;place-items:center;background:var(--paper);color:var(--ink);border:2px solid var(--ink);font:600 .95rem/1 var(--sans)}
.ig-x:hover{background:var(--ink);color:var(--paper)}
.ig-body{display:grid;justify-items:center;gap:1rem;padding:1.2rem 1.4rem 1.5rem;text-align:center}

/* the caution line: fades and collapses when it "clears" */
.ig-warn{display:flex;align-items:center;gap:.7rem;text-align:left;font:400 .95rem/1.35 var(--sans);color:var(--coral-d);
  max-height:5rem;overflow:hidden;transition:opacity .5s,max-height .5s .1s,margin .5s .1s}
.ig-warn b{font:600 1.1rem/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase}
.ig-tri{flex:none;width:2.2rem;height:2.2rem}
.ig-warn.gone{opacity:0;max-height:0;margin-block:-.5rem}

/* CAUTION PULSE: the triangle and the Warning text slowly fade down and back up.
   It goes on the CHILDREN of .ig-warn (the icon and the text), not on .ig-warn itself,
   because .ig-warn already uses opacity to fade away when the loading finishes.
   Two animations fighting over the same property would break that fade-out. */
.ig-warn > *{animation:caution 1.2s ease-in-out infinite}
@keyframes caution{
  0%, 100%{color:var(--coral-d)}
  50%{color:var(--ink)}
}

.ig-logo{width:4.5rem;height:4.5rem;color:var(--ink)}
.ig-track{width:100%;height:16px;border:2px solid var(--ink);background:var(--paper);overflow:hidden}
.ig-track i{display:block;height:100%;background:var(--coral);transform-origin:left;transform:scaleX(0)}
.ig-status{font:italic 400 1.15rem/1.2 var(--serif)}


/* =====================================================================
   HOME PAGE CLEANUP (v2)
   Paste this whole block at the very BOTTOM of style.css.
   If you pasted the first version, delete it and use this one instead.
   It only touches classes the home page uses (.hero, .work, .bar, .wall,
   .plate, .cat-title, .contact), so process.html and about.html are unaffected.
   Nothing here renames a class, link, category or subsection.
   ===================================================================== */

/* ---------- 1. One shared side margin, capped on huge screens ---------- */
.hero,.work,.contact,.foot{
  --gut:max(var(--pad),calc((100% - 1500px) / 2));
  padding-left:var(--gut);
  padding-right:var(--gut);
}

/* ---------- 2. HERO ---------- */
.hero{
  gap:clamp(2rem,6vw,6rem);
  padding-top:7rem;
  padding-bottom:4rem;
}
.sub{margin:1.8rem 0 1.6rem}
.go{padding-bottom:.25em}

/* ---------- 3. WORK header: title | filters | views on one aligned line ---------- */
.work{padding-top:6rem;padding-bottom:7rem}
.bar{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:baseline;
  column-gap:clamp(1.5rem,4vw,3rem);
  row-gap:1rem;
  margin-bottom:2.5rem;
  padding-bottom:1.2rem;
}
.filters{margin:0;flex-wrap:wrap;gap:.6rem 1.6rem}
.views{gap:1.4rem}

/* Subsection row: sits right under the bar (no more negative margin) */
.subs{margin:0 0 3rem;padding-top:.2rem;gap:.5rem 1.6rem}
.bar:has(+ .subs:not([hidden])){margin-bottom:1.2rem}

/* ---------- 4. CATEGORY HEADINGS (needs the 2 small main.js edits) ----------
   Numbered 01, 02, 03 automatically. Only shown when "All" is selected. */
.wall{counter-reset:cat}
.cat-block{counter-increment:cat}
.cat-title{
  display:flex;align-items:baseline;gap:1rem;
  margin:0 0 2rem;padding-bottom:.9rem;
  border-bottom:1px solid var(--line);
  font:400 clamp(1.6rem,3.2vw,2.4rem)/1.1 var(--serif);
  letter-spacing:-.01em;
}
.cat-title::before{
  content:counter(cat,decimal-leading-zero);
  font:italic 400 1.1rem var(--serif);
  color:var(--coral-d);
}
.wall:not([data-filter="all"]) .cat-title{display:none}
.index .cat-block{margin-bottom:2.5rem}

/* ---------- 5. THE WALL: every piece is a white card, like the Process page ---------- */
.cat-flow{
  column-gap:clamp(1.5rem,3vw,3rem);
  row-gap:clamp(2.5rem,5vw,4.5rem);
}
.set{gap:clamp(1rem,2vw,1.8rem)}

.wall .plate{
  width:100%;
  background:#fff;
  padding:clamp(.7rem,1.4vw,1.1rem);
  box-shadow:0 22px 40px -24px rgba(64,53,61,.5);
  transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s cubic-bezier(.2,.8,.2,1);
}
.wall .plate:hover{transform:translateY(-6px);box-shadow:7px 7px 0 var(--coral)}
.wall .plate:hover .art{transform:none;box-shadow:none}
.wall .cap{margin-top:1rem;padding:0 .2rem .2rem}
.wall .t{font-size:1.25rem}
.wall .m{font-size:.85rem}

/* OPTIONAL: fills the empty slot beside a lone piece (e.g. DMC Tote Bag) with the
   next piece that fits. It slightly changes the order from works.js, so it is off.
   To try it, delete the slashes-and-stars around the next line.
.cat-flow{grid-auto-flow:row dense}
*/

/* INDEX view stays a plain list: undo the card look */
.index .plate,.index .plate:hover{
  background:none;box-shadow:none;padding:1.1rem 0;transform:none;
}
.index .cap{padding:0}

/* ---------- 6. CONTACT: dark teal band, matching the dark band on Process ---------- */
.contact{
  position:relative;isolation:isolate;overflow:hidden;
  padding-top:6rem;padding-bottom:7rem;
  background:#1f4b4e;color:#dcebea;border-top:0;
}
.contact::after{
  content:"";position:absolute;z-index:-1;top:50%;right:-8%;height:170%;aspect-ratio:1;
  transform:translateY(-50%);
  background:rgba(255,255,255,.05);
  -webkit-mask:url(assets/mark.png) center/contain no-repeat;
  mask:url(assets/mark.png) center/contain no-repeat;
  pointer-events:none;
}
.contact h2{color:#f4ece4}
.contact .mail{color:#f4ece4;margin:2rem 0 1.8rem}
.contact .ul{background-image:linear-gradient(#e58a93,#e58a93)}
.contact .ul:hover{color:#e58a93}
.contact .links{gap:2rem}

.foot{padding-top:1.6rem;padding-bottom:1.6rem}

/* ---------- 7. PHONES ---------- */
@media(max-width:800px){
  .hero{padding-top:8rem;padding-bottom:3rem}
  .work{padding-top:4rem;padding-bottom:5rem}
  .bar{grid-template-columns:1fr auto}
  .filters{grid-column:1/-1;order:3;width:100%;flex-wrap:nowrap;overflow-x:auto;padding-bottom:.3rem}
  .contact{padding-top:4rem;padding-bottom:5rem}
  .contact::after{right:-30%;height:120%}
}


/* CONCEPT ART + 3D SCULPTURE: three across, last row centered */
.cat-block:has(.plate[data-cat="concept art"]) .cat-flow,
.cat-block:has(.plate[data-cat="3D sculpture"]) .cat-flow{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:clamp(2.5rem,5vw,4.5rem) clamp(1.5rem,3vw,3rem);
}
.cat-block:has(.plate[data-cat="concept art"]) .cat-flow>.set,
.cat-block:has(.plate[data-cat="3D sculpture"]) .cat-flow>.set{
  flex:0 0 calc((100% - 2 * clamp(1.5rem,3vw,3rem)) / 3);
  max-width:calc((100% - 2 * clamp(1.5rem,3vw,3rem)) / 3);
}

/* Titles stack above the category label, so long names don't get squeezed */
.wall .cap{flex-direction:column;align-items:flex-start;gap:.3rem}

@media(max-width:800px){
  .cat-block:has(.plate[data-cat="concept art"]) .cat-flow>.set,
  .cat-block:has(.plate[data-cat="3D sculpture"]) .cat-flow>.set{flex-basis:100%;max-width:100%}
}

/* Nav bar line matches the teal contact band at the bottom */
.top{border-bottom-color:#1f4b4e}