:root {
--bg: #0b0a09;
--ink: #f3efe7;
--muted: rgba(243, 239, 231, 0.42);
--muted-2: rgba(243, 239, 231, 0.16);
--accent: #c9622e; --font: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--font-display: "Fraunces", Georgia, "Times New Roman", serif;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--pad: clamp(18px, 3.4vw, 46px);
--strip-h: clamp(72px, 12vh, 116px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scrollbar-width: none; overscroll-behavior: none; }
html::-webkit-scrollbar { display: none; }
body {
background: var(--bg);
font-family: var(--font);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
} .gallery,
.viewer { color: var(--ink); } .scroll-length { position: relative; width: 1px; opacity: 0; pointer-events: none; z-index: -1; } body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 49;
background: radial-gradient(130% 92% at 50% 36%, transparent 56%, rgba(0, 0, 0, 0.58) 100%);
} body::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 50;
opacity: 0.08;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
mix-blend-mode: overlay;
} .gallery { position: fixed; inset: 0; }
.stage {
position: absolute;
inset: 0;
display: grid;
place-items: center;
padding: calc(var(--pad) + 28px) var(--pad) calc(var(--strip-h) + var(--pad));
} .stage { outline: none; }
.stage:focus-visible { outline: 3px solid var(--accent); outline-offset: -16px; }
.stage__layer {
position: absolute;
inset: calc(var(--pad) + 40px) var(--pad) calc(var(--strip-h) + var(--pad));
display: grid; grid-template-columns: minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr);
place-items: center;
opacity: 0;
transition: none;
filter: saturate(1.02);
will-change: opacity, transform;
pointer-events: none;
z-index: 2; }
.stage__layer svg,
.stage__layer img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
filter: drop-shadow(0 30px 80px rgba(0, 0, 0, 0.6));
cursor: zoom-in;
} @media (min-aspect-ratio: 1/1) {
.stage__layer svg,
.stage__layer img { max-width: 78%; }
}
.stage__hint {
position: absolute;
bottom: calc(var(--strip-h) + 14px);
left: 50%;
transform: translateX(-50%);
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--muted);
transition: opacity 600ms var(--ease);
pointer-events: none;
}
.stage__hint.is-hidden { opacity: 0; } .chrome {
position: absolute;
top: 0; left: 0; right: 0;
padding: var(--pad) var(--pad) 0;
display: flex;
justify-content: space-between;
align-items: flex-start;
z-index: 20;
mix-blend-mode: difference; }
.wordmark {
color: var(--ink);
text-decoration: none;
font-family: var(--font-display);
font-style: italic;
font-weight: 500;
font-size: clamp(22px, 3.2vw, 40px);
letter-spacing: -0.01em;
line-height: 1;
}
.meta {
text-align: right;
display: grid;
gap: 4px;
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--muted);
}
.counter { color: var(--ink); font-weight: 500; } .caption {
position: absolute;
left: var(--pad);
bottom: calc(var(--strip-h) + 18px);
z-index: 20;
display: grid;
gap: 2px;
max-width: 60vw;
transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.caption.is-swapping { opacity: 0; transform: translateY(8px); }
.caption__title {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: clamp(26px, 4.4vw, 54px);
line-height: 0.98;
letter-spacing: -0.01em;
}
.caption__sub {
font-size: 12px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted);
} .caption__story { margin-top: 8px; max-width: min(46ch, 54vw); }
.caption__story[hidden] { display: none; }
.caption__story-text {
font-size: 13px;
line-height: 1.5;
color: rgba(243, 239, 231, 0.74);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
} .caption__story.is-open {
margin: 8px 0 0 -12px;
padding: 12px;
background: rgba(11, 10, 9, 0.72);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
border: 1px solid rgba(243, 239, 231, 0.09);
border-radius: 10px;
}
.caption__story.is-open .caption__story-text {
display: block;
-webkit-line-clamp: unset;
max-height: 38vh;
overflow-y: auto;
scrollbar-width: thin;
padding-right: 6px;
}
.caption__story.is-open .caption__more { padding-top: 8px; padding-bottom: 0; }
.caption__more {
appearance: none;
background: none;
border: 0;
padding: 3px 0 0;
color: var(--ink);
font-family: var(--font);
font-size: 12px;
letter-spacing: 0.04em;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
transition: color 0.25s var(--ease);
}
.caption__more:hover { color: var(--accent); } .dock {
position: absolute;
left: 0; right: 0; bottom: 0;
height: var(--strip-h);
z-index: 30;
display: flex;
align-items: center;
gap: clamp(6px, 1.8vw, 24px);
padding: 0 clamp(10px, 2.4vw, 32px);
border-top: 1px solid var(--muted-2);
background: linear-gradient(to top, var(--bg) 46%, rgba(10, 10, 11, 0));
} .index {
flex: 1 1 auto;
min-width: 0;
height: 100%;
display: flex;
align-items: center;
overflow: hidden;
-webkit-mask-image: linear-gradient(to right, transparent, #000 13%, #000 87%, transparent);
mask-image: linear-gradient(to right, transparent, #000 13%, #000 87%, transparent);
}
.index__track {
display: flex;
align-items: center;
gap: clamp(24px, 3.4vw, 52px);
list-style: none;
padding: 0 50%; will-change: transform;
}
.index__item {
flex: 0 0 auto;
white-space: nowrap;
transform-origin: center;
will-change: transform, opacity; }
.index__btn {
appearance: none;
background: none;
border: 0;
color: var(--muted);
font-family: var(--font-display);
font-style: italic;
font-size: clamp(15px, 2vw, 24px);
letter-spacing: 0.005em;
line-height: 1;
cursor: pointer;
padding: 10px 2px 14px;
position: relative;
transition: color 400ms var(--ease);
}
.index__btn:hover { color: var(--ink); }
.index__num {
font-family: var(--font);
font-style: normal;
font-size: 12px;
letter-spacing: 0.1em;
color: rgba(243, 239, 231, 0.62);
margin-right: 9px;
vertical-align: 2px;
}
.index__item.is-active .index__num { color: var(--ink); }
.index__item.is-active .index__btn { color: var(--ink); } .index__item.is-active .index__btn::after {
content: "";
position: absolute;
left: -7px; right: -7px; bottom: 2px;
height: 8px;
background: var(--accent);
clip-path: polygon(0 46%, 7% 24%, 18% 58%, 30% 20%, 42% 62%, 54% 26%, 66% 60%, 78% 22%, 89% 56%, 96% 34%, 100% 48%, 100% 100%, 0 100%);
opacity: 0.9;
transform-origin: left;
animation: paint 460ms var(--ease);
}
@keyframes paint { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 0.9; } } .arrow {
flex: 0 0 auto;
appearance: none;
width: clamp(46px, 4.6vw, 58px);
height: clamp(46px, 4.6vw, 58px);
border: 2px solid rgba(243, 239, 231, 0.75);
border-radius: 50%; background: rgba(11, 10, 9, 0.8);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
color: var(--ink);
font-family: var(--font);
font-size: clamp(20px, 2.1vw, 26px);
font-weight: 700;
line-height: 1;
cursor: pointer;
display: grid;
place-items: center;
transition: border-color 300ms var(--ease), color 300ms var(--ease), background 300ms var(--ease), transform 180ms var(--ease);
} .arrow:hover {
border-color: var(--accent);
background: var(--accent);
color: var(--bg);
}
.arrow:active { transform: scale(0.92); } .dock__progress {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 2px;
background: var(--muted-2);
}
.dock__progress span {
display: block;
height: 100%;
width: 0;
background: var(--accent);
transition: width 220ms var(--ease);
} .dock__credit {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 4px;
z-index: 4;
font-family: var(--font);
font-size: 9.5px;
letter-spacing: 0.08em;
color: rgba(243, 239, 231, 0.3);
text-decoration: none;
white-space: nowrap;
transition: color 300ms var(--ease);
}
.dock__credit:hover { color: rgba(243, 239, 231, 0.72); }
@media (max-width: 640px) {
:root { --strip-h: 86px; }
.caption { max-width: 78vw; }
.chrome { align-items: center; }
.meta .place { display: none; }
.arrow { width: 48px; height: 48px; font-size: 22px; }
.stage__hint { bottom: calc(var(--strip-h) + 10px); }
} .viewer {
position: fixed;
inset: 0;
z-index: 80;
display: grid;
place-items: center;
background: rgba(6, 6, 7, 0.96);
backdrop-filter: blur(8px);
opacity: 0;
transition: opacity 300ms var(--ease);
}
.viewer[hidden] { display: none; }
.viewer.is-open { opacity: 1; }
.viewer__stage {
width: 100vw;
height: 100vh;
position: relative;
overflow: hidden;
cursor: zoom-in;
touch-action: none;
} .viewer__frame {
position: absolute;
inset: 0;
display: grid;
place-items: center;
pointer-events: none;
opacity: 0;
will-change: opacity, transform;
transition: opacity 300ms ease, transform 440ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.viewer__frame.is-active { opacity: 1; }
.viewer__img {
max-width: 92vw;
max-height: 88vh;
object-fit: contain;
user-select: none;
-webkit-user-drag: none;
transform-origin: center center;
transition: transform 120ms ease-out;
filter: drop-shadow(0 40px 120px rgba(0, 0, 0, 0.8));
will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
.viewer__frame { transition: opacity 120ms ease; }
}
.viewer__cap {
position: fixed;
left: 50%;
bottom: 22px;
transform: translateX(-50%);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
pointer-events: none;
text-align: center;
}
.viewer__nav {
position: fixed;
top: 50%;
transform: translateY(-50%);
appearance: none;
width: 52px;
height: 52px;
border: 1px solid rgba(243, 239, 231, 0.34);
border-radius: 50%; background: rgba(11, 10, 9, 0.52);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: var(--ink);
font-family: var(--font);
font-size: 18px;
cursor: pointer;
display: grid;
place-items: center;
transition: border-color 300ms var(--ease), color 300ms var(--ease), background 300ms var(--ease);
}
.viewer__nav:hover { border-color: var(--accent); color: var(--accent); }
.viewer__nav--prev { left: clamp(12px, 3vw, 34px); }
.viewer__nav--next { right: clamp(12px, 3vw, 34px); }
.viewer__zoom {
position: fixed;
left: 50%;
bottom: 54px;
transform: translateX(-50%);
display: flex;
gap: 10px;
}
.viewer__zoom button {
appearance: none;
width: 40px;
height: 40px;
border: 1px solid rgba(243, 239, 231, 0.34);
border-radius: 50%; background: rgba(11, 10, 9, 0.52);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: var(--ink);
font-family: var(--font);
font-size: 20px;
line-height: 1;
cursor: pointer;
transition: border-color 300ms var(--ease), color 300ms var(--ease), background 300ms var(--ease);
}
.viewer__zoom button:hover { border-color: var(--accent); color: var(--accent); }
.viewer__close {
position: fixed;
top: calc(var(--pad) - 6px);
right: calc(var(--pad) - 8px);
appearance: none;
background: none;
border: 0;
color: var(--ink);
font-family: var(--font);
font-size: 12px;
letter-spacing: 0.28em;
text-transform: uppercase;
cursor: pointer;
padding: 15px 16px; }
@media (max-width: 640px) {
.viewer__nav { width: 44px; height: 44px; }
.viewer__cap { bottom: 16px; font-size: 11px; }
.viewer__zoom { bottom: 46px; }
} .intro {
position: fixed;
inset: 0;
z-index: 18;
display: grid;
place-items: center;
padding: calc(var(--pad) + 70px) var(--pad) calc(var(--strip-h) + var(--pad));
text-align: center;
pointer-events: none;
will-change: opacity, transform;
}
.intro__inner { max-width: min(640px, 90vw); display: grid; gap: clamp(16px, 2.6vw, 26px); }
.intro__title {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: clamp(28px, 5.2vw, 60px);
line-height: 1.04;
letter-spacing: -0.015em;
color: var(--ink);
}
.intro__text {
font-size: clamp(14px, 1.55vw, 18px);
line-height: 1.65;
color: rgba(243, 239, 231, 0.66);
max-width: 52ch;
margin: 0 auto;
white-space: pre-line;
}
.intro__cue {
position: absolute;
left: 50%;
bottom: calc(var(--strip-h) + 8px);
transform: translateX(-50%);
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--muted);
display: flex;
align-items: center;
gap: 8px;
}
.intro__arrow { display: inline-block; animation: paulo-bob 1.8s ease-in-out infinite; }
@keyframes paulo-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.intro__title, .intro__text { animation: paulo-introup 0.9s var(--ease) both; }
.intro__text { animation-delay: 0.12s; }
@keyframes paulo-introup { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
body.cat-empty .intro { display: none; } .stage__empty {
position: absolute;
inset: 0;
display: grid;
place-items: center;
text-align: center;
padding: 0 var(--pad);
color: var(--muted);
font-family: var(--font-display);
font-style: italic;
font-size: clamp(18px, 2.4vw, 26px);
pointer-events: none;
}
.stage__empty[hidden] { display: none; } .cats {
position: fixed;
top: calc(var(--pad) + clamp(34px, 4.6vw, 54px));
left: var(--pad);
z-index: 21;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: clamp(2px, 0.5vw, 5px);
max-height: 62vh;
}
.cats__btn {
appearance: none;
background: none;
border: 0;
padding: 3px 0 7px;
position: relative;
cursor: pointer;
white-space: nowrap;
color: var(--muted);
font-family: var(--font-display);
font-style: italic;
font-size: clamp(15px, 1.7vw, 21px);
line-height: 1.05;
letter-spacing: 0.005em;
transition: color 0.3s var(--ease);
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}
.cats__btn:hover { color: var(--ink); }
.cats__btn.is-active { color: var(--ink); } .cats__btn.is-active::after {
content: "";
position: absolute;
left: -6px; right: -6px; bottom: 2px;
height: 7px;
background: var(--accent);
clip-path: polygon(0 46%, 7% 24%, 18% 58%, 30% 20%, 42% 62%, 54% 26%, 66% 60%, 78% 22%, 89% 56%, 96% 34%, 100% 48%, 100% 100%, 0 100%);
opacity: 0.9;
animation: paint 460ms var(--ease);
} .peek {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
z-index: 1;
display: grid;
pointer-events: none;
transition: opacity 0.5s var(--ease);
}
.peek:not(.has) { opacity: 0; }
.peek.has { pointer-events: auto; }
.peek__card {
grid-area: 1 / 1;
width: clamp(58px, 9vw, 110px);
aspect-ratio: 3 / 4;
border-radius: 4px;
overflow: hidden;
background: #000;
border: 1px solid rgba(243, 239, 231, 0.2);
box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55);
cursor: pointer;
padding: 0;
transform: translate(-42%, calc(var(--k) * 13px - 13px)) rotate(calc(2deg + var(--k) * 2.6deg));
transition: transform 0.45s var(--ease), box-shadow 0.3s var(--ease);
}
.peek__card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.peek.has:hover .peek__card {
transform: translate(-14%, calc(var(--k) * 16px - 13px)) rotate(calc(1.5deg + var(--k) * 2deg));
}
.peek__badge {
position: absolute;
left: calc(100% - 4px);
top: -14px;
z-index: 20;
background: rgba(11, 10, 9, 0.72);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(243, 239, 231, 0.22);
color: var(--ink);
font-size: 11px;
letter-spacing: 0.06em;
padding: 3px 8px;
border-radius: 100px;
white-space: nowrap;
pointer-events: none;
} .dims {
--gap: 16px; --tick: 7px; position: absolute;
z-index: 3;
pointer-events: none;
color: var(--muted);
opacity: 0;
transition: opacity 0.35s var(--ease);
}
.dims.is-on { opacity: 1; transition-duration: 0.6s; }
.dims__axis {
position: absolute;
display: flex;
align-items: center;
gap: 10px;
}
.dims__w { left: 0; right: 0; top: calc(var(--ot, 0px) - var(--gap)); height: var(--tick); transform: translateY(-50%); }
.dims__h { top: 0; bottom: 0; left: calc(var(--ol, 0px) - var(--gap)); width: var(--tick); transform: translateX(-50%); flex-direction: column; }
.dims__label {
flex: none;
font-size: 11px;
line-height: 1;
letter-spacing: 0.2em;
text-transform: uppercase;
white-space: nowrap;
opacity: 0;
transition: opacity 0.4s var(--ease);
}
.dims__h .dims__label { writing-mode: vertical-rl; transform: rotate(180deg); }
.dims__seg {
flex: 1 1 0;
align-self: stretch;
position: relative;
transition: transform 0.7s var(--ease);
} .dims__seg::before { content: ""; position: absolute; }
.dims__w .dims__seg::before {
left: 0; right: 0; top: 50%; height: 1px;
background: repeating-linear-gradient(to right, currentColor 0 4px, transparent 4px 8px);
}
.dims__h .dims__seg::before {
top: 0; bottom: 0; left: 50%; width: 1px;
background: repeating-linear-gradient(to bottom, currentColor 0 4px, transparent 4px 8px);
} .dims__seg::after { content: ""; position: absolute; background: currentColor; }
.dims__w .dims__seg::after { top: 0; bottom: 0; width: 1px; }
.dims__w .dims__seg--a::after { left: 0; }
.dims__w .dims__seg--b::after { right: 0; }
.dims__h .dims__seg::after { left: 0; right: 0; height: 1px; }
.dims__h .dims__seg--a::after { top: 0; }
.dims__h .dims__seg--b::after { bottom: 0; } .dims__w .dims__seg--a { transform-origin: right center; }
.dims__w .dims__seg--b { transform-origin: left center; }
.dims__h .dims__seg--a { transform-origin: center bottom; }
.dims__h .dims__seg--b { transform-origin: center top; }
.dims:not(.is-on) .dims__w .dims__seg { transform: scaleX(0); transition-duration: 0.3s; }
.dims:not(.is-on) .dims__h .dims__seg { transform: scaleY(0); transition-duration: 0.3s; }
.dims.is-on .dims__label { opacity: 1; transition-delay: 0.15s; }
.dims.is-on .dims__h .dims__seg { transition-delay: 0.08s; } .dock { transition: opacity 0.5s var(--ease); }
body.on-intro .dock,
body.on-intro .caption,
body.on-intro .stage__hint,
body.on-intro .peek,
body.on-intro .dims { opacity: 0 !important; pointer-events: none; } .viewer__strip {
position: fixed;
left: 50%;
bottom: 94px;
transform: translateX(-50%);
display: flex;
gap: 8px;
max-width: 86vw;
overflow-x: auto;
padding: 6px;
z-index: 6;
scrollbar-width: none;
}
.viewer__strip::-webkit-scrollbar { display: none; }
.viewer__strip[hidden] { display: none; }
.viewer__thumb {
flex: 0 0 auto;
width: 46px;
height: 46px;
padding: 0;
border-radius: 4px;
overflow: hidden;
background: #000;
border: 1px solid rgba(243, 239, 231, 0.24);
cursor: pointer;
opacity: 0.5;
transition: opacity 0.2s var(--ease), border-color 0.2s var(--ease);
}
.viewer__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.viewer__thumb:hover { opacity: 0.85; }
.viewer__thumb.is-active { opacity: 1; border-color: var(--accent); }
@media (max-width: 640px) {
.intro { padding: calc(var(--pad) + 92px) var(--pad) calc(var(--strip-h) + var(--pad)); }
.intro__title { font-size: clamp(26px, 8vw, 38px); }
.intro__cue { bottom: calc(var(--strip-h) + 4px); } .cats {
flex-direction: row;
align-items: center;
gap: clamp(12px, 4vw, 18px);
top: calc(var(--pad) + 30px);
max-width: calc(100vw - var(--pad) * 2);
max-height: none;
overflow-x: auto;
scrollbar-width: none;
}
.cats::-webkit-scrollbar { display: none; } .cats__btn { font-size: 15px; padding: 15px 4px 14px; }
.cats__btn.is-active::after { bottom: 12px; } .stage__layer { inset: calc(var(--pad) + 78px) 12vw calc(var(--strip-h) + 122px); }
.peek__card { width: clamp(46px, 15vw, 68px); } .peek__badge { left: 14px; top: -10px; font-size: 10px; padding: 2px 7px; } .gallery::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: calc(var(--strip-h) + 188px);
background: linear-gradient(to top, var(--bg) 32%, rgba(11, 10, 9, 0.5) 64%, transparent);
z-index: 5;
pointer-events: none;
} .caption { max-width: 86vw; bottom: calc(var(--strip-h) + 4px); }
.caption__story { max-width: 86vw; }
.caption__story-text { -webkit-line-clamp: 1; } .caption__story.is-open .caption__story-text { max-height: 30vh; } .caption__more { padding: 16px 8px 2px; margin-top: 0; } .stage__hint { display: none; } .dims { display: none; }
.viewer__strip { bottom: 82px; }
.viewer__thumb { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
* { transition-duration: 200ms !important; animation-duration: 200ms !important; }
.stage__hint { transition: none; }
.intro__arrow { animation: none; }
.intro__title, .intro__text { animation: none; } .dims .dims__seg { transform: none !important; }
}