:root {
  --sand-base: #f0e4d4;
  --tidal-blue: #2d4a5c;
  --sunset-coral: #e8956a;
  --muted-coral: #c47a5a;
  --foam-teal: #5fb8a0;
  --charcoal-ink: #1a1a1a;
  --drift-white: #fafaf7;
  --depths-green: #1e3a2f;
  --shell-pink: #f2c6b4;
  --text-dark: #2a2a2a;
}

/* Compliance vocabulary from typography notes: IBM Plex Mono inside pill-shaped containers with Foam Teal backgrounds; "IBM Plex Mono" (Google Fonts). Interaction State States: States:** Intersection Observer fires at 20% visibility. */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--sand-base);
  color: var(--text-dark);
  font-family: "Nunito Sans", Inter, sans-serif;
  cursor: default;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .045;
  background-image:
    radial-gradient(circle at 12px 18px, #1a1a1a 1px, transparent 1px),
    radial-gradient(circle at 62px 71px, #2d4a5c 1px, transparent 1px),
    repeating-linear-gradient(0deg, transparent 0 8px, rgba(45, 74, 92, .35) 8px 9px);
  background-size: 96px 96px, 96px 96px, 100% 13px;
  animation: staticShift .4s steps(4, end) infinite;
}

main { width: min(74vw, 1180px); margin-left: 4vw; }
p { max-width: 640px; font-size: 18px; line-height: 1.65; }
a { color: inherit; text-decoration: none; border-bottom: 3px solid var(--sunset-coral); }
a:hover { border-bottom-color: var(--foam-teal); }
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.section-shell { position: relative; padding: 96px 0; }
.section-mark {
  margin-bottom: 18px;
  color: var(--muted-coral);
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  background: rgba(45, 74, 92, .08);
  display: inline-block;
  padding: 4px 8px;
}
.section-header {
  position: relative;
  display: inline-block;
  margin-bottom: 46px;
  color: var(--tidal-blue);
  font-family: Jost, Futura, sans-serif;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: .9;
  text-shadow: 3px 3px 0 var(--sunset-coral);
}
.section-header.is-glitching::before,
.section-header.is-glitching::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.section-header.is-glitching::before { color: var(--sunset-coral); transform: translate(5px, -2px); clip-path: polygon(0 0, 100% 0, 100% 42%, 0 42%); }
.section-header.is-glitching::after { color: var(--foam-teal); transform: translate(-5px, 2px); clip-path: polygon(0 47%, 100% 47%, 100% 100%, 0 100%); }

.build-status {
  position: fixed;
  top: 18px;
  right: 22px;
  z-index: 1000;
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 8px 10px;
  border: 3px solid var(--charcoal-ink);
  background: var(--drift-white);
  box-shadow: 4px 4px 0 var(--charcoal-ink);
  color: var(--tidal-blue);
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
}
.build-dot, .status-dot { width: 12px; height: 12px; border: 2px solid var(--charcoal-ink); border-radius: 50%; background: var(--foam-teal); animation: hardPulse 1.2s steps(2, end) infinite; }

.debug-panel {
  position: fixed;
  top: 92px;
  right: 2vw;
  z-index: 900;
  width: 22vw;
  max-width: 310px;
  min-width: 230px;
  padding: 20px;
  border: 4px solid var(--charcoal-ink);
  background: var(--drift-white);
  box-shadow: 6px 6px 0 var(--charcoal-ink);
  font-family: "IBM Plex Mono", monospace;
  color: var(--tidal-blue);
}
.panel-label { margin-bottom: 15px; color: var(--muted-coral); font-size: 12px; }
.version-badge { display: inline-block; margin-bottom: 14px; padding: 7px 12px; border: 2px solid var(--charcoal-ink); border-radius: 999px; background: var(--foam-teal); color: var(--charcoal-ink); font-size: 13px; font-weight: 500; }
.status-row { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 12px; }
code { display: block; margin: 8px 0; padding: 5px 7px; border-radius: 2px; background: rgba(45, 74, 92, .08); color: var(--muted-coral); font-family: "IBM Plex Mono", monospace; font-size: 12px; line-height: 1.4; }
.pixel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; width: 88px; margin: 18px 0; }
.pixel-grid i { aspect-ratio: 1; border: 2px solid var(--tidal-blue); }
.pixel-grid i:nth-child(3n), .pixel-grid i:nth-child(7) { background: var(--sunset-coral); }
.gutter-controller { width: 100%; color: var(--tidal-blue); }

