:root {
  color-scheme: light;
  --paper: #f3f1e9;
  --ink: #242820;
  --accent: #b94e35;
  --muted: #6e7267;
  --rule: #d4d5c9;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); }
::selection { color: var(--paper); background: var(--accent); }
.header { width: calc(100% - 112px); max-width: 1480px; height: 113px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--rule); }
.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark { width: 32px; height: 32px; }
.wordmark { font-size: 25px; font-weight: 650; letter-spacing: 3px; line-height: 1; }
.platform-link { display: flex; align-items: center; gap: 23px; padding: 10px 0; text-decoration: none; color: var(--ink); font-size: 13px; font-weight: 500; }
.platform-link span { text-decoration: underline; text-decoration-color: #b4b7a9; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.platform-link svg { width: 17px; height: 17px; color: var(--accent); transition: transform .2s ease; }
.platform-link:hover svg { transform: translate(2px, -2px); }
.platform-link:hover span { text-decoration-color: var(--accent); }
.platform-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 8px; }
.hero { position: relative; width: calc(100% - 112px); max-width: 1480px; margin: auto; min-height: max(710px, calc(100svh - 113px)); display: grid; grid-template-columns: 1fr 1.03fr; align-items: center; padding: 38px 0 105px; }
.hero-copy { position: relative; z-index: 1; padding-left: 26px; }
.eyebrow { display: flex; align-items: center; gap: 11px; margin: 0 0 45px; color: #5c6255; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: 9px; font-weight: 400; line-height: 1.5; letter-spacing: 1.7px; }
.status-mark { width: 7px; height: 7px; background: var(--accent); border-radius: 50%; }
h1 { font-size: clamp(70px, 7.3vw, 116px); line-height: .98; letter-spacing: -6px; font-weight: 550; margin: 0; }
.headline-line { display: block; white-space: nowrap; }
.serif { font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif; font-size: .98em; font-style: italic; font-weight: 400; letter-spacing: -6px; margin-top: 7px; }
.accent { color: var(--accent); }
.intro-block { display: flex; align-items: flex-start; gap: 18px; margin-top: 39px; }
.intro-rule { width: 29px; height: 1px; background: var(--accent); flex-shrink: 0; margin-top: 13px; }
.intro { color: var(--muted); font-size: 14px; line-height: 1.9; margin: 0; }
.hero-art { position: relative; width: calc(100% + 52px); margin-left: -26px; aspect-ratio: 800 / 680; }
canvas, .art-fallback { position: absolute; display: block; inset: 0; width: 100%; height: 100%; }
.hero-art.is-ready .art-fallback { display: none; }
.art-caption { position: absolute; left: 11%; right: 5%; bottom: 5%; display: flex; align-items: center; gap: 16px; color: #747b6a; font: 8px "SFMono-Regular", Consolas, "Liberation Mono", monospace; letter-spacing: 1.4px; }
.crosshair { font-size: 18px; font-weight: 300; }
#motion-toggle { margin-left: auto; padding: 12px 2px; border: 0; background: transparent; color: #696f60; font: inherit; letter-spacing: inherit; cursor: pointer; text-underline-offset: 4px; }
#motion-toggle:hover { color: var(--accent); text-decoration: underline; }
#motion-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
#motion-toggle[hidden] { display: none; }
.hero-baseline { position: absolute; bottom: 28px; left: 0; right: 0; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--rule); padding-top: 23px; color: #7a7f70; font: 9px "SFMono-Regular", Consolas, "Liberation Mono", monospace; letter-spacing: 1.1px; }
.folio { color: var(--accent); }
.footer { background: #262c23; color: #f3f1e9; padding: 48px max(56px, calc((100% - 1480px) / 2)) 0; overflow: hidden; }
.footer-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 25px; padding-bottom: 38px; border-bottom: 1px solid #46503f; }
.footer-top p { margin: 0; font-size: 22px; line-height: 1.45; font-weight: 400; letter-spacing: -.4px; }
.footer-top p span { color: #acb5a2; }
.footer-meta { display: flex; flex-direction: column; gap: 13px; text-align: right; color: #b5bdaa; font: 9px "SFMono-Regular", Consolas, "Liberation Mono", monospace; letter-spacing: 1px; line-height: 1.6; }
.contact-link { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; padding: 4px 0; color: var(--paper); font: 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; letter-spacing: .2px; text-decoration: none; }
.contact-link span { color: #b5bdaa; font: 8px "SFMono-Regular", Consolas, "Liberation Mono", monospace; letter-spacing: 1.4px; }
.contact-link:hover { color: #e8aa94; }
.contact-link:focus-visible { outline: 2px solid #e8aa94; outline-offset: 6px; }
.footer-wordmark { font-size: clamp(90px, 18.35vw, 294px); font-weight: 550; letter-spacing: -.065em; line-height: .95; padding-top: 22px; margin: 0 0 -.065em -.035em; }
.footer-wordmark span { color: #cf7659; }
@media (min-width: 1700px) { .hero-copy { padding-left: 50px; } h1 { font-size: 124px; } }
@media (max-width: 1100px) and (min-width: 761px) { .header, .hero { width: calc(100% - 80px); } .hero-copy { padding-left: 0; } h1 { font-size: 8vw; letter-spacing: -4px; } .serif { letter-spacing: -4px; } .hero-art { width: calc(100% + 30px); margin-left: -20px; } .intro { font-size: 12px; } .eyebrow { font-size: 8px; letter-spacing: 1px; } .footer { padding-left: 40px; padding-right: 40px; } }
@media (max-width: 760px) {
  .header { width: calc(100% - 40px); height: 90px; gap: 16px; }
  .brand { gap: 9px; } .brand-mark { width: 24px; height: 26px; } .wordmark { font-size: 19px; letter-spacing: 1.7px; }
  .platform-link { gap: 10px; font-size: 11px; } .platform-link svg { width: 14px; height: 14px; }
  .hero { width: calc(100% - 48px); grid-template-columns: 1fr; min-height: auto; padding: 72px 0 94px; }
  .hero-copy { padding: 0 4px; } .eyebrow { margin-bottom: 33px; font-size: 8px; letter-spacing: 1.2px; }
  h1 { font-size: clamp(67px, 13vw, 98px); letter-spacing: -4px; } .serif { letter-spacing: -4px; }
  .intro-block { margin-top: 30px; gap: 13px; } .intro-rule { width: 21px; margin-top: 11px; } .intro { font-size: 12px; line-height: 1.9; }
  .hero-art { width: calc(100% + 40px); max-width: 580px; margin: -3px 0 0 -20px; justify-self: center; }
  .art-caption { left: 10%; bottom: 4%; font-size: 7px; letter-spacing: 1px; }
  .hero-baseline { bottom: 27px; font-size: 7px; padding-top: 19px; letter-spacing: .7px; }
  .footer { padding: 35px 24px 0; } .footer-top { padding-bottom: 25px; gap: 20px; } .footer-top p { font-size: 16px; } .footer-meta { font-size: 7px; letter-spacing: .3px; gap: 8px; }
  .contact-link { font-size: 12px; } .contact-link span { font-size: 7px; letter-spacing: 1px; }
  .footer-wordmark { font-size: 18.3vw; padding-top: 24px; }
}
@media (max-width: 360px) { .header { width: calc(100% - 32px); gap: 10px; } .wordmark { font-size: 16px; letter-spacing: 1.2px; } .platform-link { font-size: 10px; gap: 7px; } .brand-mark { width: 22px; } h1 { font-size: 60px; } .hero { width: calc(100% - 40px); } .intro { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }