* { box-sizing: border-box; }

html, body { min-height: 100%; margin: 0; }

body {
  background: #fff;
  color: #000;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
}

.landing {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4.5rem, 10vh, 9rem);
  padding: 2rem;
  text-align: center;
}

.landing a {
  margin: 0;
  color: #000;
  font: 400 clamp(0.78rem, 1.65vw, 1.45rem)/1 Arial, Helvetica, sans-serif;
  letter-spacing: 0.95em;
  text-indent: 0.95em;
  text-decoration: none;
}

.landing a:hover,
.landing a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.35em;
}

.site-name {
  position: absolute;
  top: 2rem;
  left: 2rem;
  color: #000;
  font: 400 0.82rem/1 Arial, Helvetica, sans-serif !important;
  letter-spacing: 0.95em !important;
  text-indent: 0.95em !important;
}

.page {
  min-height: 100vh;
  padding: 2rem;
  background: #fff;
  color: #000;
  font: 400 1rem/1.35 Arial, Helvetica, sans-serif;
}

.page-nav {
  display: block;
  width: max-content;
  color: #000;
  font-size: 0.72rem;
  letter-spacing: 0.95em;
  text-indent: 0.95em;
  text-decoration: none;
}

.page-nav:hover,
.page-nav:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.35em;
}

.page-content {
  width: min(100%, 900px);
  margin: 22vh auto 0;
}

/* Equal space from the name link to Works and from Works to the page bottom. */
.works-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-block: 2rem 0;
}

.works-page > .page-nav {
  flex-shrink: 0;
}

.works-page > .page-content {
  flex-shrink: 0;
  margin: auto;
}

.works-page .work-list li:last-child {
  padding-bottom: 0;
}

.page-content h1 {
  margin: 0 0 4rem;
  font: 400 clamp(0.8rem, 1.6vw, 1.35rem)/1 Arial, Helvetica, sans-serif;
  letter-spacing: 0.95em;
  text-indent: 0;
}

.page-content p,
.page-content a,
.work-list a {
  font: 400 clamp(0.66rem, 0.82vw, 0.78rem)/1.5 Arial, Helvetica, sans-serif;
}

.page-content p { max-width: 580px; margin: 0 0 1.5rem; }

.work-list { margin: 0; padding: 0; list-style: none; }
.work-list li { padding: 1.8rem 0; }
.work-list a {
  color: #000;
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
  padding: 1.05rem 1.5rem;
  margin: -1.05rem -1.5rem;
  border: 0;
  border-radius: 1.2rem;
  transition: box-shadow 180ms ease;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  letter-spacing: 0.590em;
  white-space: nowrap;
}
.work-list a:hover,
.work-list a:focus-visible,
.contact-link:hover,
.contact-link:focus-visible { text-decoration: none; }

.work-list a:hover,
.work-list a:focus-visible {
  background: #fff;
  box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.16), -8px -8px 18px rgba(255, 255, 255, 0.98), inset 2px 2px 6px rgba(255, 255, 255, 0.9), inset -2px -2px 6px rgba(0, 0, 0, 0.05);
}

.work-list a:hover span,
.work-list a:focus-visible span {
  text-shadow: -0.8px -0.8px 0 rgba(255, 255, 255, 0.95), 0.9px 0.9px 0 rgba(120, 120, 120, 0.45), 1.5px 1.5px 2px rgba(0, 0, 0, 0.16);
}

/* Keep the relief on the lettering only; the button surface stays flat. */
.work-list li a:hover,
.work-list li a:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
}

.work-list a:hover,
.work-list a:focus-visible {
  text-decoration: none;
}

