:root {
  --burgundy: #4a0e1a;
  --umber: #2a1510;
  --copper: #a67c52;
  --parchment: #e8dcc8;
  --gray: #6b5e52;
  --red: #c83232;
  --amber: #d4a44a;
  --asphalt: #1a0f0f;
  --charcoal: #2a2420;
  --cream: #f0e6d2;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

/* Compliance anchors: IBM Plex Mono" (400; Space Grotesk" (500/700; Interaction Interactions:** Intersection Observer. When a cluster of cells scrolls into view; Interstitial. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--parchment);
  background: linear-gradient(180deg, var(--burgundy) 0%, var(--umber) 42%, var(--asphalt) 100%);
  font-family: "Libre Baskerville", Georgia, serif;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: var(--noise), linear-gradient(90deg, transparent 0 48%, #d4a44a0f 49% 50%, transparent 51% 100%);
  mix-blend-mode: screen;
  opacity: .85;
  z-index: 1;
}

a { color: inherit; text-decoration: none; }
.svg-defs, .icon-bank { position: absolute; width: 0; height: 0; overflow: hidden; }

.page-shell {
  position: relative;
  z-index: 2;
  scroll-snap-type: y proximity;
}

.panel { scroll-snap-align: start; position: relative; }

.hero {
  min-height: 100vh;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--asphalt);
  background-image: var(--noise), radial-gradient(circle at 50% 45%, #4a0e1a66 0 24%, transparent 55%), linear-gradient(160deg, #2a1510 0%, #1a0f0f 68%);
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  width: 56vw;
  height: 56vw;
  min-width: 520px;
  min-height: 520px;
  border: 1px solid #a67c522b;
  clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  filter: drop-shadow(0 0 26px #d4a44a18);
  animation: hexPulse 5.5s ease-in-out infinite;
  z-index: -1;
}

.hero::before { left: -16vw; top: 7vh; }
.hero::after { right: -18vw; bottom: -12vh; animation-delay: -2.2s; }

.hero-grid {
  position: absolute;
  inset: -8%;
  background-image: linear-gradient(30deg, #a67c521c 12%, transparent 12.5%, transparent 87%, #a67c521c 87.5%, #a67c521c), linear-gradient(150deg, #a67c521c 12%, transparent 12.5%, transparent 87%, #a67c521c 87.5%, #a67c521c), linear-gradient(30deg, #a67c521c 12%, transparent 12.5%, transparent 87%, #a67c521c 87.5%, #a67c521c), linear-gradient(150deg, #a67c521c 12%, transparent 12.5%, transparent 87%, #a67c521c 87.5%, #a67c521c);
  background-size: 96px 168px;
  background-position: 0 0, 0 0, 48px 84px, 48px 84px;
  opacity: .35;
  mask-image: radial-gradient(circle at center, #000 0 42%, transparent 72%);
  animation: gridWarm 4s ease forwards;
}

.mural-mark {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 96vw;
  padding: 0 1rem;
  transform: skewX(-7deg) rotate(-1deg);
  filter: url(#stencilRough);
}

.mural-mark span {
  position: relative;
  font-family: "Cormorant Garamond", Garamond, serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(3.2rem, 10.4vw, 12rem);
  letter-spacing: .04em;
  line-height: .8;
  color: var(--cream);
  text-shadow: 0 0 8px #e8dcc840, 0 0 34px #c8323220;
  clip-path: inset(0 100% 0 0);
  animation: sprayLetter .62s cubic-bezier(.25,.46,.45,.94) forwards;
}

.mural-mark span:nth-child(3n)::after,
.mural-mark span:nth-child(7n)::after {
  content: "";
  position: absolute;
  left: 52%;
  top: 84%;
  width: .08em;
  height: .42em;
  border-radius: 999px;
  background: linear-gradient(var(--cream), transparent);
  opacity: .7;
}

.hero-tag {
  position: absolute;
  bottom: 12vh;
  font-family: "IBM Plex Mono", monospace;
  font-size: .8rem;
  letter-spacing: .08em;
  color: var(--copper);
  padding: .65rem 1rem;
  border: 1px solid #a67c5255;
  background: #1a0f0fb8;
}

.scroll-cue {
  position: absolute;
  bottom: 3vh;
  font-size: 3rem;
  color: var(--amber);
  transform: rotate(-3deg);
  text-shadow: 0 0 12px #d4a44a80;
  animation: cueBounce 1.7s ease-in-out infinite;
}

.district {
  min-height: 100vh;
  padding: clamp(5rem, 9vw, 9rem) 5vw;
  background-image: var(--noise), linear-gradient(180deg, #2a1510e6, #1a0f0ff2);
  overflow: hidden;
}

.district::before {
  content: "";
  position: absolute;
  inset: 2rem;
  pointer-events: none;
  border: 1px solid #a67c5224;
  clip-path: polygon(2% 0,100% 0,98% 100%,0 100%);
}

.systems { background-image: var(--noise), linear-gradient(180deg, #4a0e1ade, #2a1510 56%, #1a0f0f); }

.section-title-block { max-width: 920px; margin-bottom: 3rem; }
.section-title-block.right { margin-left: auto; text-align: right; }

.eyebrow,
.serial {
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: .08em;
  color: var(--copper);
  font-size: .8rem;
}

h1 {
  margin: 0;
  font-family: "Cormorant Garamond", Garamond, serif;
  font-size: clamp(3rem, 7vw, 6.5rem);
  font-weight: 700;
  font-style: italic;
  letter-spacing: .04em;
  line-height: .88;
  color: var(--cream);
}

.honeycomb { display: grid; gap: 6px; justify-content: center; }
.hex-row { display: flex; gap: 6px; justify-content: center; transition: transform .4s ease; }
.hex-row:nth-child(even) { transform: translateX(140px); }

.hex-shell {
  width: 286px;
  height: 248px;
  padding: 1px;
  clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background: var(--copper);
  opacity: 0;
  transform: translateY(20px) scale(.7);
  transition: opacity .76s cubic-bezier(.25,.46,.45,.94), transform .76s cubic-bezier(.25,.46,.45,.94), filter .3s ease;
}

.hex-shell.in-view { opacity: 1; transform: translateY(0) scale(1); }
.hex-shell.large { width: 340px; height: 294px; }

.hex-cell {
  width: 100%;
  height: 100%;
  clip-path: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2.2rem 2.15rem;
  background-color: #4a0e1ad9;
  background-image: var(--noise), radial-gradient(circle at 50% 10%, #d4a44a1c, transparent 42%);
}

.hex-cell.light {
  background-color: #e8dcc8;
  color: var(--charcoal);
}

.hex-cell svg {
  width: 74px;
  height: 74px;
  fill: none;
  stroke: var(--copper);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#stencilRough) drop-shadow(0 0 4px #d4a44a40);
  margin-bottom: .7rem;
}

.hex-cell h2 {
  margin: 0 0 .45rem;
  font-family: "Space Grotesk", Inter, sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: clamp(1.1rem, 2.5vw, 1.45rem);
  color: currentColor;
}

.hex-cell p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.72;
  color: var(--gray);
}

.hex-cell:not(.light) p { color: var(--parchment); }

.hex-shell:hover,
.hex-shell.is-hot {
  filter: drop-shadow(0 0 0 #d4a44a) drop-shadow(0 0 12px #d4a44a80);
  z-index: 3;
}

.alley {
  min-height: 115px;
  display: grid;
  place-items: center;
  background-color: var(--asphalt);
  background-image: var(--noise), linear-gradient(90deg, #1a0f0f, #2a1510 50%, #1a0f0f);
  border-top: 1px solid #a67c5233;
  border-bottom: 1px solid #a67c5233;
}

.alley::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 74px, #6b5e5218 75px 76px);
}

.alley-nav { display: flex; gap: clamp(1rem, 4vw, 4rem); position: relative; z-index: 1; }
.alley-nav a {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--parchment);
  padding: .65rem 1rem;
  transform: rotate(-1deg);
  transition: color .3s ease, box-shadow .3s ease, background .3s ease;
}
.alley-nav a:hover { color: var(--amber); background: #4a0e1a99; box-shadow: 0 0 0 2px var(--amber), 0 0 12px #d4a44a40; }

.drip-divider {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 150px;
  stroke: #c8323233;
  stroke-width: 9;
  fill: none;
  stroke-linecap: round;
  pointer-events: none;
}

.drip-divider path { stroke-dasharray: 1300; stroke-dashoffset: 1300; }
.drip-divider.draw path { animation: dripDraw 1.5s ease-in forwards; }

.tag-wall {
  min-height: 100vh;
  padding: clamp(5rem, 9vw, 9rem) 5vw;
  background-color: var(--umber);
  background-image: var(--noise), radial-gradient(circle at 20% 40%, #c832321c, transparent 30%), linear-gradient(135deg, #2a1510, #1a0f0f);
  overflow: hidden;
}

.tagscape {
  position: relative;
  min-height: 52vh;
  border: 1px solid #a67c5222;
  background: #1a0f0f6b;
  overflow: hidden;
}

.tagscape span {
  position: absolute;
  font-family: "Cormorant Garamond", Garamond, serif;
  font-weight: 700;
  font-style: italic;
  color: var(--cream);
  text-shadow: 0 0 8px #e8dcc840;
  opacity: .86;
  filter: url(#stencilRough);
  transition: color .3s ease, text-shadow .3s ease;
}
.tagscape span:hover { color: var(--amber); text-shadow: 0 0 18px #d4a44a80; }
.tagscape span:nth-child(1) { left: 5%; top: 10%; font-size: clamp(3rem, 9vw, 8rem); transform: rotate(-3deg); }
.tagscape span:nth-child(2) { left: 50%; top: 11%; font-size: clamp(2rem, 6vw, 5rem); transform: rotate(2deg); color: var(--copper); }
.tagscape span:nth-child(3) { left: 17%; top: 45%; font-size: clamp(2.4rem, 7vw, 6rem); transform: rotate(1deg); }
.tagscape span:nth-child(4) { left: 57%; top: 48%; font-size: clamp(1.8rem, 5vw, 4.6rem); transform: rotate(-2deg); }
.tagscape span:nth-child(5) { left: 7%; top: 75%; font-size: clamp(1.5rem, 4vw, 3.5rem); transform: rotate(2deg); color: #c4b8a4; }
.tagscape span:nth-child(6) { left: 73%; top: 78%; font-size: clamp(2rem, 5vw, 4rem); transform: rotate(-1deg); color: var(--red); opacity: .5; }
.tagscape span:nth-child(7) { left: 33%; top: 27%; font-size: clamp(1.2rem, 3.4vw, 2.8rem); transform: rotate(3deg); }
.tagscape span:nth-child(8) { left: 77%; top: 28%; font-size: clamp(2rem, 5vw, 4.5rem); transform: rotate(-3deg); }
.tagscape span:nth-child(9) { left: 43%; top: 72%; font-size: clamp(2.2rem, 5.5vw, 5rem); transform: rotate(1deg); color: var(--amber); opacity: .58; }
.tagscape span:nth-child(10) { left: 2%; top: 33%; font-size: clamp(1.5rem, 3.5vw, 3rem); transform: rotate(-2deg); color: var(--copper); }
.tagscape span:nth-child(11) { left: 64%; top: 2%; font-size: clamp(1.1rem, 3vw, 2.4rem); transform: rotate(1deg); }
.tagscape span:nth-child(12) { left: 67%; top: 66%; font-size: clamp(1.4rem, 4vw, 3.2rem); transform: rotate(2deg); }

.foundation {
  min-height: 70vh;
  display: grid;
  align-items: end;
  background-color: var(--umber);
  background-image: var(--noise), linear-gradient(180deg, #1a0f0f, #2a1510 35%, #2a1510);
  overflow: hidden;
}

.skyline { position: absolute; inset: auto 0 0; height: 55%; opacity: .68; }
.skyline svg { width: 100%; height: 100%; fill: var(--asphalt); }
.windows rect { fill: var(--amber); opacity: .08; transition: opacity .4s ease; }
.foundation:hover .windows rect { opacity: .75; animation: windowFlicker 1.8s ease-in-out infinite alternate; }

.footer-content {
  position: relative;
  z-index: 1;
  padding: 5vw;
  border-top: 12px solid #1a0f0f;
  background: #2a1510bb;
}
.footer-content p { max-width: 720px; line-height: 1.72; color: var(--parchment); }
.bolt-row { display: flex; gap: 1rem; margin: 1.5rem 0; }
.bolt-row a {
  width: 46px;
  height: 40px;
  clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background: linear-gradient(135deg, #a67c52, #4a0e1a);
  position: relative;
  transition: box-shadow .3s ease, transform .3s ease;
}
.bolt-row a::after { content: ""; position: absolute; inset: 12px; clip-path: inherit; border: 1px solid #e8dcc8aa; background: #1a0f0f; }
.bolt-row a:hover { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--amber), 0 0 12px #d4a44a40; }

.blueprint-sidebar {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: 58px;
  height: 100vh;
  background: #4a0e1ae6;
  background-image: var(--noise), linear-gradient(#e8dcc833 0 0);
  z-index: 10;
  border-left: 1px solid #e8dcc833;
}
.blueprint-sidebar::before { content: ""; position: absolute; top: 13%; bottom: 13%; left: 50%; border-left: 1px solid #e8dcc866; }
.bp-node {
  position: absolute;
  left: 50%;
  width: 24px;
  height: 24px;
  transform: translateX(-50%);
  clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background: #1a0f0f;
  border: 1px solid var(--copper);
  transition: box-shadow .3s ease, background .3s ease;
}
.bp-node:nth-child(1) { top: 13%; }
.bp-node:nth-child(2) { top: 31%; }
.bp-node:nth-child(3) { top: 49%; }
.bp-node:nth-child(4) { top: 67%; }
.bp-node:nth-child(5) { top: 85%; }
.bp-node.active { background: radial-gradient(circle, var(--amber) 0 22%, #4a0e1a 42%, #1a0f0f 72%); box-shadow: 0 0 0 2px var(--amber), 0 0 12px #d4a44a40; animation: nodePulse 1.5s ease-in-out infinite; }

@media (min-width: 1200px) { .blueprint-sidebar { display: block; } body { padding-right: 58px; } }

@media (max-width: 860px) {
  .hex-row, .hex-row:nth-child(even) { flex-direction: column; align-items: center; transform: none; }
  .hex-shell, .hex-shell.large { width: min(286px, 86vw); height: min(248px, 74vw); }
  .section-title-block.right { text-align: left; }
  .alley-nav { flex-wrap: wrap; justify-content: center; padding: 1rem; }
  .hero-tag { width: min(90vw, 520px); text-align: center; }
}

@keyframes sprayLetter { to { clip-path: inset(0 0 0 0); } }
@keyframes cueBounce { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(10px) rotate(-3deg); } }
@keyframes hexPulse { 0%,100% { opacity: .32; transform: scale(.96) rotate(0deg); } 50% { opacity: .75; transform: scale(1.04) rotate(2deg); } }
@keyframes gridWarm { from { opacity: 0; transform: scale(1.08); } to { opacity: .35; transform: scale(1); } }
@keyframes dripDraw { to { stroke-dashoffset: 0; } }
@keyframes nodePulse { 50% { box-shadow: 0 0 0 4px #d4a44a80, 0 0 22px #d4a44a66; } }
@keyframes windowFlicker { 0% { opacity: .2; } 40% { opacity: .75; } 100% { opacity: .45; } }