/* The studio site. Off-white and black, high contrast, modern. The motion is scroll-led and every
   piece of it is additive: the page is complete and readable with no JavaScript and with reduced
   motion, and the script only ever takes things away from that starting point and gives them back. */

@font-face {
  font-family: 'Fraunces Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/assets/fraunces-latin.7234ed860a.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/assets/inter-tight-latin.77fefe8ca1.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --paper: #f5f4f1;
  --ink: #0b0b0b;
  --ink-soft: rgba(11, 11, 11, 0.56);
  --line: rgba(11, 11, 11, 0.13);
  --raise: #fbfaf8;
  --spot: rgba(11, 11, 11, 0.055);
  --display: 'Fraunces Variable', Georgia, serif;
  --body: 'Inter Tight Variable', system-ui, sans-serif;
  --gutter: 18px;
  --max: 1200px;
  --nav-h: 62px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --reveal-travel: 22px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #0b0b0b;
    --ink: #f3f2ee;
    --ink-soft: rgba(243, 242, 238, 0.58);
    --line: rgba(243, 242, 238, 0.15);
    --raise: #141414;
    --spot: rgba(243, 242, 238, 0.06);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--body); font-size: 17px; line-height: 1.5; overflow-x: hidden; background: var(--paper); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-variation-settings: 'opsz' 144, 'SOFT' 40; margin: 0; line-height: 1.0; letter-spacing: -0.026em; }
h1 { font-weight: 300; font-size: clamp(42px, 8.4vw, 104px); }
h2 { font-weight: 500; font-size: clamp(30px, 5vw, 60px); }
h3 { font-weight: 600; font-size: clamp(19px, 2.1vw, 25px); letter-spacing: -0.014em; }
p, ul, ol { margin: 0; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.section { padding-block: clamp(52px, 8vw, 118px); }
.section--tight { padding-block: clamp(30px, 4vw, 58px); }
.section + .section--tight { padding-top: 0; }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.eyebrow { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; margin-bottom: 20px; }
.lede { font-size: clamp(19px, 2.1vw, 25px); line-height: 1.32; max-width: 46ch; font-weight: 380; letter-spacing: -0.012em; }
.small { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.prose { max-width: 62ch; display: grid; gap: 18px; }

/* ------------------------------------ nav ------------------------------------ */
.nav { position: sticky; top: 0; z-index: 40; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-inline: var(--gutter); background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.nav a { text-decoration: none; }
.nav__brand { font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: -0.018em; }
.nav__links { display: none; gap: 4px; list-style: none; margin: 0; padding: 0; font-size: 14px; }
.nav__links a { position: relative; padding: 8px 12px; border-radius: 999px; display: inline-block; }
.nav__links a::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--ink); opacity: 0; transform: scale(0.9); transition: opacity 0.22s var(--ease), transform 0.22s var(--ease); }
.nav__links a span { position: relative; z-index: 1; transition: color 0.22s var(--ease); }
.nav__links a:hover::before, .nav__links a:focus-visible::before { opacity: 1; transform: scale(1); }
.nav__links a:hover span, .nav__links a:focus-visible span { color: var(--paper); }
.nav__links a[aria-current='page']::before { opacity: 1; transform: scale(1); }
.nav__links a[aria-current='page'] span { color: var(--paper); }
.nav__toggle { display: inline-flex; align-items: center; background: none; border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; min-height: 40px; cursor: pointer; font-size: 14px; }
/* A hairline that fills as the page is read. */
.progress { position: fixed; top: var(--nav-h); left: 0; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: var(--ink); z-index: 41; pointer-events: none; }
#nav-sheet { position: fixed; inset: var(--nav-h) 0 0 0; z-index: 39; background: var(--paper); display: grid; align-content: start; padding: 20px var(--gutter); }
#nav-sheet a { font-family: var(--display); font-weight: 300; font-size: clamp(32px, 9vw, 52px); letter-spacing: -0.03em; text-decoration: none; padding: 14px 0; border-bottom: 1px solid var(--line); }
#nav-sheet[hidden] { display: none; }
@media (min-width: 780px) { .nav__links { display: flex; } .nav__toggle { display: none; } #nav-sheet { display: none !important; } }

/* ----------------------------------- hero ----------------------------------- */
.hero { padding-block: clamp(62px, 11vw, 150px) clamp(44px, 6vw, 84px); }
.hero h1 { max-width: 20ch; }
.hero .lede { margin-top: clamp(24px, 3vw, 34px); }
/* Each word rides in its own mask. Visible by default; the script lowers them first. */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.w > i { display: inline-block; font-style: inherit; will-change: transform; }
html.js .hero h1 .w > i { transform: translateY(108%); }
html.js .hero.in h1 .w > i { transform: translateY(0); transition: transform 0.9s var(--ease); transition-delay: calc(var(--i) * 45ms); }

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(30px, 4vw, 44px); }
.button { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 26px; border-radius: 999px; text-decoration: none; font-weight: 500; font-size: 15px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); overflow: hidden; isolation: isolate; }
.button span { position: relative; z-index: 1; transition: color 0.34s var(--ease); }
.button::before { content: ''; position: absolute; inset: 0; z-index: 0; background: var(--paper); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.42s var(--ease); }
.button:hover::before, .button:focus-visible::before { transform: scaleX(1); }
.button:hover span, .button:focus-visible span { color: var(--ink); }
.button--quiet { background: transparent; color: var(--ink); border-color: var(--line); }
.button--quiet::before { background: var(--ink); }
.button--quiet:hover span, .button--quiet:focus-visible span { color: var(--paper); }
.button--on-ink { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.button--on-ink::before { background: transparent; }
.button--on-ink:hover { background: transparent; color: var(--paper); }
.button--on-ink:hover span { color: var(--paper); }

/* ---------------------------------- ticker ---------------------------------- */
/* The facts, moving. Real content rather than decoration, and still a readable row when it is still. */
.ticker { background: var(--ink); color: var(--paper); overflow: hidden; border-block: 1px solid var(--ink); }
.ticker__track { display: flex; width: max-content; gap: 0; animation: slide 34s linear infinite; }
.ticker__set { display: flex; gap: 0; padding-block: 15px; }
.ticker__set > span { font-size: 13.5px; letter-spacing: 0.04em; padding-inline: 26px; white-space: nowrap; display: inline-flex; align-items: center; gap: 26px; }
.ticker__set > span::after { content: ''; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.5; }
@keyframes slide { to { transform: translateX(-50%); } }
.ticker:hover .ticker__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; width: 100%; }
  .ticker__set:last-child { display: none; }
  .ticker__set { flex-wrap: wrap; }
}