.work-list a:hover > .link-label,
.work-list a:focus-visible > .link-label {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.work-list a:hover span,
.work-list a:focus-visible span {
  text-shadow: none;
}


/* Visual comparison: two embossed variants and one debossed variant. */
.work-list li:nth-child(1) a:hover,
.work-list li:nth-child(1) a:focus-visible {
  box-shadow: 14px 14px 26px rgba(0, 0, 0, 0.24), -14px -14px 26px rgba(255, 255, 255, 0.98), inset 3px 3px 7px rgba(255, 255, 255, 0.95), inset -4px -4px 8px rgba(0, 0, 0, 0.12);
}

.work-list li:nth-child(2) a:hover,
.work-list li:nth-child(2) a:focus-visible {
  box-shadow: 8px 8px 12px rgba(0, 0, 0, 0.2), -8px -8px 12px rgba(255, 255, 255, 0.98), inset 1px 1px 3px rgba(255, 255, 255, 0.95), inset -5px -5px 10px rgba(0, 0, 0, 0.13);
}

.work-list li:nth-child(3) a:hover,
.work-list li:nth-child(3) a:focus-visible {
  box-shadow: inset 5px 5px 11px rgba(0, 0, 0, 0.16), inset -5px -5px 11px rgba(255, 255, 255, 0.98), 2px 2px 5px rgba(255, 255, 255, 0.8);
}

.contact-link { color: #000; font-size: clamp(1rem, 1.8vw, 1.4rem) !important; }

.collection-page {
  min-height: 100vh;
  padding: 2rem clamp(1rem, 3vw, 3rem) 6rem;
  background: #fff;
  color: #000;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
}

.collection-cover {
  padding: clamp(5rem, 8vw, 7rem) 0 0;
  display: grid;
  place-items: center;
}

.collection-title {
  display: grid;
  justify-items: center;
  gap: clamp(2.5rem, 7vh, 5.5rem);
  text-align: center;
}

.collection-title h1,
.collection-title p,
.collection-title span {
  margin: 0;
  font: 400 clamp(0.62rem, 1vw, 0.88rem)/1 Arial, Helvetica, sans-serif;
  letter-spacing: 0.68em;
  text-indent: 0.68em;
}

.collection-title span {
  font-size: clamp(0.75rem, 1.1vw, 1rem);
  letter-spacing: 0;
  text-indent: 0;
}

.collection-title .title-separator {
  font-size: 0.62em;
  letter-spacing: 0;
}


.collection-title p {
  font-size: clamp(0.48rem, 0.63vw, 0.66rem);
}

.collection-title h1 {
  font-size: clamp(0.48rem, 0.63vw, 0.66rem);
}

.collection-statement {
  width: 90%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(3rem, 8vw, 9rem) clamp(2rem, 4vw, 5rem);
  margin: 5rem auto 0;
  padding: 5rem 0 0;
}

.collection-statement p {
  max-width: none;
  margin: 0;
  font: 400 clamp(0.56rem, 0.72vw, 0.68rem)/1.5 Arial, Helvetica, sans-serif;
  letter-spacing: 0.59em;
  text-indent: 0;
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

.collection-statement em { font-style: normal; }

.full-collection {
  width: min(100%, 1560px);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.42rem;
  margin: clamp(5rem, 8vw, 7rem) auto 0;
}

.full-collection img {
  width: 100%;
  height: auto;
  display: block;
  background: #eee;
}

.lookbook {
  width: min(100%, 1400px);
  margin: 10rem auto 0;
}

/* Give laptop screens more breathing room around the photographs. */
@media (min-width: 761px) and (max-width: 1600px) {
  .full-collection { width: min(94%, 1260px); margin-top: 4rem; }
  .lookbook { width: min(86%, 1100px); margin-top: 7rem; }
  .collection-cover { padding-top: 4rem; }
  .collection-title { gap: 2rem; }
}

.look { margin-top: 9rem; }
.look:first-child { margin-top: 0; }

.look-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 0 0.55rem;
  font: 400 clamp(0.48rem, 0.63vw, 0.66rem)/1 Arial, Helvetica, sans-serif;
  letter-spacing: 0.59em;
}

.look-meta span:last-child { text-align: right; }

.look-grid {
  contain: layout paint;
  content-visibility: auto;
  contain-intrinsic-block-size: auto var(--look-grid-height, 900px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.42rem;
  margin-top: 0.42rem;
}

.lineup-button {
  display: block;
  min-width: 0;
  overflow: visible;
}

.lineup-button img {
  transition: transform 180ms ease;
  transform-origin: center;
}

.lineup-button:hover img,
.lineup-button:focus-visible img {
  transform: scale(1.05);
}

.lineup-button:focus-visible {
  outline: 1px solid #000;
  outline-offset: 3px;
}


.look-grid img {
  width: 100%;
  height: auto;
  display: block;
  background: #eee;
  cursor: pointer;
}

.look-grid img:focus-visible {
  outline: 1px solid #000;
  outline-offset: 3px;
}

.image-lightbox {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: clamp(3.5rem, 7vw, 6rem) clamp(1rem, 4vw, 4rem);
  border: 0;
  background: rgba(255, 255, 255, 0.98);
}

.image-lightbox::backdrop { background: rgba(0, 0, 0, 0.5); }

.lightbox-stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  touch-action: none;
  scrollbar-width: none;
}

.lightbox-stage::-webkit-scrollbar { display: none; width: 0; height: 0; }

.lightbox-stage img {
  cursor: zoom-in;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
}

.lightbox-stage.is-zoomed {
  align-items: flex-start;
  justify-content: flex-start;
  cursor: grab;
}

.lightbox-stage.is-zoomed img {
  max-width: none;
  max-height: none;
  cursor: grab;
}

.lightbox-stage.is-dragging,
.lightbox-stage.is-dragging img { cursor: grabbing; }

.lightbox-zoom,
.lightbox-close {
  position: absolute;
  top: 1.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: #000;
  font: 400 0.62rem/1 Arial, Helvetica, sans-serif;
  letter-spacing: 0.35em;
  cursor: pointer;
}

.lightbox-zoom { left: 1.5rem; }

.lightbox-zoom:focus-visible,
.lightbox-close:focus-visible {
  outline: 1px solid #000;
  outline-offset: 3px;
}

.lightbox-close {
  right: 1.5rem;
}

@media (max-width: 640px) {
  .site-name { top: 1.25rem; left: 1.25rem; }
  .collection-page { padding: 1.25rem 0.75rem 4rem; }
  .collection-page .page-nav { margin-left: 0.5rem; }
  .collection-cover { padding-top: 20vh; }
  .collection-title { gap: 3.2rem; }
  .collection-title h1,
  .collection-title p { letter-spacing: 0.44em; text-indent: 0.44em; }
  .collection-statement { width: 100%; grid-template-columns: 1fr; gap: 2.5rem; margin-top: 2.5rem; padding: 3rem 0.5rem 0; }
  .full-collection {
    grid-template-columns: repeat(5, minmax(58vw, 260px));
    gap: 0.42rem;
    margin-top: 4rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .full-collection::-webkit-scrollbar { display: none; }
  .full-collection img { scroll-snap-align: start; }
  .lookbook { margin-top: 6rem; }
  .look { margin-top: 5rem; }
  .look-meta { gap: 0.5rem; letter-spacing: 0.59em; }
}

/* Each runway film follows its corresponding four-image look. */
.look-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin-top: 0.42rem;
  background: #eee;
  object-fit: contain;
}

.look-video:focus-visible {
  outline: 1px solid #000;
  outline-offset: 3px;
}

.collection-footer {
  padding: 0 1.25rem 2rem;
  text-align: center;
  font: 400 0.72rem/1.5 Arial, Helvetica, sans-serif;
  letter-spacing: 0.2em;
}

.collection-credits { margin: 0 auto 3rem; max-width: 52rem; }
.credits-group + .credits-group { margin-top: 2rem; }
.credits-group h2 { margin: 0 0 1rem; font: inherit; letter-spacing: inherit; }
.credits-group p { margin: 0.35rem 0; }
.collection-copyright { margin: 0; }

.look-process-trigger {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #000;
  cursor: pointer;
}
.look-process-label {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 1rem);
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.6);
  color: rgba(0, 0, 0, 0.7);
  font: 400 clamp(0.56rem, 0.76vw, 0.72rem)/1.5 Arial, Helvetica, sans-serif;
  letter-spacing: 0.35em;
  opacity: 0;
  transition: opacity 160ms ease;
  pointer-events: none;
}
.look-process-trigger:hover .look-process-label,
.look-process-trigger:focus-visible .look-process-label { opacity: 1; }
.look-process-trigger:focus-visible { outline: 1px solid #000; outline-offset: 3px; }
.process-title {
  margin: 0 0 1rem;
  font: 400 0.75rem/1.5 Arial, Helvetica, sans-serif;
  letter-spacing: 0.35em;
  text-align: center;
}
.image-lightbox { height: 100dvh; }
.process-layout { height: calc(100% - 2.125rem); min-height: 0; }
.process-layout.has-process-videos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.42rem;
}
.process-layout .lightbox-stage { min-width: 0; min-height: 0; }
.lightbox-photo { position: relative; min-width: 0; min-height: 0; height: 100%; }
.look-angle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: 30px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.3);
  color: #fff;
  font: 400 30px/1 Arial, Helvetica, sans-serif;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.look-angle-prev { left: 0.5rem; }
.look-angle-next { right: 0.5rem; }
.look-angle:hover { background: rgba(255, 255, 255, 0.5); }
.look-angle:focus-visible { outline: 1px solid #000; outline-offset: 3px; }
.lightbox-stage img { flex-shrink: 0; }
.process-videos:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  height: 100%;
  min-width: 0;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 0.42rem;
  min-height: 0;
}
.process-videos video { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; object-fit: cover; }
@media (hover: none) { .look-process-label { opacity: 1; } }
@media (max-width: 640px) {
  .look-process-label { bottom: 0.5rem; padding: 0.5rem; letter-spacing: 0.15em; }
}
@media (prefers-reduced-motion: reduce) { .look-process-label { transition: none; } }

