:root {
  --cream: #f3ede2;
  --paper: #faf6ef;
  --ink: #1d3328;
  --ink-soft: #4a5d52;
  --faint: rgba(29, 51, 40, .18);
  --marigold: #d8892a;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Manrope", system-ui, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--cream); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; color: var(--ink); background: var(--cream);
  font: 400 18px/1.6 var(--sans); -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 300; margin: 0; letter-spacing: -.02em; line-height: 1.02; }
em { font-style: italic; color: var(--marigold); }
.eyebrow { font: 600 12px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 24px; }

/* split text */
.split .line { display: block; overflow: hidden; padding-bottom: .08em; }
.split .word { display: inline-block; white-space: nowrap; }
.split .char { display: inline-block; will-change: transform; }

/* loader */
.loader {
  position: fixed; inset: 0; z-index: 100; background: var(--ink); color: var(--cream);
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 18px;
}
.loader__word { font: 300 clamp(36px, 6vw, 84px)/1 var(--serif); }
.loader__word em { color: var(--marigold); }
.loader__count { font: 500 13px/1 var(--sans); letter-spacing: .2em; opacity: .6; }

/* cursor + grain */
.cursor { position: fixed; top: 0; left: 0; z-index: 90; pointer-events: none; mix-blend-mode: normal; }
.cursor span {
  display: flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--marigold); color: var(--paper); font: 600 11px/1 var(--sans); letter-spacing: .1em;
  transition: width .5s var(--ease), height .5s var(--ease), margin .5s var(--ease), background .3s;
}
.cursor.is-big span { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: rgba(29, 51, 40, .82); }
@media (hover: none) { .cursor { display: none; } }
.grain {
  position: fixed; inset: -50%; z-index: 80; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain { 0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)} 50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-1%)} 100%{transform:translate(0,0)} }

/* nav */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center;
  justify-content: space-between; padding: 22px 4vw; transition: background .5s, padding .5s;
}
.nav.is-solid { background: rgba(243, 237, 226, .88); backdrop-filter: blur(10px); padding: 14px 4vw; }
.nav__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 400 20px/1 var(--serif); }
.nav__brand img { width: 34px; height: 34px; border-radius: 50%; }
.nav__links { display: flex; gap: 34px; }
.nav__links a { text-decoration: none; font-size: 14px; font-weight: 500; position: relative; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__call { text-decoration: none; font-size: 14px; font-weight: 600; padding: 12px 20px; border: 1px solid var(--ink); border-radius: 99px; }
@media (max-width: 800px) { .nav__links { display: none; } }

/* hero */
.hero { height: 260vh; position: relative; }
.hero__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.hero__eyebrow { position: absolute; top: 18vh; left: 0; right: 0; text-align: center; z-index: 3; }
.hero__title {
  position: relative; z-index: 3; text-align: center; font-size: clamp(56px, 11vw, 190px);
  mix-blend-mode: normal;
  /* a cream halo so the dark letters still read where they cross the photograph */
  text-shadow: 0 0 .18em rgba(243, 237, 226, .85), 0 0 .5em rgba(243, 237, 226, .5);
}
.hero__title em { display: inline-block; }
.hero__arch {
  position: absolute; z-index: 1; left: 50%; top: 50%; width: 30vh; height: 42vh;
  transform: translate(-50%, -50%); border-radius: 50vh 50vh 0 0; overflow: hidden;
}
.hero__arch img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; transform: scale(1.15); }
.hero__note { position: absolute; bottom: 5vh; left: 0; right: 0; text-align: center; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); z-index: 3; }

/* manifesto */
.manifesto { padding: 26vh 8vw 22vh; max-width: 1400px; margin: 0 auto; }
.manifesto__text { font: 300 clamp(30px, 4.2vw, 64px)/1.18 var(--serif); letter-spacing: -.015em; margin: 0; }
.manifesto__text .w { color: var(--faint); transition: color .2s; }

/* first resident */
.first { display: grid; grid-template-columns: 1fr 1.3fr; gap: 6vw; padding: 10vh 8vw 24vh; align-items: center; }
.first__date { display: flex; flex-direction: column; }
.first__big { font: 300 clamp(160px, 22vw, 340px)/.8 var(--serif); color: var(--marigold); }
.first__month { font: 400 34px/1.2 var(--serif); margin-top: 20px; }
.first__ad { color: var(--ink-soft); font-size: 15px; margin-top: 6px; }
.first__story h2 { font-size: clamp(34px, 3.6vw, 58px); margin-bottom: 28px; }
.first__story p:last-child { color: var(--ink-soft); max-width: 520px; }
@media (max-width: 800px) { .first { grid-template-columns: 1fr; } }

