:root {
  --bg: #000;
  --fg: #f4f4f4;
  --muted: #bdbdbd;
  --max: 1120px;
  --narrow: 960px;
  --gutter: clamp(18px, 4vw, 58px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: Helvetica, Arial, sans-serif;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.52;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover, a:focus-visible { opacity: .72; }
img { display:block; max-width:100%; height:auto; }
picture { display:block; }
.section-narrow, .section-wide { width: min(100% - (2 * var(--gutter)), var(--max)); margin-inline:auto; }
.section-narrow { width: min(100% - (2 * var(--gutter)), var(--narrow)); }
.intro { padding-top: clamp(38px, 8vh, 92px); padding-bottom: clamp(50px, 9vh, 110px); }
.cover-image { width: min(460px, 56vw); margin: 0 auto clamp(34px, 6vw, 72px); }
.identity-block { max-width: 920px; margin-inline:auto; }
.comic-image { width: min(340px, 48vw); margin: 0 auto clamp(26px, 4vw, 45px); }
.intro-copy { max-width: 900px; margin-inline:auto; }
.lead { font-weight: 700; font-size: clamp(20px, 2.1vw, 30px); line-height:1.25; max-width: 680px; margin: 0 0 1.6rem; letter-spacing: -.01em; }
.intro-copy p:not(.lead) { margin:0; color:#e5e5e5; }
.contact-links { display:flex; justify-content:center; flex-wrap:wrap; gap: 14px clamp(24px, 4vw, 50px); margin-top: 26px; font-weight:700; }
.contact-links a { display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.contact-links img { width:30px; height:30px; object-fit:contain; }

.kinetic-band {
  position:relative;
  width:100%;
  height: clamp(360px, 58vw, 760px);
  overflow:hidden;
  background:#000;
  margin: clamp(10px, 3vw, 32px) 0 clamp(70px, 10vw, 145px);
}
.parallax-image {
  position:absolute;
  inset: -15% -6%;
  width:112%;
  height:130%;
  object-fit:cover;
  object-position:center;
  will-change:transform;
  transform: translate3d(0,0,0);
}
.works, .archive { display:flex; flex-direction:column; align-items:center; gap: clamp(65px, 9vw, 125px); padding-bottom: clamp(80px, 11vw, 150px); }
.work { width:min(100%, 1060px); margin:0; }
.work-large { width:min(100%, 980px); }
.work picture, .work img { width:100%; }
figcaption { color: var(--muted); font-size: clamp(11px, .9vw, 14px); line-height:1.35; margin-top:9px; max-width: 92%; }
.archive { padding-top: 10px; }
.archive h2 { width:min(100%, 1060px); margin:0 0 -35px; font-size:clamp(15px,1.3vw,20px); letter-spacing:.08em; font-weight:500; }
.archive-work { width:min(100%, 990px); }
.archive-work.portrait { width:min(72%, 760px); }
footer { display:flex; justify-content:center; padding: 10px 20px clamp(48px, 8vw, 90px); }
.back-top { text-decoration:none; border:1px solid #3b3b3b; border-radius:999px; padding:8px 14px; font-size:13px; color:#d2d2d2; }
.back-top span { margin-left:4px; }

@media (max-width: 700px) {
  body { font-size:15px; }
  .intro { padding-top:34px; padding-bottom:58px; }
  .cover-image { width:min(72vw, 330px); margin-bottom:32px; }
  .comic-image { width:min(72vw, 360px); margin-bottom:25px; }
  .lead { font-size:20px; }
  .contact-links { justify-content:flex-start; flex-direction:column; gap:10px; margin-top:22px; }
  .contact-links img { width:24px; height:24px; }
  .kinetic-band { height:auto; margin-bottom:68px; }
  .parallax-image { position:static; width:100%; height:auto; object-fit:contain; transform:none !important; }
  .works, .archive { gap:62px; padding-bottom:80px; }
  .archive h2 { margin-bottom:-30px; }
  .archive-work.portrait { width:100%; }
  figcaption { max-width:100%; font-size:11px; }
}

/* V02 refinements */
.cover-image { width: min(590px, 66vw); }
.lead { font-size: clamp(18px, 1.65vw, 24px); max-width: 650px; }
.intro-copy p:not(.lead) + p { margin-top: 1.15rem; }
.contact-links { justify-content:flex-start; align-items:center; }
.contact-links img { display:block; width:28px; height:28px; opacity:1; }
.contact-links .paige-link { margin-left: 2px; }
.kinetic-band { width:100vw; margin-left:calc(50% - 50vw); }
.parallax-image {
  inset:auto;
  left:50%;
  top:50%;
  width:120vw;
  max-width:none;
  height:145%;
  transform:translate3d(-50%,-50%,0);
  object-fit:cover;
}
.work-quiet { width:min(82%, 820px); }
/* V03: Abiogenesis contains generous black margins in the artwork itself,
   so it is rendered slightly wider and brought closer to the preceding spread. */
.abiogenesis-work {
  width:min(88%, 880px);
  margin-top: clamp(-62px, -4.5vw, -34px);
}
.archive-caption { max-width: 760px; color:#d2d2d2; }
.archive-caption strong { color:#f4f4f4; font-weight:500; }
.archive-caption span { display:block; margin-top:.7rem; color:#bdbdbd; }

@media (max-width: 700px) {
  .cover-image { width:min(82vw, 390px); }
  .lead { font-size:18px; }
  .contact-links { align-items:flex-start; }
  .contact-links .paige-link { margin-left:0; }
  .parallax-image { position:static; width:100%; max-width:100%; height:auto; transform:none !important; object-fit:contain; }
  .work-quiet { width:100%; }
  .abiogenesis-work { width:100%; margin-top:-20px; }
  .archive-caption { max-width:100%; }
}

/* V04 refinement: SNUBLiC section declaration matches opening lead typography. */
.archive h2 {
  font-size: clamp(18px, 1.65vw, 24px);
  font-weight: 700;
  letter-spacing: -.01em;
  color: #fff;
  line-height: 1.25;
}
@media (max-width: 700px) {
  .archive h2 { font-size:18px; }
}


/* V05 refinements: common caption axis and archive heading alignment. */
.abiogenesis-work figcaption { margin-left: clamp(0px, 3.4%, 30px); }
.archive h2 { width:min(100%, 990px); }

@media (max-width: 700px) {
  .abiogenesis-work figcaption { margin-left:0; }
  /* On narrow screens the comic joins the same left reading axis as the copy. */
  .comic-image { margin-left:0; margin-right:auto; }
}

/* V05 final scale test: Worksite forms the quietest point before the second endpaper. */
.worksite-work { width:min(70%, 700px); }

@media (max-width: 700px) {
  .worksite-work { width:100%; }
}

/* V06: Redundant Scenes of Colchester — a final, uncaptained landscape coda. */
.colchester-coda {
  width:min(100%, 1060px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(48px, 6.5vw, 88px);
  padding-top:clamp(18px, 2vw, 30px);
}
.colchester-coda h2 {
  width:min(88%, 880px);
  margin:0 0 clamp(-20px, -1.5vw, -10px);
  font-size:clamp(18px, 1.65vw, 24px);
  font-weight:400;
  letter-spacing:-.01em;
  color:#d8d8d8;
  line-height:1.25;
}
.colchester-work {
  width:min(88%, 880px);
  margin:0;
}
.colchester-work img { width:100%; height:auto; display:block; }

@media (max-width:700px) {
  .colchester-coda { width:100%; gap:50px; padding-top:8px; }
  .colchester-coda h2 { width:100%; font-size:18px; font-weight:400; color:#d8d8d8; margin-bottom:-16px; }
  .colchester-work { width:100%; }
}

/* V08: align the Abiogenesis caption to the same reading axis as Worksite. */
.abiogenesis-work figcaption { margin-left: 10.25%; }

@media (max-width: 700px) {
  .abiogenesis-work figcaption { margin-left: 0; }
}

/* V08 refinement: Paige avatar carries the same visual scale as the Instagram icon. */
.contact-links .paige-link img { width:32px; height:32px; }
@media (max-width:700px) {
  .contact-links .paige-link img { width:28px; height:28px; }
}