/* Homepage editorial gallery, November 2026.
   Project pages and their shared stylesheet remain unchanged. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

html body { background: #050505 !important; background-image: none !important; }
html body #site-header { background-color: #050505 !important; }
html body #site-header.is-scrolled { background-color: rgba(5, 5, 5, .97) !important; }
/* Keep the animated editing tracks, over the same black as the page. */
html body #site-header::before { background: #050505 !important; }
html body #site-header > .header-edit-timeline {
  background: transparent !important;
}
html body #site-header > .header-edit-timeline::after {
  background: linear-gradient(90deg,
    rgba(5,5,5,.82) 0%, rgba(5,5,5,.30) 28%,
    rgba(5,5,5,.25) 60%, rgba(5,5,5,.78) 100%) !important;
}

#work.work-page {
  width: 100%;
  padding: clamp(115px, 10.5vw, 155px) 0 clamp(100px, 12vw, 180px) !important;
  overflow: visible;
  border-top: none !important;
}

#work .work-introduction,
#work .work-category {
  width: min(1440px, calc(100% - clamp(36px, 8vw, 148px)));
  margin-left: auto;
  margin-right: auto;
}

#work .work-introduction { margin-bottom: clamp(85px, 11vw, 155px); }
#work .work-eyebrow {
  display: block;
  color: #d3d1cb;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
}
#work .work-eyebrow span { color: #777; margin-left: 12px; letter-spacing: .08em; }
#work .work-introduction p {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  color: #f1f0ec;
  font-size: clamp(42px, 6.6vw, 105px);
  line-height: 1.04;
  letter-spacing: -.047em;
  margin: 28px 0 0;
}

#work .work-category { margin-bottom: 0 !important; }
#work .work-category + .work-category { margin-top: clamp(100px, 13vw, 190px) !important; }

#work .work-category > h3 {
  text-align: left !important;
  margin: 0 0 33px !important;
  border-bottom: 1px solid #454545;
  padding-bottom: 20px;
  font-size: clamp(21px, 2.2vw, 34px) !important;
  line-height: 1.15;
  font-style: normal !important;
  letter-spacing: -.025em;
}
#work .work-category > h3 .work-heading-link {
  justify-content: flex-start !important;
  display: block !important;
  width: 100%;
  font-size: inherit !important;
  font-style: normal !important;
  letter-spacing: inherit !important;
  text-transform: none;
}
#work .work-category > h3 .work-heading-rule { display: none !important; }

#work .editorial-gallery, #work .editorial-grid { width: 100%; }
#work .editorial-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(20px, 3.2vw, 54px);
  row-gap: clamp(48px, 6vw, 98px);
  align-items: start;
}
#work .editorial-grid .project-card {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  pointer-events: auto !important;
  transform: none !important;
  text-decoration: none;
  color: inherit;
  animation: none !important;
}
#work .editorial-grid .project-card:first-child { grid-column: 1 / -1; }
#work .editorial-grid .project-card:first-child .project-image { aspect-ratio: 3840 / 1634 !important; }
#work .editorial-grid .project-image {
  width: 100%;
  aspect-ratio: 3840 / 1634 !important;
  margin: 0 0 20px !important;
  background: #252525;
  border-radius: 3px !important;
  box-shadow: none !important;
  overflow: hidden;
}
#work .editorial-grid .project-image img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms cubic-bezier(.2,.75,.2,1), filter 500ms ease;
}
#work .editorial-grid .project-card:hover .project-image img,
#work .editorial-grid .project-card:focus-visible .project-image img { transform: scale(1.035); filter: brightness(1.07); }
#work .editorial-grid .project-image::before,
#work .editorial-grid .project-image::after { display: none !important; }
#work .editorial-grid .project-heading {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: baseline !important;
  gap: 5px 10px;
  margin: 0 !important;
  text-align: left !important;
  opacity: 1 !important;
  transform: none !important;
}
#work .editorial-grid .project-heading h4 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(20px, 2vw, 29px) !important;
  line-height: 1.22;
  letter-spacing: -.02em;
}
#work .editorial-grid .project-type {
  font-size: clamp(13px, 1.2vw, 16px) !important;
  line-height: 1.5;
  color: #a9a9a9;
}
#work .editorial-grid .project-type::before { content: '—'; margin-right: 7px; }
#work .editorial-grid .project-card > p {
  text-align: left !important;
  opacity: 1 !important;
  transform: none !important;
  margin: 8px 0 0 !important;
  color: #929292 !important;
  font-size: 13px !important;
  letter-spacing: .015em;
}
#work .editorial-grid .project-card:focus-visible { outline: 1px solid #eee; outline-offset: 8px; }