/* a day here */
.day { background: var(--ink); color: var(--cream); }
.day .eyebrow { color: rgba(243, 237, 226, .6); }
.day__pin { height: 100vh; display: grid; grid-template-columns: 1.15fr 1fr; }
.day__media { position: relative; overflow: hidden; }
.day__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.12); clip-path: inset(0 0 100% 0); }
.day__media img.is-on { opacity: 1; }
.day__text { padding: 16vh 6vw 10vh 5vw; display: flex; flex-direction: column; position: relative; }
.day__steps { list-style: none; margin: 0; padding: 0; position: relative; flex: 1; }
.day__steps li { position: absolute; inset: 0 0 auto 0; opacity: 0; }
.day__steps li.is-on { opacity: 1; }
.day__time { display: block; font: 600 13px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--marigold); margin-bottom: 26px; }
.day__steps h3 { font-size: clamp(40px, 4.4vw, 74px); margin-bottom: 26px; }
.day__steps p { color: rgba(243, 237, 226, .72); max-width: 430px; font-size: 19px; }
.day__progress { height: 1px; background: rgba(243, 237, 226, .2); }
.day__progress span { display: block; height: 100%; background: var(--marigold); transform-origin: left; transform: scaleX(0); }
@media (max-width: 800px) { .day__pin { grid-template-columns: 1fr; grid-template-rows: 45vh 1fr; } .day__text { padding: 6vh 6vw; } }

/* care, sideways */
.care__pin { height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.care__head { padding: 0 8vw 6vh; }
.care__head h2 { font-size: clamp(48px, 6.4vw, 110px); }
.care__track { display: flex; gap: 2.4vw; padding: 0 8vw; width: max-content; }
.card { width: clamp(280px, 26vw, 420px); flex: none; }
.card__img { height: clamp(260px, 34vh, 380px); overflow: hidden; border-radius: 4px; margin-bottom: 22px; }
.card__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); }
.card__n { font: 500 13px/1 var(--sans); color: var(--marigold); letter-spacing: .15em; }
.card h3 { font-size: 32px; margin: 12px 0 10px; }
.card p { color: var(--ink-soft); font-size: 16px; margin: 0; }

/* numbers */
.numbers { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--faint); border-bottom: 1px solid var(--faint); margin: 12vh 0; }
.num { padding: 7vh 3vw; border-right: 1px solid var(--faint); }
.num:last-child { border-right: 0; }
.num__v, .num__u { font: 300 clamp(56px, 6vw, 104px)/1 var(--serif); }
.num__u { color: var(--marigold); }
.reel { display: inline-block; height: 1em; overflow: hidden; vertical-align: top; }
.reel__strip { display: flex; flex-direction: column; }
.reel__strip span { height: 1em; line-height: 1; }
.num p { color: var(--ink-soft); font-size: 15px; margin: 18px 0 0; max-width: 220px; }
@media (max-width: 800px) { .numbers { grid-template-columns: 1fr 1fr; } }

/* place */
.place__pin { height: 100vh; position: relative; overflow: hidden; display: flex; align-items: flex-end; }
.place__window { position: absolute; left: 50%; top: 50%; width: 34vw; height: 64vh; transform: translate(-50%, -50%); border-radius: 40vw 40vw 0 0; overflow: hidden; }
.place__window img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.3); }
.place__copy { position: relative; z-index: 2; color: var(--paper); padding: 0 8vw 12vh; max-width: 900px; opacity: 0; }
.place__copy .eyebrow { color: rgba(250, 246, 239, .8); }
.place__copy h2 { font-size: clamp(40px, 5vw, 86px); margin-bottom: 22px; }
.place__copy p { max-width: 520px; }
.place__pin::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(18, 32, 25, .7), transparent 55%); opacity: var(--shade, 0); pointer-events: none; }

/* life */
.life { padding: 22vh 4vw 10vh; overflow: hidden; }
.life__head { padding: 0 4vw 10vh; }
.life__head h2 { font-size: clamp(44px, 6vw, 104px); max-width: 1100px; }
.life__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2vw; align-items: start; }
.col { display: flex; flex-direction: column; gap: 2vw; }
.col:nth-child(2) { margin-top: 18vh; }
.col img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; }
.col:nth-child(3) img:nth-child(2) { aspect-ratio: 1; }

