@import url(../fonts/fonts.css);
/* Pesce Design: one dark base sitewide. Palette C v3 screen values (CMYK masters in brand/palette_C_v3.md).
   Color rules: charcoal/black + K-only grays + white type; Signal Yellow = the single accent; purple only for the scroll-progress bar. */
:root{
  --black:#000;--charcoal:#1F1F1F;--g80:#333;--g65:#595959;--g50:#808080;--g37:#A1A1A1;--g20:#CCC;--g10:#E6E6E6;--white:#fff;
  --yellow:#FFCC00;--p500:#622A8C;--p300:#9874B2;
  --text:#E6E6E6;--muted:#CCCCCC;--line:#3d3d3d;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'Archivo','Inter',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --max:1240px;--gut:clamp(20px,4vw,48px);
  /* fine grain + faint 24px print grid, ~1 KB inline SVG */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--charcoal)}
body{margin:0;color:var(--text);font:400 17px/1.65 var(--sans);background-color:var(--charcoal);
  background-image:var(--grain),linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:160px 160px,24px 24px,24px 24px}
img{max-width:100%;height:auto;display:block}
a{color:var(--white);text-decoration-color:var(--yellow);text-underline-offset:4px;text-decoration-thickness:1.5px}
a:hover{color:var(--yellow)}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
::selection{background:var(--yellow);color:var(--black)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:var(--black);color:var(--yellow);padding:8px 12px;z-index:20}
h1,h2,h3{font-family:var(--display);font-stretch:108%;line-height:1.08;letter-spacing:-.01em;margin:0 0 .5em;font-weight:750;color:var(--white)}
h1{font-size:clamp(2.2rem,5.2vw,4.1rem)} h2{font-size:clamp(1.7rem,3.4vw,2.6rem)} h3{font-size:1.25rem;font-stretch:100%}
h1 em,h2 em{font-style:normal;color:var(--yellow)}
p{margin:0 0 1em}
.label{font:500 .875rem/1.35 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--yellow);margin:0 0 .9em;display:block}
.lede{font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.55;max-width:40em;color:var(--text)}
.muted{color:var(--muted)}
/* header */
.site-head{background:rgba(20,20,20,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:8}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px}
.brand img{height:50px;width:auto}
.nav{display:flex;gap:clamp(16px,2.6vw,34px);font:500 .875rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.nav a{color:var(--g10);text-decoration:none;padding:8px 0;border-bottom:2px solid transparent}
.nav a:hover{color:var(--white);border-bottom-color:var(--g37)} .nav a[aria-current=page]{color:var(--white);border-bottom-color:var(--yellow)}
@media (max-width:640px){.site-head .wrap{height:auto;padding-top:10px;padding-bottom:6px;flex-direction:column;gap:4px}.brand img{height:42px}.nav{gap:20px}}
/* sections: no colored blocks, just hairline dividers on the one base */
section{padding:clamp(56px,8vw,104px) 0}
section+section{position:relative}
section+section::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--p500),#471F66 60%,var(--p500))}
section+section::after{content:"";position:absolute;top:-5px;left:max(var(--gut),calc((100% - var(--max))/2 + var(--gut)));width:9px;height:9px;border:2px solid var(--p300);background:var(--charcoal)}
section.tight::before,section.tight::after,section[style*="padding-top:0"]::before,section[style*="padding-top:0"]::after{display:none}
.rule{border:0;border-top:1px solid var(--line);margin:0}
.panel{background:rgba(0,0,0,.35);border:1px solid var(--line);padding:clamp(24px,3vw,40px)}
/* hero */
.hero{padding:clamp(48px,7vw,96px) 0 clamp(40px,6vw,72px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero-logo{width:min(100%,400px);margin-bottom:28px}
.hero h1{font-size:clamp(2rem,4.2vw,3.4rem)}
.spec{display:flex;flex-wrap:wrap;gap:8px 22px;margin:26px 0 0;padding:0;list-style:none;font:400 .875rem/1.45 var(--mono);color:var(--muted)}
.spec li::before{content:"";display:inline-block;width:9px;height:9px;border:1.5px solid var(--yellow);margin-right:9px;vertical-align:1px}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}.hero-logo{width:min(70%,300px)}}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font:600 .875rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:15px 22px;border:2px solid var(--yellow);background:var(--black);color:var(--yellow)!important}
.btn:hover{background:var(--yellow);color:var(--black)!important}
.btn.ghost{background:transparent;color:var(--white)!important;border-color:var(--g37)}
.btn.ghost:hover{border-color:var(--white);background:transparent}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
/* anchor frame: the DESIGN-box corner anchors reused on images */
.frame{position:relative;display:block;background:var(--black)}
.frame>i{position:absolute;width:12px;height:12px;border:2px solid var(--white);background:var(--charcoal);z-index:2;opacity:0;transition:opacity .15s,background .15s}
.frame>i:nth-of-type(1){left:-6px;top:-6px}.frame>i:nth-of-type(2){right:-6px;top:-6px}.frame>i:nth-of-type(3){left:-6px;bottom:-6px}.frame>i:nth-of-type(4){right:-6px;bottom:-6px}
.frame::after{content:"";position:absolute;inset:0;border:1.5px solid var(--white);opacity:0;transition:opacity .15s;pointer-events:none}
.card:hover .frame>i,.card:focus-visible .frame>i,.card:hover .frame::after,.card:focus-visible .frame::after,.frame.on>i,.frame.on::after{opacity:1}
.card:hover .frame>i:nth-of-type(2),.card:focus-visible .frame>i:nth-of-type(2){background:var(--yellow);border-color:var(--yellow)} /* the "selected" anchor */
.frame img{width:100%;height:100%;object-fit:cover}
.frame.contain{background:var(--white)} .frame.contain img{object-fit:contain}
/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:clamp(28px,3vw,44px)}
.card{display:block;color:inherit;text-decoration:none;background:none;border:0;padding:0;text-align:left;font:inherit;cursor:pointer;width:100%}
.card .frame{aspect-ratio:4/3;overflow:visible}.card .frame picture{display:block;height:100%;overflow:hidden}
.card h3{margin:16px 0 6px}
.card .credit-line{font:500 .875rem/1.4 var(--mono);color:var(--yellow);margin:0 0 6px;letter-spacing:.02em}
.card p{margin:0;color:var(--muted);font-size:1rem;line-height:1.5}
.card .tags{font:400 .8125rem/1.45 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--g37);margin-top:10px}
.card .more{font:500 .875rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--white);margin-top:12px;display:inline-flex;gap:8px;border-bottom:1.5px solid var(--yellow);padding-bottom:4px}
.card .badge{position:absolute;right:10px;bottom:10px;z-index:3;font:500 .8125rem/1 var(--mono);background:rgba(0,0,0,.8);color:var(--white);padding:7px 9px;border:1px solid var(--g65)}
.card.is-hidden{display:none}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,48px)}
.section-head h2{margin:0}
/* filters */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px}
.filters button{font:500 .875rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:12px 15px;border:1.5px solid var(--g65);background:transparent;color:var(--g10);cursor:pointer}
.filters button:hover{border-color:var(--white);color:var(--white)}
.filters button[aria-pressed=true]{background:var(--yellow);color:var(--black);border-color:var(--yellow)}
/* special cards */
.swatches{display:grid;grid-template-columns:repeat(5,1fr);height:100%}
.swatches span{display:flex;align-items:end;padding:8px;font:500 .75rem/1.25 var(--mono)}
.brandcard{position:absolute;inset:0;display:grid;grid-template-rows:minmax(0,1.5fr) minmax(0,1fr)}
.brandcard .lg{display:flex;align-items:center;justify-content:center;background:var(--black);min-height:0;overflow:hidden}
.frame .brandcard img{object-fit:contain;width:auto;height:auto;max-width:100%;max-height:72%}
.aptcard{position:absolute;inset:0;background:var(--black);display:flex;align-items:center;justify-content:center;padding:12%}
.frame .aptcard img{object-fit:contain;width:100%;height:auto}
/* facts lists */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.facts{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.facts li{padding:15px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:10em 1fr;gap:16px}
.facts b{font:500 .875rem/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--g37)}
@media (max-width:520px){.facts li{grid-template-columns:1fr;gap:2px}}
/* project page */
.p-hero{padding:clamp(40px,6vw,72px) 0 32px}
.crumbs{font:500 .875rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-bottom:24px}
.crumbs a{color:var(--muted);text-decoration:none}.crumbs a:hover{color:var(--white)}
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));border-top:2px solid var(--yellow);margin-top:32px}
.meta div{padding:14px 16px 14px 0;border-bottom:1px solid var(--line)}
.meta dt{font:500 .8125rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--g37)}
.meta dd{margin:5px 0 0;font-weight:500;color:var(--white)}
.case{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.case h2{font:500 1rem/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;display:flex;gap:10px;align-items:center;color:var(--yellow)}
.case h2::before{content:"";width:10px;height:10px;border:2px solid var(--yellow)}
@media (max-width:860px){.case{grid-template-columns:1fr}}
.p-lead img{max-height:78vh;object-fit:cover}
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,2vw,24px)}
.gallery figure{margin:0;grid-column:span 6} .gallery figure.wide{grid-column:span 12} .gallery figure.third{grid-column:span 4}
@media (max-width:700px){.gallery figure,.gallery figure.third{grid-column:span 12}}
figcaption{font:400 .875rem/1.45 var(--mono);color:var(--muted);margin-top:10px}
.credit{font:500 .9375rem/1.5 var(--mono);color:var(--white);border-left:3px solid var(--yellow);padding-left:14px;margin:28px 0 0}
.todo{display:block;background:var(--yellow);color:var(--black);font:500 .875rem/1.45 var(--mono);padding:9px 12px;margin:12px 0}
.todo::before{content:"TODO (Mike): "}
.pn{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font:500 .9375rem/1.4 var(--mono)}
.apt{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,64px);align-items:center}
.apt img{width:100%;max-width:440px}
@media (max-width:860px){.apt{grid-template-columns:1fr}}
.big-mail{font-family:var(--display);font-stretch:108%;font-weight:750;font-size:clamp(1.6rem,5vw,3.4rem);word-break:break-word;color:var(--white)}
/* footer */
.site-foot{background:rgba(0,0,0,.55);border-top:1px solid var(--line);color:var(--muted);padding:56px 0 40px;font-size:1rem}
.site-foot .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center}
.site-foot img{height:64px;width:auto}
.site-foot nav{display:flex;gap:20px;flex-wrap:wrap;font:500 .875rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.site-foot nav a{text-decoration:none}
.site-foot small{display:block;font:400 .875rem/1.5 var(--mono);grid-column:1/-1;border-top:1px solid var(--line);padding-top:20px}
@media (max-width:760px){.site-foot .wrap{grid-template-columns:1fr}}

/* featured case studies: larger, clear View project cue */
.featured-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr));gap:clamp(32px,4vw,56px)}
.card.featured .frame{aspect-ratio:16/10}
.card.featured h3{font-size:1.35rem}
.card.featured .more{margin-top:14px;font-size:.9375rem;border-bottom-width:2px;padding-bottom:5px}
.section-head.tight{margin-bottom:clamp(20px,3vw,32px)}
/* archive: lighter single-image grid, not clickable */
.quiet-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:clamp(20px,2.5vw,32px)}
.card.quiet{cursor:default}
.card.quiet .frame{aspect-ratio:4/3}
.card.quiet h3{font-size:1.05rem;margin:12px 0 4px}
.card.quiet p{font-size:.9375rem}
.card.quiet .credit-line{font-size:.8125rem}
.card.quiet .tags{font-size:.75rem}
.card.quiet:hover .frame>i,.card.quiet:hover .frame::after{opacity:.55}
a.card.quiet{cursor:pointer}