@media (max-width: 700px) {
  #work.work-page { padding-top: 115px !important; padding-bottom: 100px !important; }
  #work .work-introduction, #work .work-category { width: calc(100% - 36px); }
  #work .work-introduction { margin-bottom: 80px; }
  #work .work-introduction p { margin-top: 20px; font-size: clamp(44px, 10vw, 65px); }
  #work .work-category > h3 { padding-bottom: 15px; margin-bottom: 26px !important; }
  #work .editorial-grid { grid-template-columns: 1fr; row-gap: 45px; }
  #work .editorial-grid .project-card:first-child { grid-column: auto; }
  #work .editorial-grid .project-card:first-child .project-image { aspect-ratio: 3840 / 1634 !important; }
  #work .editorial-grid .project-heading { flex-wrap: wrap; }
  #work .editorial-grid .project-heading h4 { font-size: 22px !important; }
  #work .work-category + .work-category { margin-top: 92px !important; }
}
@media (prefers-reduced-motion: reduce) {
  #work .editorial-grid .project-image img { transition: none; }
}

/* Two-category in-place work switch. The inactive panel is removed from
   layout so the About section never sits beneath a duplicate gallery. */
#work .work-category-switch {
  width: min(1440px, calc(100% - clamp(36px, 8vw, 148px)));
  margin: 0 auto 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 3.5vw, 58px);
  border-bottom: none;
}
#work .work-switch-button {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #8f8f8f;
  cursor: pointer;
  font-family: 'Instrument Sans', Arial, sans-serif;
  font-size: clamp(15px, 1.75vw, 24px);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.35;
  padding: 0 0 19px;
  margin: 0 0 -1px;
  text-align: center;
  transition: color 250ms ease, border-color 250ms ease;
}
#work .work-switch-button:hover { color: #ddd; }
#work .work-switch-button.is-selected {
  color: #f5f4ef;
  border-bottom-color: #f5f4ef;
}
#work .work-switch-button:focus-visible { outline: 2px solid #f5f4ef; outline-offset: 5px; }
#work .work-category > h3 { display: none !important; }
#work .work-category[hidden] { display: none !important; }
#work .work-category + .work-category { margin-top: 0 !important; }
#work .work-category.work-panel-entering { animation: workPanelEnter 400ms ease both; }
@keyframes workPanelEnter {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 700px) {
  #work .work-category-switch { width: calc(100% - 36px); gap: 18px; margin-bottom: 55px; }
  #work .work-switch-button { font-size: clamp(13px, 3.7vw, 17px); padding-bottom: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  #work .work-category.work-panel-entering { animation: none; }
  #work .work-switch-button { transition: none; }
}

/* Typographic identity: crisp editorial sans with restrained mono detailing. */
html body#top {
  font-family: 'IBM Plex Sans', 'Instrument Sans', Arial, sans-serif !important;
}
html body#top #site-header h1,
html body#top #site-header .header-identity,
html body#top #about h2,
html body#top #contact h2 {
  font-family: 'IBM Plex Sans', Arial, sans-serif !important;
}
html body#top #site-header nav,
html body#top #site-header nav a,
html body#top #site-header .role,
html body#top #work .work-switch-button,
html body#top #work .project-type,
html body#top #work .project-card > p {
  font-family: 'IBM Plex Mono', monospace !important;
}
html body#top #site-header nav a:hover,
html body#top #site-header nav a:focus-visible,
html body#top #contact a:hover,
html body#top #about a:hover { color: #dcb88f !important; }
html body#top #site-header .header-identity h1 { color: #f5f5f0 !important; }
html body#top #site-header nav a::after { background: #dcb88f !important; }
html body#top #site-header { border-bottom-color: rgba(245,245,240,.22) !important; }
html body#top #about,
html body#top #contact,
html body#top footer { border-top-color: rgba(245,245,240,.22) !important; }
html body#top #contact .contact-links a { border-bottom-color: rgba(245,245,240,.28) !important; }