/* visit */
.visit { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; background: var(--paper); }
.visit__img { overflow: hidden; }
.visit__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); }
.visit__copy { padding: 16vh 7vw; }
.visit__copy h2 { font-size: clamp(64px, 8vw, 140px); margin-bottom: 30px; }
.visit__copy > p { color: var(--ink-soft); max-width: 460px; }
.visit__actions { display: flex; gap: 14px; flex-wrap: wrap; margin: 40px 0 56px; }
.btn { display: inline-block; text-decoration: none; background: var(--ink); color: var(--paper); padding: 18px 28px; border-radius: 99px; font-weight: 600; font-size: 15px; }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.visit__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; margin: 0; }
.visit__facts dt { font: 600 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; }
.visit__facts dd { margin: 0; font-size: 16px; }
@media (max-width: 800px) { .visit { grid-template-columns: 1fr; } .visit__img { height: 60vh; } }

/* footer */
.foot { background: var(--ink); color: var(--cream); padding: 14vh 4vw 5vh; overflow: hidden; }
.foot__big { font: 300 clamp(60px, 13.5vw, 260px)/.9 var(--serif); margin: 0 0 8vh; white-space: nowrap; letter-spacing: -.03em; }
.foot__row { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 14px; color: rgba(243, 237, 226, .65); }
.foot__row a { text-decoration: none; color: var(--cream); }

/* still + reduced motion: everything visible, nothing pinned */
.no-motion .loader, .no-motion .cursor { display: none; }
.no-motion .hero { height: auto; }
.no-motion .hero__stage { position: relative; }
.no-motion .day__steps li, .no-motion .day__media img { position: relative; opacity: 1; clip-path: none; transform: none; }
.no-motion .day__pin, .no-motion .care__pin, .no-motion .place__pin { height: auto; }
.no-motion .care__track { width: auto; flex-wrap: wrap; }
.no-motion .place__copy { opacity: 1; }
.no-motion .manifesto__text .w { color: var(--ink); }

/* phones: wider cards so headings fit, and a footer name that fits the screen */
@media (max-width: 600px) {
  .card { width: 78vw; }
  .card h3 { font-size: 26px; }
  .foot__big { font-size: 15.5vw; }
  .visit__facts { grid-template-columns: 1fr; }
}

/* phone menu */
.nav__menu { display: none; background: none; border: 1px solid var(--ink); border-radius: 99px; padding: 10px 16px; font: 600 13px/1 var(--sans); color: var(--ink); }
@media (max-width: 800px) {
  .nav__menu { display: block; position: relative; z-index: 2; }
  .nav__call { display: none; }
  .menu-open .nav__links { display: flex; position: fixed; inset: 0; flex-direction: column; justify-content: center; padding: 0 10vw; gap: 18px; background: var(--cream); }
  .menu-open .nav__links a { font: 300 42px/1.1 var(--serif); }
  .nav__brand { position: relative; z-index: 2; }
}

/* why us */
.why { padding: 20vh 8vw 16vh; display: grid; grid-template-columns: 1fr 1.4fr; gap: 6vw; }
.why__head h2 { font-size: clamp(44px, 5.4vw, 96px); position: sticky; top: 18vh; }
.why__list { list-style: none; margin: 0; padding: 0; counter-reset: why; }
.why__list li { --rule: 1; position: relative; padding: 38px 0 38px 72px; counter-increment: why; }
.why__list li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--ink); opacity: .3; transform: scaleX(var(--rule)); transform-origin: left; }
.why__list li::after { content: "0" counter(why); position: absolute; left: 0; top: 44px; font: 500 13px/1 var(--sans); letter-spacing: .15em; color: var(--marigold); }
.why__list h3 { font-size: clamp(28px, 2.6vw, 42px); margin-bottom: 12px; }
.why__list p { margin: 0; color: var(--ink-soft); max-width: 560px; }
@media (max-width: 800px) { .why { grid-template-columns: 1fr; } .why__head h2 { position: static; } .why__list li { padding-left: 52px; } }

/* family words */
.voices { padding: 18vh 0; overflow: hidden; background: var(--ink); color: var(--cream); }
.voices .eyebrow { color: rgba(243, 237, 226, .6); padding: 0 8vw; }
.voices h2 { font-size: clamp(40px, 5vw, 88px); padding: 0 8vw 10vh; max-width: 1200px; }
.voices__track { display: flex; gap: 3vw; width: max-content; align-items: flex-start; }
.voice { width: clamp(300px, 34vw, 520px); flex: none; margin: 0; }
.voice blockquote { margin: 0 0 26px; font: 300 clamp(19px, 1.5vw, 24px)/1.45 var(--serif); }
.voice blockquote::before { content: "\201C"; display: block; font-size: 90px; line-height: .6; color: var(--marigold); margin-bottom: 18px; }
.voice figcaption { display: flex; align-items: center; gap: 14px; font-size: 14px; color: rgba(243, 237, 226, .7); }
.voice figcaption img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.voice figcaption b { display: block; color: var(--cream); font-weight: 600; }

