@font-face {
font-family: 'Inter Tight';
font-style: normal;
font-weight: 200 600;
font-display: swap;
src: url(/fonts/intertight-cyrillic.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Inter Tight';
font-style: normal;
font-weight: 200 600;
font-display: swap;
src: url(/fonts/intertight-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 200 600;
font-display: swap;
src: url(/fonts/inter-cyrillic.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 200 600;
font-display: swap;
src: url(/fonts/inter-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
--paper: #f9f6e9;
--paper-sunk: #ede9d6;
--paper-field: #f3f0e0;
--ink: #0a0a0a;
--noir: #0a0a0a;
--ink-70: #3d3d3d;
--ink-45: #6b6b6b;
--ink-30: #8c8c8c;
--rule: rgba(0, 0, 0, 0.16);
--rule-soft: rgba(0, 0, 0, 0.08);
--on-noir: #ffffff;
--on-noir-60: rgba(255, 255, 255, 0.62);
--on-noir-35: rgba(255, 255, 255, 0.4);
--rule-noir: rgba(255, 255, 255, 0.22);
--sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--mono: var(--sans);
--fs-hero: clamp(2.6rem, 8.2vw, 9.5rem);
--fs-display: clamp(2.1rem, 5.4vw, 5rem);
--fs-title: clamp(1.625rem, 2.9vw, 2.75rem);
--fs-lead: clamp(1.125rem, 0.6vw + 1rem, 1.5rem);
--fs-body: clamp(1rem, 0.2vw + 0.95rem, 1.0625rem);
--fs-small: 0.9375rem;
--fs-mono: 0.75rem;
--tr-mono: 0.1em;
--tr-display: -0.038em;
--tr-title: -0.028em;
--page-x: clamp(1.125rem, 3vw, 3.25rem);
--gutter: clamp(0.75rem, 1.2vw, 1.25rem);
--section-y: clamp(5rem, 10vw, 11rem);
--max: 1800px;
--measure: 62ch;
--e-out: cubic-bezier(0.16, 1, 0.3, 1);
--e-line: cubic-bezier(0.165, 0.84, 0.44, 1);
--e-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--t-fast: 0.2s;
--t-mid: 0.45s;
--cta: #413c36;
--cta-on: #f9f6e9;
--header-h: 60px;
color-scheme: light dark;
}
@media (min-width: 900px) {
:root {
--header-h: 76px;
}
}
body[data-sheet='dark'] {
--paper: #413c36;
--paper-sunk: #383430;
--paper-field: #3d3934;
--ink: #ffffff;
--ink-70: rgba(255, 255, 255, 0.72);
--ink-45: rgba(255, 255, 255, 0.55);
--ink-30: rgba(255, 255, 255, 0.4);
--rule: rgba(255, 255, 255, 0.22);
--rule-soft: rgba(255, 255, 255, 0.12);
--noir: #ffffff;
--on-noir: #413c36;
--on-noir-60: rgba(65, 60, 54, 0.65);
--on-noir-35: rgba(65, 60, 54, 0.45);
--rule-noir: rgba(65, 60, 54, 0.25);
--cta: #ffffff;
--cta-on: #413c36;
color-scheme: dark;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + 1rem);
}
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--text);
font-size: var(--fs-body);
font-weight: 400;
line-height: 1.6;
letter-spacing: -0.006em;
font-feature-settings: 'ss01' 1, 'cv05' 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
body.is-locked {
overflow: hidden;
}
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
}
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}
img,
svg,
video {
display: block;
max-width: 100%;
}
img {
filter: sepia(0.12) saturate(1.04);
}
button,
input,
select,
textarea {
font: inherit;
color: inherit;
}
button {
background: none;
border: 0;
padding: 0;
cursor: pointer;
}
a {
color: inherit;
text-decoration: none;
}
:focus-visible {
outline: 1.5px solid var(--ink);
outline-offset: 3px;
}
:focus:not(:focus-visible) {
outline: none;
}
::selection {
background: var(--ink);
color: var(--paper);
}
.mono,
.label {
font-family: var(--mono);
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: var(--tr-mono);
text-transform: uppercase;
line-height: 1.2;
font-variant-numeric: tabular-nums;
}
.label {
color: var(--ink-45);
font-weight: 400;
letter-spacing: 0.17em;
}
.mono-num {
font-family: var(--mono);
font-variant-numeric: tabular-nums;
letter-spacing: 0;
}
h1,
h2,
h3,
.h1,
.h2,
.h3 {
font-family: var(--sans);
font-weight: 400;
text-wrap: balance;
}
h1,
.h1 {
font-weight: 250;
letter-spacing: -0.018em;
}
h2,
.h2 {
font-weight: 300;
letter-spacing: -0.02em;
}
@media (min-width: 900px) {
h1,
.h1 {
font-weight: 200;
}
h2,
.h2 {
font-weight: 250;
}
}
.h1 {
font-size: var(--fs-display);
line-height: 0.98;
}
.h2 {
font-size: var(--fs-title);
line-height: 1.1;
}
.h3 {
font-size: clamp(1.125rem, 1.5vw, 1.5rem);
line-height: 1.2;
letter-spacing: -0.02em;
}
.lead {
font-family: var(--sans);
font-size: var(--fs-lead);
line-height: 1.34;
font-weight: 400;
letter-spacing: -0.024em;
max-width: 40ch;
text-wrap: pretty;
}
.prose {
max-width: var(--measure);
color: var(--ink-70);
text-wrap: pretty;
font-size: clamp(1rem, 0.35vw + 0.92rem, 1.125rem);
line-height: 1.72;
letter-spacing: -0.004em;
}
.prose p + p {
margin-top: 1.15em;
}
.prose strong {
color: var(--ink);
font-weight: 500;
}
.shell {
max-width: var(--max);
margin-inline: auto;
padding-inline: var(--page-x);
}
.section {
padding-block: var(--section-y);
}
.rule {
height: 1px;
background: var(--rule);
border: 0;
margin: 0;
}
.rule-draw {
transform: scaleX(0);
transform-origin: left;
transition: transform 1.1s var(--e-line);
}
.rule-draw.is-in {
transform: scaleX(1);
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.skip {
position: fixed;
top: 0.5rem;
left: 0.5rem;
z-index: 200;
background: var(--ink);
color: var(--paper);
padding: 0.6rem 1rem;
transform: translateY(-160%);
transition: transform var(--t-fast) var(--e-out);
}
.skip:focus {
transform: none;
}
[data-reveal] {
opacity: 0;
transform: translate3d(0, 32px, 0);
transition:
opacity 0.85s var(--e-out),
transform 0.95s var(--e-out);
transition-delay: var(--reveal-delay, 0s);
}
[data-reveal].is-in {
opacity: 1;
transform: none;
}
[data-lines] .line {
display: block;
overflow: hidden;
padding-block: 0.06em 0.2em;
margin-block: -0.06em -0.2em;
}
[data-lines] .line > span {
display: block;
transform: translate3d(0, 104%, 0);
transition: transform 1.15s var(--e-out);
transition-delay: calc(var(--i, 0) * 0.11s + var(--reveal-delay, 0s));
}
[data-lines].is-in .line > span {
transform: none;
}
.reveal-img {
overflow: clip;
clip-path: inset(0 0 100% 0);
transition: clip-path 1.1s var(--e-out);
transition-delay: var(--reveal-delay, 0s);
}
.reveal-img.is-in {
clip-path: inset(0 0 0 0);
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
[data-reveal],
[data-lines] .line > span,
.rule-draw {
opacity: 1 !important;
transform: none !important;
}
.reveal-img {
clip-path: none !important;
}
}
@view-transition {
navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.5s;
animation-timing-function: cubic-bezier(0.33, 0, 0.15, 1);
animation-fill-mode: both;
}
::view-transition-old(root) {
animation-name: page-out;
}
::view-transition-new(root) {
animation-name: page-in;
}
@keyframes page-out {
to {
opacity: 0;
transform: translateX(-3%);
}
}
@keyframes page-in {
from {
opacity: 0;
transform: translateX(4%);
}
}
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) {
animation: none;
}
}
.header {
position: fixed;
inset: 0 0 auto;
z-index: 90;
height: var(--header-h);
display: flex;
align-items: center;
padding-inline: var(--page-x);
background: var(--paper);
border-bottom: 1px solid var(--rule);
transition: transform var(--t-mid) var(--e-out);
}
.header.is-hidden {
transform: translateY(-101%);
}
.header__inner {
width: 100%;
max-width: var(--max);
margin-inline: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
@media (min-width: 1000px) {
.header__inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
}
}
.wordmark {
justify-self: start;
display: inline-flex;
align-items: baseline;
gap: 0.5em;
font-size: clamp(0.8125rem, 1vw, 0.9375rem);
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1;
white-space: nowrap;
}
.wordmark sup {
font-family: var(--mono);
font-size: 0.58em;
letter-spacing: 0.04em;
color: var(--ink-45);
text-transform: uppercase;
vertical-align: super;
}
.nav {
display: none;
justify-self: center;
gap: clamp(1rem, 2vw, 2rem);
align-items: center;
}
@media (min-width: 1000px) {
.nav {
display: flex;
}
}
.nav a {
position: relative;
font-family: var(--mono);
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: var(--tr-mono);
text-transform: uppercase;
color: var(--ink-45);
padding-block: 0.4rem;
white-space: nowrap;
transition: color var(--t-fast) linear;
}
.nav a:hover {
color: var(--ink);
}
.nav a[aria-current='page'] {
color: var(--ink);
}
.nav a[aria-current='page']::before {
content: '[';
margin-right: 0.3em;
color: var(--ink-30);
}
.nav a[aria-current='page']::after {
content: ']';
margin-left: 0.3em;
color: var(--ink-30);
}
.roll {
display: inline-block;
overflow: hidden;
vertical-align: top;
line-height: 1.25;
height: 1.25em;
}
.roll__in {
display: block;
position: relative;
transition: transform 0.5s var(--e-out);
}
.roll__in > span {
display: block;
line-height: 1.25;
white-space: nowrap;
}
.roll__in > span:last-child {
position: absolute;
top: 100%;
left: 0;
width: 100%;
}
a:hover .roll__in,
button:hover .roll__in {
transform: translateY(-100%);
}
@media (prefers-reduced-motion: reduce) {
.roll__in {
transition: none;
}
}
.tools {
justify-self: end;
display: flex;
align-items: center;
gap: clamp(0.65rem, 1.4vw, 1.25rem);
}
.tool {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--mono);
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: var(--tr-mono);
text-transform: uppercase;
color: var(--ink-45);
line-height: 1;
padding-block: 0.4rem;
transition: color var(--t-fast) linear;
}
.tool:hover {
color: var(--ink);
}
.tool svg {
width: 26px;
height: 26px;
stroke: currentColor;
fill: none;
stroke-width: 1;
}
.lang.lang--header {
display: none;
}
@media (min-width: 1000px) {
.lang.lang--header {
display: inline-flex;
}
.lang.lang--menu {
display: none;
}
}
.lang--menu {
margin-bottom: 0.5rem;
font-size: 0.875rem;
}
.lang--menu a {
padding: 0.35rem 0.4rem 0.35rem 0;
}
.lang {
display: inline-flex;
align-items: center;
font-family: var(--mono);
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: var(--tr-mono);
text-transform: uppercase;
}
.lang a {
padding: 0.35rem 0.22rem;
color: var(--ink-30);
transition: color var(--t-fast) linear;
}
.lang a:hover {
color: var(--ink-70);
}
.lang a[aria-current='true'] {
color: var(--ink);
}
.lang i {
font-style: normal;
color: var(--ink-30);
}
.tool--basket {
gap: 0.5rem;
}
.count-badge {
display: none;
min-width: 2.4rem;
height: 1.4rem;
padding-inline: 0.5rem;
border-radius: 999px;
background: var(--cta);
color: var(--cta-on);
font-family: var(--mono);
font-size: 0.75rem;
font-weight: 500;
line-height: 1.4rem;
text-align: center;
font-variant-numeric: tabular-nums;
}
.count-badge.is-on {
display: block;
}
.burger {
display: inline-grid;
place-items: center;
width: 44px;
height: 44px;
margin-left: 0.5rem;
margin-right: calc(var(--page-x) * -1 + 0.25rem);
}
@media (min-width: 1000px) {
.burger {
display: none;
}
}
.burger__bars {
display: block;
position: relative;
width: 20px;
height: 9px;
}
.burger__bars i {
position: absolute;
left: 0;
width: 100%;
height: 1.5px;
background: var(--ink);
transition:
transform 0.4s var(--e-out),
top 0.3s var(--e-out);
}
.burger__bars i:first-child {
top: 0;
}
.burger__bars i:last-child {
top: 7.5px;
}
.burger[aria-expanded='true'] .burger__bars i:first-child {
top: 3.75px;
transform: rotate(45deg);
}
.burger[aria-expanded='true'] .burger__bars i:last-child {
top: 3.75px;
transform: rotate(-45deg);
}
.menu {
position: fixed;
inset: var(--header-h) 0 0;
z-index: 89;
background: #413c36;
color: #ffffff;
color-scheme: dark;
padding: clamp(1.5rem, 5vw, 3rem) var(--page-x) calc(1.5rem + env(safe-area-inset-bottom));
display: flex;
flex-direction: column;
clip-path: inset(0 0 100% 0);
transition: clip-path 0.62s var(--e-in-out);
overflow-y: auto;
overscroll-behavior: contain;
}
.menu.is-open {
clip-path: inset(0 0 0 0);
}
.menu__nav {
display: flex;
flex-direction: column;
margin-block: auto;
}
.menu__nav a {
position: relative;
display: flex;
align-items: baseline;
padding: calc(clamp(0.5rem, 2vw, 0.9rem) + 0.12em) 0 calc(clamp(0.5rem, 2vw, 0.9rem) + 0.3em);
margin-block: -0.12em -0.3em;
overflow: hidden;
font-size: clamp(2.25rem, 13vw, 5rem);
font-weight: 250;
letter-spacing: -0.022em;
line-height: 1.06;
transform: translate3d(0, 110%, 0);
opacity: 0;
transition:
transform 0.75s var(--e-out),
opacity 0.4s linear,
color 0.25s linear;
transition-delay: calc(var(--i) * 0.055s + 0.1s);
}
.menu.is-open .menu__nav a {
transform: none;
opacity: 1;
}
.menu__nav a:active {
color: var(--ink-45);
}
.menu__nav a .roll {
line-height: 1.06;
height: 1.06em;
}
.menu__nav a .roll__in > span {
line-height: 1.06;
}
.menu__foot {
margin-top: auto;
padding-top: 1.5rem;
border-top: 1px solid var(--rule-noir);
display: grid;
gap: 0.55rem;
opacity: 0;
transform: translateY(10px);
transition:
opacity 0.5s linear,
transform 0.6s var(--e-out);
transition-delay: 0.4s;
}
.menu.is-open .menu__foot {
opacity: 1;
transform: none;
}
.menu__foot a {
font-family: var(--mono);
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: var(--tr-mono);
text-transform: uppercase;
color: rgba(255, 255, 255, 0.62);
transition: color var(--t-fast) linear;
}
.menu__foot a:hover {
color: #ffffff;
}
.menu__foot .lang {
color: rgba(255, 255, 255, 0.4);
}
.menu__foot .lang [aria-current='true'],
.menu__foot .lang .is-on {
color: #ffffff;
}
@media (prefers-reduced-motion: reduce) {
.menu,
.menu__nav a,
.menu__foot {
transition-duration: 0.01ms;
}
}
.footer {
border-top: 1px solid var(--rule);
padding-top: clamp(2rem, 4vw, 3.25rem);
}
.footer__claim-block {
display: grid;
justify-items: center;
gap: clamp(1.75rem, 3.5vw, 2.75rem);
text-align: center;
padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.footer__claim {
font-family: var(--sans);
font-size: clamp(1.5rem, 3.2vw, 3rem);
font-weight: 250;
line-height: 1.06;
letter-spacing: -0.018em;
max-width: 38ch;
text-wrap: balance;
}
@media (min-width: 900px) {
.footer__claim {
font-weight: 200;
}
}
.footer__cols {
display: grid;
gap: 1.75rem var(--gutter);
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 860px) {
.footer__cols {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.footer__cols p {
font-family: var(--text);
font-size: 0.875rem;
font-weight: 400;
letter-spacing: -0.004em;
line-height: 1.75;
color: var(--ink-45);
max-width: 30ch;
}
.footer__cols--right p {
margin-left: auto;
}
.footer__cols a {
transition: color 0.4s var(--e-line);
}
.footer__cols a:hover {
color: var(--ink);
}
.footer__cols--right {
text-align: right;
}
@media (max-width: 859px) {
.footer__cols--right {
text-align: left;
}
}
.footer__rule {
margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.footer__cols {
padding-bottom: calc(clamp(2.5rem, 5vw, 4rem) + env(safe-area-inset-bottom));
}
.footer__wordmark {
display: grid;
place-items: center;
width: clamp(200px, 25vw, 340px);
aspect-ratio: 1;
padding: clamp(1.75rem, 3.5vw, 3rem);
background: #000000;
margin: clamp(2.5rem, 5vw, 4.5rem) auto clamp(3.5rem, 7vw, 5.5rem);
color: var(--on-noir);
transition: color 0.4s var(--e-line);
}
.footer__wordmark:hover {
color: var(--on-noir-60);
}
.footer__wordmark svg {
width: 100%;
height: auto;
fill: currentColor;
}
.footer__wordmark[data-reveal] {
opacity: 1;
transform: none;
transition: clip-path 1.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.footer__wordmark {
clip-path: inset(0 0 100% 0);
transition: clip-path 1.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.footer__wordmark.is-in {
clip-path: inset(0 0 0 0);
}
.footer__wordmark .lgl {
opacity: 0;
}
.footer__wordmark.is-in .lgl {
animation: letter-focus 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
animation-delay: calc(0.8s + var(--i) * 0.07s);
}
@keyframes letter-focus {
to {
opacity: 1;
filter: blur(0);
}
}
@media (prefers-reduced-motion: reduce) {
.footer__wordmark .lgl {
opacity: 1;
filter: none;
animation: none;
}
}
.footer__mark {
margin-top: clamp(2.5rem, 5vw, 4rem);
border-top: 1px solid var(--rule);
padding-block: 1rem calc(1rem + env(safe-area-inset-bottom));
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
justify-content: space-between;
font-family: var(--mono);
font-size: 0.625rem;
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-30);
}
.peek {
position: fixed;
top: 0;
left: 0;
z-index: 60;
width: clamp(180px, 17vw, 260px);
aspect-ratio: 3 / 4;
background: var(--paper-sunk);
pointer-events: none;
opacity: 0;
transform: translate(-50%, -50%);
transition: opacity 0.25s linear;
overflow: hidden;
}
.peek.is-on {
opacity: 1;
}
.peek img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (hover: none), (pointer: coarse), (max-width: 900px) {
.peek {
display: none;
}
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 1.25rem;
height: 3.25rem;
padding: 0 0.5rem 0 1.5rem;
border-radius: 999px;
font-family: var(--mono);
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: var(--tr-mono);
text-transform: uppercase;
line-height: 1;
color: var(--cta);
background: transparent;
border: 1px solid var(--cta);
transition:
background-color 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
color 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.btn::after {
content: '↗';
flex: none;
display: grid;
place-items: center;
width: 10px;
height: 10px;
border-radius: 50%;
background: currentColor;
font-size: 0;
transition:
width 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
height 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
font-size 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
background-color 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
color 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.btn:hover {
background: var(--cta);
color: var(--cta-on);
}
.btn:hover::after {
width: 2.25rem;
height: 2.25rem;
background: var(--cta-on);
color: var(--cta);
font-size: 0.9375rem;
}
.btn .arrow {
display: none;
}
.btn--ghost {
border-color: var(--rule);
}
.btn--block {
width: 100%;
}
.btn[disabled] {
opacity: 0.35;
pointer-events: none;
}
.link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--mono);
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: var(--tr-mono);
text-transform: uppercase;
border-bottom: 1px solid var(--rule);
padding-bottom: 0.35rem;
transition: border-color var(--t-fast) linear;
}
.link:hover {
border-color: var(--ink);
}
.link .arrow {
transition: transform var(--t-mid) var(--e-out);
}
.link:hover .arrow {
transform: translateX(4px);
}
.media {
position: relative;
display: block;
overflow: clip;
background: var(--paper-sunk) center / cover no-repeat;
}
.media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.index {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
border-top: 1px solid var(--rule-soft);
border-left: 1px solid var(--rule-soft);
}
@media (min-width: 700px) {
.index {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 1200px) {
.index[data-density='comfortable'] {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (min-width: 1600px) {
.index[data-density='comfortable'] {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
.index[data-density='dense'] {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (min-width: 700px) {
.index[data-density='dense'] {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
@media (min-width: 1200px) {
.index[data-density='dense'] {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
}
@media (min-width: 1600px) {
.index[data-density='dense'] {
grid-template-columns: repeat(9, minmax(0, 1fr));
}
}
.index[data-density='dense'] .card__body,
.index[data-density='dense'] .card__count {
display: none;
}
.index[data-density='dense'] .card__frame {
aspect-ratio: 1;
}
.index[data-density='large'] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.index > li {
background: var(--paper);
border-right: 1px solid var(--rule-soft);
border-bottom: 1px solid var(--rule-soft);
}
.index > li.is-hidden {
display: none;
}
.card {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
}
.card {
padding: clamp(1rem, 2.2vw, 2rem);
}
.card__frame {
position: relative;
overflow: hidden;
aspect-ratio: 4 / 5;
background: var(--paper) center / cover no-repeat;
}
.card__frame img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.5s var(--e-out);
}
.card:hover .card__frame img {
transform: scale(1.035);
}
.card__body {
padding: clamp(0.85rem, 1.4vw, 1.15rem) 0 0;
display: flex;
flex-direction: column;
flex: 1;
transition: background-color var(--t-fast) linear;
}
.card:hover .card__title {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.28em;
}
.card__shot {
position: absolute;
inset: 0;
opacity: 0;
}
.card__shot.is-on {
opacity: 1;
}
.card__count {
position: absolute;
right: 0;
bottom: 0;
padding: 0.3rem 0.45rem;
background: var(--paper);
font-family: var(--mono);
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: var(--tr-mono);
color: var(--ink-45);
font-variant-numeric: tabular-nums;
opacity: 0;
transition: opacity var(--t-fast) linear;
}
.card:hover .card__count {
opacity: 1;
}
.card__artist {
font-family: var(--mono);
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: var(--tr-mono);
text-transform: uppercase;
color: var(--ink-45);
margin-bottom: 0.45rem;
}
.card__title {
font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
font-weight: 400;
line-height: 1.28;
letter-spacing: -0.022em;
}
.card__meta {
margin-top: auto;
padding-top: 0.7rem;
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.75rem;
font-family: var(--mono);
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: var(--tr-mono);
color: var(--ink-45);
}
.card__meta > span:first-child {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.card__price {
color: var(--ink);
white-space: nowrap;
flex: none;
font-variant-numeric: tabular-nums;
}
.card__link {
position: absolute;
inset: 0;
z-index: 2;
}
.card__save {
position: absolute;
z-index: 3;
top: 0;
right: 0;
width: 30px;
height: 30px;
display: grid;
place-items: center;
background: var(--paper);
border: 1px solid var(--rule);
opacity: 0;
transition: opacity var(--t-fast) linear;
}
.card:hover .card__save,
.card__save:focus-visible,
.card__save.is-on {
opacity: 1;
}
.card__save svg {
width: 12px;
height: 12px;
fill: none;
stroke: var(--ink);
stroke-width: 1.4;
}
.card__save.is-on svg {
fill: var(--ink);
}
@media (hover: none) {
.card__save {
opacity: 1;
}
}
.filters {
position: sticky;
top: var(--sticky-top, var(--header-h));
transition: top var(--t-mid) var(--e-out);
z-index: 40;
background: var(--paper);
border-bottom: 1px solid var(--rule);
}
.filters__row {
display: flex;
align-items: center;
gap: 0.75rem;
height: 46px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
}
.filters__row > * {
flex: none;
}
.filters__row::-webkit-scrollbar {
display: none;
}
.chips {
display: flex;
gap: 0.1rem;
flex: none;
margin-right: auto;
}
.chip {
white-space: nowrap;
padding: 0.35rem 0.55rem;
font-family: var(--mono);
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: var(--tr-mono);
text-transform: uppercase;
color: var(--ink-45);
transition: color var(--t-fast) linear, background-color var(--t-fast) linear;
}
.chip:hover {
color: var(--ink);
}
.chip[aria-pressed='true'] {
color: var(--paper);
background: var(--ink);
}
.chip sup {
margin-left: 0.35em;
opacity: 0.55;
vertical-align: super;
font-size: 0.8em;
}
.combo {
position: relative;
flex: none;
}
.combo__btn {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.35rem 0.75rem;
border-left: 1px solid var(--rule);
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: var(--tr-mono);
text-transform: uppercase;
color: var(--ink-45);
white-space: nowrap;
transition: color var(--t-fast) linear;
}
.combo__btn:hover,
.combo[data-open] .combo__btn {
color: var(--ink);
}
.combo__btn i {
width: 5px;
height: 5px;
border-right: 1px solid currentColor;
border-bottom: 1px solid currentColor;
transform: translateY(-2px) rotate(45deg);
transition: transform var(--t-fast) var(--e-out);
}
.combo[data-open] .combo__btn i {
transform: translateY(1px) rotate(-135deg);
}
.combo__list {
position: fixed;
z-index: 95;
min-width: 17rem;
max-height: 62svh;
overflow-y: auto;
overscroll-behavior: contain;
background: var(--paper);
box-shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.28), 0 0 0 1px var(--rule-soft);
padding: 0.75rem 0;
clip-path: inset(0 0 100% 0);
transition: clip-path 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.combo[data-open] .combo__list {
clip-path: inset(0 0 0 0);
}
.combo__list[hidden] {
display: none;
}
@media (max-width: 699px) {
.combo__list {
left: 0 !important;
right: 0;
top: auto !important;
bottom: 0;
min-width: 0;
max-height: 65svh;
padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
clip-path: inset(100% 0 0 0);
box-shadow: 0 -18px 50px -18px rgba(0, 0, 0, 0.32), 0 0 0 1px var(--rule-soft);
}
.combo[data-open] .combo__list {
clip-path: inset(0 0 0 0);
}
}
.combo__list li {
padding: 0.7rem 1.5rem;
font-size: 0.8125rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-45);
cursor: pointer;
white-space: nowrap;
opacity: 0;
transform: translateY(14px);
transition:
color var(--t-fast) linear,
opacity 0.4s linear,
transform 0.55s var(--e-out);
}
.combo[data-open] .combo__list li {
opacity: 1;
transform: none;
transition-delay: calc(var(--i, 0) * 0.035s + 0.12s);
}
.combo__list li:hover,
.combo__list li:focus-visible {
color: var(--ink);
outline: none;
}
.combo__list li[aria-selected='true'] {
color: var(--ink);
}
@media (prefers-reduced-motion: reduce) {
.combo__list,
.combo__list li {
transition: none;
opacity: 1;
transform: none;
}
}
.select {
position: relative;
flex: none;
}
.select select {
appearance: none;
background: transparent;
border: 0;
border-left: 1px solid var(--rule);
border-radius: 0;
padding: 0.35rem 1.5rem 0.35rem 0.75rem;
font-family: var(--mono);
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: var(--tr-mono);
text-transform: uppercase;
color: var(--ink-45);
cursor: pointer;
transition: color var(--t-fast) linear;
}
.select select:hover {
color: var(--ink);
}
.select::after {
content: '';
position: absolute;
right: 0.6rem;
top: 50%;
width: 5px;
height: 5px;
border-right: 1px solid var(--ink-45);
border-bottom: 1px solid var(--ink-45);
transform: translateY(-70%) rotate(45deg);
pointer-events: none;
}
.filters__count {
flex: none;
padding-left: 0.75rem;
border-left: 1px solid var(--rule);
font-family: var(--mono);
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: var(--tr-mono);
color: var(--ink-30);
font-variant-numeric: tabular-nums;
}
.density {
display: none;
gap: 0;
flex: none;
padding-left: 0.6rem;
border-left: 1px solid var(--rule);
}
@media (min-width: 1100px) {
.density {
display: flex;
}
}
.density button {
width: 26px;
height: 26px;
display: grid;
place-items: center;
color: var(--ink-30);
transition: color var(--t-fast) linear;
}
.density button[aria-pressed='true'],
.density button:hover {
color: var(--ink);
}
.density svg {
width: 11px;
height: 11px;
fill: currentColor;
}
.empty {
padding-block: clamp(3.5rem, 9vw, 7rem);
text-align: center;
color: var(--ink-45);
}
.empty__note {
margin-top: 0.6rem;
font-size: var(--fs-small);
color: var(--ink-30);
}
.load-more {
display: grid;
justify-items: center;
padding-block: clamp(2.5rem, 5vw, 4rem);
}
.scrim {
position: fixed;
inset: 0;
z-index: 100;
background: rgba(10, 10, 10, 0.28);
opacity: 0;
visibility: hidden;
transition: opacity 0.35s linear, visibility 0.35s;
}
.scrim.is-open {
opacity: 1;
visibility: visible;
}
.drawer {
position: fixed;
z-index: 110;
inset: 0 0 0 auto;
width: min(100%, 480px);
background: #413c36;
color: #ffffff;
border-left: 1px solid var(--rule);
display: flex;
flex-direction: column;
transform: translateX(101%);
transition: transform 0.5s var(--e-in-out);
overscroll-behavior: contain;
}
.drawer.is-open {
transform: none;
}
.drawer__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0 var(--page-x);
height: var(--header-h);
border-bottom: 1px solid var(--rule);
flex: none;
}
.drawer__body {
padding: clamp(1.25rem, 2.5vw, 2rem) var(--page-x);
overflow-y: auto;
flex: 1;
}
.drawer__foot {
padding: 1rem var(--page-x) calc(1rem + env(safe-area-inset-bottom));
border-top: 1px solid var(--rule);
flex: none;
}
.drawer__close {
font-family: var(--mono);
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: var(--tr-mono);
text-transform: uppercase;
color: var(--ink-45);
transition: color var(--t-fast) linear;
}
.drawer__close:hover {
color: var(--ink);
}
.saved {
display: grid;
border-top: 1px solid var(--rule);
}
.saved__item {
display: grid;
grid-template-columns: 64px 1fr auto;
gap: 0.9rem;
align-items: start;
padding: 0.9rem 0;
border-bottom: 1px solid var(--rule-soft);
}
.saved__item img {
width: 64px;
aspect-ratio: 1;
object-fit: contain;
}
.saved__item h4 {
font-size: 0.9375rem;
font-weight: 400;
line-height: 1.2;
letter-spacing: -0.02em;
margin: 0;
}
.saved__meta {
font-family: var(--mono);
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: var(--tr-mono);
text-transform: uppercase;
color: var(--ink-45);
margin-top: 0.4rem;
}
.saved__remove {
font-family: var(--mono);
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: var(--tr-mono);
text-transform: uppercase;
color: var(--ink-30);
transition: color var(--t-fast) linear;
}
.saved__remove:hover {
color: var(--ink);
}
.field {
position: relative;
border-bottom: 1px solid var(--rule);
padding-block: 0.75rem;
}
.field label {
display: block;
font-family: var(--mono);
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: var(--tr-mono);
text-transform: uppercase;
color: var(--ink-45);
margin-bottom: 0.4rem;
}
.field input,
.field textarea {
width: 100%;
background: transparent;
border: 0;
padding: 0;
font-size: 0.9375rem;
letter-spacing: -0.015em;
}
.field input::placeholder,
.field textarea::placeholder {
color: var(--ink-30);
}
.field input:focus,
.field textarea:focus {
outline: none;
}
.field:focus-within {
border-color: var(--ink);
}
.field textarea {
resize: vertical;
min-height: 4.5rem;
line-height: 1.55;
}
.field.is-error {
border-color: #c0392b;
}
.field__error {
display: none;
font-family: var(--mono);
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: var(--tr-mono);
text-transform: uppercase;
color: #c0392b;
margin-top: 0.4rem;
}
.field.is-error .field__error {
display: block;
}
.consent {
display: flex;
gap: 0.6rem;
align-items: flex-start;
font-size: 0.75rem;
line-height: 1.5;
color: var(--ink-45);
margin: 1.1rem 0 1.25rem;
}
.consent input {
margin-top: 0.2rem;
accent-color: var(--ink);
width: 14px;
height: 14px;
flex: none;
}
.consent a {
text-decoration: underline;
text-underline-offset: 2px;
}
.form-note {
font-family: var(--mono);
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: var(--tr-mono);
color: var(--ink-45);
margin-top: 0.9rem;
line-height: 1.6;
text-transform: uppercase;
}
.form-status {
display: none;
padding: 0.85rem 1rem;
border: 1px solid var(--ink);
font-size: var(--fs-small);
line-height: 1.5;
margin-bottom: 1.25rem;
}
.form-status.is-on {
display: block;
}
.form-status[data-tone='bad'] {
border-color: #c0392b;
color: #c0392b;
}
.hp {
position: absolute;
left: -9999px;
opacity: 0;
pointer-events: none;
}
.searchbox {
position: relative;
}
.searchbox input {
width: 100%;
background: transparent;
border: 0;
border-bottom: 1px solid var(--ink);
padding: 0.5rem 0 0.6rem 1.4rem;
font-size: 1rem;
letter-spacing: -0.02em;
}
.searchbox input:focus {
outline: none;
}
.searchbox svg {
position: absolute;
left: 0;
top: 0.75rem;
width: 13px;
height: 13px;
stroke: var(--ink-45);
fill: none;
stroke-width: 1.4;
pointer-events: none;
}
.lightbox {
position: fixed;
inset: 0;
z-index: 200;
background: #413c36;
color: var(--on-noir);
display: grid;
grid-template-rows: var(--header-h) 1fr;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s linear, visibility 0.3s;
}
.lightbox.is-open {
opacity: 1;
visibility: visible;
}
.lightbox__bar {
display: flex;
align-items: center;
justify-content: space-between;
padding-inline: var(--page-x);
border-bottom: 1px solid var(--rule);
gap: 1rem;
}
.lightbox__stage {
position: relative;
display: grid;
place-items: center;
padding: clamp(1.5rem, 4vw, 3.5rem) var(--page-x);
overflow: hidden;
}
.lightbox__stage img {
position: absolute;
left: var(--page-x);
top: clamp(1.5rem, 4vw, 3.5rem);
width: calc(100% - 2 * var(--page-x));
height: calc(100% - 2 * clamp(1.5rem, 4vw, 3.5rem));
object-fit: contain;
cursor: zoom-in;
}
.lightbox__lens {
position: absolute;
z-index: 3;
border: 1px solid var(--on-noir);
background: rgba(255, 255, 255, 0.1);
pointer-events: none;
opacity: 0;
transition: opacity var(--t-fast) linear;
}
.lightbox__stage.is-inspecting .lightbox__lens {
opacity: 1;
}
.lightbox__stage.is-inspecting img {
cursor: crosshair;
}
.lightbox__zoom {
position: absolute;
z-index: 4;
top: clamp(1.5rem, 4vw, 3.5rem);
right: clamp(1.5rem, 4vw, 3.5rem);
width: min(38vw, 460px);
height: min(62vh, 620px);
border: 1px solid var(--rule-noir);
background-color: var(--noir);
background-repeat: no-repeat;
pointer-events: none;
opacity: 0;
transition: opacity var(--t-fast) linear;
}
.lightbox__stage.is-inspecting .lightbox__zoom {
opacity: 1;
}
@media (max-width: 899px), (hover: none) {
.lightbox__lens,
.lightbox__zoom {
display: none;
}
}
.lightbox__nav {
display: none;
}
.lightbox__nav {
position: absolute;
top: 0;
bottom: 0;
width: clamp(60px, 12vw, 160px);
display: grid;
place-items: center;
color: var(--ink-30);
transition: color var(--t-fast) linear;
}
.lightbox__nav:hover {
color: var(--ink);
}
.lightbox__nav svg {
width: 18px;
height: 18px;
stroke: currentColor;
fill: none;
stroke-width: 1.2;
}
.lightbox__nav[data-dir='prev'] {
left: 0;
}
.lightbox__nav[data-dir='next'] {
right: 0;
}
.marquee {
overflow: clip;
display: flex;
user-select: none;
border-block: 1px solid var(--rule);
padding-block: clamp(0.9rem, 1.6vw, 1.4rem);
}
.marquee__track {
display: flex;
align-items: center;
gap: clamp(1.25rem, 2.4vw, 2.25rem);
padding-right: clamp(1.25rem, 2.4vw, 2.25rem);
flex: none;
animation: slide 60s linear infinite;
}
.marquee:hover .marquee__track {
animation-play-state: paused;
}
@keyframes slide {
to {
transform: translateX(-100%);
}
}
.marquee__item {
font-size: clamp(1.125rem, 2.2vw, 2rem);
font-weight: 300;
letter-spacing: -0.032em;
white-space: nowrap;
color: var(--ink-30);
transition: color var(--t-fast) linear;
}
.marquee__item:hover {
color: var(--ink);
}
.marquee__dot {
width: 4px;
height: 4px;
background: var(--ink-30);
flex: none;
}
.toast {
position: fixed;
left: 50%;
bottom: 1.25rem;
translate: -50% 0;
z-index: 260;
background: var(--ink);
color: var(--paper);
padding: 0.7rem 1.1rem;
font-family: var(--mono);
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: var(--tr-mono);
text-transform: uppercase;
opacity: 0;
transform: translateY(10px);
pointer-events: none;
transition: opacity 0.25s linear, transform 0.35s var(--e-out);
}
.toast.is-on {
opacity: 1;
transform: none;
}
.stepper {
display: inline-flex;
align-items: center;
gap: 0.15rem;
margin-top: 0.5rem;
border: 1px solid var(--rule);
}
.stepper button {
width: 26px;
height: 26px;
display: grid;
place-items: center;
font-size: 0.9rem;
line-height: 1;
color: var(--ink-45);
transition: color var(--t-fast) linear, background-color var(--t-fast) linear;
}
.stepper button:hover {
color: var(--paper);
background: var(--ink);
}
.stepper span {
min-width: 1.75rem;
text-align: center;
font-size: var(--fs-small);
font-variant-numeric: tabular-nums;
}
.saved__artist {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
padding-bottom: 0.9rem;
border-bottom: 1px solid var(--rule);
}
.saved__artist span {
font-family: var(--mono);
font-size: var(--fs-mono);
font-weight: 400;
letter-spacing: 0.17em;
text-transform: uppercase;
color: var(--ink-45);
}
.saved__artist b {
font-size: 1.125rem;
font-weight: 400;
letter-spacing: -0.02em;
}
.saved__total {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
padding-top: 1rem;
margin-top: 0.25rem;
border-top: 1px solid var(--ink);
}
.saved__total span {
font-family: var(--mono);
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: var(--tr-mono);
text-transform: uppercase;
color: var(--ink-45);
}
.saved__total b {
font-size: 1.125rem;
font-weight: 500;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.sent {
flex: 1;
display: grid;
align-content: center;
justify-items: start;
gap: 1.1rem;
padding: clamp(1.5rem, 4vw, 3rem) var(--page-x);
}
.sent[hidden] {
display: none;
}
.sent__mark svg {
width: 44px;
height: 44px;
fill: none;
stroke: var(--ink);
stroke-width: 2;
stroke-linecap: square;
stroke-dasharray: 60;
stroke-dashoffset: 60;
animation: draw-check 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.12s forwards;
}
@keyframes draw-check {
to {
stroke-dashoffset: 0;
}
}
.sent__title {
font-family: var(--sans);
font-size: clamp(1.75rem, 3.4vw, 2.6rem);
font-weight: 300;
line-height: 1.05;
letter-spacing: var(--tr-display);
}
.sent__body {
color: var(--ink-70);
max-width: 34ch;
line-height: 1.65;
}
.sent > * {
opacity: 0;
animation: sent-in 0.6s var(--e-out) forwards;
}
.sent__title {
animation-delay: 0.2s;
}
.sent__body {
animation-delay: 0.3s;
}
.sent .btn {
animation-delay: 0.4s;
}
@keyframes sent-in {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: none;
}
}
.results + .results {
margin-top: 2rem;
}
.results > .label {
padding-bottom: 0.6rem;
}
.results:not(:first-child) > .label {
padding-top: 0.75rem;
border-top: 1px solid var(--ink);
}
.results .saved {
border-top: 0;
}
.results__pages {
display: grid;
}
.results__pages a {
display: block;
padding: 0.75rem 0;
border-bottom: 1px solid var(--rule-soft);
font-size: 1.0625rem;
letter-spacing: -0.02em;
transition: opacity var(--t-fast) linear;
}
.results__pages a:hover {
opacity: 0.55;
}
.drawer .label,
.drawer__close,
.drawer .field label,
.drawer .saved__meta,
.drawer .form-note,
.drawer .saved__artist span,
.drawer .saved__total span {
color: var(--on-noir-60);
}
.drawer__head,
.drawer__foot,
.drawer .field,
.drawer .saved,
.drawer .saved__item,
.drawer .saved__artist,
.drawer .saved__total,
.drawer .results + .results,
.drawer .results__pages {
border-color: rgba(255, 255, 255, 0.22);
}
.drawer .saved {
border-top: 0;
}
.drawer .field input,
.drawer .field textarea,
.drawer .saved__item h4,
.drawer .saved__total b,
.drawer .saved__artist b,
.drawer .sent__title,
.drawer__close:hover {
color: var(--on-noir);
}
.drawer .field input::placeholder,
.drawer .field textarea::placeholder {
color: var(--on-noir-35);
}
.drawer .field:focus-within {
border-color: var(--on-noir);
}
.drawer .consent,
.drawer .sent__body,
.drawer .saved__remove {
color: var(--on-noir-60);
}
.drawer .consent input {
accent-color: var(--on-noir);
}
.drawer .sent__mark svg {
stroke: var(--on-noir);
}
.drawer {
--cta: #ffffff;
--cta-on: #413c36;
}
.drawer .btn--ghost {
border-color: rgba(255, 255, 255, 0.28);
}
.lightbox__bar {
border-bottom-color: rgba(255, 255, 255, 0.22);
}
.lightbox__bar .label,
.lightbox__bar .drawer__close,
.lightbox__zoom,
.lightbox__nav button {
color: rgba(255, 255, 255, 0.62);
}
.lightbox__bar .drawer__close:hover,
.lightbox__nav button:hover {
color: #ffffff;
}
.lightbox__lens {
border-color: rgba(255, 255, 255, 0.35);
}
.drawer .preset {
color: rgba(255, 255, 255, 0.72);
border-color: rgba(255, 255, 255, 0.28);
}
.drawer .preset:hover {
color: #413c36;
background: #ffffff;
border-color: #ffffff;
}
.drawer .prose,
.drawer .results > .label,
.drawer .results__pages a,
.drawer .hint,
.drawer .empty {
color: rgba(255, 255, 255, 0.62);
}
.drawer .results__pages a:hover,
.drawer .result h4,
.drawer .result b {
color: #ffffff;
}
.drawer .result {
border-color: rgba(255, 255, 255, 0.22);
}
.drawer mark {
background: rgba(255, 255, 255, 0.18);
color: #ffffff;
}
.drawer--band {
inset: 0 0 auto 0;
width: 100%;
max-height: 100svh;
border-left: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.22);
transform: translateY(-101%);
overflow-y: auto;
}
.drawer--band.is-open {
transform: none;
}
.drawer--band .drawer__head,
.drawer--band .drawer__body {
max-width: var(--max);
width: 100%;
margin-inline: auto;
padding-inline: var(--page-x);
}
.drawer--band .drawer__body {
padding-block: clamp(2rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem);
}
.drawer--band .searchbox input {
padding: 0.9rem 0 1.1rem 2.4rem;
font-size: clamp(1.25rem, 2.4vw, 2rem);
font-weight: 300;
letter-spacing: -0.02em;
border-bottom-color: rgba(255, 255, 255, 0.22);
}
.drawer--band .searchbox svg {
top: 50%;
transform: translateY(-70%);
width: 20px;
height: 20px;
}
.drawer--band .presets {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem 1rem;
margin-top: clamp(1.25rem, 2.5vw, 2rem);
}
.drawer--band .presets__row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.drawer .stepper {
gap: 0;
border-color: rgba(255, 255, 255, 0.3);
border-radius: 999px;
overflow: hidden;
}
.drawer .stepper button {
width: 32px;
height: 32px;
font-size: 1.05rem;
color: #ffffff;
}
.drawer .stepper button:hover {
color: #413c36;
background: #ffffff;
}
.drawer .stepper span {
color: #ffffff;
font-size: 0.9375rem;
font-weight: 500;
}
.drawer,
.lightbox {
color-scheme: dark;
}
.drawer__close svg {
display: none;
width: 20px;
height: 20px;
stroke: currentColor;
stroke-width: 1.4;
fill: none;
}
@media (max-width: 999px) {
.drawer:not(.drawer--band) {
inset: var(--header-h) 0 0;
width: 100%;
border-left: 0;
transform: none;
clip-path: inset(0 0 100% 0);
transition: clip-path 0.62s var(--e-in-out);
}
.drawer:not(.drawer--band).is-open {
clip-path: inset(0 0 0 0);
}
.drawer__close {
display: inline-grid;
place-items: center;
width: 44px;
height: 44px;
margin-right: calc(var(--page-x) * -1 + 0.25rem);
}
.drawer__close span {
display: none;
}
.drawer__close svg {
display: block;
}
}
.logo {
display: block;
color: currentColor;
}
.logo svg {
display: block;
width: auto;
height: 100%;
fill: currentColor;
}
.logo .lgl {
fill: currentColor;
}
.logo svg,
.lockup svg,
.splash__logo svg {
overflow: visible;
}
.logo--header {
height: 44px;
}
.logo--header path {
stroke: currentColor;
stroke-width: 11;
paint-order: stroke fill;
}
@media (min-width: 900px) {
.logo--header {
height: 54px;
}
}
.logo--header .lgl {
transition: opacity 0.4s var(--e-out);
transition-delay: calc(var(--i) * 0.018s);
}
.wordmark:hover .logo--header .lgl {
opacity: 0.35;
}
.logo--footer {
height: auto;
}
.logo--footer .lgl {
opacity: 1;
}
.logo--footer:hover .lgl {
animation: letter-refocus 0.7s ease-out backwards;
animation-delay: calc(var(--i) * 0.035s);
}
@keyframes letter-refocus {
0% {
opacity: 0.3;
filter: blur(7px);
}
100% {
opacity: 1;
filter: blur(0);
}
}
@media (prefers-reduced-motion: reduce) {
.logo--footer:hover .lgl {
animation: none;
}
}
.splash {
position: fixed;
inset: 0;
z-index: 400;
background: #413c36;
display: grid;
place-items: center;
padding: var(--page-x);
}
.splash[hidden] {
display: none;
}
.splash__logo {
width: min(50vw, 512px);
color: #ffffff;
}
.splash__logo svg {
width: 100%;
height: auto;
}
.splash__logo .lgl {
opacity: 0;
}
.splash.is-playing .splash__logo .lgl {
filter: blur(37px);
transform: translate(45%, 0) scale(0.88);
transform-origin: center;
transform-box: fill-box;
animation: letter-in 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
animation-delay: calc(var(--i) * 0.024s + 0.04s);
}
@keyframes letter-in {
to {
opacity: 1;
filter: blur(0);
transform: none;
}
}
.splash__meta {
color: rgba(255, 255, 255, 0.6);
position: absolute;
left: var(--page-x);
right: var(--page-x);
bottom: calc(var(--page-x) + env(safe-area-inset-bottom));
display: flex;
justify-content: center;
gap: 1rem;
opacity: 0;
}
.splash.is-playing .splash__meta {
animation: fade-in 0.4s linear 1.5s forwards;
}
@keyframes fade-in {
to {
opacity: 1;
}
}
.splash.is-leaving {
animation: splash-out 0.7s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes splash-out {
to {
transform: translateY(-100%);
}
}
@media (prefers-reduced-motion: reduce) {
.splash__logo .lgl,
.splash__meta {
opacity: 1;
filter: none;
transform: none;
animation: none;
}
}
.opener {
padding-top: calc(var(--header-h) + clamp(2.5rem, 7vw, 6rem));
padding-bottom: clamp(1.75rem, 3.5vw, 3rem);
display: grid;
gap: clamp(1.5rem, 3vw, 2.5rem);
align-items: end;
}
@media (min-width: 900px) {
.opener {
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
}
.opener h1 {
font-size: var(--fs-display);
font-weight: 250;
line-height: 0.98;
letter-spacing: -0.018em;
max-width: 16ch;
}
.opener__note {
max-width: 46ch;
color: var(--ink-70);
font-size: var(--fs-small);
line-height: 1.6;
}
.opener__eyebrow {
margin-bottom: clamp(1rem, 2vw, 1.75rem);
}
.crumbs {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
align-items: center;
font-family: var(--mono);
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: var(--tr-mono);
text-transform: uppercase;
color: var(--ink-30);
padding-top: calc(var(--header-h) + 1.25rem);
}
.crumbs a {
transition: color var(--t-fast) linear;
}
.crumbs a:hover {
color: var(--ink);
}
.head {
display: flex;
flex-wrap: wrap;
gap: 0.75rem 2rem;
align-items: baseline;
justify-content: space-between;
margin-inline: calc(-1 * var(--page-x));
padding-inline: var(--page-x);
padding-bottom: 0.9rem;
border-bottom: 1px solid var(--rule);
margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.head__main .label {
margin-bottom: 0.9rem;
}
.head h2 {
font-size: var(--fs-title);
font-weight: 300;
line-height: 1.02;
letter-spacing: -0.02em;
}
.head__side {
display: flex;
align-items: baseline;
gap: 1.25rem;
}
.opening {
padding-top: calc(var(--header-h) + clamp(2rem, 6vw, 5.5rem));
padding-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.opening__head {
display: grid;
gap: clamp(2rem, 6vw, 3rem);
align-items: start;
}
@media (min-width: 800px) {
.opening__head {
grid-template-columns: auto minmax(0, 1fr);
gap: 100px;
}
}
.lockup {
position: relative;
width: clamp(185px, 24vw, 440px);
padding: var(--pad-y) var(--pad-x);
color: var(--ink);
}
.lockup svg {
position: relative;
z-index: 1;
width: 100%;
height: auto;
}
.lockup .lgl {
opacity: 1;
}
.lockup.is-in .lgl.is-out {
animation: none;
opacity: 1;
filter: none;
}
.lockup__cells {
position: absolute;
inset: var(--pad-y) var(--pad-x);
z-index: 2;
}
.lockup__cell {
position: absolute;
left: var(--x);
top: var(--y);
width: var(--w);
height: var(--h);
overflow: hidden;
opacity: 0;
}
.lockup__cell.is-on {
opacity: 1;
}
.lockup__shot {
position: absolute;
inset: 0;
opacity: 0;
}
.lockup__shot.is-on {
opacity: 1;
}
.lockup__cell img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (hover: none), (pointer: coarse) {
.lockup__cells {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.lockup .lgl {
opacity: 1;
filter: none;
transform: none;
}
.lockup__cells {
display: none;
}
}
.opening h1 {
font-size: clamp(2.1rem, 6.1vw, 6.9rem);
font-weight: 250;
line-height: 0.94;
letter-spacing: -0.018em;
}
.opening__foot {
position: relative;
display: grid;
gap: 0.9rem clamp(1.5rem, 3vw, 3rem);
margin-top: clamp(1.75rem, 4vw, 3.5rem);
padding-top: 1.1rem;
}
.opening__foot::before {
content: '';
position: absolute;
inset: 0 0 auto;
height: 1px;
background: var(--ink);
transform: scaleX(0);
transform-origin: left;
transition: transform 2.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.opening__foot.is-in::before {
transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
.opening__foot::before {
transform: none;
}
}
@media (min-width: 800px) {
.opening__foot {
grid-template-columns: 2fr 1fr 1fr 1fr;
}
}
.opening__foot span {
display: block;
font-size: clamp(0.875rem, 0.85vw, 1.0625rem);
letter-spacing: 0.03em;
line-height: 1.35;
color: var(--ink);
}
.opening__foot span:first-child {
max-width: 36ch;
text-wrap: balance;
}
.strip {
display: grid;
gap: 1px;
background: var(--rule);
border-block: 1px solid var(--rule);
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) {
.strip {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.strip > * {
background: var(--paper);
}
.strip__cell {
position: relative;
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
}
.strip__cell img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.2s var(--e-out);
}
.strip__cell:hover img {
transform: scale(1.03);
}
.strip__cap {
position: absolute;
inset: auto 0 0;
padding: 0.75rem 1rem;
display: flex;
justify-content: space-between;
gap: 1rem;
background: var(--paper);
font-family: var(--mono);
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: var(--tr-mono);
text-transform: uppercase;
transform: translateY(101%);
transition: transform var(--t-mid) var(--e-out);
}
.strip__cell:hover .strip__cap {
transform: none;
}
.list {
border-top: 1px solid var(--ink);
}
.head + .list,
.head + .archive,
.head + .cells,
.head + .toc .toc__list {
border-top: 0;
}
.list__row {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 1rem;
align-items: baseline;
padding: clamp(0.35rem, 0.6vw, 0.55rem) 0;
transition: padding-left var(--t-mid) var(--e-out), color var(--t-fast) linear;
}
.list__row::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: var(--rule);
transform: scaleX(0);
transform-origin: left;
transition: transform 1.1s var(--e-line);
transition-delay: var(--reveal-delay, 0s);
}
.list__row.is-in::after {
transform: scaleX(1);
}
a.list__row:hover {
padding-left: 0.85rem;
}
.list__row:has(.list__n) {
grid-template-columns: 3.25rem minmax(0, 1fr) auto;
}
.list__row:has(.list__n) .list__body {
grid-column: 2 / -1;
}
.list__n {
font-family: var(--mono);
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: var(--tr-mono);
color: var(--ink-30);
font-variant-numeric: tabular-nums;
}
.list__name {
font-size: clamp(0.9375rem, 1.15vw, 1.1875rem);
font-weight: 300;
line-height: 1.2;
letter-spacing: -0.03em;
}
.list__aside .ext {
display: inline-block;
margin-left: 0.35em;
vertical-align: baseline;
transition: transform var(--t-mid) var(--e-out);
}
a.list__row:hover .ext {
transform: translate(2px, -2px);
}
.list__aside {
font-family: var(--mono);
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: var(--tr-mono);
text-transform: uppercase;
color: var(--ink-45);
text-align: right;
font-variant-numeric: tabular-nums;
}
.list__body {
grid-column: 1 / -1;
color: var(--ink-70);
font-size: var(--fs-small);
line-height: 1.6;
max-width: 52ch;
margin-top: 0.5rem;
}
.two-col {
display: grid;
gap: clamp(2rem, 5vw, 5.5rem);
align-items: start;
}
@media (min-width: 900px) {
.two-col {
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
}
}
.statement {
font-family: var(--sans);
font-size: clamp(1.5rem, 2.9vw, 2.75rem);
font-weight: 250;
line-height: 1.16;
letter-spacing: -0.018em;
text-wrap: balance;
}
.band-brown {
background: #413c36;
color: var(--on-noir);
}
.band-brown .head {
border-color: var(--rule-noir);
}
.band-brown .label {
color: var(--on-noir-35);
}
.band-brown .cells,
.band-brown .cell + .cell {
border-color: var(--rule-noir);
}
.band-brown .cell__n {
color: var(--on-noir-35);
}
.band-brown .cell__title {
color: var(--on-noir);
}
.band-brown .cell__body p {
color: var(--on-noir-60);
}
.band-brown {
--cta: #ffffff;
--cta-on: #413c36;
}
.band-dark {
background: var(--noir);
color: var(--on-noir);
}
.band-dark .head {
border-color: var(--rule-noir);
}
.band-dark .label,
.band-dark .list__aside {
color: var(--on-noir-35);
}
.band-dark .list,
.band-dark .list__row {
border-color: var(--rule-noir);
}
.band-dark .list__body {
color: var(--on-noir-60);
}
.band-dark .list__n {
color: var(--on-noir-35);
}
.band-dark .btn {
background: var(--paper);
color: var(--ink);
border-color: var(--paper);
}
.band-dark .btn:hover {
background: transparent;
color: var(--paper);
}
.mosaic {
display: grid;
gap: clamp(3rem, 7vw, 8rem);
}
.mosaic__row {
display: flex;
align-items: flex-start;
}
.mosaic__item {
width: var(--w);
margin-left: var(--gap);
margin-top: var(--top);
}
.mosaic__plate {
display: block;
aspect-ratio: var(--ar);
overflow: hidden;
background: var(--paper-sunk);
clip-path: inset(0 0 100% 0);
transition: clip-path 0.9s cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition-delay: var(--reveal-delay, 0s);
}
.mosaic__item.is-in .mosaic__plate {
clip-path: inset(0 0 0 0);
}
.mosaic__plate img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.08);
transition: transform 1.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition-delay: var(--reveal-delay, 0s);
}
.mosaic__item.is-in .mosaic__plate img {
transform: none;
}
.mosaic__item.is-in:hover .mosaic__plate img {
transform: scale(1.03);
}
@media (prefers-reduced-motion: reduce) {
.mosaic__plate {
clip-path: none;
}
.mosaic__plate img {
transform: none;
}
}
.mosaic__cap {
display: grid;
gap: 0.3rem;
margin-top: 0.9rem;
font-size: var(--fs-small);
color: var(--ink-70);
}
@media (max-width: 799px) {
.mosaic {
gap: clamp(2rem, 8vw, 3.5rem);
}
.mosaic__row {
display: grid;
gap: clamp(2rem, 8vw, 3.5rem);
}
.mosaic__item {
width: auto;
margin-left: 0;
margin-top: 0;
}
}
.cta-band {
position: relative;
display: grid;
align-items: start;
min-height: min(88svh, 900px);
padding: clamp(0.75rem, 1.4vw, 1.375rem);
overflow: hidden;
isolation: isolate;
}
.cta-band__wall {
position: absolute;
inset: 0;
z-index: -1;
overflow: hidden;
background: var(--paper-sunk);
}
.cta-band__shot {
position: absolute;
inset: 0;
opacity: 0;
animation: slideshow 17.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
animation-delay: calc(var(--i) * 2.2s);
}
.cta-band__shot img {
width: 100%;
height: 100%;
object-fit: cover;
}
@keyframes slideshow {
0% {
opacity: 0;
}
5.1%,
12.5% {
opacity: 1;
}
17.6%,
100% {
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.cta-band__shot {
animation: none;
}
.cta-band__shot:first-child {
opacity: 1;
}
}
.cta-band__panel {
display: grid;
gap: clamp(1.1rem, 2vw, 1.6rem);
justify-items: start;
padding: clamp(1.5rem, 3vw, 2.75rem);
max-width: min(30rem, 100%);
}
@media (min-width: 900px) {
.cta-band__panel {
margin: 200px 0 200px 200px;
}
}
@media (min-width: 900px) {
.cta-band {
justify-items: start;
}
.cta-band__panel {
max-width: 32rem;
}
}
.cta-band__panel h2 {
font-size: clamp(1.9rem, 3.4vw, 3.1rem);
font-weight: 250;
line-height: 1.02;
letter-spacing: -0.018em;
}
.cta-band__body {
color: var(--on-noir-60);
font-size: var(--fs-small);
line-height: 1.65;
max-width: 34ch;
}
.ring[data-reveal] {
opacity: 1;
transform: none;
transition: none;
}
.ring {
position: relative;
aspect-ratio: 4 / 3;
margin-top: clamp(2rem, 5vw, 4rem);
}
.ring__plate {
position: absolute;
left: var(--x);
top: var(--y);
z-index: var(--z, 1);
width: var(--w);
aspect-ratio: 4 / 5;
transform: translate(-50%, -50%);
overflow: hidden;
background: var(--paper-sunk);
clip-path: inset(0 0 100% 0);
transition: clip-path 0.9s cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition-delay: calc(var(--i) * 0.07s);
}
.ring.is-in .ring__plate {
clip-path: inset(0 0 0 0);
}
.ring__plate img {
width: 100%;
height: 100%;
object-fit: cover;
filter: blur(12px);
transform: scale(1.05);
transition:
filter 1.1s cubic-bezier(0.455, 0.03, 0.515, 0.955),
transform 1.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition-delay: calc(var(--i) * 0.07s);
}
.ring.is-in .ring__plate img {
filter: blur(0);
transform: none;
}
@media (max-width: 899px) {
.ring {
aspect-ratio: 1;
}
.ring__plate {
width: calc(var(--w) * 1.3);
}
}
@media (prefers-reduced-motion: reduce) {
.ring__plate {
clip-path: none;
}
.ring__plate img {
filter: none;
transform: none;
}
}
.archive {
display: grid;
border-top: 1px solid var(--rule);
}
@media (min-width: 800px) {
.archive {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.archive__item:nth-child(odd) {
border-right: 1px solid var(--rule);
}
}
.archive__item {
border-bottom: 1px solid var(--rule);
padding: clamp(1.25rem, 2.5vw, 2rem);
display: grid;
gap: clamp(1.1rem, 2vw, 1.6rem);
align-content: start;
}
.archive__plate {
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--paper-sunk);
}
.archive__plate img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.01);
transition: transform 1.2s var(--e-out);
}
.archive__item:hover .archive__plate img {
transform: scale(1.045);
}
.archive__blank {
display: block;
height: 100%;
}
.archive__meta {
display: grid;
gap: 0.4rem 1.5rem;
align-items: start;
}
@media (min-width: 520px) {
.archive__meta {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
}
}
.archive__name {
font-family: var(--sans);
font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
letter-spacing: -0.02em;
}
.archive__spec {
color: var(--ink-45);
font-size: var(--fs-small);
margin-top: 0.15rem;
}
.archive__more {
margin-top: 0.9rem;
}
.work {
display: grid;
align-items: start;
border-top: 1px solid var(--rule);
border-left: 1px solid var(--rule);
border-right: 1px solid var(--rule);
}
@media (min-width: 1000px) {
.work {
grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
}
}
.work__stage {
display: grid;
align-content: start;
background: #413c36;
border-right: 1px solid var(--rule);
}
@media (max-width: 999px) {
.work__stage {
border-right: 0;
}
}
.work__shot {
position: relative;
display: block;
width: 100%;
padding: clamp(2rem, 5vw, 5.5rem);
cursor: zoom-in;
background: none;
}
.work__shot + .work__shot {
border-top: 1px solid var(--rule);
}
.work__shot img {
width: 100%;
height: auto;
max-height: 78svh;
object-fit: contain;
margin-inline: auto;
}
.work__info {
position: sticky;
top: var(--header-h);
padding: clamp(1.5rem, 3vw, 2.75rem) var(--page-x) clamp(2rem, 4vw, 3rem);
display: grid;
gap: clamp(1.25rem, 2.5vw, 2rem);
align-content: start;
}
.work__head {
display: grid;
gap: 0.85rem;
padding-bottom: clamp(1.1rem, 2vw, 1.6rem);
border-bottom: 1px solid var(--rule);
}
.work__record {
display: grid;
gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 1240px) {
.work__record {
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
}
}
.work__col {
display: grid;
gap: 1.35rem;
align-content: start;
}
@media (max-width: 999px) {
.work__info {
position: static;
border-top: 1px solid var(--rule);
}
}
.work__artist {
font-family: var(--mono);
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: var(--tr-mono);
text-transform: uppercase;
color: var(--ink-45);
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: color var(--t-fast) linear;
}
.work__artist:hover {
color: var(--ink);
}
.work__title {
font-size: clamp(1.75rem, 3.2vw, 3rem);
font-weight: 250;
line-height: 1.02;
letter-spacing: -0.018em;
text-wrap: balance;
}
.work__price {
font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.spec {
border-top: 1px solid var(--rule);
}
.spec div {
display: grid;
grid-template-columns: 7.5rem 1fr;
gap: 1rem;
padding: 0.7rem 0;
border-bottom: 1px solid var(--rule-soft);
font-size: var(--fs-small);
}
.spec dt {
font-family: var(--mono);
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: var(--tr-mono);
text-transform: uppercase;
color: var(--ink-45);
padding-top: 0.15rem;
}
.spec dd {
margin: 0;
}
.spec a {
border-bottom: 1px solid var(--rule);
}
.spec a:hover {
border-color: var(--ink);
}
.work__actions {
display: grid;
gap: 0.4rem;
}
.assurance {
display: grid;
gap: 0.5rem;
border-top: 1px solid var(--rule);
padding-top: 1rem;
}
.assurance li {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.6rem;
align-items: start;
font-family: var(--mono);
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: var(--tr-mono);
color: var(--ink-45);
line-height: 1.5;
text-transform: uppercase;
}
.assurance svg {
width: 11px;
height: 11px;
margin-top: 0.15rem;
stroke: var(--ink-30);
fill: none;
stroke-width: 1.6;
}
.artists {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
border-top: 1px solid var(--rule);
border-left: 1px solid var(--rule);
}
@media (min-width: 760px) {
.artists {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 1200px) {
.artists {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.artists > li {
background: var(--paper);
border-right: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
}
.artist-card {
display: block;
height: 100%;
}
.artist-card__frame {
position: relative;
aspect-ratio: 3 / 4;
overflow: hidden;
background: var(--paper) center / cover no-repeat;
}
.artist-card__frame img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(1) sepia(0.22) contrast(1.03) blur(16px);
transform: scale(1.07);
transition:
filter 1.15s var(--e-out),
transform 1.3s var(--e-out);
}
.artists > li.is-in .artist-card__frame img {
filter: grayscale(1) sepia(0.22) contrast(1.03) blur(0);
transform: none;
}
.artists > li.is-in .artist-card:hover .artist-card__frame img {
filter: sepia(0.12) saturate(1.04);
transform: scale(1.035);
}
@media (prefers-reduced-motion: reduce) {
.artist-card__frame img {
filter: grayscale(1) sepia(0.22);
transform: none;
}
}
.artist-card__frame .card__shot img {
filter: none;
object-fit: cover;
}
.artist-card__frame.is-work img {
opacity: 0.85;
}
.artist-card__body {
padding: clamp(0.7rem, 1.1vw, 1rem);
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
transition: background-color var(--t-fast) linear;
}
.artist-card:hover .artist-card__name {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.28em;
}
.artist-card__name {
font-size: clamp(0.9375rem, 1.1vw, 1.125rem);
font-weight: 400;
line-height: 1.2;
letter-spacing: -0.022em;
}
.artist-card__meta {
font-family: var(--mono);
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: var(--tr-mono);
color: var(--ink-45);
white-space: nowrap;
flex: none;
}
.profile {
display: grid;
gap: clamp(1.25rem, 3vw, 3.5rem);
align-items: center;
padding-top: clamp(1.25rem, 2.5vw, 2rem);
padding-bottom: clamp(2rem, 4vw, 3.5rem);
}
@media (min-width: 800px) {
.profile {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.profile__avatar {
position: relative;
aspect-ratio: 4 / 5;
width: 100%;
overflow: hidden;
background: var(--paper) center / cover no-repeat;
}
@media (max-width: 799px) {
.profile__avatar {
aspect-ratio: 3 / 2;
}
}
.profile__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(1) sepia(0.22) blur(16px);
transform: scale(1.04);
transition:
filter 1.2s var(--e-out),
transform 1.4s var(--e-out);
}
.profile__avatar.is-in img {
filter: grayscale(1) sepia(0.22) blur(0);
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.profile__avatar img {
filter: grayscale(1);
transform: none;
}
}
.profile__initials {
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-size: clamp(2.5rem, 8vw, 5rem);
color: var(--ink-30);
}
.profile__main {
display: grid;
gap: clamp(0.9rem, 1.8vw, 1.4rem);
align-content: start;
}
.profile__name {
font-size: clamp(1.75rem, 4.4vw, 3.75rem);
font-weight: 250;
line-height: 0.98;
letter-spacing: -0.018em;
}
.profile__stats {
display: flex;
flex-wrap: wrap;
gap: 0.5rem clamp(1.5rem, 3.5vw, 3rem);
}
.profile__stat {
display: flex;
align-items: baseline;
gap: 0.4rem;
}
.profile__stat b {
font-size: clamp(1rem, 1.3vw, 1.25rem);
font-weight: 500;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.profile__stat span {
font-family: var(--mono);
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: var(--tr-mono);
text-transform: uppercase;
color: var(--ink-45);
}
.profile__bio {
max-width: 68ch;
}
.profile__actions {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.tabs button b {
font-weight: 400;
color: var(--ink-30);
margin-left: 0.15em;
}
.tabs button[aria-selected='true'] b {
color: var(--ink-45);
}
.tabs {
display: flex;
gap: 1.25rem;
border-bottom: 1px solid var(--ink);
margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.tabs button {
position: relative;
padding: 0 0 0.75rem;
font-family: var(--mono);
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: var(--tr-mono);
text-transform: uppercase;
color: var(--ink-30);
transition: color var(--t-fast) linear;
}
.tabs button[aria-selected='true'] {
color: var(--ink);
}
.tabs button[aria-selected='true']::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -3px;
height: 3px;
background: var(--ink);
}
[role='tabpanel'][hidden] {
display: none;
}
.timeline {
border-top: 1px solid var(--rule);
max-width: 64rem;
}
.timeline__year {
display: grid;
gap: 0.3rem 2rem;
padding: clamp(0.9rem, 1.8vw, 1.4rem) 0;
border-bottom: 1px solid var(--rule-soft);
}
@media (min-width: 700px) {
.timeline__year {
grid-template-columns: 6rem 1fr;
}
}
.timeline__year > b {
font-family: var(--mono);
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: var(--tr-mono);
font-weight: 400;
color: var(--ink-45);
text-transform: uppercase;
}
.timeline__year ul {
display: grid;
gap: 0.45rem;
}
.timeline__year li {
font-size: var(--fs-small);
color: var(--ink-70);
line-height: 1.5;
}
.catalogue {
border-top: 1px solid var(--rule);
}
.catalogue__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding-block: 0.75rem;
border-bottom: 1px solid var(--rule);
font-family: var(--mono);
font-size: var(--fs-mono);
font-weight: 500;
letter-spacing: var(--tr-mono);
text-transform: uppercase;
color: var(--ink-45);
}
.catalogue__bar nav {
display: flex;
align-items: center;
gap: 0.9rem;
}
.catalogue__bar button {
font: inherit;
letter-spacing: inherit;
text-transform: inherit;
color: var(--ink);
transition: opacity var(--t-fast) linear;
}
.catalogue__bar button[disabled] {
opacity: 0.28;
pointer-events: none;
}
.catalogue__stage {
position: relative;
background: var(--paper-sunk);
display: grid;
place-items: center;
padding: clamp(0.75rem, 2vw, 2rem);
min-height: 40svh;
}
.catalogue__stage img {
max-width: 100%;
max-height: 78svh;
width: auto;
object-fit: contain;
box-shadow: 0 1px 24px rgba(0, 0, 0, 0.09);
}
.catalogue__stage img.is-swapping {
opacity: 0;
}
.catalogue__stage img {
transition: opacity 0.22s linear;
}
.catalogue__hit {
position: absolute;
top: 0;
bottom: 0;
width: 34%;
z-index: 2;
}
.catalogue__hit[data-dir='prev'] {
left: 0;
cursor: w-resize;
}
.catalogue__hit[data-dir='next'] {
right: 0;
cursor: e-resize;
}
.catalogue__thumbs {
display: flex;
gap: 1px;
background: var(--rule);
overflow-x: auto;
scrollbar-width: none;
border-bottom: 1px solid var(--rule);
}
.catalogue__thumbs::-webkit-scrollbar {
display: none;
}
.catalogue__thumbs button {
flex: none;
width: clamp(48px, 5vw, 68px);
aspect-ratio: 3 / 4;
background: var(--paper);
padding: 3px;
opacity: 0.45;
transition: opacity var(--t-fast) linear;
}
.catalogue__thumbs button:hover,
.catalogue__thumbs button[aria-current='true'] {
opacity: 1;
}
.catalogue__thumbs img {
width: 100%;
height: 100%;
object-fit: cover;
}
.buro-sheet {
padding-top: calc(var(--header-h) + clamp(1.5rem, 3.5vw, 3rem));
padding-bottom: var(--section-y);
display: grid;
gap: clamp(1.5rem, 3vw, 3.5rem);
align-items: start;
}
@media (min-width: 900px) {
.buro-sheet {
grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
}
}
.buro-sheet__plate {
aspect-ratio: 2 / 3;
overflow: hidden;
background: var(--paper-sunk);
}
.buro-sheet__plate img {
width: 100%;
height: 100%;
object-fit: cover;
filter: blur(16px);
transform: scale(1.05);
transition:
filter 1.2s var(--e-out),
transform 1.4s var(--e-out);
}
.buro-sheet__plate.is-in img {
filter: blur(0);
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.buro-sheet__plate img {
filter: none;
transform: none;
}
}
.buro-sheet__cols {
display: grid;
gap: clamp(1.75rem, 3.5vw, 3rem);
align-content: start;
}
.buro-sheet__title {
font-size: clamp(1.5rem, 3vw, 3rem);
font-weight: 300;
line-height: 1.02;
letter-spacing: -0.018em;
margin-top: 0.85rem;
max-width: 30ch;
}
.buro-sheet__grid {
display: grid;
gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 700px) {
.buro-sheet__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.catreq {
display: grid;
gap: clamp(1.75rem, 4vw, 4rem);
align-items: center;
border-top: 1px solid var(--rule);
padding-top: clamp(1.75rem, 4vw, 3.5rem);
}
@media (min-width: 900px) {
.catreq {
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
}
}
.catreq__cover {
position: relative;
margin-right: 14px;
margin-bottom: 14px;
}
.catreq__cover::before,
.catreq__cover::after {
content: '';
position: absolute;
inset: 0;
z-index: -1;
border: 1px solid var(--rule);
background: var(--paper);
}
.catreq__cover::before {
transform: translate(7px, 7px);
}
.catreq__cover::after {
transform: translate(14px, 14px);
}
.catreq__media {
overflow: hidden;
aspect-ratio: 4 / 3;
background: var(--paper-sunk);
border: 1px solid var(--rule);
}
.catreq__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.catreq__body .label {
color: var(--ink-45);
margin-bottom: 0.9rem;
}
.catreq__form {
display: grid;
gap: 1.25rem;
align-items: end;
margin-top: clamp(1.75rem, 3vw, 2.5rem);
max-width: 34rem;
}
@media (min-width: 560px) {
.catreq__form {
grid-template-columns: minmax(0, 1fr) auto;
}
.catreq__form .form-status {
grid-column: 1 / -1;
}
}
.catreq__form .field {
padding-top: 0;
}
.catreq__form .btn {
white-space: nowrap;
}
.catreq__form .form-note {
margin-top: 0;
}
@media (min-width: 560px) {
.catreq__form .form-note {
grid-column: 1 / -1;
}
}
.sent--inline {
padding: 0;
gap: 0.9rem;
margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.split {
display: grid;
gap: clamp(1.5rem, 3vw, 3rem);
align-items: center;
}
@media (min-width: 900px) {
.split {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.split--reverse > :first-child {
order: 2;
}
}
.split__media {
overflow: hidden;
aspect-ratio: 4 / 3;
background: var(--paper-sunk);
}
.split__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pub-shot {
display: block;
width: 100%;
aspect-ratio: 4 / 5;
overflow: hidden;
background: var(--paper) center / cover no-repeat;
cursor: zoom-in;
}
.pub-shot img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.5s var(--e-out);
}
.pub-shot:hover img {
transform: scale(1.035);
}
.pubs {
display: grid;
gap: 1px;
background: var(--rule);
border-block: 1px solid var(--rule);
}
@media (min-width: 800px) {
.pubs {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.pub {
background: var(--paper);
padding: clamp(1rem, 2vw, 1.75rem);
}
.pub__frame {
overflow: hidden;
aspect-ratio: 16 / 11;
background: var(--paper-sunk);
margin-bottom: 1.1rem;
}
.pub__frame img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.2s var(--e-out);
}
.pub:hover .pub__frame img {
transform: scale(1.03);
}
.pub h3 {
font-size: clamp(1.25rem, 1.9vw, 1.75rem);
font-weight: 300;
line-height: 1.08;
letter-spacing: -0.03em;
margin-top: 0.6rem;
}
.pub p {
color: var(--ink-70);
font-size: var(--fs-small);
line-height: 1.6;
margin-top: 0.6rem;
max-width: 46ch;
}
.contact {
display: grid;
gap: clamp(2.5rem, 5vw, 5rem);
align-items: start;
padding-top: calc(var(--header-h) + clamp(2.5rem, 7vw, 6rem));
padding-bottom: var(--section-y);
}
@media (min-width: 1000px) {
.contact {
grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
}
}
.contact__main {
display: grid;
gap: clamp(2.5rem, 5vw, 4.5rem);
max-width: 44rem;
}
.contact__lead {
font-size: clamp(2.1rem, 5vw, 4.25rem);
line-height: 1.0;
margin-top: clamp(1rem, 2vw, 1.75rem);
max-width: 13ch;
}
.contact__note {
max-width: 44ch;
margin-top: clamp(1.25rem, 2.5vw, 2rem);
}
.contact__plate {
overflow: hidden;
aspect-ratio: 3 / 4;
background: var(--paper-field);
}
@media (min-width: 1000px) {
.contact__plate {
position: sticky;
top: calc(var(--header-h) + 2rem);
}
}
.contact__plate img {
width: 100%;
height: 100%;
object-fit: cover;
}
.contact__form-title {
margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.contact__form .field {
padding-block: 0 1rem;
margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.contact__form .field label {
margin-bottom: 0.9rem;
}
.contact__form .btn {
margin-top: 0.5rem;
}
.contact-list {
border-top: 1px solid var(--rule);
}
.contact-list a,
.contact-list div {
display: grid;
gap: 0.3rem;
padding: clamp(0.85rem, 1.6vw, 1.2rem) 0;
border-bottom: 1px solid var(--rule);
}
.contact-list b {
font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
font-weight: 400;
letter-spacing: -0.024em;
transition: opacity var(--t-fast) linear;
}
.contact-list a:hover b {
opacity: 0.5;
}
.legal {
max-width: 70ch;
color: var(--ink-70);
font-size: 0.8125rem;
line-height: 1.7;
}
.legal h2 {
font-size: 1rem;
font-weight: 500;
color: var(--ink);
margin: 2rem 0 0.6rem;
letter-spacing: -0.015em;
}
.legal p {
margin-bottom: 0.6rem;
}
.nf {
min-height: 74svh;
display: grid;
align-content: center;
gap: 1.25rem;
justify-items: start;
padding-top: var(--header-h);
}
.nf__code {
display: flex;
font-family: var(--mono);
font-size: clamp(3rem, 12vw, 9rem);
font-weight: 300;
line-height: 1;
letter-spacing: -0.02em;
color: var(--ink);
}
.nf__d {
opacity: 0;
filter: blur(37px);
animation: letter-in 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
animation-delay: calc(var(--i) * 0.22s + 0.1s);
}
@media (prefers-reduced-motion: reduce) {
.nf__d {
opacity: 1;
filter: none;
animation: none;
}
}
.nf__loop {
overflow: hidden;
border-top: 1px solid var(--rule);
}
.nf__track {
display: flex;
width: max-content;
animation: wall-drift 70s linear infinite;
}
.nf__cell {
flex: none;
width: clamp(150px, 20vw, 280px);
aspect-ratio: 4 / 5;
overflow: hidden;
border-right: 1px solid var(--rule);
background: var(--paper-field);
}
.nf__cell img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.2s var(--e-out);
}
.nf__cell:hover img {
transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
.nf__track {
animation: none;
}
}
.presets {
margin-top: 1.5rem;
}
.presets__row {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-top: 0.75rem;
}
.preset {
padding: 0.5rem 0.9rem;
border: 1px solid var(--rule);
border-radius: 999px;
font-size: var(--fs-small);
color: var(--ink-70);
transition:
border-color var(--t-fast) linear,
background-color var(--t-fast) linear,
color var(--t-fast) linear;
}
.preset:hover {
border-color: var(--ink);
background: var(--ink);
color: var(--paper);
}
.presets[hidden] {
display: none;
}
.sheet-a {
padding-top: calc(var(--header-h) + clamp(1.5rem, 3vw, 2.5rem));
padding-bottom: 200px;
}
.sheet__head,
.sheet-a__body,
.sheet-b__top {
margin-inline: calc(-1 * var(--page-x));
padding-inline: var(--page-x);
}
.sheet__head {
padding-bottom: clamp(1.25rem, 2.5vw, 2rem);
border-bottom: 1px solid var(--rule);
}
.sheet__head .label {
margin-bottom: 0.9rem;
}
.sheet__head h1 {
font-size: clamp(1.75rem, 3.4vw, 3rem);
line-height: 1.06;
max-width: 22ch;
}
.sheet-a__body {
display: grid;
border-bottom: 1px solid var(--rule);
}
@media (min-width: 900px) {
.sheet-a__body {
grid-template-columns: minmax(0, 0.68fr) minmax(0, 1fr);
}
}
.sheet-a__plate {
aspect-ratio: 4 / 5;
overflow: hidden;
background: var(--paper-sunk);
margin-block: clamp(2rem, 5vw, 4rem);
margin-right: clamp(1.5rem, 3vw, 3rem);
}
.sheet-a__plate img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sheet-a__cells {
display: grid;
align-content: start;
}
@media (min-width: 560px) {
.sheet-a__cells {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 900px) {
.sheet-a__cells {
border-left: 1px solid var(--rule);
margin-right: calc(-1 * var(--page-x));
padding-right: var(--page-x);
}
}
.sheet-a__cell {
padding: clamp(1.25rem, 2vw, 1.75rem) clamp(1.5rem, 3vw, 2.5rem);
border-bottom: 1px solid var(--rule);
}
@media (min-width: 560px) {
.sheet-a__cell:nth-child(odd) {
border-right: 1px solid var(--rule);
}
}
.sheet-a__cell .label {
margin-bottom: 0.7rem;
}
.sheet-a__cell p:not(.label) {
font-size: clamp(1rem, 1.4vw, 1.1875rem);
letter-spacing: -0.015em;
}
.sheet-a__cell a {
transition: color var(--t-fast) linear;
color: var(--ink-45);
}
.sheet-a__cell a:hover {
color: var(--ink);
}
.sheet-b {
padding-bottom: 200px;
}
.sheet-b__top {
display: grid;
}
@media (min-width: 900px) {
.sheet-b__top {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
}
.sheet-b__letter {
padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 3vw, 3rem) clamp(2.5rem, 6vw, 5rem) 0;
}
.sheet-b__title {
display: grid;
gap: 1rem;
}
.sheet-b__title h2 {
font-size: clamp(1.5rem, 2.6vw, 2.25rem);
line-height: 1.1;
max-width: 24ch;
}
.sheet-b__plate {
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--paper-sunk);
}
@media (min-width: 900px) {
.sheet-b__plate {
position: sticky;
top: calc(var(--header-h) + 2rem);
border-left: 1px solid var(--rule);
}
}
.sheet-b__plate img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sheet-b__form {
display: grid;
gap: 1.25rem;
align-content: start;
max-width: 34rem;
margin-top: clamp(2rem, 4vw, 3rem);
}
.sheet-b__form .consent {
margin: 0.5rem 0 0;
}
.toc {
display: grid;
gap: clamp(1.5rem, 3vw, 3rem);
align-items: start;
}
@media (min-width: 900px) {
.toc {
grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
}
}
.toc__plate {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
background: var(--paper-sunk);
}
@media (min-width: 900px) {
.toc__plate {
position: sticky;
top: calc(var(--header-h) + 2rem);
}
}
.toc__shot {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.7s var(--e-line);
}
.toc__shot.is-on {
opacity: 1;
}
.toc__shot img {
width: 100%;
height: 100%;
object-fit: cover;
}
.toc__list {
border-top: 1px solid var(--rule);
max-width: 46rem;
}
.toc__row {
display: flex;
align-items: baseline;
gap: 0.9rem;
padding: clamp(0.45rem, 0.8vw, 0.65rem) 0;
border-bottom: 1px solid var(--rule);
color: var(--ink-45);
transition: color var(--t-fast) linear;
}
.toc__row.is-on,
.toc__row:hover {
color: var(--ink);
}
.toc__name {
font-size: clamp(1rem, 1.5vw, 1.25rem);
letter-spacing: -0.015em;
white-space: nowrap;
}
.toc__lead {
flex: 1;
min-width: 1.5rem;
}
.toc__aside {
font-family: var(--mono);
font-size: var(--fs-mono);
font-weight: 400;
letter-spacing: 0.14em;
text-transform: uppercase;
white-space: nowrap;
}
.spread {
padding-top: calc(var(--header-h) + clamp(1.5rem, 3vw, 2.5rem));
}
.spread__top {
display: grid;
border-bottom: 1px solid var(--rule);
}
@media (min-width: 900px) {
.spread__top {
grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
}
}
.spread__title {
display: grid;
align-content: start;
gap: 1rem;
padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 5vw, 4rem) 0;
}
.spread__title h1 {
font-size: clamp(1.75rem, 3.4vw, 3rem);
line-height: 1.06;
max-width: 19ch;
}
.spread__media {
aspect-ratio: 16 / 12.6;
overflow: hidden;
background: var(--paper-sunk);
}
@media (min-width: 900px) {
.spread__media {
border-left: 1px solid var(--rule);
}
}
.spread__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 12%;
}
.spread__foot {
display: grid;
}
@media (min-width: 900px) {
.spread__foot {
grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
}
.spread__foot::before {
content: '';
}
}
.spread__cols {
display: grid;
gap: clamp(1.5rem, 3vw, 2.5rem);
padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(2rem, 4vw, 3rem);
}
@media (min-width: 560px) {
.spread__cols {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 900px) {
.spread__cols {
padding-left: clamp(1.5rem, 3vw, 2.5rem);
}
}
.spread__cols p:not(.label) {
font-size: 0.8125rem;
line-height: 1.7;
color: var(--ink-45);
margin-top: 0.7rem;
}
.spread__spec,
.spread__top,
.spread__foot {
margin-inline: calc(-1 * var(--page-x));
padding-inline: var(--page-x);
}
.spread__spec {
border-top: 1px solid var(--rule);
}
.cells {
display: grid;
margin-inline: calc(-1 * var(--page-x));
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
}
@media (min-width: 800px) {
.cell:first-child {
padding-left: var(--page-x);
}
.cell:last-child {
padding-right: var(--page-x);
}
}
@media (max-width: 799px) {
.cell {
padding-inline: var(--page-x);
}
}
@media (min-width: 800px) {
.cells {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.cell {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: clamp(1.5rem, 3vw, 2.5rem);
padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem);
}
@media (min-width: 800px) {
.cell + .cell {
border-left: 1px solid var(--rule);
}
}
@media (max-width: 799px) {
.cell + .cell {
border-top: 1px solid var(--rule);
}
}
.cell__n {
font-family: var(--mono);
font-size: 10px;
font-weight: 400;
letter-spacing: 0.14em;
color: var(--ink-30);
}
.cell__plate {
display: block;
aspect-ratio: 4 / 5;
overflow: hidden;
background: rgba(255, 255, 255, 0.06);
clip-path: inset(0 0 100% 0);
transition: clip-path 0.9s cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition-delay: var(--reveal-delay, 0s);
}
.cell.is-in .cell__plate {
clip-path: inset(0 0 0 0);
}
.cell__plate img {
width: 100%;
height: 100%;
object-fit: cover;
filter: blur(14px);
transform: scale(1.06);
transition:
filter 1.1s cubic-bezier(0.455, 0.03, 0.515, 0.955),
transform 1.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition-delay: var(--reveal-delay, 0s);
}
.cell.is-in .cell__plate img {
filter: blur(0);
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.cell__plate {
clip-path: none;
}
.cell__plate img {
filter: none;
transform: none;
}
}
.cell__body {
display: grid;
gap: 0.9rem;
}
.cell__title {
font-family: var(--mono);
font-size: var(--fs-mono);
font-weight: 400;
letter-spacing: 0.14em;
text-transform: uppercase;
line-height: 1.5;
}
.cell__body p {
font-size: 0.8125rem;
line-height: 1.7;
color: var(--ink-45);
max-width: 42ch;
}
.head--mid {
display: block;
text-align: center;
}
.head--mid,
.head + .cells {
margin-inline: calc(-1 * var(--page-x));
}
.head--mid {
padding-inline: var(--page-x);
}
.head--mid .label {
margin-bottom: 0.7rem;
}
.catreq {
display: grid;
gap: clamp(1.75rem, 4vw, 4rem);
align-items: center;
border-top: 1px solid var(--rule);
padding-top: clamp(1.75rem, 4vw, 3.5rem);
}
@media (min-width: 900px) {
.catreq {
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
}
}
.catreq__cover {
position: relative;
margin-right: 14px;
margin-bottom: 14px;
}
.catreq__cover::before,
.catreq__cover::after {
content: '';
position: absolute;
inset: 0;
z-index: -1;
border: 1px solid var(--rule);
background: var(--paper);
}
.catreq__cover::before {
transform: translate(7px, 7px);
}
.catreq__cover::after {
transform: translate(14px, 14px);
}
.catreq__media {
overflow: hidden;
aspect-ratio: 4 / 3;
background: var(--paper-sunk);
border: 1px solid var(--rule);
}
.catreq__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.catreq__body .label {
color: var(--ink-45);
margin-bottom: 0.9rem;
}
.catreq__form {
display: grid;
gap: 1.25rem;
align-items: end;
margin-top: clamp(1.75rem, 3vw, 2.5rem);
max-width: 34rem;
}
@media (min-width: 560px) {
.catreq__form {
grid-template-columns: minmax(0, 1fr) auto;
}
.catreq__form .form-status {
grid-column: 1 / -1;
}
}
.catreq__form .field {
padding-top: 0;
}
.catreq__form .btn {
white-space: nowrap;
}
.catreq__form .form-note {
margin-top: 0;
}
@media (min-width: 560px) {
.catreq__form .form-note {
grid-column: 1 / -1;
}
}
.sent--inline {
padding: 0;
gap: 0.9rem;
margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.split {
display: grid;
gap: clamp(1.5rem, 3vw, 3rem);
align-items: center;
}
@media (min-width: 900px) {
.split {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.split--reverse > :first-child {
order: 2;
}
}
.split__media {
overflow: hidden;
aspect-ratio: 4 / 3;
background: var(--paper-sunk);
}
.split__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pub-shot {
display: block;
width: 100%;
aspect-ratio: 4 / 5;
overflow: hidden;
background: var(--paper) center / cover no-repeat;
cursor: zoom-in;
}
.pub-shot img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.5s var(--e-out);
}
.pub-shot:hover img {
transform: scale(1.035);
}
.pubs {
display: grid;
gap: 1px;
background: var(--rule);
border-block: 1px solid var(--rule);
}
@media (min-width: 800px) {
.pubs {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.pub {
background: var(--paper);
padding: clamp(1rem, 2vw, 1.75rem);
}
.pub__frame {
overflow: hidden;
aspect-ratio: 16 / 11;
background: var(--paper-sunk);
margin-bottom: 1.1rem;
}
.pub__frame img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.2s var(--e-out);
}
.pub:hover .pub__frame img {
transform: scale(1.03);
}
.pub h3 {
font-size: clamp(1.25rem, 1.9vw, 1.75rem);
font-weight: 300;
line-height: 1.08;
letter-spacing: -0.03em;
margin-top: 0.6rem;
}
.pub p {
color: var(--ink-70);
font-size: var(--fs-small);
line-height: 1.6;
margin-top: 0.6rem;
max-width: 46ch;
}
.contact {
display: grid;
gap: clamp(2.5rem, 5vw, 5rem);
align-items: start;
padding-top: calc(var(--header-h) + clamp(2.5rem, 7vw, 6rem));
padding-bottom: var(--section-y);
}
@media (min-width: 1000px) {
.contact {
grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
}
}
.contact__main {
display: grid;
gap: clamp(2.5rem, 5vw, 4.5rem);
max-width: 44rem;
}
.contact__lead {
font-size: clamp(2.1rem, 5vw, 4.25rem);
line-height: 1.0;
margin-top: clamp(1rem, 2vw, 1.75rem);
max-width: 13ch;
}
.contact__note {
max-width: 44ch;
margin-top: clamp(1.25rem, 2.5vw, 2rem);
}
.contact__plate {
overflow: hidden;
aspect-ratio: 3 / 4;
background: var(--paper-field);
}
@media (min-width: 1000px) {
.contact__plate {
position: sticky;
top: calc(var(--header-h) + 2rem);
}
}
.contact__plate img {
width: 100%;
height: 100%;
object-fit: cover;
}
.contact__form-title {
margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.contact__form .field {
padding-block: 0 1rem;
margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.contact__form .field label {
margin-bottom: 0.9rem;
}
.contact__form .btn {
margin-top: 0.5rem;
}
.contact-list {
border-top: 1px solid var(--rule);
}
.contact-list a,
.contact-list div {
display: grid;
gap: 0.3rem;
padding: clamp(0.85rem, 1.6vw, 1.2rem) 0;
border-bottom: 1px solid var(--rule);
}
.contact-list b {
font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
font-weight: 400;
letter-spacing: -0.024em;
transition: opacity var(--t-fast) linear;
}
.contact-list a:hover b {
opacity: 0.5;
}
.legal {
max-width: 70ch;
color: var(--ink-70);
font-size: 0.8125rem;
line-height: 1.7;
}
.legal h2 {
font-size: 1rem;
font-weight: 500;
color: var(--ink);
margin: 2rem 0 0.6rem;
letter-spacing: -0.015em;
}
.legal p {
margin-bottom: 0.6rem;
}
.nf {
min-height: 74svh;
display: grid;
align-content: center;
gap: 1.25rem;
justify-items: start;
padding-top: var(--header-h);
}
.nf__code {
display: flex;
font-family: var(--mono);
font-size: clamp(3rem, 12vw, 9rem);
font-weight: 300;
line-height: 1;
letter-spacing: -0.02em;
color: var(--ink);
}
.nf__d {
opacity: 0;
filter: blur(37px);
animation: letter-in 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
animation-delay: calc(var(--i) * 0.22s + 0.1s);
}
@media (prefers-reduced-motion: reduce) {
.nf__d {
opacity: 1;
filter: none;
animation: none;
}
}
.nf__loop {
overflow: hidden;
border-top: 1px solid var(--rule);
}
.nf__track {
display: flex;
width: max-content;
animation: wall-drift 70s linear infinite;
}
.nf__cell {
flex: none;
width: clamp(150px, 20vw, 280px);
aspect-ratio: 4 / 5;
overflow: hidden;
border-right: 1px solid var(--rule);
background: var(--paper-field);
}
.nf__cell img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.2s var(--e-out);
}
.nf__cell:hover img {
transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
.nf__track {
animation: none;
}
}
.services {
display: grid;
gap: clamp(2rem, 5vw, 4.5rem);
align-items: start;
}
@media (min-width: 900px) {
.services {
grid-template-columns: minmax(0, 1fr) minmax(0, 0.56fr);
}
}
.services__list {
border-top: 1px solid var(--rule);
}
.service {
display: grid;
grid-template-columns: 3rem minmax(0, 1fr);
gap: 0 clamp(1rem, 2vw, 1.75rem);
padding: clamp(1.5rem, 3vw, 2.6rem) 0;
border-bottom: 1px solid var(--rule);
cursor: default;
}
.service:focus-visible {
outline-offset: -4px;
}
.service__n {
font-family: var(--mono);
font-size: var(--fs-mono);
font-weight: 400;
letter-spacing: var(--tr-mono);
color: var(--ink-30);
padding-top: 0.45em;
transition: color var(--t-mid) linear;
}
.service.is-on .service__n {
color: var(--ink);
}
.service__name {
font-size: clamp(1.35rem, 2.4vw, 2.1rem);
font-weight: 300;
line-height: 1.12;
letter-spacing: -0.03em;
color: var(--ink-45);
transition: color var(--t-mid) linear;
}
.service.is-on .service__name {
color: var(--ink);
}
.service__body {
color: var(--ink-30);
font-size: var(--fs-small);
line-height: 1.65;
max-width: 46ch;
margin-top: 0.7rem;
transition: color var(--t-mid) linear;
}
.service.is-on .service__body {
color: var(--ink-70);
}
.services__plate {
position: relative;
aspect-ratio: 3 / 4;
overflow: hidden;
background: var(--paper-sunk);
}
@media (min-width: 900px) {
.services__plate {
position: sticky;
top: calc(var(--header-h) + 2rem);
}
}
.services__shot {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.9s var(--e-out);
}
.services__shot.is-on {
opacity: 1;
}
.services__shot img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
.services__shot {
transition: none;
}
}
@media (min-width: 900px) {
.opener h1,
.opening h1,
.profile__name,
.work__title,
.cta-band__panel h2,
.statement,
.buro-sheet__title,
.sent__title,
.nf b {
font-weight: 200;
}
.head h2,
.list__name,
.service__name {
font-weight: 250;
}
}