/* Use the project's precise, upright typography for the two major sections. */
html body#top #about .about-text > h2,
html body#top #contact .contact-heading h2 {
  font-family: 'IBM Plex Sans', Arial, sans-serif !important;
  font-style: normal !important;
  font-weight: 500 !important;
  letter-spacing: -.035em !important;
}
html body#top #about .about-text > p,
html body#top #contact p,
html body#top #contact .contact-links a {
  font-family: 'IBM Plex Sans', Arial, sans-serif !important;
  font-style: normal;
}

/* Neutral editorial rules retained; the photograph frame is defined below. */
html body#top #about .about-manifesto-line,
html body#top #about .about-collaboration-statement .about-manifesto-line,
html body#top #about .about-collaboration-statement:hover .about-manifesto-line {
  background: rgba(245,245,240,.23) !important;
}

/* Title cards: all text sits within the image, anchored at the lower left. */
#work .editorial-grid .project-card { isolation: isolate; }
#work .editorial-grid .project-image {
  margin: 0 !important;
  border-radius: 3px !important;
}
#work .editorial-grid .project-image::after {
  content: '' !important;
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(0,0,0,.88) 0%, rgba(0,0,0,.58) 23%,
    rgba(0,0,0,.12) 60%, transparent 85%) !important;
}
#work .editorial-grid .project-heading {
  position: absolute !important;
  z-index: 2;
  left: clamp(18px, 2.4vw, 34px);
  right: clamp(18px, 2.4vw, 34px);
  bottom: clamp(41px, 4vw, 58px);
  gap: 0 11px;
  align-items: baseline !important;
  flex-wrap: wrap;
  line-height: 1.2;
}
#work .editorial-grid .project-heading h4 {
  font-family: 'IBM Plex Sans', Arial, sans-serif !important;
  font-style: normal !important;
  font-size: clamp(19px, 2vw, 29px) !important;
  font-weight: 500 !important;
  color: #fff9f0 !important;
  letter-spacing: -.025em;
  text-shadow: 0 1px 8px rgba(0,0,0,.45);
  transition: color 280ms ease;
}
#work .editorial-grid .project-card:first-child .project-heading h4 {
  font-size: clamp(26px, 3.1vw, 44px) !important;
}
#work .editorial-grid .project-type {
  font-size: clamp(11px, 1vw, 13px) !important;
  color: #d0d0cf !important;
  font-weight: 500;
  letter-spacing: .005em;
  transition: color 280ms ease;
}
#work .editorial-grid .project-card:hover .project-type,
#work .editorial-grid .project-card:focus-visible .project-type {
  color: #dcb88f !important;
}
#work .editorial-grid .project-card:hover .project-heading h4,
#work .editorial-grid .project-card:focus-visible .project-heading h4 {
  color: #e4c6a3 !important;
}
#work .editorial-grid .project-card > p {
  position: absolute !important;
  z-index: 2;
  left: clamp(18px, 2.4vw, 34px);
  right: clamp(18px, 2.4vw, 34px);
  bottom: clamp(16px, 1.9vw, 26px);
  color: #d1d4d2 !important;
  font-size: clamp(10px, .9vw, 12px) !important;
  font-weight: 400;
  line-height: 1.3;
  text-shadow: 0 1px 5px rgba(0,0,0,.5);
  transition: color 280ms ease;
}
#work .editorial-grid .project-card:hover > p,
#work .editorial-grid .project-card:focus-visible > p {
  color: #dcb88f !important;
}
#work .work-switch-button {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: clamp(14px, 1.45vw, 20px);
  letter-spacing: -.035em;
}
#work .work-switch-button.is-selected {
  color: #dcb88f;
  border-bottom-color: #dcb88f;
}
#work .work-switch-button:hover { color: #e4c6a3; }

