@font-face {
  font-family: "HAL Colant";
  src: url("assets/HAL-Colant-Regular.woff2") format("woff2"),
       url("assets/HAL-Colant-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #fffff9;
  --text: #282828;
  --muted: #969696;
  --line: #dbdbd6;
  --lime: #c8ff00;
  --edge: 20px;
  --gutter: 20px;
  --header-row: 42px;
  --type: 13pt;
  --small: 10pt;
}

::selection {
  background: var(--lime);
  color: var(--text);
}

::-moz-selection {
  background: var(--lime);
  color: var(--text);
}

* {
  box-sizing: border-box;
  cursor: none !important;
}

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: "HAL Colant", Arial, sans-serif;
  font-size: var(--type);
  line-height: 1.2;
  font-weight: 400;
  cursor: none;
}

a, button {
  color: inherit;
  font: inherit;
  cursor: none;
}

a {
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:not(.project-title a) {
  text-decoration-line: none;
}

a:hover,
a:focus-visible,
button:hover,
button:focus-visible {
  color: var(--muted);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

button {
  border: 0;
  padding: 0;
  background: transparent;
}

.page-shell {
  position: fixed;
  top: var(--edge);
  right: var(--edge);
  bottom: 0;
  left: var(--edge);
}

.site-header,
.site-main {
  display: grid;
  /* The works image now STARTS exactly at the 50vw line. The compensation
     is absorbed by the lighter bio side, while the image itself becomes
     slightly narrower than half of the viewport. */
  grid-template-columns:
    minmax(0, calc(37.5vw - var(--edge) - var(--edge) - 1px))
    1px
    minmax(0, 62.5vw);
  column-gap: 0;
}

.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--header-row);
  z-index: 20;
  pointer-events: none;
}

.site-header > * { pointer-events: auto; }

.header-left,
.header-right {
  position: relative;
  height: 100%;
  border-bottom: 0;
  align-items: start;
}

/* Keep the two header rules visually separate: each stops 20px before
   the central divider instead of joining into one continuous line. */
.header-left::after,
.header-right::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 1px;
  background: var(--line);
  pointer-events: none;
}
.header-left::after { left: 0; right: var(--gutter); }
.header-right::after { left: var(--gutter); right: 0; }

/* The visual gutter belongs to each large column, not to a fixed middle strip.
   This leaves the actual separator at exactly 1px and lets each side's trail
   move with its own scroll history right up to the divider. */
.header-left { padding-right: var(--gutter); }
.header-right { padding-left: var(--gutter); }

/* The central divider starts below the fixed menu. */
.site-header > .main-divider {
  background: transparent;
}

/* Inside the 3/8 bio area, these header items use a true 50/50 split. */
.header-left {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.subgrid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gutter);
}

.subgrid-5 {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--gutter);
}

/* Override the generic 3-column helper: the bio header is a true 50/50 split. */
.site-header .header-left {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gutter);
}

.role-label {
  white-space: nowrap;
}

.role-short { display: none; }

.home-name-short,
.about-link {
  display: none;
}

.home-link,
.gallery-link {
  text-decoration: none;
}

.home-link { grid-column: 1; }
.role-label { grid-column: 2; }
.works-jump {
  grid-column: 2 / 4;
  text-align: left;
  pointer-events: none;
}
.works-arrows {
  display: inline-block;
  font-size: var(--small);
  letter-spacing: -0.08em;
  margin-right: 0.35em;
  vertical-align: 0.2em;
}
.gallery-link {
  grid-column: 5;
  justify-self: end;
}

.main-divider {
  width: 1px;
  background: var(--line);
}

.site-main {
  position: absolute;
  inset: var(--header-row) 0 0 0;
  min-height: 0;
}

.main-divider-body {
  height: 100%;
}

