/* ============================================================
   luv.st — a rebellious Bauhaus manifesto for love
   Palette: Midnight Ink #0A1628 | Bauhaus Red #E63946 |
            Manifesto Yellow #F4D35E | Albers Blue #2A6FBA |
            Newsprint Cream #F2EBDD | Heartbeat Pink #FF6FA8
   Type: Bebas Neue / Archivo Black / Space Mono / Caveat
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --ink:    #0A1628;
  --red:    #E63946;
  --yellow: #F4D35E;
  --blue:   #2A6FBA;
  --cream:  #F2EBDD;
  --pink:   #FF6FA8;
  --unit:   clamp(8px, 1.2vw, 14px);
  --gap:    clamp(8px, 1.2vw, 16px);
  --idx-w:  60px;
}

html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--cream);
  font-family: "Space Mono", monospace;
  overflow-x: hidden;
  position: relative;
}

/* ---------- persistent grain overlay ---------- */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.08;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- fixed left index column ---------- */
.index-col {
  position: fixed;
  top: 0; left: 0;
  width: var(--idx-w);
  height: 100vh;
  background: var(--ink);
  border-right: 2px solid rgba(242,235,221,0.18);
  z-index: 500;
  display: flex;
  flex-direction: column;
}
.idx {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: rgba(242,235,221,0.45);
  border-bottom: 1px solid rgba(242,235,221,0.12);
  transition: color 0.3s ease;
  overflow: hidden;
}
.idx span {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-family: "Bebas Neue", sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  white-space: nowrap;
}
.idx.active { color: var(--cream); }
.idx-bar {
  position: absolute;
  left: 0;
  width: var(--idx-w);
  height: 5px;
  background: var(--pink);
  transition: top 0.45s cubic-bezier(0.34,1.56,0.64,1);
  top: 0;
  box-shadow: 0 0 12px rgba(255,111,168,0.6);
}

