/* ============================================
   DESIGN TOKENS
   ============================================ */
:root {
  --color-bg: #F9F8F1;
  --color-bg-alt: #FFFFFF;
  --color-ink: #333333;
  --color-ink-soft: #6a6a6a;
  --color-stone: #6a6a6a;
  --color-tag-grey: #6a6a6a;
  --color-frame: #161310;
  --color-footer: #282724; /* espresso: footer, Featured/More Projects band, Information page */

  --font-display: "PT Serif", Georgia, "Times New Roman", serif;
  --font-body: "PT Serif", Georgia, "Times New Roman", serif;
  --font-mono: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono-weight: 350;

  --max-width: 1760px;
  --gutter: clamp(20px, 1.75vw, 32px);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
  font-size: 12px;
}

p { margin: 0 0 1em; color: var(--color-ink-soft); }

/* ============================================
   NAV
   ============================================ */
.site-nav {
  position: relative; /* scrolls away with the page (no sticky/hide animation) */
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  flex-shrink: 0;
  padding: 24px 0;
  background: var(--color-bg);
}

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.03em;
  color: #333333;
}

.nav-links {
  display: flex;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-ink);
}

.nav-links a:hover { color: var(--color-ink); opacity: 0.6; }

.nav-toggle {
  display: none;
  position: relative;
  width: 16px;
  height: 11px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.nav-toggle__bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-ink);
  transition: transform 0.25s var(--ease), top 0.25s var(--ease);
}

.nav-toggle__bar:first-child { top: 0; }
.nav-toggle__bar:nth-child(2) { top: 50%; transform: translateY(-50%); transition: opacity 0.2s var(--ease); }
.nav-toggle__bar:last-child { top: 100%; transform: translateY(-100%); }

.nav-toggle.is-open .nav-toggle__bar:nth-child(2) { opacity: 0; }

.nav-toggle.is-open .nav-toggle__bar:first-child {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.nav-toggle.is-open .nav-toggle__bar:last-child {
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

.mobile-nav-overlay { display: none; }

@media (max-width: 720px) {
  .site-nav .nav-links { display: none; }
  .nav-toggle { display: block; z-index: 110; }

  .site-nav.nav-dark {
    background: var(--color-footer);
  }
  .site-nav.nav-dark .nav-name {
    color: #fff;
  }
  .site-nav.nav-dark .nav-toggle__bar {
    background: #fff;
  }

  .mobile-nav-overlay {
    position: fixed;
    inset: 0;
    background: var(--color-footer);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: calc(var(--nav-h, 70px) + 139px);
    padding-bottom: 40px;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    z-index: 90;
    transform: translateY(-100%);
    transition: transform 0.8s var(--ease);
  }
  .mobile-nav-overlay.open { transform: translateY(0); }
  .mobile-nav-overlay .nav-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 8px;
    font-size: 16px;
  }
  .mobile-nav-overlay .nav-links a {
    font-family: var(--font-mono);
    font-weight: var(--font-mono-weight);
    font-size: 15px;
    color: #fff;
  }

  .mobile-nav-overlay__social {
    width: 100%;
  }
  .mobile-nav-overlay__divider {
    border-top: 1px solid #444444;
    margin-bottom: 32px;
  }
  .mobile-nav-overlay__social-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--font-mono);
    font-weight: var(--font-mono-weight);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .mobile-nav-overlay__social-links a { color: #fff; }

  /* Project pages: match the site-wide 60px nav-to-content gap on mobile,
     without touching the tuned desktop spacing around the divider */
  main > .section:first-of-type {
    padding-top: 60px !important;
  }
}

/* Desktop header: site title (left) and nav (right), styled to match the
   project titles / captions on the Projects page. Side margins widened to
   match Faculty Dept. Mobile is unchanged. */
@media (min-width: 721px) {
  :root { --gutter: clamp(20px, 2.78vw, 56px); }

  .site-nav { padding: 0 0 30px; }

  .site-nav__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding-top: 24px; /* closer to the top edge, like Faculty Dept. */
  }

  /* Site title matches project titles (.project-layout__info h1) */
  .nav-name {
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.03em;
    color: #333333;
  }

  .site-nav .nav-links {
    gap: 32px;
  }

  .site-nav .nav-links a {
    font-family: var(--font-mono); /* Inter */
    font-weight: 400;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none;
    color: #333333;
  }

  .site-nav .nav-links a:hover { color: #6a6a6a; opacity: 1; }
}

/* ============================================
   HOMEPAGE PHOTO GRID
   (replaces hero — horizontal rows, not columns,
   contained to site width)
   ============================================ */
.home-hero-grid {
  padding: 60px 0;
}

.home-hero-grid__row {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}

.home-hero-grid__row:last-child { margin-bottom: 0; }

.home-hero-grid__item {
  height: 500px;
  flex-shrink: 0;
  flex-grow: 0;
  overflow: hidden;
  border-radius: 1px;
}

.home-hero-grid__item img,
.home-hero-grid__item .placeholder-photo {
  height: 100%;
  width: 100%;
  display: block;
  background: var(--color-bg-alt);
}

@media (max-width: 720px) {
  .home-hero-grid__row { flex-direction: column; }
  .home-hero-grid__item {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: var(--ar, 1.333);
  }
}

/* ============================================
   SECTIONS
   ============================================ */
.section {
  padding: 120px 0;
}

/* ============================================
   WORK INDEX (homepage + projects listing)
   image, then title + category underneath
   ============================================ */

.work-entry {
  display: block;
}

.work-entry .thumb {
  overflow: hidden;
  border-radius: 1px;
  margin-bottom: 14px;
  background: var(--color-bg-alt);
}

.work-entry .thumb.ratio-4-3 { aspect-ratio: 4 / 3; }
.work-entry .thumb.ratio-3-4 { aspect-ratio: 3 / 4; }

.work-entry .thumb img {
  width: 100%;
  height: auto;
}

.work-entry .entry-title {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: #333333;
}

.work-entry .entry-tags {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-weight: var(--font-mono-weight);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #6a6a6a;
}

.work-entry .entry-tags a,
.work-entry .entry-tags span {
  color: var(--color-tag-grey);
}

.work-entry .entry-tags a:hover { color: var(--color-ink); }

/* ============================================
   HOMEPAGE GRID
   clean 3-column grid, uniform 3:4 portrait
   thumbnails, title (heading font) + category
   (clean sans, small caps) underneath
   ============================================ */
.home-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px 32px;
}