.bio-panel,
.works-panel {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.bio-scroll,
.works-scroll {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.bio-scroll { padding-right: var(--gutter); }
.works-scroll { padding-left: var(--gutter); }

.bio-scroll::-webkit-scrollbar,
.works-scroll::-webkit-scrollbar { display: none; }

.bio-first-screen {
  min-height: 100%;
  position: relative;
  padding-top: 40px;
  padding-bottom: 20px;
  align-content: start;
}

.avatar-flip {
  grid-column: 1;
  width: 100%;
  aspect-ratio: 1 / 1.18;
  perspective: 900px;
  position: relative;
}

.avatar-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 650ms cubic-bezier(.65, 0, .35, 1);
}

.avatar-flip:hover .avatar-flip-inner {
  transform: rotateY(180deg);
}

.avatar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center top;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.avatar-back {
  transform: rotateY(180deg);
}

.bio-copy {
  grid-column: 1 / -1;
  margin: 20px 0 0 0;
  width: 75%;
  max-width: 75%;
}

.bio-bottom-arrow {
  position: absolute;
  left: 0;
  bottom: 20px;
}

.find-me {
  position: absolute;
  left: calc(50% + (var(--gutter) / 2));
  right: 0;
  bottom: 20px;
}

.find-me {
  font-size: var(--small);
  line-height: 1.2;
}

.find-me p { margin: 0; }
.find-me p + p { margin-top: 0; }
.find-me a {
  color: var(--muted);
  text-decoration: none;
}
.find-me a:hover,
.find-me a:focus-visible {
  color: var(--muted);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.bio-longform {
  padding: 60px 0 80px;
  border-top: 1px solid var(--line);
  row-gap: 80px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.info-block {
  min-width: 0;
}

.experience-block { grid-column: 1; }
.awards-block { grid-column: 2; }

.info-block h2,
.info-block p {
  margin: 0;
  font: inherit;
}

.experience-list,
.awards-list {
  margin-top: 40px;
  font-size: var(--small);
  line-height: 1.2;
}

.experience-list p + p,
.awards-list p + p {
  margin-top: 22px;
}

.muted-detail {
  color: var(--muted);
}

#project-list { padding-top: 40px; }

.project {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: stretch;
}

.project-meta {
  grid-column: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

.project-title {
  margin: 0;
  font-size: var(--type);
  line-height: 1.2;
  font-weight: 400;
}

.project-title a {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.project-description,
.project-small,
.project-full-case {
  font-size: var(--small);
  line-height: 1.2;
}

.project-description {
  margin: 22px 0 0;
}

.project-small {
  margin: 30px 0 0;
  color: var(--muted);
}

.project-full-case {
  margin: auto 0 0;
  padding-top: 24px;
  color: var(--muted);
}

.project-full-case a {
  color: inherit;
  text-decoration: none;
}
.project-full-case a:hover,
.project-full-case a:focus-visible {
  color: var(--muted);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Opening-zone hover also highlights the matching Full case link. */
.project.is-case-hover .project-full-case a {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.project-media {
  grid-column: 2 / 6;
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #efefe9;
  aspect-ratio: 16 / 9;
}

.media-stack,
.media-stack > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.media-stack img,
.media-stack video {
  object-fit: contain;
  object-position: center;
  display: block;
  opacity: 0;
  transition: opacity 900ms ease;
}

.media-stack .is-active { opacity: 1; }

.carousel-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
}

.carousel-zone.prev { left: 0; width: 15%; }
.carousel-zone.center { left: 15%; width: 70%; }
.carousel-zone.next { right: 0; width: 15%; }

/* A project may intentionally use a single home image/video instead of a carousel. */
.project-media.is-single .carousel-zone.prev,
.project-media.is-single .carousel-zone.next {
  display: none;
}

.project-media.is-single .carousel-zone.center {
  left: 0;
  width: 100%;
}

.project-separator {
  height: 60px;
  position: relative;
}

.project-separator::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--line);
  transform: translateY(-0.5px);
}

.works-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 60px 0 20px;
}

.footer-end-label {
  font-size: var(--type);
  line-height: 1.2;
  color: var(--text);
}

.back-to-top {
  font-size: var(--type);
  line-height: 1.2;
  color: var(--text);
  text-decoration: none;
}

.back-to-top:hover,
.back-to-top:focus-visible {
  color: var(--text);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.custom-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lime);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: width 160ms ease, height 160ms ease, opacity 120ms ease;
  display: grid;
  place-items: center;
  color: var(--text);
  font-family: Arial, sans-serif;
  font-size: 0;
  line-height: 1;
}

.custom-cursor.is-visible { opacity: 1; }
.custom-cursor.is-interactive {
  width: 26px;
  height: 26px;
}
.custom-cursor.is-center {
  width: 44px;
  height: 44px;
  font-size: 28px;
}
.custom-cursor.is-side {
  width: 28px;
  height: 28px;
  font-size: 17px;
}

.custom-cursor.is-center::before,
.custom-cursor.is-center::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.custom-cursor.is-center::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

@media (pointer: coarse) {
  html, body, a, button { cursor: auto; }
  .custom-cursor { display: none !important; }
}

/* Selected works is a static label, never an interactive link. */
.works-jump {
  color: var(--text);
  text-decoration: none;
}

/* Carousel arrows become the cursor itself: no lime bubble, just a lime glyph. */
.custom-cursor.is-side {
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  padding: 0 0 3px;
  border-radius: 0;
  background: transparent;
  color: var(--lime);
  font-size: 24px;
}


/* A fixed background drawing layer covers the header and gutters too. */
.global-trail-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}

.page-shell {
  z-index: 1;
}

.custom-cursor {
  z-index: 1000;
}

/* Persistent cursor drawing sits behind each independently scrolling column. */
.bio-scroll,
.works-scroll {
  position: relative;
}

.cursor-trail-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.bio-first-screen,
.bio-longform,
#project-list,
.works-footer {
  position: relative;
  z-index: 1;
}



/* Gallery label is clean at rest; only the open state gets a close mark. */
.gallery-link::before {
  content: "";
}

body.gallery-open .gallery-link::before {
  content: "× ";
}

/* In Gallery the split no longer exists, so the header rule becomes one
   continuous line across the full usable width. */
body.gallery-open .header-left::after,
body.gallery-open .header-right::after {
  display: none;
}

body.gallery-open .site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line);
  pointer-events: none;
}

