@font-face {
  font-family: "WF Raglan Neue";
  src: url("material/WFRaglanNeue-Light.woff2") format("woff2"),
    url("material/WFRaglanNeue-Light.woff") format("woff");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "WF Raglan Neue";
  src: url("material/WFRaglanNeue-LightItalic.woff2") format("woff2"),
    url("material/WFRaglanNeue-LightItalic.woff") format("woff");
  font-style: italic;
  font-weight: 300;
  font-display: swap;
}

:root {
  --frontpage-background: #ffffff; /* Edit this color to change the front page background. */
  --ink: #ededed;
  --dark: #000;
  --pad: 12px;
  /* Keep rem and menu geometry at their original size; scale text only. */
  --text-scale: calc(5 / 6);
  --text-size: calc(1rem * var(--text-scale));
  --menu-text-size: calc(var(--menu-font-size) * var(--text-scale));
  --menu-font-size: clamp(13.2px, 1.056vw, 22.88px);
  font-family: "WF Raglan Neue", serif;
  font-weight: 300;
  font-synthesis: none;
  color: var(--ink);
  background: var(--dark);
  font-size: clamp(15px, 1.1vw, 22px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-size: var(--text-size); margin: 0; background: var(--dark); }
body.is-home { overflow: hidden; --dark: #fff; --ink: #000; color: var(--ink); }
body.is-work,
body.is-detail,
body.is-info { --dark: #fff; --ink: #000; color: var(--ink); }
body.is-detail .detail-info-popup { background: #fff; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
b, strong { font-weight: inherit; font-style: italic; }
.mobile-menu-toggle { display: none; }
.mobile-menu { display: none; }
body.mobile-menu-open { overflow: hidden; }

.site-header,
.mobile-menu-header {
  position: fixed;
  z-index: 50;
  inset: var(--pad) var(--pad) auto var(--pad);
  display: grid;
  grid-template-columns: 51% 49%;
  align-items: start;
  color: var(--ink);
  font-size: var(--menu-text-size);
  line-height: 1.1;
  transition: transform .2s ease, opacity .2s ease;
}
.site-header.is-hidden { opacity: 0; transform: translateY(calc(-100% - var(--pad))); pointer-events: none; }
.site-header a { white-space: nowrap; }
.site-header a:hover, .site-header a:focus-visible { font-style: italic; }
.site-header a:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.brand { justify-self: start; }
.header-overview { display: none; grid-column: 1; grid-row: 2; justify-self: start; align-items: center; gap: calc(.25 * var(--menu-font-size)); margin-top: calc(.35 * var(--menu-font-size)); font: inherit; }
.is-detail .header-overview { display: inline-flex; }
.header-overview .overview-arrow { display: inline-flex; align-items: center; justify-content: center; width: var(--menu-font-size); height: calc(.7 * var(--menu-font-size)); font: inherit; font-style: normal; line-height: 1; }
/* Keep em-based navigation columns at their original widths. */
.main-nav {
  font-size: var(--menu-font-size);
  position: relative;
  display: grid;
  grid-template-columns: 7em var(--index-menu-width, 2.6em) 2em;
  align-items: start;
  justify-items: start;
  gap: 2.4vw;
}
.main-nav a { font-size: var(--menu-text-size); }
.work-toggle { display: block; }
.work-menu.is-open > .work-toggle { font-style: italic; }
.work-submenu {
  --preferred-menu-size: 5.5vw;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  --work-row-gap: calc(.275 * var(--menu-text-size));
  padding: var(--work-row-gap) 0 0;
  display: flex;
  flex-direction: column;
  row-gap: var(--work-row-gap);
  align-items: flex-start;
  visibility: hidden;
  pointer-events: none;
}
.work-menu.is-open .work-submenu { visibility: visible; pointer-events: auto; }
.work-submenu a { font: inherit; font-size: var(--menu-text-size); line-height: inherit; }

.home { touch-action: none; position: relative; width: 100%; height: 100dvh; background: #fff; }
.frontpage-fade { position: fixed; inset: 0; pointer-events: none; isolation: isolate; contain: strict; }
.frontpage-fade-media { position: absolute; display: block; max-width: none; object-fit: contain; pointer-events: none; transform: none; transition: none; animation: none; }
/* Frontpage navigation overlays the composition without a backing surface. */
.is-home .site-header, .is-home .site-header a, .is-home .mobile-menu-toggle { background: transparent; }

/* Frontpage only: keep navigation sharp above a pointer-transparent glass layer.
   Revert by removing this block; the pre-change stylesheet is in backups/. */
body.is-home .site-header :is(a, .work-toggle, .mobile-menu-toggle) { color: #000; }
@media (min-width: 701px) and (hover: hover) and (pointer: fine) {
  body.is-home::after {
    content: "";
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 40;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.35);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 200ms ease;
  }
  /* The navigation box includes submenu descendants, padding and row gaps. */
  body.is-home:has(.site-header .brand:hover, .site-header .main-nav:hover)::after {
    opacity: 1;
  }
}

.work { background: var(--dark); color: var(--ink); }

.project-preview { position: relative; }
.project-preview[hidden] { display: none; }
.project-link { position: absolute; z-index: 20; inset: 0; }
.is-work .project-link,
.is-work .project-title {
  cursor: pointer;
}
/* A separate overlay bounds the sticky title without adding flow height. */
.project-module-preview { --title-top-inset: calc(var(--pad) + .75rem); position: relative; }
.project-title-track { position: absolute; inset: 0; padding-top: var(--title-top-inset); pointer-events: none; }
.project-title-track > .project-title { pointer-events: auto; }

/* Shared module sizes: adjust these tokens to tune every project. */
:root {
  --module-small: clamp(12rem, 25vw, 24rem);
  --module-medium: clamp(20rem, 45vw, 42rem);
  --module-large: min(75vw, 100svh);
  --module-viewport: 100svh;
  --module-empty-auto: var(--module-small);
}
.project-module {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  overflow-x: clip;
  width: 100%;
  height: var(--module-height, auto);
}
.height-auto { --module-height: auto; }
.height-small { --module-height: var(--module-small); }
.height-medium { --module-height: var(--module-medium); }
.height-large { --module-height: var(--module-large); }
.height-viewport { --module-height: var(--module-viewport); }
.project-module.project-module-spacer { display: block; height: calc(var(--pad) * var(--spacer-scale)); position: relative; z-index: 21; cursor: default; }
.spacer-small { --spacer-scale: 4; }
.spacer-medium { --spacer-scale: 8; }
.spacer-large { --spacer-scale: 16; }
.project-module.is-empty.height-auto { min-height: var(--module-empty-auto); }
.project-slot { grid-column: span var(--slot-span); min-width: 0; min-height: 0; margin: 0; overflow: hidden; }
.project-slot > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.height-auto > .project-slot > img { height: auto; object-fit: fill; }
/* Native videos use the existing slot dimensions. */
/* Keep video loading/letterbox areas black, independent of white page surfaces. */
.project-slot:has(> .project-video) { background: #000; }
.project-video { position: relative; width: 100%; height: 100%; overflow: hidden; background: #000; }
.height-auto > .project-slot > .project-video { height: auto; aspect-ratio: var(--video-ratio, 16 / 9); }
.project-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.project-video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.project-video-poster[hidden] { display: none; }
.project-video-toggle { position: absolute; z-index: 1; bottom: var(--pad); right: var(--pad); border: 0; padding: 0; background: transparent; cursor: pointer; font: inherit; font-size: var(--menu-text-size); line-height: 1.1; --contrast-color: #ffffff; color: var(--contrast-color); }
/* Manual overview controls sit above their project's link and sticky title. */
.is-work .project-video-toggle { z-index: 31; }
@media (pointer: coarse) {
  .project-video-toggle::after { content: ""; position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; min-width: 44px; min-height: 44px; }
}
.project-video-toggle:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.project-video-toggle:disabled { cursor: default; }
.project-slot-text {
  padding: var(--pad);
  background: var(--dark);
  color: var(--ink);
  font-size: var(--text-size);
  line-height: 1.15;
  overflow: auto;
  overflow-wrap: anywhere;
}
.project-slot-text p { margin: 0 0 calc(1em / var(--text-scale)); }
.project-slot-text p:last-child { margin-bottom: 0; }
.project-slot-text.text-size-m { font-size: calc(1.5rem * var(--text-scale)); line-height: 1.12; }
.project-slot-text.text-size-l { font-size: calc(2.2rem * var(--text-scale)); line-height: 1.08; }
.project-title {
  position: sticky;
  z-index: 30;
  top: 50vh;
  width: calc(100% - (2 * var(--pad)));
  margin-left: var(--pad);
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  line-height: 1.15;
  font-size: var(--text-size);
  white-space: nowrap;
}
.project-title { display: grid; grid-template-columns: 51% minmax(0, 1fr); }
.project-title > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.project-kind { position: absolute; right: var(--pad); bottom: var(--pad); z-index: 5; }

.archive { min-height: 100svh; padding: calc(var(--pad) + clamp(16.5px, 1.32vw, 28.6px)) var(--pad) 10vh; background: var(--dark); color: var(--ink); }
.archive-background { position: fixed; inset: 0; z-index: 0; }
.archive-background.half { left: 50%; }
@media (min-width: 701px) {
  .archive-background.half.portrait-left { left: 0; right: 50%; }
  .archive-background.half.portrait-center { left: 25%; right: 25%; }
}
.archive-background img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s ease; }
.archive-background.visible img { opacity: 1; }

/* Index video backgrounds fill the viewport; image half-width positioning stays intact. */
.archive-background.is-video { inset: 0; width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; }
.archive-background.is-video > video,
.archive-background.is-video > .project-video { display: block; width: 100%; height: 100%; }
.archive-background.is-video > video { object-fit: cover; object-position: center; }
@media (min-width: 701px) {
  .archive-background.is-video > video.is-portrait-video {
    width: auto; height: 100vh; margin-inline: auto; object-fit: contain;
  }
}

.archive-list { width: 100%; position: relative; z-index: 2; }
.archive-row { display: grid; grid-template-columns: 51% minmax(0, 1fr); width: 100%; border: 0; padding: .12rem 0; color: inherit; background: transparent; text-align: left; cursor: pointer; line-height: 1.28; }
.archive-row:hover { color: var(--ink); }
.archive-row:hover span { font-style: italic; }
.is-index,
.is-index a,
.is-index button { cursor: url("material/cursor-index-2.svg") 12 7, ew-resize; }
.archive-additional-info { padding-left: 0; }
@media (min-width: 701px) {
  .archive-additional-info { visibility: hidden; }
  .archive-row:hover .archive-additional-info,
  .archive-list:not(:has(.archive-row:hover)) .archive-row:focus-within .archive-additional-info { visibility: visible; }
}

.info { --info-intro-font: clamp(14px, 1.6vw, 32px); --info-intro-gap: calc(var(--info-intro-font) * .55); --info-top: calc(var(--pad) + 1.7 * clamp(15px, 1.2vw, 26px)); padding: var(--info-top) var(--pad) 37.5vh; background: var(--dark); color: var(--ink); font-size: var(--menu-text-size); line-height: 1.1; }
.info-columns { display: grid; grid-template-columns: 51% 49%; gap: 0; align-items: start; margin-top: 0; }
.info-column { min-width: 0; overflow-wrap: anywhere; }
/* Keep the approved lower-row baseline while the introduction fits.
   Longer content expands this normal-flow block and pushes the rows downward. */
.info-introduction { min-height: max(0px, calc(50vh + var(--info-baseline-offset, 0px) - var(--info-top))); padding-bottom: var(--info-intro-gap); display: flex; flex-direction: column; justify-content: flex-start; }
.info-intro-content { flex: 0 0 auto; width: 100%; }
.info-details { display: grid; gap: calc(2.5 * var(--menu-font-size)); }
.info-details section, .info-side-section, .info-footer-credit { display: grid; grid-template-columns: calc(9.375% + 4.28125 * var(--menu-font-size)) minmax(0, 1fr); column-gap: calc(.75 * var(--menu-font-size)); align-items: start; }
.info-details section, .info-footer-credit { padding-right: var(--menu-font-size); }
.info-details section > p, .info-side-section > p { min-width: 0; }
.info h2, .info h3, .info p { margin: 0; font: inherit; }
.info .info-intro { width: 49vw; max-width: 100%; font-size: var(--info-intro-font); line-height: 1.1; overflow-wrap: anywhere; }
.info .info-additional-intro { margin-top: calc(2.5 * var(--menu-font-size)); }
.info a:hover { font-style: italic; }
/* Reserve both font styles so value-only hover cannot change wrapping or geometry. */
.info .info-contact a.info-contact-value { display: inline-grid; max-width: 100%; vertical-align: baseline; color: inherit; text-decoration: none; font-style: normal; }
.info-contact-value > span, .info-contact-value::before, .info-contact-value::after { grid-area: 1 / 1; }
.info-contact-value::before, .info-contact-value::after { content: attr(data-value); visibility: hidden; }
.info-contact-value::before { font-style: normal; }
.info-contact-value::after { font-style: italic; }
@media (hover: hover) {
  .info-contact-value:hover > span { font-style: italic; }
}


.legal-page { min-height: 100svh; padding: 8rem var(--pad) 3rem; display: grid; grid-template-columns: 51% 49%; align-content: start; }
.legal-page h1 { margin: 0; font: inherit; }
.legal-copy { max-width: 38rem; min-width: 0; line-height: 1.3; overflow-wrap: anywhere; }
.legal-copy h2 { margin: 0 0 .5rem; font: inherit; }
.legal-copy p { margin: 0 0 2rem; }

.legal-copy nav { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 4rem; }
.legal-copy a:hover, .legal-copy a[aria-current="page"] { font-style: italic; }
.legal-copy a:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
@media (max-width: 700px) {
  .legal-page { grid-template-columns: 1fr; gap: 3rem; padding-top: 6rem; }
}

.detail { position: relative; overflow: clip; background: var(--dark); color: var(--ink); }
.project-footer {
  height: 100dvh;
  padding: calc(50dvh - .5rem) var(--pad) var(--pad);
  display: grid;
  grid-template-columns: 51% 49%;
  background: var(--dark);
}
/* Info alone reserves its three-eighths-viewport gap in section padding, not in the footer. */
.is-info .project-footer { height: auto; padding-top: 0; padding-bottom: 50vh; }
.info-footer-credit { grid-column: 1; font-size: var(--menu-text-size); line-height: 1.1; }
.info-footer-credit h2, .info-footer-credit p { margin: 0; font: inherit; min-width: 0; }
.info-footer-credit a { display: block; overflow-wrap: anywhere; }
.info-footer-credit a:hover { font-style: italic; }
.info-footer-credit a:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.is-info .project-footer { align-items: start; }

/* With no lower sections, there is no lower-row baseline to reserve. */
.info:has(> .info-columns[hidden]) > .info-introduction { min-height: 0; padding-bottom: 0; }
.project-footer-links { grid-column: 2; display: flex; flex-direction: column; align-items: flex-start; }
.project-footer-links a { font-size: var(--menu-text-size); line-height: 1.1; white-space: nowrap; }
.project-footer-links a[href]:hover { font-style: italic; }
.project-footer-links a:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
/* Undo text scaling only for the measured footer offset, preserving its position. */
@media (max-width: 700px) {
  .project-footer { grid-template-columns: 1fr; padding-top: calc(50dvh + var(--detail-title-height, var(--text-size)) / var(--text-scale) / 2); }
  .project-footer-links { grid-column: 1; }
  .is-info .project-footer { padding-bottom: 50svh; row-gap: 2rem; }
  .detail-back { max-width: calc(100% - 2 * var(--pad)); overflow-wrap: anywhere; }
}
.detail-back { position: fixed; z-index: 50; top: 50%; left: var(--pad); transform: translateY(-50%); font-size: var(--text-size); line-height: 1; transition: opacity .2s ease; }
.detail-info-label, .detail-sound-control { position: fixed; z-index: 50; bottom: var(--pad); left: var(--pad); border: 0; padding: 0; background: transparent; color: inherit; font: inherit; font-size: var(--menu-text-size); line-height: 1.1; cursor: pointer; transition: opacity .2s ease; }
.detail-info-label:hover, .detail-info-label:focus-visible,
.detail-sound-control:hover, .detail-sound-control:focus-visible { font-style: italic; }
.detail-info-label:focus-visible, .detail-sound-control:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.detail-back.is-hidden { opacity: 0; pointer-events: none; }
.detail-info-layer { position: fixed; z-index: 90; inset: 0; visibility: hidden; pointer-events: none; transition: visibility 0s linear .65s; }
.detail-info-layer.open { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.detail-info-popup { position: absolute; right: 0; bottom: 0; left: 0; max-height: 48vh; overflow-y: auto; padding: var(--pad); background: rgba(0, 0, 0, .9); color: var(--ink); transform: translateY(100%); transition: transform .65s cubic-bezier(.77, 0, .18, 1); }
.detail-info-popup { font-size: var(--menu-text-size); line-height: 1.2; }
.detail-info-layer.open .detail-info-popup { transform: translateY(0); }
.detail-info-close { display: block; margin: 0 0 .5rem; border: 0; padding: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.detail-info-close:hover { font-style: italic; }
.detail-info-popup p { margin: 0 0 1.5rem; line-height: inherit; }

/* Shared text color across page content and controls. */
.project-title,
.project-kind,
.info h2,
.info h3,
.info p,
.detail-back,
.detail-info-label, .detail-sound-control,
.detail-info-close,
.detail-info-popup p,
.open-cursor,
noscript {
  color: var(--ink);
}

.open-cursor {
  position: fixed;
  z-index: 110;
  pointer-events: none;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  font-size: var(--menu-text-size);
  line-height: 1.2;
}
@media (any-hover: hover) and (any-pointer: fine) {
  .has-open-cursor .work, .has-open-cursor .work * { cursor: none; }
}
@media (hover: none) and (pointer: coarse) {
  .open-cursor { display: none; }
}

@media (max-width: 700px) {
  :root { --pad: 8px; --menu-font-size: .88rem; --ink: #000; background: #fff; }
  /* White page canvas; keep --dark for intentional media/content backgrounds. */
  body, .archive { background: #fff; }
  .detail-info-label { font-size: var(--menu-text-size); }
  .site-header,
  .mobile-menu-header { grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; font-size: var(--menu-text-size); }
  .site-header.is-hidden { opacity: 1; transform: none; pointer-events: auto; }
  .site-header .brand,
  .mobile-menu-header .brand { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .main-nav { display: none; }
  .mobile-menu-toggle,
  .mobile-menu-close { border: 0; padding: 0; background: transparent; color: inherit; cursor: pointer; }
  .mobile-menu-toggle { display: block; }
  .mobile-menu[open] {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border: 0;
    padding: max(4.25vw, env(safe-area-inset-top)) 2.6vw max(4vw, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    font-family: inherit;
    font-weight: 300;
    color: #000;
    background: #fff;
  }
  .mobile-menu::backdrop { background: #fff; }
  .mobile-menu-open .site-header { visibility: hidden; }
  .mobile-menu-header { display: flex; justify-content: flex-end; position: absolute; top: max(4.25vw, env(safe-area-inset-top)); right: 2.6vw; left: auto; font-family: inherit; font-weight: 300; font-size: calc(4vw * var(--text-scale)); line-height: 1.1; color: #000; background: #fff; }
  .mobile-menu-header .brand,
  .mobile-menu .mobile-menu-mail { display: none; }
  .mobile-menu nav { flex-shrink: 0; margin-top: 0; font-size: calc(12.8vw * var(--text-scale)); line-height: 1; -webkit-tap-highlight-color: transparent; }
  .mobile-menu nav a { display: block; width: fit-content; max-width: 100%; white-space: nowrap; }
  .mobile-menu-work { padding-bottom: 0; }
  .mobile-menu nav .mobile-menu-label { display: block; border: 0; padding: 0; background: transparent; color: inherit; font: inherit; font-style: normal; text-align: left; cursor: pointer; }
  .mobile-work-submenu { --work-row-gap: .25em; display: flex; flex-direction: column; row-gap: var(--work-row-gap); padding-top: var(--work-row-gap); padding-left: 8vw; }
  .mobile-menu nav a { font-style: normal; }
  .mobile-menu nav a:active { font-style: normal; }
  .mobile-menu nav .mobile-menu-section { width: 100%; }
  .mobile-menu-mail { flex-shrink: 0; align-self: flex-start; margin-top: auto; padding: 4vw 1.6vw 0; font-size: calc(4vw * var(--text-scale)); line-height: 1.1; }
  .mobile-menu-mail:hover,
  .mobile-menu-header a:hover,
  .mobile-menu-close:hover,
  .mobile-menu-toggle:hover { font-style: italic; }
  .work-submenu { --preferred-menu-size: 10.5vw; }
  .archive { padding-top: var(--archive-list-top); }
  .info { padding-top: var(--info-top); }
  .project-module { height: auto; grid-template-columns: minmax(0, 1fr); }
  .project-slot { grid-column: 1; height: var(--module-height, auto); }
  .project-slot-text { height: auto; }
  .project-slot.is-empty, .project-module.is-empty, .project-module-preview.is-empty { display: none; }
  body.is-index { overflow: hidden; }
  .archive-background { opacity: 1; }
  .archive-background.half { left: 0; }
  .archive-background.visible::after { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.28); pointer-events: none; }
  .archive-list {
    --archive-row-height: 1.52rem;
    --archive-list-top: calc(var(--pad) + 1.1rem);
    position: fixed;
    top: var(--archive-list-top);
    left: var(--pad);
    right: var(--pad);
    width: auto;
    height: auto;
    overflow: hidden;
    z-index: 2;
  }
  .archive-row {
    grid-template-columns: 1fr;
    height: var(--archive-row-height);
  }
  .archive-row span,
  .archive-row:hover span { font-style: normal; }
  .archive-row.is-active > span { font-style: italic; }
  .archive-additional-info { display: none; }
  .info { padding-bottom: 37.5svh; --info-intro-font: clamp(22px, 5.6vw, 30px); --info-top: calc(max(var(--pad), env(safe-area-inset-top)) + 1.1 * var(--menu-text-size) + var(--pad)); }
  .info-introduction { min-height: max(0px, calc(50svh + var(--info-baseline-offset, 0px) - var(--info-top))); }
  .info .info-intro { width: 100%; }
  .info-columns { grid-template-columns: 1fr; gap: 2rem; margin-top: 0; }
  .info-details section, .info-footer-credit { padding-right: 0; }
  .info-details section, .info-side-section, .info-footer-credit { grid-template-columns: minmax(0, .875fr) minmax(0, 3.125fr); column-gap: .53125rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-header, .detail-info-popup { transition-duration: .01ms; }
}

/* Binary overlay colors, decided by the shared contrast controller. */
body { --contrast-color: #ffffff; }
body:is(.is-home, .is-work, .is-detail, .is-info) { --contrast-color: #000000; }
.site-header > a, .site-header .main-nav :is(a, .work-toggle), .mobile-menu-toggle,
.project-title > span, .project-kind, .open-cursor,
.detail-back, .detail-info-label, .detail-sound-control, .archive-list {
  color: var(--contrast-color);
}
/* Fixed route colors also override any inline sample left on the shared header. */
body:is(.is-index, .is-work) :is(.site-header > a, .site-header .main-nav a,
  .site-header .work-toggle, .mobile-menu-toggle, .archive-list, .open-cursor,
  .project-title > span, .project-kind, .project-video-toggle) {
  --contrast-color: #ffffff !important;
}
.archive-row:hover { color: inherit; }
/* These surfaces have fixed white backgrounds, so never sample media for them. */
body.is-detail :is(.detail-info-popup, .detail-info-close, .detail-info-popup p,
  .project-slot-text p, .project-footer-links) { color: #000000; }

/* Project audio shares Info's fixed baseline; playback remains within each video. */
.detail-sound-control { left: auto; right: var(--pad); }
[data-project-detail-video] .project-video-toggle {
  transform: translateY(calc(-1 * var(--project-control-lift, 0px)));
}
@media (hover: none), (pointer: coarse) {
  .detail-sound-control::after { content: ""; position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; min-width: 44px; min-height: 44px; }
}

/* Index backdrop and intrinsic portrait positioning. */
body.is-index { --dark: #000; --ink: #fff; color: var(--ink); }
body.is-index, .is-index .archive, .is-index .archive-background { background-color: #000; }
@media (min-width: 701px) {
  /* Include the root and app canvas exposed at the viewport's top edge. */
  html:has(body.is-index), body.is-index #app { background-color: #000000; }
  .is-index .archive[data-prepared="true"] .index-loading-indicator { display: none; }
}
.is-index .archive-background { display: flex; align-items: center; justify-content: center; }
.is-index .archive-background.half { left: 0; right: 0; justify-content: flex-end; }
.is-index .archive-background.half.portrait-left { justify-content: flex-start; }
.is-index .archive-background.half.portrait-center { justify-content: center; }
.archive-background img.is-portrait-image {
  width: auto; height: auto;
  max-width: min(100vw, var(--native-width));
  max-height: min(100dvh, var(--native-height));
  object-fit: contain;
}
@media (min-width: 701px) {
  .archive-background img.is-portrait-image { max-width: min(50vw, var(--native-width)); }
}
.is-index .archive-background.visible::after { background: transparent; }

.is-index .detail-sound-control {
  bottom: max(var(--pad), env(safe-area-inset-bottom));
  right: max(var(--pad), env(safe-area-inset-right));
}

@media (max-width: 700px) {
  /* Retain mobile media shading without changing the empty black backdrop. */
  .is-index .archive-background.visible > img,
  .is-index .archive-background.visible > video,
  .is-index .archive-background.visible > .project-video { filter: brightness(.72); }
}

@media (max-width: 700px) {
  body.is-index { overflow: hidden; height: 100vh; height: 100dvh; overscroll-behavior: none; }
  .is-index .archive { position: fixed; inset: 0; width: 100vw; min-height: 0; height: 100vh; height: 100dvh; overflow: hidden; touch-action: none; }
  .is-index .site-header {
    top: max(var(--pad), env(safe-area-inset-top));
    left: max(var(--pad), env(safe-area-inset-left));
    right: max(var(--pad), env(safe-area-inset-right));
  }
  .is-index .archive-list {
    --archive-list-top: calc(max(var(--pad), env(safe-area-inset-top)) + 1.1rem);
    left: max(var(--pad), env(safe-area-inset-left));
    right: max(var(--pad), env(safe-area-inset-right));
    height: calc(100vh - var(--archive-list-top));
    height: calc(100dvh - var(--archive-list-top));
    overflow: hidden;
  }
  .archive-list-track {
    transform: translateY(calc(-1 * var(--archive-offset, 0px)));
    transition: none;
    will-change: transform;
  }
  .archive-list-track.is-moving { transition: transform 400ms cubic-bezier(.22, 1, .36, 1); }
  /* Only the visible title is a selection target; blank row space advances. */
  .is-index .archive-row { width: fit-content; max-width: 100%; height: auto; min-height: var(--archive-row-height); }
  .is-index .archive-background img { opacity: 1; transition: none; }
  .is-index .archive-background { inset: 0; width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; }
  .is-index .archive-background > img,
  .is-index .archive-background > video,
  .is-index .archive-background img.is-portrait-image {
    display: block; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; object-fit: cover;
  }
  .mobile-menu[open] { padding-left: max(2.6vw, env(safe-area-inset-left)); padding-right: max(2.6vw, env(safe-area-inset-right)); }
  body.mobile-menu-open { background-color: #fff; }
  .mobile-menu-header { right: max(2.6vw, env(safe-area-inset-right)); }
  .mobile-menu nav .mobile-menu-label { cursor: default; }
}

/* Home alone centers the existing navigation grid as one group. */
body.is-home { background: #fff; }
.is-home .site-header, .is-home .site-header.is-hidden {
  top: 50vh; top: 50dvh; bottom: auto; transform: translateY(-50%);
  opacity: 1; pointer-events: auto; transition: none;
}

/* Native submenu buttons retain the existing navigation metrics. */
.work-toggle, .mobile-menu-label { border: 0; padding: 0; margin: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.main-nav .work-toggle { font-size: var(--menu-text-size); line-height: inherit; }
.work-toggle:hover, .work-toggle:focus-visible { font-style: italic; }
.mobile-work-submenu[hidden] { display: none; }
.site-header .brand span { display: inline-block; }
.frontpage-fade-media { border: 0; outline: 0; padding: 0; margin: 0; background: transparent; }
.home-pending, .home-pending body { background: #fff; }
.home-pending .site-header { transform: translateY(-50%); top: 50dvh; color: #000; transition: none; }
.home-pending .site-header .brand { overflow: visible; }
.home-pending .site-header :is(.brand, .main-nav a, .work-toggle, .mobile-menu-toggle) { color: #000; }

/* Preparation progress does not intercept navigation or touch input. */
.frontpage-loading-indicator { position: fixed; z-index: 51; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: 170px; max-width: calc(100vw - 32px); height: 3px; background: transparent; pointer-events: none; }
.frontpage-loading-indicator > span { position: relative; display: block; width: 100%; height: 100%; background: #000000; transform: scaleX(0); transform-origin: left; }
@media (max-width: 700px) {
  .mobile-menu-header { left: max(2.6vw, env(safe-area-inset-left)); justify-content: space-between; }
  .mobile-menu-header .brand { display: block; }
  .mobile-menu-header .brand:hover { font-style: normal; }
  /* Stable background crop as Safari chrome expands; controls retain dvh sizing. */
  .is-index .archive-background { height: 100vh; height: 100lvh; }
  .is-index .detail-sound-control { bottom: max(var(--pad), env(safe-area-inset-bottom)); }
}

/* One mobile header grid and safe-area origin for pages and the menu overlay. */
@media (max-width: 700px) {
  .site-header, .mobile-menu-header {
    position: fixed;
    top: max(var(--pad), env(safe-area-inset-top));
    left: max(var(--pad), env(safe-area-inset-left));
    right: max(var(--pad), env(safe-area-inset-right));
    bottom: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .6rem;
    align-items: start;
    font-size: var(--menu-text-size);
    line-height: 1.1;
    font-weight: 300;
  }
  .mobile-menu-header { transition: none; }
  /* Halve the existing header-to-navigation gap, including safe-area padding.
     Header geometry and spacing within the navigation stay unchanged. */
  .mobile-menu nav { margin-top: calc(1.1 * var(--menu-text-size) + .5 * (max(var(--pad), env(safe-area-inset-top)) + var(--pad) - max(4.25vw, env(safe-area-inset-top)))); }
}

/* Independent Auto Height items retain the shared grid widths and Crop height presets. */
.project-module.has-auto-media { height: auto; align-items: start; }
.has-auto-media > .project-slot { height: var(--module-height, auto); }
.has-auto-media > .project-slot.media-display-auto { height: auto; align-self: start; overflow: visible; }
.project-slot.media-display-auto > img { width: 100%; height: auto; object-fit: fill; }
/* Let the video own its intrinsic height: no fractional wrapper clipping or inner bars. */
.project-slot.media-display-auto > .project-video { height: auto; aspect-ratio: auto; overflow: visible; background: transparent; }
.project-slot.media-display-auto:has(> .project-video) { background: transparent; }
.project-slot.media-display-auto video { position: static; display: block; width: 100%; height: auto; aspect-ratio: var(--video-ratio, 16 / 9); }
.project-slot.media-display-auto video { object-fit: fill; }
.project-slot.media-display-auto .project-video-poster { object-fit: contain; }
@media (max-width: 700px) {
  .has-auto-media > .project-slot-text { height: auto; }
}

/* Hidden CMS groups must not reserve a grid cell. */
.info [hidden] { display: none; }

/* Crop sources are fitted proportionally to a device-pixel-aligned paint box.
   Their layout slots keep their original widths and heights. Auto Height never
   uses this clip or absolute positioning. */
.project-slot:has(> .pixel-crop-media) { position: relative; overflow: visible; }
.project-slot:has(> .project-video > .pixel-crop-media),
.project-video:has(> .pixel-crop-media) { overflow: visible; }
.project-module .pixel-crop-media { position: absolute; max-width: none; object-fit: fill; transform: none; }
.work .project-module .pixel-crop-media { position: absolute; }

/* The Index uses the same track-free line as Frontpage, in white. */
.index-loading-indicator { position: fixed; z-index: 51; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: 170px; max-width: calc(100vw - 32px); height: 3px; pointer-events: none; }
.index-loading-indicator > span { display: block; width: 100%; height: 100%; background: #ffffff; transform: scaleX(0); transform-origin: left; }
@media (max-width: 700px) {
  /* Reduce only whitespace between entries; multiline text retains 1.28. */
  .is-index .archive-row { font-family: inherit; font-size: var(--menu-text-size); font-weight: 300; min-height: calc(1.28 * var(--text-size) + .75 * (1.52rem - 1.28 * var(--text-size))); padding: .09rem 0; }
}

/* Only project details opt into directional mobile navigation. Info and Sound
   remain in their existing fixed positions outside the header. */
@media (max-width: 700px) {
  body.is-detail .site-header.is-hidden { opacity: 0; transform: translateY(calc(-100% - var(--pad))); pointer-events: none; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  body.is-detail .site-header, body.is-detail .detail-back { transition: none; }
}

/* Mobile page canvas, including the root exposed by Safari rubber-band scrolling.
   Component surfaces (video hosts, popups, controls) keep their own backgrounds. */
@media (max-width: 700px) {
  html, body, body.is-index, #app, #app > :is(.home, .archive, .work, .detail, .info, .legal-page), .is-index .archive-background { background-color: #FFFFFF; }
}

.index-retry { position: fixed; z-index: 51; left: var(--pad); bottom: max(var(--pad), env(safe-area-inset-bottom)); border: 0; padding: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }

/* Front page canvas, including loading and the mobile viewport. */
html.home-pending,
html:has(body.is-home),
.home-pending body,
body.is-home,
body.is-home #app,
#app > .home { background-color: var(--frontpage-background); }