@font-face {
  font-family: 'Good Sans';
  font-display: block;
  src: url('GoodSans-Regular.eot');
  src: url('GoodSans-Regular.eot?#iefix') format('embedded-opentype'),
       url('GoodSans-Regular.woff2') format('woff2'),
       url('GoodSans-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Ivory';
  font-display: block;
  src: url('IvoryLLWeb-Regular.woff2') format('woff2'),
       url('IvoryLLWeb-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* Smooth scrolling for in-page anchors (index thumbnails, project links,
   scroll-to-top). Disabled automatically for anyone who has asked their
   system to reduce motion. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  font-family: 'Good Sans', 'Arial', sans-serif;
  margin: 0;
  width: 100vw;
  background-color: #e0e2e6;
  color: #1E2530;
}

body {
  overflow-x: hidden;
}

/* ============================================
   Grid System
   12 columns, 48px page margins, 16px gutters
   ============================================ */

:root {
  --page-margin: 48px;
  --gutter: 16px;
  --col: calc((100vw - var(--page-margin) * 2 - var(--gutter) * 11) / 12);
}

/* Column width classes */
.col-1  { width: calc(var(--col) * 1);                        }
.col-2  { width: calc(var(--col) * 2  + var(--gutter) * 1);  }
.col-2-5 { width: calc(var(--col) * 2.5 + var(--gutter) * 1.5); }
.col-3  { width: calc(var(--col) * 3  + var(--gutter) * 2);  }
.col-4  { width: calc(var(--col) * 4  + var(--gutter) * 3);  }
.col-5  { width: calc(var(--col) * 5  + var(--gutter) * 4);  }
.col-6  { width: calc(var(--col) * 6  + var(--gutter) * 5);  }
.col-7  { width: calc(var(--col) * 7  + var(--gutter) * 6);  }
.col-8  { width: calc(var(--col) * 8  + var(--gutter) * 7);  }
.col-9  { width: calc(var(--col) * 9  + var(--gutter) * 8);  }
.col-12 { width: calc(var(--col) * 12 + var(--gutter) * 11); }

/* ============================================
   About
   ============================================ */

.about {
  padding: 32px var(--page-margin) 24px;
  box-sizing: border-box;
}

.about-grid {
  display: flex;
  align-items: flex-start;
  gap: var(--gutter);
}

.about-intro p {
  font-family: 'Ivory', 'Times New Roman', serif;
  font-size: 32px;
  line-height: 40px;
  font-weight: normal;
  margin-bottom: 24px;
  margin-top: 0;
  color: #2D3440;
}

.about-intro p:last-child {
  margin-bottom: 0;
}

.about-spacer {
  flex-shrink: 0;
}

.about-contact {
  flex-shrink: 0;
  font-size: 14px;
  line-height: 20px;
  padding-top: calc((38px - 20px) / 2);
}

.about-contact-title {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 12px;
  line-height: 18px;
  margin-bottom: 4px;
}

.about-contact-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.about-contact-links a {
  display: inline-block;
}

.about-contact-links a:hover {
  border-bottom: 1px solid #1E2530;
}

/* Links */
a {
  text-decoration: none;
  color: #1E2530;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: border-bottom-color 0.7s ease;
}

a:hover {
  border-bottom-color: #1E2530;
}

/* Italics — update src if an italic variant of Good Sans is added */
.italic {
  font-style: italic;
}

/* ============================================
   Image Index Navigation
   ============================================ */

.image-index {
  padding: 0 var(--page-margin) 48px;
  box-sizing: border-box;
}

.index-label {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 12px;
  line-height: 18px;
  margin-bottom: 12px;
}

.index-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--gutter);
}

.index-item {
  display: block;
  flex-shrink: 0;
  border-bottom: none !important;
}

.index-item:hover {
  border-bottom: none !important;
}

.index-item img,
.index-item video {
  display: block;
  width: 100%;
  height: auto;
}

/* Two-frame flip thumbnail */
.flip-thumb {
  position: relative;
}

.flip-thumb .flip-a {
  display: block;
}

.flip-thumb .flip-b {
  position: absolute;
  top: 0;
  left: 0;
  animation: flipFrame 1.4s steps(1, end) infinite;
}