/* Full-width gallery overlay. It ignores the 3/8 + 5/8 split and uses
   the complete eight-column canvas beneath the fixed navigation. */
.gallery-overlay {
  position: fixed;
  left: var(--edge);
  right: var(--edge);
  top: calc(var(--edge) + var(--header-row));
  bottom: 0;
  z-index: 15;
  background: var(--bg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
}

.gallery-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 220ms ease;
}

.gallery-scroll {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.gallery-scroll::-webkit-scrollbar { display: none; }

.gallery-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--gutter);
  padding-top: 40px;
  padding-bottom: var(--gutter);
}

.gallery-item {
  grid-column: span 2;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #efefe9;
  text-decoration: none !important;
}

.gallery-item img,
.gallery-item video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-item:hover,
.gallery-item:focus-visible {
  color: inherit;
  text-decoration: none !important;
}


.gallery-grid.has-hover .gallery-item {
  opacity: 0.25;
}

.gallery-grid.has-hover .gallery-item.is-related {
  opacity: 1;
}

.gallery-item {
  transition: opacity 180ms ease;
}

body.gallery-open .main-divider-body {
  visibility: hidden;
}


/* Gallery hover: keep the lime cursor circle and reveal the case title beside it. */
.custom-cursor.is-gallery::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  width: max-content;
  color: var(--lime);
  font-family: "HAL Colant", Arial, sans-serif;
  font-size: var(--small);
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
}

/* In Gallery, only the home and Gallery controls remain in the header. */
body.gallery-open .role-label,
body.gallery-open .works-jump {
  visibility: hidden;
}

/* ------------------------------------------------------------
   CASE PAGE
   ------------------------------------------------------------ */
.case-body {
  overflow: hidden;
}

.case-layout {
  position: fixed;
  inset: 20px 20px 0 20px;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  column-gap: var(--gutter);
  min-width: 0;
}

.case-info {
  grid-column: 1 / span 2;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  border-right: 1px solid var(--line);
  padding-right: var(--gutter);
}

.case-info-scroll {
  position: relative;
  height: 100%;
  overflow: hidden;
  scrollbar-width: none;
}
.case-info-scroll::-webkit-scrollbar { display: none; }

.case-info-main {
  padding-bottom: 20px;
}

.case-home-top {
  display: inline-block;
  margin-bottom: 60px;
  color: var(--text);
  text-decoration: none;
}

.case-copy h1,
.case-copy p,
.case-credits p {
  margin: 0;
}

.case-copy h1 {
  font-size: var(--type);
  line-height: 1.2;
  font-weight: 400;
}

.case-client {
  margin-top: 0 !important;
  color: var(--muted);
  font-size: var(--type);
  line-height: 1.2;
}

.case-description {
  margin-top: 30px;
  font-size: var(--small);
  line-height: 1.2;
}

.case-description p + p {
  margin-top: 18px;
}

.case-credits {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  color: var(--muted);
  font-size: var(--small);
  line-height: 1.2;
}

.case-info.is-overflowing .case-info-scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.case-info.is-overflowing .case-info-main {
  padding-bottom: 40px;
}

.case-info.is-overflowing .case-credits {
  position: static;
  padding-bottom: 20px;
}

.case-media {
  grid-column: 3 / -1;
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding-left: 0;
}
.case-media::-webkit-scrollbar { display: none; }

.case-media-item {
  margin: 0 0 var(--gutter) 0;
  width: 100%;
  overflow: hidden;
  background: #efefe9;
}

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

.case-media-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
  margin-bottom: var(--gutter);
}

.case-media-row .case-media-item {
  margin-bottom: 0;
}

.case-media-item.half img,
.case-media-item.half video {
  width: 100%;
  height: auto;
}

.case-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 40px 0 20px;
  font-size: var(--type);
  line-height: 1.2;
}

.case-footer a {
  color: var(--text);
  text-decoration: none;
}

.case-footer a:hover,
.case-footer a:focus-visible {
  color: var(--muted);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* ------------------------------------------------------------
   CASE PAGE — fixed header aligned to the 2 / 6 column split
   ------------------------------------------------------------ */
.case-page-shell {
  position: fixed;
  top: var(--edge);
  right: var(--edge);
  bottom: 0;
  left: var(--edge);
}

.case-header,
.case-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) 1px minmax(0, 6fr);
  column-gap: 0;
}

.case-header {
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--header-row);
  z-index: 20;
}

.case-header-left,
.case-header-right {
  position: relative;
  height: 100%;
  align-items: start;
}

.case-header-left {
  padding-right: var(--gutter);
}

.case-header-right {
  padding-left: var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  /* The whole right-side menu bar includes the 20px page-top breathing room.
     This way its background, text and divider travel as one object. */
  margin-top: calc(-1 * var(--edge));
  padding-top: var(--edge);
  height: calc(var(--header-row) + var(--edge));
  background: var(--bg);
}

/* Two independent header rules, matching the two case columns. */
.case-header-left::after,
.case-header-right::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 1px;
  background: var(--line);
  pointer-events: none;
}

