@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 300 400;
font-display: swap;
src: url("/fonts/open-sans-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02FF, U+1D00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 300 400;
font-display: swap;
src: url("/fonts/open-sans-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
:root {
--c-paper: #faf9f7;
--c-paper-2: #efebe5;
--c-ink: #1f1d1b;
--c-text: #3a3734;
--c-muted: #6b665f;
--c-line: #dcd6ce;
--c-dark: #1c1b19;
--c-dark-text: #ebe7e1;
--c-dark-muted: #a8a299;
--c-dark-line: #3a3733;
--font-sans: "Open Sans", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
--step--1: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);
--step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
--step-1: clamp(1.1875rem, 1.07rem + 0.55vw, 1.5rem);
--step-2: clamp(1.5rem, 1.2rem + 1.4vw, 2.375rem);
--step-3: clamp(2rem, 1.35rem + 3vw, 4rem);
--step-4: clamp(2.5rem, 1.45rem + 5vw, 6.25rem);
--gutter: clamp(1rem, 0.4rem + 3vw, 3rem);
--max: 90rem;
--section: clamp(5.5rem, 3rem + 10vw, 11rem);
--header-h: 4rem;
--ease: cubic-bezier(0.2, 0.7, 0.1, 1);
}
@media (min-width: 60rem) {
:root { --header-h: 5.25rem; }
}
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + 1rem);
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
body {
margin: 0;
background: var(--c-paper);
color: var(--c-text);
font-family: var(--font-sans);
font-size: var(--step-0);
line-height: 1.6;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
img[style*="--focal"] { object-position: var(--focal, 50% 50%); }
@media (orientation: portrait) {
img[style*="--focal-p"] { object-position: var(--focal-p); }
}
h1, h2, h3, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3 { color: var(--c-ink); font-weight: 400; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
main:focus { outline: none; }
:focus-visible {
outline: 2px solid currentColor;
outline-offset: 4px;
border-radius: 1px;
}
.container {
width: 100%;
max-width: var(--max);
margin-inline: auto;
padding-inline: var(--gutter);
}
.section { padding-block: var(--section); }
.eyebrow {
font-size: var(--step--1);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--c-muted);
line-height: 1.4;
}
.eyebrow a { text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; }
.skip-link {
position: absolute;
left: var(--gutter);
top: 0.5rem;
z-index: 100;
padding: 0.75rem 1rem;
background: var(--c-ink);
color: var(--c-paper);
transform: translateY(-200%);
}
.skip-link:focus { transform: none; }
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.nobreak { white-space: nowrap; }
.link-arrow,
.slide__more,
.project-next__more {
display: inline-flex;
align-items: center;
gap: 0.75rem;
min-height: 2.75rem;
font-size: var(--step--1);
letter-spacing: 0.14em;
text-transform: uppercase;
text-decoration: none;
color: var(--c-ink);
}
.link-arrow::after,
.slide__more::after,
.project-next__more::after {
content: "";
width: 2.5rem;
height: 1px;
background: currentColor;
transition: width 0.6s var(--ease);
}
.link-arrow:hover::after { width: 3.5rem; }
.placeholder {
display: inline-block;
padding: 0.2em 0.5em;
border: 1px dashed currentColor;
font-size: var(--step--1);
line-height: 1.5;
letter-spacing: 0;
text-transform: none;
color: #8a3d1f;
background: rgb(138 61 31 / 0.06);
}
.contact .placeholder,
.site-footer .placeholder { color: #f0b48f; background: rgb(240 180 143 / 0.08); }
.site-header {
position: relative;
z-index: 50;
border-bottom: 1px solid transparent;
transition: border-color 0.4s ease;
}
.header-on .site-header { position: sticky; top: 0; }
.header-on .site-header.is-hidden:not(:has(:focus-visible)) { transform: translate3d(0, -100%, 0); }
@media (prefers-reduced-motion: no-preference) {
.header-on .site-header { transition: border-color 0.4s ease, transform 0.5s var(--ease); }
}
.site-header::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: rgb(250 249 247 / 0.94);
}
@supports (backdrop-filter: blur(1px)) {
.site-header::before { background: rgb(250 249 247 / 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
}
.site-header.is-scrolled { border-bottom-color: var(--c-line); }
.site-header.is-over-hero::before { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.is-over-hero .site-header__brand .logo { display: none; }
.is-over-hero .site-header__brand .logo--on-dark { display: block; }
.is-over-hero .site-nav a,
.is-over-hero .header-call,
.is-over-hero .menu-toggle { color: #fff; }
.site-header__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem 0.25rem;
max-width: var(--max);
min-height: var(--header-h);
margin-inline: auto;
padding-inline: var(--gutter);
}
.site-header__brand { display: inline-flex; padding-block: 0.75rem; margin-right: auto; }
.site-header__brand .logo { width: clamp(8.25rem, 6rem + 6vw, 10.5rem); height: auto; }
.site-header__brand .logo--on-dark { display: none; }
.site-nav ul { display: flex; gap: clamp(1rem, 0.5rem + 2vw, 2.5rem); }
.site-nav a {
display: inline-flex;
align-items: center;
min-height: 2.75rem;
font-size: var(--step--1);
letter-spacing: 0.14em;
text-transform: uppercase;
text-decoration: none;
color: var(--c-ink);
background: linear-gradient(currentColor, currentColor) 0 calc(100% - 0.7rem) / 0 1px no-repeat;
transition: background-size 0.5s var(--ease);
}
.site-nav a:hover { background-size: 100% 1px; }
.header-call,
.menu-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
padding: 0;
border: 0;
border-radius: 50%;
background: none;
color: var(--c-ink);
cursor: pointer;
transition: background-color 0.3s ease;
}
@media (hover: hover) {
.header-call:hover,
.menu-toggle:hover { background-color: rgb(31 29 27 / 0.05); }
.menu-toggle:hover .menu-toggle__lines::after { width: 100%; }
}
.header-call .icon { width: 1.375rem; height: 1.375rem; }
.menu-toggle { margin-right: -0.6rem; }
.menu-toggle[hidden] { display: none; }
.menu-toggle__lines { position: relative; display: block; width: 1.5rem; height: 0.5rem; }
.menu-toggle__lines::before,
.menu-toggle__lines::after {
content: "";
position: absolute;
right: 0;
height: 1.5px;
background: currentColor;
transition: transform 0.5s var(--ease), width 0.5s var(--ease);
}
.menu-toggle__lines::before { top: 0; width: 100%; }
.menu-toggle__lines::after { bottom: 0; width: 66%; }
.menu-toggle[aria-expanded="true"] .menu-toggle__lines::before { transform: translateY(3.25px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__lines::after { width: 100%; transform: translateY(-3.25px) rotate(-45deg); }
.menu-extra { display: none; }
.social-list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-left: -0.6rem; }
.social-list li { display: flex; align-items: center; gap: 0.5rem; }
.social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
text-decoration: none;
transition: color 0.4s ease, background-color 0.4s ease;
}
.social-link:focus-visible { outline-offset: 0; }
@media (max-width: 47.99rem) {
.menu-panel { flex-basis: 100%; }
.menu-on .site-header::before { transition: background-color 0.35s ease; }
.menu-on [data-menu-open].site-header::before {
background: var(--c-dark);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.menu-on [data-menu-open].site-header { border-bottom-color: var(--c-dark-line); }
.menu-on [data-menu-open] .header-call,
.menu-on [data-menu-open] .menu-toggle { color: #fff; }
.menu-on [data-menu-open] .site-header__brand .logo { display: none; }
.menu-on [data-menu-open] .site-header__brand .logo--on-dark { display: block; }
.menu-on .menu-panel {
position: fixed;
inset: var(--header-h) 0 0 0;
display: flex;
flex-direction: column;
gap: 2.5rem;
padding: clamp(1.75rem, 7vh, 3.5rem) var(--gutter) calc(1.75rem + env(safe-area-inset-bottom));
overflow-y: auto;
overscroll-behavior: contain;
background: var(--c-dark);
color: var(--c-dark-text);
visibility: hidden;
opacity: 0;
transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.menu-on [data-menu-open] .menu-panel {
visibility: visible;
opacity: 1;
transition: opacity 0.35s ease;
}
.menu-on .site-nav ul { flex-direction: column; gap: 0.25rem; }
.menu-on .site-nav a {
font-size: var(--step-3);
font-weight: 300;
letter-spacing: -0.025em;
text-transform: none;
color: #fff;
background: none;
}
.menu-on .menu-extra {
display: grid;
gap: 1.5rem;
margin-top: auto;
padding-top: 1.5rem;
border-top: 1px solid var(--c-dark-line);
}
.menu-extra__list { display: grid; gap: 1.25rem; }
.menu-extra__list dt {
margin-bottom: 0.15rem;
font-size: var(--step--1);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--c-dark-muted);
}
.menu-extra__list dd { font-size: var(--step-1); line-height: 1.45; color: #fff; }
.menu-extra__list a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; }
.menu-extra__list address { font-style: normal; }
.menu-extra .social-link { color: #fff; }
@media (hover: hover) {
.menu-extra .social-link:hover { background-color: rgb(255 255 255 / 0.08); }
}
@media (prefers-reduced-motion: no-preference) {
.menu-on .site-nav li,
.menu-on .menu-extra {
transform: translateY(0.75rem);
opacity: 0;
transition: transform 0.6s var(--ease), opacity 0.6s var(--ease);
}
.menu-on [data-menu-open] .site-nav li,
.menu-on [data-menu-open] .menu-extra { transform: none; opacity: 1; }
.menu-on [data-menu-open] .site-nav li:nth-child(2) { transition-delay: 0.05s; }
.menu-on [data-menu-open] .site-nav li:nth-child(3) { transition-delay: 0.1s; }
.menu-on [data-menu-open] .menu-extra { transition-delay: 0.15s; }
}
}
@media (min-width: 48rem) {
.menu-toggle,
.header-call { display: none; }
}
.hero { position: relative; margin-top: calc((var(--header-h) + 1px) * -1); background: var(--c-dark); }
.hero__stage { position: relative; height: 100svh; min-height: 32rem; overflow: hidden; color: #fff; }
.hero-on { height: 320svh; }
.hero-on .hero__stage { position: sticky; top: 0; }
@media (max-width: 47.99rem) {
.hero-on { height: 280svh; }
}
.hero__camera { position: absolute; inset: 0 -3%; transform-origin: 50% 50%; }
.hero-on .hero__camera { will-change: transform; }
.hero__scene { position: absolute; inset: 0; }
.hero__scene + .hero__scene { opacity: 0; }
.hero-on .hero__scene + .hero__scene { will-change: opacity; }
.hero__scene picture,
.hero__scene img { width: 100%; height: 100%; }
.hero__scene img { object-fit: cover; }
.hero__stage::before,
.hero__stage::after { content: ""; position: absolute; z-index: 1; pointer-events: none; }
.hero__stage::before {
inset: 0 0 auto;
height: calc(var(--header-h) + 4rem);
background: linear-gradient(to bottom, rgb(20 19 17 / 0.62), rgb(20 19 17 / 0.4) 45%, rgb(20 19 17 / 0));
}
.hero__stage::after {
inset: 0;
background:
radial-gradient(ellipse 95% 95% at 0% 100%, rgb(20 19 17 / 0.76), rgb(20 19 17 / 0.62) 35%, rgb(20 19 17 / 0.38) 62%, rgb(20 19 17 / 0) 90%),
radial-gradient(ellipse 38% 30% at 100% 100%, rgb(20 19 17 / 0.7), rgb(20 19 17 / 0.55) 50%, rgb(20 19 17 / 0) 100%);
}
@media (max-width: 47.99rem) {
.hero__stage::after { background: linear-gradient(to top, rgb(20 19 17 / 0.8), rgb(20 19 17 / 0.62) 30%, rgb(20 19 17 / 0.34) 50%, rgb(20 19 17 / 0) 70%); }
}
.hero__content {
position: absolute;
inset: auto 0 0;
z-index: 2;
display: grid;
gap: 0.875rem;
justify-items: start;
padding-bottom: calc(clamp(2.5rem, 9vh, 6rem) + env(safe-area-inset-bottom));
}
.hero__title {
font-size: var(--step-4);
font-weight: 300;
line-height: 1;
letter-spacing: -0.035em;
color: #fff;
max-width: 11ch;
text-shadow: 0 1px 30px rgb(0 0 0 / 0.18);
}
.hero__line { font-size: var(--step-1); line-height: 1.4; color: rgb(255 255 255 / 0.92); text-shadow: 0 1px 16px rgb(0 0 0 / 0.25); }
.hero__cta { margin-top: 0.5rem; color: #fff; }
.hero__meta {
position: absolute;
right: var(--gutter);
bottom: calc(clamp(2.5rem, 9vh, 6rem) + env(safe-area-inset-bottom));
z-index: 2;
font-size: var(--step--1);
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgb(255 255 255 / 0.86);
text-shadow: 0 1px 12px rgb(0 0 0 / 0.3);
}
@media (max-width: 47.99rem) {
.hero__meta { writing-mode: vertical-rl; transform: rotate(180deg); right: calc(var(--gutter) - 0.25rem); }
}
.hero__cue {
position: absolute;
left: 50%;
bottom: calc(1.25rem + env(safe-area-inset-bottom));
z-index: 2;
display: grid;
justify-items: center;
gap: 0.375rem;
color: #fff;
transform: translateX(-50%);
filter: drop-shadow(0 0 6px rgb(0 0 0 / 0.35));
transition: opacity 0.6s ease;
pointer-events: none;
}
.hero__cue-line {
position: relative;
display: block;
width: 1px;
height: clamp(2.5rem, 6vh, 3.75rem);
overflow: hidden;
background: rgb(255 255 255 / 0.32);
}
.hero__cue-line::after {
content: "";
position: absolute;
inset: 0 0 auto;
height: 40%;
background: #fff;
}
.hero__cue-head { display: block; }
@media (max-width: 47.99rem) {
.hero__cue { bottom: calc(0.75rem + env(safe-area-inset-bottom)); }
.hero__cue-line { height: 1.75rem; }
.hero__content { padding-bottom: calc(max(4.75rem, 10vh) + env(safe-area-inset-bottom)); }
}
.hero.is-moved .hero__cue { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
.hero__cue-line::after { animation: hero-cue 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
.hero__content > * { animation: rise 1.1s var(--ease) both; }
.hero__content > :nth-child(2) { animation-delay: 0.12s; }
.hero__content > :nth-child(3) { animation-delay: 0.24s; }
}
@keyframes hero-cue {
0% { transform: translateY(-100%); }
65%, 100% { transform: translateY(250%); }
}
@keyframes hero-settle {
from { transform: scale(1.06); }
to { transform: none; }
}
.about__grid { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.about__title { font-size: var(--step-3); font-weight: 300; max-width: 18ch; }
.about__body { display: grid; gap: 1.25rem; max-width: 36rem; }
.about__body p:first-child { font-size: var(--step-1); font-weight: 300; line-height: 1.5; color: var(--c-ink); }
.about__portrait img { width: 100%; }
figcaption { font-size: var(--step--1); letter-spacing: 0.08em; color: var(--c-muted); }
@media (min-width: 60rem) {
.about__grid {
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--gutter);
row-gap: clamp(3rem, 6vw, 6rem);
}
.about__eyebrow { grid-column: 1 / span 3; padding-top: 0.75rem; }
.about__title { grid-column: 4 / span 9; }
.about__portrait { grid-column: 1 / span 7; grid-row: 2; }
.about__body { grid-column: 9 / span 4; grid-row: 2; align-self: start; }
}
.works { padding-top: 0; padding-bottom: 0; }
.section-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
padding-top: 2rem;
border-top: 1px solid var(--c-line);
margin-bottom: clamp(2rem, 1rem + 4vw, 4.5rem);
}
.section-head__title { font-size: var(--step-3); font-weight: 300; }
.section-head__count { font-size: var(--step--1); letter-spacing: 0.14em; color: var(--c-muted); }
.reel__list { display: grid; gap: 0.5rem; }
.slide { position: relative; display: grid; color: #fff; }
.slide__media { position: relative; overflow: hidden; background: var(--c-paper-2); }
.slide__frame img { width: 100%; height: calc(100svh - var(--header-h)); min-height: 26rem; object-fit: cover; }
.slide__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgb(20 19 17 / 0.76), rgb(20 19 17 / 0.32) 38%, rgb(20 19 17 / 0) 64%);
pointer-events: none;
}
.slide__media,
.slide__text { grid-area: 1 / 1; }
.slide__text {
z-index: 2;
display: grid;
gap: 0.5rem;
align-self: end;
justify-self: center;
justify-items: start;
width: 100%;
max-width: var(--max);
padding: 0 var(--gutter) calc(clamp(2rem, 7vh, 5rem) + env(safe-area-inset-bottom));
}
.slide__index,
.slide__meta { font-size: var(--step--1); letter-spacing: 0.14em; color: rgb(255 255 255 / 0.84); font-variant-numeric: tabular-nums; }
.slide__meta { letter-spacing: 0.1em; text-transform: uppercase; }
.slide__title { font-size: var(--step-3); font-weight: 300; color: #fff; max-width: 16ch; }
.slide__title a { text-decoration: none; }
.slide__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.slide a, .slide img { -webkit-user-drag: none; }
.slide__title a:focus-visible { outline: none; }
.slide__line { font-size: var(--step-1); line-height: 1.45; color: rgb(255 255 255 / 0.92); max-width: 34ch; }
.slide__more { margin-top: 0.25rem; color: #fff; }
@media (hover: hover) {
.slide:hover .slide__more::after { width: 3.5rem; }
}
.ripple-cursor,
.ripple-drop {
position: fixed;
top: 0;
left: 0;
z-index: 40;
width: 5rem;
height: 5rem;
margin: -2.5rem 0 0 -2.5rem;
pointer-events: none;
}
.ripple-cursor { opacity: 0; transition: opacity 0.35s ease; }
.ripple-cursor.is-on { opacity: 1; }
.ripple-cursor span,
.ripple-drop::before,
.ripple-drop::after {
content: "";
position: absolute;
inset: 0;
border: 1px solid rgb(255 255 255 / 0.85);
border-radius: 50%;
box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.16), inset 0 0 0 0.5px rgb(0 0 0 / 0.16);
opacity: 0;
}
.ripple-cursor span { animation: ripple 2.7s cubic-bezier(0.2, 0.6, 0.35, 1) infinite; }
.ripple-cursor span:nth-child(2) { animation-delay: 0.9s; }
.ripple-cursor span:nth-child(3) { animation-delay: 1.8s; }
.ripple-cursor:not(.is-on) span { animation-play-state: paused; }
.ripple-drop::before { border-width: 1.5px; animation: ripple-drop 0.75s cubic-bezier(0.15, 0.6, 0.3, 1) forwards; }
.ripple-drop::after { animation: ripple-drop 0.95s 0.12s cubic-bezier(0.15, 0.6, 0.3, 1) forwards; }
@keyframes ripple {
0% { transform: scale(0.2); opacity: 0; }
18% { opacity: 0.85; }
100% { transform: scale(1); opacity: 0; }
}
@keyframes ripple-drop {
0% { transform: scale(0.1); opacity: 1; }
100% { transform: scale(2.2); opacity: 0; }
}
.slide:has(.slide__title a:focus-visible)::before {
content: "";
position: absolute;
inset: 0.5rem;
z-index: 3;
border: 2px solid #fff;
box-shadow: 0 0 0 2px var(--c-ink), inset 0 0 0 2px var(--c-ink);
pointer-events: none;
}
.reel__progress { display: none; }
.reel-on .reel {
--stage-h: 100svh;
--step: 72svh;
height: calc(var(--stage-h) + (var(--count) - 1 + 0.35) * var(--step));
background: var(--c-dark);
}
@media (max-width: 59.99rem) {
.reel-on .reel { --step: 64svh; }
}
@media (max-width: 47.99rem) {
.reel-on .reel { --step: 58svh; }
}
.reel-on .reel__stage {
position: sticky;
top: 0;
height: var(--stage-h);
overflow: hidden;
background: var(--c-dark);
}
.reel-on .reel__list { display: block; height: 100%; }
.reel-on .reel__item { position: absolute; inset: 0; pointer-events: none; }
.reel-on .reel__item.is-active { pointer-events: auto; }
.reel-on .slide { height: 100%; grid-template-rows: minmax(0, 1fr); }
.reel-on .slide__media { position: absolute; inset: 0; transform: translate3d(0, 100%, 0); }
.reel-on .slide__media::after { content: none; }
.reel-on .slide::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(to top, rgb(20 19 17 / 0.74), rgb(20 19 17 / 0.3) 36%, rgb(20 19 17 / 0) 62%);
opacity: 0;
transition: opacity 0.45s ease;
pointer-events: none;
}
.reel-on .is-active .slide::after { opacity: 1; }
.reel-on .reel__item:first-child .slide__media { transform: none; }
.reel-on .slide__frame { position: absolute; inset: -6% 0; }
.reel-on .slide__frame picture,
.reel-on .slide__frame img { width: 100%; height: 100%; min-height: 0; }
.reel-on .reel__item:not(.is-near) .slide__frame { display: none; }
.reel-on .is-near .slide__media,
.reel-on .is-near .slide__frame { will-change: transform; }
.reel-on .slide__text > * {
opacity: 0;
transform: translate3d(0, 1rem, 0);
transition: opacity 0.45s ease, transform 0.8s var(--ease);
}
.reel-on .is-active .slide__text > * { opacity: 1; transform: none; transition-delay: 0.08s; }
.reel-on .is-active .slide__text > :nth-child(2) { transition-delay: 0.14s; }
.reel-on .is-active .slide__text > :nth-child(n + 3) { transition-delay: 0.22s; }
.reel-on .reel__progress {
display: block;
position: absolute;
inset: auto 0 0;
height: 2px;
background: rgb(255 255 255 / 0.22);
}
.reel-on .reel__progress span {
display: block;
height: 100%;
background: #fff;
transform: scaleX(0);
transform-origin: 0 50%;
}
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.works:not(.reel-on) .slide__frame img,
.frame--full img,
.approach__media img {
scale: 1.08;
animation: drift linear both;
animation-timeline: view();
animation-range: cover;
}
}
}
@keyframes drift {
from { translate: 0 -3.5%; }
to { translate: 0 3.5%; }
}
.approach { background: var(--c-paper-2); }
.approach__head { display: grid; gap: 1.5rem; margin-bottom: clamp(3rem, 2rem + 5vw, 6rem); }
.approach__title { font-size: var(--step-3); font-weight: 300; max-width: 14ch; }
.approach__intro { display: grid; gap: 1rem; max-width: 34rem; }
.approach__intro p:first-child { font-size: var(--step-1); line-height: 1.5; color: var(--c-ink); }
.pillars { display: grid; gap: 2.5rem; counter-reset: pillar; }
.pillar { display: grid; gap: 0.75rem; padding-top: 1.5rem; border-top: 1px solid var(--c-line); align-content: start; }
.pillar__index { font-size: var(--step--1); letter-spacing: 0.14em; color: var(--c-muted); }
.pillar__title { font-size: var(--step-1); }
.approach__feature {
display: grid;
gap: clamp(2rem, 1.5rem + 3vw, 4rem);
margin-top: clamp(4rem, 3rem + 6vw, 9rem);
}
.approach__media { display: grid; gap: 0.75rem; }
.approach__media picture { overflow: hidden; margin-inline: calc(var(--gutter) * -1); }
.approach__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.approach__statement {
font-size: var(--step-2);
font-weight: 300;
line-height: 1.3;
letter-spacing: -0.015em;
color: var(--c-ink);
max-width: 24ch;
}
@media (min-width: 48rem) {
.pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
}
@media (min-width: 60rem) {
.approach__head {
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--gutter);
align-items: end;
}
.approach__head .eyebrow { grid-column: 1 / -1; }
.approach__title { grid-column: 1 / span 6; }
.approach__intro { grid-column: 8 / span 5; }
.approach__feature {
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--gutter);
align-items: center;
}
.approach__media { grid-column: 1 / span 6; }
.approach__media picture { margin-inline: 0; }
.approach__statement { grid-column: 8 / span 5; }
}
.contact {
padding-block: var(--section);
background: var(--c-dark);
color: var(--c-dark-text);
}
.contact__grid { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.contact__eyebrow { color: var(--c-dark-muted); }
.contact__title {
font-size: var(--step-4);
font-weight: 300;
line-height: 1;
letter-spacing: -0.035em;
color: #fff;
}
.contact__text { font-size: var(--step-1); line-height: 1.5; max-width: 34rem; }
.contact__list {
display: grid;
gap: 1.5rem;
margin-top: clamp(1rem, 0.5rem + 3vw, 3rem);
padding-top: 2rem;
border-top: 1px solid var(--c-dark-line);
}
.contact__list dt { font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-dark-muted); margin-bottom: 0.4rem; }
.contact__list dd { font-size: var(--step-1); }
.contact__list a { color: #fff; display: inline-flex; min-height: 2.75rem; align-items: center; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 0.35rem) / 100% 1px no-repeat; }
.contact__list a:hover { background-size: 0 1px; }
.contact__list address { font-style: normal; }
.contact__list .social-link { color: var(--c-dark-text); background: none; min-height: 0; }
@media (hover: hover) {
.contact__list .social-link:hover { color: #fff; background-color: rgb(255 255 255 / 0.08); }
}
.icon { display: block; width: 1.75rem; height: 1.75rem; }
@media (min-width: 60rem) {
.contact__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.contact__eyebrow { grid-column: 1 / -1; }
.contact__title { grid-column: 1 / span 7; }
.contact__text { grid-column: 8 / span 5; align-self: end; }
.contact__list { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); }
}
.site-footer {
padding-block: 2.5rem 3rem;
background: var(--c-dark);
color: var(--c-dark-muted);
font-size: var(--step--1);
}
.site-footer__inner {
display: grid;
gap: 1.5rem;
padding-top: 2rem;
border-top: 1px solid var(--c-dark-line);
}
.site-footer__brand { display: inline-flex; justify-self: start; }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.site-footer__nav a { display: inline-flex; min-height: 2.75rem; align-items: center; color: var(--c-dark-text); text-decoration: none; letter-spacing: 0.14em; text-transform: uppercase; }
.site-footer__nav a:hover { text-decoration: underline; }
.site-footer__bottom { display: grid; gap: 0.75rem 3rem; }
.site-footer__legal { line-height: 1.7; }
.site-footer__credit a { color: var(--c-dark-text); letter-spacing: 0.08em; text-decoration: none; }
.site-footer__credit a:hover { text-decoration: underline; }
@media (min-width: 60rem) {
.site-footer__inner { grid-template-columns: auto 1fr; align-items: center; column-gap: 3rem; }
.site-footer__nav { justify-self: end; }
.site-footer__bottom { grid-column: 1 / -1; grid-template-columns: 1fr auto; align-items: baseline; }
}
.phero__media::after,
.project-next__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgb(20 19 17 / 0.74), rgb(20 19 17 / 0.3) 38%, rgb(20 19 17 / 0) 64%);
pointer-events: none;
}
.phero { position: relative; color: #fff; background: var(--c-dark); }
.phero__media { position: relative; overflow: hidden; }
.phero__media img {
width: 100%;
height: calc(100svh - var(--header-h));
min-height: 30rem;
max-height: 70rem;
object-fit: cover;
}
.phero__text {
position: absolute;
inset: auto 0 0;
display: grid;
gap: 0.75rem;
justify-items: start;
padding-bottom: clamp(1.5rem, 5vh, 4rem);
}
.phero__crumb,
.phero__meta { font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; color: rgb(255 255 255 / 0.86); }
.phero__crumb a,
.phero__meta a { color: inherit; text-decoration: none; }
.phero__crumb a:hover,
.phero__meta a:hover { text-decoration: underline; }
.phero__meta a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.phero__title {
font-size: var(--step-4);
font-weight: 300;
line-height: 1;
letter-spacing: -0.035em;
color: #fff;
max-width: 13ch;
}
@media (prefers-reduced-motion: no-preference) {
.phero__media img { animation: hero-settle 2.2s var(--ease) both; }
.phero__text > * { animation: rise 1.1s var(--ease) both; }
.phero__text > :nth-child(1) { animation-delay: 0.15s; }
.phero__text > :nth-child(2) { animation-delay: 0.25s; }
.phero__text > :nth-child(3) { animation-delay: 0.4s; }
}
@keyframes rise {
from { opacity: 0; transform: translate3d(0, 1.5rem, 0); }
}
.project__story { display: grid; gap: 2rem; padding-block: clamp(3.5rem, 2rem + 6vw, 8rem); }
.project__body { display: grid; gap: 1.25rem; max-width: 38rem; }
@media (min-width: 60rem) {
.project__story { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.project__body { grid-column: 4 / span 6; }
}
.flow {
--content: min(100% - 2 * var(--gutter), var(--max) - 2 * var(--gutter));
display: grid;
grid-template-columns: [full-start] 1fr [content-start] var(--content) [content-end] 1fr [full-end];
row-gap: clamp(3rem, 1.5rem + 6vw, 8rem);
padding-bottom: var(--section);
}
.flow > * { grid-column: content; }
.frame img { width: 100%; background: var(--c-paper-2); }
.frame figcaption { margin-top: 0.75rem; }
.frame--full { grid-column: full; overflow: hidden; }
.frame--full img { max-height: 92svh; object-fit: cover; }
.frame--full figcaption { padding-inline: var(--gutter); }
.frame--offset-left { grid-column: full-start / content-end; margin-right: 8%; }
.frame--offset-right { grid-column: content-start / full-end; margin-left: 8%; }
.frame--offset-left figcaption { padding-left: var(--gutter); }
.frame--detail { width: 70%; justify-self: end; }
.frame-pair { display: grid; gap: 1rem; }
.frame-pair .frame { width: 84%; }
.frame-pair .frame:last-child { justify-self: end; }
@media (min-width: 48rem) {
.frame-pair {
grid-template-columns: 1fr 1fr;
column-gap: var(--gutter);
align-items: start;
width: min(100%, 64rem);
justify-self: center;
}
.frame-pair .frame { width: auto; }
.frame-pair .frame:last-child { margin-top: clamp(3rem, 10vw, 9rem); }
}
@media (min-width: 60rem) {
.frame--offset-left,
.frame--offset-right { grid-column: content; width: 66.666%; margin: 0; }
.frame--offset-left { justify-self: start; }
.frame--offset-right { justify-self: end; }
.frame--offset-left figcaption { padding-left: 0; }
.frame--detail { width: 33.333%; justify-self: start; margin-left: 50%; }
}
.gallery-index { padding-bottom: var(--section); }
.gallery-index__head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 1.5rem;
padding-top: 2rem;
border-top: 1px solid var(--c-line);
margin-bottom: clamp(1.5rem, 1rem + 2vw, 3rem);
}
.gallery-index__title { font-size: var(--step-2); font-weight: 300; }
.gallery-index__count { font-size: var(--step--1); letter-spacing: 0.14em; color: var(--c-muted); }
.gallery-index__open { margin-left: auto; cursor: pointer; padding: 0; border: 0; background: none; font: inherit; font-size: var(--step--1); }
.gallery-index__open[hidden] { display: none; }
@media (max-width: 47.99rem) {
.gallery-index__open { flex-basis: 100%; margin-left: 0; }
}
.gallery-index__open:hover::after { width: 3.5rem; }
.gallery-index__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr)); gap: 0.5rem; }
.gallery-index__item { display: block; overflow: hidden; background: var(--c-paper-2); }
.gallery-index__item img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.8s var(--ease); }
.gallery-index__item:focus-visible { outline-offset: 3px; }
@media (hover: hover) {
.gallery-index__item:hover img { transform: scale(1.04); }
}
@media (min-width: 60rem) {
.gallery-index__grid { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.75rem; }
}
.viewer {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
background: var(--c-dark);
color: var(--c-dark-text);
}
.viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; }
.viewer::backdrop { background: var(--c-dark); }
html.viewer-open { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
.viewer[open] { animation: viewer-in 0.35s ease both; }
}
@keyframes viewer-in {
from { opacity: 0; }
}
.viewer__bar {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
gap: 1rem;
min-height: 4rem;
padding: env(safe-area-inset-top) var(--gutter) 0;
}
.viewer__title {
overflow: hidden;
font-size: var(--step--1);
letter-spacing: 0.14em;
text-transform: uppercase;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--c-dark-muted);
}
.viewer__count { font-size: var(--step--1); letter-spacing: 0.14em; color: #fff; font-variant-numeric: tabular-nums; }
.viewer__close,
.viewer__nav {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
padding: 0;
border: 0;
border-radius: 50%;
background: rgb(28 27 25 / 0.55);
color: #fff;
cursor: pointer;
transition: background-color 0.3s ease, opacity 0.3s ease;
}
.viewer__close { margin-right: -0.6rem; background: none; }
.viewer__close .icon,
.viewer__nav .icon { width: 1.5rem; height: 1.5rem; }
@media (hover: hover) {
.viewer__close:hover,
.viewer__nav:hover:not(:disabled) { background-color: rgb(255 255 255 / 0.12); }
}
.viewer__nav { position: absolute; top: 50%; z-index: 2; transform: translateY(-50%); }
.viewer__nav--prev { left: calc(var(--gutter) / 2); }
.viewer__nav--next { right: calc(var(--gutter) / 2); }
.viewer__nav:disabled { opacity: 0.25; cursor: default; }
@media (max-width: 47.99rem) {
.viewer__nav { display: none; }
}
.viewer__track {
display: flex;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.viewer__track::-webkit-scrollbar { display: none; }
.viewer__slide {
flex: 0 0 100%;
min-width: 0;
padding: 0.5rem var(--gutter);
scroll-snap-align: center;
scroll-snap-stop: always;
}
@media (min-width: 48rem) {
.viewer__slide { padding-inline: calc(var(--gutter) + 3.5rem); }
}
.viewer__slide picture { width: 100%; height: 100%; }
.viewer__slide img { width: 100%; height: 100%; object-fit: contain; background: center / contain no-repeat; }
.viewer__caption { padding: 0.5rem var(--gutter) 0; text-align: center; font-size: var(--step--1); color: var(--c-dark-muted); }
.viewer__strip {
position: relative;
display: flex;
gap: 0.375rem;
overflow-x: auto;
padding: 0.75rem var(--gutter) calc(0.75rem + env(safe-area-inset-bottom));
scrollbar-width: none;
}
.viewer__strip::-webkit-scrollbar { display: none; }
.viewer__thumb {
flex: 0 0 auto;
width: 3.25rem;
height: 3.25rem;
padding: 0;
border: 0;
background: var(--c-dark-line);
opacity: 0.45;
cursor: pointer;
transition: opacity 0.3s ease;
}
.viewer__thumb img { width: 100%; height: 100%; object-fit: cover; }
.viewer__thumb[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 1px #fff; }
@media (hover: hover) {
.viewer__thumb:hover { opacity: 0.85; }
}
@media (min-width: 60rem) {
.viewer__thumb { width: 4.25rem; height: 4.25rem; }
}
.project-next__link { position: relative; display: block; overflow: hidden; color: #fff; text-decoration: none; background: var(--c-dark); }
.project-next__media { position: relative; display: block; overflow: hidden; }
.project-next__media img { width: 100%; height: clamp(24rem, 72svh, 48rem); object-fit: cover; transition: transform 1.4s var(--ease); }
.project-next__text {
position: absolute;
inset: auto 0 0;
display: grid;
gap: 0.75rem;
justify-items: start;
padding-bottom: clamp(2rem, 6vh, 4.5rem);
}
.project-next__eyebrow { font-size: var(--step--1); letter-spacing: 0.16em; text-transform: uppercase; color: rgb(255 255 255 / 0.86); }
.project-next__title { font-size: var(--step-3); font-weight: 300; line-height: 1.05; letter-spacing: -0.025em; color: #fff; }
.project-next__more { color: #fff; }
.project-next__link:focus-visible { outline: none; }
.project-next__link:focus-visible::after {
content: "";
position: absolute;
inset: 0.5rem;
z-index: 3;
border: 2px solid #fff;
box-shadow: 0 0 0 2px var(--c-ink), inset 0 0 0 2px var(--c-ink);
pointer-events: none;
}
@media (hover: hover) {
.project-next__link:hover img { transform: scale(1.03); }
.project-next__link:hover .project-next__more::after { width: 3.5rem; }
}
.facts { display: grid; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--c-line); }
.facts__title, .facts dt, .page-head__crumb, .work__index, .work__meta, .services__list span {
font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-muted);
}
.facts__list { display: grid; gap: 1rem 2rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.facts dd { margin-top: 0.25rem; color: var(--c-ink); }
@media (min-width: 60rem) { .facts { grid-column: 4 / span 6; } }
.onward { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); border-top: 1px solid var(--c-line); }
.onward__inner { display: grid; gap: 2rem; }
.onward__title { font-size: var(--step-1); margin-bottom: 0.5rem; }
.onward__list, .services__links { display: flex; flex-wrap: wrap; gap: 0.25rem 2.5rem; }
.section-head__link { flex-basis: 100%; }
.page-head { display: grid; gap: 1.25rem; padding-block: clamp(2.5rem, 1.5rem + 5vw, 7rem) clamp(2rem, 1rem + 4vw, 4.5rem); }
.page-head__crumb a { color: inherit; text-decoration: none; }
.page-head__crumb a:hover { text-decoration: underline; }
.page-head__title { font-size: var(--step-4); font-weight: 300; max-width: 14ch; }
.page-head__lead { font-size: var(--step-1); line-height: 1.5; color: var(--c-ink); max-width: 34rem; }
.error-links { padding-bottom: var(--section); }
.works-index { display: grid; gap: clamp(3.5rem, 2rem + 6vw, 8rem); padding-bottom: var(--section); }
.work { display: grid; gap: 1.25rem; }
.work__media { display: block; overflow: hidden; background: var(--c-paper-2); margin-inline: calc(var(--gutter) * -1); }
.work__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.work__body { display: grid; gap: 0.75rem; justify-items: start; }
.work__title { font-size: var(--step-3); font-weight: 300; }
.work__title a { color: inherit; text-decoration: none; }
.work__title a:hover,
.services__list a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.work__text { max-width: 36rem; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.work__media img { transition: transform 1.2s var(--ease); }
.work__media:hover img { transform: scale(1.025); }
}
@media (min-width: 48rem) {
.work__media { margin-inline: 0; }
.work__media img { aspect-ratio: 3 / 2; }
}
@media (min-width: 60rem) {
.work { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
.work__media { grid-column: 1 / span 8; grid-row: 1; }
.work__body { grid-column: 9 / -1; grid-row: 1; }
.work:nth-child(even) .work__media { grid-column: 5 / -1; }
.work:nth-child(even) .work__body { grid-column: 1 / span 4; }
}
.page-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 48rem) { .page-media img { aspect-ratio: 16 / 9; } }
.services { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 4rem); padding-block: clamp(3.5rem, 2rem + 6vw, 8rem); }
.service { display: grid; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--c-line); scroll-margin-top: calc(var(--header-h) + 1rem); }
.service__title { font-size: var(--step-2); font-weight: 300; }
.service__text { display: grid; gap: 1.25rem; max-width: 38rem; }
.service__quote { display: grid; gap: 0.75rem; }
.service__quote p { font-size: var(--step-1); line-height: 1.5; color: var(--c-ink); }
@media (min-width: 60rem) {
.services { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
}
.services__subtitle { font-size: var(--step-3); font-weight: 300; margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); }
.services__statement { margin-top: clamp(3rem, 2rem + 4vw, 6rem); }
.services__projects { padding-block: var(--section); }
.services__list { display: grid; margin-bottom: 2rem; border-top: 1px solid var(--c-line); }
.services__list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; padding-block: 1rem; border-bottom: 1px solid var(--c-line); }
.services__list a { font-size: var(--step-1); color: var(--c-ink); text-decoration: none; }
@media (prefers-reduced-motion: no-preference) {
.reveal-on [data-reveal]:not([data-reveal="stagger"]) {
opacity: 0;
transform: translate3d(0, 2rem, 0);
transition: opacity 1.1s var(--ease), transform 1.2s var(--ease);
transition-delay: calc(var(--i, 0) * 120ms);
}
.reveal-on [data-reveal]:not([data-reveal="stagger"]).is-visible { opacity: 1; transform: none; }
.reveal-on [data-reveal="stagger"] > * {
opacity: 0;
transform: translate3d(0, 1.5rem, 0);
transition: opacity 1s var(--ease), transform 1.2s var(--ease);
transition-delay: calc(var(--i, 0) * 110ms + 80ms);
}
.reveal-on [data-reveal="stagger"].is-visible > * { opacity: 1; transform: none; }
.reveal-on .rw {
display: inline-block;
overflow: hidden;
vertical-align: top;
padding: 0.12em 0 0.18em;
margin: -0.12em 0 -0.18em;
}
.reveal-on .rw > span {
display: inline-block;
transform: translate3d(0, 115%, 0);
transition: transform 1.15s var(--ease);
transition-delay: calc(min(var(--i), 14) * 55ms);
}
.reveal-on .is-visible .rw > span { transform: none; }
}
@media print {
.site-header, .skip-link { display: none; }
.reveal-on [data-reveal],
.reveal-on [data-reveal="stagger"] > *,
.reveal-on .rw > span { opacity: 1 !important; transform: none !important; }
}