@media (max-width: 700px) {
  #work .editorial-grid .project-heading {
    left: 15px; right: 15px; bottom: 36px;
    gap: 1px 8px;
  }
  #work .editorial-grid .project-heading h4,
  #work .editorial-grid .project-card:first-child .project-heading h4 {
    font-size: clamp(17px, 4.4vw, 22px) !important;
  }
  #work .editorial-grid .project-type { font-size: 10px !important; }
  #work .editorial-grid .project-card > p {
    left: 15px; right: 15px; bottom: 13px;
    font-size: 10px !important;
  }
  #work .work-switch-button { font-size: clamp(12px, 3.3vw, 15px); }
}
@media (prefers-reduced-motion: reduce) {
  #work .editorial-grid .project-type,
  #work .editorial-grid .project-heading h4,
  #work .editorial-grid .project-card > p { transition: none; }
}

/* About Me redesign: compact editorial profile, not a full-height photo spread. */
html body#top #about.about {
  padding-top: clamp(75px, 8vw, 118px) !important;
  padding-bottom: clamp(75px, 8vw, 118px) !important;
}
@media (min-width: 801px) {
  html body#top #about.about {
    padding-left: 4% !important;
    padding-right: 4% !important;
  }
  html body#top #about .combined-about-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(250px, .55fr) !important;
    column-gap: clamp(50px, 7vw, 125px) !important;
    align-items: start !important;
    max-width: 1350px;
    margin-inline: auto;
  }
  html body#top #about .about-text { max-width: 720px !important; }
  html body#top #about .about-visuals {
    width: 100% !important;
    max-width: 360px !important;
    justify-self: end !important;
    align-self: start !important;
    margin-top: 48px;
  }
  html body#top #about .about-desk-photo {
    width: 100% !important;
    max-width: 340px !important;
    margin: 0 0 0 auto !important;
    border-radius: 3px !important;
  }
}
html body#top #about .about-text > h2 {
  position: static !important;
  top: auto !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: clamp(18px, 1.55vw, 22px) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  letter-spacing: -.02em !important;
  line-height: 1.35 !important;
  color: #dcb88f !important;
  margin: 0 0 34px !important;
}
html body#top #about .about-text > p.about-bio-intro {
  font-size: clamp(17px, 1.4vw, 21px) !important;
  font-weight: 500 !important;
  line-height: 1.52 !important;
  max-width: 52ch !important;
  margin-bottom: 28px !important;
}
html body#top #about .about-text > p.about-bio-background,
html body#top #about .about-text > p.about-bio-directing {
  font-size: clamp(13px, 1vw, 15px) !important;
  line-height: 1.8 !important;
  max-width: 67ch !important;
  margin-bottom: 22px !important;
  color: #b9b9b9 !important;
}
html body#top #about .about-text > p.about-bio-directing {
  border-left: 1px solid rgba(245,245,240,.22) !important;
  padding-left: 22px !important;
  margin-top: 9px !important;
  margin-bottom: 0 !important;
}
html body#top #about .about-highlight {
  color: #dcb88f;
  font-weight: 500;
}
html body#top #about .about-text > p,
html body#top #about .about-text > p.about-bio-intro,
html body#top #about .about-text > p.about-bio-background,
html body#top #about .about-text > p.about-bio-directing {
  font-family: 'IBM Plex Mono', monospace !important;
}
html body#top #about .about-desk-photo img { border-radius: 3px !important; }

@media (max-width: 800px) {
  html body#top #about .combined-about-grid { gap: 36px !important; }
  html body#top #about .about-visuals {
    width: min(100%, 340px) !important;
    margin: 0 auto !important;
  }
  html body#top #about .about-desk-photo {
    width: 100% !important;
    max-width: 340px !important;
    margin: 0 !important;
  }
  html body#top #about .about-text > h2 { margin-bottom: 25px !important; }
}