.pull{margin:24px 0 0;padding:18px 20px;border-left:3px solid var(--yellow);background:rgba(0,0,0,.35);font:500 1.15rem/1.45 var(--display);font-stretch:105%;color:var(--white);max-width:34em}
.pull cite{display:block;margin-top:10px;font:500 .875rem/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--g37)}

/* ---- Motion (from mcpcustoms.com, restyled; respects prefers-reduced-motion) ---- */
.pd-progress{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--p500);transform:scaleX(0);transform-origin:0 50%;z-index:10;pointer-events:none}
@supports (animation-timeline:scroll()){
  .pd-progress{animation:pdGrow linear both;animation-timeline:scroll(root)}
  @keyframes pdGrow{to{transform:scaleX(1)}}
}
.pd-w{display:inline-block;will-change:transform,filter,opacity}
.pd-after{will-change:transform,opacity}
@keyframes pdRise{0%{opacity:0;transform:translateX(-48vw) skewX(-16deg);filter:blur(7px)}55%{opacity:1}100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes pdFade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pdFx1{from{opacity:0;transform:translateX(-55vw) skewX(-16deg);filter:blur(7px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes pdFx2{from{opacity:0;transform:translateX(55vw) skewX(16deg);filter:blur(7px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes pdFx4{from{opacity:0;transform:translateX(-30px);clip-path:inset(0 100% 0 0)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}
h1 .pd-w{animation:pdRise .85s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i)*.07s)}
.pd-after{animation:pdFade .7s ease both;animation-delay:.55s}
@supports (animation-timeline:view()){
  .pd-fx1{animation:pdFx1 linear both;animation-timeline:view();animation-range:cover 0% cover 22%}
  .pd-fx2{animation:pdFx2 linear both;animation-timeline:view();animation-range:cover 0% cover 22%}
  .pd-fx4{animation:pdFx4 linear both;animation-timeline:view();animation-range:cover 0% cover 22%}
}
@supports not (animation-timeline:view()){
  .pd-fxjs.pd-fx1{opacity:0;transform:translateX(-55vw) skewX(-16deg);filter:blur(7px);transition:opacity .7s,transform .7s,filter .7s}
  .pd-fxjs.pd-fx2{opacity:0;transform:translateX(55vw) skewX(16deg);filter:blur(7px);transition:opacity .7s,transform .7s,filter .7s}
  .pd-fxjs.pd-fx4{opacity:0;transform:translateX(-30px);clip-path:inset(0 100% 0 0);transition:opacity .7s,transform .7s,clip-path .7s}
  .pd-fxjs.pd-in{opacity:1;transform:none;filter:blur(0);clip-path:inset(0 0 0 0)}
}
.card .frame picture,.card .frame>img{transition:transform .35s ease}
.card:hover .frame picture,.card:hover .frame>img,.card:focus-visible .frame picture,.card:focus-visible .frame>img{transform:scale(1.03)}
.card.quiet:hover .frame picture,.card.quiet:hover .frame>img{transform:none}
@media (prefers-reduced-motion:reduce){
  .pd-progress{display:none}
  h1 .pd-w,.pd-after,.pd-fx1,.pd-fx2,.pd-fx4{animation:none!important;opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
  .card .frame picture,.card .frame>img{transition:none}
  .card:hover .frame picture,.card:hover .frame>img{transform:none}
}

/* archive carousel */
.car{position:relative;max-width:1040px;margin:0 auto;outline:none}
.car-track{list-style:none;margin:0;padding:0;display:grid}
.slide{grid-area:1/1;opacity:0;visibility:hidden;transform:translateX(24px);transition:opacity .6s ease,transform .6s ease,visibility 0s .6s}
.slide.on{opacity:1;visibility:visible;transform:none;transition:opacity .6s ease,transform .6s ease}
.car:not(.js) .slide:first-child{opacity:1;visibility:visible;transform:none}
.slide figure{margin:0}
.s-media{position:relative;aspect-ratio:3/2;background:var(--black);overflow:hidden;border:1px solid var(--line);cursor:zoom-in;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.s-media img{width:100%;height:100%;object-fit:contain}
.s-media .brandcard,.s-media .aptcard{position:absolute;inset:0}
.car.zoom .slide.on .s-media{transform:scale(1.06);cursor:zoom-out;box-shadow:0 18px 50px rgba(0,0,0,.6)}
.car.zoom .slide.on figcaption{transform:translateY(14px)}
.slide figcaption{padding:20px 4px 0;max-width:46em;transition:transform .45s}
.slide h3{font-size:1.3rem;margin:0 0 6px}.slide figcaption p{margin:0 0 4px;color:var(--muted)}
.slide .credit-line{font:500 .875rem/1.4 var(--mono);color:var(--yellow)}
.car-btn{position:absolute;top:calc(50% - 28px);z-index:3;width:48px;height:48px;border:1.5px solid var(--g65);background:rgba(0,0,0,.7);color:var(--white);font:600 1.2rem/1 var(--mono);cursor:pointer}
.car-btn:hover{border-color:var(--yellow);color:var(--yellow)}
.car-stage{position:relative}.car-btn.prev{left:10px}.car-btn.next{right:10px}
.car-btn{top:clamp(80px,30%,320px)}
.car-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font:400 .875rem/1.4 var(--mono);color:var(--muted)}
.car-hint{color:var(--g37)}
.car-dots{display:flex;gap:6px;flex-wrap:wrap}.car-dots i{width:8px;height:8px;border:1.5px solid var(--g50)}.car-dots i.on{background:var(--yellow);border-color:var(--yellow)}
.car:not(.js) .car-btn,.car:not(.js) .car-bar{display:none}
@media (max-width:640px){.car-btn{width:40px;height:40px}.car-hint{display:none}}
@media (prefers-reduced-motion:reduce){.slide,.slide.on,.s-media,.slide figcaption{transition:none}}

/* Bezier divider (one per page) */
section.has-bz::before,section.has-bz::after{display:none}
.bz{position:absolute;left:max(var(--gut),calc((100% - var(--max))/2 + var(--gut)));right:max(var(--gut),calc((100% - var(--max))/2 + var(--gut)));top:-36px;height:72px;pointer-events:none}
.bz svg{display:block;width:100%;height:72px;overflow:visible}
.bz-p{fill:none;stroke:var(--p300);stroke-width:1.5}
.bz-h{stroke:var(--g65);stroke-width:1}
.bz-e{fill:var(--charcoal);stroke:var(--g37);stroke-width:1}
.bz-a{fill:var(--charcoal);stroke:var(--p300);stroke-width:1.5}.bz-a.on{fill:var(--p300)}
.bz-hi .bz-p{stroke:var(--yellow)}.bz-hi .bz-a{stroke:var(--yellow)}.bz-hi .bz-a.on{fill:var(--yellow)}
.bz-cusp{top:-58px}
section.has-bz[style*="padding-top:0"]{padding-top:72px!important}

/* image protection: no drag, no long-press save, no selection */
img,picture{-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
img{pointer-events:none}