/* ---------------------------------- blocks ---------------------------------- */
.blocks { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
@media (min-width: 880px) { .blocks { grid-template-columns: repeat(3, 1fr); } }
.block { position: relative; background: var(--paper); padding: clamp(24px, 2.6vw, 36px); isolation: isolate; }
.block::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), var(--spot), transparent 62%); transition: opacity 0.3s var(--ease); }
.block:hover::before { opacity: 1; }
.block h3 { margin-bottom: 12px; }
.block p { color: var(--ink-soft); }
.block__n { font-family: var(--display); font-size: 13px; letter-spacing: 0.1em; color: var(--ink-soft); display: block; margin-bottom: 18px; }

/* ------------------------------- inverted band ------------------------------ */
.band { background: var(--ink); color: var(--paper); }
.band .lede { max-width: 32ch; }
.band .small { color: rgba(245, 244, 241, 0.6); }
/* The claim on the left, the number that backs it on the right. */
.band__inner { display: grid; gap: clamp(30px, 4vw, 54px); align-items: center; }
@media (min-width: 900px) { .band__inner { grid-template-columns: 1.15fr 1fr; } }
.figure { font-family: var(--display); font-weight: 300; letter-spacing: -0.03em; line-height: 0.92; }
.figure__big { display: block; font-size: clamp(56px, 8.4vw, 118px); }
.figure__sub { display: block; font-size: clamp(17px, 1.6vw, 21px); color: rgba(245, 244, 241, 0.62); margin-top: 16px; font-family: var(--body); font-weight: 400; letter-spacing: 0; line-height: 1.36; max-width: 26ch; }
@media (min-width: 900px) { .figure__sub { margin-left: auto; } }
@media (min-width: 900px) { .figure { text-align: right; } }

/* ---------------------------------- panels ---------------------------------- */
.panel { position: relative; background: var(--raise); border: 1px solid var(--line); border-radius: 18px; padding: clamp(24px, 3.4vw, 44px); isolation: isolate; }
.panel::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 50%), var(--spot), transparent 60%); transition: opacity 0.3s var(--ease); }
.panel:hover::before { opacity: 1; }
.panel + .panel { margin-top: 18px; }
.panel h2 { font-size: clamp(26px, 3.2vw, 40px); }
.panel > * + * { margin-top: 18px; }
.panel .lede { max-width: 54ch; }
.ticks { list-style: none; padding: 0; display: grid; gap: 13px; }
.ticks li { padding-left: 28px; position: relative; }
.ticks li::before { content: ''; position: absolute; left: 0; top: 0.64em; width: 13px; height: 1px; background: currentColor; opacity: 0.45; }

/* ----------------------------------- steps ---------------------------------- */
/* Each step sticks under the nav and the next one slides over it. No script, no jank. */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.steps > li { counter-increment: step; }
.step { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: clamp(22px, 3vw, 38px); display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 820px) {
  .steps { gap: 18px; }
  .steps > li { position: sticky; top: calc(var(--nav-h) + 22px); }
  .step { grid-template-columns: 96px 1fr; gap: 26px; align-items: start; min-height: 168px; }
}
.step__n { font-family: var(--display); font-weight: 300; font-size: clamp(34px, 4vw, 54px); line-height: 0.9; letter-spacing: -0.03em; color: var(--ink); opacity: 0.22; }
.step p { color: var(--ink-soft); max-width: 58ch; line-height: 1.54; }
.step h3 { margin-bottom: 11px; }