/* Re-centre biography and image, with linework sized to the actual photograph. */
@media (min-width: 801px) {
  html body#top #about .combined-about-grid {
    width: min(100%, 1380px) !important;
    max-width: 1380px !important;
    margin: 0 auto !important;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr) !important;
    column-gap: clamp(54px, 7vw, 118px) !important;
    align-items: center !important;
  }
  html body#top #about .about-text {
    justify-self: center !important;
    max-width: 650px !important;
  }
  html body#top #about .about-visuals {
    align-self: center !important;
    justify-self: center !important;
    margin: 0 auto !important;
    max-width: 320px !important;
  }
  html body#top #about .about-desk-photo {
    margin: 0 auto !important;
    max-width: 320px !important;
  }
}
@media (max-width: 800px) {
  html body#top #about .about-visuals { margin: 0 auto !important; }
}

/* Section title is a centred category-style tab, independent of either column. */
html body#top #about > .about-section-title {
  display: table !important;
  position: static !important;
  margin: 0 auto clamp(54px, 6vw, 86px) !important;
  padding: 0 0 16px !important;
  border-bottom: 2px solid #dcb88f !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-style: normal !important;
  font-size: clamp(27px, 2.55vw, 38px) !important;
  font-weight: 500 !important;
  letter-spacing: -.035em !important;
  line-height: 1.35 !important;
  text-align: center !important;
  color: #dcb88f !important;
}
@media (max-width: 800px) {
  html body#top #about > .about-section-title {
    font-size: clamp(23px, 5.6vw, 30px) !important;
    margin-bottom: 42px !important;
  }
}

/* Centre Contact as a single composition, without resizing or repositioning
   its two internal content groups independently. */
@media (min-width: 801px) {
  html body#top #contact .contact-grid {
    width: min(100%, 1200px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 60px !important;
  }
}

/* Legacy accents are disabled. Only .about-photo-frame owns the corners. */
html body#top #about .about-visuals::before,
html body#top #about .about-visuals::after,
html body#top #about .about-desk-photo::before,
html body#top #about .about-desk-photo::after {
  content: none !important;
  display: none !important;
  box-shadow: none !important;
}
html body#top #about .about-photo-frame {
  display: block;
  position: relative;
  overflow: visible;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  padding: 0;
  background: none !important;
}
html body#top #about .about-photo-frame::before,
html body#top #about .about-photo-frame::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  width: 88px !important;
  height: 88px !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
  z-index: 2 !important;
  background: none !important;
  border: 0 solid #dcb88f !important;
  box-shadow: none !important;
}
html body#top #about .about-photo-frame::before {
  top: -21px !important;
  left: -21px !important;
  border-top-width: 1px !important;
  border-left-width: 1px !important;
}
html body#top #about .about-photo-frame::after {
  right: -21px !important;
  bottom: -21px !important;
  border-bottom-width: 1px !important;
  border-right-width: 1px !important;
}
/* Retain the previous desktop image offset, now on the unified frame. */
@media (min-width: 1051px) {
  html body#top #about .about-photo-frame {
    transform: translateX(-12px) !important;
  }
}
html body#top #about .about-photo-frame .about-desk-photo {
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  border-radius: 3px !important;
  box-shadow: none !important;
}

/* Final About/Contact refinements: neutral copy, restrained interactive amber. */
html body#top #about .about-highlight {
  color: inherit !important;
  font-weight: inherit !important;
}
html body#top #about .about-text > p.about-bio-directing {
  border-left-color: #dcb88f !important;
  transition: color 300ms ease, border-color 300ms ease !important;
}
html body#top #about .about-text > p.about-bio-directing:hover {
  color: #dcb88f !important;
}
html body#top #about > .about-section-title {
  color: #f5f5f0 !important;
  border-bottom-color: #dcb88f !important;
  transition: color 300ms ease !important;
}
html body#top #about > .about-section-title:hover {
  color: #dcb88f !important;
}
html body#top #contact .contact-heading h2 {
  display: table !important;
  width: max-content;
  max-width: 100%;
  padding-bottom: 14px !important;
  border-bottom: 2px solid #dcb88f !important;
  color: #f5f5f0 !important;
  transition: color 300ms ease !important;
}
html body#top #contact .contact-heading h2:hover {
  color: #dcb88f !important;
}
html body#top #about .about-text > p.about-bio-intro {
  font-size: clamp(19px, 1.6vw, 24px) !important;
}
html body#top #about .about-text > p.about-bio-background,
html body#top #about .about-text > p.about-bio-directing {
  font-size: clamp(15px, 1.2vw, 18px) !important;
}
@media (min-width: 801px) {
  html body#top #about .combined-about-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr) !important;
  }
  html body#top #about .about-visuals {
    max-width: 390px !important;
    position: relative !important;
    left: clamp(-90px, -6vw, -45px) !important;
  }
  html body#top #about .about-desk-photo,
  html body#top #about .about-photo-frame {
    max-width: 390px !important;
  }
}
@media (max-width: 800px) {
  html body#top #about .about-visuals,
  html body#top #about .about-photo-frame { max-width: 390px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html body#top #about .about-text > p.about-bio-directing,
  html body#top #about > .about-section-title,
  html body#top #contact .contact-heading h2 { transition: none !important; }
}