/* questions */
.faq { padding: 20vh 8vw; max-width: 1300px; margin: 0 auto; }
.faq h2 { font-size: clamp(44px, 5.4vw, 96px); margin-bottom: 8vh; }
.faq details { border-top: 1px solid var(--faint); }
.faq details:last-of-type { border-bottom: 1px solid var(--faint); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 30px; padding: 30px 0; font: 300 clamp(22px, 2.2vw, 34px)/1.25 var(--serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--marigold); font-family: var(--sans); transition: transform .5s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 32px; max-width: 760px; color: var(--ink-soft); }
.faq__more { margin-top: 6vh; color: var(--ink-soft); }

/* message and map */
.contact { display: grid; grid-template-columns: 1fr 1fr; background: var(--paper); border-top: 1px solid var(--faint); }
.contact__form { padding: 14vh 7vw; }
.contact__form h2 { font-size: clamp(44px, 5vw, 88px); margin-bottom: 20px; }
.contact__form > p { color: var(--ink-soft); max-width: 460px; margin-bottom: 40px; }
.msg { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 28px; }
.msg label { display: flex; flex-direction: column; gap: 8px; font: 600 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.msg .full { grid-column: 1 / -1; }
.msg input, .msg select, .msg textarea { font: 400 17px/1.4 var(--sans); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--ink); padding: 10px 0; border-radius: 0; letter-spacing: 0; text-transform: none; }
.msg textarea { resize: vertical; min-height: 120px; }
.msg input:focus, .msg select:focus, .msg textarea:focus { outline: none; border-bottom-color: var(--marigold); box-shadow: 0 1px 0 var(--marigold); }
.msg button { justify-self: start; border: 0; cursor: pointer; font-family: var(--sans); }
.msg button:disabled { opacity: .5; }
.msg__status { grid-column: 1 / -1; margin: 0; color: var(--ink-soft); font-size: 15px; min-height: 1.6em; }
.msg__trap { position: absolute; left: -9999px; }
.contact__map { position: relative; min-height: 70vh; }
.contact__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.35) sepia(.15); }
.contact__map a { position: absolute; left: 24px; bottom: 24px; z-index: 2; }
@media (max-width: 800px) { .contact { grid-template-columns: 1fr; } .msg { grid-template-columns: 1fr; } .contact__map { min-height: 60vh; } }

/* inner pages */
.page-head { padding: 26vh 8vw 10vh; max-width: 1400px; }
.page-head h1 { font-size: clamp(56px, 9vw, 170px); margin-bottom: 30px; }
.page-head > p:last-child { font: 300 clamp(20px, 2vw, 30px)/1.4 var(--serif); color: var(--ink-soft); max-width: 820px; margin: 0; }
.prose { padding: 4vh 8vw 14vh; display: grid; grid-template-columns: 1fr 1.3fr; gap: 6vw; align-items: start; }
.prose img { width: 100%; border-radius: 4px; }
.prose p { margin: 0 0 1.2em; max-width: 680px; }
.prose h2 { font-size: clamp(36px, 4vw, 64px); margin-bottom: 30px; }
.prose ul { padding-left: 1.2em; margin: 0 0 1.2em; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--faint); border-bottom: 1px solid var(--faint); }
.pillars > div { padding: 8vh 3vw; border-right: 1px solid var(--faint); }
.pillars > div:last-child { border-right: 0; }
.pillars h3 { font-size: clamp(30px, 3vw, 48px); margin-bottom: 18px; }
.pillars p { margin: 0; color: var(--ink-soft); }
.team-block { padding: 16vh 8vw 4vh; }
.team-block h2 { font-size: clamp(44px, 5vw, 88px); margin-bottom: 20px; }
.team-block > p { color: var(--ink-soft); max-width: 760px; margin: 0 0 8vh; }
.team { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 44px 2.4vw; }
.team figure { margin: 0; }
.team img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; border-radius: 4px; margin-bottom: 16px; }
.team figcaption { font: 400 22px/1.2 var(--serif); }
.team figcaption span { display: block; margin-top: 6px; font: 600 11px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--marigold); }
.gallery { padding: 0 4vw 16vh; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2vw; align-items: start; }
.gallery figure { margin: 0 0 2vw; }
.gallery img, .gallery video { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; background: #d9d2c4; }
.gallery .is-wide img { aspect-ratio: 4 / 3; }
.gallery figcaption { font-size: 14px; color: var(--ink-soft); margin-top: 10px; }
.post { padding: 0 8vw 16vh; max-width: 1100px; margin: 0 auto; }
.post__cover { width: 100%; border-radius: 4px; margin-bottom: 10vh; aspect-ratio: 16 / 9; object-fit: cover; }
.post h2 { font-size: clamp(28px, 2.6vw, 42px); margin: 8vh 0 20px; }
.post p { font-size: 20px; max-width: 720px; }
.post__meta { font: 600 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--marigold); margin-bottom: 30px; }
.teaser { display: grid; grid-template-columns: 1.2fr 1fr; gap: 5vw; align-items: center; padding: 0 8vw 18vh; text-decoration: none; }
.teaser img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; }
.teaser h2 { font-size: clamp(34px, 3.6vw, 60px); margin-bottom: 20px; }
.teaser p { color: var(--ink-soft); }
.services { padding: 0 8vw 12vh; }
.service { display: grid; grid-template-columns: 1fr 1.3fr; gap: 6vw; padding: 10vh 0; border-top: 1px solid var(--faint); align-items: start; scroll-margin-top: 80px; }
.service img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.service h2 { font-size: clamp(34px, 3.8vw, 64px); margin: 12px 0 24px; }
.service p, .service li { color: var(--ink-soft); max-width: 640px; }
.card__more { display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; }
.foot__links { display: flex; flex-wrap: wrap; gap: 14px 34px; margin: 0 0 6vh; font-size: 15px; }
.foot__links a { text-decoration: none; }
@media (max-width: 800px) {
  .prose, .service, .teaser { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; } .pillars > div { border-right: 0; border-bottom: 1px solid var(--faint); }
  .gallery { grid-template-columns: 1fr 1fr; }
  .team { grid-template-columns: 1fr 1fr; gap: 30px 16px; } .team figcaption { font-size: 18px; }
}