@keyframes flipFrame {
  0%, 50% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Three-frame flip thumbnail */
.flip-thumb-3 {
  position: relative;
}

.flip-thumb-3 .flip3-a {
  display: block;
}

.flip-thumb-3 .flip3-b,
.flip-thumb-3 .flip3-c {
  position: absolute;
  top: 0;
  left: 0;
}

.flip-thumb-3 .flip3-b {
  animation: flip3b 7.5s ease-in-out infinite;
}

.flip-thumb-3 .flip3-c {
  animation: flip3c 7.5s ease-in-out infinite;
}

@keyframes flip3b {
  0% { opacity: 0; }
  33.333% { opacity: 1; }
  66.666% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes flip3c {
  0% { opacity: 0; }
  33.333% { opacity: 0; }
  66.666% { opacity: 1; }
  100% { opacity: 0; }
}

/* ============================================
   Project Nav
   ============================================ */

.project-name {
  font-family: 'Ivory', 'Times New Roman', serif;
  font-size: 19px;
  line-height: 25px;
  color: #000000;
}

.project-info p {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 18px;
  line-height: 25px;
}

div.title p {
  margin-top: 0;
  margin-bottom: 0;
}

.project-title {
  margin-left: var(--page-margin);
  margin-right: var(--page-margin);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  margin-bottom: 20px;
  cursor: pointer;
}

.project-text {
  margin-left: var(--page-margin);
  width: calc(var(--col) * 7 + var(--gutter) * 6);
  display: none;
  font-size: 20px;
  line-height: 28px;
}

.project-text p {
  margin-top: 0;
  margin-bottom: 16px;
}

.project-text p:last-child {
  margin-bottom: 32px;
}

/* Credits block — shown below project description */
.project-credits {
  font-size: 14px;
  line-height: 20px;
  color: #808080;
}

.project-credits p {
  margin: 0;
}

.project-credits p + p {
  margin-top: 4px;
}

.minus1,
.minus2,
.minus3,
.minus4,
.minus5,
.minus6,
.minus7,
.minus8,
.minus9,
.minus10,
.minus11,
.minus12 {
  display: none;
}

/* ============================================
   Projects
   ============================================ */

.project {
  margin-bottom: 48px;
  border-top: 1px #1E2530 solid;
}

.project-images {
  margin-left: var(--page-margin);
  margin-right: var(--page-margin);
  margin-bottom: 48px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--gutter);
}

.project-images img,
.project-images video {
  display: block;
  height: auto;
  max-width: 100%;
}

/* Figure wrapper lets a caption match the image width */
.project-figure {
  margin: 0;
}

.project-figure img,
.project-figure video {
  display: block;
  width: 100%;
  height: auto;
}

.project-caption {
  font-family: 'Good Sans', 'Arial', sans-serif;
  font-size: 12px;
  line-height: 17px;
  color: #666E7A;
  margin: 8px 0 0;
}

/* Caption widths scale to the image width:
   3/4-col image -> 2-col caption
   5/6/7-col image -> 3-col caption
   8-col+ image -> 4-col caption */
.project-figure.col-3:not(.caption-wide) .project-caption,
.project-figure.col-2-5 .project-caption,
.project-figure.col-4 .project-caption {
  width: calc(var(--col) * 2 + var(--gutter) * 1);
}

.project-figure.col-5 .project-caption,
.project-figure.col-6 .project-caption,
.project-figure.col-7 .project-caption {
  width: calc(var(--col) * 3 + var(--gutter) * 2);
}

.project-figure.col-8 .project-caption,
.project-figure.col-9 .project-caption,
.project-figure.col-10 .project-caption,
.project-figure.col-11 .project-caption,
.project-figure.col-12 .project-caption {
  width: calc(var(--col) * 4 + var(--gutter) * 3);
}

/* Wide caption: runs 6 columns, under adjacent images, without widening the figure */
.project-figure.caption-wide {
  position: relative;
}

.project-figure.caption-wide .project-caption {
  width: calc(var(--col) * 3 + var(--gutter) * 2);
  margin-top: 8px;
}

/* ============================================
   Video
   Videos use the same col-N width classes as
   images. Height follows aspect ratio naturally.
   ============================================ */

/* ============================================
   Footer
   ============================================ */

div.footer {
  border-top: 1px #1E2530 solid;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--page-margin);
  font-size: 20px;
  line-height: 28px;
}

div.footer p {
  margin-top: 24px;
  margin-bottom: 24px;
}

.scroll-top {
  white-space: nowrap;
  border-bottom: none !important;
}

.scroll-top:hover {
  border-bottom: none !important;
}

/* Hide "Scroll to top" in the About footer on desktop (short page) */
.about-footer .scroll-top {
  display: none;
}

/* ============================================
   Responsive
   ============================================ */

/* ============================================
   Site Nav
   ============================================ */

.site-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  padding-top: 0;
}

