:root {
  font-family: Haffer, Arial, Helvetica, sans-serif;
  --text-size: 14px;
  font-size: var(--text-size);
  line-height: 1.12;
  color: #b5b5b5;
  background: #fff;
  --inset: clamp(16px, 1.63vw, 30px);
  --gap: clamp(9px, .857vw, 16px);
  --tile-height: 63.2svh;
  --tile-width: calc(var(--tile-height) * .7086);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
button { font: inherit; cursor: pointer; border: 0; }
button:focus-visible, .rail:focus-visible { outline: 2px solid #838383; outline-offset: 4px; }
.masthead { position: fixed; inset: var(--inset) var(--inset) auto; display: flex; justify-content: space-between; gap: 30px; }
.about { margin: 0; width: min(28.43vw, 523px); font-size: inherit; line-height: inherit; text-transform: uppercase; }
.about strong { color: #1d1d1d; font-weight: 700; }
.menu { max-width: 55vw; flex-wrap: wrap; justify-content: flex-end; display: flex; align-items: flex-start; gap: clamp(3px, .272vw, 5px); color: #000; }
.menu button { border-radius: 4.5px; background: #dfdfdf; min-width: clamp(20px, 1.423vw, 27px); height: clamp(30px, 2.503vw, 46px); padding: 0 6px; font-size: inherit; font-weight: 400; line-height: inherit; text-transform: uppercase; position: relative; display: inline-grid; place-items: center; transition: background-color 250ms ease; }
.menu-number { position: absolute; opacity: 1; transition: opacity 150ms ease; }
.menu-label { display: block; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transform: translateY(3px); transition: max-width 320ms cubic-bezier(.22, 1, .36, 1), opacity 200ms ease, transform 320ms cubic-bezier(.22, 1, .36, 1); }
.menu button:is(:hover, :focus-visible) .menu-label { max-width: var(--menu-label-width); opacity: 1; transform: translateY(0); }
.menu button:is(:hover, :focus-visible) .menu-number { opacity: 0; }
.menu button:hover, .menu button.selected { background: #d6d6d6; }
.portfolio { position: fixed; inset: auto 0 var(--inset); }
.project-context { position: relative; width: var(--tile-width); margin-left: var(--inset); margin-bottom: clamp(9px, .911vw, 17px); }
#description { margin: 0 0 clamp(8px, .8vw, 15px); min-height: 1.12em; font-size: inherit; line-height: inherit; text-transform: uppercase; }
.stories { display: flex; gap: clamp(4px, .428vw, 8px); }
.story { position: relative; flex: 1; height: 5px; padding: 0; border-radius: 999px; background: #dfdfdf; }
.story::before { content: ''; position: absolute; inset: -9px 0; }
.story-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: #838383; }
.rail { overflow-x: auto; overflow-y: hidden; width: 100%; scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x; scroll-snap-type: x mandatory; scroll-padding-inline-start: var(--inset); }
.rail.gliding { scroll-snap-type: none; }
.rail::-webkit-scrollbar { display: none; }
.track { display: flex; gap: var(--gap); width: max-content; padding-inline: var(--inset); }
.tile { position: relative; flex: 0 0 var(--tile-width); width: var(--tile-width); height: var(--tile-height); overflow: hidden; background: #eee; scroll-snap-align: start; }
.tile img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 450ms ease; }
.tile img.visible { opacity: 1; }

@media (max-width: 600px) {
  :root { --tile-height: 57svh; --tile-width: calc(var(--tile-height) * .7086); }
  .masthead { gap: 14px; }
  .about { width: min(58vw, 310px); }
  .menu { gap: 3px; }
  .menu button { min-width: 22px; padding-inline: 4px; }
}
@media (max-height: 500px) and (min-width: 601px) {
  :root { --tile-height: 54svh; }
  .about { width: 45vw; }
}
@media (prefers-reduced-motion: reduce) { .tile img, .menu button, .menu-number, .menu-label { transition: none; } }

#project-copy { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 0; font-size: inherit; line-height: inherit; text-transform: uppercase; }
#project-copy:empty { display: none; }
#status { margin: 0 var(--inset) 20px; font-size: inherit; }

.masthead { z-index: 5000; }
.orbit-gallery { position: fixed; inset: var(--index-top, 150px) 0 0; overflow: hidden; background: #fff; cursor: grab; touch-action: none; user-select: none; }
.orbit-gallery.pointer-focused:focus { outline: none; }
.orbit-gallery.is-dragging { cursor: grabbing; }
.orbit-gallery:focus-visible:not(.pointer-focused) { outline: 2px solid #838383; outline-offset: -4px; }
.orbit-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.orbit-tile { position: absolute; top: 0; left: 0; width: var(--width); height: var(--height); margin: 0; opacity: var(--opacity, 0); transform: translate3d(var(--x, 0), var(--y, 0), 0) rotate(var(--rotation, 0deg)) scale(var(--scale, .4)); transform-origin: center; will-change: transform, opacity; }
.orbit-tile img { display: block; width: 100%; height: 100%; border-radius: var(--orbit-radius, 2px); object-fit: cover; }

/* Menu navigation shares the reference site's quiet exit and slower entrance. */
.page-out { animation: page-out 400ms ease-in both; }
.page-out-back { animation: page-out-back 400ms ease-in both; }
.page-in { animation: page-in 800ms cubic-bezier(0, .635, .345, 1) both; }
.page-in-back { animation: page-in-back 800ms cubic-bezier(0, .635, .345, 1) both; }
@keyframes page-out {
  from { opacity: var(--page-exit-opacity, 1); transform: var(--page-exit-transform, none); }
  80% { opacity: 0; }
  to { opacity: 0; transform: translate3d(-10px, 0, 0); }
}
@keyframes page-out-back {
  from { opacity: var(--page-exit-opacity, 1); transform: var(--page-exit-transform, none); }
  80% { opacity: 0; }
  to { opacity: 0; transform: translate3d(10px, 0, 0); }
}
@keyframes page-in {
  from { opacity: 0; transform: translate3d(max(1vw, 25px), 0, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes page-in-back {
  from { opacity: 0; transform: translate3d(min(-1vw, -25px), 0, 0); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .page-out, .page-out-back, .page-in, .page-in-back { animation: none; }
}

/* October reference: shared 14px copy, wordmark and three-column footer. */
:root {
  --text-size: 14px;
  --inset: 15px;
  --gap: 15px;
  --footer-height: 44px;
  --tile-height: clamp(80px, calc(100svh - var(--index-top, 150px) - var(--footer-height) - 100px), 58.5svh);
  --tile-width: clamp(260px, calc((100vw - 2 * var(--inset) - 2 * var(--gap)) / 3), 620px);
  background: #f6f6f6;
}
.studio { display: flex; align-items: flex-start; gap: 15px; min-width: 0; }
.studio-logo { display: block; width: 287.999px; height: 31.661px; flex: 0 0 287.999px; }
.studio-logo img { display: block; }
.logo-light { display: none !important; }
.about { width: min(27vw, 518px); }
.about strong { display: none; }
.menu { max-width: 35vw; }
.menu button { flex-shrink: 0; height: 34px; min-width: 34px; border-radius: 0; background: #cfcfcf; transition: border-radius 320ms ease, background-color 250ms ease; }
.menu button:is(:hover, :focus-visible) { border-radius: 17px; }
.menu button.selected { background: #000; color: #fff; }
.menu button.selected .menu-label { max-width: var(--menu-label-width); opacity: 1; transform: none; }
.menu button.selected .menu-number { opacity: 0; }
.portfolio { bottom: var(--footer-height); }
.rail.drifting { scroll-snap-type: none; }
.tile { height: calc(var(--tile-height) + 90px); background: transparent; cursor: pointer; }
.tile img { top: 90px; height: var(--tile-height); }
.tile-caption { position: absolute; top: 0; left: 0; right: 0; text-transform: uppercase; }
.tile-caption p { margin: 0; }
.tile-caption p:first-child { color: #000; }
.tile-caption p:last-child { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tile:focus-visible { outline: 2px solid #838383; outline-offset: -2px; }
.project-context { position: absolute; z-index: 1; bottom: calc(var(--tile-height) + 10px); margin-bottom: 0; }
#description { display: none; }
.story { height: 3px; }
.site-footer { position: fixed; z-index: 5001; bottom: 0; left: 0; right: 0; min-height: var(--footer-height); padding: 15px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; background: #f6f6f6; color: #000; text-transform: uppercase; font-size: inherit; line-height: inherit; }
.site-footer p { margin: 0; overflow-wrap: anywhere; }
.orbit-gallery { bottom: var(--footer-height); background: #f6f6f6; }
.project-detail { position: fixed; inset: 0; z-index: 4000; overflow-y: auto; overflow-x: hidden; background: #000; color: #b5b5b5; overscroll-behavior: contain; }
.project-detail-content { width: 70vw; max-width: 70vw; margin: 0 auto; padding-top: max(150px, calc(100svh - var(--tile-height) - var(--footer-height) - 90px)); padding-bottom: 160px; }
.project-detail-info { display: grid; grid-template-columns: 2fr 2fr 3fr; gap: 15px; min-height: 90px; text-transform: uppercase; }
.project-detail-info p { margin: 0 0 12px; }
.project-detail-info p + p { color: #fff; font-weight: 400; }
.project-hero { display: block; width: 100%; aspect-ratio: 1889 / 806; object-fit: cover; }
.project-grid { margin-top: 8vw; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(1vw, auto); gap: 0 15px; align-items: start; }
.project-grid figure { margin: 0; min-width: 0; }
.project-grid img { width: 100%; height: auto; display: block; }
.project-close { position: fixed; right: var(--inset); top: 85px; z-index: 5001; padding: 10px 16px; background: #f284bf; color: #000; text-transform: uppercase; transition: border-radius 320ms ease; }
.project-close:hover { border-radius: 20px; }
.project-flying-image { position: fixed; z-index: 4900; display: block; object-fit: cover; pointer-events: none; }
.project-open .logo-dark { display: none; }
.project-open .logo-light { display: block !important; }
.project-open .about { color: #b5b5b5; }
.project-open .menu button { background: #454545; color: #fff; }
.project-open .menu button.selected { background: #fff; color: #000; }
.project-open .site-footer { background: #000; color: #fff; }
@media (max-width: 1000px) {
  .studio { flex-direction: column; gap: 12px; }
  .about { width: min(48vw, 518px); }
  .studio-logo { flex-basis: auto; }
}
@media (max-width: 600px) {
  :root { --tile-height: clamp(80px, calc(100svh - var(--index-top, 170px) - var(--footer-height) - 100px), 50svh); --tile-width: 76vw; --footer-height: 72px; }
  .masthead { gap: 12px; }
  .studio-logo { width: 201.599px; height: 22.163px; overflow: visible; }
  .studio-logo img { transform: scale(.7); transform-origin: top left; }
  .about { width: 55vw; }
  .menu { max-width: 35vw; }
  .menu button { min-width: 28px; height: 30px; }
  .site-footer { gap: 9px; padding: 12px 15px; min-height: 72px; }
  .project-detail-content { padding-top: calc(var(--index-top, 180px) + 70px); }
  .project-detail-info { grid-template-columns: 1fr; gap: 12px; }
  .project-detail-info p { margin-bottom: 4px; }
  .project-detail-info div { margin-bottom: 12px; }
  .project-hero { aspect-ratio: 1; }
  .project-grid { column-gap: 6px; margin-top: 12vw; }
  .project-close { top: var(--index-top, 185px); }
}
@media (max-height: 650px) and (min-width: 601px) {
  :root { --tile-height: 48svh; }
  .project-detail-content { padding-top: 170px; }
}
@media (prefers-reduced-motion: reduce) { .project-close { transition: none; } }


/* The wordmark shares the height of three body-copy lines on desktop. */
.studio-logo { --logo-scale: 1.48569; width: 427.87px; height: 47.04px; flex-basis: 427.87px; }
.studio-logo img { transform: scale(var(--logo-scale)); transform-origin: top left; }
.about { width: 640px; }
.mobile-menu-trigger { display: none; }
.project-detail:focus { outline: none; }
@media (max-width: 1400px) {
  .studio { flex-direction: column; gap: 12px; }
  .studio-logo { flex-basis: auto; }
  .about { width: min(70vw, 640px); }
}
@media (max-width: 600px) {
  .studio { flex: 1; gap: 12px; }
  .studio-logo { width: calc(100vw - 130px); height: auto; aspect-ratio: 287.999 / 31.661; }
  .about { width: 100%; }
  .mobile-menu-trigger { display: block; flex: 0 0 auto; align-self: flex-start; min-width: 70px; height: 34px; padding: 7px 12px; color: #000; background: #cfcfcf; transition: border-radius 320ms ease; }
  .mobile-menu-trigger:is(:hover, :focus-visible) { border-radius: 17px; }
  .mobile-menu-trigger[aria-expanded="true"] { background: #000; color: #fff; }
  .menu { display: none; position: absolute; top: 44px; right: 0; width: 180px; max-width: calc(100vw - 30px); padding: 6px; background: #cfcfcf; gap: 4px; }
  .menu.mobile-menu-open { display: grid; }
  .menu button { width: 100%; justify-content: start; padding: 10px; height: auto; min-height: 34px; }
  .menu .menu-number { display: none; }
  .menu .menu-label { max-width: none; opacity: 1; transform: none; }
  .menu button:is(:hover, :focus-visible) .menu-label { max-width: none; }
  .project-open .mobile-menu-trigger { background: #454545; color: #fff; }
  .project-open .mobile-menu-trigger[aria-expanded="true"] { background: #fff; color: #000; }
  .project-open .menu { background: #454545; }
}
@media (prefers-reduced-motion: reduce) { .mobile-menu-trigger { transition: none; } }


/* Background geometry changes without clipping the labels or focus rings. */
.menu-shape-definitions { position: absolute; pointer-events: none; }
.menu button { --menu-background: #cfcfcf; isolation: isolate; background: transparent; border-radius: 0; }
.menu button:is(:hover, :focus-visible), .menu button.selected { background: transparent; border-radius: 0; }
.menu button::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--menu-background); border-radius: var(--menu-radius, 0); clip-path: var(--menu-clip, none); pointer-events: none; }
.menu button.selected { --menu-background: #000; --menu-radius: 999px; padding-inline: 14px; }
.menu button.selected[data-selected-shape="beveled"] { --menu-radius: 0; --menu-clip: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px); }
.menu button.selected[data-selected-shape="scalloped"] { --menu-radius: 0; --menu-clip: url(#menu-scalloped-pill); }
.menu button.selected[data-selected-shape="curved"] { --menu-radius: 28px 10px 28px 10px / 24px 16px 24px 16px; }
.project-open .menu button { --menu-background: #454545; background: transparent; }
.project-open .menu button.selected { --menu-background: #fff; background: transparent; }
@media (min-width: 601px) {
  .menu button:not(.selected) .menu-label { max-width: 0; opacity: 0; transform: none; }
  .menu button:not(.selected):is(:hover, :focus-visible) .menu-number { opacity: 1; }
  .menu button:not(.selected):is(:hover, :focus-visible)[data-hover-shape="triangle"] { --menu-clip: polygon(50% 0, 100% 100%, 0 100%); }
  .menu button:not(.selected):is(:hover, :focus-visible)[data-hover-shape="circle"] { --menu-radius: 50%; }
  .menu button:not(.selected):is(:hover, :focus-visible)[data-hover-shape="square"] { --menu-radius: 0; --menu-clip: none; }
}