.clo3d-content { width: min(92%, 1500px); display: grid; grid-template-columns: minmax(180px, 0.7fr) minmax(0, 2fr); gap: clamp(2rem, 6vw, 7rem); align-items: center; margin: clamp(3rem, 5vw, 5rem) auto 0; }
.clo3d-grid { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.25rem, 3vw, 3rem); align-items: start; margin: 0; }
.clo3d-image-button { padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.clo3d-image-button img { width: 100%; height: auto; display: block; }
.clo3d-image-button:nth-child(2) { display: flex; justify-content: center; margin-top: clamp(1rem, 3vw, 3rem); }
.clo3d-image-button:nth-child(2) img { object-fit: contain; object-position: center; }
.clo3d-image-button:focus-visible { outline: 1px solid #000; outline-offset: 4px; }
.clo3d-statement { width: 100%; display: block; margin: 0; padding: 0; }
.clo3d-statement h2 { margin: 0 0 2rem; font: 400 clamp(0.56rem, 0.72vw, 0.68rem)/1.5 Arial, Helvetica, sans-serif; letter-spacing: 0.59em; text-transform: uppercase; }
.clo3d-lightbox .lightbox-stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ursuit-project { margin-top: clamp(3rem, 5vw, 5rem); }
.ursuit-copy { width: min(90%, 1200px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 4rem; margin: clamp(4rem, 8vw, 8rem) auto 0; text-align: left; }
.ursuit-copy p { margin: 0; font: 400 clamp(0.56rem, 0.72vw, 0.68rem)/1.5 Arial, Helvetica, sans-serif; letter-spacing: 0.59em; }
.ursuit-intro { width: min(92%, 1200px); margin: 0 auto 2rem; text-align: center; }
.ursuit-intro h2 { margin: 0 0 1rem; font: 400 clamp(0.62rem, 1vw, 0.88rem)/1 Arial, Helvetica, sans-serif; letter-spacing: 0.68em; text-transform: uppercase; }
.ursuit-intro p { max-width: 34rem; margin: 0 auto; font: 400 clamp(0.56rem, 0.72vw, 0.68rem)/1.5 Arial, Helvetica, sans-serif; letter-spacing: 0.59em; }
.ursuit-gallery { width: min(92%, 1200px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 0.42rem; row-gap: clamp(1.5rem, 3vw, 3rem); margin: 0 auto; }
.ursuit-gallery img { width: 100%; height: auto; display: block; }
.ursuit-gallery img:first-child { grid-column: auto; }
@media (max-width: 640px) {
  .clo3d-content { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 2.5rem; margin-top: 3rem; }
  .clo3d-grid { grid-template-columns: 1fr; gap: 0.8rem; width: 100%; margin: 0; order: 1; }
  .clo3d-image-button:nth-child(2) { margin-top: 0; }
  .clo3d-statement { order: 2; }
  .ursuit-project { margin-top: 4rem; }
  .ursuit-copy { width: 100%; grid-template-columns: 1fr; gap: 2rem; }
  .ursuit-intro { width: 100%; margin-bottom: 1.5rem; }
  .ursuit-gallery { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ursuit-gallery img:first-child { grid-column: auto; }
  .clo3d-statement { grid-template-columns: 1fr; }
}

/* Equal-width still / video columns; three videos share the still height. */
.image-lightbox {
  padding: 4rem clamp(1rem, 3vw, 3rem) 3rem;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.process-layout { margin: 0 auto; max-width: 100%; }
.process-layout.has-process-videos { grid-template-rows: minmax(0, 1fr); }
.process-layout.has-process-videos .lightbox-stage { background: #eee; }
.process-videos video { background: #eee; }
@media (max-width: 640px) {
  .image-lightbox { padding: 4rem 0.75rem 2rem; }
}

/* Two simultaneous patternmaking clips within the middle media slot. */
.process-video-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.42rem; min-width: 0; min-height: 0; }
.process-video-pair video { min-width: 0; object-fit: contain; object-position: center; background: #fff; }

.process-video-alternating { min-width: 0; min-height: 0; overflow: hidden; }
.process-videos video[hidden] { display: none; }

/* Full-width detail and full-outfit films, stacked at the original size. */
.look-video-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.42rem;
  margin-top: 0.42rem;
}
.look-video-grid .look-video { margin-top: 0; min-width: 0; }

/* Keep the existing composition while making the dialog safe to operate by touch. */
.image-lightbox {
  padding-top: max(4rem, calc(env(safe-area-inset-top) + 3rem));
  padding-bottom: max(2rem, env(safe-area-inset-bottom));
}
.lightbox-close, .lightbox-zoom {
  position: fixed;
  top: max(0.5rem, env(safe-area-inset-top));
  min-height: 44px;
  min-width: 44px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.96);
}
.lightbox-close { right: max(0.75rem, env(safe-area-inset-right)); }
.lightbox-zoom { left: max(0.75rem, env(safe-area-inset-left)); }
.full-collection .lineup-button { scroll-snap-align: start; }
.page-nav, .site-name { max-width: calc(100% - 2.5rem); overflow-wrap: anywhere; }
.contact-link { overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
  .lineup-button img { transition: none; }
}

/* Keep tracking between letters, but end underlines at the final character.
   The label margin preserves the original link width and alignment. */
.landing a, .page-nav { --link-tracking: 0.95em; }
.work-list a { --link-tracking: 0.590em; }
.link-label { margin-right: var(--link-tracking, 0em); }
.link-last { letter-spacing: 0; }

.landing a:hover, .landing a:focus-visible,
.page-nav:hover, .page-nav:focus-visible,
.contact-link { text-decoration: none; }

.landing a:hover > .link-label,
.landing a:focus-visible > .link-label,
.page-nav:hover > .link-label,
.page-nav:focus-visible > .link-label {
  text-decoration: underline;
  text-underline-offset: 0.35em;
}
.contact-link > .link-label { text-decoration: underline; }
.contact-link:hover > .link-label,
.contact-link:focus-visible > .link-label { text-decoration: none; }

/* Main menu: draw the underline without the final tracking space. */
.landing a > .link-label {
  position: relative;
  display: inline-block;
  text-indent: 0;
  margin-right: 0;
}
.landing a:hover > .link-label,
.landing a:focus-visible > .link-label {
  text-decoration: none;
}
.landing a > .link-label::after {
  content: "";
  position: absolute;
  left: 0;
  right: var(--link-tracking);
  bottom: -0.35em;
  border-bottom: 1px solid currentColor;
  opacity: 0;
  pointer-events: none;
}
.landing a:hover > .link-label::after,
.landing a:focus-visible > .link-label::after {
  opacity: 1;
}

/* CV and contact share the portfolio's restrained typography and spacing. */
.cv-contact-content {
  width: min(100%, 1100px);
  margin: clamp(5rem, 14vh, 9rem) auto 5rem;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: start;
}
.cv-contact-content h1,
.contact-column > h2 {
  margin: 0 0 4rem;
  font: 400 clamp(0.8rem, 1.25vw, 1.1rem)/1.6 Arial, Helvetica, sans-serif;
  letter-spacing: 0.59em;
}
.cv-contact-content p,
.cv-contact-content .contact-link {
  margin: 0 0 0.65rem;
  font: 400 clamp(0.66rem, 0.82vw, 0.78rem)/1.8 Arial, Helvetica, sans-serif;
  letter-spacing: 0.16em;
}
.cv-contact-content .cv-name { margin-bottom: 3rem; letter-spacing: 0.35em; }
.cv-group + .cv-group { margin-top: 2.5rem; }
.cv-group h2 {
  margin: 0 0 1.25rem;
  font: 400 clamp(0.66rem, 0.82vw, 0.78rem)/1.6 Arial, Helvetica, sans-serif;
  letter-spacing: 0.35em;
}
.cv-entry {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 1rem;
}
.cv-contact-content .cv-date { letter-spacing: 0.08em; }
.contact-column address { font-style: normal; }
.contact-column address p { margin-bottom: 1.8rem; }
.cv-contact-content .contact-link {
  font-size: clamp(0.66rem, 0.82vw, 0.78rem) !important;
  --link-tracking: 0.16em;
}
@media (max-width: 760px) {
  .cv-contact-content { grid-template-columns: minmax(0, 1fr); gap: 4.5rem; margin-top: 5rem; }
  .cv-contact-content h1, .contact-column > h2 { margin-bottom: 2.5rem; }
}
@media (max-width: 420px) {
  .cv-entry { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
}

.cv-contact-content .cv-name { margin-bottom: 1.5rem; }
.cv-introduction { margin-bottom: 3rem; }
.cv-introduction p + p { margin-top: 1rem; }

/* CLO3D Look 02: lookbook on the left, pattern below the shell pattern. */
.clo3d-look-row { grid-column: 2; }
.clo3d-lookbook { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.42rem; min-width: 0; }
.clo3d-look-row .clo3d-image-button { margin-top: 0; }
@media (max-width: 640px) {
  .clo3d-look-row { order: 3; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
}

/* Match CLO3D image galleries to the page background. */
.clo3d-page .clo3d-grid,
.clo3d-page .clo3d-lookbook,
.clo3d-page .clo3d-image-button,
.clo3d-page .clo3d-image-button img,
.clo3d-lightbox,
.clo3d-lightbox .lightbox-stage { background: #fff; }

/* Reserve a toolbar row and fit the complete image in the remaining viewport. */
.clo3d-lightbox {
  height: 100vh;
  height: 100dvh;
  padding: max(0.5rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
  overflow: hidden;
  scrollbar-gutter: auto;
}
.clo3d-lightbox[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 1rem;
}
.clo3d-lightbox .lightbox-close {
  position: static;
  justify-self: end;
  cursor: pointer;
}
.clo3d-lightbox .lightbox-stage {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.clo3d-lightbox .lightbox-stage img {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  cursor: default;
}
.clo3d-page .clo3d-image-button { cursor: pointer; }

/* Give each CLO3D project room without changing the image grids. */
.clo3d-content { row-gap: clamp(5rem, 10vw, 10rem); }
@media (max-width: 640px) {
  .clo3d-content { row-gap: 2.5rem; }
  .clo3d-look-row { margin-top: 3rem; }
}

/* Shared centered lookbook crop; bottom anchoring keeps footwear visible. */
.full-collection .lineup-button,
.look-grid .look-process-trigger,
.clo3d-lookbook .clo3d-image-button {
  display: block;
  overflow: hidden;
  aspect-ratio: 3200 / 4266;
}
.full-collection .lineup-button img,
.look-grid .look-process-trigger img,
.clo3d-lookbook .clo3d-image-button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.15);
  transform-origin: center bottom;
}

/* Look 03 uses the shared 1.15 scale as the head-height reference, including
   the barefoot lineup image. All lineup crops stay fixed on hover. */

/* Match each photograph's headroom to the existing Look 03 front view. */
.full-collection .lineup-button img[src*="look-00-"],
.look-grid .look-process-trigger img[src*="look-00-"],
.clo3d-lookbook .clo3d-image-button img[src*="look-00-"] { transform: scale(1.080896); }
.look-grid .look-process-trigger img[src*="look-01-"],
.clo3d-lookbook .clo3d-image-button img[src*="look-01-"] { transform: scale(1.065196); }
.look-grid .look-process-trigger img[src*="look-02-"],
.clo3d-lookbook .clo3d-image-button img[src*="look-02-"] { transform: scale(1.073592); }
.look-grid .look-process-trigger img[src*="look-03-"],
.clo3d-lookbook .clo3d-image-button img[src*="look-03-"] { transform: scale(1.088299); }
.full-collection .lineup-button img[src*="look-04-"],
.look-grid .look-process-trigger img[src*="look-04-"],
.clo3d-lookbook .clo3d-image-button img[src*="look-04-"] { transform: scale(1.078450); }
.look-grid .look-process-trigger img[src*="look-05-"],
.clo3d-lookbook .clo3d-image-button img[src*="look-05-"] { transform: scale(1.077232); }
.look-grid .look-process-trigger img[src*="look-06-"],
.clo3d-lookbook .clo3d-image-button img[src*="look-06-"] { transform: scale(1.073592); }
.look-grid .look-process-trigger img[src*="look-07-"],
.clo3d-lookbook .clo3d-image-button img[src*="look-07-"] { transform: scale(1.102139); }
.full-collection .lineup-button img[src*="look-12-"],
.look-grid .look-process-trigger img[src*="look-12-"],
.clo3d-lookbook .clo3d-image-button img[src*="look-12-"] { transform: scale(1.121588); }
.look-grid .look-process-trigger img[src*="look-13-"],
.clo3d-lookbook .clo3d-image-button img[src*="look-13-"] { transform: scale(1.118955); }
.look-grid .look-process-trigger img[src*="look-14-"],
.clo3d-lookbook .clo3d-image-button img[src*="look-14-"] { transform: scale(1.118955); }
.look-grid .look-process-trigger img[src*="look-15-"],
.clo3d-lookbook .clo3d-image-button img[src*="look-15-"] { transform: scale(1.166891); }
.full-collection .lineup-button img[src*="look-16-"],
.look-grid .look-process-trigger img[src*="look-16-"],
.clo3d-lookbook .clo3d-image-button img[src*="look-16-"] { transform: scale(1.107259); }
.look-grid .look-process-trigger img[src*="look-17-"],
.clo3d-lookbook .clo3d-image-button img[src*="look-17-"] { transform: scale(1.100866); }
.look-grid .look-process-trigger img[src*="look-18-"],
.clo3d-lookbook .clo3d-image-button img[src*="look-18-"] { transform: scale(1.093291); }
.look-grid .look-process-trigger img[src*="look-19-"],
.clo3d-lookbook .clo3d-image-button img[src*="look-19-"] { transform: scale(1.104693); }

/* BA1 and BA2 portfolio spreads retain the original artwork and page order. */
.portfolio-content { width: min(92%, 1200px); margin: clamp(4rem, 7vw, 7rem) auto; }
.portfolio-header { margin-bottom: clamp(4rem, 8vw, 7rem); }
.portfolio-header h1 { max-width: 54rem; margin: 0 0 2rem; font: 400 clamp(0.8rem, 1.4vw, 1.1rem)/1.8 Arial, Helvetica, sans-serif; letter-spacing: 0.35em; }
.portfolio-header a { font-size: 0.65rem; letter-spacing: 0.2em; }
.portfolio-project + .portfolio-project { margin-top: clamp(5rem, 10vw, 10rem); }
.portfolio-project h2 { margin: 0 0 2rem; font: 400 clamp(0.7rem, 1vw, 0.9rem)/1.6 Arial, Helvetica, sans-serif; letter-spacing: 0.35em; }
.portfolio-spreads { display: grid; gap: clamp(1.5rem, 4vw, 4rem); }
.portfolio-spread { display: block; width: 100%; padding: 0; border: 0; background: #fff; cursor: pointer; }
.portfolio-spread img { display: block; width: 100%; height: auto; }
.portfolio-spread:focus-visible { outline: 1px solid #000; outline-offset: 5px; }
@media (max-width: 640px) { .portfolio-content { width: 100%; } }
.portfolio-header a { color: inherit; text-underline-offset: 0.25em; }

/* BA1: four independently expandable images in a 2-by-2 gallery. */
.portfolio-spreads-ba1 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.42rem, 1.5vw, 1.25rem); }
.portfolio-spreads-ba1 .portfolio-spread { min-width: 0; }

/* Smaller, centered BA2 gallery with full-content square compositions. */
.portfolio-spreads-ba2 { width: min(100%, 1000px); margin-inline: auto; }

/* Align BA2 section titles with their image grids. */
.ba2-section > h2 { width: min(100%, 1000px); margin-inline: auto; }

/* Align contact details with the heading at the right edge of the CV column. */
.cv-contact-page .contact-column { width: 100%; text-align: right; }
.cv-contact-page .contact-column > h2 { margin: 0 0 4rem; text-align: right; }
@media (max-width: 760px) { .cv-contact-page .contact-column > h2 { margin-bottom: 2.5rem; } }
.cv-contact-page .contact-column address { width: 100%; max-width: 100%; margin: 0; text-align: right; }
.cv-contact-page .contact-column address p:last-child { margin-bottom: 0; }
.cv-contact-page .contact-column .contact-link { overflow-wrap: anywhere; font-size: clamp(1rem, 1.22vw, 1.17rem) !important; }
.cv-contact-page .contact-link > .link-label { text-decoration: none; }
.cv-contact-page .contact-link:hover > .link-label,
.cv-contact-page .contact-link:focus-visible > .link-label {
  text-decoration: underline;
  text-underline-offset: 0.35em;
}

.cv-group .cv-entry + .cv-entry { margin-top: 1.75rem; }

/* Scale the opening lineup around its centre without changing the image crops. */
.collection-page .full-collection .lineup-button {
  position: relative;
  cursor: pointer;
  transition: transform 200ms ease;
  transform-origin: center center;
}
@media (hover: hover) and (pointer: fine) {
  .collection-page .full-collection .lineup-button:hover {
    transform: scale(1.025);
    z-index: 1;
  }
}
.collection-page .full-collection .lineup-button:focus-visible {
  transform: scale(1.025);
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .collection-page .full-collection .lineup-button { transition: none; }
  .collection-page .full-collection .lineup-button:hover,
  .collection-page .full-collection .lineup-button:focus-visible { transform: none; outline: 1px solid currentColor; outline-offset: 3px; }
}

.process-videos .process-research-image { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; object-position: center; background: #fff; }

/* Match BA thesis image menus and controls to the page white. */
.ba-thesis-page .image-lightbox,
.ba-thesis-page .image-lightbox::backdrop,
.ba-thesis-page .image-lightbox .lightbox-stage,
.ba-thesis-page .image-lightbox .lightbox-photo,
.ba-thesis-page .image-lightbox .process-videos,
.ba-thesis-page .image-lightbox .process-videos video,
.ba-thesis-page .image-lightbox .lightbox-zoom,
.ba-thesis-page .image-lightbox .lightbox-close,
.ba-thesis-page .full-collection img,
.ba-thesis-page .look-grid img { background: #fff; }

/* Clickable research references and their full portfolio spread. */
.ba-thesis-page .research-image-button { display: block; min-width: 0; min-height: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #fff; cursor: pointer; }
.ba-thesis-page .process-videos:has(> .research-image-button) { transition: transform 180ms ease; transform-origin: center; }
@media (hover: hover) and (pointer: fine) {
  .ba-thesis-page .process-videos:has(> .research-image-button):hover { transform: scale(1.025); }
}
.ba-thesis-page .research-image-button:focus-visible { outline: 1px solid #000; outline-offset: 2px; }
.ba-thesis-page .research-spread-dialog { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 4rem clamp(0.75rem, 2vw, 2rem) 1rem; border: 0; background: #fff; }
.ba-thesis-page .research-spread-dialog::backdrop { background: #fff; }
.ba-thesis-page .research-spread-stage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.ba-thesis-page .research-spread-stage img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ba-thesis-page .research-spread-close { position: absolute; top: max(0.5rem, env(safe-area-inset-top)); right: max(0.75rem, env(safe-area-inset-right)); min-height: 44px; padding: 0; border: 0; background: #fff; color: #000; font: 400 0.62rem/1 Arial, Helvetica, sans-serif; letter-spacing: 0.35em; cursor: pointer; }
.ba-thesis-page .research-spread-close:focus-visible { outline: 1px solid #000; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .ba-thesis-page .process-videos:has(> .research-image-button) { transition: none; }
  .ba-thesis-page .process-videos:has(> .research-image-button):hover { transform: none; }
}

/* Match the opening lookbook crop to its 2-by-2 thumbnail. */
.ba-thesis-page .image-lightbox .lightbox-stage:not(.is-zoomed) { overflow: hidden; }
.ba-thesis-page .image-lightbox .lightbox-stage:not(.is-zoomed) > img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  transform: var(--lookbook-crop, scale(1.15));
  transform-origin: var(--lookbook-crop-origin, center bottom);
}

/* Reserve the upper half for development images; videos occupy the lower half. */
.ba-thesis-page .process-videos.look-01-development .process-video-pair { grid-row: 2; height: 100%; overflow: hidden; }
.ba-thesis-page .process-videos.look-01-development video { object-fit: cover; }

.ba-thesis-page .development-prototype-images { grid-row: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.42rem; width: 100%; height: 100%; min-width: 0; min-height: 0; align-items: stretch; overflow: hidden; background: #fff; }
.ba-thesis-page .development-prototype-images img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; object-position: center top; }

/* Look 01 details: one preview button and a twelve-image expanded gallery. */
.ba-thesis-page .details-preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 0.42rem; min-width: 0; min-height: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #fff; cursor: pointer; transform-origin: center; transition: transform 180ms ease; }
.ba-thesis-page .detail-tile { display: block; position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #fff; }
.ba-thesis-page .detail-tile img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.ba-thesis-page .detail-tile[data-crop] img { object-fit: cover; transform: scale(2); transform-origin: 50% 38%; }
.ba-thesis-page .detail-tile[data-crop="front"] img { transform: scale(2.4); transform-origin: 50% 31%; }
.ba-thesis-page .detail-tile[data-crop="side"] img { transform: scale(2.2); transform-origin: 50% 45%; }
.ba-thesis-page .detail-tile[data-crop="fabric"] img { transform: scale(2.5); transform-origin: 50% 45%; }
@media (hover: hover) and (pointer: fine) { .ba-thesis-page .details-preview-grid:hover { transform: scale(1.025); } }
.ba-thesis-page .details-preview-grid:focus-visible { outline: 1px solid #000; outline-offset: 3px; }
.ba-thesis-page .details-gallery-dialog { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 4rem clamp(0.75rem, 2vw, 2rem) 1rem; border: 0; background: #fff; }
.ba-thesis-page .details-gallery-dialog[open] { display: flex; align-items: center; justify-content: center; }
.ba-thesis-page .details-gallery-dialog::backdrop { background: #fff; }
.ba-thesis-page .details-gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 0.42rem; width: min(100%, calc((100dvh - 5rem) * 1.414)); aspect-ratio: 1.414; max-height: 100%; }
.ba-thesis-page .details-gallery-close { position: absolute; top: max(0.5rem, env(safe-area-inset-top)); right: max(0.75rem, env(safe-area-inset-right)); min-height: 44px; padding: 0; border: 0; background: #fff; color: #000; font: 400 0.62rem/1 Arial, Helvetica, sans-serif; letter-spacing: 0.35em; cursor: pointer; }
.ba-thesis-page .details-gallery-close:focus-visible { outline: 1px solid #000; outline-offset: 3px; }
@media (max-width: 640px) { .ba-thesis-page .details-gallery-dialog[open] { align-items: flex-start; overflow-y: auto; } .ba-thesis-page .details-gallery-grid { width: 100%; max-height: none; aspect-ratio: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: auto; } .ba-thesis-page .details-gallery-grid .detail-tile { aspect-ratio: 3 / 4; } }
@media (prefers-reduced-motion: reduce) { .ba-thesis-page .details-preview-grid { transition: none; } .ba-thesis-page .details-preview-grid:hover { transform: none; } }

/* Close side detail above the side-view heels in the Details preview. */
.ba-thesis-page .details-preview-grid .detail-tile[data-crop="side"] img { transform: scale(3.2); transform-origin: 52% 43%; }

/* Centre the BA thesis lineup between the name link and introduction. */
:is(.ba-thesis-page, .ba2-page) .collection-page { --lineup-spacing: calc(5rem + clamp(2.5rem, 4vw, 3.5rem)); }
:is(.ba-thesis-page, .ba2-page) .full-collection { margin-top: var(--lineup-spacing); }
.ba-thesis-page .collection-statement { margin-top: var(--lineup-spacing); padding-top: 0; }
@media (min-width: 761px) and (max-width: 1600px) {
  :is(.ba-thesis-page, .ba2-page) .collection-page { --lineup-spacing: 7rem; }
}
@media (max-width: 640px) {
  :is(.ba-thesis-page, .ba2-page) .collection-page { --lineup-spacing: 4.75rem; }
}

/* Use Arial Regular consistently throughout the CV and contact page. */
.cv-contact-page,
.cv-contact-page * {
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-synthesis: none;
}
.cv-contact-page .contact-link > .link-label {
  text-decoration-thickness: 1px;
}

/* Align the final visible letters of the contact heading and links. */
.cv-contact-page .contact-column .contact-link > .link-label {
  margin-right: 0;
}

/* Render regular contact lettering with lighter macOS antialiasing. */
.cv-contact-page .contact-link,
.cv-contact-page .contact-link span {
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-stroke: 0;
  text-shadow: none;
}

/* Centre the contact block in the initial desktop viewport. */
@media (min-width: 761px) {
  .cv-contact-page { position: relative; }
  .cv-contact-page .cv-contact-content { position: relative; }
  .cv-contact-page .contact-column {
    position: absolute;
    right: 0;
    top: calc(50vh - 2rem - 0.972rem - clamp(5rem, 14vh, 9rem));
    width: calc((100% - clamp(3rem, 8vw, 8rem)) / 2.25);
    transform: translateY(-50%);
  }
}

/* Apply the development photo strip to each look with portfolio references. */
.ba-thesis-page .process-videos.look-development .development-prototype-images { grid-row: 1; }
.ba-thesis-page .process-videos.look-development .development-prototype-images img { object-fit: contain; }

/* Taller opening lineup, preserving the row width and image proportions. */
:is(.ba-thesis-page, .ba2-page) .collection-page .full-collection .lineup-button {
  aspect-ratio: 2 / 3;
}

/* Equal vertical space before and after the collection introduction. */
.ba-thesis-page .lookbook {
  margin-top: var(--lineup-spacing);
}

/* Look 02: page 9 left and page 10 right, with original architecture credits. */
.ba-thesis-page .research-spread-stage.research-reference-panels {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch; gap: 0.25rem;
  width: min(100%, calc((100dvh - 5rem) * 1.414));
  height: min(100%, calc((100vw - 3rem) / 1.414)); margin: auto;
}
.ba-thesis-page .research-reference-panel { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 0.5rem; }
.ba-thesis-page .research-reference-panel h3 { margin: 0; font: 400 clamp(0.38rem, 0.65vw, 0.62rem)/1.5 Arial, Helvetica, sans-serif; letter-spacing: 0.2em; text-align: left; }
.ba-thesis-page .research-reference-panel:last-child h3 { text-align: right; }
.ba-thesis-page .research-reference-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 0.25rem; min-height: 0; }
.ba-thesis-page .research-reference-grid img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
@media (max-width: 640px) {
  .ba-thesis-page .research-spread-stage.research-reference-panels { width: 100%; height: auto; grid-template-columns: 1fr; gap: 1.5rem; }
  .ba-thesis-page .research-reference-grid { aspect-ratio: 0.72; }
  .ba-thesis-page .research-reference-panel h3 { font-size: 0.5rem; }
  .ba-thesis-page .research-reference-panel:last-child h3 { text-align: left; }
}

/* Preserve the original PDF credit letterforms and tracking as vector artwork. */
.ba-thesis-page .research-reference-panel h3 { display: flex; align-items: end; height: auto; line-height: 0; }
.ba-thesis-page .research-reference-panel:last-child h3 { justify-content: flex-end; }
.ba-thesis-page .research-reference-panel .research-original-credit { display: block; width: 50.48%; height: auto; max-width: none; object-fit: contain; }
.ba-thesis-page .research-reference-panel:last-child .research-original-credit { width: 69.39%; }

/* Look 02 development: full CLO3D frame above two seamless portrait players. */
.ba-thesis-page .process-videos.look-02-development:not([hidden]) {
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 0.42rem;
}
.ba-thesis-page .process-videos.look-02-development > video {
  aspect-ratio: 960 / 426; height: auto; object-fit: contain; object-position: center top;
}
.ba-thesis-page .process-videos.look-02-development > .process-video-pair {
  gap: 0; overflow: hidden;
}
.ba-thesis-page .process-videos.look-02-development > .process-video-pair video {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
}

/* Match Execution footage to the filled image frames used throughout the lookbook. */
.ba-thesis-page .process-videos.look-02-execution video {
  object-fit: cover !important;
  object-position: center;
}

/* Place the added execution pair at the top of Look 03 Development. */
.ba-thesis-page .process-videos.look-03-development > .development-prototype-images { grid-row: auto; }
.ba-thesis-page .process-videos.look-03-development > video:first-of-type { order: -1; }

/* Three equally sized, filled video rows in Look 03 Development. */
.ba-thesis-page .process-videos.look-03-development > video {
  object-fit: cover !important;
  object-position: center;
}

/* Match execution photographs to the filled, centred research image frames. */
.ba-thesis-page .process-execution-image {
  display: block; width: 100%; height: 100%; min-width: 0; min-height: 0;
  object-fit: cover; object-position: center; background: #fff;
}

/* Keep the execution frames fixed while focusing on the construction work. */
.ba-thesis-page .process-execution-image[src*="look-03-execution-1."] { object-position: 50% 58%; }
.ba-thesis-page .process-execution-image[src*="look-03-execution-2."] { object-position: 50% 43%; }
.ba-thesis-page .process-execution-image[src*="look-03-execution-3."] { object-position: 50% 58%; }

/* Share one toolbar row and use the remaining viewport for all look dialogs. */
.ba-thesis-page .image-lightbox {
  padding: max(4rem, calc(env(safe-area-inset-top) + 3.5rem)) clamp(0.75rem, 2vw, 2rem) max(0.75rem, env(safe-area-inset-bottom));
  overflow: hidden;
}
.ba-thesis-page .image-lightbox .process-title {
  position: fixed; top: max(0.5rem, env(safe-area-inset-top));
  left: 8rem; right: 8rem; min-height: 44px; margin: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
@media (max-width: 480px) {
  .ba-thesis-page .image-lightbox .process-title { left: 6.5rem; right: 4.5rem; font-size: 0.55rem; letter-spacing: 0.15em; }
}

/* Native portfolio copy, keeping the original spread's text placement. */
.native-portfolio .native-section { margin: 0 0 clamp(3rem,7vw,7rem); }
.native-portfolio .native-copy p { margin: 0 0 1.5em; font: 400 clamp(0.56rem,0.72vw,0.68rem)/1.5 Arial,Helvetica,sans-serif; letter-spacing: 0.59em; }
.native-intro { display:grid; grid-template-columns:1fr 1fr; gap:8%; margin-bottom:2rem; }
.native-intro > :last-child, .native-right { text-align:right; }
.native-caption { text-align:center; margin-top:2rem; }
.native-right { margin-top:1.5rem; margin-left:22%; }
.native-teaching { display:grid; grid-template-columns:1fr 1fr; gap:6%; align-items:center; }
.native-sidebar { display:grid; grid-template-columns:25% minmax(0,1fr); gap:2%; align-items:start; }
.native-ba2-top { display:grid; grid-template-columns:19% minmax(0,1fr); gap:1%; align-items:start; margin-bottom:0.42rem; }
.native-portfolio .portfolio-spread img { height:auto; object-fit:contain; }
.clo3d-page .full-collection .clo3d-image-button img { transform:none; object-fit:contain; object-position:center; }
.clo3d-page .full-collection .clo3d-shell-pattern {
  box-sizing: border-box;
  aspect-ratio: auto;
  padding: 12px;
  overflow: visible;
}
.clo3d-page .full-collection .clo3d-shell-pattern img {
  height: auto;
}
@media(max-width:640px) {
 .native-intro, .native-teaching, .native-sidebar, .native-ba2-top { grid-template-columns:1fr; gap:1.5rem; }
 .native-right { margin-left:0; }
}
@media (min-width:641px) and (max-width:900px) {
 .native-sidebar, .native-ba2-top { grid-template-columns:1fr; gap:1.5rem; }
}

/* Align the Ursuit introduction columns at their first text line. */
.ursuit-page .native-intro { align-items: start; }
.ursuit-page .native-intro > .native-copy { text-align: left; align-self: start; }

.ursuit-items { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); }
.ursuit-item { display:block; padding:0; border:0; background:white; cursor:pointer; overflow:visible; position:relative; }
.ursuit-item img { display:block; width:100%; height:auto; transition:transform 250ms ease; }
@media(hover:hover) { .ursuit-item:hover img { transform:scale(1.06); } }
.ursuit-item:focus-visible { outline:1px solid black; outline-offset:2px; }
.ursuit-viewer { box-sizing:border-box; width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; margin:0; padding:4.5rem 4rem 1.5rem; border:0; background:white; overflow:hidden; }
.ursuit-viewer::backdrop { background:rgba(255,255,255,.95); }
.ursuit-toolbar { position:absolute; top:1.5rem; left:2rem; right:2rem; display:flex; align-items:center; gap:2rem; }
.ursuit-toolbar button,.ursuit-count { font:400 .7rem Arial,Helvetica,sans-serif; letter-spacing:.2em; }
.ursuit-toolbar button,.ursuit-prev,.ursuit-next { border:0; padding:.5rem; background:white; color:black; cursor:pointer; }
.ursuit-count { margin-right:auto; }
.ursuit-prev,.ursuit-next { position:absolute; top:50%; font:400 1.8rem Arial,sans-serif; z-index:1; }
.ursuit-prev { left:1rem; } .ursuit-next { right:1rem; }
.ursuit-stage { width:100%; height:100%; overflow:auto; text-align:center; }
.ursuit-stage img { display:block; margin:0 auto; width:100%; height:100%; object-fit:contain; }
.ursuit-stage.zoomed img { width:200%; height:200%; max-width:none; max-height:none; }
@media(max-width:640px) { .ursuit-items {grid-template-columns:repeat(3,minmax(0,1fr));} .ursuit-viewer {padding:4.5rem 2.5rem 1rem;} .ursuit-toolbar {left:1rem;right:1rem;gap:1rem;} .ursuit-prev{left:0;} .ursuit-next{right:0;} }
@media(prefers-reduced-motion:reduce) { .ursuit-item img {transition:none;} }

/* Reuse the lookbook controls on the Ursuit gallery. */
.ursuit-viewer .ursuit-count { display:none; }
.ursuit-viewer .lightbox-zoom, .ursuit-viewer .lightbox-close { position:fixed; top:max(0.5rem,env(safe-area-inset-top)); padding:0; min-height:44px; min-width:44px; font:400 .62rem/1 Arial,Helvetica,sans-serif; letter-spacing:.35em; background:rgba(255,255,255,.96); }
.ursuit-viewer .lightbox-zoom { left:max(.75rem,env(safe-area-inset-left)); right:auto; }
.ursuit-viewer .lightbox-close { right:max(.75rem,env(safe-area-inset-right)); left:auto; }
.ursuit-viewer .look-angle { width:30px; height:44px; padding:0; transform:translateY(-50%); font:400 30px/1 Arial,Helvetica,sans-serif; color:#fff; background:rgba(120,120,120,.3); }
.ursuit-viewer .look-angle:hover { background:rgba(120,120,120,.5); }
.ursuit-viewer .look-angle-prev { left:.5rem; } .ursuit-viewer .look-angle-next {right:.5rem;}
.ursuit-stage.zoomed {cursor:grab;touch-action:none;}

/* Let hovered garments extend beyond their grid cell, above adjacent images. */
.ursuit-item:hover, .ursuit-item:focus-visible { z-index:1; }
/* Place navigation alongside the fitted portrait rather than the viewport edges. */
.ursuit-viewer .look-angle-prev { left: max(.5rem, calc(50% - min(42vw, (100dvh - 6rem) * .3565))); }
.ursuit-viewer .look-angle-next { right: max(.5rem, calc(50% - min(42vw, (100dvh - 6rem) * .3565))); }

/* Shared return link, matching each page's name link. */
.works-nav.page-nav, .landing .works-nav.site-name { position:absolute; top:2rem; right:2rem; left:auto; margin:0; width:max-content; }
@media(max-width:640px) {
 .collection-page .works-nav.page-nav, .landing .works-nav.site-name { top:1.25rem; right:1.25rem; margin-left:0; }
}

/* Match name-link typography and align Works with the collection width. */
.collection-page .works-nav.page-nav { right:clamp(1rem,3vw,3rem); }
.ba-thesis-page .works-nav.page-nav { right:clamp(1rem,3vw,3rem); }
@media(max-width:640px) {
 .collection-page .works-nav.page-nav { right:1.25rem; }
}

/* Centre the teaching introduction in the opening viewport. */
.teaching-page .portfolio-page { min-height:100dvh; display:grid; align-items:center; padding-block:6rem; }
.teaching-page .portfolio-page > .page-nav:not(.works-nav) { position:absolute; top:2rem; }
.teaching-page .portfolio-content { margin:0 auto; }
.teaching-page .native-teaching { margin:0; align-items:center; }
.teaching-page .native-copy p { margin-bottom:0; }
.teaching-page .native-teaching .teaching-image { width:min(100%,340px,46dvh); justify-self:center; }
.teaching-page .native-teaching .teaching-image img { display:block; width:100%; height:auto; object-fit:contain; }
@media(max-width:640px) {
 .teaching-page .portfolio-page { padding-block:6rem 3rem; }
 .teaching-page .portfolio-page > .page-nav:not(.works-nav) { top:1.25rem; }
 .teaching-page .native-teaching { gap:2rem; }
 .teaching-page .native-teaching .teaching-image { width:min(60%,240px,32dvh); }
}

/* Equal tall frames fill with each photograph, cropping only the side edges. */
.ba2-page .collection-page .ba2-lineup .lineup-button {
  aspect-ratio: 466 / 856;
  align-self: start;
}
.ba2-page .ba2-lineup .lineup-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform: none;
  background: #fff;
}
.ba2-page .portfolio-content { margin-top: var(--lineup-spacing); }

/* Align the introduction with the centre of the adjacent garment images. */
.ba2-page .native-ba2-top { align-items: center; }
.ba2-page .native-ba2-top .native-copy p:last-child { margin-bottom: 0; }

/* Give the introduction enough width to sit vertically centred beside the images. */
@media (min-width: 901px) {
  .ba2-page .native-ba2-top {
    grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
    column-gap: 2rem;
    align-items: center;
  }
  .ba2-page .native-ba2-top > .native-copy { align-self: center; }
}

.clo3d-look-title {
  grid-column: 1 / -1;
  margin: 0 0 1rem;
  font: 400 clamp(0.56rem, 0.72vw, 0.68rem)/1.5 Arial, Helvetica, sans-serif;
  letter-spacing: 0.59em;
}

.clo3d-look-description {
  grid-column: 1 / -1;
  margin: 0 0 1.5rem;
  font: 400 clamp(0.56rem, 0.72vw, 0.68rem)/1.5 Arial, Helvetica, sans-serif;
  letter-spacing: 0.59em;
}

/* Pair the Look 2 introduction with its image row, as with the shell jacket. */
.clo3d-look-intro { grid-column: 1; }
.clo3d-look-intro h2 { text-transform: none; }
@media (max-width: 640px) {
  .clo3d-content > .clo3d-look-intro { order: 3; }
}

/* Look 04: seamless execution clips and the original vector pattern. */
.ba-thesis-page .process-videos.look-04-execution { gap: 0.42rem; }
.ba-thesis-page .process-videos.look-04-execution video { object-fit: cover; }
.ba-thesis-page .process-videos.look-04-development .development-pattern-vector { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.ba-thesis-page .process-videos.look-04-development .development-prototype-images { grid-row: 2; }

/* Align Look 04 pattern and portrait fittings with the adjacent lookbook. */
.ba-thesis-page .process-videos.look-04-development { grid-template-rows: minmax(0, 1fr) auto !important; gap: 0.42rem; }
.ba-thesis-page .process-videos.look-04-development .development-pattern-vector { object-position: center top; }
.ba-thesis-page .process-videos.look-04-development .development-prototype-images { height: auto; aspect-ratio: 2 / 1; gap: 0.42rem; }
.ba-thesis-page .process-videos.look-04-development .development-prototype-images img { object-fit: cover; object-position: center top; }

/* Look 05 Development: material sample above two equal video rows. */
.ba-thesis-page .process-videos.look-05-development {
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 0.42rem;
}
.ba-thesis-page .process-videos.look-05-development .development-prototype-images {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  height: 100%;
}
.ba-thesis-page .look-05-development .development-sample-frame {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  container-type: size;
}
.ba-thesis-page .process-videos.look-05-development .development-prototype-images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.ba-thesis-page .process-videos.look-05-development .development-sample-frame:first-child img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100cqh;
  height: 100cqw;
  max-width: none;
  transform: translate(-50%, -50%) rotate(90deg);
  object-position: center;
}
.ba-thesis-page .process-videos.look-05-development > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #fff;
}