:root {
  color-scheme: light;
  --paper: #f1ecde;
  --paper-light: #f7eedc;
  --ink: #514d40;
  --muted: #817966;
  /* one rose across the site (text accents, active nav, tags, mobile menu,
     buttons); --rose-hover is a darker step used only for button hovers */
  --rose: #e25050;
  --rose-deep: #e25050;
  --rose-hover: #c83a3a;
  /* bold Space Grotesk headings (get in touch, form + color + time, home title) */
  --heading: #665954;
  --heading-home: #4f433d; /* homepage title, darker to hold up over the photo */
  --line: rgba(81, 77, 64, 0.2);
  --site-width: 1104px;
  --site-gutter: 32px;
  /* fluid side margin shared by every page: 392px on wide screens; below
     ~2000px it shrinks smoothly (1px per 2px of window) so the content holds
     ~1200px (100vw − 17px scrollbar − 2 × margin), bottoming out at 80px.
     Phones (≤760px) override this with 20px. */
  --work-side-margin: clamp(80px, calc((100vw - 1217px) / 2), 392px);
  font-family: "DM Sans", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  box-sizing: border-box;
}

html {
  /* always reserve scrollbar space so short pages (contact) don't shift the header */
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
  background: var(--paper);
}

/* Lenis smooth scroll — native smooth-behavior must be off while it runs */
html.lenis,
html.lenis body {
  height: auto;
}

html.lenis {
  scroll-behavior: auto;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

/* only while a scroll is in motion, so the Vimeo players stay clickable */
.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

body {
  min-width: 320px;
  margin: 0;
  background: var(--paper);
}

a {
  color: inherit;
  text-decoration: none;
}

.site-header {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  display: flex;
  width: calc(100% - var(--work-side-margin) - var(--work-side-margin));
  height: 76px;
  align-items: center;
  justify-content: space-between;
  transform: translateX(-50%);
}

.brand {
  display: grid;
  width: 63px;
  height: 63px;
  place-items: center;
  transform: translateY(10px);
}

.brand img {
  display: block;
  width: 63px;
  height: 63px;
  object-fit: contain;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 58px);
  font-size: 14px;
}

.site-nav > a:not(.social-link) {
  transition: color 180ms ease;
}

.site-nav > a:not(.social-link):hover,
.site-nav > a[aria-current="page"] {
  color: var(--rose-deep);
}

/* rollover: navigation.js puts two stacked copies of each label in the link;
   on hover the first rolls up and out while the second rolls in and brightens.
   The linear() curve is a 0.4s spring with a very slight overshoot. */
.nav-roll-text + .nav-roll-text {
  display: none;
}

@media (min-width: 761px) {
  .site-nav > a.nav-roll {
    position: relative;
    display: block;
    overflow: hidden;
  }

  .nav-roll-text {
    display: block;
    transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1), opacity 400ms ease;
    transition-timing-function: linear(0, 0.176, 0.474, 0.724, 0.884, 0.969, 1.005, 1.015, 1.014, 1.009, 1.005, 1.002, 1);
  }

  .nav-roll-text + .nav-roll-text {
    position: absolute;
    top: 100%;
    left: 0;
    display: block;
    color: var(--rose-deep);
    opacity: 0.6;
  }
}

/* hover colour now arrives with the incoming copy, so the outgoing one keeps
   the resting colour instead of turning red before it leaves */
@media (min-width: 761px) and (hover: hover) {
  .site-nav > a.nav-roll:not([aria-current="page"]):hover {
    color: inherit;
  }

  .site-nav > a.nav-roll:hover .nav-roll-text {
    transform: translateY(-100%);
  }

  .site-nav > a.nav-roll:hover .nav-roll-text + .nav-roll-text {
    opacity: 1;
  }
}

@media (min-width: 761px) {
  .site-nav > a.nav-roll:focus-visible .nav-roll-text {
    transform: translateY(-100%);
  }

  .site-nav > a.nav-roll:focus-visible .nav-roll-text + .nav-roll-text {
    opacity: 1;
  }
}

.social-link {
  display: grid;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--rose);
  color: var(--paper-light);
  place-items: center;
}

.social-link svg {
  width: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.social-link .social-dot {
  fill: currentColor;
  stroke: none;
}

.menu-toggle {
  display: none;
}

.hero {
  position: relative;
  display: grid;
  width: min(calc(100% - var(--site-gutter) - var(--site-gutter)), var(--site-width));
  min-height: max(667px, calc(100svh - 54px));
  margin: 0 auto;
  align-items: center;
  grid-template-columns: minmax(350px, 0.88fr) minmax(440px, 1.12fr);
  padding: 92px 0 54px;
}

.hero-copy {
  position: relative;
  z-index: 1;
  max-width: 485px;
  padding: 22px 0 28px;
  animation: rise-in 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: uppercase;
}

.hero h1,
.about-section h2 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 400;
}

.hero h1 {
  max-width: 470px;
  margin: 0;
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1.19;
}

.hero-question {
  max-width: 430px;
  margin: 13px 0 6px;
  color: var(--rose-deep);
  font-size: 15px;
  font-weight: 450;
  line-height: 1.35;
}

.hero-description {
  max-width: 415px;
  margin: 0;
  color: #716b5c;
  font-size: 14px;
  line-height: 1.65;
}