.case-header-left::after {
  left: 0;
  right: var(--gutter);
}

.case-header-right::after {
  left: var(--gutter);
  right: 0;
}

.case-header-divider {
  width: 1px;
  background: transparent;
}

.case-menu-home,
.case-close {
  color: var(--text);
  text-decoration: none;
}

.case-menu-home {
  font-size: var(--type);
  line-height: 1.2;
}

.case-menu-arrow {
  display: inline-block;
  font-size: var(--small);
  line-height: 1;
  margin-right: 0.35em;
  vertical-align: 0.2em;
}

.case-close {
  margin-left: auto;
}

.case-layout {
  position: absolute;
  inset: 0;
  min-width: 0;
}

.case-info {
  grid-column: 1;
  position: relative;
  height: 100%;
  border-right: 0;
  padding-right: var(--gutter);
}

.case-info::after {
  content: "";
  position: absolute;
  top: var(--header-row);
  right: -1px;
  bottom: 0;
  width: 1px;
  background: var(--line);
  pointer-events: none;
}

.case-info-scroll {
  padding-top: calc(var(--header-row) + 40px);
}

.case-info-main {
  padding-bottom: 20px;
}

.case-media {
  grid-column: 3;
  /* Let scrolled media reach the very first pixel of the viewport.
     The initial composition is preserved by adding the page edge back
     into the top padding, but the scroll container itself extends 20px
     above the page shell. */
  margin-top: calc(-1 * var(--edge));
  height: calc(100% + var(--edge));
  padding-left: var(--gutter);
  padding-top: calc(var(--edge) + var(--header-row) + 40px);
}

/* Hide the old in-content top link if an older cached HTML still contains it. */
.case-home-top {
  display: none !important;
}

/* Shared optical treatment for directional arrows in navigation. */
.nav-arrow {
  display: inline-block;
  font-size: var(--small);
  line-height: 1;
  letter-spacing: -0.02em;
  position: relative;
  top: -2px;
}

.nav-arrow-left { margin-right: 0.35em; }
.nav-arrow-right { margin-left: 0.35em; }
.nav-arrow-up { margin-left: 0.28em; }

.footer-nav-link {
  font-size: var(--type);
  line-height: 1.2;
  color: var(--text);
  text-decoration: none;
}