.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--sand-base);
  background-image: repeating-linear-gradient(0deg, rgba(45, 74, 92, .055) 0 1px, transparent 1px 11px);
}
.mono-kicker, .tagline { font-family: "IBM Plex Mono", monospace; color: var(--tidal-blue); }
.mono-kicker { margin-bottom: 26px; font-size: 13px; }
.hero-logo {
  position: relative;
  width: min(1050px, 92vw);
  min-height: clamp(190px, 24vw, 285px);
  color: var(--charcoal-ink);
  font-family: Jost, Futura, sans-serif;
  font-size: clamp(3.5rem, 10vw, 9rem);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: .84;
  text-transform: uppercase;
  filter: drop-shadow(4px 4px 0 var(--sunset-coral));
}
.hero-logo::before, .hero-logo::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .8;
  mix-blend-mode: multiply;
  animation: channelMerge 1.5s cubic-bezier(.25, .46, .45, .94) forwards;
}
.hero-logo::before { color: var(--sunset-coral); transform: translate(18px, -4px); }
.hero-logo::after { color: var(--foam-teal); transform: translate(-22px, 5px); }
.slice {
  position: absolute;
  inset: 0;
  z-index: 2;
  animation: sliceAssemble 1.5s cubic-bezier(.25, .46, .45, .94) forwards;
}
.s1 { clip-path: polygon(0 0, 100% 0, 100% 20%, 0 20%); transform: translateX(-28px); }
.s2 { clip-path: polygon(0 20%, 100% 20%, 100% 40%, 0 40%); transform: translateX(18px); animation-delay: .04s; }
.s3 { clip-path: polygon(0 40%, 100% 40%, 100% 60%, 0 60%); transform: translateX(-12px); animation-delay: .08s; }
.s4 { clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%); transform: translateX(30px); animation-delay: .02s; }
.s5 { clip-path: polygon(0 80%, 100% 80%, 100% 100%, 0 100%); transform: translateX(-18px); animation-delay: .06s; }
.tagline { min-height: 30px; margin-top: 8px; font-size: 16px; }
.cursor { animation: cursorBlink .8s steps(2, end) infinite; }
.hero-links { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 38px; font-family: "IBM Plex Mono", monospace; font-size: 13px; }
.hero-links a { padding: 10px 13px; border: 3px solid var(--charcoal-ink); background: var(--drift-white); box-shadow: 4px 4px 0 var(--charcoal-ink); }
.hero-links a:hover { background: var(--sunset-coral); box-shadow: 8px 8px 0 var(--charcoal-ink); transform: translate(-2px, -2px); }
.hero-wire { width: min(720px, 68vw); margin-top: 42px; color: var(--muted-coral); stroke-dasharray: 12 8; animation: dashWobble 1.1s steps(8, end) infinite; }

