@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/aFTU7PB1QTsUX8KYthqQBA-54a123c13b.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/aFTU7PB1QTsUX8KYthSQBLyM-d893bf46c8.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F;
}
:root {
  --red: #ff0031;
  --ink: #000;
  --paper: #fff;
  --link: #cc0027;
  --rule: #777;
  --font-display: "DM Mono", monospace;
  --font-body: "DM Mono", monospace;
  --page-gutter: clamp(24px, 4vw, 72px);
  --body-size: 30px;
  --body-leading: 1.35;
  --body-alignment: left;
  --body-case: uppercase;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: var(--red); color: var(--ink); font-family: var(--font-display); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-weight: 400; }
button, input, textarea { font: inherit; color: inherit; border-radius: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-underline-offset: .2em; }
a:hover { text-decoration: underline; }
button:disabled { cursor: wait; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
[hidden] { display: none !important; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; background: var(--paper); padding: 16px; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 10; display: flex;
  align-items: flex-start; justify-content: space-between; padding: 24px var(--page-gutter);
  pointer-events: none;
}
.site-header a, .site-header button { pointer-events: auto; }
.wordmark { display: flex; gap: 52px; font-size: 30px; line-height: 1.15; text-decoration: none; }
.wordmark-first { width: 18px; }
.wordmark:hover { text-decoration: none; }
.site-nav { display: flex; flex-wrap: wrap; gap: 20px; font-size: 12px; text-transform: uppercase; }
.menu-toggle, .menu-top button { border: 0; padding: 0; min-height: 44px; background: transparent; font-size: 12px; text-transform: uppercase; }
.menu-toggle { margin-top: -12px; }
body.has-js .site-nav { display: none; }
body.scrolled .wordmark-first { display: none; }
body.scrolled .wordmark { font-size: 20px; }
body.scrolled .site-header { background: var(--header-background, var(--red)); color: var(--header-color, var(--ink)); }
.menu { inset: 0; margin: 0; width: 100%; height: 100%; max-width: none; max-height: none; background: var(--red); border: 0; padding: 20px; }
.menu::backdrop { background: var(--red); }
.menu-top { display: flex; justify-content: space-between; align-items: center; text-transform: uppercase; font-size: 20px; }
.menu nav { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; }
.menu nav a { font-size: clamp(32px, 6vw, 88px); line-height: 1.1; text-transform: uppercase; text-decoration: none; }
.menu nav a:hover { text-decoration: underline; }
body:has(.menu[open]) { overflow: hidden; }
.hero { min-height: 190svh; }
.hero-stage { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; padding: 32px; }
.hero-film { width: 100%; height: calc(100svh - 64px); transform: scale(var(--hero-scale, .67)); }
.film { position: relative; overflow: hidden; isolation: isolate; background: var(--red); }
.film video { width: 100%; height: 100%; display: block; object-fit: cover; mix-blend-mode: multiply; filter: grayscale(1); }
.hero-film h1 { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-evenly; color: var(--red); text-transform: uppercase; font-size: 30px; }
.section-heading { position: relative; text-align: center; padding: 0 var(--page-gutter); }
.section-heading .eyebrow { position: absolute; left: var(--page-gutter); top: 8px; }
.eyebrow { font-size: 12px; line-height: 1.3; text-transform: uppercase; }
.eyebrow span { margin-right: 20px; }
.section-heading h2, .section-heading h3, .display, .contact h2 {
  font-family: var(--font-display); font-size: clamp(52px, 9vw, 138px);
  font-weight: 400; letter-spacing: -.035em; line-height: .9; text-transform: uppercase;
}
.section-heading h2, .section-heading h3 { overflow-wrap: anywhere; }
/* Shared chapter rhythm: pinned type, foreground film, then prose. */
.philosophy-heading { min-height: 100svh; display: grid; align-content: center; overflow: clip; }
.philosophy-heading .eyebrow { top: 12%; }
.display span { display: block; }
.display { font-size: clamp(48px, 12.5vw, 200px); }
.story { position: relative; padding: 12svh 0 16svh; }
.story-stage { position: relative; isolation: isolate; padding-top: 12svh; padding-bottom: 12svh; }
.story-stage > .section-heading { position: sticky; top: 30svh; z-index: 1; }
.story-stage h2 { font-size: clamp(52px, 13.5vw, 200px); line-height: .9; }
.story-stage .eyebrow { top: -48px; }
.story-film { position: relative; z-index: 2; width: min(72%, 1100px); height: 72svh; min-height: 400px; max-height: 850px; margin: 22svh auto 0; }
.story-film video { transform: translate3d(0, var(--drift, 0px), 0) scale(1.24); }
[data-axis="x"] { transform: translate3d(var(--drift, 0px), 0, 0); }
.prose { font-family: var(--font-body); font-size: var(--body-size); line-height: var(--body-leading); text-align: var(--body-alignment); text-transform: var(--body-case); letter-spacing: -.01em; overflow-wrap: break-word; }
.prose p + p { margin-top: 40px; }
.prose a { text-decoration: none; }
.prose a:hover, .prose a:focus-visible { text-decoration: underline; }
.story-copy { position: relative; z-index: 3; background: var(--red); margin: 0 auto; padding: 64px var(--page-gutter) 0; max-width: 1440px; }
/* The same red field continues into the work. */
.works { background: var(--red); padding: 0 0 160px; }
.works-stage { margin-bottom: 12svh; }
.project-group { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(32px, 5vw, 96px); margin: 0 var(--page-gutter) 160px; border-top: 1px solid var(--ink); padding-top: 40px; }
.project-group-heading { position: sticky; top: 140px; align-self: start; }
.project-group-heading .eyebrow { display: block; margin-bottom: 32px; }
.project-group-heading h3 { font-size: clamp(32px, 4.6vw, 76px); line-height: 1; letter-spacing: -.04em; text-transform: uppercase; }
.project-list { list-style: none; padding: 0; margin: 0; min-width: 0; }
.project { padding: 32px 0; border-bottom: 1px solid rgba(0,0,0,.35); scroll-margin-top: 100px; }
.project:first-child { padding-top: 0; }
.project-content { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; padding-right: 32px; }
.project-name { grid-column: 1 / -1; font-size: clamp(24px, 3.65vw, 58px); line-height: 1.08; letter-spacing: -.045em; text-transform: uppercase; overflow-wrap: anywhere; }
.project-name a { text-decoration: none; }
.project-name a:hover, .project-name a:focus-visible { text-decoration: underline; }
.project-arrow { display: inline-block; margin-left: 12px; font-size: .5em; vertical-align: middle; transition: transform .2s; }
.project-name a:hover .project-arrow { transform: translate(4px,-4px); }
.project-category, .project-status { font-size: 12px; line-height: 1.5; text-transform: uppercase; }
.project-status { text-align: right; }
.writing { margin-top: 12svh; margin-bottom: 0; align-items: baseline; }
.writing-link { display: flex; justify-content: space-between; gap: 24px; font-size: clamp(30px, 4.4vw, 72px); line-height: 1; letter-spacing: -.04em; text-transform: uppercase; text-decoration: none; }
.writing-link span { font-size: .65em; }
/* A separate, dark closing chapter. The fields themselves do not animate. */
.contact { position: relative; z-index: 4; background: var(--ink); color: var(--paper); padding: 140px var(--page-gutter) 120px; clip-path: inset(0 var(--contact-inset, 0px)); }
.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(48px, 8vw, 144px); }
.contact-intro { position: sticky; top: 120px; align-self: start; color: var(--red); }
.contact h2 { font-size: clamp(64px, 8.5vw, 144px); line-height: .88; margin: 56px 0 48px; text-align: left; }
.contact-intro a { font-size: clamp(14px, 1.4vw, 20px); }
.contact-intro .eyebrow { margin: 0; }
form { display: grid; gap: 28px; }
form label { display: block; font-size: 13px; line-height: 1.5; text-transform: uppercase; }
form input, form textarea { display: block; width: 100%; background: transparent; border: 1px solid #777; padding: 14px 12px; margin-top: 10px; font-family: var(--font-body); font-size: 18px; line-height: 1.4; text-transform: none; }
form textarea { resize: vertical; min-height: 180px; }
form input:focus, form textarea:focus { outline: 2px solid var(--red); outline-offset: 2px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.optional { text-transform: none; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; align-items: flex-start; gap: 24px; }
.form-actions button { background: var(--red); color: var(--ink); border: 1px solid var(--red); padding: 16px 24px; min-height: 52px; text-transform: uppercase; font-size: 13px; white-space: nowrap; }
.form-actions button:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.form-actions button span { margin-left: 24px; }
#form-status { font-size: 15px; line-height: 1.5; padding-top: 12px; }
.form-note, noscript p { font-family: var(--font-body); font-size: 13px; line-height: 1.5; }
.site-footer { background: var(--ink); color: var(--red); display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 32px; padding: 40px var(--page-gutter) 88px; border-top: 1px solid #333; text-transform: uppercase; font-size: 12px; line-height: 1.5; }
.site-footer a { text-decoration: none; }
.site-footer div a { display: block; min-height: 28px; }
.site-footer > a { min-height: 44px; }
.motion-toggle { position: fixed; z-index: 8; right: var(--page-gutter); bottom: 16px; background: var(--header-background, var(--red)); color: var(--header-color, var(--ink)); border: 1px solid var(--ink); padding: 12px; font-size: 11px; text-transform: uppercase; min-height: 44px; }
.not-found { min-height: 100svh; display: grid; place-content: center; gap: 32px; text-align: center; }
.not-found h1 { font-size: clamp(90px, 20vw, 240px); }
.not-found p { text-transform: uppercase; }
@media (max-width: 809px) {
  :root { --body-size: 18px; }
  .hero-stage { padding: var(--page-gutter); }
  .hero-film { height: calc(100svh - 80px); transform: scale(var(--hero-scale, .88)); }
  .hero-film h1 { font-size: 18px; }
  .site-nav { flex-direction: column; gap: 12px; }
  .philosophy-heading { min-height: 80svh; }
  .philosophy-heading .eyebrow { top: 16%; }
  .display { font-size: 12.5vw; }
  .story { padding: 8svh 0 12svh; }
  .story-stage { padding-top: 8svh; padding-bottom: 8svh; }
  .story-stage > .section-heading { top: 27svh; }
  .story-stage h2 { font-size: 13.5vw; }
  .story-stage .eyebrow { top: -40px; }
  .story-film { width: calc(100% - 2 * var(--page-gutter)); min-height: 320px; height: 58svh; margin-top: 18svh; }
  .story-copy { padding-top: 40px; }
  .prose p + p { margin-top: 32px; }
  .project-group { grid-template-columns: 1fr; gap: 40px; margin-bottom: 96px; padding-top: 24px; }
  .project-group-heading { position: relative; top: auto; }
  .project-group-heading h3 { font-size: clamp(40px, 10vw, 76px); }
  .project-group-heading .eyebrow { margin-bottom: 24px; }
  .project-content { gap: 16px; padding-right: 16px; }
  .project-name { font-size: clamp(24px, 6.5vw, 48px); }
  .project-category, .project-status { font-size: 10px; }
  .project { padding: 28px 0; }
  .works { padding-bottom: 96px; }
  .writing { margin-bottom: 0; }
  .writing-link { font-size: clamp(28px, 7vw, 44px); }
  .contact { padding-top: 80px; padding-bottom: 80px; }
  .contact-layout { grid-template-columns: 1fr; gap: 64px; }
  .contact-intro { position: static; }
  .contact h2 { font-size: clamp(80px, 19vw, 140px); margin: 32px 0; }
  .form-row { grid-template-columns: 1fr; gap: 28px; }
  .form-actions { flex-direction: column; gap: 8px; }
  .site-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
}
body.motion-paused [data-drift] { transform: none; }
body.motion-paused .story-stage > .section-heading,
body.motion-paused .project-group-heading,
body.motion-paused .contact-intro { position: relative; top: auto; }
body.motion-paused .contact { clip-path: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero { min-height: 100svh; }
  .hero-stage { position: relative; }
  .hero-film, [data-drift] { transform: none !important; }
  .story-stage > .section-heading, .project-group-heading, .contact-intro { position: relative; top: auto; }
  .contact { clip-path: none; }
  .project-arrow { transition: none; }
}