/* accessibility panel */
.a11y { position: fixed; left: 18px; bottom: 18px; z-index: 60; font-family: var(--sans); }
.a11y__toggle { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--ink); color: var(--paper); font: 600 15px/1 var(--serif); cursor: pointer; }
.a11y__panel { display: none; position: absolute; bottom: 58px; left: 0; background: var(--paper); border: 1px solid var(--faint); border-radius: 12px; padding: 14px; width: 220px; gap: 8px; flex-direction: column; box-shadow: 0 10px 40px rgba(0, 0, 0, .12); }
.a11y.is-open .a11y__panel { display: flex; }
.a11y__panel button { text-align: left; border: 1px solid var(--faint); background: none; border-radius: 8px; padding: 10px 12px; font: 500 14px/1 var(--sans); color: var(--ink); cursor: pointer; }
.a11y__panel button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
html.hc { --ink: #000; --ink-soft: #1a1a1a; --faint: rgba(0, 0, 0, .55); --cream: #fff; --paper: #fff; --marigold: #8a4a00; }
html.hc .day, html.hc .voices, html.hc .foot { color: #fff; }
.no-motion .voices__track { width: auto; flex-wrap: wrap; padding: 0 8vw; }

/* page change curtain; html.arriving is set in <head> so the new page never flashes before it lifts */
html.arriving { background: var(--ink); }
html.arriving body { opacity: 0; }
.curtain { position: fixed; inset: 0; z-index: 95; background: var(--ink); display: flex; align-items: center; justify-content: center; pointer-events: none; transform: scaleY(0); }
.curtain span { color: var(--cream); font: 300 clamp(28px, 4vw, 56px)/1 var(--serif); opacity: 0; }

/* gallery viewer */
.viewer { display: none; position: fixed; inset: 0; z-index: 80; background: rgba(20, 32, 25, .94); }
.viewer.is-open { display: block; }
.viewer img { position: fixed; object-fit: cover; max-width: none; cursor: zoom-out; }
.viewer__cap { position: fixed; left: 0; right: 0; bottom: 4vh; margin: 0; text-align: center; color: var(--cream); font: 300 20px/1.3 var(--serif); padding: 0 80px; }
.viewer__btn { position: fixed; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(243, 237, 226, .4); background: rgba(20, 32, 25, .5); color: var(--cream); font: 400 22px/1 var(--sans); cursor: pointer; }
.viewer__btn:hover { border-color: var(--marigold); color: var(--marigold); }
.viewer__prev { left: 2vw; top: 50%; margin-top: -26px; }
.viewer__next { right: 2vw; top: 50%; margin-top: -26px; }
.viewer__close { right: 2vw; top: 3vh; }
@media (max-width: 600px) { .viewer__prev, .viewer__next { top: auto; bottom: 12vh; } .viewer__cap { font-size: 16px; padding: 0 20px; } }