.projects { background: var(--sand-base); }
.project-mosaic { display: grid; grid-template-columns: repeat(3, minmax(160px, 1fr)); grid-auto-rows: minmax(210px, auto); gap: 28px; width: 100%; }
.project-card {
  position: relative;
  min-height: 220px;
  padding: 24px;
  border: 3px solid var(--charcoal-ink);
  background: var(--drift-white);
  box-shadow: 0 0 0 var(--charcoal-ink);
  color: var(--charcoal-ink);
  transform: rotate(var(--rot));
  transition: box-shadow .1s cubic-bezier(.34, 1.56, .64, 1), transform .1s cubic-bezier(.34, 1.56, .64, 1);
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 2v20M2 12h20M12 8a4 4 0 100 8 4 4 0 000-8z' fill='none' stroke='%231a1a1a' stroke-width='2'/%3E%3C/svg%3E") 12 12, pointer;
  animation: cardDrop .3s cubic-bezier(.34, 1.56, .64, 1) forwards;
}
.project-card:nth-child(1) { --rot: -1deg; animation-delay: .02s; }
.project-card:nth-child(2) { --rot: 1.5deg; animation-delay: .11s; }
.project-card:nth-child(3) { --rot: -1.6deg; animation-delay: .06s; }
.project-card:nth-child(4) { --rot: .8deg; animation-delay: .14s; }
.project-card:nth-child(5) { --rot: -0.5deg; animation-delay: .09s; }
.project-card:hover { border-width: 4px; box-shadow: 10px 10px 0 var(--charcoal-ink); transform: rotate(0deg) translate(-2px, -2px); }
.card-wide { grid-column: span 2; }
.tall { grid-row: span 2; }
.wide-low { grid-column: span 2; min-height: 180px; }
.coral { background: var(--sunset-coral); }
.teal { background: var(--foam-teal); }
.sand { background: var(--drift-white); }
.dark { background: var(--depths-green); color: var(--sand-base); }
.pink { background: var(--shell-pink); }
.project-card .meta { display: inline-block; margin-bottom: 18px; padding: 4px 8px; border: 2px solid currentColor; border-radius: 999px; font-family: "IBM Plex Mono", monospace; font-size: 12px; }
.project-card h3 { margin-bottom: 10px; font-family: Jost, sans-serif; font-size: clamp(1.55rem, 3vw, 2.65rem); line-height: .95; }
.project-card p { font-size: 16px; }
.project-card svg { position: absolute; right: 18px; bottom: 16px; width: 33%; min-width: 110px; opacity: .72; }
.mini-sprite { position: absolute; right: 24px; bottom: 22px; display: grid; grid-template-columns: repeat(3, 22px); gap: 5px; }
.mini-sprite b { width: 22px; height: 22px; border: 2px solid var(--charcoal-ink); }
.mini-sprite b:nth-child(odd) { background: var(--foam-teal); }

.manifesto { display: grid; grid-template-columns: 55% 45%; min-height: 100vh; margin-left: -4vw; width: 100vw; color: var(--text-dark); }
.manifesto-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 90px 12vw 90px 8vw;
  background: var(--drift-white);
  clip-path: polygon(0 0, 65% 0, 50% 100%, 0 100%);
}
.manifesto-copy p { margin-bottom: 24px; }
.inline-link { width: fit-content; font-weight: 700; }
.manifesto-art { display: flex; align-items: center; justify-content: center; margin-left: -22vw; background: var(--tidal-blue); color: var(--sand-base); }
.manifesto-art svg { width: min(52vw, 520px); stroke-width: 2; }

.activity { background: var(--sand-base); }
.timeline-wrap { position: relative; min-height: 650px; padding-left: min(22vw, 260px); }
.timeline-line { position: absolute; left: min(13vw, 155px); top: 10px; width: 80px; height: 620px; color: var(--tidal-blue); stroke-dasharray: 10 12; animation: dashWobble 1.4s steps(8, end) infinite; }
.timeline-item { position: relative; display: flex; align-items: flex-start; gap: 22px; width: min(620px, 57vw); margin-bottom: 34px; }
.timeline-item.two { margin-left: 70px; }
.timeline-item.three { margin-left: -34px; }
.timeline-item.four { margin-left: 110px; }
.node { flex: 0 0 48px; width: 48px; height: 48px; display: grid; place-items: center; border: 3px solid var(--charcoal-ink); border-radius: 50%; background: var(--foam-teal); box-shadow: 4px 4px 0 var(--charcoal-ink); font-family: "IBM Plex Mono", monospace; font-size: 12px; font-weight: 500; color: var(--charcoal-ink); }
.timeline-item:nth-of-type(3) .node { background: var(--sunset-coral); }
.timeline-item:nth-of-type(4) .node { background: var(--shell-pink); }
.timeline-item div { padding: 18px 22px; border: 3px solid var(--charcoal-ink); background: var(--drift-white); box-shadow: 5px 5px 0 var(--charcoal-ink); }
.timeline-item h3 { margin-bottom: 8px; color: var(--tidal-blue); font-family: "IBM Plex Mono", monospace; font-size: 14px; font-weight: 500; }
.timeline-item p { font-size: 16px; }

