/* ═══════════ SIENNA — Interior Architecture ═══════════ Luxury restraint: two warm colours only. Charcoal carries the page, travertine carries every accent. The photography supplies all other colour. */ :root { --char: #0d0d0d; /* deep matte charcoal */ --char-2: #161514; --trav: #d4b896; /* warm travertine / sand */ --trav-dim: rgba(212, 184, 150, 0.55); --trav-faint: rgba(212, 184, 150, 0.16); /* Marcellus, not a didone. Bodoni's extreme contrast is a fashion-magazine voice — loud where this studio is quiet, and its hairlines break up at the smaller sizes, which is what read as cheap. Marcellus is drawn from Roman inscriptional capitals: even stroke weight that never thins to nothing, so it holds at 10rem over a photograph and at 1rem in a member list alike. A studio that works in cut stone should be set in letters that look cut. */ --display: 'Marcellus', 'Trajan Pro', Georgia, serif; /* --serif is kept as a name so the twenty rules using it need no edit; it now resolves to the same single face the headlines use. */ --serif: 'Marcellus', 'Trajan Pro', Georgia, serif; --sans: 'Inter', -apple-system, sans-serif; --hand: 'Architects Daughter', cursive; /* the pencilled asides */ --ease: cubic-bezier(.22, 1, .36, 1); /* Display type is the whole identity here: enormous and nearly weightless. Set once so every headline on the page is provably on the same scale. */ --d-xl: clamp(3.2rem, 11.5vw, 11rem); /* section statements */ --d-lg: clamp(2.4rem, 7vw, 6.4rem); --d-md: clamp(1.8rem, 4.2vw, 3.4rem); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--char); color: var(--trav); font-family: var(--sans); font-weight: 300; -webkit-font-smoothing: antialiased; overflow-x: hidden; } ::selection { background: var(--trav); color: var(--char); } img { display: block; } a { color: inherit; text-decoration: none; } /* ── Lenis ── Only applied once Lenis has taken over (it stamps these on ), so nothing here affects the page when the library is absent. Its easing and the browser's own smooth-scroll would otherwise fight each other. */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } /* ═══ NAV ═══ Retracts on the way down and returns the moment you reverse, so the bar is out of the way while reading but never more than a flick away. */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 1.5rem clamp(1.2rem, 4vw, 3rem); transition: transform .25s ease-out; } /* a scrim rather than mix-blend-mode: the bar has to stay readable over a bright room as well as a dark one, and difference-blending inverted it */ .nav::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(13,13,13,.72), rgba(13,13,13,.28) 60%, transparent); } .nav.retracted { transform: translateY(-100%); } .brand { display: inline-flex; align-items: center; gap: .6rem; font-size: .82rem; letter-spacing: .42em; font-weight: 500; min-width: 0; } .nav-cta, .nav-mid { flex-shrink: 0; } .brand-mark { width: 9px; height: 9px; border: 1px solid currentColor; border-radius: 1px; transform: rotate(45deg); } .nav-mid { font-size: .6rem; letter-spacing: .34em; text-transform: uppercase; opacity: .6; } .nav-cta { font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: .25rem; } @media (max-width: 720px) { .nav-mid { display: none; } } /* ═══════════ THE WALK ═══════════ One tall scroll track with a pinned stage. Every room is a full-bleed layer stacked in the same box; scroll drives a push-in on the room you're in while the next room opens through a doorway-shaped portal in front of it. */ .walk { position: relative; } /* height set from JS: rooms × 100vh */ .walk-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--char); } /* the film fills the stage at any viewport ratio; object-fit keeps the architecture's geometry honest instead of stretching it */ .tour-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ── loader: holds the walk until the film is fully local ── */ .loader { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; background: var(--char); transition: opacity .8s var(--ease), visibility .8s; } .loader.gone { opacity: 0; visibility: hidden; } .loader-inner { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; } .loader-kicker { font-size: .6rem; letter-spacing: .42em; text-transform: uppercase; color: var(--trav-dim); } .loader-bar { width: min(15rem, 54vw); height: 1px; background: var(--trav-faint); } .loader-fill { display: block; height: 100%; width: 0%; background: var(--trav); transition: width .25s linear; } .loader-label { font-family: var(--serif); font-size: .95rem; color: var(--trav-dim); } .haze { position: absolute; inset: 0; z-index: 5; pointer-events: none; /* must be the same black as --char, or the film's edges read lighter than the page */ background: linear-gradient(180deg, rgba(13,13,13,.72) 0%, rgba(13,13,13,.08) 30%, rgba(13,13,13,.30) 62%, rgba(13,13,13,.94) 100%), radial-gradient(ellipse 66% 58% at 50% 50%, transparent 38%, rgba(13,13,13,.72) 100%); } .grain { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: .45; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E"); background-size: 140px 140px; } /* ── the name plate, keyed to whichever room you are inside ── */ .plate { position: absolute; z-index: 8; left: clamp(1.2rem, 5vw, 4.5rem); bottom: clamp(3.4rem, 11vh, 7rem); max-width: min(32rem, 76vw); will-change: opacity, transform; } .plate-num { font-family: var(--serif); font-size: .95rem; letter-spacing: .3em; color: var(--trav-dim); display: block; margin-bottom: .8rem; } .plate-name { font-family: var(--serif); font-weight: 300; font-size: clamp(2.4rem, 7vw, 5.4rem); line-height: .96; } .plate-sub { margin-top: 1rem; font-size: .9rem; line-height: 1.85; color: var(--trav-dim); } .walkbar { position: absolute; z-index: 8; left: clamp(1.2rem, 5vw, 4.5rem); right: clamp(1.2rem, 5vw, 4.5rem); bottom: 1.8rem; height: 1px; background: var(--trav-faint); } .walkbar-fill { display: block; height: 100%; width: 0%; background: var(--trav); box-shadow: 0 0 10px var(--trav-dim); } .cue { position: absolute; z-index: 8; right: clamp(1.2rem, 5vw, 4.5rem); bottom: clamp(3.4rem, 11vh, 7rem); display: flex; flex-direction: column; align-items: center; gap: .7rem; font-size: .55rem; letter-spacing: .4em; text-transform: uppercase; color: var(--trav-dim); transition: opacity .6s var(--ease); } .cue i { display: block; width: 1px; height: 40px; background: var(--trav-faint); position: relative; overflow: hidden; } .cue i::after { content: ''; position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: var(--trav); animation: cue 2.4s ease-in-out infinite; } @keyframes cue { to { top: 110%; } } @media (max-width: 720px) { .cue { display: none; } } .kicker { font-size: .6rem; letter-spacing: .42em; text-transform: uppercase; color: var(--trav-dim); } /* ── the one reveal primitive the whole page below the walk shares. Driven from the scroll handler in main.js, not IntersectionObserver, so a single code path decides what is on screen. ── */ .rise { display: block; opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--d, 0) * 110ms); } .rise.in { opacity: 1; transform: none; } /* ── the display headline system ── Massive and nearly weightless. Every statement on the page is built from this, so the whole site reads as one voice rather than a set of sections. */ .display { /* 400 is Bodoni's lightest cut, but at these sizes its hairlines already read thinner than Cormorant at 200 did — the contrast does the work the weight used to, and nothing disappears against a bright photograph. */ font-family: var(--display); font-weight: 400; line-height: 1.06; /* a hair of positive tracking, for the same reason as .h-mega */ letter-spacing: .005em; text-wrap: balance; } /* No italic: Marcellus ships roman only, so `font-style: italic` would make the browser synthesise one by shearing the glyphs — on an inscriptional face that looks like a mistake rather than an emphasis. The stressed phrase is set apart by colour and a touch more tracking instead, which is how carved inscriptions have always done it. */ .display em { font-style: normal; color: var(--trav); opacity: 1; letter-spacing: .06em; } .d-xl { font-size: var(--d-xl); } .d-lg { font-size: var(--d-lg); } .d-md { font-size: var(--d-md); } /* every section opens the same way — small kicker, then the statement */ .kicker + .display { margin-top: 1.2rem; } /* A didone needs size to work: below about a rem its hairlines thin to nothing and the numbers read as broken rather than delicate. The small counters and labels go back to the sans, which is what carries every other small thing on the page anyway. */ .plate-num, .idx-num, .rail-count, .pal-num, .loader-label, .studio-city { font-family: var(--sans); font-weight: 300; } /* Words are wrapped by JS, then each rises out of its own clipped box a beat after the one before it. The mask is the point: the word arrives from nowhere rather than fading in place. */ .w { display: inline-block; overflow: hidden; vertical-align: bottom; } .w > i { display: inline-block; font-style: inherit; transform: translateY(105%); transition: transform .95s var(--ease); transition-delay: calc(var(--w, 0) * 55ms); } .split.in .w > i { transform: none; } /* if the splitter never runs, the text must still be readable */ .split:not(.done) .w > i { transform: none; } /* ═══ MANIFESTO ═══ */ .manifesto { min-height: 92svh; display: flex; flex-direction: column; justify-content: center; padding: 12vh clamp(1.2rem, 5vw, 4.5rem); } .manifesto-mark { margin-bottom: clamp(2rem, 6vh, 4rem); } .manifesto-line { max-width: 18ch; } .manifesto-foot { margin-top: clamp(2.5rem, 7vh, 5rem); display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.6rem 3rem; max-width: 62rem; } .manifesto-foot p { font-size: .92rem; line-height: 1.95; color: var(--trav-dim); } /* ═══ THREE PILLARS ═══ */ .pillars { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--trav-faint); } .pillar { padding: clamp(2.4rem, 7vh, 4.6rem) clamp(1.2rem, 3vw, 2.6rem); border-left: 1px solid var(--trav-faint); display: flex; flex-direction: column; gap: 1rem; transition: background .6s var(--ease); } .pillar:first-child { border-left: 0; } .pillar:hover { background: var(--char-2); } .pillar-num { font-size: .6rem; letter-spacing: .3em; color: var(--trav-dim); } .pillar-name { font-family: var(--serif); font-weight: 200; font-size: clamp(1.5rem, 3vw, 2.4rem); line-height: 1.05; } .pillar-copy { font-size: .87rem; line-height: 1.95; color: var(--trav-dim); } .pillar-link { margin-top: auto; padding-top: 1.4rem; font-size: .6rem; letter-spacing: .28em; text-transform: uppercase; color: var(--trav-dim); } .pillar-link::after { content: ' →'; } .pillar:hover .pillar-link { color: var(--trav); } @media (max-width: 860px) { .pillars { grid-template-columns: 1fr; } .pillar { border-left: 0; border-top: 1px solid var(--trav-faint); } .pillar:first-child { border-top: 0; } } /* ═══ WHAT WE TAKE ON — the categories ═══ */ .cats { padding: clamp(4rem, 11vh, 8rem) clamp(1.2rem, 5vw, 4.5rem); } .cats-head { margin-bottom: clamp(2.5rem, 7vh, 4.5rem); } .cat { position: relative; display: grid; align-items: center; gap: 1.5rem; grid-template-columns: 4rem minmax(0, 1fr) 9rem; padding: clamp(1.4rem, 3.4vh, 2.4rem) 0; border-top: 1px solid var(--trav-faint); overflow: hidden; } .cats > .cat:last-of-type { border-bottom: 1px solid var(--trav-faint); } .cat-num { font-size: .62rem; letter-spacing: .28em; color: var(--trav-dim); } .cat-name { font-family: var(--serif); font-weight: 200; font-size: clamp(1.7rem, 4.6vw, 3.4rem); line-height: 1; } .cat-count { font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; color: var(--trav-dim); text-align: right; } /* a thumbnail strip that slides in from the right edge on hover */ .cat-strip { position: absolute; right: 9.5rem; top: 50%; translate: 0 -50%; display: flex; gap: .5rem; pointer-events: none; opacity: 0; transform: translateX(28px); transition: opacity .6s var(--ease), transform .7s var(--ease); } .cat-strip img { width: 5.6rem; height: 3.6rem; object-fit: cover; border-radius: 1px; } .cat:hover .cat-strip { opacity: 1; transform: none; } .cat:hover .cat-name { color: #fff; } @media (max-width: 860px) { .cat { grid-template-columns: 3rem minmax(0,1fr); } .cat-count { grid-column: 2; text-align: left; } .cat-strip { display: none; } } /* ═══ PHILOSOPHY ═══ */ .philosophy { padding: clamp(5rem, 14vh, 10rem) clamp(1.2rem, 5vw, 4.5rem); background: var(--char-2); } .philosophy-line { max-width: 15ch; } .philosophy-grid { margin-top: clamp(3rem, 8vh, 5rem); display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 2rem 3rem; max-width: 70rem; } .philosophy-grid h4 { font-family: var(--serif); font-weight: 300; font-size: 1.15rem; margin-bottom: .7rem; } .philosophy-grid p { font-size: .87rem; line-height: 1.95; color: var(--trav-dim); } /* ═══ TEAM ═══ */ .team { padding: clamp(4rem, 11vh, 8rem) clamp(1.2rem, 5vw, 4.5rem); } .team-head { margin-bottom: clamp(2.5rem, 6vh, 4rem); } .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1px; background: var(--trav-faint); border: 1px solid var(--trav-faint); } .member { background: var(--char); padding: clamp(1.4rem, 3vw, 2.2rem); transition: background .5s var(--ease); } .member:hover { background: var(--char-2); } .member-name { font-family: var(--serif); font-weight: 300; font-size: 1.3rem; } .member-role { display: block; margin-top: .5rem; font-size: .6rem; letter-spacing: .24em; text-transform: uppercase; color: var(--trav-dim); } .member-since { display: block; margin-top: 1.4rem; padding-top: .9rem; border-top: 1px solid var(--trav-faint); font-size: .7rem; color: var(--trav-dim); } /* ═══ THE INDEX ═══ */ .index { padding: clamp(4rem, 10vh, 8rem) clamp(1.2rem, 5vw, 4.5rem) clamp(6rem, 14vh, 10rem); position: relative; } .index-head { margin-bottom: clamp(3rem, 8vh, 5rem); } .idx { list-style: none; border-top: 1px solid var(--trav-faint); } .idx-row { position: relative; display: grid; align-items: baseline; gap: 1rem; grid-template-columns: 3.2rem minmax(0, 1fr) auto; padding: clamp(1.1rem, 2.6vh, 1.9rem) 0; border-bottom: 1px solid var(--trav-faint); transition: opacity .5s var(--ease), padding-left .6s var(--ease); } .idx-num { font-family: var(--serif); font-size: .85rem; letter-spacing: .24em; color: var(--trav-dim); } .idx-name { font-family: var(--serif); font-weight: 300; font-size: clamp(1.6rem, 4.4vw, 3.1rem); line-height: 1; } .idx-meta { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--trav-dim); text-align: right; } /* a hairline that wipes across the row from the left on hover */ .idx-row::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--trav); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); } /* dim every sibling so the hovered line is the only lit thing on screen */ .idx:hover .idx-row { opacity: .34; } .idx .idx-row.on { opacity: 1; padding-left: 1.1rem; } .idx .idx-row.on::after { transform: scaleX(1); } /* the room that follows the pointer */ .peek { position: fixed; top: 0; left: 0; z-index: 40; pointer-events: none; width: clamp(16rem, 25vw, 24rem); aspect-ratio: 16 / 9; overflow: hidden; border-radius: 2px; opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.94); transition: opacity .45s var(--ease), scale .45s var(--ease); } .peek.on { opacity: 1; scale: 1; } .peek-img { width: 100%; height: 100%; object-fit: cover; } .peek-plan { position: absolute; inset: 12%; opacity: .85; } .peek-plan svg { width: 100%; height: 100%; } .peek-plan path, .peek-plan line, .peek-plan rect, .peek-plan circle { stroke: var(--trav); fill: none; stroke-width: 1.1; vector-effect: non-scaling-stroke; } /* no hover on touch — the peek can never be triggered, so it never renders */ @media (hover: none), (max-width: 720px) { .peek { display: none; } .idx:hover .idx-row { opacity: 1; } .idx-row { grid-template-columns: 2.4rem minmax(0, 1fr); } .idx-meta { grid-column: 2; text-align: left; margin-top: .5rem; } } /* ═══ THE RAIL — horizontal gallery driven by vertical scroll ═══ */ .rail { position: relative; } /* height set from JS */ .rail-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; background: var(--char); } .rail-head { position: absolute; top: clamp(1.6rem, 5vh, 3rem); left: clamp(1.2rem, 5vw, 4.5rem); right: clamp(1.2rem, 5vw, 4.5rem); display: flex; justify-content: space-between; align-items: baseline; } .rail-count { font-family: var(--serif); font-size: .9rem; letter-spacing: .18em; color: var(--trav-dim); } .rail-count b { font-weight: 300; color: var(--trav); } .rail-count i { font-style: normal; padding: 0 .45rem; opacity: .5; } .rail-track { display: flex; gap: clamp(1rem, 2.4vw, 2rem); padding-inline: clamp(1.2rem, 5vw, 4.5rem); will-change: transform; } .rail-card { flex: 0 0 auto; width: clamp(17rem, 34vw, 30rem); } .rail-figure { position: relative; overflow: hidden; border-radius: 2px; aspect-ratio: 4 / 5; background: var(--char-2); } .rail-figure img { width: 100%; height: 100%; object-fit: cover; will-change: transform; } .rail-cap { display: flex; justify-content: space-between; gap: 1rem; margin-top: .9rem; } .rail-name { font-family: var(--serif); font-size: clamp(1.05rem, 2vw, 1.45rem); } .rail-meta { font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--trav-dim); align-self: end; } .rail-bar { position: absolute; bottom: clamp(1.6rem, 5vh, 3rem); left: clamp(1.2rem, 5vw, 4.5rem); right: clamp(1.2rem, 5vw, 4.5rem); height: 1px; background: var(--trav-faint); } .rail-bar span { display: block; height: 100%; width: 0%; background: var(--trav); } /* ═══ TWO MATERIALS ═══ */ .palette { display: grid; grid-template-columns: 1fr 1fr; } .pal { position: relative; min-height: 74svh; padding: clamp(2.5rem, 7vh, 5rem) clamp(1.4rem, 4vw, 3.4rem); display: flex; flex-direction: column; justify-content: flex-end; gap: .9rem; background: var(--fill); overflow: hidden; } .pal-light { color: var(--char); } .pal-light .pal-num, .pal-light .pal-desc { color: rgba(18, 18, 18, .62); } .pal-num { font-family: var(--serif); font-size: .85rem; letter-spacing: .3em; color: var(--trav-dim); } .pal-name { font-family: var(--serif); font-weight: 300; font-size: clamp(2.2rem, 6vw, 4.6rem); line-height: 1; } .pal-desc { max-width: 32ch; font-size: .88rem; line-height: 1.9; color: var(--trav-dim); } /* the material itself, shown plainly at the top of its own panel */ .pal-chip { position: absolute; top: 0; left: 0; right: 0; height: 34%; filter: brightness(1.08); border-bottom: 1px solid rgba(212, 184, 150, .14); } @media (max-width: 720px) { .palette { grid-template-columns: 1fr; } .pal { min-height: 58svh; } } /* ═══ THE PRACTICE — figures ═══ */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--trav-faint); border-bottom: 1px solid var(--trav-faint); } .stat { padding: clamp(2.6rem, 8vh, 5rem) clamp(.8rem, 2vw, 2rem); text-align: center; border-left: 1px solid var(--trav-faint); } .stat:first-child { border-left: 0; } .stat-num { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(2.6rem, 7vw, 5.4rem); line-height: 1; font-variant-numeric: tabular-nums; /* stops the width jittering as it counts */ } .stat-label { display: block; margin-top: .9rem; font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; color: var(--trav-dim); } @media (max-width: 720px) { .stats { grid-template-columns: 1fr 1fr; } .stat:nth-child(3) { border-left: 0; } .stat:nth-child(-n+2) { border-bottom: 1px solid var(--trav-faint); } } /* ═══ FAQ ═══ */ .faq { padding: clamp(4rem, 11vh, 8rem) clamp(1.2rem, 5vw, 4.5rem); } .faq-head { margin-bottom: clamp(2.4rem, 6vh, 4rem); } .faq-list { list-style: none; border-top: 1px solid var(--trav-faint); } .faq-item { border-bottom: 1px solid var(--trav-faint); } .faq-q { width: 100%; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; /*