.home-grid .thumb {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 1px;
  margin-bottom: 16px;
  background: var(--color-bg-alt);
}

.home-grid .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-grid .entry-tags {
  text-transform: uppercase;
}

/* Projects page text (desktop): sized to match Faculty Dept's grid by
   visual size — PT Serif titles, Inter uppercase captions */
@media (min-width: 721px) {
  .projects-grid { row-gap: 43.5px; }

  .projects-grid .thumb { margin-bottom: 25px; }

  .projects-grid .entry-title {
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.03em;
    color: #333333;
  }

  .projects-grid .entry-tags {
    margin-top: 14.5px;
    font-size: 9.3px;
    line-height: 12px;
    letter-spacing: 0.08em;
  }
}

@media (max-width: 720px) {
  .home-grid { grid-template-columns: 1fr; }
}

/* ============================================
   ABOUT PAGE
   ============================================ */
.about-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

.about-portrait { position: sticky; top: 120px; }
.about-portrait img { border-radius: 3px; }

.about-body p {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.7;
  margin-bottom: 24px;
  color: var(--color-ink);
}

.about-body .lede-line {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--color-ink);
  margin-bottom: 24px;
}

/* Info list: underlined labels over plain entries, spaced like the
   paragraphs above (24px between groups, same 1.7 line height) */
.about-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.about-info__col { margin: 0; }

.about-info dt {
  font-size: 12px;
  line-height: 1.7;
  text-decoration: underline;
  text-underline-offset: 2px;
  color: var(--color-ink);
}

.about-info dt:not(:first-child) { margin-top: 24px; }

.about-info dd {
  margin: 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--color-ink);
}

.about-info dd a { color: inherit; }
.about-info dd a:hover { color: var(--color-ink-soft); }

.about-portrait { margin: 0; }

.about-body .about-email {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 720px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-portrait { position: static; max-width: 340px; }
}

.about-section { padding-top: 60px; }

@media (min-width: 721px) {
  .about-section { padding: 60px 0; }

  .about-grid {
    /* text column ~25% of the page width (Faculty Dept. line length),
       portrait pushed to the right margin */
    grid-template-columns: 25% 1fr;
    gap: 0;
  }

  /* Text block starts at the top of the portrait; -4px lifts the first line so
     the tops of its capitals sit level with the photo's top edge */
  .about-body { grid-column: 1; grid-row: 1; align-self: start; margin-top: -4px; }

  /* The portrait takes its height from the text: top edge level with the first
     line's capitals, bottom edge level with the last line's baseline
     (5.7px above the bottom of the text block's last line box) */
  .about-portrait {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    position: relative;
    top: auto; /* cancels the old sticky offset (top: 120px) */
  }

  .about-portrait img {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    height: calc(100% - 5.7px);
    width: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 0;
  }
}