/* Match the outside margins of the two-column sections. */
@media (min-width: 801px) {
  html body#top #about .about-visuals {
    left: -55px !important;
    justify-self: end !important;
    margin-right: 0 !important;
  }
  html body#top #contact .contact-grid {
    width: 100% !important;
    max-width: none !important;
  }
  html body#top #contact .contact-details {
    justify-self: end !important;
    width: max-content !important;
    max-width: 100% !important;
  }
}

/* Final alignment and restrained interactive accents. */
html body#top #site-header .header-identity .role {
  color: #dcb88f !important;
}
html body#top #contact .contact-links a {
  color: #f5f5f0 !important;
  border-bottom-color: #dcb88f !important;
  transition: color 300ms ease, border-color 300ms ease !important;
}
html body#top #contact .contact-links a:hover,
html body#top #contact .contact-links a:focus-visible {
  color: #dcb88f !important;
  border-bottom-color: #dcb88f !important;
}
@media (min-width: 801px) {
  html body#top #contact .contact-heading {
    position: relative !important;
    left: 50px !important;
  }
  html body#top #contact .contact-details {
    position: relative !important;
    right: 55px !important;
  }
  html body#top #contact .contact-details > .contact-intro {
    text-align: right !important;
  }
}

/* Project caption block: centred like a centre-aligned paragraph. */
html body#top #work .editorial-grid .project-heading {
  justify-content: center !important;
  align-items: baseline !important;
  text-align: center !important;
}
html body#top #work .editorial-grid .project-heading h4,
html body#top #work .editorial-grid .project-heading .project-type,
html body#top #work .editorial-grid .project-card > p {
  text-align: center !important;
}

/* Subtle emphasis without moving the decorative corner lines. */
html body#top #about .about-photo-frame .about-desk-photo {
  overflow: hidden !important;
}
html body#top #about .about-photo-frame .about-desk-photo img {
  transition: transform 550ms cubic-bezier(.2,.8,.2,1), filter 550ms ease !important;
  transform-origin: center !important;
}
html body#top #about .about-photo-frame:hover .about-desk-photo img {
  transform: scale(1.025) !important;
  filter: brightness(1.10) saturate(1.07) !important;
}
@media (prefers-reduced-motion: reduce) {
  html body#top #about .about-photo-frame .about-desk-photo img {
    transition: none !important;
  }
  html body#top #about .about-photo-frame:hover .about-desk-photo img {
    transform: none !important;
  }
}

/* Captions beneath the stills: balanced spacing and shared centre axis. */
html body#top #work .editorial-grid .project-image {
  margin-bottom: 18px !important;
}
html body#top #work .editorial-grid .project-image::after {
  display: none !important;
  content: none !important;
}
html body#top #work .editorial-grid .project-heading {
  position: static !important;
  display: flex !important;
  justify-content: center !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 4px 9px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 12px !important;
  text-align: center !important;
}
html body#top #work .editorial-grid .project-heading h4 {
  font-size: clamp(19px, 2vw, 29px) !important;
  text-shadow: none !important;
}
html body#top #work .editorial-grid .project-card:first-child .project-heading h4 {
  font-size: clamp(23px, 2.6vw, 36px) !important;
}
html body#top #work .editorial-grid .project-heading .project-type {
  color: #b9b9b9 !important;
}
html body#top #work .editorial-grid .project-card > p {
  position: static !important;
  width: 100% !important;
  margin: 7px 0 0 !important;
  padding: 0 12px !important;
  text-align: center !important;
  text-shadow: none !important;
}