/* the site's one pill button: "view artwork" (home), "download cv" (about)
   and "subscribe" (contact) all share this so they always match */
.pill-link,
.about-cv,
.subscribe-form button {
  display: inline-grid;
  width: 183px;
  height: 38px;
  padding: 0;
  border: 0;
  place-items: center;
  border-radius: 999px;
  background: var(--rose);
  color: #fff;
  font: 500 17px "DM Sans", sans-serif;
  cursor: pointer;
  transition: background-color 160ms ease;
}

.pill-link:hover,
.pill-link:focus-visible,
.about-cv:hover,
.about-cv:focus-visible,
.subscribe-form button:hover,
.subscribe-form button:focus-visible {
  background: var(--rose-hover);
}

.pill-link {
  margin-top: 25px;
}

.hero-art {
  position: relative;
  width: 100%;
  height: min(650px, calc(76svh - 28px));
  min-height: 480px;
  margin-left: -10px;
  background-color: var(--paper);
  background-image: url("images/main_viewport_01.jpg");
  background-repeat: no-repeat;
  background-position: 50% 52%;
  background-size: auto 100%;
  animation: appear 900ms 100ms ease both;
}

.work-section {
  padding: 112px var(--work-side-margin) 128px;
  background: var(--paper);
}

/* title left, eyebrow tag right; the title never wraps (above the 760px
   hamburger break) — if both don't fit on one row, the tag drops below */
.work-intro {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 42px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 32px;
}

.work-intro .eyebrow {
  order: 2;
  margin: 0;
  padding: 7px 24px;
  background: var(--rose-deep);
  color: #fff;
  font-size: 12px;
  text-align: right;
  white-space: nowrap;
}

.work-intro .eyebrow span {
  color: #fff;
}