/* ============================================
   PROJECT DETAIL PAGE
   ============================================ */
.project-divider {
  border-top: 1px solid #333333;
  margin-bottom: 56px;
}

.project-layout__info h1 {
  font-size: 12px;
  margin-bottom: 24px;
}

.project-layout__info .lede {
  max-width: none;
  color: var(--color-ink);
  margin-bottom: 24px;
}

.section.project-main { padding-top: 140px; padding-bottom: 48px; }

@media (min-width: 721px) {
  .section.project-main { padding-top: 135px; padding-bottom: 85px; }

  .project-layout__info h1 {
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.03em;
    color: #333333;
    margin-bottom: 24px;
  }

  .project-layout__info .lede {
    font-family: var(--font-mono);
    font-weight: var(--font-mono-weight);
    color: #6a6a6a;
  }
}

@media (max-width: 720px) {
  .project-layout__info h1 {
    font-size: 16px;
  }
  .project-layout__info .lede {
    font-size: 11px;
    color: var(--color-ink-soft);
  }
}

.project-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.project-layout__info {
  position: sticky;
  top: 77px;
}

.project-layout__gallery {
  display: flex;
  gap: 15px;
}

.project-layout__gallery-col {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.project-layout__gallery img,
.project-layout__gallery .placeholder-photo {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 100px);
  display: block;
  margin-bottom: 15px;
  border-radius: 1px;
}

.project-layout__gallery .placeholder-photo {
  background: var(--color-bg-alt);
  border-radius: 1px;
}

.project-layout__gallery .placeholder-photo.ratio-4-3 { aspect-ratio: 4 / 3; }
.project-layout__gallery .placeholder-photo.ratio-4-5 { aspect-ratio: 4 / 5; }
.project-layout__gallery .placeholder-photo.ratio-3-4 { aspect-ratio: 3 / 4; }
.project-layout__gallery .placeholder-photo.ratio-5-4 { aspect-ratio: 5 / 4; }
.project-layout__gallery .placeholder-photo.ratio-3-2 { aspect-ratio: 3 / 2; }

@media (max-width: 720px) {
  .project-layout { grid-template-columns: 1fr; }
  .project-layout__info { position: static; }
  .project-layout__gallery { flex-direction: column; }
  .project-layout__gallery-col:last-child { margin-top: 0; }
}

/* ============================================
   FOOTER
   Desktop (721px+) is matched to Faculty Dept's footer by
   visual size, not px size: PT Serif / Inter are scaled so
   the text takes up the same room as Tiempos / Neue Haas.
   Mobile rules below are unchanged.
   ============================================ */
@media (min-width: 721px) {
  /* short pages: keep the footer at the bottom of the window */
  body { min-height: 100vh; display: flex; flex-direction: column; }

  /* Footer: Espresso #282724, main text #DCD9D1 (10.6:1), secondary #A9A8A2 (6.3:1) */
  .site-footer {
    display: block;
    margin-top: auto;
    background: #282724;
    height: 145px;
  }

  .site-footer .wrap {
    display: flex;
    align-items: flex-start;
    padding-top: 80px;
  }

  
  

  .site-footer__legal p {
    margin: 0;
    font-family: var(--font-display);
    font-size: 9.45px;
    font-weight: 400;
    line-height: 15px;
    color: #A9A8A2;
  }

  

  

  
}

@media (max-width: 720px) {
  .site-footer {
    display: block;
    background: #282724;
    padding: 60px 0 20px;
  }

  

  .site-footer__legal p {
    font-family: var(--font-display);
    font-size: 9px;
    font-weight: 400;
    line-height: 1.5;
    color: #A9A8A2;
    margin: 0 0 4px;
  }

  

  

  
}

/* Project gallery images open in the lightbox */
.project-layout__gallery .placeholder-photo,
.project-layout__gallery img { cursor: zoom-in; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--color-footer);
  display: none;
  align-items: center;
  justify-content: center;
}

.lightbox.is-open { display: flex; }

.lightbox__stage {
  max-width: 82vw;
  max-height: 82vh;
}

