:root {
  color-scheme: dark;
  --background: #111111;
  --surface: #191919;
  --foreground: #ededed;
  --muted: #ababab;
  --border: #4d4d4d;
  --accent: #ff4b45;
  --mono: "DejaVu Sans Mono", "SFMono-Regular", Consolas, monospace;
  --sans: Arial, Helvetica, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 2rem; }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--sans); font-size: 1rem; line-height: 1.6; }
::selection { color: var(--background); background: var(--accent); }
a { color: inherit; text-underline-offset: .3em; }
a:hover { color: var(--accent); }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure { margin: 0; }
.page-width { width: min(100% - 6rem, 1280px); margin-inline: auto; }
.accent { color: var(--accent); }
.eyebrow { font: .875rem/1.5 var(--mono); letter-spacing: .07em; }
.skip-link { position: absolute; top: -6rem; left: 1rem; z-index: 10; padding: 1rem; background: var(--accent); color: var(--background); }
.skip-link:focus { top: 1rem; }
.site-header { min-height: 100px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; border-bottom: 1px solid var(--border); }
.wordmark { display: inline-flex; align-items: center; gap: .75rem; font-weight: 800; font-size: 1rem; text-decoration: none; letter-spacing: -.02em; }
.wordmark .accent { margin-left: -.7rem; }
.mark { display: inline-block; width: 18px; height: 18px; border: 3px solid var(--accent); box-shadow: 5px 5px 0 var(--accent); margin-right: .5rem; }
nav { display: flex; gap: 2rem; }
nav a { font: .875rem/1.5 var(--mono); text-decoration: none; padding-block: .75rem; }
.hero { position: relative; padding-block: 2.5rem 4rem; }
.hero-top { display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); }
.hero h1 { font-size: clamp(5.5rem, 13.6vw, 12rem); font-weight: 900; line-height: .87; letter-spacing: -.065em; margin-block: 2.25rem 2.5rem; }
.surname { display: block; }
.hero h1, .hero-top, .hero-bottom { position: relative; z-index: 1; }
.hero-line { display: block; overflow: clip; padding-block: .1em; margin-block: -.1em; }
.hero-line > span { display: inline-block; }
.hero-art { position: absolute; width: clamp(10rem, 22vw, 17rem); aspect-ratio: 1; right: 6%; top: 7rem; pointer-events: none; }
.art-frame { position: absolute; inset: 0; border: 2px solid var(--accent); }
.art-grid { position: absolute; inset: 22%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; transform: rotate(-9deg); }
.art-grid span { border: 1px solid var(--accent); }
.art-grid span:first-child { background: var(--accent); }
.art-grid span:nth-child(3) { background: var(--foreground); border-color: var(--foreground); }
.scroll-progress { position: fixed; inset: 0 0 auto; height: 3px; background: var(--accent); z-index: 20; transform: scaleX(0); transform-origin: left; pointer-events: none; }
nav a { position: relative; }
nav a::after { content: ""; position: absolute; height: 2px; background: var(--accent); inset: auto 0 .4rem; transform: scaleX(0); transform-origin: left; transition: transform .25s; }
nav a:hover::after, nav a:focus-visible::after, nav a[aria-current="location"]::after { transform: scaleX(1); }
nav a[aria-current="location"] { color: var(--accent); }
.hero-bottom { border-top: 1px solid var(--border); padding-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; gap: 2rem; }
.hero-bottom p { max-width: 30rem; font-size: 1.125rem; color: var(--muted); }
.button { display: inline-flex; align-items: center; justify-content: center; padding: .95rem 1.6rem; background: var(--accent); color: #111; border: 2px solid var(--accent); text-decoration: none; font: 700 .875rem/1.5 var(--mono); white-space: nowrap; transition: background .15s, color .15s, box-shadow .15s; }
.button:hover { background: var(--foreground); border-color: var(--foreground); color: #111; box-shadow: 5px 5px 0 var(--accent); }
.section-heading { padding-block: 1.25rem; border-top: 3px solid var(--foreground); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.section-heading h2 { font: 700 1rem/1.5 var(--mono); letter-spacing: .04em; }
.section-heading > .eyebrow { color: var(--muted); }
.featured-project { display: grid; grid-template-columns: .9fr 1.1fr; border: 1px solid var(--border); background: var(--surface); }
.project-copy { padding: 2.5rem; }
.project-copy h3, .project h3 { font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.15; letter-spacing: -.045em; margin-block: 1.1rem 1.25rem; }
.project-copy > p:not(.eyebrow), .project > p:not(.eyebrow) { color: var(--muted); }
.project-context { margin-top: 1rem; }
.project-image { min-width: 0; padding: 2.5rem 2rem; background: #101010; border-left: 1px solid var(--border); display: flex; flex-direction: column; justify-content: center; gap: 1rem; }
.project-image img { width: 100%; height: auto; border: 1px solid var(--border); }
.project-image figcaption { color: var(--muted); font-size: .75rem; }
.tags { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 1.5rem 0; list-style: none; }
.tags li { border: 1px solid var(--border); padding: .3rem .6rem; font: .8125rem/1.5 var(--mono); }
.project-links { display: flex; flex-wrap: wrap; gap: 1.5rem; font: 700 .875rem/1.5 var(--mono); }
.footnote { font-size: .8125rem; margin-top: 1rem; }
.project-pair { display: grid; grid-template-columns: 1fr 1fr; margin-top: 1.5rem; gap: 1.5rem; }
.project { padding: 2.5rem; border: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; }
.project .tags { margin-top: auto; padding-top: 1.5rem; }
.project-context + .tags { margin-bottom: 1.5rem; }
.about { margin-top: 5rem; }
.about-grid { display: grid; grid-template-columns: 1fr .85fr; gap: 6rem; padding-block: 2rem 3rem; }
.about-text { font-size: clamp(1.25rem, 2vw, 1.7rem); line-height: 1.65; letter-spacing: -.025em; }
.toolkit h3 { color: var(--muted); margin-bottom: 1.5rem; }
.toolkit-list { padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .8rem; list-style: none; }
.toolkit-list li { padding: .7rem 1rem; border: 1px solid var(--foreground); background: var(--surface); box-shadow: 4px 4px 0 #565656; font: 700 1rem/1.5 var(--mono); }
.toolkit-list li:nth-child(4) { background: var(--accent); border-color: var(--accent); color: #111; box-shadow: 4px 4px 0 #892a26; }
.contact { border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-block: 4rem; }
.contact .eyebrow { color: var(--muted); margin-bottom: 1.25rem; }
.contact h2 { font-size: clamp(2.5rem, 6vw, 5rem); line-height: .95; letter-spacing: -.06em; }
.button-outline { background: none; color: var(--foreground); border-color: var(--foreground); min-width: 11rem; }
.site-footer { padding-block: 1.5rem 2rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; font: .75rem/1.7 var(--mono); color: var(--muted); }
.motion-toggle { color: var(--foreground); background: none; border: 1px solid var(--border); padding: .5rem .75rem; font: .75rem/1.5 var(--mono); cursor: pointer; }
.motion-toggle:hover, .motion-toggle[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.motion-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
[hidden] { display: none !important; }
.motion-ready .hero-line > span { animation: name-enter .9s cubic-bezier(.16, 1, .3, 1) both; }
.motion-ready .surname > span { animation-delay: .12s; }
.motion-ready .hero-top, .motion-ready .hero-bottom { animation: fade-enter .8s .2s ease both; }
.motion-ready .hero-art { transition: transform .35s ease-out; transform: translate3d(var(--hero-x, 0px), var(--hero-y, 0px), 0); }
.motion-ready .art-frame { animation: frame-drift 9s ease-in-out infinite alternate; }
.motion-ready .art-grid { animation: grid-drift 7s ease-in-out infinite alternate; }
.motion-ready [data-reveal] { transition: opacity .7s ease, transform .7s cubic-bezier(.16, 1, .3, 1), border-color .25s, box-shadow .25s; }
.motion-ready [data-reveal].reveal-pending { opacity: 0; transform: translate3d(0, 28px, 0); }
.motion-ready [data-interactive]:not(.reveal-pending) { transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition-duration: .4s; }
[data-interactive]:hover, [data-interactive]:focus-within { border-color: var(--accent); box-shadow: 5px 5px 0 #ff4b4526; }
.motion-ready .project-image img { transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.motion-ready .featured-project:hover .project-image img { transform: scale(1.025); }
.motion-ready .toolkit-list li { transition: transform .25s, box-shadow .25s; }
.motion-ready .toolkit-list li:hover { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--accent); }
@keyframes name-enter { from { opacity: 0; transform: translateY(105%); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes frame-drift { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes grid-drift { from { transform: rotate(-9deg) translateY(-6px); } to { transform: rotate(0deg) translateY(6px); } }
@media (max-width: 1000px) {
  .page-width { width: calc(100% - 3rem); }
  .project-copy, .project { padding: 1.75rem; }
  .project-image { padding: 1.5rem; }
  .about-grid { gap: 3rem; }
}
@media (max-width: 700px) {
  .page-width { width: calc(100% - 2rem); }
  .site-header { min-height: 85px; gap: 1rem; }
  .wordmark { font-size: .875rem; }
  .mark { width: 14px; height: 14px; margin-right: .25rem; }
  nav { gap: 1rem; }
  nav a { font-size: .8125rem; }
  .hero { padding-block: 2rem 3rem; }
  .hero-top { display: block; }
  .hero-top .eyebrow:last-child { display: none; }
  .hero-top .eyebrow { font-size: .75rem; }
  .hero h1 { font-size: clamp(4.6rem, 19vw, 8rem); margin-block: 2rem; }
  .hero-art { display: none; }
  .hero-bottom { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .section-heading { align-items: flex-start; }
  .section-heading .eyebrow { font-size: .75rem; }
  .featured-project, .project-pair, .about-grid { grid-template-columns: 1fr; }
  .project-copy, .project { padding: 1.5rem; }
  .project-image { border-left: 0; border-top: 1px solid var(--border); }
  .project-image img { aspect-ratio: auto; }
  .about { margin-top: 3rem; }
  .about .section-heading > .eyebrow { display: none; }
  .about-grid { gap: 2rem; padding-top: 1rem; }
  .contact { align-items: flex-start; flex-direction: column; padding-block: 3rem; }
  .site-footer { flex-direction: column; align-items: flex-start; gap: .75rem; }
}
@media (max-width: 370px) { .wordmark { font-size: .75rem; gap: .5rem; } nav { gap: .7rem; } .mark { display: none; } }
html.motion-off { scroll-behavior: auto; }
.motion-off *, .motion-off *::before, .motion-off *::after { animation: none !important; transition: none !important; }
.motion-off [data-reveal] { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero-art { transform: none !important; }
}