:root {
  --paper: #f7f7f2;
  --ink: #090909;
  --accent: #f00098;
  --cyan: #00d9d0;
  --line: rgba(9, 9, 9, .2);
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; color: var(--ink); background: var(--paper); overflow-x: hidden; }
a { color: inherit; }
button { font: inherit; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px 0 22px;
  border-bottom: 3px solid var(--ink);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(14px);
}
.brand { color: var(--ink); text-decoration: none; font: 900 clamp(2rem, 4vw, 3.4rem)/.8 Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; letter-spacing: -.04em; }
.brand span { color: var(--accent); }
.top-actions { display: flex; align-items: center; gap: 13px; }
.manifest-state { font: 800 .65rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .12em; }
.theme-toggle { width: 44px; height: 44px; padding: 5px; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); cursor: pointer; }
.theme-toggle span { display: block; width: 100%; height: 100%; border-radius: inherit; background: conic-gradient(var(--ink) 0 50%, var(--accent) 50%); transition: transform .5s cubic-bezier(.16,1,.3,1); }
.theme-toggle:hover span { transform: rotate(120deg); }

.hero {
  min-height: calc(100vh - 74px);
  position: relative;
  display: grid;
  align-content: end;
  padding: clamp(24px, 5vw, 70px);
  overflow: hidden;
  border-bottom: 3px solid var(--ink);
  isolation: isolate;
}
#hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 20%, var(--paper) 92%); pointer-events: none; }
.hero-kicker { position: absolute; top: 24px; left: clamp(24px,5vw,70px); margin: 0; font: 800 .7rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .18em; }
.hero h1 { display: flex; align-items: flex-end; justify-content: space-between; margin: 0; font: 900 clamp(10rem, 34vw, 34rem)/.63 Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; letter-spacing: -.075em; text-transform: uppercase; }
.hero h1 span:last-child { color: var(--accent); }
.hero-copy { max-width: 720px; margin: clamp(26px,4vw,50px) 0 0; font: 800 clamp(1rem,2vw,1.65rem)/1.05 'Arial Narrow', Arial, sans-serif; text-transform: uppercase; }
.hero-enter { position: absolute; right: clamp(24px,5vw,70px); bottom: clamp(24px,5vw,70px); display: flex; gap: 18px; align-items: center; padding: 14px 16px; border: 2px solid var(--ink); color: var(--ink); background: var(--paper); text-decoration: none; font: 800 .67rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .12em; }
.hero-enter b { color: var(--accent); font-size: 1.4rem; }

.matter-strip { display: flex; align-items: center; gap: 22px; padding: 13px 20px; overflow: hidden; border-bottom: 3px solid var(--ink); white-space: nowrap; font: 900 clamp(1rem,2vw,1.5rem)/1 Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; letter-spacing: .04em; }
.matter-strip i { flex: 1 0 55px; height: 3px; background: var(--accent); }
.experiences { padding: 10px; }
.section-head { display: flex; justify-content: space-between; gap: 20px; padding: 13px 8px 18px; font: 800 .62rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .14em; }
.section-head p { margin: 0; }
.project-list { display: grid; gap: 10px; }
.project-card { min-height: min(760px, 88vh); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr); border: 3px solid var(--ink); background: var(--paper); overflow: hidden; }
.project-card:nth-child(even) { grid-template-columns: minmax(300px, .7fr) minmax(0, 1.3fr); }
.project-card:nth-child(even) .project-visual { order: 2; }
.project-visual { position: relative; min-height: 520px; overflow: hidden; background: var(--ink); }
.project-visual canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.visual-label { position: absolute; left: 14px; top: 14px; z-index: 2; padding: 7px 9px; color: var(--paper); border: 1px solid currentColor; font: 700 .6rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .12em; }
.project-copy { min-width: 0; display: flex; flex-direction: column; padding: clamp(22px,4vw,55px); border-left: 3px solid var(--ink); }
.project-card:nth-child(even) .project-copy { border-left: 0; border-right: 3px solid var(--ink); }
.project-index { margin: 0 0 auto; color: var(--accent); font: 900 clamp(3rem,8vw,7rem)/.8 Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; }
.project-type { margin: 40px 0 7px; font: 800 .61rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .13em; text-transform: uppercase; }
.project-title { margin: 0; font: 900 clamp(4rem,9vw,9rem)/.74 Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; letter-spacing: -.045em; text-transform: uppercase; overflow-wrap: anywhere; }
.project-summary { max-width: 38ch; margin: 30px 0 18px; font: 700 clamp(1rem,1.7vw,1.35rem)/1.18 'Arial Narrow', Arial, sans-serif; text-transform: uppercase; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 35px; padding: 0; list-style: none; }
.tags li { padding: 6px 8px; border: 1px solid var(--line); font: 700 .57rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; text-transform: uppercase; }
.project-links { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; }
.project-links a, .project-soon { padding: 12px 14px; border: 2px solid var(--ink); color: var(--ink); text-decoration: none; font: 800 .62rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.project-links a:first-child { color: var(--paper); background: var(--ink); }
.project-links a:hover { color: var(--paper); background: var(--accent); border-color: var(--accent); }
.project-soon { opacity: .45; cursor: default; }
footer { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px; border-top: 3px solid var(--ink); font: 800 .62rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .1em; }
footer a { text-decoration: none; }

.dark { --paper: #080808; --ink: #f4f4ee; --line: rgba(244,244,238,.22); color-scheme: dark; }
.dark .project-visual { background: #f4f4ee; }
.dark .hero::after { background: linear-gradient(180deg, transparent 20%, var(--paper) 92%); }

@media (max-width: 800px) {
  .manifest-state { display: none; }
  .hero { min-height: 760px; padding: 24px 15px 40px; }
  .hero h1 { font-size: 44vw; }
  .hero-copy { margin-bottom: 95px; }
  .hero-enter { left: 15px; right: auto; bottom: 24px; }
  .project-card, .project-card:nth-child(even) { min-height: 0; grid-template-columns: 1fr; }
  .project-card:nth-child(even) .project-visual { order: 0; }
  .project-visual { min-height: 62vh; }
  .project-copy, .project-card:nth-child(even) .project-copy { min-height: 520px; border: 0; border-top: 3px solid var(--ink); }
  .project-title { font-size: clamp(4rem,20vw,7rem); }
  footer { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }