:root{
  --paper:#efe9dc; --ink:#171713; --muted:#77736c; --rule:rgba(28,27,23,.18);
  --orange:#c95624; --olive:#666d55; --blue:#437f8f; --gold:#d1911e; --red:#87382f;
  --pad:clamp(28px,3vw,54px);
  --display:"Avenir Next Condensed","Helvetica Neue Condensed Black","Arial Narrow",Impact,sans-serif;
  --sans:"Avenir Next","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box} html,body{margin:0;min-height:100%;color:var(--ink);font-family:var(--sans)}
body{background:var(--paper) url('../images/paper-texture.jpg') repeat;background-size:512px 512px;position:relative}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:999;background:radial-gradient(circle at 15% 5%,rgba(255,255,255,.42),transparent 38%),radial-gradient(circle at 90% 70%,rgba(124,104,74,.06),transparent 48%);mix-blend-mode:soft-light}
a{color:inherit;text-decoration:none}.site-head{position:absolute;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:flex-start;padding:22px var(--pad);pointer-events:none}.site-head>*{pointer-events:auto}.brand{font-size:10px;line-height:1.05;letter-spacing:.30em;text-transform:uppercase}.brand strong{display:block;font-size:16px;font-weight:500;letter-spacing:.25em}.brand:after{content:"";display:block;width:22px;height:1px;background:currentColor;margin-top:10px}.nav{display:flex;gap:28px;font-size:9px;letter-spacing:.18em;text-transform:uppercase}.nav a{position:relative}.nav a:after{content:"";position:absolute;left:0;bottom:-7px;height:1px;width:0;background:currentColor;transition:width .45s ease}.nav a:hover:after,.nav a.active:after{width:100%}
/* HOME */
.home{height:100svh;min-height:660px;overflow:hidden;position:relative;display:flex;align-items:center;padding:78px var(--pad) 30px}.home-copy{position:relative;z-index:10;width:min(760px,61vw)}.project-list{display:flex;flex-direction:column;align-items:flex-start}.project-link{display:flex;align-items:baseline;gap:9px;font-family:var(--display);font-weight:800;font-stretch:condensed;text-transform:uppercase;letter-spacing:-.035em;font-size:clamp(43px,5.08vw,78px);line-height:.895;white-space:nowrap;color:var(--project-color);transition:opacity 1.45s cubic-bezier(.22,.7,.18,1),filter 1.45s cubic-bezier(.22,.7,.18,1),transform 1s cubic-bezier(.2,.7,.2,1),color 1.2s ease;text-rendering:geometricPrecision}.project-link .num{font:500 8px var(--sans);letter-spacing:.1em;color:#77736c;transform:translateY(-2px)}.project-list.has-focus .project-link:not(.active),.project-list.has-focus .all-projects{opacity:.12;filter:saturate(.35)}.project-link.active{transform:translateX(5px)}.all-projects{margin-top:13px;color:#24231f;font-size:clamp(38px,4.5vw,69px)}.all-projects .arrow{font-family:var(--display);font-weight:500;margin-left:6px;display:inline-block;transition:transform .6s ease}.all-projects:hover .arrow{transform:translateX(11px)}
.preview-stage{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;z-index:2}
.preview-stage:before{content:"";position:absolute;z-index:3;inset:0;background:
linear-gradient(90deg,var(--paper) 0%,var(--paper) 29%,rgba(240,236,228,.96) 35%,rgba(240,236,228,.76) 43%,rgba(240,236,228,.34) 52%,transparent 66%),
linear-gradient(180deg,rgba(240,236,228,.90) 0%,rgba(240,236,228,.34) 7%,transparent 20%);pointer-events:none}.preview{position:absolute;inset:-2%;opacity:0;background-size:cover;background-position:center;transform:scale(1.045);transition:opacity 1.55s ease,transform 2s cubic-bezier(.2,.7,.2,1),filter 1.55s ease;filter:saturate(.9) contrast(.98)}.preview.visible{opacity:1;transform:scale(1)}
.home:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(240,236,228,.10) 0 40%,rgba(240,236,228,.04) 56%,transparent 70%);z-index:4}.home-kicker{position:absolute;left:var(--pad);bottom:24px;z-index:12;font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:#77736c}
/* ARCHIVE */
.archive{padding:120px var(--pad) 70px;min-height:100vh}.eyebrow{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:#77736c}.archive h1{font-family:var(--display);font-size:clamp(68px,10vw,150px);line-height:.8;letter-spacing:-.04em;text-transform:uppercase;margin:20px 0 58px}.archive-row{display:grid;grid-template-columns:48px minmax(240px,1fr) 115px 90px;align-items:center;gap:18px;border-top:1px solid var(--rule);padding:15px 0;transition:transform .5s ease,opacity .5s ease}.archive-row:hover{transform:translateX(6px)}.archive-row .n{font-size:12px;color:#969187}.archive-row .title{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(27px,3.4vw,51px);line-height:.95;letter-spacing:-.025em}.archive-row .year,.archive-row .type{font-size:8px;letter-spacing:.15em;text-transform:uppercase;color:#77736c}
/* PROJECT - art-directed, matching approved mockup */
.project-page{min-height:100vh;padding:95px var(--pad) 60px;overflow:hidden}.project-hero{position:relative;min-height:clamp(600px,78vh,820px)}.project-copy{position:relative;z-index:6;width:31%;padding-top:32px}.project-no{font-family:var(--sans);font-size:16px}.project-no:after{content:"";display:block;width:25px;height:2px;background:var(--ink);margin-top:9px}.project-title{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(69px,8vw,126px);line-height:.72;letter-spacing:-.04em;margin:23px 0 18px}.project-tags{font-size:8px;letter-spacing:.21em;text-transform:uppercase}.project-desc{font-size:14px;line-height:1.55;max-width:300px;margin-top:35px}.hero-photo{position:absolute;z-index:2;right:3.3%;top:0;width:63%;height:64%;object-fit:cover;object-position:center;transform:rotate(.45deg);box-shadow:0 8px 28px rgba(59,48,31,.10)}.hero-photo:after{content:""}.project-side-index{position:absolute;right:-3px;top:27%;z-index:5;display:flex;flex-direction:column;gap:16px;font-size:8px;color:#6d6961}.project-side-index .active{color:var(--ink)}.project-collage{position:absolute;z-index:8;right:3%;bottom:0;width:70%;height:42%}.project-collage img{position:absolute;object-fit:cover;box-shadow:0 9px 22px rgba(42,35,25,.13);border:6px solid rgba(245,241,232,.86)}.project-collage .c1{width:35%;height:68%;left:1%;bottom:3%;transform:rotate(-4.1deg)}.project-collage .c2{width:34%;height:72%;left:34%;bottom:0;transform:rotate(2.2deg)}.project-collage .c3{width:29%;height:69%;right:0;bottom:4%;transform:rotate(-2deg)}.project-specs{position:absolute;left:0;bottom:10px;z-index:6;width:26%;display:grid;gap:11px}.spec{padding-top:7px;border-top:1px solid var(--rule)}.spec b{display:block;font-size:7px;letter-spacing:.17em;text-transform:uppercase;color:#969187;margin-bottom:3px}.spec span{font-size:11px}.project-story{position:relative;margin-top:50px;border-top:1px solid var(--rule);padding:44px 4% 18px;display:grid;grid-template-columns:.7fr 1.3fr;gap:8vw;min-height:360px}.project-story h2{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(50px,6vw,88px);line-height:.78;letter-spacing:-.035em;margin:0}.project-story p{font-size:15px;line-height:1.7;max-width:650px;margin:3px 0 0}.project-story .pull{font-family:var(--display);font-size:clamp(22px,2.4vw,38px);line-height:1.05;text-transform:uppercase;margin-top:40px;color:#625f58}
/* Project-page continuation cue: visible only at the top, then JS fades it out. */
.more-cue{position:fixed;left:50%;bottom:18px;z-index:45;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:#565149;opacity:.9;transition:opacity .45s ease,transform .45s ease;pointer-events:none}
.more-cue .arrow{font-size:19px;line-height:1;animation:moreNudge 1.8s ease-in-out infinite}
body.has-scrolled .more-cue{opacity:0;transform:translate(-50%,8px)}
@keyframes moreNudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.project-nav{display:flex;justify-content:flex-end;gap:17px;padding:18px 2% 0;font-size:8px;letter-spacing:.16em;text-transform:uppercase}
/* ABOUT */
.about{min-height:100vh;padding:115px var(--pad) 45px;position:relative;overflow:hidden}.about-grid{display:grid;grid-template-columns:.72fr .7fr 1.08fr;gap:4vw;align-items:center;min-height:calc(100vh - 160px)}.about-title{font-family:var(--display);font-size:clamp(62px,7vw,108px);line-height:.76;letter-spacing:-.04em;text-transform:uppercase;margin:0}.about-title span{display:block}.about-title .strong{font-weight:900}.about-copy{font-size:14px;line-height:1.7;align-self:center}.about-photo-wrap{position:relative;height:66vh;min-height:480px}.about-photo{position:absolute;width:92%;height:86%;right:0;top:4%;object-fit:cover;transform:rotate(.7deg);box-shadow:0 12px 28px rgba(44,36,24,.10)}.about-accent{position:absolute;width:42%;height:33%;left:-7%;bottom:2%;background:url('../images/nixie.jpg') center/cover;border:7px solid rgba(245,241,232,.9);transform:rotate(-5deg);box-shadow:0 10px 22px rgba(42,35,25,.12)}
.footer{padding:22px var(--pad);border-top:1px solid var(--rule);display:flex;justify-content:space-between;font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:#77736c}
@media(max-width:950px){.project-link{font-size:clamp(39px,6.8vw,64px)}.home-copy{width:68vw}.preview-stage{width:100%}.project-copy{width:37%}.hero-photo{width:61%;height:59%}.project-collage{width:72%}.about-grid{grid-template-columns:.8fr 1.2fr}.about-copy{grid-column:1}.about-photo-wrap{grid-column:2;grid-row:1/3}.about-title{grid-column:1}}
@media(max-width:680px){.site-head{padding:17px 18px}.brand{font-size:8px}.brand strong{font-size:13px}.nav{gap:17px;font-size:8px}.home{padding:72px 18px 15px;align-items:flex-start}.home-copy{width:100%;padding-top:70px}.project-link{font-size:clamp(31px,9.7vw,48px);line-height:.98;white-space:normal}.all-projects{font-size:clamp(28px,8.5vw,43px)}.preview-stage{top:auto;left:-7%;right:auto;bottom:0;width:114%;height:34%;opacity:.98}.preview-stage:before{background:linear-gradient(180deg,var(--paper) 0%,rgba(239,233,220,.55) 24%,transparent 60%)}.home:after{display:none}.home-kicker{display:none}.archive{padding:90px 18px 50px}.archive h1{margin-bottom:38px}.archive-row{grid-template-columns:30px 1fr 45px;padding:14px 0}.archive-row .type{display:none}.archive-row .title{font-size:27px}.project-page{padding:88px 18px 45px}.project-hero{min-height:auto;display:flex;flex-direction:column}.project-copy{width:100%;padding-top:20px}.project-title{font-size:clamp(64px,20vw,100px);line-height:.74}.project-desc{margin-top:25px;max-width:88%}.hero-photo{position:relative;right:auto;top:auto;width:96%;height:43vh;min-height:330px;align-self:flex-end;margin-top:30px;transform:rotate(.4deg)}.project-side-index{display:none}.project-collage{position:relative;right:auto;bottom:auto;width:100%;height:480px;margin-top:-22px}.project-collage .c1{width:54%;height:50%;left:0;bottom:45%}.project-collage .c2{width:55%;height:48%;left:40%;bottom:22%}.project-collage .c3{width:46%;height:42%;right:3%;bottom:0}.project-specs{position:relative;bottom:auto;width:100%;grid-template-columns:1fr 1fr;margin-top:20px}.project-story{grid-template-columns:1fr;gap:20px;padding:36px 0 0}.about{padding:95px 18px 35px}.about-grid{display:flex;flex-direction:column;align-items:stretch}.about-title{font-size:clamp(62px,20vw,94px)}.about-copy{max-width:90%}.about-photo-wrap{height:52vh;min-height:400px;width:100%}.about-photo{width:91%}.footer{padding:18px}}


/* V4: robust distressed ink treatment for offline file:// viewing.
   Important: this does NOT use CSS masks, because Safari can block local
   mask-image resources and make the text disappear. The real text remains
   visible underneath; a clipped paper-fleck overlay sits on top. */
:root{
  --paper:#f0ece4;
  --orange:#bf5529;
  --olive:#666858;
  --blue:#4c7482;
  --gold:#d18b24;
  --red:#772d27;
  --display:"DIN Condensed","Avenir Next Condensed","Helvetica Neue Condensed Black",Impact,sans-serif;
}
body{background-color:var(--paper);background-blend-mode:multiply}
.project-link,
.project-title,
.project-story h2,
.about-title,
.archive h1,
.archive-row .title{
  font-family:var(--display);
  font-weight:700;
  letter-spacing:-.018em;
}
.project-link .project-name{color:var(--project-color)}
.all-projects .project-name{color:#292824}
.project-title{letter-spacing:-.015em}
.about-title{letter-spacing:-.012em}.about-title .strong{font-weight:800}

/* Real text is always visible. Distress is an optional visual layer. */
.inked{position:relative;display:inline-block;isolation:isolate}
.inked::after{
  content:attr(data-text);
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  color:transparent;
  background-image:url('../images/distress-overlay.png');
  background-repeat:repeat;
  background-size:330px 154px;
  -webkit-background-clip:text;
  background-clip:text;
  font:inherit;
  letter-spacing:inherit;
  line-height:inherit;
  text-transform:inherit;
  white-space:inherit;
}
.project-list.has-focus .project-link:not(.active),
.project-list.has-focus .all-projects{opacity:.12;filter:saturate(.35)}
.project-link.active{transform:translateX(5px)}
.project-link.active .project-name{filter:saturate(.94) contrast(1.02)}

@media(max-width:680px){.more-cue{bottom:12px;font-size:7px}}


/* --- V6 white-background / portrait refinement --- */
:root{
  --paper:#ffffff;
  --rule:rgba(20,18,16,.12);
}
body{
  background:#fff;
}
body:before{
  background:radial-gradient(circle at 12% 7%,rgba(0,0,0,.025),transparent 22%),
             radial-gradient(circle at 86% 26%,rgba(0,0,0,.018),transparent 26%);
  mix-blend-mode:multiply;
}
.home{
  background:#fff;
}
.preview-stage:before{
  background:
  linear-gradient(90deg,#fff 0%,#fff 31%,rgba(255,255,255,.95) 38%,rgba(255,255,255,.70) 46%,rgba(255,255,255,.20) 56%,transparent 70%),
  linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.26) 11%,transparent 23%);
}
.preview{
  filter:saturate(.94) contrast(.98);
}
.preview.portrait{
  background-position:72% center;
  filter:grayscale(1) contrast(1.03) brightness(1.02);
}
.home:after{
  background:linear-gradient(90deg,rgba(255,255,255,.08) 0 40%,rgba(255,255,255,.03) 56%,transparent 70%);
}
.project-link .num{color:#8b877f}
.project-list.has-focus .project-link:not(.active),
.project-list.has-focus .all-projects{opacity:.12;filter:saturate(.35)}
.nav a{color:#141310}
.about-portrait{
  background:#fff;
}
.about-grid-portrait{
  grid-template-columns:minmax(280px,.9fr) minmax(320px,1.1fr);
  gap:5vw;
}
.about-copy-fade{
  max-width:520px;
  opacity:0;
  transform:translateY(18px);
  animation:aboutFade .9s cubic-bezier(.2,.8,.2,1) .18s forwards;
}
.about-portrait-title{
  font-family:var(--display);
  font-size:clamp(68px,7.6vw,120px);
  line-height:.82;
  letter-spacing:-.03em;
  text-transform:uppercase;
  margin:18px 0 26px;
}
.about-portrait-wrap{
  min-height:74vh;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
.about-portrait-photo{
  width:min(100%,640px);
  height:min(78vh,860px);
  object-fit:cover;
  object-position:center top;
  filter:grayscale(1) contrast(1.04);
}
@keyframes aboutFade{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}
@media(max-width:950px){
  .about-grid-portrait{grid-template-columns:1fr;gap:26px}
  .about-portrait-wrap{justify-content:flex-start;min-height:unset}
  .about-portrait-photo{width:min(100%,520px);height:auto;max-height:70vh}
}
@media(max-width:680px){
  .preview-stage{height:38%}
  .preview-stage:before{background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.66) 26%,transparent 60%)}
  .preview.portrait{background-position:center 18%}
  .about-portrait-title{font-size:clamp(54px,16vw,84px)}
}


/* --- V7 contact page --- */
.contact-page{
  min-height:100vh;
  padding:118px var(--pad) 62px;
  display:grid;
  grid-template-columns:minmax(280px,.86fr) minmax(360px,1.14fr);
  gap:7vw;
  align-items:center;
  background:#fff;
}
.contact-intro{align-self:center;max-width:580px}
.contact-title{
  font-family:var(--display);
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(82px,10vw,160px);
  line-height:.76;
  letter-spacing:-.02em;
  margin:20px 0 34px;
}
.contact-intro>p{font-size:15px;line-height:1.7;max-width:460px;margin:0 0 54px}
.contact-meta{display:grid;gap:5px;border-top:1px solid var(--rule);padding-top:15px;max-width:430px}
.contact-meta span,.contact-form label>span{font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:#858078}
.contact-meta strong{font-size:18px;font-weight:500;letter-spacing:.01em}
.contact-meta small{font-size:10px;line-height:1.45;color:#979189;margin-top:4px}
.contact-panel{position:relative;min-height:560px;display:flex;align-items:center}
.contact-form{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:30px 28px;opacity:1;transition:opacity .5s ease,transform .5s ease}
.contact-form label{display:grid;gap:9px}
.contact-form .message-field{grid-column:1/-1}
.contact-form input,.contact-form textarea{
  width:100%;border:0;border-bottom:1px solid rgba(20,18,16,.28);background:transparent;color:var(--ink);
  font:400 17px/1.5 var(--sans);padding:8px 0 11px;outline:none;border-radius:0;resize:vertical;
  transition:border-color .35s ease;
}
.contact-form textarea{min-height:170px}
.contact-form input:focus,.contact-form textarea:focus{border-bottom-color:var(--ink)}
.contact-form button,.contact-success button{
  justify-self:start;border:0;background:var(--ink);color:#fff;padding:14px 20px;font:600 9px var(--sans);
  letter-spacing:.16em;text-transform:uppercase;cursor:pointer;display:inline-flex;align-items:center;gap:18px;
  transition:transform .35s ease,opacity .35s ease;
}
.contact-form button:hover,.contact-success button:hover{transform:translateX(4px)}
.contact-success{position:absolute;inset:auto 0;opacity:0;pointer-events:none;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease;max-width:540px}
.contact-success .success-mark{display:inline-grid;place-items:center;width:42px;height:42px;border:1px solid var(--ink);border-radius:50%;font-size:18px;margin-bottom:22px}
.contact-success h2{font-family:var(--display);font-size:clamp(48px,6vw,86px);text-transform:uppercase;line-height:.86;margin:0 0 20px;font-weight:700}
.contact-success p{font-size:14px;line-height:1.65;max-width:460px;margin:0 0 26px}
.contact-page.sent .contact-form{opacity:0;pointer-events:none;transform:translateY(-12px)}
.contact-page.sent .contact-success{opacity:1;pointer-events:auto;transform:translateY(0)}
@media(max-width:900px){
  .contact-page{grid-template-columns:1fr;gap:50px;align-items:start}
  .contact-panel{min-height:470px}
  .contact-title{font-size:clamp(78px,15vw,128px)}
}
@media(max-width:680px){
  .contact-page{padding:98px 18px 40px;gap:36px}
  .contact-title{font-size:clamp(64px,20vw,98px);margin-bottom:26px}
  .contact-intro>p{margin-bottom:32px}
  .contact-panel{min-height:450px}
  .contact-form{grid-template-columns:1fr;gap:22px}
  .contact-form .message-field{grid-column:auto}
}


/* --- V8 project image lightbox / slideshow --- */
.project-gallery-image{
  cursor:zoom-in;
  transition:filter .35s ease, box-shadow .35s ease;
}
.project-gallery-image:hover{filter:brightness(.96)}
.project-gallery-image:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
body.lightbox-open{overflow:hidden}
.lightbox{
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  grid-template-columns:88px minmax(0,1fr) 88px;
  grid-template-rows:58px minmax(0,1fr);
  align-items:center;
  background:rgba(10,10,10,.975);
  color:#fff;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .38s ease,visibility .38s ease;
}
.lightbox.open{opacity:1;visibility:visible;pointer-events:auto}
.lightbox-topbar{
  grid-column:1/-1;
  grid-row:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 22px;
  font:500 9px var(--sans);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.74);
}
.lightbox-close{
  appearance:none;
  border:0;
  background:none;
  color:#fff;
  font:500 9px var(--sans);
  letter-spacing:.17em;
  text-transform:uppercase;
  cursor:pointer;
  padding:12px 0 12px 14px;
}
.lightbox-nav{
  appearance:none;
  border:0;
  background:transparent;
  color:#fff;
  align-self:stretch;
  font:300 33px/1 var(--sans);
  cursor:pointer;
  opacity:.65;
  transition:opacity .25s ease,transform .25s ease;
}
.lightbox-nav:hover{opacity:1}
.lightbox-prev{grid-column:1;grid-row:2}
.lightbox-next{grid-column:3;grid-row:2}
.lightbox-prev:hover{transform:translateX(-3px)}
.lightbox-next:hover{transform:translateX(3px)}
.lightbox-figure{
  grid-column:2;
  grid-row:2;
  margin:0;
  width:100%;
  height:100%;
  min-height:0;
  display:grid;
  grid-template-rows:minmax(0,1fr) 42px;
  place-items:center;
  overflow:hidden;
}
.lightbox-image{
  display:block;
  max-width:100%;
  max-height:calc(100vh - 115px);
  width:auto;
  height:auto;
  object-fit:contain;
  opacity:1;
  transform:scale(1);
  transition:opacity .2s ease,transform .28s ease;
  box-shadow:0 18px 60px rgba(0,0,0,.28);
}
.lightbox.changing .lightbox-image{opacity:0;transform:scale(.992)}
.lightbox-caption{
  align-self:start;
  padding-top:10px;
  font:400 9px var(--sans);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.56);
  text-align:center;
}
@media(max-width:680px){
  .lightbox{grid-template-columns:52px minmax(0,1fr) 52px;grid-template-rows:52px minmax(0,1fr)}
  .lightbox-topbar{padding:0 14px}
  .lightbox-nav{font-size:26px}
  .lightbox-figure{grid-template-rows:minmax(0,1fr) 36px}
  .lightbox-image{max-height:calc(100vh - 103px)}
  .lightbox-caption{font-size:8px}
}


/* --- V9 true full-resolution lightbox behavior --- */
.lightbox-figure{padding:12px 10px 0}
.lightbox-image{
  width:auto;
  height:auto;
  max-width:calc(100vw - 210px);
  max-height:calc(100vh - 128px);
  object-fit:contain;
}
@media(max-width:680px){
  .lightbox-image{max-width:calc(100vw - 116px);max-height:calc(100vh - 112px)}
}


/* CMS dynamic additions */
body{background:#fff !important;background-image:none !important}
body:before{background:radial-gradient(circle at 12% 7%,rgba(0,0,0,.018),transparent 22%),radial-gradient(circle at 86% 26%,rgba(0,0,0,.012),transparent 26%) !important;mix-blend-mode:multiply}
.preview-stage:before{background:linear-gradient(90deg,#fff 0%,#fff 31%,rgba(255,255,255,.95) 38%,rgba(255,255,255,.70) 46%,rgba(255,255,255,.20) 56%,transparent 70%),linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.26) 11%,transparent 23%) !important}
.preview.portrait{filter:grayscale(1) contrast(1.03) brightness(1.02);background-position:72% center}
.project-placeholder{background:#f3f3f1;border:1px solid #e7e7e3;display:flex;align-items:center;justify-content:center;color:#999;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.project-extra-gallery,.process-gallery{margin:54px 0 0;padding:0 2%;display:grid;grid-template-columns:repeat(12,1fr);gap:18px;align-items:start}
.project-extra-gallery img,.process-gallery img{width:100%;height:auto;display:block;cursor:zoom-in;box-shadow:0 8px 24px rgba(0,0,0,.08)}
.project-extra-gallery figure,.process-gallery figure{margin:0}.project-extra-gallery figure:nth-child(6n+1){grid-column:span 7}.project-extra-gallery figure:nth-child(6n+2){grid-column:span 5}.project-extra-gallery figure:nth-child(6n+3){grid-column:3/span 4}.project-extra-gallery figure:nth-child(6n+4){grid-column:7/span 6}.project-extra-gallery figure:nth-child(6n+5){grid-column:span 5}.project-extra-gallery figure:nth-child(6n+6){grid-column:6/span 7}
.process-section{margin-top:58px;padding:42px 2% 0;border-top:1px solid var(--rule)}.process-section h2{font-family:var(--display);font-size:clamp(45px,5vw,78px);line-height:.85;text-transform:uppercase;margin:0 0 28px}.process-gallery{margin-top:0;padding:0}.process-gallery figure{grid-column:span 4}.image-caption{font-size:10px;line-height:1.4;color:#777;margin-top:7px}
.lightbox{position:fixed;inset:0;z-index:1000;background:rgba(10,10,10,.96);display:none;color:#fff}.lightbox.open{display:flex;align-items:center;justify-content:center}.lightbox-topbar{position:absolute;top:18px;left:22px;right:22px;display:flex;justify-content:space-between;align-items:center;z-index:3;font-size:10px;letter-spacing:.14em;text-transform:uppercase}.lightbox-close{background:none;border:0;color:#fff;font:inherit;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}.lightbox-figure{margin:0;max-width:calc(100vw - 130px);max-height:calc(100vh - 100px);display:flex;flex-direction:column;align-items:center;justify-content:center}.lightbox-image{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100vh - 130px);object-fit:contain}.lightbox-caption{font-size:11px;color:#ccc;margin-top:10px;min-height:16px}.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:72px;border:0;background:rgba(255,255,255,.06);color:#fff;font-size:30px;cursor:pointer}.lightbox-prev{left:14px}.lightbox-next{right:14px}.project-gallery-image{cursor:zoom-in}
.about-grid-portrait{grid-template-columns:minmax(280px,.9fr) minmax(320px,1.1fr);gap:5vw}.about-copy-fade{max-width:520px;opacity:0;transform:translateY(18px);animation:aboutFade .9s cubic-bezier(.2,.8,.2,1) .18s forwards}.about-portrait-title{font-family:var(--display);font-size:clamp(68px,7.6vw,120px);line-height:.82;letter-spacing:-.03em;text-transform:uppercase;margin:18px 0 26px}.about-portrait-wrap{min-height:74vh;display:flex;align-items:center;justify-content:flex-end}.about-portrait-photo{width:min(100%,640px);height:min(78vh,860px);object-fit:cover;object-position:center top;filter:grayscale(1) contrast(1.04)}@keyframes aboutFade{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.contact-page{min-height:100vh;padding:115px var(--pad) 70px}.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:8vw;max-width:1250px;margin:0 auto}.contact-title{font-family:var(--display);font-size:clamp(72px,9vw,145px);line-height:.8;text-transform:uppercase;margin:0 0 24px}.contact-copy{font-size:14px;line-height:1.7;max-width:430px}.contact-form{padding-top:20px}.field{margin-bottom:24px}.field label{display:block;font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:#777;margin-bottom:8px}.field input,.field textarea{width:100%;border:0;border-bottom:1px solid #222;background:transparent;padding:10px 0;font:15px var(--sans);outline:none}.field textarea{min-height:130px;resize:vertical}.form-button{border:1px solid #111;background:#111;color:#fff;padding:13px 22px;font:9px var(--sans);letter-spacing:.16em;text-transform:uppercase;cursor:pointer}.form-success{padding:22px 0;font-size:15px;line-height:1.6}.honeypot{position:absolute!important;left:-9999px!important}
@media(max-width:680px){.project-extra-gallery,.process-gallery{grid-template-columns:1fr;gap:16px;padding:0}.project-extra-gallery figure,.project-extra-gallery figure:nth-child(n),.process-gallery figure{grid-column:auto}.lightbox-figure{max-width:calc(100vw - 32px)}.lightbox-nav{top:auto;bottom:18px;width:50px;height:50px}.lightbox-prev{left:18px}.lightbox-next{right:18px}.about-grid-portrait{grid-template-columns:1fr}.about-portrait-wrap{min-height:unset;justify-content:flex-start}.about-portrait-photo{width:100%;height:auto}.contact-grid{grid-template-columns:1fr}.contact-page{padding:95px 18px 45px}}


/* --- Production hotfix 1.0.1: Contact page full-width layout ---
   The legacy V7 .contact-page grid was still active around the newer
   .contact-grid, constraining the whole page to the left parent column. */
.contact-page{
  display:block !important;
  width:100%;
  min-height:100vh;
  padding:115px var(--pad) 70px;
  background:#fff;
}
.contact-grid{
  width:100%;
  max-width:none;
  min-height:calc(100vh - 185px);
  margin:0;
  display:grid;
  grid-template-columns:minmax(300px,.82fr) minmax(420px,1.18fr);
  gap:clamp(64px,8vw,150px);
  align-items:center;
}
.contact-grid > section:first-child{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
}
.contact-grid > section:first-child .eyebrow{
  position:relative;
  z-index:2;
  display:block;
  margin:0 0 22px;
  line-height:1.35;
}
.contact-title{
  position:relative;
  z-index:1;
  margin:0 0 34px;
}
.contact-form{
  min-width:0;
  width:100%;
  max-width:760px;
  justify-self:start;
  padding-top:0;
}
@media(max-width:900px){
  .contact-grid{
    grid-template-columns:1fr;
    gap:54px;
    align-items:start;
    min-height:auto;
  }
  .contact-form{max-width:700px}
}
@media(max-width:680px){
  .contact-page{padding:95px 18px 45px}
  .contact-grid{gap:38px}
  .contact-grid > section:first-child .eyebrow{margin-bottom:16px}
  .contact-title{margin-bottom:28px}
}


/* --- Production hotfix 1.0.2: About page wide-screen composition ---
   Keep the normal responsive layout intact, but on wide displays pull the
   copy and portrait toward the center and let the portrait breathe larger. */
@media (min-width:1200px){
  .about-grid-portrait{
    width:100%;
    max-width:1320px;
    margin:0 auto;
    grid-template-columns:minmax(390px,.92fr) minmax(540px,1.08fr);
    gap:clamp(68px,5vw,105px);
    align-items:center;
  }
  .about-copy-fade{
    width:100%;
    max-width:560px;
    justify-self:end;
  }
  .about-portrait-wrap{
    justify-content:flex-start;
  }
  .about-portrait-photo{
    width:min(100%,720px);
    height:min(80vh,900px);
  }
}

@media (min-width:1600px){
  .about-grid-portrait{
    max-width:1380px;
    gap:clamp(78px,5.2vw,118px);
  }
  .about-portrait-photo{
    width:min(100%,760px);
    height:min(82vh,930px);
  }
}

/* --- Production hotfix 1.0.3: Contact wide-screen balance + stacked homepage image ---
   1) On wide displays, pull the Contact intro inward toward the form, matching
      the more centered editorial balance used on the About page.
   2) When the homepage preview drops below the project list, remove the
      desktop horizontal fade and retain only a subtle fade from the top. */
@media (min-width:1200px){
  .contact-grid{
    width:100%;
    max-width:1480px;
    margin:0 auto;
    grid-template-columns:minmax(430px,.9fr) minmax(540px,1.1fr);
    gap:clamp(72px,5vw,108px);
  }
  .contact-grid > section:first-child{
    width:min(100%,560px);
    justify-self:end;
  }
  .contact-form{
    justify-self:start;
    width:100%;
    max-width:760px;
  }
}

@media (max-width:680px){
  .preview-stage:before{
    background:linear-gradient(
      180deg,
      #fff 0%,
      rgba(255,255,255,.82) 8%,
      rgba(255,255,255,.34) 19%,
      rgba(255,255,255,0) 32%
    ) !important;
  }
}

/* --- Project rich-text content --- */
.rich-text p{margin:0 0 .9em}.rich-text p:last-child{margin-bottom:0}
.rich-text strong,.rich-text b{font-weight:700}.rich-text em,.rich-text i{font-style:italic}.rich-text s,.rich-text strike{text-decoration:line-through}
.rich-text a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em}
.rich-text blockquote{margin:1.15em 0;padding:.15em 0 .15em 1.1em;border-left:2px solid currentColor;opacity:.78;font-style:italic}
.rich-text ul,.rich-text ol{margin:.8em 0 1em;padding-left:1.45em}.rich-text li{margin:.25em 0}
.rich-text font[size="2"]{font-size:.86em}.rich-text font[size="3"]{font-size:1em}.rich-text font[size="4"]{font-size:1.2em}.rich-text font[size="5"]{font-size:1.45em}
.project-desc.rich-text{font-size:14px;line-height:1.55;max-width:300px;margin-top:35px}
.project-story .story-copy{font-size:15px;line-height:1.7;max-width:650px;margin:3px 0 0}
.project-story .story-copy blockquote{max-width:560px}
@media(max-width:680px){.project-desc.rich-text{margin-top:25px;max-width:88%}.project-story .story-copy{max-width:none}}


/* --- v1.1.1 clean horizontal project / process photo strips --- */
.project-media-strip{
  --strip-height:clamp(150px,13.6vw,220px);
  position:relative;
  z-index:8;
}
.project-gallery-strip{
  position:absolute;
  right:3%;
  bottom:0;
  width:70%;
}
.media-strip-viewport{
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  padding:6px 0 12px;
}
.media-strip-viewport::-webkit-scrollbar{display:none}
.media-strip-track{
  display:flex;
  align-items:flex-start;
  gap:clamp(14px,1.35vw,24px);
  width:max-content;
  min-width:100%;
}
.media-strip-item{
  flex:0 0 auto;
  margin:0;
  scroll-snap-align:start;
}
.media-strip-item .project-gallery-image{
  display:block;
  height:var(--strip-height);
  width:auto;
  max-width:none;
  object-fit:contain;
  transform:none !important;
  border:0;
  box-shadow:0 7px 20px rgba(0,0,0,.07);
}
.media-strip-item .image-caption{
  max-width:34ch;
  margin-top:7px;
}
.media-strip-nav{
  position:absolute;
  top:calc(var(--strip-height)/2 + 6px);
  width:40px;
  height:58px;
  transform:translateY(-50%);
  border:1px solid rgba(18,18,16,.16);
  background:rgba(255,255,255,.92);
  color:var(--ink);
  font:500 24px/1 var(--sans);
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index:12;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .28s ease,background .28s ease,transform .28s ease;
}
.media-strip-prev{left:-49px}
.media-strip-next{right:-49px}
.project-media-strip.can-prev .media-strip-prev,
.project-media-strip.can-next .media-strip-next{
  opacity:.72;
  visibility:visible;
  pointer-events:auto;
}
.project-media-strip.can-prev .media-strip-prev:hover,
.project-media-strip.can-next .media-strip-next:hover{
  opacity:1;
  background:#fff;
}
.project-media-strip.can-prev .media-strip-prev:hover{transform:translate(-3px,-50%)}
.project-media-strip.can-next .media-strip-next:hover{transform:translate(3px,-50%)}

/* Process photos use the exact same equal-height, natural-width treatment. */
.process-section{margin-top:58px;padding:42px 2% 0;border-top:1px solid var(--rule)}
.process-section h2{font-family:var(--display);font-size:clamp(45px,5vw,78px);line-height:.85;text-transform:uppercase;margin:0 0 28px}
.process-media-strip{
  position:relative;
  width:100%;
  right:auto;
  bottom:auto;
  --strip-height:clamp(145px,13vw,210px);
}

/* The old collage / lower mosaic are no longer part of project rendering. */
.project-collage,.project-extra-gallery{display:none!important}

@media(max-width:950px){
  .project-gallery-strip{width:69%;right:2%}
  .project-media-strip{--strip-height:clamp(135px,17vw,190px)}
  .media-strip-track{gap:16px}
  .media-strip-prev{left:-42px}.media-strip-next{right:-42px}
}
@media(max-width:680px){
  .project-gallery-strip{
    position:relative;
    right:auto;
    bottom:auto;
    width:100%;
    margin-top:20px;
  }
  .project-media-strip{--strip-height:132px;padding:0 4px}
  .process-media-strip{--strip-height:126px}
  .media-strip-track{gap:12px}
  .media-strip-nav{
    top:calc(var(--strip-height)/2 + 6px);
    width:34px;
    height:50px;
    font-size:21px;
  }
  .media-strip-prev{left:-4px}.media-strip-next{right:-4px}
  .project-media-strip.can-prev .media-strip-prev,
  .project-media-strip.can-next .media-strip-next{opacity:.82}
}


/* --- v1.1.2 contained homepage image + independent home/about imagery ---
   The homepage image is now a composed object on the right, not a full-bleed
   background. Project hover changes only the image inside this fixed frame. */
.home{
  --home-side:max(var(--pad), calc((100vw - 1480px)/2 + 30px));
  padding-left:var(--home-side);
  padding-right:var(--home-side);
}
.home-copy{
  width:min(760px,58vw);
}
.home .preview-stage{
  position:absolute;
  top:50%;
  right:var(--home-side);
  left:auto;
  bottom:auto;
  width:min(47vw,700px);
  height:min(80vh,900px);
  transform:translateY(-50%);
  overflow:hidden;
  z-index:2;
  background:#f4f4f2;
}
.home .preview-stage:before,
.home:after{
  display:none !important;
}
.home .preview{
  position:absolute;
  inset:0;
  opacity:0;
  background-size:cover;
  background-position:center;
  transform:scale(1.018);
  filter:none;
  transition:opacity 1.35s cubic-bezier(.22,.7,.18,1),transform 1.7s cubic-bezier(.2,.7,.2,1);
}
.home .preview.visible{
  opacity:1;
  transform:scale(1);
}
.home .preview.home-default{
  filter:none;
}
/* Respect the image file itself. A B&W upload stays B&W; a color upload stays color. */
.about-portrait-photo{filter:none}

@media(min-width:1600px){
  .home .preview-stage{
    height:min(82vh,930px);
  }
}

@media(max-width:1100px) and (min-width:681px){
  .home{
    --home-side:var(--pad);
  }
  .home-copy{width:61vw}
  .home .preview-stage{
    width:34vw;
    height:min(68vh,680px);
  }
}

@media(max-width:680px){
  .home{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    height:auto;
    min-height:100svh;
    overflow:visible;
    padding:72px 18px 18px;
  }
  .home-copy{
    width:100%;
    padding-top:70px;
    flex:0 0 auto;
  }
  .home .preview-stage{
    position:relative;
    top:auto;
    right:auto;
    left:auto;
    bottom:auto;
    width:100%;
    height:clamp(240px,36vh,360px);
    transform:none;
    margin-top:26px;
    flex:0 0 auto;
  }
  .home .preview-stage:before{display:none!important}
  .home .preview{background-position:center}
}


/* --- v1.1.3 intelligent project/process thumbnail strips ---
   Main gallery shares the hero image's horizontal footprint. The JS measures
   each naturally-proportioned thumbnail and only distributes the gaps when
   doing so produces a visually reasonable interval. Small groups stay
   left-aligned; overflowing groups use the sliding arrow controls. */
.project-gallery-strip{
  right:3.3%;
  width:63%;
}
.media-strip-viewport{
  scroll-behavior:smooth;
}
.media-strip-track{
  --strip-gap:clamp(14px,1.35vw,24px);
  gap:var(--strip-gap);
  min-width:0;
  width:max-content;
  transition:gap .3s ease;
}
.project-media-strip.is-edge-balanced .media-strip-track{
  width:100%;
}
.media-strip-item{
  width:max-content;
}
.media-strip-item .image-caption{
  width:100%;
  max-width:none;
}
/* A slightly calmer arrow treatment now that arrows act like gallery paging. */
.media-strip-nav{
  transition:opacity .28s ease,background .28s ease,transform .28s ease,border-color .28s ease;
}
.project-media-strip.has-overflow .media-strip-nav{
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
@media(max-width:950px){
  .project-gallery-strip{width:61%;right:2%;}
}
@media(max-width:680px){
  .project-gallery-strip{width:100%;right:auto;}
}


/* --- v1.1.4 About rich text --- */
.about-rich-text{font:inherit;line-height:inherit;color:inherit}
.about-rich-text>p:first-child{margin-top:0}
.about-rich-text>p:last-child{margin-bottom:0}
.about-rich-text blockquote{max-width:100%}

/* --- v1.1.7 responsive homepage title wrapping ---
   Project names now use only the horizontal space between the left content
   edge and the contained homepage image. Long titles wrap naturally as that
   space changes with the viewport; no title-specific line breaks are needed. */
@media(min-width:681px){
  .home{
    --home-image-width:min(47vw,700px);
    --home-title-gap:clamp(24px,3vw,52px);
  }
  .home .preview-stage{
    width:var(--home-image-width);
  }
  .home-copy{
    width:min(760px,calc(100vw - var(--home-side) - var(--home-side) - var(--home-image-width) - var(--home-title-gap)));
    max-width:calc(100vw - var(--home-side) - var(--home-side) - var(--home-image-width) - var(--home-title-gap));
  }
  .home .project-link{
    max-width:100%;
    white-space:normal;
  }
  .home .project-link .project-name{
    min-width:0;
    max-width:100%;
    white-space:normal;
    overflow-wrap:normal;
    word-break:normal;
  }
}

@media(max-width:1100px) and (min-width:681px){
  .home{
    --home-image-width:34vw;
    --home-title-gap:clamp(20px,2.6vw,30px);
  }
}

/* In the stacked mobile layout there is no adjacent image to avoid, so the
   title simply uses the full available width and continues to wrap naturally. */
@media(max-width:680px){
  .home .project-link{
    max-width:100%;
    white-space:normal;
  }
  .home .project-link .project-name{
    min-width:0;
    max-width:100%;
    white-space:normal;
    overflow-wrap:normal;
    word-break:normal;
  }
}

/* --- v1.1.8 responsive individual-project title wrapping ---
   The main project title is now one continuous text run rather than a PHP-
   forced two-part heading. On side-by-side layouts it wraps/balances against
   the actual copy-column width and scales with that column, preventing long
   words from intruding into the hero image. Mobile keeps the established
   stacked composition and its larger display type. */
@media(min-width:681px){
  .project-copy{
    container-type:inline-size;
  }
  .project-title{
    width:100%;
    max-width:100%;
    font-size:clamp(68px,18.25cqw,126px);
    line-height:.76;
    text-wrap:balance;
    overflow-wrap:normal;
    word-break:normal;
    hyphens:none;
  }
  .project-title .inked{
    display:block;
    width:100%;
    max-width:100%;
    white-space:normal;
    overflow-wrap:normal;
    word-break:normal;
    hyphens:none;
  }
}

/* At the narrower end of the side-by-side composition, give the title a
   little more breathing room before the layout stacks at 680px. */
@media(max-width:1050px) and (min-width:681px){
  .project-copy{width:39%;}
  .hero-photo{width:58%;}
  .project-gallery-strip{width:58%;}
  .project-title{font-size:clamp(64px,17.5cqw,92px);}
}

@media(max-width:680px){
  .project-title{
    width:100%;
    max-width:100%;
    font-size:clamp(64px,20vw,100px);
    line-height:.74;
    text-wrap:balance;
  }
  .project-title .inked{
    display:block;
    width:100%;
    white-space:normal;
  }
}