/* Corner outlines participate in the photo's emphasis animation. */
html body#top #about .about-photo-frame::before,
html body#top #about .about-photo-frame::after {
  transition: border-color 450ms ease, transform 550ms cubic-bezier(.2,.8,.2,1) !important;
}
html body#top #about .about-photo-frame:hover::before {
  border-color: #f4d6b1 !important;
  transform: translate(-4px, -4px) !important;
}
html body#top #about .about-photo-frame:hover::after {
  border-color: #f4d6b1 !important;
  transform: translate(4px, 4px) !important;
}

/* Contact: switch the font family only, retaining dimensions and spacing. */
html body#top #contact .contact-heading h2,
html body#top #contact .contact-heading p,
html body#top #contact .contact-details p,
html body#top #contact .contact-links a {
  font-family: 'IBM Plex Mono', monospace !important;
}
@media (prefers-reduced-motion: reduce) {
  html body#top #about .about-photo-frame::before,
  html body#top #about .about-photo-frame::after { transition: none !important; }
  html body#top #about .about-photo-frame:hover::before,
  html body#top #about .about-photo-frame:hover::after { transform: none !important; }
}

/* Fine alignment from the November 5 review. */
html body#top #contact .contact-heading h2 {
  position: relative !important;
  border-bottom-color: transparent !important;
}
html body#top #contact .contact-heading h2::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: #dcb88f;
  pointer-events: none;
}
@media (min-width: 801px) {
  html body#top #contact .contact-links {
    margin-left: 32px !important;
  }
}

/* Give captions a regular rhythm: more room above the title, much less
   excess space between the role line and the next thumbnail row. */
html body#top #work .editorial-grid {
  row-gap: clamp(36px, 3.3vw, 50px) !important;
}
html body#top #work .editorial-grid .project-image {
  margin-bottom: 25px !important;
}
html body#top #work .editorial-grid .project-heading h4 {
  font-family: 'IBM Plex Mono', monospace !important;
}

/* Balance the clear space on both sides of the Work/About divider. */
html body#top #work.work-page {
  padding-bottom: clamp(70px, 7.2vw, 110px) !important;
}
html body#top #about.about {
  padding-top: clamp(70px, 7.2vw, 110px) !important;
}

/* Contact columns share balanced outer gutters with the About copy above. */
@media (min-width: 801px) {
  html body#top #contact .contact-heading {
    left: 55px !important;
  }
  html body#top #contact .contact-details {
    right: 95px !important;
    margin-left: 0 !important;
  }
  html body#top #contact .contact-details > .contact-intro {
    text-align: left !important;
  }
  html body#top #contact .contact-links {
    margin-left: 0 !important;
  }
}

/* Keep the contact heading and opening copy on the same left edge. */
html body#top #contact .contact-heading > .contact-availability {
  margin-left: 0 !important;
}

/* A single alignment axis for the right-hand introduction and both links. */
html body#top #contact .contact-links {
  align-items: flex-start !important;
}
html body#top #contact .contact-links a {
  position: relative !important;
  font-weight: 400 !important;
  border-bottom: 0 !important;
}
html body#top #contact .contact-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 8px;
  bottom: 0;
  height: 1px;
  background-color: #b99d7c;
  transition: background-color 250ms ease;
}
html body#top #contact .contact-links a:hover::after,
html body#top #contact .contact-links a:focus-visible::after {
  background-color: #f4d6b1;
}