.work-intro h1 {
  order: 1;
  margin: 0;
  white-space: nowrap;
  /* matches .contact-heading ("get in touch") */
  color: var(--heading);
  font-family: "Space Grotesk", sans-serif;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.work-intro > p:last-child {
  max-width: 290px;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px 18px;
}

.project-card {
  display: block;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}

.project-card:focus-visible {
  outline: 2px solid var(--rose-deep);
  outline-offset: 5px;
}

.project-image {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1.42 / 1;
  background: #e7dcc1;
  border-radius: 4px;
}

.project-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 650ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.project-image .project-image-base,
.project-image .project-image-rollover {
  transition: opacity 2800ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 650ms cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: opacity;
}

.project-image-rollover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 2800ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 650ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.project-card:hover .project-image-base,
.project-card:focus-visible .project-image-base {
  opacity: 0;
}

.project-card:hover .project-image-rollover,
.project-card:focus-visible .project-image-rollover {
  opacity: 1;
}

.project-card:hover .project-image img,
.project-card:focus-visible .project-image img {
  transform: scale(1.035);
}

.project-open {
  display: none;
}

.project-card:hover .project-open,
.project-card:focus-visible .project-open {
  opacity: 1;
  transform: translateY(0);
}

.project-meta {
  display: grid;
  padding-top: 13px;
  align-items: start;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 10px;
  border-top: 1px solid var(--line);
  font-size: 17px;
}

.project-number,
.project-year {
  white-space: nowrap;
  font-size: 13px;
}

.project-meta .project-number {
  color: var(--rose-deep);
}

.project-name {
  display: grid;
  gap: 3px;
}

.project-name small {
  color: var(--muted);
  font-size: 13px;
}

/* Left padding tracks the header's left edge so the copyright lines up with the logo */
.site-footer {
  padding: 18px var(--site-gutter) 22px var(--work-side-margin);
  background: var(--paper);
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .site-footer,
  .contact-body .site-footer {
    padding-left: 20px;
  }
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes appear {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 1660px) {
  .project-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

}

@media (max-width: 760px) {
  .site-header,
  .hero,
  .about-section {
    width: calc(100% - 40px);
  }

  .site-header,
  .contact-body .site-header {
    height: 68px;
    width: calc(100% - 40px);
    left: 20px;
    transform: none;
  }

  .menu-toggle {
    position: relative;
    z-index: 11;
    display: grid;
    width: 44px;
    height: 44px;
    padding: 12px 9px;
    border: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    align-content: center;
    gap: 7px;
  }

  .menu-toggle span {
    display: block;
    width: 26px;
    height: 1px;
    background: currentColor;
    transition: transform 240ms ease;
  }

  .menu-open .menu-toggle span:first-child {
    transform: translateY(4px) rotate(45deg);
  }

  .menu-open .menu-toggle span:last-child {
    transform: translateY(-4px) rotate(-45deg);
  }

  .site-nav {
    position: fixed;
    z-index: 10;
    inset: 0;
    display: flex;
    visibility: hidden;
    padding: 110px 20px 32px;
    background: var(--rose-deep);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity 220ms ease, transform 220ms ease, visibility 220ms;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(38px, 12vw, 64px);
  }

  .menu-open .menu-toggle {
    color: #fffaf0;
  }

  .menu-open {
    overflow: hidden;
  }

  .menu-open .site-nav {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

  .site-nav > a:not(.social-link) {
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 250, 240, 0.38);
    color: #fffaf0;
  }

  .site-nav .social-link {
    width: 42px;
    height: 42px;
    margin-top: 28px;
    background: #fffaf0;
    color: var(--rose-deep);
  }

  .site-nav .social-link svg {
    width: 22px;
  }

  .menu-open .site-header {
    position: fixed;
  }

  .menu-open .brand {
    position: relative;
    z-index: 11;
  }

  .brand {
    width: 55px;
    height: 55px;
  }

  .brand img {
    width: 55px;
    height: 55px;
  }

  .hero {
    min-height: auto;
    padding: 110px 0 56px;
    grid-template-columns: 1fr;
  }

  .hero-copy {
    max-width: 520px;
    padding: 0;
  }

  .hero h1 {
    max-width: 500px;
    font-size: clamp(31px, 8vw, 42px);
  }

  .hero-question {
    max-width: 500px;
    font-size: 14px;
  }

  .hero-description {
    max-width: 500px;
    font-size: 12px;
  }

  .hero-art {
    height: min(112vw, 540px);
    min-height: 360px;
    margin: 15px -20px 0;
    width: calc(100% + 40px);
    background-position: 75% 53%;
    background-size: auto 100%;
  }

  .work-section {
    padding: 78px 20px 86px;
  }

  .work-intro {
    margin-bottom: 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .work-intro .eyebrow {
    grid-column: auto;
    grid-row: auto;
    order: 2;
    margin-bottom: 0;
    align-self: flex-start;
    justify-self: start;
    text-align: left;
  }

  .work-intro h1 {
    order: 1;
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    /* phones: allowed to wrap again */
    white-space: normal;
    align-self: flex-start;
    text-align: left;
  }

  .project-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .about-section {
    padding: 86px 0;
    grid-template-columns: 1fr;
    gap: 24px;
  }

}

@media (max-width: 420px) {
  .site-header,
  .hero,
  .about-section {
    width: calc(100% - 32px);
  }

  .site-nav {
    gap: 13px;
    font-size: 10px;
  }

  .social-link {
    width: 25px;
    height: 25px;
  }

  .hero {
    padding-top: 100px;
  }

  .hero-art {
    width: calc(100% + 32px);
    margin-right: -16px;
    margin-left: -16px;
    min-height: 330px;
    background-size: auto 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.subpage-main {
  padding-top: 76px;
}

/* full-bleed homepage variant (index_copy.html): image fills the viewport,
   copy sits on the right, left-aligned */
.home-fullbleed .hero {
  width: 100%;
  min-height: 100svh;
  margin: 0;
  padding: 92px var(--work-side-margin) 54px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 700px);
  /* photo placement, shared by .hero-art and .hero-copy.
     main_viewport_05 is 5100×2384 (ratio 2.139): the earlier 4700px image
     (ratio 1.971) plus 400px of extra wall on its right.
     Height: fills the window, stays slightly enlarged up to about 2070px
     wide so the artwork clears the text, and is never too small to reach
     both window edges. */
  --hero-photo-h: max(100svh, min(calc((100vw + 100px) / 1.971), 1100px), calc(100vw / 2.139));
  /* left edge of the photo; min() keeps it from leaving a gap on the left */
  --hero-photo-x: min(0px, calc(0.7 * 100vw - 30px - 1.3797 * var(--hero-photo-h)));
}

.home-fullbleed .hero-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background-color: #8a8178;
  background-image: none;
  background-position: var(--hero-photo-x) 50%;
  background-size: auto max(100%, var(--hero-photo-h));
}

/* the photo lives on its own layer so it can zoom out on load while staying
   clipped to the frame. Position and size come from .hero-art, including its
   stacked-layout overrides, so the photo's placement is unchanged. */
.home-fullbleed .hero-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("images/main_viewport_05.jpg");
  background-repeat: no-repeat;
  background-position: inherit;
  background-size: inherit;
  transform-origin: 50% 50%;
  will-change: transform;
  animation: hero-zoom-out 2s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-timing-function: linear(0, 0.114, 0.319, 0.514, 0.669, 0.781, 0.859, 0.91, 0.944, 0.965, 0.979, 0.987, 0.992, 0.995, 0.997, 0.998, 1);
}

/* held until the photo has downloaded (inline script in index.html), so the
   zoom is never spent on an empty frame */
html.hero-loading .home-fullbleed .hero-art::before {
  animation: none;
  opacity: 0;
}

@keyframes hero-zoom-out {
  from {
    opacity: 0.7;
    transform: scale(1.05);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.home-fullbleed .hero-copy {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  /* right edge lines up with the nav. 700px sets the header on two lines;
     below a window of about 1390px it narrows and the header takes three.
     575px is the narrowest that keeps it to three. */
  --hero-text-w: clamp(575px, 49vw, 700px);
  width: var(--hero-text-w);
  max-width: 100%;
  /* closes 25% of the gap between the artwork and the text at any window
     size. The gap: text's left edge (100vw − margin − text width) minus the
     artwork's right edge, which sits 0.9191 × the photo height from the
     photo's left edge */
  right: max(0px, calc(0.25 * (100vw - var(--work-side-margin) - var(--hero-text-w) - var(--hero-photo-x) - 0.9191 * var(--hero-photo-h))));
  text-align: left;
}

/* matches the grey body text on the about page (.about-copy), but a little
   darker so it holds up over the photo */
.home-fullbleed .hero-description {
  /* fills the text box, so it widens and narrows with the bold header */
  max-width: none;
  margin: 14px 0 0;
  color: #5a5146;
  font-size: 14px;
  line-height: 1.5;
}

/* type and colour match .contact-heading ("get in touch") */
.home-fullbleed .hero h1 {
  max-width: none;
  color: var(--heading-home);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* matches the red subheaders on the about + contact pages (.contact-lede) */
.home-fullbleed .hero-question {
  max-width: none;
  margin: 10px 0 0;
  color: var(--rose);
  font-size: 17px;
  line-height: 1.25;
}

/* the homepage is one full-screen photo: no scrollbar or reserved strip
   down the right edge. It can still scroll (wheel / touch / keys) if a
   short window makes the text taller than the screen. Uses a class on
   <html> rather than :has() so it works in every browser. */
html.home {
  scrollbar-gutter: auto;
  scrollbar-width: none;
}

html.home::-webkit-scrollbar {
  display: none;
}

/* every other page reserves a scrollbar strip, which narrows the page the
   header is placed in (and 100vw with it). Place the homepage header as if
   that strip were there so the logo and nav don't move between pages.
   --scrollbar-w is measured by the inline script in index.html's <head>;
   phones have overlay scrollbars and keep their own header rules. */
@media (min-width: 761px) {
  .home-fullbleed .site-header {
    --page-w: calc(100vw - var(--scrollbar-w, 0px));
    --page-margin: clamp(80px, calc((var(--page-w) - 1217px) / 2), 392px);
    left: var(--page-margin);
    width: calc(var(--page-w) - 2 * var(--page-margin));
    transform: none;
  }

  .home-fullbleed .site-nav {
    gap: clamp(24px, calc(0.04 * var(--page-w)), 58px);
  }
}

/* copyright laid over the bottom of the full-screen photo, not a paper
   band beneath it */
.home-fullbleed .site-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 900px) {
  .home-fullbleed .hero {
    min-height: auto;
    padding: 0 var(--work-side-margin) 56px;
    grid-template-columns: 1fr;
  }

  /* bleeds out across the side margins to the window edges */
  .home-fullbleed .hero-art {
    position: relative;
    inset: auto;
    grid-row: 1;
    height: 70svh;
    min-height: 420px;
    margin: 0 calc(-1 * var(--work-side-margin)) 32px;
    width: calc(100% + 2 * var(--work-side-margin));
    /* centre the artwork in the frame. The photo (5100×2384, ratio 2.139)
       is scaled to the frame height H = max(420px, 70svh), so its width is
       2.139H; the artwork's centre sits at 33.4% across it. Shifting by
       (50% − 33.4%) × 2.139H = 0.356H from a centred image lands the
       artwork dead centre at any width. (cover rather than auto 100% so a
       rare wide-and-short frame never shows a gap at the sides) */
    background-size: cover;
    background-position: calc(50% + 0.356 * max(420px, 70svh)) 50%;
  }

  .home-fullbleed .hero-copy {
    grid-column: 1;
    grid-row: 2;
    right: auto;
    width: auto;
    max-width: 635px;
    /* line up with the logo rather than the right edge */
    justify-self: start;
  }

  /* stacked layout: all three share the header's width */
  .home-fullbleed .hero h1,
  .home-fullbleed .hero-question,
  .home-fullbleed .hero-description {
    max-width: 620px;
  }

  /* stacked layout scrolls normally: copyright back in the flow, on paper */
  .home-fullbleed .site-footer {
    position: static;
    color: var(--muted);
  }
}

@media (max-width: 760px) {
  .home-fullbleed .hero {
    padding: 0 20px 56px;
  }

  .home-fullbleed .hero-art {
    margin: 0 -20px 28px;
    width: calc(100% + 40px);
  }
}

@media (max-width: 420px) {
  .home-fullbleed .hero {
    padding: 0 16px 48px;
  }

  .home-fullbleed .hero-art {
    margin: 0 -16px 24px;
    width: calc(100% + 32px);
  }
}

.blank-page {
  background: var(--paper);
}

.blank-page main {
  overflow: clip;
}

.blank-page .site-header {
  position: fixed;
  z-index: 10;
  transform: translate(
    -50%,
    var(--blank-header-offset, 0px)
  );
}

.blank-page .site-nav {
  color: var(--ink);
}

.blank-hero {
  position: sticky;
  top: 0;
  z-index: 0;
  width: 100%;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  background: var(--paper-light);
}

.blank-hero img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.blank-hero .blank-hero-on {
  z-index: 1;
  opacity: var(--blank-crossfade, 0);
}

/* static hero variant (diaspora.html): a single image, so no scroll pause
   is needed — the story scrolls straight up over the pinned image */
.blank-hero-static {
  background: var(--paper);
}

.blank-scroll-pause {
  position: relative;
  z-index: 1;
  height: 100svh;
  pointer-events: none;
}

.blank-story {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  margin: 0 auto;
  padding: 110px 0 130px;
  flex-direction: column;
  align-items: center;
  gap: 76px;
  border-radius: 18px 18px 0 0;
  background: var(--paper);
}

.blank-story > * {
  width: calc(100% - var(--work-side-margin) - var(--work-side-margin));
}

.blank-image-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Previous / next artwork links below the image column. */
.artwork-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.artwork-nav a {
  display: flex;
  min-width: 0;
  min-height: 96px;
  padding: 20px 0;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  color: var(--ink);
  text-decoration: none;
}

.artwork-nav a + a {
  align-items: flex-end;
  padding-left: 20px;
  border-left: 1px solid var(--line);
  text-align: right;
}

.artwork-nav a:first-child {
  padding-right: 20px;
}

/* Centre "back to top" link */
.artwork-nav .artwork-nav-top {
  align-items: center;
  text-align: center;
}

/* Narrow screens: prev/next stay side by side, "back to top" gets its own row below */
@media (max-width: 600px) {
  .artwork-nav {
    grid-template-columns: 1fr 1fr;
  }

  .artwork-nav .artwork-nav-top {
    grid-column: 1 / -1;
    order: 3;
    min-height: 64px;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* Gallery cards: leave breathing room when landing via work.html#piece */
.project-card[id] {
  scroll-margin-top: 24px;
}

.artwork-nav-label {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.artwork-nav-title {
  font-family: "Space Grotesk", sans-serif;
  font-size: 18px;
  font-weight: 400;
}

.artwork-nav-number {
  margin-right: 8px;
  color: var(--rose-deep);
}

.artwork-nav a + a .artwork-nav-number {
  margin-right: 0;
  margin-left: 8px;
}

/* --- Hover: rose fill (reference version) ---
   To go back to the simple version, delete this block and restore:
   .artwork-nav a:hover .artwork-nav-title,
   .artwork-nav a:focus-visible .artwork-nav-title { color: var(--rose-deep); } */
.artwork-nav a {
  padding-right: 24px;
  padding-left: 24px;
  transition: background-color 280ms ease;
}

.artwork-nav-label,
.artwork-nav-title,
.artwork-nav-number {
  transition: color 280ms ease;
}

.artwork-nav a:hover,
.artwork-nav a:focus-visible {
  background: var(--rose-deep);
}

.artwork-nav a:hover .artwork-nav-label,
.artwork-nav a:hover .artwork-nav-title,
.artwork-nav a:hover .artwork-nav-number,
.artwork-nav a:focus-visible .artwork-nav-label,
.artwork-nav a:focus-visible .artwork-nav-title,
.artwork-nav a:focus-visible .artwork-nav-number {
  color: #fff;
}
/* --- end rose fill --- */

@media (max-width: 420px) {
  .artwork-nav-title {
    font-size: 15px;
  }
}

.blank-story-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.65fr);
  column-gap: 48px;
  align-items: start;
}

.project-title-row {
  display: grid;
  margin-bottom: 26px;
  grid-template-columns: 1fr 76px;
  gap: 24px;
  align-items: last baseline;
}

.project-title-row .project-year {
  display: grid;
  margin: 0;
  gap: 5px;
}

/* the "year" label is hidden on screen but kept for screen readers */
.project-title-row .project-year dt {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.project-title-row .project-year dd {
  margin: 0;
  color: var(--rose-deep);
  font-size: 17px;
  line-height: 1.35;
}

.blank-story-intro h1 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* Starts in the eyebrow's row and shares its baseline, so the h1 lines up
   with the text in the rose box; spans down beside the description. */
.project-heading {
  grid-column: 2;
  grid-row: 2 / span 2;
  align-self: baseline;
}

/* Rose label box, matching the "eyebrow" on the work page. */
.project-eyebrow {
  grid-column: 1;
  grid-row: 2;
  align-self: baseline;
  justify-self: start;
  margin: 0 0 18px;
  padding: 7px 24px;
  background: var(--rose-deep);
  color: #fff;
}

/* Let the index and description sit directly in the intro grid so the
   description and the title block share a row and their tops line up. */
.project-copy {
  display: contents;
}

.project-copy .project-description {
  grid-column: 1;
  grid-row: 3;
  margin: 0;
}

.project-index {
  grid-column: 1;
  grid-row: 1;
  margin: 0 0 18px;
  color: var(--rose-deep);
  font-size: 17px;
}

.project-details {
  display: grid;
  margin: 0 0 24px;
  grid-template-columns: 1fr;
  gap: 26px;
  border-top: 1px solid var(--line);
  padding-top: 26px;
}

.project-details div {
  display: grid;
  gap: 5px;
}

.project-details dt {
  color: var(--rose-deep);
  font-size: 17px;
  text-transform: uppercase;
}

.project-details dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
}

/* the (h)/(w)/(d) after each dimension */
.dim-label {
  font-size: 12px;
}

.project-description {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.28;
}

.project-copy .project-description {
  max-width: 1100px;
}

.blank-story-intro > p:last-child {
  width: 100%;
  max-width: none;
  margin: 0;
}

.blank-video {
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--paper);
}

.blank-video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.blank-story figure {
  margin: 0;
}

/* Detail images show uncropped at their natural aspect ratio
   (export at 2560 × 1600 / 16:10 for a consistent column). */
.blank-story figure img {
  display: block;
  width: 100%;
  height: auto;
}

.blank-story figcaption {
  margin-top: 12px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

@media (max-width: 1660px) {
  .blank-story {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .blank-hero {
    min-height: 520px;
    height: 100svh;
  }

  .blank-page .site-header {
    left: 20px;
    width: calc(100% - 40px);
  }

  /* any transform on the header turns it into the containing block for the
     fixed .site-nav overlay, shrinking the red menu to the header's 68px strip.
     Drop it while the menu is open (also keeps the close button on screen). */
  .menu-open.blank-page .site-header {
    transform: none;
  }

  .blank-story {
    width: 100%;
    padding: 72px 0 90px;
    gap: 48px;
  }

  .blank-story > * {
    width: calc(100% - 40px);
  }

  .blank-story-intro {
    grid-template-columns: 1fr;
    row-gap: 30px;
    align-items: start;
  }

  .project-heading,
  .project-index,
  .project-eyebrow,
  .project-copy .project-description {
    grid-column: auto;
    grid-row: auto;
    align-self: start;
  }
}

@media (max-width: 420px) {
  .blank-page .site-header {
    left: 16px;
    width: calc(100% - 32px);
  }

  .blank-story {
    width: 100%;
  }

  .blank-story > * {
    width: calc(100% - 32px);
  }
}

.work-page .work-section {
  min-height: calc(100svh - 336px);
}

/* About page — photo, bio block (.about-col-first) and statement block
   (.about-col-second) all sit on one grid on .about-page; the layouts below
   just place them. Same width + centering as .site-header, so the text's
   right edge lines up with the nav.
     ≥1400px  three across: photo | bio | statement
     901–1399 two over one: photo | bio, then the statement full width
     ≤900     single column: bio, photo, statement */
.about-page {
  display: grid;
  width: calc(100% - var(--work-side-margin) - var(--work-side-margin));
  min-height: calc(100svh - 120px);
  margin: 0 auto;
  /* 76px clears the header (from .subpage-main) + 60px breathing room */
  padding: 136px 0 90px;
  grid-template-columns: minmax(0, 1fr);
  /* rows hug the content, centred in the window */
  align-content: center;
  align-items: start;
}

/* the section wrapper steps aside so its blocks join the page grid */
.about-content {
  display: contents;
}

/* wide screens: three columns. The bio's header + rose line sit over
   column 2; the statement's rose question rises beside the header so both
   columns' body text starts on the same line. */
@media (min-width: 1400px) {
  .about-page {
    /* photo 600 : two 532px text columns, ~55px between each */
    grid-template-columns: minmax(0, 600fr) minmax(0, 532fr) minmax(0, 532fr);
    column-gap: 55px;
  }

  /* lift the column wrappers out so their children share one grid */
  .about-col {
    display: contents;
  }

  .about-col-first > .contact-heading {
    grid-column: 2;
    grid-row: 1;
    /* may run past column 2, so it stays on one line */
    white-space: nowrap;
  }

  .about-col-first > .contact-lede {
    grid-column: 2;
    grid-row: 2;
  }

  .about-col-first > .about-copy {
    grid-column: 2;
    grid-row: 3;
  }

  /* bottom of the question lines up with the bottom of the rose line */
  .about-col-second > .about-subheading {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: end;
    margin: 0;
  }

  .about-page .about-col-second > .about-copy {
    grid-column: 3;
    grid-row: 3;
    /* same gap as the left column, so the body text tops align */
    margin-top: 14px;
  }

  .about-col-second > .about-cv {
    grid-column: 3;
    grid-row: 4;
    justify-self: start;
  }

  .about-portrait {
    grid-column: 1;
    grid-row: 1 / 5;
  }
}

/* first break: photo beside the bio on top, the statement runs the full
   width underneath */
@media (min-width: 901px) and (max-width: 1399px) {
  .about-page {
    grid-template-columns: minmax(0, 600fr) minmax(0, 532fr);
    column-gap: 54px;
  }

  .about-portrait {
    grid-column: 1;
    grid-row: 1;
  }

  .about-col-first {
    grid-column: 2;
    grid-row: 1;
  }

  /* here the bio is short, so the photo often crops top + bottom: keep the
     crop off the head (the head sits near the photo's top edge). Extra
     .about-page so it beats the shared photo rule further down. */
  .about-page .about-portrait img {
    object-position: 54% 8%;
  }

  .about-col-second {
    grid-column: 1 / -1;
    grid-row: 2;
    /* + the question's own 28px = 56px below the photo */
    margin-top: 28px;
  }
}

.about-copy {
  margin-top: 14px;
  color: #716b5c;
  font-size: 14px;
  line-height: 1.5;
}

.about-copy p {
  margin: 0;
}

.about-copy p + p {
  margin-top: 1.5em;
}

.about-subheading {
  margin: 28px 0 0;
  color: var(--rose);
  font-family: "DM Sans", sans-serif;
  font-size: 17px;
  font-weight: 450;
  line-height: 1.25;
}

.about-subheading + .about-copy {
  margin-top: 18px;
}

/* Matches the contact page's subscribe button */
/* button style shared with .pill-link (see top of file) */
.about-cv {
  margin-top: 38px;
}

.about-portrait {
  margin: 0;
}

.about-portrait img {
  display: block;
  width: 100%;
  height: auto;
}

/* beside text (both wider layouts) the photo runs from the logo's left edge
   and matches the text's height: top level with "mike wolfram", bottom
   level with the last line beside it ("download cv" when three across) */
@media (min-width: 901px) {
  .about-portrait {
    position: relative;
    align-self: stretch;
  }

  /* fills the text's height (cropping if needed) without adding to it */
  .about-portrait img {
    position: absolute;
    inset: 0;
    height: 100%;
    object-fit: cover;
    /* when cropped, favour the front of the figure: leave breathing room
       ahead of the chest, hands + sculpture (his back may trim instead) */
    object-position: 54% 50%;
  }
}

/* single column: the photo (full shape, uncropped) sits between the bio and
   the statement, in source order: bio, photo, statement */
@media (max-width: 900px) {
  .about-page {
    /* text starts under the nav rather than floating mid-screen */
    align-content: start;
  }

  .about-col-first {
    order: 1;
  }

  .about-portrait {
    order: 2;
    margin-top: 40px;
  }

  .about-col-second {
    order: 3;
    /* + the question's own 28px = 40px below the photo, matching above */
    margin-top: 12px;
  }
}

/* Contact page — matches the cream backdrop baked into contact_01.jpg */
.contact-body,
html:has(.contact-body) {
  background: #f1ecde;
}

/* the sculpture photo's empty cream edges run past the page margins */
html:has(.contact-body) {
  overflow-x: clip;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.contact-page {
  /* same width + centering as .site-header so the text lines up with the logo */
  width: calc(100% - var(--work-side-margin) - var(--work-side-margin));
  margin: 0 auto;
}

.contact-content {
  position: relative;
  z-index: 1;
  display: grid;
  /* first two boxes fixed at 300px (fits the 290px email field + the
     no-wrap ledes); "feed your mind" fills the rest. 60px between boxes. */
  /* middle track = 300px box + 60px padding so the first divider gets the
     same 120px spacing as the second */
  grid-template-columns: 300px 360px minmax(0, 1fr);
  justify-content: start;
  gap: 76px 60px;
  /* 170px (was 220): boxes sit 50px closer to the nav in three-across */
  padding: 170px 0 0;
  /* breathing room between the merlin quote and the sculpture photo
     (the photo is pulled up under the text, so this pushes it down) */
  padding-bottom: 60px;
}


/* three-across: 60px grid gap + 60px padding = 120px between boxes 2 and 3,
   with a faint hairline at its centre (the box's left edge, 60px each side) */
.contact-block-wide {
  padding-left: 60px;
  border-left: 1px solid rgba(87, 84, 79, 0.18);
}

.contact-block-wide .contact-lede {
  white-space: normal;
}

/* matching hairline between "get in touch" and "stay in touch":
   60px gap + 60px padding = 120px. The line is pulled 20px left so it sits
   midway between the end of the get-in-touch text (which stops short of its
   300px box) and the start of the stay-in-touch text */
.contact-block-subscribe {
  margin-left: -20px;
  padding-left: 80px;
  border-left: 1px solid rgba(87, 84, 79, 0.18);
}

.contact-block-wide .about-copy {
  margin-top: 14px;
}

.contact-heading {
  margin: 0;
  color: var(--heading);
  font-family: "Space Grotesk", sans-serif;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.contact-lede {
  margin: 10px 0 0;
  color: var(--rose);
  font-family: "DM Sans", sans-serif;
  font-size: 17px;
  /* a touch heavier than regular (DM Sans loads as a variable font) */
  font-weight: 450;
  line-height: 1.25;
  /* lines are broken by hand with <br>; never re-wrap them */
  white-space: nowrap;
}

.contact-list {
  display: grid;
  gap: 18px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
  color: #57544f;
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
}

.contact-list li {
  display: flex;
  align-items: center;
  gap: 24px;
}

.contact-list svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linejoin: round;
}

.contact-list a {
  transition: color 160ms ease;
}

.contact-list a:hover,
.contact-list a:focus-visible {
  color: var(--rose-deep);
}

.subscribe-form {
  display: grid;
  gap: 20px;
  justify-items: start;
  margin-top: 34px;
}

.subscribe-form input {
  /* fills its box at every layout */
  width: 100%;
  height: 38px;
  border: 1px solid transparent;
  border-radius: 0;
  padding: 0 12px;
  background: #fff;
  color: #57544f;
  font: 14px "DM Sans", sans-serif;
}

/* wide layout: narrow the email field to sit neatly under the text above
   (same width as the "stay in touch" heading, as in the single column) */
@media (min-width: 1378px) {
  .subscribe-form input[type="email"] {
    width: min(100%, 251px);
  }
}

.subscribe-form input:focus-visible {
  border-color: var(--rose);
  outline: none;
}

/* MailerLite needs a wrapper around the field; display: contents keeps the
   input a direct item of the form grid, so the layout is unaffected */
.subscribe-field {
  display: contents;
}

.subscribe-form[hidden] {
  display: none;
}

/* classes below are added and removed by MailerLite's script */
.subscribe-form .ml-error input {
  border-color: var(--rose);
}

.subscribe-error {
  margin: 0;
  color: var(--rose);
  font-size: 14px;
}

.subscribe-error.d-none {
  display: none;
}

.contact-block-subscribe .subscribe-success {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 34px;
}

.contact-block-subscribe .subscribe-success[hidden] {
  display: none;
}

.subscribe-success-icon {
  width: 28px;
  height: 28px;
  flex: none;
}

.subscribe-success-icon circle {
  fill: var(--rose);
}

.subscribe-success-icon path {
  fill: none;
  stroke: #fff;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.subscribe-success .contact-lede {
  margin: 0;
  line-height: 1.2;
}

.subscribe-success-note {
  display: block;
  color: var(--heading);
  font-size: 15.5px;
  font-weight: 600;
}

/* full-width photo under the text, pulled up so its empty upper backdrop sits
   behind the copy and the tallest spire just reaches the text (% margins
   resolve against the page width, so the overlap scales with the image) */
.contact-visual {
  position: relative;
  z-index: 0;
  /* +50px offsets the text moving up 50px, so the image stays put */
  margin: calc(-3.66% + 57.4px) 0 0;
}

.contact-visual img {
  display: block;
  /* the wooden shapes span x 294–2696 of the 3040px photo: scale + shift so
     they sit 50px in from each edge of the text boxes (column − 100px) */
  width: calc(126.56% - 126.56px);
  max-width: none;
  margin-left: calc(-12.24% + 62.24px);
  height: auto;
  /* backdrop pixels lighter than the page drop out; sculpture + shadow stay */
  mix-blend-mode: darken;
  /* feather every edge so the photo's rectangle melts into the page */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 15%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 15%, #000 80%, transparent 100%);
  mask-composite: intersect;
}

.contact-body .site-footer {
  background: transparent;
}

/* "feed your mind" text would drop under ~360px (page width ≈ 300 + 120 +
   300 + 120 + 360 = 1200px, plus 2 × 80px margins + ~17px scrollbar):
   fall back to two boxes with "feed your mind" spanning below, no divider */
@media (max-width: 1377px) {
  .contact-content {
    /* empty third track keeps the grid full page width, so "feed your
       mind" (spanning every track) runs edge to edge */
    grid-template-columns: 300px minmax(360px, 585px) minmax(0, 1fr);
    row-gap: 0;
    padding-top: 140px;
  }

  /* "stay in touch" widens to 175% (300px box → 525px; track = box + 60px
     divider padding) to fill the top row, then shrinks smoothly back to
     300px as the window narrows toward the single-column break. The email
     field stretches with it so the extra width shows. */
  .subscribe-form {
    justify-items: stretch;
  }

  .subscribe-form button {
    justify-self: start;
  }

  /* the rose lede drops its hand-set line breaks and wraps to the box,
     so it widens and narrows with it (breaks return in single column) */
  .contact-block-subscribe .contact-lede {
    white-space: normal;
  }

  .contact-block-subscribe .contact-lede br {
    display: none;
  }

  /* text didn't move up in this layout, so no +50px offset */
  .contact-visual {
    margin-top: calc(-3.66% + 7.4px);
  }

  /* full-width, with a long horizontal hairline above it centred in the
     76px between the top boxes and this one */
  .contact-block-wide {
    grid-column: 1 / -1;
    width: 0;
    min-width: 100%;
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
    margin-top: 38px;
    padding-top: 38px;
    border-top: 1px solid rgba(87, 84, 79, 0.18);
  }
}

/* the two boxes + divider spacing (720px) stop fitting between the 80px
   margins (+ scrollbar): stack all three in one full-width column,
   text only (no photo) */
@media (max-width: 897px) {
  .contact-content {
    grid-template-columns: 1fr;
    /* breathing room above the footer now the photo is gone */
    padding-bottom: 90px;
  }

  .contact-visual {
    display: none;
  }

  /* boxes are stacked: swap the vertical dividers for horizontal ones,
     centred in the space between boxes (spacing moves from the grid gap
     into margin above + padding below each line) */
  .contact-content {
    row-gap: 0;
  }

  /* back to the standard email field width */
  /* same width as the "stay in touch" heading text above it */
  .subscribe-form input[type="email"] {
    width: min(100%, 251px);
  }

  /* and back to the hand-set three-line rose lede */
  .contact-block-subscribe .contact-lede {
    white-space: nowrap;
  }

  .contact-block-subscribe .contact-lede br {
    display: inline;
  }

  .contact-block-subscribe,
  .contact-block-wide {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
    margin-top: 38px;
    padding-top: 38px;
    border-top: 1px solid rgba(87, 84, 79, 0.18);
  }
}

@media (max-width: 760px) {
  .about-page {
    width: calc(100% - 40px);
  }

  .about-page {
    /* 76px header clearance + 48px */
    padding-top: 124px;
  }

  .about-copy {
    font-size: 14px;
  }

  .contact-page {
    width: calc(100% - 40px);
  }

  .contact-content {
    padding-top: 48px;
  }

  /* phones: 56px between stacked boxes, line at the centre */
  .contact-block-subscribe,
  .contact-block-wide {
    margin-top: 28px;
    padding-top: 28px;
  }

  .contact-lede {
    font-size: 17px;
  }
}

@media (max-width: 420px) {
  .about-page {
    width: calc(100% - 32px);
  }

  /* very small phones: let the lede wrap rather than run off-screen */
  .contact-lede,
  .contact-block-subscribe .contact-lede {
    white-space: normal;
  }
}