.site-nav-links {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.nav-work,
.nav-about {
  font-size: 32px;
  line-height: 40px;
  position: relative;
  top: -2.15px;
  color: #2D3440;
  border-bottom: none !important;
}

.nav-work:hover,
.nav-about:hover {
  color: #000000;
  border-bottom: none !important;
}

.nav-work.active,
.nav-about.active {
  color: #B041ED;
  border-bottom: none !important;
}

/* ============================================
   Project Header (new layout)
   ============================================ */

.project-header {
  display: flex;
  align-items: flex-start;
  margin-left: var(--page-margin);
  margin-right: var(--page-margin);
  margin-top: 16px;
  margin-bottom: 20px;
  gap: var(--gutter);
}

.title-credits-wrap {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  transition: grid-template-rows 0.4s ease, margin-top 0.4s ease;
  width: calc(var(--col) * 2.5 + var(--gutter) * 1.5);
}

.title-credits-wrap.open {
  grid-template-rows: 1fr;
  margin-top: 16px;
}

.project-title-col {
  width: calc(var(--col) * 3 + var(--gutter) * 2);
  flex-shrink: 0;
}

.project-title-col .project-name {
  margin: 0;
}

.project-desc-col {
  width: calc(var(--col) * 5 + var(--gutter) * 4);
  flex-shrink: 0;
  min-width: 0;
}

.project-short-desc {
  font-family: 'Ivory', 'Times New Roman', serif;
  font-size: 19px;
  line-height: 25px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  color: #2D3440;
}

.more-btn {
  font-family: 'Good Sans', 'Arial', sans-serif;
  font-size: 12px;
  height: 28px;
  padding: 0 8px;
  background: none;
  border: 1.5px solid #B041ED;
  cursor: pointer;
  color: #B041ED;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.more-btn:hover {
  background-color: #B041ED;
  color: #e2e3e5;
}

.project-more {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  transition: grid-template-rows 0.4s ease, margin-top 0.4s ease;
  font-size: 18px;
  line-height: 25px;
  color: #2D3440;
}

.project-more.open {
  grid-template-rows: 1fr;
  margin-top: 16px;
}

.project-more-inner {
  overflow: hidden;
  min-height: 0;
  visibility: hidden;
  transition: visibility 0s linear 0.4s;
}

.project-more.open .project-more-inner {
  visibility: visible;
  transition: visibility 0s linear 0s;
}

.project-more p {
  margin-top: 0;
  margin-bottom: 16px;
}

.project-more p:last-child {
  margin-bottom: 32px;
}

/* Bulleted lists inside a project description */
.project-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}

/* A paragraph that introduces a list sits closer to it */
.project-more p:has(+ .project-bullets) {
  margin-bottom: 10px;
}

/* Keep the larger end-margin if a list closes the description */
.project-bullets:last-child {
  margin-bottom: 32px;
}

.project-bullets li {
  padding-left: 1.2em;
  position: relative;
  margin-bottom: 10px;
}

.project-bullets li:last-child {
  margin-bottom: 0;
}

/* Marker only is set in Ivory — the list text stays Good Sans */
.project-bullets li::before {
  content: "\21AA";
  font-family: 'Ivory', 'Times New Roman', serif;
  position: absolute;
  left: 0;
}

/* Inline links to other projects — colours match the About page bullet links */
.project-link {
  border-bottom: none !important;
}