.footer-nav-link:hover,
.footer-nav-link:focus-visible {
  color: var(--text);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Keep the existing Selected works arrow spacing while sharing the same vertical compensation. */
.works-arrows {
  top: -2px;
  position: relative;
}

/* Top-right case navigation now points to the next project. */
.case-next-project {
  margin-left: auto;
  color: var(--text);
  text-decoration: none;
  font-size: var(--type);
  line-height: 1.2;
}

.case-next-project:hover,
.case-next-project:focus-visible {
  color: var(--muted);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* The entire right-side bar follows scroll direction — top breathing room,
   background, labels and rule all move together. */
.case-header-right {
  transition: transform 240ms ease;
  will-change: transform;
}

.case-header-right.is-hidden {
  transform: translateY(calc(-1 * (var(--header-row) + var(--edge))));
  pointer-events: none;
}

/* Retire the old close-control selector without affecting cached markup. */
.case-close { display: none !important; }

/* Case: true 1px divider between the 2-column text area and 6-column media area. */
.case-layout::before {
  content: "";
  grid-column: 2;
  grid-row: 1;
  width: 1px;
  align-self: stretch;
  margin-top: var(--header-row);
  background: var(--line);
  pointer-events: none;
  z-index: 6;
}

/* Retire the older divider attached to the text column itself. */
.case-info::after {
  display: none;
}

/* Laptop / compact desktop: preserve the desktop composition, but tighten the system. */
@media (min-width: 1024px) and (max-width: 1279px) {
  :root {
    --edge: 14px;
    --gutter: 14px;
    --header-row: 36px;
    --type: 11pt;
    --small: 9pt;
  }

  /* Keep the role safely inside the first large column at narrower desktop widths. */
  .role-label {
    justify-self: end;
    text-align: right;
  }
}

/* Tablet / narrow desktop: turn the bio side into a single-flow 2-column area
   and give the works side the remaining 6 columns of the eight-column system. */
@media (max-width: 1023px) {
  :root {
    --edge: 14px;
    --gutter: 14px;
    --header-row: 36px;
    --type: 11pt;
    --small: 9pt;
  }

  .site-header,
  .site-main {
    grid-template-columns:
      minmax(0, calc(25% - 0.5px))
      1px
      minmax(0, calc(75% - 0.5px));
  }

  /* Header: one simple left area; role stays right aligned but becomes "Designer". */
  .site-header .header-left {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--gutter);
  }

  .role-label {
    grid-column: 2;
    justify-self: end;
    text-align: right;
  }

  .role-full { display: none; }
  .role-short { display: inline; }

  /* The works side now follows a six-column internal grid. */
  .header-right,
  .subgrid-5,
  .project {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .works-jump {
    grid-column: 2 / 5;
  }

  .gallery-link {
    grid-column: 6;
  }

  .project-meta {
    grid-column: 1;
  }

  .project-media {
    grid-column: 2 / 7;
  }

  /* Bio becomes a single linear column. */
  .bio-first-screen,
  .bio-longform {
    display: block;
  }

  .bio-first-screen {
    padding-top: 40px;
    padding-bottom: 14px;
  }

  .avatar-flip {
    width: 100%;
    max-width: none;
  }

  .bio-copy {
    width: 100%;
    max-width: none;
    margin-top: 20px;
  }

  .find-me {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--edge);
    margin-top: 0;
    width: 100%;
    text-align: left;
  }

  .bio-bottom-arrow {
    display: none;
  }

  .bio-longform {
    padding: 60px 0 80px;
  }

  .experience-block,
  .awards-block {
    display: block;
    width: 100%;
  }

  .awards-block {
    margin-top: 60px;
  }

  .experience-list,
  .awards-list {
    margin-top: 30px;
  }
}

/* Responsive gallery density: 3 columns below 1280, 2 below 1024. */
@media (max-width: 1279px) {
  .gallery-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .gallery-item {
    grid-column: span 2;
  }
}

@media (max-width: 1023px) {
  .gallery-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .gallery-item {
    grid-column: span 2;
  }

  /* On the 6-column works side, Selected works now aligns with the image edge. */
  .works-jump {
    grid-column: 1 / 5;
  }

  /* Project image takes the full six-column width. Text moves underneath. */
  .project {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    row-gap: var(--gutter);
  }

  .project-media {
    grid-column: 1 / 7;
    grid-row: 1;
  }

  .project-meta {
    grid-column: 1 / 7;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: var(--gutter);
    row-gap: 0;
    align-items: start;
  }

  .project-title {
    grid-column: 1 / 4;
    grid-row: 1;
  }

  .project-full-case {
    grid-column: 1 / 4;
    grid-row: 2;
    margin: 22px 0 0;
    padding-top: 0;
    align-self: start;
  }

  .project-description {
    grid-column: 4 / 7;
    grid-row: 1;
    margin: 0;
  }

  .project-small {
    grid-column: 4 / 7;
    grid-row: 2;
    margin: 22px 0 0;
  }
}


/* Mobile: keep only the works column and reduce the header to Isa / About / Gallery. */
@media (max-width: 767px) {
  :root {
    --edge: 14px;
    --gutter: 14px;
    --header-row: 36px;
    --type: 11pt;
    --small: 9pt;
  }

  .site-header,
  .site-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-header {
    display: grid;
    grid-template-columns: 1fr;
  }

  .header-left,
  .header-right {
    grid-column: 1;
    grid-row: 1;
    padding: 0;
    display: contents !important;
  }

  .site-header::after {
    content: \"\";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--line);
    pointer-events: none;
  }

  .header-left::after,
  .header-right::after,
  .site-header > .main-divider,
  .main-divider-body,
  .bio-panel,
  .role-label,
  .works-jump {
    display: none !important;
  }

  .home-link,
  .about-link,
  .gallery-link {
    display: block;
    position: absolute;
    top: 0;
    z-index: 2;
    white-space: nowrap;
  }

  .home-link { left: 0; }
  .about-link {
    left: 50%;
    transform: translateX(-50%);
    text-decoration: none;
  }
  .gallery-link { right: 0; }

  .home-name-full { display: none; }
  .home-name-short { display: inline; }

  .works-panel {
    grid-column: 1;
  }

  .works-scroll {
    padding-left: 0;
  }

  .gallery-overlay {
    left: var(--edge);
    right: var(--edge);
  }

  body.gallery-open .about-link {
    visibility: hidden;
  }
}

/* Standalone About page: the desktop bio content expands to the full viewport width. */
.about-body {
  overflow: hidden;
}

.about-page-shell {
  position: fixed;
  top: var(--edge);
  right: var(--edge);
  bottom: 0;
  left: var(--edge);
}

.about-header {
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--header-row);
  border-bottom: 1px solid var(--line);
  z-index: 10;
}

.about-header .home-link {
  position: absolute;
  left: 0;
  top: 0;
}

.about-header .about-current {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

.about-header .gallery-link {
  position: absolute;
  right: 0;
  top: 0;
}

.about-page-content {
  position: absolute;
  inset: var(--header-row) 0 0;
  overflow-y: auto;
  scrollbar-width: none;
}
.about-page-content::-webkit-scrollbar { display: none; }

.about-page-content .bio-first-screen {
  min-height: 100%;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  column-gap: var(--gutter);
}

.about-page-content .avatar-flip {
  grid-column: 1 / span 2;
}

.about-page-content .bio-copy {
  grid-column: 1 / span 6;
  width: 100%;
  max-width: none;
}

.about-page-content .find-me {
  left: calc(50% + (var(--gutter) / 2));
}

.about-page-content .bio-longform {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gutter);
}

