:root {
  color-scheme: light;
  --bg: #f4f3ee;
  --ink: #141517;
  --muted: #6d7075;
  --accent: #ff4d2e;
  --accent-ink: #d63a1e;
  --line: #14151722;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 28px; }
body { margin: 0; position: relative; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
button[hidden], svg[hidden] { display: none; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 7px; }
.skip-link { position: absolute; top: -100px; left: 24px; z-index: 10; padding: 16px; background: var(--ink); color: var(--bg); }
.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Full-viewport artwork sits behind everything, including the text. */
.artwork { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
canvas { width: 100%; height: 100%; display: block; }

.header, .footer, main { position: relative; z-index: 1; }
main { overflow-x: clip; }
.header, .footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.header { height: 112px; margin: 0 4.5%; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 29px; letter-spacing: -1.3px; font-weight: 600; }
.brand svg { width: 34px; height: 34px; color: var(--accent); }
.header-note, .eyebrow, .art-caption, .discover, .footer-note { font-family: "Courier New", monospace; font-size: 15px; letter-spacing: 1.05px; line-height: 1.65; }
.header-note { color: var(--muted); }
.contact-link { font-size: 18px; display: flex; align-items: center; gap: 30px; }
.contact-link span { color: var(--accent); font-size: 25px; }
.text-arrow {
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-variant-emoji: text;
  font-weight: 400;
  line-height: 1;
}
.text-arrow--ne::before { content: "\2197\FE0E"; }
.text-arrow--down::before { content: "\2193\FE0E"; }
.text-arrow--up::before { content: "\2191\FE0E"; }

.hero { min-height: 720px; height: calc(100svh - 112px); max-height: 1100px; position: relative; }
.hero-content { position: relative; padding: clamp(90px, 14vh, 180px) 4.5% 190px; pointer-events: none; }
.hero-content a { pointer-events: auto; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 31px; color: var(--accent-ink); }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px #ff4d2e22; }
h1 { font-size: clamp(76px, 10.5vw, 184px); line-height: .92; letter-spacing: -.06em; font-weight: 700; margin: 0 0 34px -6px; }
h1 em { font-style: normal; color: var(--accent); }
.intro { font-size: 21px; line-height: 1.7; color: #34373c; margin: 0 0 32px; max-width: 680px; }
.project-link { display: inline-flex; align-items: center; gap: 25px; font-size: 18px; font-weight: 600; }
.arrow-circle { border: 1px solid var(--ink); color: var(--ink); border-radius: 50%; width: 46px; height: 46px; display: grid; place-items: center; font-size: 23px; transition: background .2s, color .2s, transform .2s, border-color .2s; }
.arrow-circle::before {
  content: "\2197\FE0E";
  font-family: Arial, Helvetica, sans-serif;
  font-variant-emoji: text;
  font-weight: 400;
  line-height: 1;
}
.project-link:hover .arrow-circle { background: var(--accent); border-color: var(--accent); color: #fff; transform: rotate(45deg); }

.hero-bottom { position: absolute; bottom: 0; left: 4.5%; right: 4.5%; height: 92px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.discover { display: inline-flex; align-items: center; gap: 16px; color: #55595f; font-size: 15px; letter-spacing: .75px; }
.discover > span { color: var(--accent); font-size: 24px; }
.art-caption { display: flex; align-items: center; gap: 15px; font-size: 14px; letter-spacing: .75px; color: #3b3e43; }
.crosshair { font-size: 34px; font-weight: 400; color: var(--accent); }
.caption-muted { color: #55595f; font-size: 14px; }
.art-controls { display: flex; align-items: center; gap: 14px; position: relative; z-index: 2; }
.art-controls button { border: 1px solid var(--line); background: #ffffffb0; backdrop-filter: blur(8px); min-height: 44px; border-radius: 30px; font-size: 16px; touch-action: manipulation; transition: border-color .2s, background .2s; }
.art-controls button:hover { border-color: var(--ink); background: #fff; }
#change-form { padding: 0 17px; }
#change-form span { margin-right: 8px; color: var(--accent); font-size: 18px; vertical-align: middle; }
#change-form strong { color: var(--accent-ink); font-weight: 600; }
#toggle-motion { width: 40px; display: grid; place-items: center; }
#toggle-motion svg { width: 13px; height: 13px; }

.contact-section { margin: 0 4.5%; padding: 107px 0 100px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 60px; position: relative; }
.contact-section::before { content: ""; position: absolute; inset: 0 -5.5% 0 -5.5%; background: linear-gradient(180deg, #f4f3ee00, #f4f3eeee 18%, #f4f3eeee); z-index: -1; pointer-events: none; }
.contact-section .eyebrow { color: #55595f; font-size: 15px; margin-bottom: 25px; }
.contact-heading { display: flex; flex-direction: column; }
.contact-heading address { margin-top: auto; padding: 64px 0 44px; }
.tiny-plus { color: var(--accent); font-size: 21px; }
h2 { font-size: clamp(38px, 4.4vw, 72px); font-weight: 600; letter-spacing: -.05em; line-height: 1.05; margin: 0; }
h2 span { color: var(--muted); font-weight: 400; }
.contact-details { padding-top: 49px; justify-self: end; width: min(100%, 460px); }
.contact-form { display: grid; gap: 28px; }
.field { display: grid; gap: 8px; }
.field label { font-family: "Courier New", monospace; font-size: 15px; letter-spacing: 1.05px; text-transform: uppercase; color: #55595f; }
.field input, .field textarea { width: 100%; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: transparent; padding: 6px 0 12px; font: inherit; font-size: 22px; letter-spacing: -.02em; color: var(--ink); }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--accent); }
.field textarea { min-height: 96px; line-height: 1.5; resize: vertical; }
.field ::placeholder { color: #9a9da2; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.turnstile[hidden] { display: none; }
.form-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.submit { display: inline-flex; align-items: center; gap: 22px; border: 0; background: none; padding: 0; font-size: 18px; font-weight: 600; }
.submit:hover .arrow-circle, .submit:focus-visible .arrow-circle { background: var(--accent); border-color: var(--accent); color: #fff; transform: rotate(45deg); }
.submit:disabled { opacity: .5; cursor: progress; }
.form-status { margin: 0; flex: 1 1 100%; min-height: 1.4em; font-size: 18px; line-height: 1.5; color: #55595f; }
.form-status[data-kind="error"] { color: var(--accent-ink); }
.form-status[data-kind="success"] { font-size: clamp(20px, 2vw, 28px); letter-spacing: -.03em; color: var(--ink); }
.contact-form.is-sent .field, .contact-form.is-sent .submit, .contact-form.is-sent .turnstile { display: none; }
address { font-style: normal; font-size: 18px; color: #55595f; line-height: 1.75; }
.contact-name { display: block; color: var(--ink); margin-bottom: 6px; }

.footer { padding: 0 4.5%; min-height: 85px; border-top: 1px solid var(--line); font-size: 16px; color: #55595f; background: var(--bg); }
.footer-note { font-size: 14px; letter-spacing: .75px; }
.footer a { display: flex; gap: 20px; align-items: center; }
.footer a span { font-size: 18px; color: var(--accent); }
.contact-link:hover, .footer a:hover, .discover:hover { color: var(--accent-ink); }

.artwork-label { margin: 0 4.5%; padding: 70px 0 76px; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(260px, .75fr) 1.25fr; align-items: end; gap: 8vw; position: relative; }
.artwork-label::before { content: ""; position: absolute; inset: 0 -5.5%; background: #f4f3eeb8; backdrop-filter: blur(3px); z-index: -1; }
.artwork-signature h2 { font-size: clamp(36px, 3.4vw, 54px); letter-spacing: -.04em; margin-bottom: 13px; }
.artwork-signature h2 span { color: var(--accent); font-weight: 400; }
.artwork-signature p { margin: 0; font-family: "Courier New", monospace; font-size: 15px; letter-spacing: 1.05px; line-height: 1.65; color: #55595f; }
.artwork-copy { display: grid; gap: 30px; }
.artwork-meaning { max-width: 760px; margin: 0; font-size: clamp(20px, 1.65vw, 25px); line-height: 1.55; letter-spacing: -.02em; color: #34373c; }
.artwork-process { max-width: 780px; margin: 0; font-size: 17px; line-height: 1.7; color: #55595f; }
.artwork-process strong { display: block; margin-bottom: 8px; font-family: "Courier New", monospace; font-size: 15px; letter-spacing: 1.05px; color: var(--accent-ink); }

@media (max-width: 900px) {
  .header { height: 90px; }
  .header-note { display: none; }
  .hero { height: calc(100svh - 90px); min-height: 700px; }
  .hero-content { padding-top: 120px; }
  h1 { font-size: clamp(64px, 13vw, 120px); }
  .art-caption { display: none; }
  .discover { max-width: 320px; font-size: 15px; }
  .artwork-label { grid-template-columns: 1fr; align-items: start; gap: 32px; padding: 62px 0 68px; }
  .artwork-meaning { max-width: 680px; }
  .contact-section { gap: 35px; padding: 80px 0; }
  .footer-note { display: none; }
}
@media (max-width: 600px) {
  .header { height: 80px; margin: 0 6%; }
  .brand { font-size: 25px; }
  .brand svg { width: 29px; }
  .contact-link { font-size: 17px; gap: 14px; }
  .hero { min-height: 640px; }
  .hero-content { padding: 70px 6% 150px; }
  .hero-content .eyebrow { font-size: 15px; margin-bottom: 25px; }
  h1 { font-size: clamp(56px, 16vw, 90px); margin-left: -3px; margin-bottom: 23px; }
  .intro { font-size: 19px; line-height: 1.66; margin-bottom: 22px; }
  .project-link { font-size: 17px; gap: 19px; }
  .arrow-circle { width: 40px; height: 40px; }
  .hero-bottom { left: 6%; right: 6%; height: 78px; }
  .discover { font-size: 0; gap: 0; }
  .discover > span { font-size: 25px; }
  .art-controls { gap: 9px; }
  .artwork-label { margin: 0 6%; padding: 52px 0 58px; gap: 25px; }
  .artwork-label::before { inset: 0 -7%; }
  .artwork-signature h2 { font-size: 38px; }
  .artwork-signature p { font-size: 15px; }
  .artwork-copy { gap: 25px; }
  .artwork-meaning { font-size: 19px; line-height: 1.6; }
  .artwork-process { font-size: 17px; line-height: 1.65; }
  .contact-section { margin: 0 6%; padding: 60px 0; grid-template-columns: 1fr; gap: 35px; }
  .contact-section::before { inset: 0 -7% 0 -7%; }
  .contact-section .eyebrow, .field label { font-size: 15px; letter-spacing: .95px; }
  .contact-heading address { margin-top: 32px; padding: 0; }
  h2 { font-size: 44px; }
  .contact-details { justify-self: start; padding-top: 0; width: 100%; }
  .submit, address, .form-status { font-size: 18px; }
  .footer { padding: 0 6%; min-height: 80px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}