.project-link.pl-novel { color: #366793; }
.project-link.pl-novel:hover { color: #264D70; }

.project-more .project-credits {
  margin-left: 0;
  width: 100%;
}

.title-credits-wrap .project-credits {
  margin-left: 0;
  margin-bottom: 0;
  width: 100%;
  display: block;
  overflow: hidden;
  min-height: 0;
  visibility: hidden;
  transition: visibility 0s linear 0.4s;
}

.title-credits-wrap.open .project-credits {
  visibility: visible;
  transition: visibility 0s linear 0s;
}

.project-scroll-col {
  flex-shrink: 0;
  width: calc(var(--col) * 4 + var(--gutter) * 3);
  text-align: right;
}

.project-scroll-top {
  font-size: 18px;
  line-height: 25px;
  white-space: nowrap;
  color: #808080;
  border-bottom: none !important;
}

.project-scroll-top:hover {
  color: #1E2530;
  border-bottom: none !important;
}

/* ============================================
   About Page
   ============================================ */

.about-extended-section {
  padding: 0 var(--page-margin) 24px;
  box-sizing: border-box;
  animation: fadeInUp 0.8s ease both;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.about-extended-grid {
  display: flex;
  align-items: flex-start;
  gap: var(--gutter);
}

.about-extended-text p {
  font-family: 'Ivory', 'Times New Roman', serif;
  font-size: 32px;
  line-height: 40px;
  font-weight: normal;
  margin-top: 0;
  margin-bottom: 24px;
  color: #2D3440;
}

.about-extended-text p:last-child {
  margin-bottom: 0;
}

.about-extended-text p:last-of-type {
  margin-bottom: 40px;
}

.about-photo-col {
  flex-shrink: 0;
}

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

/* About page 5-image carousel — base always visible, top 4 layers toggle */
.about-carousel {
  position: relative;
}

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

.about-carousel .ac-2,
.about-carousel .ac-3,
.about-carousel .ac-4,
.about-carousel .ac-5 {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.about-carousel:hover .ac-2 { animation: ac2 4s steps(1, end) infinite; }
.about-carousel:hover .ac-3 { animation: ac3 4s steps(1, end) infinite; }
.about-carousel:hover .ac-4 { animation: ac4 4s steps(1, end) infinite; }
.about-carousel:hover .ac-5 { animation: ac5 4s steps(1, end) infinite; }

@keyframes ac2 {
  0%, 20% { opacity: 1; }
  20%, 100% { opacity: 0; }
}

@keyframes ac3 {
  0%, 20% { opacity: 0; }
  20%, 40% { opacity: 1; }
  40%, 100% { opacity: 0; }
}

@keyframes ac4 {
  0%, 40% { opacity: 0; }
  40%, 60% { opacity: 1; }
  60%, 100% { opacity: 0; }
}

@keyframes ac5 {
  0%, 60% { opacity: 0; }
  60%, 80% { opacity: 1; }
  80%, 100% { opacity: 0; }
}

.about-caption {
  font-size: 12px;
  line-height: 18px;
  margin-top: 8px;
  margin-bottom: 0;
  color: #2D3440;
}

/* About page bullet list */
.about-bullets-grid {
  display: flex;
  gap: var(--gutter);
}

.about-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
}

.about-bullets li {
  font-family: 'Ivory', 'Times New Roman', serif;
  font-size: 24px;
  line-height: 32px;
  color: #2D3440;
  padding-left: 1.2em;
  position: relative;
}

.about-bullets li::before {
  content: "\21AA";
  position: absolute;
  left: 0;
}

/* Bullet links: static underline + hover image popup */
.bullet-link-wrap {
  position: relative;
}

.bullet-link {
  color: #2D3440;
  border-bottom: none !important;
}

/* Distinct color per bullet link */
.bullet-link.bl-1 { color: #71811A; }  /* campaigns */
.bullet-link.bl-2 { color: #CC3629; }  /* publications */
.bullet-link.bl-3 { color: #B247A1; }  /* video series */
.bullet-link.bl-4 { color: #4582BA; }  /* novel */
.bullet-link.bl-5 { color: #A94C57; }  /* airplane design */
.bullet-link.bl-6 { color: #BF681F; }  /* architecture */

/* On hover each link deepens to a darker shade of its own colour */
.bullet-link.bl-1:hover { color: #566311; }
.bullet-link.bl-2:hover { color: #9D251B; }
.bullet-link.bl-3:hover { color: #88337A; }
.bullet-link.bl-4:hover { color: #31628E; }
.bullet-link.bl-5:hover { color: #813740; }
.bullet-link.bl-6:hover { color: #934E14; }

.bullet-link:hover {
  border-bottom: none !important;
}

.bullet-hover-img {
  display: block;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: auto;
  margin-bottom: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
  z-index: 20;
}

/* Horizontal hover images get a little more width */
.bullet-link.bl-2 + .bullet-hover-img,
.bullet-link.bl-3 + .bullet-hover-img,
.bullet-link.bl-4 + .bullet-hover-img {
  width: 250px;
}

.bullet-link-wrap:hover .bullet-hover-img {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease, visibility 0s linear 0s;
}

/* Contact Info + Capabilities */
.about-info-section {
  padding: 0 var(--page-margin) 48px;
  box-sizing: border-box;
}

.about-info-grid {
  display: flex;
  gap: var(--gutter);
}

.about-info-col {
  flex-shrink: 0;
}

.about-info-spacer {
  flex-shrink: 0;
}

.about-info-text {
  font-family: 'Good Sans', 'Arial', sans-serif;
  font-size: 12px;
  line-height: 18px;
  color: #2D3440;
  margin: 0;
}

.about-info-img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 16px;
}

.curiosities-list-grid {
  display: flex;
  gap: var(--gutter);
}

.curiosities-list-col {
  flex: 1;
  min-width: 0;
}

.about-info-glyph {
  font-family: 'Ivory', 'Times New Roman', serif;
  font-size: 48px;
  line-height: 52px;
  color: #2D3440;
  margin-bottom: 8px;
}

.about-info-title {
  font-family: 'Good Sans', 'Arial', sans-serif;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 18px;
  color: #2D3440;
  margin-bottom: 8px;
}

.about-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.about-info-list li {
  font-family: 'Good Sans', 'Arial', sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #2D3440;
}

.about-info-list a {
  border-bottom: none !important;
}

.about-info-list a:hover {
  color: #000000;
  border-bottom: none !important;
}

@media (max-width: 1024px) {
  :root {
    --page-margin: 32px;
    --gutter: 12px;
  }

  /* Captions match the full image width from tablet down */
  .project-figure .project-caption {
    width: 100% !important;
  }

  /* ...except the two wide captions, which break out to 6 columns */
  .project-figure.caption-wide .project-caption {
    width: calc(var(--col) * 8 + var(--gutter) * 7) !important;
  }

  /* Show "Scroll to top" in About footer on tablet/mobile */
  .about-footer .scroll-top {
    display: block;
  }

  .about-grid {
    flex-direction: column;
  }

  .about-intro,
  .about-contact,
  .site-nav {
    width: 100% !important;
    align-self: stretch;
  }

  .about-spacer {
    display: none;
  }

  /* Nav above the about text */
  .site-nav {
    order: 1;
    margin-bottom: 16px;
    align-items: stretch;
  }

  .about-intro {
    order: 2;
  }

  .site-nav-links {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .nav-work,
  .nav-about {
    top: 0;
  }

  .nav-about {
    text-align: right;
  }

  /* --- Project header stacks from tablet down, in one 10-column block:
         Scroll to top -> title -> short desc + MORE -> description -> credits.
         Mobile widens these to 100% further down. --- */
  .project-header {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 16px;
    margin-bottom: 0;
  }

  .project-title-col,
  .project-desc-col,
  .project-scroll-col {
    width: calc(var(--col) * 10 + var(--gutter) * 9);
  }

  .title-credits-wrap {
    width: calc(var(--col) * 8 + var(--gutter) * 7);
  }

  /* Last block in the description loses its desktop end-margin so the
     gap down to the credits matches mobile (24px, from .project-desc-col) */
  .project-more p:last-child,
  .project-more .project-bullets:last-child {
    margin-bottom: 0;
  }

  .project-scroll-col {
    order: 1;
    text-align: left;
    margin-bottom: 24px;
  }

  .project-title-col {
    order: 2;
    margin-bottom: 0;
  }

  .project-desc-col {
    order: 3;
    margin-bottom: 24px;
  }

  .title-credits-wrap {
    order: 4;
  }

  .title-credits-wrap.open {
    margin-top: 0;
    margin-bottom: 16px;
  }
}

/* ============================================
   Tablet only (601–1024px)
   Scoped with min-width so none of this can
   leak down into the mobile layout.
   ============================================ */
@media (min-width: 601px) and (max-width: 1024px) {

  /* --- Type matches the mobile sizes --- */
  .nav-work,
  .nav-about {
    font-size: 24px;
    line-height: 30px;
  }

  .about-intro p {
    font-size: 22px;
    line-height: 28px;
  }

  .about-extended-text p {
    font-size: 22px;
    line-height: 28px;
  }

  .about-bullets li {
    font-size: 22px;
    line-height: 28px;
  }

  .project-name {
    font-size: 18px;
    line-height: 25px;
  }

  .project-short-desc {
    font-size: 18px;
    line-height: 25px;
  }

  .project-more {
    font-size: 17px;
    line-height: 24px;
  }

  .project-credits {
    font-size: 12px;
    line-height: 18px;
  }

  .project-scroll-top {
    font-size: 16px;
    line-height: 22px;
  }

  div.footer {
    font-size: 16px;
    line-height: 22px;
  }

  /* --- Index thumbnails: 4 per row, so 3 rows of 12 --- */
  .index-item.col-2 {
    width: calc(var(--col) * 3 + var(--gutter) * 2);
  }

  /* --- Selected media gains one column on tablet --- */
  .tablet-plus-1.col-2  { width: calc(var(--col) * 3  + var(--gutter) * 2); }
  .tablet-plus-1.col-3  { width: calc(var(--col) * 4  + var(--gutter) * 3); }
  .tablet-plus-1.col-4  { width: calc(var(--col) * 5  + var(--gutter) * 4); }
  .tablet-plus-1.col-5  { width: calc(var(--col) * 6  + var(--gutter) * 5); }
  .tablet-plus-1.col-6  { width: calc(var(--col) * 7  + var(--gutter) * 6); }
  .tablet-plus-1.col-7  { width: calc(var(--col) * 8  + var(--gutter) * 7); }
  .tablet-plus-1.col-8  { width: calc(var(--col) * 9  + var(--gutter) * 8); }

  /* ---------- About page: hybrid of the desktop and mobile layouts ----------
     Text and bullets go full width; the portrait drops below the bullets
     at 6 columns and autoplays. */
  .about-extended-grid {
    flex-direction: column;
  }

  .about-extended-text {
    order: 1;
    width: 100% !important;
  }

  .about-photo-col {
    order: 2;
    margin-top: 24px;
    width: calc(var(--col) * 6 + var(--gutter) * 5) !important;
  }

  /* Two bullet columns widen to fill the now-full-width text block */
  .about-bullets {
    width: calc(var(--col) * 6 + var(--gutter) * 5) !important;
  }

  /* Carousel autoplays on tablet (no hover) */
  .about-carousel .ac-2 { animation: ac2 4s steps(1, end) infinite; }
  .about-carousel .ac-3 { animation: ac3 4s steps(1, end) infinite; }
  .about-carousel .ac-4 { animation: ac4 4s steps(1, end) infinite; }
  .about-carousel .ac-5 { animation: ac5 4s steps(1, end) infinite; }

  /* Services + Contact: 6 columns each */
  .about-info-col {
    width: calc(var(--col) * 6 + var(--gutter) * 5) !important;
  }
}

@media (max-width: 600px) {
  .about {
    padding-top: 24px;
  }

  :root {
    --page-margin: 16px;
    --gutter: 10px;
  }

  .nav-work,
  .nav-about {
    font-size: 24px;
    line-height: 30px;
  }

  .about-intro p {
    font-size: 22px;
    line-height: 28px;
  }

  .image-index {
    padding-bottom: 32px;
  }

  .index-label {
    margin-bottom: 8px;
  }

  /* Project header stacks on mobile: title → description → credits at bottom */
  .project-header {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 16px;
    margin-bottom: 0;
  }

  .project-title-col,
  .project-desc-col,
  .project-scroll-col {
    width: 100% !important;
  }

  .project-title-col {
    order: 2;
    margin-bottom: 0;
  }

  .project-desc-col {
    order: 3;
    margin-bottom: 24px;
  }

  .title-credits-wrap.open {
    margin-top: 0;
    margin-bottom: 16px;
  }

  .title-credits-wrap {
    order: 4;
  }

  .title-credits-wrap,
  .title-credits-wrap .project-credits {
    width: 100%;
  }

  .project-scroll-col {
    order: 1;
    text-align: left;
    margin-bottom: 24px;
  }

  .project-scroll-top {
    font-size: 16px;
    line-height: 22px;
  }

  .project-short-desc {
    font-size: 18px;
    line-height: 25px;
    flex-direction: column;
    align-items: flex-start;
  }

  .project-more {
    font-size: 16px;
    line-height: 22px;
  }

  .project-more p {
    margin-bottom: 12px;
  }

  .project-more p:last-child {
    margin-bottom: 0;
  }

  .project-images {
    display: block;
  }

  .project-images img,
  .project-images video {
    width: 100% !important;
    margin-bottom: var(--gutter);
  }

  .project-images img.portrait,
  .project-images video.portrait {
    width: 75% !important;
  }

  /* Captioned images: the figure carries the width, not the image */
  .project-figure {
    width: 100% !important;
    margin-bottom: var(--gutter);
  }

  .project-figure.portrait {
    width: 75% !important;
  }

  .project-figure img,
  .project-figure video {
    margin-bottom: 0 !important;
  }

  /* Wide captions return to full image width once the layout stacks */
  .project-figure.caption-wide .project-caption {
    width: 100% !important;
  }

  /* Arrow points back up to the image the caption belongs to */
  .project-caption::before {
    content: "[\2191] ";
  }

  /* Wide captions sit between images, so they point both ways */
  .project-figure.caption-wide .project-caption::before {
    content: "[\2191\2193] ";
  }

  .project-name {
    margin-bottom: 0;
    font-size: 18px;
    line-height: 25px;
  }

  .project-credits {
    font-size: 12px;
    line-height: 18px;
  }

  .project {
    margin-bottom: 32px;
  }

  div.footer {
    font-size: 16px;
    line-height: 22px;
  }

  .index-item.col-2 {
    width: calc(50% - var(--gutter) / 2);
  }

  /* About page mobile */
  .about-extended-grid {
    flex-direction: column;
  }

  .about-extended-text,
  .about-photo-col {
    width: auto !important;
  }

  .about-extended-text p {
    font-size: 22px;
    line-height: 28px;
  }

  .about-extended-text p:last-of-type {
    margin-bottom: 24px;
  }

  .about-bullets li {
    font-size: 22px;
    line-height: 28px;
    margin-bottom: 4px;
  }

  .about-bullets-grid {
    flex-direction: column;
    gap: 0;
  }

  .about-bullets {
    width: 100% !important;
  }

  /* Carousel autoplays on mobile (no hover needed) */
  .about-carousel .ac-2 { animation: ac2 4s steps(1, end) infinite; }
  .about-carousel .ac-3 { animation: ac3 4s steps(1, end) infinite; }
  .about-carousel .ac-4 { animation: ac4 4s steps(1, end) infinite; }
  .about-carousel .ac-5 { animation: ac5 4s steps(1, end) infinite; }

  /* Contact Info + Capabilities stack on mobile */
  .about-info-grid {
    flex-direction: column;
  }

  .about-info-spacer {
    display: none;
  }

  .about-info-col {
    width: 100% !important;
  }

  .about-info-col ~ .about-info-col {
    margin-top: 32px;
  }

  .about-photo-col {
    order: 2;
    margin-top: 24px;
    width: 75% !important;
  }

  .about-extended-text {
    order: 1;
  }
}

@media (max-width: 305px) {
  body {
    font-size: 8vw;
  }

  .about-intro p {
    font-size: 8vw;
    margin-top: 16px;
    margin-bottom: 16px;
  }

  .project-title {
    margin-top: 16px;
  }

  .project {
    margin-bottom: 16px;
  }

  .project-name {
    font-size: 7.2vw;
  }
}


/* Hyphenate "multidisciplinary" as "multi-disciplinary" only at very narrow
   widths (<=390px), where the whole word would otherwise wrap and leave a
   large gap. The soft hyphen shows only when the break actually happens. */
.mdisc-hyph { display: none; }

@media (max-width: 390px) {
  .mdisc-full { display: none; }
  .mdisc-hyph { display: inline; }
}