@media (max-width: 767px) {
  .about-header .home-name-full { display: none; }
  .about-header .home-name-short { display: inline; }

  .about-page-content .bio-first-screen {
    display: block;
    min-height: 100%;
    padding-top: 40px;
  }

  .about-page-content .avatar-flip {
    width: 38%;
  }

  .about-page-content .bio-copy {
    width: 100%;
    max-width: none;
  }

  .about-page-content .find-me {
    left: 0;
    right: 0;
    bottom: var(--edge);
  }

  .about-page-content .bio-longform {
    display: block;
  }

  .about-page-content .awards-block {
    margin-top: 60px;
  }
}

/* Mobile case composition */
.case-name-mobile,
.case-mobile-close,
.case-mobile-heading,
.case-mobile-details,
.case-mobile-next {
  display: none;
}

@media (max-width: 767px) {
  /* Home: collapse completely to works. */
  .page-shell {
    left: var(--edge);
    right: var(--edge);
  }

  .site-main {
    display: block;
  }

  .bio-panel,
  .main-divider-body {
    display: none !important;
  }

  .works-panel {
    width: 100%;
    height: 100%;
  }

  .works-scroll {
    padding-right: 0;
  }

  /* Case: one continuous mobile column. */
  .case-page-shell {
    top: var(--edge);
    left: var(--edge);
    right: var(--edge);
    bottom: 0;
  }

  .case-header {
    display: block;
    height: var(--header-row);
    border-bottom: 1px solid var(--line);
  }

  .case-header-left {
    position: absolute;
    inset: 0;
    padding: 0;
  }

  .case-header-left::after,
  .case-header-right,
  .case-header-divider {
    display: none !important;
  }

  .case-name-full { display: none; }
  .case-name-mobile { display: inline; }

  .case-mobile-close {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 20;
    color: var(--ink);
    text-decoration: none;
  }

  .case-layout {
    display: block;
    position: absolute;
    inset: var(--header-row) 0 0;
  }

  .case-info,
  .case-layout::before {
    display: none !important;
  }

  .case-media {
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 40px 0 0;
    overflow-y: auto;
  }

  .case-mobile-heading {
    display: block;
    margin: 0 0 40px;
  }

  .case-mobile-heading h1,
  .case-mobile-heading p {
    margin: 0;
    font-size: var(--type);
    line-height: 1.2;
    font-weight: 400;
  }

  .case-mobile-heading p {
    color: var(--muted);
  }

  .case-media-row {
    gap: var(--gutter);
  }

  .case-mobile-details {
    display: block;
    margin-top: 60px;
  }

  .case-mobile-details .case-description,
  .case-mobile-credits {
    font-size: var(--small);
    line-height: 1.2;
  }

  .case-mobile-credits {
    margin-top: 60px;
    color: var(--muted);
  }

  .case-footer {
    margin-top: 60px;
    padding-bottom: var(--edge);
  }

  .case-back-top { display: none; }
  .case-mobile-next { display: inline; }
}

/* ------------------------------------------------------------
   MOBILE REFINEMENTS + ABOUT LINEAR LAYOUT
   ------------------------------------------------------------ */

/* About becomes one continuous full-width editorial column. */
.about-page-content.about-linear {
  padding: 0;
}

.about-linear .about-section {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 40px 0 60px;
  border-top: 1px solid var(--line);
}

.about-linear .about-portrait-section {
  border-top: 0;
  padding-top: 28px;
  padding-bottom: 0;
}

.about-linear .about-portrait-section .avatar-flip {
  width: 100%;
  max-width: none;
  aspect-ratio: 1000 / 1184;
}

.about-linear .about-bio-section .bio-copy {
  position: static;
  width: 75%;
  max-width: 75%;
  margin: 0;
}

.about-linear .experience-block,
.about-linear .awards-block {
  display: block;
  width: 100%;
}

.about-linear .experience-list,
.about-linear .awards-list {
  margin-top: 40px;
}

.about-linear .about-find-section {
  padding-bottom: var(--edge);
}

.about-linear .about-find-section .find-me {
  position: static;
  width: 100%;
  margin: 0;
  text-align: left;
}

@media (max-width: 767px) {
  /* Keep a clear rule directly under the mobile navigation. */
  .site-header,
  .case-header,
  .about-header {
    border-bottom: 1px solid var(--line);
  }

  /* Avoid a doubled home rule: the explicit mobile border owns it. */
  .site-header::after {
    display: none;
  }

  /* Mobile content starts 28px after the menu instead of 40px. */
  #project-list {
    padding-top: 28px;
  }

  .case-media {
    padding-top: 28px;
  }

  .about-linear .about-section {
    padding-top: 28px;
    padding-bottom: 40px;
  }

  .about-linear .about-portrait-section {
    padding-top: 28px;
    padding-bottom: 0;
  }

  .about-linear .about-bio-section .bio-copy {
    width: 100%;
    max-width: none;
  }

  .about-linear .experience-list,
  .about-linear .awards-list {
    margin-top: 28px;
  }

  .about-linear .about-find-section {
    padding-bottom: var(--edge);
  }
}

/* Mobile navigation refinement: keep the full Isa Ramos name and use the same
   three-item navigation on Home, About and Case. */
