/* Shared tokens from swell-web/DESIGN.md v2.1. Each option adds its own look on top. */
:root {
  --ink: #212121;
  --ink-64: rgba(33, 33, 33, 0.64);
  --ink-44: rgba(33, 33, 33, 0.44);
  --ground: #F6F5FA;
  --card: #FFFFFF;
  --alice: #D8DFE9;
  --place: #A3AFC4;
  --yale: #0D3B66;
  --line: rgba(33, 33, 33, 0.12);
  --gutter: clamp(16px, 4vw, 52px);
  --r-card: 30px;
  --r-sm: 18px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --title: "Jost", system-ui, sans-serif;
  --body: "Urbanist", system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--body); font-size: 17px; line-height: 1.5; color: var(--ink); background: var(--card); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--yale); outline-offset: 3px; border-radius: 6px; }

.nav { position: fixed; inset: 0 0 auto 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 14px var(--gutter); }
.nav .mark { font-family: var(--body); font-weight: 800; font-size: 21px; letter-spacing: -0.045em; min-height: 44px; display: flex; align-items: center; }
.nav ul { display: flex; gap: clamp(14px, 2.4vw, 34px); list-style: none; align-items: center; }
.nav ul a { font-size: 14.5px; font-weight: 600; color: var(--ink-64); min-height: 44px; display: flex; align-items: center; transition: color .2s var(--ease); }
.nav ul a:hover { color: var(--ink); }
.pill { font-family: var(--body); letter-spacing: 0; display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: 999px; background: var(--ink); color: var(--card); font-size: 14.5px; font-weight: 600; transition: transform .15s var(--ease), opacity .2s; }
.pill:hover { opacity: .88; }
.pill:active { transform: scale(.97); }
.nav ul a.pill { color: var(--card); }
@media (max-width: 720px) { .nav ul li.hide-sm { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; } }

/* Sections shared by every option: the statement, Swell Solutions, the work one at a time, the letter. */
.wrapx { max-width: 1320px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.statement { padding-block: clamp(90px, 14vw, 200px); }
.statement h2 { font-family: var(--title); font-weight: 700; font-size: clamp(46px, 9vw, 132px); letter-spacing: -0.045em; line-height: .95; }
.offers h2, .work-head h2 { font-family: var(--title); font-weight: 600; font-size: clamp(30px, 4vw, 54px); letter-spacing: -0.03em; line-height: 1.05; }
.offer h3 { font-family: var(--title); font-weight: 600; font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.02em; line-height: 1.1; }
.offer p { color: var(--ink-64); max-width: 44ch; }
.offer .aside { color: var(--ink); font-weight: 600; font-size: 15px; }
.offer canvas { width: 100%; aspect-ratio: 4 / 3; display: block; }
.project { width: min(100%, calc(66vh * 1.6)); margin-inline: auto; min-height: 100vh; min-height: 100svh; display: grid; align-content: center; gap: 22px; padding-block: 72px; }
.project .shot { border-radius: 3px; overflow: hidden; background: var(--ground); }
.project .shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.project .meta { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; justify-content: space-between; }
.project h3 { font-family: var(--title); font-weight: 600; font-size: clamp(26px, 3vw, 42px); letter-spacing: -0.03em; line-height: 1.05; }
.project h3 span { font-family: var(--body); font-weight: 400; font-size: 17px; letter-spacing: 0; color: var(--ink-64); margin-left: 10px; }
.project p { max-width: 56ch; color: var(--ink-64); }
.status { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: var(--yale); }
.letter { padding-block: clamp(80px, 12vw, 180px); display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px; }
.letter h2 { font-family: var(--title); font-weight: 700; font-size: clamp(46px, 8vw, 120px); letter-spacing: -0.045em; line-height: .95; }