:root {
  color-scheme: light;
  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-synthesis: none;
  --ease: cubic-bezier(.2,.72,.15,1);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { overflow-x: hidden; }
a { color: inherit; text-decoration: none; }

.prototype-index { background: #efefeb; color: #0a0a0a; min-height: 100vh; padding: 26px; }
.prototype-index__main { min-height: calc(100vh - 82px); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; gap: 26px; }
.eyebrow { margin: 0; font-size: 12px; letter-spacing: .08em; }
.prototype-index h1 { grid-column: 1; align-self: end; margin: 0; font-size: clamp(62px, 10vw, 168px); line-height: .8; letter-spacing: -.075em; font-weight: 500; }
.prototype-index__links { grid-column: 2; grid-row: 1 / 3; display: grid; align-content: end; border-top: 1px solid; }
.prototype-index__links a { display: grid; grid-template-columns: 48px 1fr auto; align-items: baseline; gap: 14px; padding: 22px 0; border-bottom: 1px solid; transition: padding .35s var(--ease), background .35s; }
.prototype-index__links a:hover { padding-left: 18px; padding-right: 18px; background: #0a0a0a; color: white; }
.prototype-index__links strong { font-size: clamp(24px, 3vw, 48px); font-weight: 500; letter-spacing: -.04em; }
.prototype-index__links small { text-transform: uppercase; }
.prototype-index footer { font-size: 10px; letter-spacing: .08em; margin-top: 20px; }

art-crop { display: block; width: 100%; height: 100%; min-height: 0; overflow: hidden; background: #171717; }
art-crop svg { display: block; width: 100%; height: 100%; }
art-crop img { display: block; width: 100%; height: 100%; }
art-crop img.fit-cover { object-fit: cover; }
art-crop img.fit-contain { object-fit: contain; background: #ececec; }

/* Concept 01 */
.concept-one { --gap: 5px; min-height: 100vh; overflow-x: hidden; overflow-y: auto; background: #fff; color: #000; cursor: default; }
.c1-header { height: clamp(104px, 16vh, 170px); display: grid; grid-template-columns: 2.3fr 1.15fr 1.1fr .9fr; gap: 18px; padding: 12px 16px 10px; align-items: start; }
.vessls-mark { display: flex; align-items: flex-end; height: 100%; overflow: hidden; white-space: nowrap; }
.vessls-mark span { font-family: Impact, "Arial Black", sans-serif; font-stretch: condensed; font-size: clamp(60px, 9.2vw, 146px); line-height: .78; letter-spacing: -.075em; }
.vessls-mark i, .symbol i { width: clamp(18px, 2.8vw, 44px); height: clamp(18px, 2.8vw, 44px); background: currentColor; margin-left: -1px; }
.vessls-mark i:nth-of-type(1), .symbol i:nth-of-type(1) { transform: translateY(-200%); }
.vessls-mark i:nth-of-type(2), .symbol i:nth-of-type(2) { transform: translateY(-100%); }
.upcoming { font-size: clamp(8px, .72vw, 11px); line-height: 1.15; padding-top: 4px; }
.upcoming b { font-weight: 500; color: #a7a7a7; }
.world-clock { display: flex; align-items: center; gap: clamp(8px, 1vw, 18px); padding-top: 10px; }
.world-clock span { display: grid; justify-items: center; font-size: 7px; letter-spacing: .08em; }
.world-clock b { display: grid; place-items: center; width: clamp(34px, 3.6vw, 56px); aspect-ratio: 1; border: 1px solid #fff; border-radius: 50%; font-size: clamp(8px, .8vw, 12px); font-weight: 400; }
.c1-header nav { display: grid; justify-content: end; font-size: clamp(11px, 1.3vw, 20px); line-height: .92; }
.c1-header nav a:hover { color: #999; }

.stair-gallery { height: calc(100vh - clamp(104px, 16vh, 170px)); padding: 0 5px 26px; display: flex; flex-direction: column; gap: var(--gap); }
.stair-row { display: flex; min-height: 0; gap: var(--gap); flex: 1 1 0; transition: flex .65s var(--ease), width .65s var(--ease), margin .65s var(--ease); }
.row-one { width: 72%; margin-left: auto; }
.row-two { width: 90%; margin-left: 10%; }
.row-three { width: 78%; margin-left: 0; }
.stair-card { position: relative; flex: var(--weight) 1 0; min-width: 0; overflow: hidden; isolation: isolate; transition: flex .65s var(--ease), filter .45s, opacity .45s; }
.stair-card::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); pointer-events: none; }
.stair-card art-crop { filter: saturate(.82) contrast(1.07); transition: filter .55s, transform .8s var(--ease); }
.card-label { position: absolute; inset: auto 0 0; z-index: 2; display: flex; justify-content: space-between; gap: 12px; padding: 26px 7px 6px; background: linear-gradient(transparent, rgba(0,0,0,.88)); font-size: clamp(7px, .68vw, 11px); line-height: 1; opacity: .9; }
.card-label b { font-weight: 500; }
.card-label span { text-align: right; color: #c9c9c9; }
.stair-gallery:has(.stair-card:hover) .stair-row { flex: .72 1 0; }
.stair-gallery .stair-row:has(.stair-card:hover) { flex: 1.85 1 0; width: 100%; margin-left: 0; }
.stair-row:has(.stair-card:hover) .stair-card { flex: .62 1 0; filter: brightness(.58); opacity: .82; }
.stair-row .stair-card:hover { flex: 3.2 1 0; filter: none; opacity: 1; }
.stair-card:hover art-crop { filter: saturate(1) contrast(1.02); transform: scale(1.025); }
.interaction-hint { position: fixed; right: 14px; bottom: 10px; z-index: 8; margin: 0; font-size: 8px; letter-spacing: .12em; mix-blend-mode: difference; color: white; }
.prototype-switcher { position: fixed; left: 12px; bottom: 9px; z-index: 20; display: flex; gap: 4px; }
.prototype-switcher a { display: grid; place-items: center; width: 25px; height: 19px; border: 1px solid #666; color: #777; font-size: 8px; }
.prototype-switcher a:hover, .prototype-switcher .active { border-color: #fff; color: #fff; }

.corner-gallery { position: relative; width: 100vw; min-height: 100vh; overflow: hidden; }
.corner-card { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: calc(var(--h) + var(--block-h)); min-width: 0; overflow: visible; background: transparent; transition: left .38s var(--ease), top .38s var(--ease), width .38s var(--ease), height .38s var(--ease); will-change: left, top, width, height; }
.corner-card art-crop { width: 100%; height: var(--h); filter: none; transition: height .38s var(--ease); }
.card-block { display: block; width: 100%; height: var(--block-h); background: #000; transition: height .38s var(--ease); }
.corner-card .card-label { padding-top: 34px; font-size: clamp(6px, .58vw, 9px); }

/* Concept 02 */
.concept-two { --mx: 72vw; --my: 34vh; min-height: 300vh; overflow-x: hidden; overflow-y: auto; background: #e9e9e5; color: #090909; cursor: default; }
.sand-quadrants { position: fixed; inset: 0; display: block; width: 100vw; height: 100vh; }
.concept-two .prototype-switcher { z-index: 40; color: white; mix-blend-mode: difference; }
.concept-two .prototype-switcher a { border-color: white; color: white; }
.c2-site { height: 100vh; display: grid; grid-template-columns: minmax(0, 4fr) minmax(190px, 1fr); }
.c2-main { padding: 14px 18px 70px; overflow: hidden; background: #ecece8; }
.c2-sidebar { position: relative; overflow: hidden; padding: 14px 14px 30px; background: #050505; color: white; }
.c2-nav { display: flex; gap: clamp(12px, 1.5vw, 30px); align-items: center; white-space: nowrap; font-size: clamp(12px, 1.3vw, 21px); letter-spacing: -.035em; }
.c2-nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
.c2-nav span { margin-left: auto; }
.c2-hero { height: 34vh; min-height: 220px; display: grid; grid-template-columns: minmax(0, 3fr) minmax(130px, 1fr); gap: 28px; padding: 26px 0 16px; }
.symbol { display: flex; align-items: center; overflow: hidden; }
.symbol span { font-family: Impact, "Arial Black", sans-serif; font-size: clamp(100px, 18vw, 290px); line-height: .7; letter-spacing: -.1em; }
.symbol i { flex: 0 0 clamp(28px, 5vw, 78px); width: clamp(28px, 5vw, 78px); height: clamp(28px, 5vw, 78px); }
.artist-feature { min-width: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto 1fr auto; gap: 4px 8px; font-size: 8px; }
.artist-feature .section-title { grid-column: 1 / -1; }
.artist-feature art-crop { min-height: 50px; }
.artist-feature p { margin: 0; }
.section-title { display: flex; justify-content: space-between; font-size: 9px; }
.exhibition-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.exhibition-grid article { min-width: 0; }
.exhibition-grid .wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1.3fr .7fr; grid-template-rows: 1fr auto; column-gap: 14px; }
.exhibition-grid .wide art-crop { grid-row: 1 / 3; height: 25vh; min-height: 170px; }
.exhibition-grid > article:not(.wide) art-crop { height: 18vh; min-height: 120px; }
.exhibition-grid h2 { margin: 8px 0 2px; font-size: clamp(16px, 1.7vw, 28px); font-weight: 500; line-height: .95; letter-spacing: -.045em; }
.exhibition-grid p { margin: 0; font-size: clamp(9px, 1vw, 14px); line-height: 1.1; }
.language { text-align: right; font-size: clamp(16px, 1.8vw, 26px); margin-bottom: 18px; }
.c2-sidebar .section-title { margin-bottom: 8px; }
.c2-sidebar article { margin-bottom: 18px; }
.c2-sidebar article art-crop { height: clamp(75px, 11vh, 125px); }
.c2-sidebar article p { margin: 5px 0 0; font-size: clamp(7px, .72vw, 10px); line-height: 1.05; }

.quadrant-field { position: fixed; inset: 0; z-index: 10; pointer-events: none; mix-blend-mode: difference; overflow: hidden; }
.quadrant { position: absolute; display: block; background: #fff; filter: blur(18px); }
.north-east { left: calc(var(--mx) - 18px); top: -24px; right: -24px; height: calc(var(--my) + 42px); }
.south-west { left: -24px; top: calc(var(--my) - 18px); width: calc(var(--mx) + 42px); bottom: -24px; }
.cross-glow { position: absolute; display: block; opacity: .68; }
.cross-glow.vertical { left: calc(var(--mx) - 54px); top: 0; width: 108px; height: 100%; background: linear-gradient(90deg, transparent, #fff 48%, transparent); filter: blur(18px); }
.cross-glow.horizontal { left: 0; top: calc(var(--my) - 54px); width: 100%; height: 108px; background: linear-gradient(transparent, #fff 48%, transparent); filter: blur(18px); }
.grain { position: absolute; inset: -50%; display: block; opacity: .2; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); transform: translate(calc(var(--mx) * -.025), calc(var(--my) * -.025)); }
.cursor-origin { position: fixed; left: var(--mx); top: var(--my); z-index: 30; width: 1px; height: 1px; pointer-events: none; color: white; mix-blend-mode: difference; }
.cursor-origin i, .cursor-origin i::after { position: absolute; content: ""; background: currentColor; }
.cursor-origin i { width: 21px; height: 1px; left: -10px; }
.cursor-origin i::after { width: 1px; height: 21px; left: 10px; top: -10px; }
.cursor-origin span { position: absolute; top: 10px; left: 10px; font-size: 7px; letter-spacing: .1em; }
.c2-hint { z-index: 31; }

@media (max-width: 760px) {
  .prototype-index__main { display: flex; flex-direction: column; }
  .prototype-index h1 { margin-top: auto; }
  .prototype-index__links { margin-top: 40px; }
  .prototype-index__links a { grid-template-columns: 38px 1fr; }
  .prototype-index__links small { display: none; }
  .c1-header { grid-template-columns: 1fr auto; height: 100px; }
  .upcoming, .world-clock { display: none; }
  .c1-header nav { grid-template-columns: repeat(5, auto); gap: 8px; align-self: start; font-size: 9px; }
  .stair-gallery { height: calc(100vh - 100px); }
  .row-one { width: 88%; }
  .row-two { width: 96%; margin-left: 4%; }
  .row-three { width: 92%; }
  .card-label span { display: none; }
  .concept-two { overflow: auto; cursor: default; }
  .c2-site { grid-template-columns: 1fr; height: auto; min-height: 100vh; }
  .c2-main { min-height: 100vh; }
  .c2-sidebar { display: none; }
  .c2-nav { overflow: hidden; font-size: 10px; gap: 10px; }
  .c2-hero { grid-template-columns: 1fr; height: 34vh; }
  .artist-feature { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}