@media (max-width: 767px) {
  .home-name-short,
  .case-name-mobile {
    white-space: nowrap;
  }

  .case-mobile-close {
    display: none !important;
  }

  .case-mobile-about,
  .case-mobile-gallery {
    display: block;
    position: absolute;
    top: 0;
    z-index: 20;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
  }

  .case-mobile-about {
    left: 50%;
    transform: translateX(-50%);
  }

  .case-mobile-gallery {
    right: 0;
  }
}

/* ------------------------------------------------------------
   MOBILE 2026-09-06 — swipe carousel, gallery spacing, about portrait
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  :root {
    /* Restore the desktop reading sizes on phones. */
    --type: 13pt;
    --small: 10pt;
  }

  /* Mobile project carousel: horizontal native touch scrolling with a visible
     preview of the neighbouring slide. Desktop prev/next behaviour is untouched. */
  .project-media {
    aspect-ratio: auto;
    overflow: visible;
    background: transparent;
  }

  .media-stack {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    display: flex;
    gap: var(--gutter);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
  }

  .media-stack::-webkit-scrollbar {
    display: none;
  }

  .media-stack > * {
    position: relative;
    inset: auto;
    flex: 0 0 88%;
    width: 88%;
    height: auto;
    aspect-ratio: 16 / 9;
    scroll-snap-align: start;
    opacity: 1 !important;
    transition: none;
    object-fit: contain;
    object-position: center;
    background: #efefe9;
  }

  /* Touch owns navigation here, so the desktop hover/click zones disappear. */
  .project-media .carousel-zone {
    display: none !important;
  }

  /* Gallery should start at the same 28px offset as the Home content. */
  .gallery-grid {
    padding-top: 28px;
  }

  /* About portrait: centered at 70% of the viewport content width. */
  .about-linear .about-portrait-section .avatar-flip,
  .about-page-content .avatar-flip {
    width: 70%;
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
  }

  /* On touch devices, flipping is explicit by tap rather than hover. */
  .about-linear .avatar-flip:hover .avatar-flip-inner,
  .about-page-content .avatar-flip:hover .avatar-flip-inner {
    transform: none;
  }

  .about-linear .avatar-flip.is-flipped .avatar-flip-inner,
  .about-page-content .avatar-flip.is-flipped .avatar-flip-inner {
    transform: rotateY(180deg);
  }
}

/* ------------------------------------------------------------
   MOBILE STABILITY + FULL-BLEED SWIPE CAROUSELS
   ------------------------------------------------------------ */

/* Mobile-only case navigation must never leak into tablet/desktop after a
   live browser resize. Keeping this default outside media queries prevents
   stale display state from surfacing beside the media column. */
.case-mobile-about,
.case-mobile-gallery {
  display: none;
}

@media (max-width: 767px) {
  /* Restore the mobile-only case items only inside the phone breakpoint. */
  .case-mobile-about,
  .case-mobile-gallery {
    display: block;
  }

  /* About and Case use the regular reading size everywhere on mobile,
     including content that is intentionally muted. */
  .about-body .experience-list,
  .about-body .awards-list,
  .about-body .find-me,
  .case-body .case-description,
  .case-body .case-credits,
  .case-body .case-mobile-details .case-description,
  .case-body .case-mobile-credits {
    font-size: var(--type);
    line-height: 1.2;
  }

  /* Break the carousel out of the 14px page shell so the swipe surface
     reaches both physical edges of the viewport. Text below remains aligned
     to the normal content margin. */
  .project-media {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-1 * var(--edge));
  }

  .media-stack {
    width: 100vw;
    scroll-padding-left: 0;
  }

  .media-stack > * {
    flex-basis: 88vw;
    width: 88vw;
    cursor: none !important;
  }
}

/* ------------------------------------------------------------
   MOBILE FIXES — solid case header, true full-bleed carousels,
   balanced About portrait spacing
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  /* Case header must behave as one opaque bar: background, navigation and
     bottom rule move/read as a single surface above the scrolling media. */
  .case-header {
    background: var(--bg);
    z-index: 100;
    isolation: isolate;
  }

  .case-header-left,
  .case-mobile-about,
  .case-mobile-gallery {
    z-index: 101;
  }

  /* Let the works scroller itself use the complete viewport width. The
     editorial 14px inset is re-applied only to text/content containers, so
     project media can genuinely touch both physical screen edges. */
  .works-panel {
    width: calc(100% + (2 * var(--edge)));
    margin-left: calc(-1 * var(--edge));
    overflow: hidden;
  }

  .works-scroll {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  #project-list,
  .works-footer {
    padding-left: var(--edge);
    padding-right: var(--edge);
  }

  /* Full-bleed media independent of the text inset around each project. */
  .project-media {
    width: 100vw;
    max-width: none;
    margin-left: calc(-1 * var(--edge));
  }

  .media-stack {
    width: 100vw;
  }

  /* Equal breathing room above and below Isa's portrait on About. */
  .about-linear .about-portrait-section {
    padding-top: 28px;
    padding-bottom: 28px;
  }
}