/* ----------------------------------- terms ---------------------------------- */
.terms { display: grid; gap: clamp(26px, 3vw, 40px); grid-template-columns: 1fr; }
@media (min-width: 920px) { .terms { grid-template-columns: repeat(3, 1fr); } }
.terms h3 { margin-bottom: 11px; }
.terms p { color: var(--ink-soft); }

/* ------------------------------------ form ---------------------------------- */
.form { display: grid; gap: 16px; max-width: 48ch; }
.field { display: grid; gap: 7px; }
.field label { font-size: 13.5px; font-weight: 500; color: var(--ink-soft); }
.field input, .field textarea { width: 100%; min-height: 50px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--raise); transition: border-color 0.2s var(--ease); }
.field input:focus, .field textarea:focus { border-color: var(--ink); outline: none; }
.field textarea { min-height: 150px; resize: vertical; }
.form__note { font-size: 14px; color: var(--ink-soft); }
.form__status { font-size: 15px; padding: 15px 17px; border-radius: 12px; border: 1px solid var(--line); background: var(--raise); }
.form__status[hidden] { display: none; }
.form__status[data-state='bad'] { border-color: var(--ink); }
.honeypot { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* The onboarding form: one fieldset a question, the question text as its own paragraph. */
.form--wide { max-width: 62ch; gap: 22px; }
.question { border: 1px solid var(--line); border-radius: 16px; padding: clamp(18px, 2.6vw, 28px); margin: 0; display: grid; gap: 12px; background: var(--paper); }
.question legend { font-family: var(--display); font-weight: 600; font-size: clamp(19px, 2.1vw, 23px); letter-spacing: -0.014em; padding: 0 6px; margin-left: -6px; }
.question legend .small { font-family: var(--body); font-weight: 400; letter-spacing: 0; margin-left: 6px; }
.question__n { color: var(--ink-soft); font-weight: 300; margin-right: 4px; }
.question__text { color: var(--ink-soft); line-height: 1.5; }
.question textarea { min-height: 110px; }
.leave { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; min-height: 44px; }
.leave input { width: 20px; height: 20px; accent-color: var(--ink); }
.button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------------------------------- curtain --------------------------------- */
/* The studio standard, taken from Love is in the Hair: two columns that counter-move. The left one
   grows down from the top, the right one grows up from the bottom, they meet to cover the page,
   then retract the same way. On arrival it opens; on leaving it closes and the page swaps behind it.
   Armed by an inline script in the head so it never flashes, and that script disarms itself after
   1.6s in case this stylesheet or the page script never arrives. Never shown under reduced motion. */
.curtain { position: fixed; inset: 0; z-index: 100; display: grid; grid-template-columns: 1fr 1fr; pointer-events: none; }
.curtain span { background: var(--ink); transform: scaleY(0); will-change: transform; }
.curtain span:first-child { transform-origin: center top; }
.curtain span:last-child { transform-origin: center bottom; }
/* Covered on arrival, before a single frame is painted. */
html.covered .curtain span { transform: scaleY(1); }
/* Opening: the panels retract to the edge they came from. */
.curtain.opening span { transform: scaleY(0); transition: transform 0.56s var(--ease); }
.curtain.opening span:last-child { transition-delay: 0.05s; }
/* Closing: they grow to meet, and the navigation waits for them. */
.curtain.closing span { transform: scaleY(1); transition: transform 0.42s var(--ease-in); }
.curtain.closing span:last-child { transition-delay: 0.05s; }
@media (prefers-reduced-motion: reduce) { .curtain { display: none; } }

/* ---------------------------------- reveals --------------------------------- */
/* Visible by default. The script hides them only once it knows it can bring them back. */
html.js [data-reveal] { opacity: 0; transform: translate3d(0, var(--reveal-travel, 22px), 0); }
html.js [data-reveal].in { opacity: 1; transform: none; transition: opacity 620ms var(--ease), transform 620ms var(--ease); }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal], html.js .hero h1 .w > i { opacity: 1 !important; transform: none !important; transition: none !important; }
  .curtain { display: none !important; }
  .progress { display: none; }
}

/* ----------------------------------- footer --------------------------------- */
.footer { padding-block: clamp(34px, 4vw, 58px); border-top: 1px solid var(--line); }
.footer__inner { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: baseline; font-size: 13.5px; color: var(--ink-soft); }
.footer a { text-decoration: none; border-bottom: 1px solid var(--line); }
.footer a:hover { border-bottom-color: currentColor; }
.sign { font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--ink); }