.lightbox__photo {
  /* width follows the photo's ratio (--r = width / height) so it fits
     inside 82% of the window both ways without stretching */
  width: min(82vw, calc(82vh * var(--r, 1.333)));
  height: auto;
  background: var(--color-bg);
  border-radius: 1px;
}

.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox__close { top: 32px; right: 32px; }
.lightbox__prev { left: 32px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 32px; top: 50%; transform: translateY(-50%); }
.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover { opacity: 0.6; }

.lightbox__close svg,
.lightbox__prev svg,
.lightbox__next svg {
  display: block;
}

/* ============================================
   CONTACT PAGE
   ============================================ */


/* ============================================
   FEATURED PROJECTS (homepage only)
   Sits directly above the footer and shares its background,
   so the two read as one block.
   ============================================ */
.featured-projects {
  background: var(--color-footer);
  padding: 60px 0 0;
}

.featured-projects__title {
  margin: 0 0 24px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.03em;
  color: #A9A8A2;
}

.featured-projects .thumb { aspect-ratio: 4 / 3; }

/* Text on the footer-coloured band: titles use the footer's main text colour,
   tags its secondary colour (same pairing as the footer) */
.featured-projects .work-entry .entry-title,
.featured-projects .projects-grid .entry-title { color: #DCD9D1; }

.featured-projects .work-entry .entry-tags,
.featured-projects .projects-grid .entry-tags,
.featured-projects .work-entry .entry-tags span,
.featured-projects .work-entry .entry-tags a { color: #A9A8A2; }

.featured-projects .work-entry .entry-tags a:hover { color: #DCD9D1; }

@media (min-width: 721px) {
  .home-hero-grid { padding-bottom: 100px; }
  .featured-projects { padding-top: 75px; }
  .featured-projects__title { margin-bottom: 32px; }
}

/* Stacked two-line site title (Faculty Dept. style) */
.nav-name--stacked {
  display: block;
  font-size: 18px;
  line-height: 18px; /* tight leading: lines sit close together */
}

.nav-name--stacked span { display: block; }

/* ============================================
   INFORMATION PAGE: whole page in espresso (--color-footer), flowing into
   the footer. Text in linen (#DCD9D1, 10.6:1).
   ============================================ */
.page-about { background: var(--color-footer); }
.page-about .site-nav:not(.nav-dark) { background: var(--color-footer); }

.page-about .nav-name,
.page-about .site-nav .nav-links a { color: #DCD9D1; }
.page-about .site-nav .nav-links a:hover { color: #A9A8A2; }
.page-about .nav-toggle__bar { background: #DCD9D1; }

.page-about .about-body p,
.page-about .about-body .lede-line,
.page-about .about-info dt,
.page-about .about-info dd { color: #DCD9D1; }

/* Footer (desktop): copyright block on the left, stacked name on the right */
@media (min-width: 721px) {
  .site-footer__legal {
    order: 1;
    margin-left: 0;
    text-align: left;
  }
  
}

/* Projects page: exactly 100px from the last line of project text to the footer
   (the last row's 24px of built-in spacing + 100px) */
.page-projects main .section { padding-bottom: 124px; }

/* Mobile homepage + Featured/More Projects (v1.2) */
@media (max-width: 720px) {
  .home-hero-grid { padding-bottom: 80px; }

  .featured-projects__title {
    font-size: 16px;
    line-height: 20px;
  }

  .featured-projects .home-grid { row-gap: 50px; }

  .featured-projects .entry-title {
    font-size: 14px;
    line-height: 18px;
    letter-spacing: -0.03em;
  }

  .featured-projects .entry-tags { font-size: 9.3px; }
}

/* Mobile Projects page (v1.4) */
@media (max-width: 720px) {
  .page-projects .home-grid { row-gap: 50px; }

  .page-projects .entry-title {
    font-size: 14px;
    line-height: 18px;
    letter-spacing: -0.03em;
  }

  .page-projects .entry-tags { font-size: 9.3px; }

  .page-projects main .section { padding-bottom: 80px; }
}

/* Mobile project pages (v1.5) */
@media (max-width: 720px) {
  .project-layout__info .lede {
    font-family: var(--font-mono);
    font-weight: var(--font-mono-weight);
    font-size: 12px;
    color: #6a6a6a;
  }

  .section.project-main { padding-bottom: 80px; }

}

/* Mobile project pages: header spacing matched to reference screenshot (v1.6).
   Visible gaps: line to title capitals 36px, title baseline to description
   capitals 22px, description baseline to first photo 49px. Line position unchanged. */
@media (max-width: 720px) {
  .project-divider { margin-bottom: 25px; }
  .project-layout__info h1 { margin-bottom: 12px; }
  .project-layout__info .lede { margin-bottom: 0; }
  .project-layout { gap: 50px; }
}

/* Mobile Information page (v1.8): text first, square portrait below,
   80px from the portrait to the footer */
@media (max-width: 720px) {
  .about-body { order: 1; }
  .about-portrait { order: 2; }
  .about-portrait img { border-radius: 0; }
  .about-section { padding-bottom: 20px; } /* + 60px footer padding = 80px to the footer text */
  .about-grid { gap: 50px; }
  .about-portrait { max-width: none; }
  .about-portrait img { width: 100%; }
}

/* Information page intro line in PT Serif's true italic (v2.0) */
.about-body .lede-line { font-style: italic; }

/* Mobile Featured / More Projects: 20px + 60px footer padding = 80px (v2.1) */
@media (max-width: 720px) {
  .featured-projects { padding-bottom: 20px; }
}

/* v2.2 ---------------------------------------------------------------- */

/* Hamburger: bigger invisible tap area (~44px) around the same small icon */
.nav-toggle::before {
  content: "";
  position: absolute;
  inset: -16px -14px;
}

/* Project galleries, stacked layout: one list in the same order as desktop
   (script.js sets each photo's order). 15px gaps, none after the last photo. */
@media (max-width: 720px) {
  .project-layout__gallery { gap: 15px; }
  .project-layout__gallery-col { display: contents; }
  .project-layout__gallery img,
  .project-layout__gallery .placeholder-photo { margin-bottom: 0; }
}

/* Lightbox on phones: photo fills the width inside the margins, arrows sit
   below it so they never cover the photo, close button top right */
@media (max-width: 720px) {
  .lightbox__stage { max-width: none; max-height: none; }
  .lightbox__photo {
    width: min(calc(100vw - 40px), calc((100svh - 180px) * var(--r, 1.333)));
  }
  .lightbox__close { top: 12px; right: 8px; }
  .lightbox__prev,
  .lightbox__next { display: none; } /* phones: tap left/right half instead */
}

/* Information page on tablets (721-1000px): the 25% text column gets too
   narrow, which makes the text (and so the portrait) too tall and pushes the
   portrait into the text. A wider column keeps the desktop layout intact. */
@media (min-width: 721px) and (max-width: 1000px) {
  .about-grid { grid-template-columns: 45% 1fr; }
  .about-portrait img { max-width: calc(100% - 40px); } /* safety: never touches the text */
}

/* Short pages on phones: keep the footer at the bottom of the screen,
   same as desktop. No effect on pages taller than the screen. (v2.4) */
@media (max-width: 720px) {
  body { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
  .site-footer { margin-top: auto; }
}

/* Mobile menu (v2.6)
   - Links: Inter 400 15px, 26px baseline to baseline; first link's capitals
     132px below the site title's last baseline
   - All text linen (#DCD9D1), like the Information page
   - Divider 246px above the bottom of the screen; the footer text sits below it,
     31px from the divider to the tops of its capitals */
@media (max-width: 720px) {
  .site-nav.nav-dark .nav-name { color: #DCD9D1; }
  .site-nav.nav-dark .nav-toggle__bar { background: #DCD9D1; }

  .mobile-nav-overlay {
    color: #DCD9D1;
    padding-top: calc(var(--nav-h, 84px) + 99.5px);
  }

  .mobile-nav-overlay .nav-links { gap: 0; }

  .mobile-nav-overlay .nav-links a {
    position: relative;
    display: inline-block;
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 15px;
    line-height: 31px;
    color: #DCD9D1;
  }

  /* invisible taller tap area (~44px), same look */
  .mobile-nav-overlay .nav-links a::after {
    content: "";
    position: absolute;
    inset: -6px -10px;
  }

  .mobile-nav-overlay__social {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    /* measured from the header, like the screenshot (not from the bottom,
       which moves as Safari's toolbars show and hide); never closer than
       90px to the bottom on short screens */
    top: min(calc(var(--nav-h, 84px) + 467px), calc(100% - 90px));
  }

  .mobile-nav-overlay__divider { margin-bottom: 27px; }

  .mobile-nav-overlay__legal p {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-size: 9px;
    line-height: 1.5;
    color: #DCD9D1;
  }
}

/* Mobile menu (v3.1): the v2.9 motion, rebuilt for smoothness.
   One 0.5s motion on one symmetrical curve, so closing is the exact reverse.
   The panel window slides down while its contents slide up by the same
   amount, so the contents stay still and are revealed exactly like before,
   but with transforms only (run by the phone's graphics chip, no redrawing). */
@media (max-width: 720px) {
  :root { --menu-ease: cubic-bezier(0.65, 0, 0.35, 1); --menu-time: 0.5s; }

  /* scroll lock while the menu is open or animating */
  html.menu-active, html.menu-active body { overflow: hidden; }
  .mobile-nav-overlay { overscroll-behavior: none; touch-action: none; }

  /* header see-through while in use; the panel forms its background */
  html.menu-active .site-nav { background: transparent; }

  .site-nav .nav-name { transition: color var(--menu-time) var(--menu-ease); }
  html.menu-open .site-nav .nav-name { color: #DCD9D1; }
  .nav-toggle__bar {
    transition: transform var(--menu-time) var(--menu-ease), top var(--menu-time) var(--menu-ease),
                opacity var(--menu-time) var(--menu-ease), background-color var(--menu-time) var(--menu-ease);
  }
  html.menu-open .nav-toggle__bar { background: #DCD9D1; }

  /* the panel window */
  .mobile-nav-overlay {
    display: block;
    padding: 0;
    overflow: hidden;
    clip-path: none;
    transform: translateY(-100%);
    will-change: transform;
    visibility: hidden;
    transition: transform var(--menu-time) var(--menu-ease), visibility 0s linear var(--menu-time);
  }
  .mobile-nav-overlay.open {
    clip-path: none;
    transform: translateY(0);
    visibility: visible;
    transition: transform var(--menu-time) var(--menu-ease), visibility 0s linear 0s;
  }

  /* its contents, counter-moving so they hold still on screen */
  .mobile-nav-overlay__inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: calc(var(--nav-h, 84px) + 99.5px) var(--gutter) 0;
    transform: translateY(100%);
    will-change: transform;
    transition: transform var(--menu-time) var(--menu-ease);
  }
  .mobile-nav-overlay.open .mobile-nav-overlay__inner { transform: translateY(0); }

  /* divider block: measured from the header, stops at the right margin */
  .mobile-nav-overlay__social { width: auto; }

  /* links + footer text: 0.35s fades, 6px drift.
     Opening: start 0.01, 0.045 ... 0.15s (last lands at 0.5s). Closing: the mirror image. */
  .mobile-nav-overlay .nav-links li,
  .mobile-nav-overlay__social {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.35s var(--menu-ease), transform 0.35s var(--menu-ease);
    transition-delay: calc(0.14s - var(--i, 0) * 0.035s);
  }
  .mobile-nav-overlay.open .nav-links li,
  .mobile-nav-overlay.open .mobile-nav-overlay__social {
    opacity: 1;
    transform: none;
    transition-delay: calc(0.01s + var(--i, 0) * 0.035s);
  }
  .mobile-nav-overlay .nav-links li:nth-child(2) { --i: 1; }
  .mobile-nav-overlay .nav-links li:nth-child(3) { --i: 2; }
  .mobile-nav-overlay .nav-links li:nth-child(4) { --i: 3; }
  .mobile-nav-overlay__social { --i: 4; }
}

/* Hard cut: menu closes with no animation (used by menu links) */
html.menu-no-anim .mobile-nav-overlay,
html.menu-no-anim .mobile-nav-overlay *,
html.menu-no-anim .site-nav,
html.menu-no-anim .site-nav * {
  transition: none !important;
}

/* 404 page: dark like the Information page (body also has .page-about) */
.page-404 .project-layout__info h1 { color: #DCD9D1; }
.page-404 .project-layout__info .lede { color: #A9A8A2; }

/* Mobile project cards (Projects page, Featured / More Projects), v3.9:
   halfway between the old spacing and the reference screenshot.
   Visible gaps: photo to title capitals ~24px, title baseline to tag capitals ~16px. */
@media (max-width: 720px) {
  .home-grid .thumb { margin-bottom: 20px; }
  .home-grid .entry-tags { margin-top: 9px; }
}


/* 404 divider: muted on espresso, same grey as the mobile menu divider */
.page-404 .project-divider { background: #444; border-color: #444; }