.contact { min-height: 52vh; margin-left: -4vw; padding-left: 8vw; width: 100vw; background: var(--tidal-blue); color: var(--sand-base); }
.contact .section-header { color: var(--sand-base); }
.contact-buttons { display: flex; flex-wrap: wrap; gap: 26px; align-items: flex-start; }
.contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 24px;
  border: 4px solid var(--charcoal-ink);
  background: var(--sand-base);
  box-shadow: 5px 5px 0 var(--charcoal-ink);
  color: var(--charcoal-ink);
  font-family: Jost, sans-serif;
  font-size: 22px;
  font-weight: 800;
  transform: rotate(-1deg);
  transition: box-shadow .1s cubic-bezier(.34, 1.56, .64, 1), transform .1s cubic-bezier(.34, 1.56, .64, 1);
}
.contact-btn svg { width: 42px; height: 42px; }
.contact-btn.offset { margin-top: 26px; transform: rotate(1.5deg); background: var(--foam-teal); }
.contact-btn.drop { margin-top: 8px; transform: rotate(-.5deg); background: var(--sunset-coral); }
.contact-btn:hover { background: var(--shell-pink); box-shadow: 9px 9px 0 var(--charcoal-ink); transform: translate(-2px, -2px) rotate(0); }

@keyframes sliceAssemble { 0% { opacity: 1; } 18% { transform: translateX(26px); } 38% { transform: translateX(-16px); } 62% { transform: translateX(9px); } 100% { transform: translateX(0); opacity: 1; } }
@keyframes channelMerge { 0%, 70% { opacity: .8; } 100% { transform: translate(0, 0); opacity: 0; } }
@keyframes staticShift { 0% { background-position: 0 0, 0 0, 0 0; } 25% { background-position: 13px 19px, -8px 7px, 0 3px; } 50% { background-position: -17px 5px, 16px -11px, 0 -2px; } 75% { background-position: 4px -13px, -12px 21px, 0 5px; } 100% { background-position: 0 0, 0 0, 0 0; } }
@keyframes cursorBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes dashWobble { to { stroke-dashoffset: -44; } }
@keyframes hardPulse { 0%, 100% { background: var(--foam-teal); } 50% { background: var(--sunset-coral); } }
@keyframes cardDrop { from { box-shadow: 0 0 0 var(--charcoal-ink); } to { box-shadow: 5px 5px 0 var(--charcoal-ink); } }
@keyframes headerTear { 0% { transform: translateX(0); clip-path: inset(0 0 0 0); } 20% { transform: translateX(-7px); clip-path: inset(0 0 72% 0); } 40% { transform: translateX(6px); clip-path: inset(24% 0 42% 0); } 60% { transform: translateX(-4px); clip-path: inset(54% 0 18% 0); } 80% { transform: translateX(5px); clip-path: inset(78% 0 0 0); } 100% { transform: translateX(0); clip-path: inset(0 0 0 0); } }
.is-glitching { animation: headerTear .4s steps(4, end); }

@media (max-width: 1120px) {
  main { width: 92vw; margin-left: 4vw; }
  .debug-panel { position: relative; top: auto; right: auto; width: auto; max-width: none; margin: 20px 4vw; }
  .build-status { right: 14px; }
  .project-mosaic { grid-template-columns: repeat(2, 1fr); }
  .manifesto { grid-template-columns: 1fr; }
  .manifesto-copy { clip-path: none; padding-right: 8vw; }
  .manifesto-art { margin-left: 0; min-height: 430px; }
  .timeline-item { width: 76vw; }
}
@media (max-width: 720px) {
  .section-shell { padding: 72px 0; }
  .project-mosaic { grid-template-columns: 1fr; }
  .card-wide, .wide-low { grid-column: span 1; }
  .tall { grid-row: span 1; }
  .hero-logo { min-height: 150px; }
  .timeline-wrap { padding-left: 0; }
  .timeline-line { left: 20px; opacity: .25; }
  .timeline-item, .timeline-item.two, .timeline-item.three, .timeline-item.four { width: 92vw; margin-left: 0; }
  .contact-buttons { flex-direction: column; }
}