/* ------------------------------------------------------------
   MOBILE CAROUSEL END CTA + GALLERY COVERAGE
   ------------------------------------------------------------ */
.mobile-case-cta {
  display: none;
}

@media (max-width: 767px) {
  /* Make each image a touch larger, leaving a slimmer glimpse of the next one. */
  .media-stack > img,
  .media-stack > video {
    flex: 0 0 92vw;
    width: 92vw;
  }

  /* A final mobile slide with a larger lime mass echoes the desktop + cursor. */
  .media-stack > .mobile-case-cta {
    position: relative;
    inset: auto;
    display: flex;
    flex: 0 0 42vw;
    width: 42vw;
    height: auto;
    aspect-ratio: 16 / 9;
    align-items: center;
    justify-content: center;
    scroll-snap-align: start;
    opacity: 1 !important;
    background: transparent;
    text-decoration: none !important;
  }

  .mobile-case-cta-circle {
    position: relative;
    display: block;
    width: clamp(92px, 28vw, 124px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--lime);
  }

  .mobile-case-cta-plus::before,
  .mobile-case-cta-plus::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30%;
    height: 1px;
    background: var(--text);
    transform: translate(-50%, -50%);
  }

  .mobile-case-cta-plus::after {
    transform: translate(-50%, -50%) rotate(90deg);
  }

  /* Gallery must fully cover the underlying full-bleed carousel, including the
     14px page-shell edges. Keep its own grid inset editorially by 14px. */
  .gallery-overlay {
    left: 0;
    right: 0;
  }

  .gallery-grid {
    padding-left: var(--edge);
    padding-right: var(--edge);
  }

  /* About remains part of the three-item mobile navigation while Gallery is open. */
  body.gallery-open .about-link {
    visibility: visible !important;
  }
}


/* FINAL TYPOGRAPHY / ABOUT CURSOR FIXES */
/* HAL Colant-Regular has no bold face: prevent Safari from synthesizing one. */
html, body, body *, strong, b, h1, h2, h3, h4, h5, h6 {
  font-weight: 400 !important;
  font-synthesis: none;
}

/* About keeps the same custom lime cursor at every responsive width.
   Real touch-only devices simply never emit mouse movement, so this does not interfere with taps. */
.about-body,
.about-body * {
  cursor: none !important;
}
.about-body .custom-cursor {
  display: block !important;
}
.about-body .about-trail-canvas {
  z-index: 0;
}
.about-body .about-page-shell {
  position: relative;
  z-index: 1;
}
.about-body .custom-cursor {
  z-index: 1000;
}

/* ABOUT VISIBILITY FIX — keep the shell fixed/full-height above the trail canvas. */
.about-body .about-page-shell {
  position: fixed !important;
  top: var(--edge);
  right: var(--edge);
  bottom: 0;
  left: var(--edge);
  z-index: 1;
}

.about-body .about-trail-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Cases awaiting media: preserve the established layout without inventing imagery. */
.project-media.is-placeholder {
  background: #efefe9;
}
.project-media.is-placeholder .placeholder-link {
  left: 0;
  width: 100%;
}
.case-media.case-media-pending {
  min-height: 100%;
}
@media (max-width: 767px) {
  .project-media.is-placeholder {
    min-height: 52vw;
    background: #efefe9;
    margin-left: 0;
    width: 100%;
    max-width: 100%;
  }
  .project-media.is-placeholder .media-stack { display: none; }
  .project-media.is-placeholder .carousel-zone.center { display: block !important; left: 0; width: 100%; }
  .case-media.case-media-pending { padding-top: 40px; }
}

/* Mobile: projects with a single media item should read as a static hero,
   centered and using the full available carousel width. */
@media (max-width: 767px) {
  .project-media.is-single .media-stack {
    justify-content: center;
    overflow-x: hidden;
    gap: 0;
  }

  .project-media.is-single .media-stack > img,
  .project-media.is-single .media-stack > video {
    flex: 0 0 100vw;
    width: 100vw;
    max-width: 100vw;
    scroll-snap-align: center;
  }

  .project-media.is-single .mobile-case-cta {
    display: none !important;
  }
}

/* Coming-soon home project: visible but intentionally not navigable. */
.project-media.is-coming-soon .carousel-zone.center { left: 0; width: 100%; }
.project-media.is-coming-soon .carousel-zone.prev,
.project-media.is-coming-soon .carousel-zone.next { display: none; }
.custom-cursor.is-soon {
  width: auto;
  height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  background: #ff6eff;
  color: #000;
  font-family: "HAL Colant", Arial, sans-serif;
  font-size: 13px;
  white-space: nowrap;
}
.custom-cursor.is-soon::before,
.custom-cursor.is-soon::after { display: none; }
.project-media.is-crop-home .media-stack img,
.project-media.is-crop-home .media-stack video { object-fit: cover; }
@media (max-width: 767px) {
  .project-media.is-crop-home.is-single .media-stack > img,
  .project-media.is-crop-home.is-single .media-stack > video { object-fit: cover; }
}