:root {
color-scheme: dark;
--ink: #121110;
--charcoal: #191715;
--ivory: #efe7da;
--ivory-dim: #b8ad9f;
--champagne: #c6b292;
--taupe: #8f8377;
--warm: 198 178 146;
--line: rgb(239 231 218 / 0.1);
--line-strong: rgb(239 231 218 / 0.22);
--serif: "Bodoni Moda", "Didot", "Bodoni 72", "Bodoni MT", "Playfair Display", Georgia, serif;
--sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
--fs-small: 0.8125rem;
--fs-micro: 0.6875rem;
--fs-body: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
--fs-lead: clamp(1.2rem, 1.06rem + 0.62vw, 1.55rem);
--fs-h3: clamp(1.4rem, 1.2rem + 0.9vw, 1.95rem);
--fs-h2: clamp(2.1rem, 1.35rem + 3vw, 4.25rem);
--fs-statement: clamp(2.3rem, 1.1rem + 4.7vw, 5.6rem);
--fs-hero: clamp(4.75rem, 1rem + 13vw, 13.5rem);
--fs-figure: clamp(7rem, 1rem + 25vw, 25rem);
--gutter: clamp(1.25rem, 5vw, 4.5rem);
--gap: clamp(1rem, 2vw, 2rem);
--sec: clamp(6.25rem, 3.25rem + 10vw, 13rem);
--stack: clamp(2.5rem, 1.4rem + 3.4vw, 5rem);
--header-h: 4.5rem;
--ease: cubic-bezier(0.2, 0.7, 0.1, 1);
--slow: 1.2s;
--quick: 0.35s;
}
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: var(--header-h);
background: var(--ink);
}
body {
margin: 0;
background: var(--ink);
color: var(--ivory-dim);
font-family: var(--sans);
font-size: var(--fs-body);
font-weight: 400;
line-height: 1.6;
letter-spacing: -0.003em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: clip;
}
h1, h2, h3, p, ul, ol, dl, dd, blockquote, figure, table { margin: 0; padding: 0; }
ul[role="list"], ol[role="list"] { list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
em { font-style: italic; }
abbr[title] { text-decoration: none; }
::selection { background: var(--champagne); color: var(--ink); }
:focus-visible {
outline: 1px solid var(--champagne);
outline-offset: 5px;
}
.vh {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip-path: inset(50%); white-space: nowrap;
}
.skip {
position: fixed; top: 0.75rem; left: 0.75rem; z-index: 100;
padding: 0.6rem 1rem; background: var(--ivory); color: var(--ink);
font-size: var(--fs-small); transform: translateY(-200%);
}
.skip:focus { transform: none; }
.wrap {
width: 100%;
max-width: 95rem;
margin-inline: auto;
padding-inline: var(--gutter);
}
.h2 {
font-family: var(--serif);
font-size: var(--fs-h2);
font-weight: 400;
line-height: 1.06;
letter-spacing: -0.012em;
color: var(--ivory);
max-width: 15em;
text-wrap: balance;
}
.lead {
font-family: var(--serif);
font-size: var(--fs-lead);
line-height: 1.5;
color: var(--ivory);
max-width: 30em;
text-wrap: pretty;
}
.link {
color: var(--ivory);
background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
padding-bottom: 0.2em;
transition: color var(--quick) ease, background-size var(--quick) var(--ease);
}
.link:hover { color: var(--champagne); background-size: 35% 1px; }
.sec { padding-block: 0 var(--sec); }
.sec__grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--gap);
border-top: 1px solid var(--line);
padding-top: clamp(1.75rem, 2.6vw, 2.5rem);
}
.sec__label {
grid-column: 1 / span 3;
align-self: start;
position: sticky;
top: calc(var(--header-h) + 1.5rem);
font-family: var(--serif);
font-style: italic;
font-size: 1.05rem;
line-height: 1.3;
letter-spacing: 0.01em;
color: var(--champagne);
padding-right: 1rem;
}
.sec__body { grid-column: 4 / -1; min-width: 0; }
.sec__body > .h2 { margin-bottom: var(--stack); }
@media (max-width: 899.98px) {
.sec__label, .sec__body { grid-column: 1 / -1; }
.sec__label { position: static; margin-bottom: 2.5rem; padding-right: 0; }
}
@media (prefers-reduced-motion: no-preference) {
.js [data-reveal] {
opacity: 0;
transform: translateY(0.8rem);
transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
transition-delay: var(--d, 0s);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-delay: 0s !important;
transition-duration: 0.01ms !important;
transition-delay: 0s !important;
}
}
.hdr {
position: fixed; inset: 0 0 auto 0; z-index: 50;
height: var(--header-h);
display: flex; align-items: center;
border-bottom: 1px solid transparent;
transition: background-color 0.5s ease, border-color 0.5s ease, backdrop-filter 0.5s ease;
}
.hdr.is-scrolled {
background: rgb(18 17 16 / 0.82);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border-bottom-color: var(--line);
}
.hdr__row { display: flex; align-items: center; gap: 2rem; }
.hdr__brand {
font-family: var(--serif);
font-size: 1.05rem;
letter-spacing: 0.02em;
color: var(--ivory);
opacity: 0.86;
margin-right: auto;
white-space: nowrap;
transition: opacity var(--quick) ease;
}
.hdr__brand:hover { opacity: 1; }
.hdr__brand em { color: var(--champagne); }
.hdr__nav ul { display: flex; gap: clamp(1.25rem, 2.4vw, 2.5rem); list-style: none; margin: 0; padding: 0; }
.hdr__nav a {
font-size: 0.8125rem;
letter-spacing: 0.02em;
color: var(--ivory-dim);
padding-block: 0.5rem;
transition: color var(--quick) ease;
}
.hdr__nav a:hover { color: var(--ivory); }
.lang { display: flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; margin-right: -0.6rem; }
.lang__item { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; color: var(--taupe); transition: color var(--quick) ease; }
a.lang__item:hover { color: var(--ivory); }
.lang__item.is-current { color: var(--ivory); }
.lang__sep { width: 1px; height: 0.8rem; background: var(--line-strong); }
@media (max-width: 899.98px) {
.hdr__nav { display: none; }
}
.hero {
position: relative;
height: 100vh;
height: 100svh;
min-height: 34rem;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
isolation: isolate;
}
.hero__media {
position: relative; z-index: -3;
flex: 1 1 auto; min-height: 0;
margin-bottom: calc(var(--fs-hero) * -0.5);
transform: translate3d(0, var(--py, 0px), 0);
will-change: transform;
-webkit-mask-image: linear-gradient(to bottom, #000 66%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 66%, transparent 100%);
}
.hero__media::after {
content: ""; position: absolute; inset: 0;
background: radial-gradient(ellipse 85% 70% at 50% 52%, rgb(18 17 16 / 0) 38%, rgb(18 17 16 / 0.66) 100%);
}
.hero__media picture, .hero__media img { display: block; width: 100%; height: 100%; }
.hero__media img {
object-fit: cover;
object-position: 50% 62%;
filter: sepia(0.2) saturate(0.86) contrast(1.05) brightness(0.8);
}
.hero__warmth {
position: absolute; inset: 0; z-index: -2;
pointer-events: none;
background:
radial-gradient(ellipse 70% 55% at 50% 30%, rgb(var(--warm) / 0.13) 0%, rgb(var(--warm) / 0) 70%),
linear-gradient(to top, rgb(var(--warm) / 0.05) 0%, rgb(var(--warm) / 0) 38%);
mix-blend-mode: screen;
}
.hero__shade {
position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(to bottom, rgb(18 17 16 / 0.72) 0%, rgb(18 17 16 / 0) 22%),
linear-gradient(to top, var(--ink) 0%, rgb(18 17 16 / 0.82) 16%, rgb(18 17 16 / 0) 46%);
}
.hero__content { padding-bottom: clamp(2.25rem, 6.5vh, 4.5rem); }
.hero__name {
font-family: var(--serif);
font-size: var(--fs-hero);
font-weight: 400;
line-height: 0.88;
letter-spacing: -0.028em;
color: var(--ivory);
margin-left: -0.045em;
}
.hero__line { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.hero__line > span { display: block; }
.hero__title {
margin-top: clamp(1.4rem, 3.2vh, 2.4rem);
display: flex; align-items: center; gap: 1rem;
font-family: var(--serif);
font-style: italic;
font-size: clamp(1.1rem, 0.98rem + 0.62vw, 1.6rem);
line-height: 1.2;
color: var(--champagne);
letter-spacing: 0.015em;
}
.hero__title::before { content: ""; flex: none; width: clamp(1.75rem, 3vw, 3.25rem); height: 1px; background: currentColor; opacity: 0.7; }
.hero__scroll {
position: absolute; right: var(--gutter); bottom: clamp(2.25rem, 6.5vh, 4.5rem);
display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
font-size: var(--fs-micro); letter-spacing: 0.16em; color: var(--ivory-dim);
}
.hero__scroll span { writing-mode: vertical-rl; }
.hero__scroll i { width: 1px; height: 3.5rem; background: linear-gradient(var(--ivory-dim), transparent); }
@media (min-width: 600px) and (max-aspect-ratio: 5/4) {
.hero { --fs-hero: clamp(5.5rem, min(19vw, 16.5vh), 11.5rem); }
.hero__media { margin-bottom: calc(var(--fs-hero) * -0.62); }
.hero__media img { object-position: 50% 58%; }
.hero__content { padding-bottom: clamp(3rem, 7vh, 5.5rem); }
}
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
.hero { --mw: max(150vh, 72vw); --face: 67vw; }
.hero__media {
position: absolute;
inset: auto;
top: min(0px, calc((100vh - var(--mw) / 1.5) * 0.35));
left: calc(var(--face) - var(--mw) / 2);
flex: none;
margin: 0;
width: var(--mw);
height: calc(var(--mw) / 1.5);
-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 36%);
mask-image: linear-gradient(to right, transparent 0%, #000 36%);
}
.hero__media::after { content: none; }
.hero__media img { object-position: 50% 50%; }
.hero__warmth {
background:
radial-gradient(ellipse 46% 62% at var(--face) 42%, rgb(var(--warm) / 0.14) 0%, rgb(var(--warm) / 0) 72%),
radial-gradient(ellipse 50% 40% at 12% 100%, rgb(var(--warm) / 0.06) 0%, rgb(var(--warm) / 0) 70%);
}
.hero__shade {
background:
linear-gradient(to right, var(--ink) 0%, var(--ink) 12%, rgb(18 17 16 / 0.6) 36%, rgb(18 17 16 / 0) 58%),
linear-gradient(to top, var(--ink) 0%, rgb(18 17 16 / 0.72) 14%, rgb(18 17 16 / 0) 44%),
linear-gradient(to bottom, rgb(18 17 16 / 0.68) 0%, rgb(18 17 16 / 0) 24%),
linear-gradient(to left, rgb(18 17 16 / 0.62) 0%, rgb(18 17 16 / 0) 20%);
}
.hero__name { max-width: 46vw; }
}
@media (min-aspect-ratio: 5/4) and (max-height: 620px) {
.hero { --fs-hero: clamp(3.75rem, 22vh, 9rem); }
}
@media (max-width: 599.98px) {
.hero { --fs-hero: clamp(4rem, min(23.5vw, 13.5vh), 7.25rem); }
.hero__scroll { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
.hero__media img { animation: hero-image 2.4s var(--ease) both; }
.hero__warmth { animation: hero-fade 2.8s ease 0.3s both; }
.hero__line > span { animation: hero-rise 1.4s var(--ease) both; }
.hero__line:nth-child(1) > span { animation-delay: 0.4s; }
.hero__line:nth-child(2) > span { animation-delay: 0.55s; }
.hero__title { animation: hero-fade 1.4s ease 1.2s both; }
.hero__scroll, .hdr { animation: hero-fade 1.2s ease 1.6s both; }
}
@keyframes hero-image { from { opacity: 0; transform: scale(1.035); } to { opacity: 1; transform: none; } }
@keyframes hero-rise { from { transform: translateY(104%); } to { transform: none; } }
@keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }
.statement { padding-block: var(--sec) calc(var(--sec) * 0.9); }
.statement__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.statement__text {
grid-column: 1 / span 10;
font-family: var(--serif);
font-size: var(--fs-statement);
font-weight: 400;
line-height: 1.04;
letter-spacing: -0.02em;
color: var(--ivory);
max-width: 13em;
text-wrap: balance;
}
.statement__support {
grid-column: 7 / span 5;
margin-top: clamp(2.5rem, 5vw, 5rem);
font-family: var(--serif);
font-size: var(--fs-lead);
line-height: 1.5;
color: var(--ivory-dim);
max-width: 24em;
text-wrap: pretty;
}
.statement__for {
grid-column: 1 / -1;
margin-top: clamp(3.5rem, 7vw, 7rem);
padding-top: 1.4rem;
border-top: 1px solid var(--line);
display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem 2.5rem;
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--taupe);
}
.statement__for-label { font-family: var(--serif); font-style: italic; font-size: 1.05rem; letter-spacing: 0.01em; text-transform: none; color: var(--champagne); }
.statement__audience { display: flex; flex-wrap: wrap; gap: 0.5rem 0; color: var(--ivory-dim); }
.statement__audience li { white-space: nowrap; }
.statement__audience li + li::before { content: "·"; margin-inline: 1.1em; color: var(--taupe); }
@media (max-width: 1099.98px) {
.statement__text, .statement__support { grid-column: 1 / -1; }
.statement__support { max-width: 28em; }
.statement__for { flex-direction: column; gap: 1.1rem; }
.statement__audience { display: grid; grid-template-columns: repeat(2, max-content); gap: 0.6rem clamp(2rem, 8vw, 5rem); }
.statement__audience li + li::before { content: none; }
}
@media (max-width: 599.98px) {
.statement__audience { grid-template-columns: 1fr; }
}
.deals { padding-bottom: var(--sec); overflow: hidden; }
.deals__grid {
display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
align-items: end;
}
.deals__figure {
grid-column: 1 / span 9;
font-family: var(--serif);
font-size: var(--fs-figure);
font-weight: 400;
line-height: 0.78;
letter-spacing: -0.045em;
color: var(--ivory);
font-variant-numeric: lining-nums tabular-nums;
white-space: nowrap;
margin-left: -0.05em;
padding-bottom: 0.06em;
}
.deals__plus { color: var(--champagne); font-size: 0.42em; vertical-align: 0.92em; margin-left: 0.08em; letter-spacing: 0; }
.deals__caption {
grid-column: 10 / -1;
margin-bottom: clamp(0.75rem, 2.6vw, 2.75rem);
padding-top: 1.1rem;
border-top: 1px solid var(--line-strong);
font-family: var(--serif); font-style: italic;
font-size: var(--fs-lead); line-height: 1.3;
color: var(--ivory-dim);
max-width: 13em;
text-wrap: balance;
}
@media (max-width: 1099.98px) {
.deals__figure, .deals__caption { grid-column: 1 / -1; }
.deals__caption { margin-top: clamp(1.5rem, 4vw, 2.5rem); margin-bottom: 0; max-width: none; padding-top: 1.25rem; }
}
.about__text { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(1.6rem, 2.4vw, 2.1rem); }
.about__text .lead { grid-column: 1 / span 9; max-width: 25em; line-height: 1.46; margin-bottom: clamp(1.4rem, 3vw, 3rem); }
.about__text p:not(.lead) { grid-column: 5 / span 6; max-width: 27.5em; font-weight: 300; line-height: 1.85; letter-spacing: 0; }
@media (max-width: 1099.98px) {
.about__text .lead { grid-column: 1 / -1; }
.about__text p:not(.lead) { grid-column: 3 / -1; }
}
@media (max-width: 699.98px) {
.about__text p:not(.lead) { grid-column: 1 / -1; }
}
.quad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 5.5rem); }
.quad__item {
border-top: 1px solid var(--line);
padding: clamp(1.75rem, 2.8vw, 2.5rem) 0 clamp(2.75rem, 5.5vw, 5rem);
}
.quad__item:nth-last-child(-n + 2) { padding-bottom: 0; }
.quad__name { font-family: var(--serif); font-weight: 400; font-size: var(--fs-h3); line-height: 1.14; color: var(--ivory); margin-bottom: 0.9rem; text-wrap: balance; }
.quad__item p { max-width: 25em; }
@media (max-width: 699.98px) {
.quad { grid-template-columns: 1fr; }
.quad__item, .quad__item:nth-last-child(-n + 2) { padding: 1.75rem 0 2.5rem; }
.quad__item:last-child { padding-bottom: 0; }
}
.steps__item {
display: grid;
grid-template-columns: 4.5rem minmax(0, 5fr) minmax(0, 6fr);
column-gap: var(--gap);
align-items: baseline;
border-top: 1px solid var(--line);
padding-block: clamp(1.5rem, 2.8vw, 2.5rem);
}
.steps__item:last-child { padding-bottom: 0; }
.steps__num { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--champagne); font-variant-numeric: lining-nums; }
.steps__name { font-family: var(--serif); font-weight: 400; font-size: var(--fs-h3); line-height: 1.15; color: var(--ivory); }
.steps__text { max-width: 29em; }
@media (max-width: 699.98px) {
.steps__item { grid-template-columns: 2.75rem minmax(0, 1fr); row-gap: 0.7rem; padding-block: 1.75rem; }
.steps__text { grid-column: 2; }
}
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.trio__item {
display: flex; flex-direction: column;
border-left: 1px solid var(--line);
padding: 0.25rem clamp(1.25rem, 2.6vw, 2.75rem);
}
.trio__item:first-child { border-left: 0; padding-left: 0; }
.trio__item:last-child { padding-right: 0; }
.trio__name {
font-family: var(--serif); font-weight: 400;
font-size: clamp(1.9rem, 1.3rem + 2vw, 3.1rem);
line-height: 1; letter-spacing: -0.01em; color: var(--ivory);
margin-bottom: clamp(1.5rem, 3vw, 2.75rem);
white-space: nowrap;
}
.trio__item p { max-width: 23em; }
.trio__exit {
margin-top: auto; padding-top: clamp(2rem, 3.4vw, 3.25rem);
display: flex; align-items: baseline; gap: 0.8rem;
font-size: var(--fs-small); letter-spacing: 0.02em; color: var(--ivory-dim);
}
.trio__exit span { font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--taupe); }
@media (max-width: 899.98px) {
.trio { grid-template-columns: 1fr; }
.trio__item, .trio__item:first-child, .trio__item:last-child { border-left: 0; border-top: 1px solid var(--line); padding: 2rem 0 2.5rem; }
.trio__item:last-child { padding-bottom: 0; }
.trio__name { margin-bottom: 1.1rem; }
.trio__exit { padding-top: 1.4rem; }
}
.tenets__item {
display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: var(--gap);
align-items: baseline;
border-top: 1px solid var(--line);
padding-block: clamp(1.6rem, 3.2vw, 3.1rem);
}
.tenets__item:last-child { padding-bottom: 0; }
.tenets__name {
font-family: var(--serif); font-style: italic; font-weight: 400;
font-size: clamp(2.1rem, 1.25rem + 3.4vw, 4.4rem);
line-height: 1.04; letter-spacing: -0.012em; color: var(--ivory);
transition: color 0.6s ease, transform 0.8s var(--ease);
}
.tenets__item:hover .tenets__name { color: var(--champagne); transform: translateX(0.4rem); }
.tenets__text { max-width: 23em; }
@media (max-width: 899.98px) {
.tenets__item { grid-template-columns: 1fr; row-gap: 0.9rem; }
}
.manifesto {
--p: 1;
height: 100vh; height: 100svh; min-height: 34rem;
background:
radial-gradient(ellipse 70% 60% at 22% 46%, rgb(var(--warm) / 0.07) 0%, rgb(var(--warm) / 0) 70%),
var(--charcoal);
}
.js .manifesto.is-live { height: 220vh; }
.manifesto__pin {
position: sticky; top: 0;
height: 100vh; height: 100svh; min-height: 34rem;
display: flex; align-items: center;
border-block: 1px solid var(--line);
}
.manifesto__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(2rem, 5vh, 3.5rem); padding-top: calc(var(--header-h) * 0.5); }
.manifesto__label { grid-column: 1 / span 3; font-family: var(--serif); font-style: italic; font-size: 1.05rem; letter-spacing: 0.01em; color: var(--champagne); }
.manifesto__quote { grid-column: 1 / -1; }
.manifesto__quote p {
font-family: var(--serif);
font-size: clamp(2.15rem, 0.9rem + 5.7vw, 6.6rem);
line-height: 1.07; letter-spacing: -0.018em;
color: var(--ivory);
max-width: 13.5em;
text-wrap: balance;
}
.manifesto__quote span {
opacity: clamp(0.46, calc(var(--p) * (var(--n) + 3) - var(--i)), 1);
transition: opacity 0.6s ease;
}
.manifesto__sign {
margin-top: clamp(2rem, 5vh, 3.5rem);
display: flex; align-items: center; gap: 1.1rem;
font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 1rem + 0.6vw, 1.5rem); color: var(--champagne);
opacity: clamp(0.5, calc(var(--p) * (var(--n) + 3) - var(--n)), 1);
transition: opacity 0.6s ease;
}
.manifesto__sign::before { content: ""; width: 3.5rem; height: 1px; background: currentColor; }
@media (max-height: 560px) {
.manifesto__quote p { font-size: clamp(1.8rem, 9.5vh, 4rem); }
}
.manifesto + .sec > .sec__grid { border-top: 0; }
.manifesto + .sec { padding-top: clamp(3.5rem, 7vw, 7rem); }
.map__side { grid-column: 1 / span 3; align-self: start; position: sticky; top: calc(var(--header-h) + 1.5rem); padding-right: 1rem; }
.map__side .sec__label { position: static; padding-right: 0; }
.map__readout { margin-top: clamp(2rem, 5vw, 5rem); min-height: 9rem; }
.map__name { font-family: var(--serif); font-size: var(--fs-h3); line-height: 1.12; color: var(--ivory); text-wrap: balance; }
.map__status { margin-top: 0.85rem; max-width: 19em; font-size: var(--fs-small); line-height: 1.6; letter-spacing: 0.01em; color: var(--champagne); text-wrap: pretty; }
.map__readout:not(.is-state) .map__status { color: var(--ivory-dim); }
@media (prefers-reduced-motion: no-preference) {
.map__readout.is-swap .map__name, .map__readout.is-swap .map__status { animation: readout-in 0.5s var(--ease) both; }
.map__readout.is-swap .map__status { animation-delay: 0.05s; }
}
@keyframes readout-in { from { opacity: 0.25; transform: translateY(0.2rem); } to { opacity: 1; transform: none; } }
.map:focus-visible { outline: 1px solid rgb(var(--warm) / 0.55); outline-offset: 0.5rem; }
.map__readout.is-excluded .map__name { color: var(--ivory-dim); }
.map__readout.is-excluded .map__status { color: var(--taupe); }
.map { margin-inline: -1%; }
.map svg { width: 100%; height: auto; overflow: visible; }
.map__state {
fill: rgb(239 231 218 / 0.13);
stroke: var(--ink);
stroke-width: 1.25px;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
cursor: pointer;
transition: fill 0.6s ease, opacity 0.9s ease;
outline: none;
}
.map__state:hover, .map__state.is-active { fill: rgb(var(--warm) / 0.82); transition-duration: 0.2s, 0.9s; }
.map__state.is-excluded { fill: rgb(18 17 16 / 0.01); stroke: rgb(143 131 119 / 0.75); stroke-width: 1px; stroke-dasharray: 2 3; }
.map__state.is-excluded:hover, .map__state.is-excluded.is-active { fill: rgb(143 131 119 / 0.14); }
.map__label {
font-family: var(--sans); font-size: 20px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
fill: var(--taupe);
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.js .map:not(.is-in) .map__state, .js .map:not(.is-in) .map__label { opacity: 0; }
.js .map.is-in .map__state { transition-delay: 0s, calc(var(--o) * 0.9s); }
.js .map.is-in .map__label { transition: opacity 0.9s ease 1s; }
.js .map.is-settled .map__state { transition-delay: 0s; }
}
.map__foot { margin-top: clamp(1.5rem, 3vw, 2.5rem); display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; align-items: baseline; justify-content: space-between; font-size: var(--fs-small); }
.map__legend { display: flex; flex-wrap: wrap; gap: 0.7rem 2.25rem; }
.map__legend li { display: flex; align-items: baseline; gap: 0.75rem; }
.map__key { flex: none; width: 1.5rem; height: 0.7rem; background: rgb(239 231 218 / 0.2); }
.map__key--out { background: none; border: 1px dashed var(--taupe); }
.map__legend-names { color: var(--ivory); }
.map__list { flex: 1 1 100%; }
.map__list summary { cursor: pointer; color: var(--ivory-dim); width: fit-content; padding-block: 0.4rem; list-style: none; border-bottom: 1px solid var(--line-strong); transition: color var(--quick) ease; }
.map__list summary:hover { color: var(--ivory); }
.map__list summary::-webkit-details-marker { display: none; }
.map__list summary::after { content: " +"; color: var(--champagne); }
.map__list[open] summary::after { content: " –"; }
.map__lists { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 2rem var(--gap); padding-top: 1.75rem; }
.map__lists h3 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.05rem; color: var(--champagne); margin-bottom: 0.9rem; }
.map__lists li { line-height: 1.9; }
.map__cols { columns: 4 9rem; column-gap: var(--gap); }
@media (max-width: 899.98px) {
.map__side { grid-column: 1 / -1; position: static; padding-right: 0; display: contents; }
.map__side .sec__label { order: 0; grid-column: 1 / -1; margin-bottom: 2.25rem; }
.sec--map .sec__body { display: contents; }
.sec--map .sec__body > * { grid-column: 1 / -1; min-width: 0; }
.sec--map .sec__body > .h2 { order: 1; margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }
.map__readout { order: 2; grid-column: 1 / -1; margin-top: 0; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); min-height: 5.75rem; }
.map__status { max-width: 26em; }
.map { order: 3; margin-inline: -3%; }
.map__foot { order: 4; }
.map__label { font-size: 28px; }
.map__lists { grid-template-columns: 1fr; }
}
@media (max-width: 699.98px) {
.map__label { display: none; }
.map__legend { flex-direction: column; }
.map__legend li:last-child { align-items: flex-start; }
.map__legend li:last-child .map__key { margin-top: 0.4rem; }
.map__legend-names { display: block; margin-top: 0.15rem; }
}
.path { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.path__item { position: relative; padding: clamp(1.9rem, 3.2vw, 3rem) clamp(1.5rem, 3vw, 3rem) 0 0; }
.path__item::before {
content: ""; position: absolute; top: -3px; left: 0;
width: 5px; height: 5px; border-radius: 50%;
background: var(--champagne);
}
.path__num { display: block; font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--champagne); margin-bottom: clamp(1.4rem, 2.8vw, 2.5rem); }
.path__name { font-family: var(--serif); font-weight: 400; font-size: var(--fs-h3); line-height: 1.14; color: var(--ivory); text-wrap: balance; }
.path__place { margin-top: 0.85rem; font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.12em; line-height: 1.5; text-transform: uppercase; color: var(--taupe); }
.path__text { margin-top: 1.4rem; max-width: 23em; }
#career { padding-bottom: calc(var(--sec) * 1.3); }
@media (max-width: 899.98px) {
.path { grid-template-columns: 1fr; border-top: 0; border-left: 1px solid var(--line-strong); }
.path__item { padding: 0 0 3.25rem 1.9rem; }
.path__item:last-child { padding-bottom: 0; }
.path__item::before { top: 0.5rem; left: -3px; }
.path__num { margin-bottom: 0.75rem; }
}
.contact {
position: relative;
min-height: 92vh; min-height: 92svh;
display: flex; align-items: center;
background:
radial-gradient(ellipse 60% 70% at 78% 28%, rgb(var(--warm) / 0.08) 0%, rgb(var(--warm) / 0) 70%),
var(--charcoal);
border-top: 1px solid var(--line);
padding-block: clamp(6rem, 12vw, 12rem) var(--sec);
}
.contact::before {
content: ""; position: absolute; top: 0; left: max(var(--gutter), calc((100% - 95rem) / 2 + var(--gutter)));
width: 1px; height: clamp(3rem, 7vw, 6.5rem);
background: linear-gradient(var(--champagne), rgb(var(--warm) / 0));
}
.contact__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.contact .sec__label { position: static; }
.contact__body { grid-column: 4 / -1; min-width: 0; }
.contact__heading {
font-family: var(--serif); font-weight: 400;
font-size: clamp(2.7rem, 1.2rem + 6vw, 7.25rem);
line-height: 0.98; letter-spacing: -0.022em; color: var(--ivory);
margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
text-wrap: balance;
}
.contact .lead { color: var(--ivory-dim); }
.contact__list { margin-top: var(--stack); border-top: 1px solid var(--line); }
.contact__list > div {
display: grid; grid-template-columns: minmax(6rem, 2fr) minmax(0, 7fr); column-gap: var(--gap);
align-items: baseline;
border-bottom: 1px solid var(--line);
padding-block: clamp(1.4rem, 2.6vw, 2.25rem);
}
.contact__list > div:last-child { border-bottom: 0; }
.contact__list dt { font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--taupe); }
.contact__list dd { min-width: 0; container-type: inline-size; }
.contact__email {
display: inline-block;
max-width: 100%;
white-space: nowrap;
font-family: var(--serif);
font-size: clamp(0.9rem, 3vw, 3.1rem);
line-height: 1.2; letter-spacing: -0.01em;
color: var(--ivory);
transition: color 0.5s ease;
}
.contact__email span {
background:
linear-gradient(var(--champagne), var(--champagne)) 0 100% / 0 1px no-repeat,
linear-gradient(var(--line-strong), var(--line-strong)) 0 100% / 100% 1px no-repeat;
padding-bottom: 0.16em;
transition: background-size 0.8s var(--ease);
}
@supports (width: 1cqi) {
.contact__email { font-size: min(calc(100cqi / 16.6), 3.1rem); }
}
.contact__email:hover, .contact__email:focus-visible { color: var(--champagne); }
.contact__email:hover span, .contact__email:focus-visible span { background-size: 100% 1px, 100% 1px; }
@media (max-width: 899.98px) {
.contact__body { grid-column: 1 / -1; }
.contact .sec__label { margin-top: 1rem; }
}
@media (max-width: 1099.98px) {
.contact__list > div { grid-template-columns: 1fr; row-gap: 0.75rem; }
}
@media (max-width: 599.98px) {
.contact { min-height: 0; }
}
.ftr { background: var(--charcoal); border-top: 1px solid var(--line); padding-block: 3rem 3.5rem; font-size: 0.75rem; line-height: 1.7; color: var(--taupe); }
.ftr__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 1.25rem; align-items: baseline; }
.ftr__brand { grid-column: 1 / span 3; font-family: var(--serif); font-size: 1.05rem; color: var(--ivory); opacity: 0.86; }
.ftr__brand em { color: var(--champagne); }
.ftr__legal { grid-column: 4 / span 5; max-width: 40em; text-wrap: pretty; }
.ftr__meta { grid-column: 9 / -1; text-align: right; }
.ftr__meta .link { color: var(--ivory-dim); margin-left: 0.75rem; white-space: nowrap; }
@media (max-width: 899.98px) {
.ftr__brand, .ftr__legal, .ftr__meta { grid-column: 1 / -1; text-align: left; }
.ftr__meta .link { margin-left: 0; display: block; width: fit-content; margin-top: 0.9rem; padding-block: 0.4rem 0.3rem; }
}