@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;500;600&display=swap");

@font-face { font-family: "Avenir Light"; src: url("../fonts/avenir-light.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Avenir Heavy"; src: url("../fonts/avenir-heavy.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Helvetica Light"; src: url("../fonts/helvetica-light.woff2") format("woff2"); font-weight: 400; font-display: swap; }
* { box-sizing: border-box; }
body { margin: 0; color: #000; background: #fff; font-family: "Helvetica Light", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { color: inherit; cursor: pointer; }
button, p, h1 { margin: 0; }
button { border: 0; padding: 0; background: none; }
a:focus-visible, button:focus-visible, section:focus-visible { outline: 2px solid #222; outline-offset: 5px; }
.site-header { position: sticky; top: 0; z-index: 2; height: 100px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 60px; }
.site-title { font: 300 clamp(14px, calc(12px + .625vw), 24px)/1.6 "Nunito Sans", sans-serif; }
.site-nav { display: flex; gap: 180px; font: 400 14px/45px "Nunito Sans", sans-serif; }
.site-nav a:hover { color: #605e5e; }
.menu-open { display: none; width: 24px; height: 24px; }
.menu-open svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 2; }
.project-pagination { font-family: "Nunito Sans", sans-serif; font-weight: 400; height: 46px; padding: 23px 60px 0; text-align: right; font-size: clamp(11px, calc(10.4px + .1875vw), 14px); line-height: 1.5; }
.project-pagination a { text-decoration: underline; }
/* Project columns grow naturally within the document. */
.project { display: grid; grid-template-columns: 31.3318% minmax(0, 1fr); height: auto; align-items: start; }
.project-copy { padding: 0 5% 0 60px; }
.project-title { font: 600 clamp(12px, calc(10px + .625vw), 22px)/normal "Nunito Sans", sans-serif; margin-bottom: 5.5625px; }
.project-details { font-size: clamp(11px, calc(10.4px + .1875vw), 14px); font-weight: bold; line-height: 1.5; margin-bottom: 32.9375px; }
.project-description { font-size: clamp(10px, calc(9.2px + .25vw), 14px); line-height: 1.5; }
.project-description p + p { margin-top: 1.5em; }
.project-gallery { padding: 0 5.20825%; }
.project-image { display: block; width: 100%; }
.project-image + .project-image { margin-top: 10px; }
.project-image img { display: block; width: 100%; height: auto; aspect-ratio: 1450/816; object-fit: cover; }
.site-footer { min-height: 150px; padding: 0 3.04944% 31.484375px; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; font: 300 clamp(10px, calc(9.6px + .125vw), 12px)/1.6 "Nunito Sans", sans-serif; }
.site-footer img { display: block; margin-bottom: 10.5px; }
dialog { border: 0; background: #fff; color: #111; }
.lightbox { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 40px; }
.lightbox::backdrop { background: #fff; }
.lightbox-image { display: block; width: 100%; height: 100%; object-fit: contain; }
.lightbox button { position: absolute; background: #fff; padding: 12px; font: 26px Arial, sans-serif; }
.lightbox-close { right: 14px; top: 10px; }
.lightbox-previous { left: 8px; top: 48%; }
.lightbox-next { right: 8px; top: 48%; }
.mobile-menu { inset: 0 0 0 auto; margin: 0; width: 70vw; height: 100vh; max-width: 100%; max-height: none; padding: 100px 40px 30px; }
.mobile-menu::backdrop { background: rgb(0 0 0 / 80%); }
.menu-close { position: absolute; right: 40px; top: 35px; font: 30px/1 Arial, sans-serif; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 10px; }
.mobile-menu a { padding: 12px 0; font: 400 16px/1.4 "Nunito Sans", sans-serif; }
@media (max-width: 1000px) {
  .site-header { height: 96.25px; padding: 0 40px; }
  .project-pagination { height: 33px; padding: 0 40px; font-size: clamp(10px, calc(8.5882px + .44118vw), 13px); }
  .project { height: auto; display: block; }
  .project-copy { padding: 0 40px; }
  .project-title { font-size: clamp(10px, calc(5.2941px + 1.47059vw), 20px); }
  .project-details { font-size: clamp(10px, calc(8.5882px + .44118vw), 13px); }
  .project-description { font-size: clamp(10px, calc(8.1176px + .58824vw), 14px); }
  .project-gallery { padding: 0 40px; }
  .site-footer { min-height: 124px; padding: 0 3.64514%; justify-content: center; }
  .site-footer img { margin-bottom: 3px; }
}
@media (max-width: 750px) {
  .site-header { height: 75.5px; padding: 4.5px 20px 0; }
  .site-title { font-size: clamp(16px, calc(13.0233px + .93023vw), 20px); }
  .project-pagination { font-family: "Nunito Sans", sans-serif; height: 23px; padding: 0 20px; font-size: clamp(10px, calc(7.7674px + .69767vw), 13px); }
  .project-copy { padding: 0 20px; }
  .project-title { font-size: 16px; }
  .project-details { font-size: clamp(11px, calc(9.5116px + .46512vw), 13px); margin-bottom: 24px; }
  .project-description { font-size: clamp(12px, calc(10.5116px + .46512vw), 14px); }
  .project-gallery { padding: 0 20px 15px; }
  .project-image img { aspect-ratio: 16/9; }
  .site-footer { min-height: 105.5px; padding: 0 16px 21.484375px; justify-content: flex-end; font-size: clamp(10px, calc(8.5116px + .46512vw), 12px); }
  .mobile-menu { width: 100%; padding-left: 20px; padding-right: 20px; }
  .mobile-menu::backdrop { background: transparent; }
  .menu-close { right: 30px; }
  .mobile-menu nav { gap: 0; }
  .mobile-menu a { padding: 15px 0; }
}
@media (max-width: 600px) { .lightbox { padding: 30px 12px; } }

/* Breathe: preserve its gallery crops and measured responsive space. */
.page-breathe .project-description a { text-decoration: underline; }
.page-breathe .project-image img { aspect-ratio: 1450/1088; }
.page-breathe .project-image:nth-child(3) img,
.page-breathe .project-image:nth-child(6) img,
.page-breathe .project-image:nth-child(8) img { aspect-ratio: 1450/1087; }
.page-breathe .project-image:nth-child(5) img { aspect-ratio: 1450/1101; }
@media (max-width: 750px) {
  .page-breathe .project-gallery { padding-right: 20px; }
  .page-breathe .project-image img,
  .page-breathe .project-image:nth-child(3) img,
  .page-breathe .project-image:nth-child(6) img,
  .page-breathe .project-image:nth-child(8) img { aspect-ratio: 320/240; }
  .page-breathe .project-image:nth-child(5) img { aspect-ratio: 320/243; }
}

/* Additional media projects share the approved shell; measurements stay scoped. */
.media-project .project-description a { text-decoration: underline; }
.media-project .image-gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.media-project .project-image + .project-image { margin-top: 0; }
.media-project .project-video { aspect-ratio: 1 / 0.555821245; }
.media-project .project-video iframe { display: block; width: 100%; height: 100%; min-height: 200px; border: 0; }
.media-project .project-video + .image-gallery { margin-top: 3.156192%; }
.page-maslows-hierarchy-of-needs .image-gallery { grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 10.0px; }
.page-maslows-hierarchy-of-needs .project-image img { aspect-ratio: 1450.0/816.0; }
.page-song-of-a-lonely-bird .image-gallery { grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 10.0px; }
.page-song-of-a-lonely-bird .project-image img { aspect-ratio: 1450.0/967.0; }
.page-random-thoughts .image-gallery { grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 0px; }
.page-random-thoughts .project-image:nth-child(1) img { aspect-ratio: 1450.0/968.0; }
.page-random-thoughts .project-image:nth-child(2) img,
.page-random-thoughts .project-image:nth-child(3) img,
.page-random-thoughts .project-image:nth-child(4) img { aspect-ratio: 1450.0/651.0; }
.page-ads-named-desire .image-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10.0px; }
.page-ads-named-desire .project-image:nth-child(1) img { aspect-ratio: 355.0/540.952380952381; }
.page-ads-named-desire .project-image:nth-child(2) img { aspect-ratio: 355.0/548.2625482625483; }
.page-ads-named-desire .project-image:nth-child(3) img,
.page-ads-named-desire .project-image:nth-child(4) img { aspect-ratio: 355.0/545.1055662188098; }
.page-aesthetics-under-the-microscope .image-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10.0px; }
.page-aesthetics-under-the-microscope .project-image:nth-child(1) img,
.page-aesthetics-under-the-microscope .project-image:nth-child(2) img,
.page-aesthetics-under-the-microscope .project-image:nth-child(4) img,
.page-aesthetics-under-the-microscope .project-image:nth-child(5) img,
.page-aesthetics-under-the-microscope .project-image:nth-child(7) img,
.page-aesthetics-under-the-microscope .project-image:nth-child(8) img { aspect-ratio: 477.0/476.0; }
.page-aesthetics-under-the-microscope .project-image:nth-child(3) img,
.page-aesthetics-under-the-microscope .project-image:nth-child(6) img,
.page-aesthetics-under-the-microscope .project-image:nth-child(9) img { aspect-ratio: 476.0/476.0; }
.page-dear-water .image-gallery { grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 10.0px; }
.page-dear-water .project-image img { aspect-ratio: 1450.0/1088.0; }
.page-the-clock .image-gallery { grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 10.0px; }
.page-the-clock .project-image:nth-child(1) img,
.page-the-clock .project-image:nth-child(2) img { aspect-ratio: 1450.0/816.0; }
.page-the-clock .project-image:nth-child(3) img { aspect-ratio: 1450.0/815.0; }

.page-ads-named-desire .project-gallery { padding: 0 60px 0 5%; }
.page-aesthetics-under-the-microscope .project-gallery,
.page-random-thoughts .project-gallery { padding: 0 60px 0 5%; }
.page-song-of-a-lonely-bird-a-re-creation .project-gallery,
.page-binary-vows .project-gallery,
.page-pointillism .project-gallery { padding: 0 60px 0 5%; }
.page-song-of-a-lonely-bird-a-re-creation .project-video { aspect-ratio: 1 / 0.565096576; }
.page-binary-vows .project-video { aspect-ratio: 1 / 0.573797910; }
.page-pointillism .project-video { aspect-ratio: 1 / 0.618195804; }
@media (max-width: 1000px) {
  .media-project .project { height: auto; }
  .media-project .project-gallery { padding: 0 40px; }
  .media-project .project-video { aspect-ratio: 1 / 0.560901316; }
  .page-song-of-a-lonely-bird-a-re-creation .project-video,
  .page-binary-vows .project-video { aspect-ratio: 1 / 0.575164297; }
  .page-pointillism .project-video { aspect-ratio: 1 / 0.615856290; }
}
@media (max-width: 750px) {
  .media-project .project-gallery { padding: 0 20px 15px; }
  .page-song-of-a-lonely-bird-a-re-creation .project-video,
  .page-binary-vows .project-video { aspect-ratio: 1 / 0.568261984; }
  .page-pointillism .project-video { aspect-ratio: 1 / 0.596359377; }
  .page-maslows-hierarchy-of-needs .image-gallery { grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 10.0px; }
  .page-maslows-hierarchy-of-needs .project-image:nth-child(n) img { aspect-ratio: 320.0/180.0; }
  .page-song-of-a-lonely-bird .image-gallery { grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 10.0px; }
  .page-song-of-a-lonely-bird .project-image:nth-child(n) img { aspect-ratio: 320.0/213.0; }
  .page-random-thoughts .image-gallery { grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 0px; }
  .page-random-thoughts .project-image:nth-child(1) img { aspect-ratio: 320.0/214.0; }
  .page-random-thoughts .project-image:nth-child(2) img,
.page-random-thoughts .project-image:nth-child(3) img,
.page-random-thoughts .project-image:nth-child(4) img { aspect-ratio: 320.0/144.0; }
  .page-ads-named-desire .image-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8.0px; }
  .page-ads-named-desire .project-image:nth-child(1) img { aspect-ratio: 156.0/237.71428571428572; }
  .page-ads-named-desire .project-image:nth-child(2) img { aspect-ratio: 156.0/240.9266409266409; }
  .page-ads-named-desire .project-image:nth-child(3) img,
.page-ads-named-desire .project-image:nth-child(4) img { aspect-ratio: 156.0/239.5393474088292; }
  .page-aesthetics-under-the-microscope .image-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10.0px; }
  .page-aesthetics-under-the-microscope .project-image:nth-child(n) img { aspect-ratio: 100.0/100.0; }
  .page-dear-water .image-gallery { grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 10.0px; }
  .page-dear-water .project-image:nth-child(n) img { aspect-ratio: 320.0/240.0; }
  .page-the-clock .image-gallery { grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 10.0px; }
  .page-the-clock .project-image:nth-child(n) img { aspect-ratio: 320.0/180.0; }
}

.page-dear-water .project-gallery,
.page-the-clock .project-gallery { padding: 0 5.208605%; }

/* Content routes use the shared shell without project-gallery dimensions. */
@font-face { font-family: "Poppins Semibold"; src: url("../fonts/poppins-semibold.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Helvetica Prose"; src: url("../fonts/helvetica-light.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Helvetica Prose"; src: url("../fonts/helvetica-light-extended.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-012B, U+012E-0137, U+0139-0149, U+014C-0151, U+0154-015F, U+0162-0177, U+0179-017C, U+0218-021B, U+0237, U+02C7, U+02C9, U+02D8-02DB, U+02DD, U+0394, U+03A9, U+03BC, U+03C0, U+2044, U+2113, U+2126, U+212E, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+E002, U+E004, U+E006, U+E008-E009, U+E00D, U+E00F, U+E011, U+E013, U+E015, U+E017, U+E01A, U+FB01-FB02; }
.index-heading { min-height: 100px; padding: 30px 60px 0; }
.card-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 80px; align-content: start; margin: 0 60px; }
.index-card { display: block; min-width: 0; }
.index-card img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
.card-title { display: block; padding: 21px 0; }
.page-home .card-title { font: 500 14px/17px "Nunito Sans", sans-serif; }
.page-texts .card-title { font: 600 22px/1.4 "Nunito Sans", sans-serif; }
.page-texts .project-title, .page-writing .project-title { line-height: 1.4; }
.prose { font: 400 clamp(10px, calc(9.2px + .25vw), 14px)/1.5 "Helvetica Prose", sans-serif; }
.prose p { margin: 0; }
.prose a { text-decoration: underline; }
.profile-page { display: grid; }
.profile-page article { display: grid; grid-template-columns: minmax(0, 1fr); }
.profile-page .project-title, .profile-page .prose { grid-area: 1 / 1; align-self: start; margin-left: 60px; }
.profile-page .project-title { width: 40%; margin-top: 30px; }
.profile-page .prose { width: 60%; margin-top: 90px; }
.page-statement .project-title { margin-top: 90px; }
.page-statement .prose { margin-top: 150px; }
.writing-content { padding-top: 20px; }
.writing-article { width: 60%; margin-left: 60px; }
.writing-article .project-details p { margin: 0; }
@media (max-width: 1000px) {
  .index-heading { padding: 20px 40px 0; }
  .card-index { margin: 0 40px; }
  .prose { font-size: clamp(10px, calc(8.1176px + .58824vw), 14px); }
  .profile-page .project-title, .profile-page .prose { width: auto; margin-left: 40px; margin-right: 40px; }
  .profile-page .project-title { margin-top: 20px; margin-bottom: 12px; }
  .profile-page .prose { margin-top: 0; }
  .writing-article { width: auto; margin: 0 40px; }
}
@media (max-width: 750px) {
  .index-heading { min-height: 80px; padding: 30px 20px 0; }
  .card-index { grid-template-columns: minmax(0, 1fr); gap: 5px; margin: 0 20px; }
  .prose { font-size: clamp(12px, calc(10.5116px + .46512vw), 14px); overflow-wrap: break-word; }
  .profile-page .project-title { margin: 30px 84.391px 12px 20px; }
  .profile-page .prose { margin: 0 20px; }
  .writing-article { margin: 0 20px; }
  .writing-article .project-details { margin-bottom: 32.9375px; }
  .page-essay .project-details { font-size: clamp(10px, calc(7.7674px + .69767vw), 13px); }
}

/* Preserve the project text region’s keyboard focus indicator. */
.project-copy:focus-visible { outline: 2px solid #222; outline-offset: -2px; }

@media (max-width: 600px) {
  .site-nav { display: none; }
  .menu-open { display: block; }
}

/* The footer consumes only leftover viewport space and stays in document flow. */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body > .site-header, body > main, body > .site-footer { flex: 0 0 auto; }
body > .site-footer { margin-top: auto; }

/* One identical edge fade on the lowest persistent navigation element. */
.site-header::after,
:is(.project-page, .writing-page) > .project-pagination::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
  pointer-events: none;
  background: linear-gradient(to bottom, #fff, rgb(255 255 255 / 0%));
}
:is(.project-page, .writing-page) > .project-pagination::after { display: none; }

.info-heading { display: contents; }

/* All detail pages share the desktop navigation stack; prose stays single-column. */
@media (min-width: 1001px) {
  body { --detail-content-gap: 12px; --desktop-header-height: 100px; }
  :is(.project-page, .writing-page) > .project-pagination {
    position: sticky;
    top: var(--desktop-header-height);
    z-index: 1;
    background: #fff;
  }
  body:has(:is(.project-page, .writing-page) > .project-pagination) > .site-header::after { display: none; }
  :is(.project-page, .writing-page) > .project-pagination::after { display: block; }
  :is(.project-page, .writing-page) > .project-pagination {
    top: var(--desktop-header-height);
    height: 28px;
    padding-top: 0;
    align-content: center;
  }
  .project-page > .project-pagination::after { height: var(--detail-content-gap); }
  /* Info shares the homepage heading box, so both content rows start together. */
  .page-info .profile-page article { display: block; }
  .page-info .info-heading { display: block; }
  .page-info .info-heading .project-title {
    margin: 0 0 5.5625px;
    width: auto;
  }
  .page-info .profile-page .prose { margin-top: 0; }
  .page-info .profile-page .prose > p:first-child {
    text-box-trim: trim-start;
    text-box-edge: cap alphabetic;
  }
  .project-page > .project,
  .writing-page > .writing-content { margin-top: var(--detail-content-gap); }
  .writing-page > .writing-content { padding-top: 0; }
  .project-page .project-copy.sticky-project-column {
    position: sticky;
    top: var(--project-sticky-top, calc(var(--desktop-header-height) + 40px));
  }
}

/* The same persistent navigation stack on tablets and phones. */
@media (max-width: 1000px) {
  body { --responsive-header-height: 96.25px; --detail-content-gap: 12px; }
  :is(.project-page, .writing-page) > .project-pagination {
    position: sticky;
    top: var(--responsive-header-height);
    z-index: 1;
    height: auto;
    min-height: 28px;
    padding-top: 0;
    padding-bottom: 0;
    align-content: center;
    background: #fff;
  }
  body:has(:is(.project-page, .writing-page) > .project-pagination) > .site-header::after { display: none; }
  :is(.project-page, .writing-page) > .project-pagination::after { display: block; }
  .project-page > .project,
  .writing-page > .writing-content { margin-top: var(--detail-content-gap); }
  .writing-page > .writing-content { padding-top: 0; }
  .project-page .project-gallery { margin-top: 24px; }

  /* Profile content remains in flow, and Info reuses the index heading row. */
  .profile-page article { display: block; }
  .page-info .info-heading { display: block; }
  .page-info .info-heading .project-title { margin: 0 0 5.5625px; width: auto; }
  .page-info .profile-page .prose > p:first-child {
    text-box-trim: trim-start;
    text-box-edge: cap alphabetic;
  }
}
@media (max-width: 750px) {
  body { --responsive-header-height: 75.5px; }
}

/* Canonical page edges: fixed outer insets, independent of grid-track width. */
@media (min-width: 601px) {
  body { --page-edge: 60px; }
  .site-header,
  .project-pagination { padding-inline: var(--page-edge); }
}

/* Tablet outer boundaries share the same token; internal gallery gaps stay intact. */
@media (min-width: 601px) and (max-width: 1000px) {
  body { --page-edge: 40px; }
  .site-nav { gap: 120px; }
  .site-header,
  .index-heading,
  .project-pagination,
  .project-page .project-copy,
  .project-page .project-gallery,
  .site-footer { padding-inline: var(--page-edge); }
  .card-index,
  .writing-article,
  .profile-page .prose,
  .profile-page .project-title { margin-inline: var(--page-edge); }
  .page-info .info-heading .project-title { margin-inline: 0; }
}
@media (min-width: 601px) and (max-width: 750px) {
  body { --page-edge: 20px; }
}

@media (min-width: 601px) {
  .project-page .project-copy { padding-inline-start: var(--page-edge); }
  .project-page .project-gallery { padding-inline-end: var(--page-edge); }
}

/* Responsive grid gaps shared by Home and its Projects alias. */
@media (min-width: 751px) and (max-width: 1000px) {
  .page-home .card-index { gap: 30px; }
}
@media (max-width: 750px) {
  .page-home .card-index { row-gap: 16px; }
}

/* Desktop outer whitespace; retain internal spacing and responsive layouts. */
@media (min-width: 1001px) {
  body { --page-edge: 40px; }
  .site-header { height: var(--desktop-header-height); }
  .index-heading { padding-inline: var(--page-edge); }
  .card-index { margin-inline: var(--page-edge); }
  .writing-article,
  .profile-page .project-title,
  .profile-page .prose { margin-left: var(--page-edge); }
  .page-info .info-heading .project-title { margin-left: 0; }
  .site-footer { padding-inline: var(--page-edge); }
}

/* YouTube players retain their widescreen ratio at every viewport width. */
.media-project .project-video:has(iframe[src*="youtube.com/embed/"]) {
  aspect-ratio: 16 / 9;
}
.media-project .project-video iframe[src*="youtube.com/embed/"] {
  min-height: 0;
}

/* Phone touch feedback stays clear; keyboard focus remains visible. */
@media (max-width: 600px) {
  * { -webkit-tap-highlight-color: transparent; }
  html:not([data-keyboard-navigation]) :focus { outline: none; }
  :focus:not(:focus-visible) { outline: none; }
  .lightbox .lightbox-previous,
  .lightbox .lightbox-next { background: transparent; color: #808080; }
  .lightbox .lightbox-close {
    width: var(--mobile-control-size);
    height: var(--mobile-control-size);
    padding: 0;
    display: grid;
    place-items: center;
    font: 30px/1 Arial, sans-serif;
  }
}

/* Mobile controls use the header's dimensions and inset as one geometry. */
@media (max-width: 600px) {
  body {
    --mobile-header-height: 75.5px;
    --mobile-header-padding-top: 4.5px;
    --mobile-header-edge: 20px;
    --mobile-control-size: 24px;
    --mobile-heading-family: "Nunito Sans", sans-serif;
    --mobile-heading-weight: 600;
  }
  .site-header {
    height: var(--mobile-header-height);
    padding-top: var(--mobile-header-padding-top);
    padding-inline: var(--mobile-header-edge);
  }
  .project-title,
  .mobile-menu a {
    font-family: var(--mobile-heading-family);
    font-weight: var(--mobile-heading-weight);
  }
  .menu-open,
  .mobile-menu .menu-close {
    width: var(--mobile-control-size);
    height: var(--mobile-control-size);
  }
  .mobile-menu .menu-close {
    position: fixed;
    right: var(--mobile-header-edge);
    top: calc((var(--mobile-header-height) + var(--mobile-header-padding-top) - var(--mobile-control-size)) / 2);
    display: grid;
    place-items: center;
    font: 30px/1 Arial, sans-serif;
  }
}

/* Reveal the original stationary header through the modal's header area. */
@media (max-width: 600px) {
  .mobile-menu {
    background: linear-gradient(to bottom,
      transparent 0 var(--mobile-header-height),
      #fff var(--mobile-header-height) 100%);
  }
  body:has(.mobile-menu[open]) .menu-open { visibility: hidden; }
}

/* Slightly smaller desktop page headings; retain their responsive scale. */
@media (min-width: 1001px) {
  h1.project-title { font-size: clamp(11px, calc(9px + .5625vw), 20px); }
}