/* Restore the project captions inside each still, anchored bottom-left. */
html body#top #work .editorial-grid .project-image {
  margin-bottom: 0 !important;
}
html body#top #work .editorial-grid .project-heading {
  position: absolute !important;
  left: 22px !important;
  right: 22px !important;
  bottom: 45px !important;
  width: auto !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  padding: 0 !important;
  text-align: left !important;
  z-index: 2;
  text-shadow: 0 1px 8px rgba(0,0,0,.8) !important;
}
html body#top #work .editorial-grid .project-card > p {
  position: absolute !important;
  left: 22px !important;
  right: 22px !important;
  bottom: 18px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  z-index: 2;
  color: #f2efea !important;
  text-shadow: 0 1px 8px rgba(0,0,0,.85) !important;
}
html body#top #work .editorial-grid .project-heading .project-type {
  color: #f2efea !important;
}
@media (max-width: 700px) {
  html body#top #work .editorial-grid .project-heading {
    left: 14px !important;
    right: 14px !important;
    bottom: 37px !important;
  }
  html body#top #work .editorial-grid .project-card > p {
    left: 14px !important;
    right: 14px !important;
    bottom: 12px !important;
  }
}

/* Compact the two caption lines within the bottom-left corner. */
html body#top #work .editorial-grid .project-heading {
  bottom: 37px !important;
  gap: 2px 6px !important;
}
html body#top #work .editorial-grid .project-heading h4 {
  line-height: 1.08 !important;
}
html body#top #work .editorial-grid .project-heading .project-type {
  line-height: 1.15 !important;
}
html body#top #work .editorial-grid .project-card > p {
  bottom: 15px !important;
  line-height: 1.15 !important;
}
@media (min-width: 701px) {
  html body#top #work .editorial-grid a[href*="live-at-the-exchange"] .project-heading,
  html body#top #work .editorial-grid a[href*="live-at-the-bristol-fringe"] .project-heading {
    flex-wrap: nowrap !important;
    align-items: baseline !important;
  }
  html body#top #work .editorial-grid a[href*="live-at-the-exchange"] .project-heading h4,
  html body#top #work .editorial-grid a[href*="live-at-the-bristol-fringe"] .project-heading h4 {
    font-size: clamp(15px, 1.35vw, 21px) !important;
    white-space: nowrap !important;
  }
  html body#top #work .editorial-grid a[href*="live-at-the-exchange"] .project-heading .project-type,
  html body#top #work .editorial-grid a[href*="live-at-the-bristol-fringe"] .project-heading .project-type {
    font-size: clamp(10px, .88vw, 13px) !important;
    white-space: nowrap !important;
  }
}
@media (max-width: 700px) {
  html body#top #work .editorial-grid .project-heading { bottom: 31px !important; }
  html body#top #work .editorial-grid .project-card > p { bottom: 10px !important; }
}

/* One timing curve for the photograph and its decorative frame. The corners
   brighten with the image but no longer slide separately out of phase. */
html body#top #about .about-photo-frame .about-desk-photo img {
  transition: transform 550ms cubic-bezier(.2,.8,.2,1), filter 550ms cubic-bezier(.2,.8,.2,1) !important;
}
html body#top #about .about-photo-frame::before,
html body#top #about .about-photo-frame::after {
  transition: border-color 550ms cubic-bezier(.2,.8,.2,1) !important;
  transform: none !important;
}
html body#top #about .about-photo-frame:hover::before,
html body#top #about .about-photo-frame:hover::after {
  transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
  html body#top #about .about-photo-frame .about-desk-photo img,
  html body#top #about .about-photo-frame::before,
  html body#top #about .about-photo-frame::after {
    transition: none !important;
  }
}

/* Consistent, generously spaced featured-work stills. Keep the existing
   category switch and text overlays, changing only the gallery geometry. */
html body#top #work .editorial-grid {
  width: min(1080px, 100%) !important;
  margin-inline: auto !important;
  grid-template-columns: minmax(0, 1fr) !important;
  column-gap: 0 !important;
  row-gap: clamp(68px, 7.5vw, 112px) !important;
}
html body#top #work .editorial-grid .project-card,
html body#top #work .editorial-grid .project-card:first-child {
  grid-column: 1 / -1 !important;
}
html body#top #work .editorial-grid .project-image,
html body#top #work .editorial-grid .project-card:first-child .project-image {
  aspect-ratio: 3840 / 1634 !important;
}
@media (max-width: 700px) {
  html body#top #work .editorial-grid { row-gap: 48px !important; }
}