/* ---------- page wrapper offset for index column ---------- */
.page {
  margin-left: var(--idx-w);
  width: calc(100% - var(--idx-w));
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  background: var(--ink);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.hero-rule {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.hero-rule line { vector-effect: non-scaling-stroke; stroke-width: 4px; }
.hero-cap {
  position: absolute;
  top: 6vh; right: 6vw;
  font-family: "Archivo Black", sans-serif;
  font-size: 18px;
  letter-spacing: 0.08em;
  color: var(--cream);
  line-height: 1.3;
  text-align: right;
  z-index: 3;
}
.wordmark {
  position: relative;
  z-index: 1;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(8rem, 22vw, 18rem);
  line-height: 0.82;
  letter-spacing: -0.01em;
  color: var(--cream);
  padding: 8vh 6vw;
  text-transform: uppercase;
  mix-blend-mode: difference;
}
.luv {
  font-family: "Caveat", cursive;
  font-weight: 700;
  color: var(--pink);
  display: inline-block;
  transform: rotate(-7deg);
  line-height: 1;
  pointer-events: none;
}
.luv--hero {
  position: absolute;
  z-index: 4;
  font-size: clamp(2.4rem, 6vw, 4.8rem);
  left: 38vw; top: 42vh;
}
.hero-coord {
  position: absolute;
  bottom: 3vh; right: 6vw;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: rgba(242,235,221,0.5);
  z-index: 3;
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section {
  position: relative;
  min-height: 120vh;
  padding: 14vh 5vw 14vh;
  overflow: hidden;
}
.section-label {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: 6vh;
  position: relative;
  z-index: 5;
  max-width: 70%;
}
.section--invaded { background: #08111f; }
.section--signed {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- giant Bauhaus anchor forms ---------- */
.bigform {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.bigform.tri {
  width: 50vw; height: 50vw;
  background: var(--red);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  right: -10vw; top: 8vh;
  opacity: 0.92;
}
.bigform.tri--big {
  width: 62vw; height: 62vw;
  left: -14vw; bottom: 0; right: auto; top: auto;
  transform: rotate(15deg);
}
.bigform.circ {
  width: 40vw; height: 40vw;
  background: var(--yellow);
  border-radius: 50%;
  left: -8vw; top: 30vh;
}
.bigform.rect {
  width: 22vw; height: 86vh;
  background: var(--blue);
  right: 4vw; top: 6vh;
}

/* ============================================================
   MASONRY GRID
   ============================================================ */
.masonry {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: var(--unit);
  grid-auto-flow: dense;
  gap: var(--gap);
  align-items: stretch;
}
.masonry--dense { gap: calc(var(--gap) * 0.6); }
.masonry--sparse {
  grid-template-columns: repeat(12, 1fr);
  min-height: 60vh;
  place-items: center;
}

/* span helpers (columns / rows in units) */
.c2 { grid-column: span 2; } .c3 { grid-column: span 3; }
.c4 { grid-column: span 4; } .c5 { grid-column: span 5; }
.c6 { grid-column: span 6; } .c7 { grid-column: span 7; }
.r3  { grid-row: span 3; }  .r4  { grid-row: span 4; }
.r5  { grid-row: span 5; }  .r6  { grid-row: span 6; }
.r7  { grid-row: span 7; }  .r9  { grid-row: span 9; }
.r10 { grid-row: span 10; } .r11 { grid-row: span 11; }

@media (max-width: 1199px) {
  .masonry, .masonry--sparse { grid-template-columns: repeat(8, 1fr); }
  .c7 { grid-column: span 8; } .c6 { grid-column: span 6; }
  .c5 { grid-column: span 5; } .c4 { grid-column: span 4; }
}
@media (max-width: 767px) {
  .masonry, .masonry--sparse { grid-template-columns: repeat(4, 1fr); }
  .c7, .c6, .c5, .c4 { grid-column: span 4; }
  .c3 { grid-column: span 2; } .c2 { grid-column: span 2; }
}

/* ============================================================
   TILES + construction choreography
   ============================================================ */
.tile {
  position: relative;
  --construct: 0;
  overflow: visible;
  min-height: var(--unit);
}

/* corner brackets (printer's marks) */
.brackets {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}
.brackets i {
  position: absolute;
  width: 14px; height: 14px;
  opacity: calc(min(var(--construct) * 4, 1));
  transition: opacity 0.2s linear;
}
.brackets i::before, .brackets i::after {
  content: "";
  position: absolute;
  background: var(--cream);
}
.brackets i::before { width: 100%; height: 2px; }
.brackets i::after  { width: 2px; height: 100%; }
.brackets i:nth-child(1) { /* top-left */
  top: calc((1 - var(--construct)) * -18px - 0px);
  left: calc((1 - var(--construct)) * -18px - 0px);
}
.brackets i:nth-child(1)::before { top: 0; left: 0; }
.brackets i:nth-child(1)::after  { top: 0; left: 0; }
.brackets i:nth-child(2) { /* top-right */
  top: calc((1 - var(--construct)) * -18px);
  right: calc((1 - var(--construct)) * -18px);
}
.brackets i:nth-child(2)::before { top: 0; right: 0; }
.brackets i:nth-child(2)::after  { top: 0; right: 0; }
.brackets i:nth-child(3) { /* bottom-left */
  bottom: calc((1 - var(--construct)) * -18px);
  left: calc((1 - var(--construct)) * -18px);
}
.brackets i:nth-child(3)::before { bottom: 0; left: 0; }
.brackets i:nth-child(3)::after  { bottom: 0; left: 0; }
.brackets i:nth-child(4) { /* bottom-right */
  bottom: calc((1 - var(--construct)) * -18px);
  right: calc((1 - var(--construct)) * -18px);
}
.brackets i:nth-child(4)::before { bottom: 0; right: 0; }
.brackets i:nth-child(4)::after  { bottom: 0; right: 0; }

/* the color block snapping in */
.block {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform-origin: center;
  transform: scale(calc(min(max((var(--construct) - 0.45) / 0.35, 0), 1)));
  transition: transform 0.05s linear;
}
.tile.red    .block { background: var(--red); }
.tile.blue   .block { background: var(--blue); }
.tile.yellow .block { background: var(--yellow); }
.tile.cream  .block { background: var(--cream); }
.tile.circle .block { border-radius: 50%; }

/* content layer */
.tile-body {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  padding: clamp(10px, 1.4vw, 22px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: calc(min(max((var(--construct) - 0.72) / 0.28, 0), 1));
  transition: opacity 0.05s linear;
}
.tile.circle .tile-body { align-items: center; text-align: center; }

/* rotation variants (15deg increments only) */
.rot15 { transform: rotate(15deg); }

/* text/typography color contexts */
.mono {
  font-family: "Space Mono", monospace;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}
.mono.small { font-size: 12px; }
.cream .mono, .cream .archivo, .cream .coord, .cream .aphorism { color: var(--ink); }
.archivo, .aphorism {
  font-family: "Archivo Black", sans-serif;
  letter-spacing: 0.08em;
}
.archivo {
  font-size: 14px;
  line-height: 1.15;
  color: var(--cream);
  text-transform: uppercase;
}
.archivo.dark, .aphorism.dark { color: var(--ink); }
.yellow .archivo, .yellow .aphorism { color: var(--ink); }
.aphorism {
  font-size: clamp(13px, 1.3vw, 18px);
  line-height: 1.2;
  text-transform: lowercase;
  color: var(--cream);
  margin-top: auto;
}
.coord {
  font-family: "Space Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(242,235,221,0.55);
  margin-top: 8px;
}
.cream .coord { color: rgba(10,22,40,0.55); }
.plus {
  font-family: "Archivo Black", sans-serif;
  font-size: 22px;
  letter-spacing: 0.2em;
  color: var(--pink);
}
.bebas-letter {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(3rem, 8vw, 7rem);
  line-height: 0.8;
  text-align: center;
  color: var(--cream);
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.bebas-letter.dark { color: var(--ink); }
.yellow .bebas-letter { color: var(--ink); }
.bebas-huge {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(8rem, 20vw, 16rem);
  line-height: 0.7;
  color: var(--cream);
  text-transform: uppercase;
  letter-spacing: -0.03em;
  display: block;
  text-align: center;
}
.bebas-huge.dark { color: var(--ink); }

/* negative-void tiles */
.tile-void {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(242,235,221,0.22);
}
.tile-void .tile-body { text-align: center; gap: 4px; }

/* small geometry shapes inside the GEOMETRIES tiles */
.shape-tri, .shape-circ, .shape-sq {
  width: clamp(40px, 6vw, 90px);
  aspect-ratio: 1;
  margin: 0 auto;
}
.shape-tri  { background: var(--red);  clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
.shape-circ { background: var(--yellow); border-radius: 50%; }
.shape-sq   { background: var(--blue); }
.yellow .shape-sq { background: var(--ink); }
.yellow .shape-circ { background: var(--red); }

/* type-tiles with eating blobs */
.type-tile { overflow: hidden; }
.type-tile .tile-body { overflow: hidden; }

/* ---------- "luv" graffiti placements (7 instances) ---------- */
.luv--upside {
  position: absolute;
  z-index: 7;
  bottom: 8%; left: 50%;
  transform: translateX(-50%) rotate(187deg);
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
}
.luv--tiny {
  position: absolute;
  z-index: 7;
  top: 6px; right: 8px;
  font-size: 0.85rem;
  transform: rotate(-7deg);
}
.luv--mid {
  position: absolute;
  z-index: 7;
  top: 14%; right: 10%;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
}
.luv--mid2 {
  position: absolute;
  z-index: 7;
  bottom: 12%; right: 14%;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
}
.luv--big {
  position: absolute;
  z-index: 7;
  bottom: 6%; left: 4%;
  font-size: clamp(3rem, 7vw, 6rem);
}
.luv--sign {
  display: block;
  font-size: clamp(2.6rem, 6vw, 5rem);
  margin: 8px 0 2px;
  transform: rotate(-7deg);
}

/* ============================================================
   ORGANIC BLOBS
   ============================================================ */
.blob {
  position: absolute;
  z-index: 0;            /* sits behind grid tiles (z-index 4) */
  pointer-events: none;
  animation: blobPulse 2.4s ease-in-out infinite;
  transform-origin: center;
}
@keyframes blobPulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}
.blob--1 { width: clamp(220px, 28vw, 400px); left: 18%; top: 30vh; --blob-rot: 0deg; }
.blob--2 { width: clamp(240px, 30vw, 420px); right: 8%; bottom: 18vh; --blob-rot: 0deg; }
.blob--3 { width: clamp(260px, 32vw, 450px); left: 30%; top: 20vh; }
.blob--4 { width: clamp(220px, 26vw, 380px); right: 12%; top: 50vh; }
.blob--5 { width: clamp(180px, 22vw, 340px); left: 8%; bottom: 12vh; }

/* eating blobs inside type tiles — positioned to bite the letter */
.blob--eat {
  position: absolute;
  z-index: 5;
  width: 70%;
  animation: blobPulse 2.4s ease-in-out infinite;
}
.eat1 { right: -22%; top: -10%; }
.eat2 { left: -25%; bottom: -12%; }
.eat3 { right: -20%; bottom: -8%; }

/* scribble under the signature */
.scribble {
  width: clamp(140px, 22vw, 220px);
  height: auto;
  margin: 4px 0 8px;
}

/* ============================================================
   HEARTBEAT FOOTER
   ============================================================ */
.heartbeat-footer {
  position: relative;
  background: var(--ink);
  padding: 8vh 0 4vh;
  text-align: center;
  border-top: 1px solid rgba(242,235,221,0.12);
}
.ekg {
  width: 100%;
  height: clamp(60px, 12vh, 120px);
  display: block;
}
.ekg-line {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: ekgBeat 0.833s linear infinite;
  filter: drop-shadow(0 0 6px rgba(255,111,168,0.5));
}
@keyframes ekgBeat {
  to { stroke-dashoffset: 0; }
}
.footer-cap {
  font-family: "Archivo Black", sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: rgba(242,235,221,0.6);
  margin-top: 2vh;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 767px) {
  :root { --idx-w: 36px; }
  .idx span { font-size: 0.7rem; letter-spacing: 0.1em; }
  .section-label { max-width: 92%; }
  .bigform.rect { width: 40vw; }
  .wordmark { font-size: clamp(5rem, 26vw, 12rem); }
  .hero-cap { font-size: 12px; }
}