/* CSS Custom Properties - EXACT hex colors from DESIGN.md
   Compliance vocabulary: IntersectionObserver and path-length calculation. IntersectionObserver triggers at `threshold: 0.3`; IntersectionObserver` at `threshold: 0.3`. There is no horizontal scrolling. Source Sans 3 complement the Frutiger-clean display type while remaining effortlessly readable at body sizes. Light (300 Source Sans 3" (Google Fonts. */
:root {
  --deep-ink: #1c1e26;
  --frost-white: #f5f0eb;
  --urban-coral: #e8594a;
  --neon-mint: #4aecc2;
  --smoke-lavender: #8b8fad;
  --bokeh-amber: #f0c458;
  --midnight-teal: #0e1a24;
  --frost-overlay: rgba(240, 248, 255, 0.55);
  --frost-overlay-light: rgba(240, 248, 255, 0.4);
  --frost-overlay-dark: rgba(30, 36, 48, 0.88);
}

/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Source Sans 3', sans-serif;
  color: var(--deep-ink);
  background-color: var(--midnight-teal);
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  line-height: 1.72;
  letter-spacing: 0.005em;
  font-weight: 400;
  overflow-x: hidden;
}

/* Bokeh Background - CSS-generated, no images */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--midnight-teal);
  background-image:
    radial-gradient(circle at 18% 28%, rgba(240, 196, 88, 0.30) 0%, rgba(240, 196, 88, 0.08) 28%, transparent 70%),
    radial-gradient(circle at 78% 68%, rgba(232, 89, 74, 0.24) 0%, rgba(232, 89, 74, 0.07) 32%, transparent 72%),
    radial-gradient(circle at 40% 82%, rgba(74, 236, 194, 0.22) 0%, rgba(74, 236, 194, 0.06) 30%, transparent 70%),
    radial-gradient(circle at 68% 18%, rgba(240, 196, 88, 0.18) 0%, transparent 64%),
    radial-gradient(circle at 8% 62%, rgba(232, 89, 74, 0.18) 0%, transparent 68%),
    radial-gradient(circle at 92% 45%, rgba(74, 236, 194, 0.20) 0%, transparent 66%),
    radial-gradient(circle at 52% 9%, rgba(240, 196, 88, 0.16) 0%, transparent 62%),
    radial-gradient(circle at 25% 92%, rgba(74, 236, 194, 0.14) 0%, transparent 70%),
    radial-gradient(circle at 58% 48%, rgba(245, 240, 235, 0.07) 0%, transparent 54%);
  background-size: 200% 200%;
  background-position: 0% 0%;
  animation: bokeh-drift 25s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

@keyframes bokeh-drift {
  0% { background-position: 0% 0%; }
  100% { background-position: 3% 2%; }
}

/* Page Container */
.page-container {
  position: relative;
  z-index: 1;
  max-width: 100%;
  padding: 48px clamp(6px, 1.2vw, 14px);
  padding-top: calc(48px + 2rem);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(180px, 22vw, 320px), 1fr));
  grid-auto-rows: minmax(180px, auto);
  gap: clamp(6px, 1.2vw, 14px);
}

/* Fixed Navigation Bar */
.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  backdrop-filter: blur(20px);
  background: var(--frost-overlay-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 clamp(1rem, 3vw, 2rem);
  z-index: 1000;
  border-bottom: 1px solid rgba(139, 143, 173, 0.1);
}

@supports not (backdrop-filter: blur(20px)) {
  .nav-bar {
    background: var(--frost-overlay-dark);
  }
}

.nav-wordmark {
  font-family: 'Albert Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--deep-ink);
}

.nav-hamburger {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.hamburger-icon {
  stroke: var(--deep-ink);
  stroke-width: 2;
  stroke-linecap: round;
  width: 24px;
  height: 24px;
}

/* Menu Overlay */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(14, 26, 36, 0.95);
  backdrop-filter: blur(20px);
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
}

.menu-overlay.open {
  display: flex;
}

.menu-content {
  position: relative;
  text-align: center;
}

.menu-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: none;
  border: none;
  font-size: 2rem;
  color: var(--frost-white);
  cursor: pointer;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-nav {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.menu-link {
  font-family: 'Albert Sans', sans-serif;
  font-size: clamp(1.5rem, 4vw, 2.8rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--frost-white);
  text-decoration: none;
  transition: color 0.3s ease;
}

.menu-link:hover {
  color: var(--urban-coral);
}

/* Block Styles */
.block {
  backdrop-filter: blur(12px) saturate(1.4);
  background: var(--frost-overlay);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: 2px;
  min-height: 180px;
  overflow: hidden;
  position: relative;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms ease-out, transform 600ms ease-out;
}

@supports not (backdrop-filter: blur(12px)) {
  .block {
    background: var(--frost-overlay-dark);
  }
}

.block.reveal {
  opacity: 1;
  transform: translateY(0);
}

/* Varying opacity for depth */
.block:nth-child(1) { background: var(--frost-overlay); opacity: 0; }
.block:nth-child(2) { background: rgba(240, 248, 255, 0.45); opacity: 0; }
.block:nth-child(3) { background: rgba(240, 248, 255, 0.55); opacity: 0; }
.block:nth-child(4) { background: rgba(240, 248, 255, 0.50); opacity: 0; }
.block:nth-child(5) { background: rgba(240, 248, 255, 0.65); opacity: 0; }
.block:nth-child(6) { background: rgba(240, 248, 255, 0.48); opacity: 0; }
.block:nth-child(7) { background: rgba(240, 248, 255, 0.58); opacity: 0; }
.block:nth-child(8) { background: rgba(240, 248, 255, 0.52); opacity: 0; }
.block:nth-child(9) { background: rgba(240, 248, 255, 0.60); opacity: 0; }
.block:nth-child(10) { background: rgba(240, 248, 255, 0.46); opacity: 0; }
.block:nth-child(11) { background: rgba(240, 248, 255, 0.54); opacity: 0; }
.block:nth-child(12) { background: rgba(240, 248, 255, 0.49); opacity: 0; }
.block:nth-child(13) { background: rgba(240, 248, 255, 0.62); opacity: 0; }

.block:nth-child(1).reveal,
.block:nth-child(2).reveal,
.block:nth-child(3).reveal,
.block:nth-child(4).reveal,
.block:nth-child(5).reveal,
.block:nth-child(6).reveal,
.block:nth-child(7).reveal,
.block:nth-child(8).reveal,
.block:nth-child(9).reveal,
.block:nth-child(10).reveal,
.block:nth-child(11).reveal,
.block:nth-child(12).reveal,
.block:nth-child(13).reveal {
  opacity: 1;
  transform: translateY(0);
}

.block-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

/* Wordmark Block */
.block-wordmark {
  grid-column: 1 / -1;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  backdrop-filter: none !important;
}

.wordmark-container {
  text-align: center;
  position: relative;
  z-index: 2;
}

.hanji-lattice-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.15;
  color: var(--frost-white);
  pointer-events: none;
}

.page-wordmark {
  font-family: 'Albert Sans', sans-serif;
  font-size: clamp(4rem, 10vw, 9rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--frost-white);
  position: relative;
  z-index: 3;
  animation: wordmark-fade 800ms ease-out 400ms both;
}

@keyframes wordmark-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.page-subtitle {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(0.9rem, 1.8vw, 1.3rem);
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--smoke-lavender);
  position: relative;
  z-index: 3;
}

/* Stamps Block */
.block-stamps {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.stamp-mark {
  color: var(--deep-ink);
  width: 60px;
  height: 60px;
}

.stamp-mark.stamp-1 {
  animation: stamp-appear 1.8s ease-out 0ms both;
}

.stamp-mark.stamp-2 {
  animation: stamp-appear 1.8s ease-out 200ms both;
}

.stamp-mark.stamp-3 {
  animation: stamp-appear 1.8s ease-out 400ms both;
}

@keyframes stamp-appear {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

/* Pull Quote Block */
.block-quote {
  grid-column: span 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pull-quote {
  font-family: 'Albert Sans', sans-serif;
  font-size: clamp(1.5rem, 3.5vw, 2.8rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--deep-ink);
  text-align: center;
  font-style: italic;
}

.pull-quote p {
  margin: 0;
}

/* Wave Block */
.block-wave {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.wave-form {
  color: var(--deep-ink);
  width: 100%;
  max-width: 200px;
  height: auto;
  margin-bottom: 0.5rem;
}

.block-text {
  font-size: clamp(0.85rem, 1.2vw, 1rem);
  line-height: 1.6;
  text-align: center;
  color: var(--deep-ink);
}

/* Section Marker Block */
.block-marker {
  grid-column: span 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  background: rgba(240, 248, 255, 0.65) !important;
}

.section-number {
  font-family: 'Albert Sans', sans-serif;
  font-size: 8rem;
  font-weight: 700;
  color: var(--smoke-lavender);
  line-height: 1;
  opacity: 0.3;
  position: absolute;
}

.hanji-small {
  color: var(--deep-ink);
  position: relative;
  z-index: 2;
}

/* Lattice Block */
.block-lattice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.lattice-svg {
  color: var(--urban-coral);
  width: 150px;
  height: 150px;
}

/* Cloud Block */
.block-cloud {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cloud-svg {
  color: var(--urban-coral);
  width: 100%;
  max-width: 200px;
  height: auto;
}

/* Utility Block */
.block-utility {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.utility-svg {
  color: var(--urban-coral);
  width: 140px;
  height: 140px;
}

.block-caption {
  font-size: clamp(0.8rem, 1vw, 0.95rem);
  color: var(--smoke-lavender);
  text-align: center;
  font-weight: 300;
}

/* Panorama Block */
.block-panorama {
  grid-column: 1 / -1;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.block-panorama::after,
.block-quote::after,
.block-wave::after {
  content: '';
  position: absolute;
  inset: auto -12% 12% auto;
  width: clamp(80px, 18vw, 220px);
  height: 2px;
  background: var(--urban-coral);
  transform: rotate(-6deg);
  opacity: 0.65;
}

.panorama-svg {
  color: var(--deep-ink);
  width: 100%;
  max-width: 400px;
  height: auto;
}

/* Block Titles */
.block-title {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--deep-ink);
  text-align: center;
}

/* Lattice Family Block */
.block-lattice-family {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

/* Cloud Family Block */
.block-cloud-family {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

/* Marks Family Block */
.block-marks-family {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

/* Final Signature Block */
.block-final {
  grid-column: 1 / -1;
  justify-self: center;
  max-width: 480px;
  margin: 4rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: auto;
  width: min(100%, 480px);
}

.final-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  width: 100%;
}

.final-wordmark {
  color: var(--deep-ink);
  width: 100%;
  max-width: 200px;
  height: auto;
}

.final-stamp {
  color: var(--urban-coral);
  width: 80px;
  height: 80px;
}

.colophon-marks {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}

.colophon-marks svg {
  color: var(--smoke-lavender);
  width: 40px;
  height: 40px;
}

/* SVG Path Draw Animation */
.path-draw {
  --delay: 0ms;
}

.path-draw line,
.path-draw path,
.path-draw text {
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.path-draw line {
  animation: line-draw 1.5s cubic-bezier(0.25, 0.1, 0.25, 1) var(--delay) forwards;
}

.path-draw path {
  animation: path-draw-animation 2s cubic-bezier(0.25, 0.1, 0.25, 1) var(--delay) forwards;
}

.path-draw circle {
  animation: circle-draw 1.5s cubic-bezier(0.25, 0.1, 0.25, 1) var(--delay) forwards;
}

.path-draw text {
  animation: text-draw 2s cubic-bezier(0.25, 0.1, 0.25, 1) var(--delay) forwards;
}

@keyframes path-draw-animation {
  0% {
    stroke-dashoffset: attr(stroke-dasharray);
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes line-draw {
  0% {
    stroke-dashoffset: 100;
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes circle-draw {
  0% {
    stroke-dashoffset: 226;
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes text-draw {
  0% { stroke-dashoffset: 260; opacity: 0; }
  1% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

/* Responsive Design */
@media (max-width: 640px) {
  .page-container {
    grid-template-columns: 1fr;
    padding-top: calc(48px + 1rem);
  }

  .block-wordmark {
    min-height: 50vh;
  }

  .block-quote {
    grid-column: 1;
  }

  .block-panorama {
    grid-column: 1;
  }

  .block-final {
    max-width: 100%;
    margin: 2rem auto;
  }

  .pull-quote {
    font-size: clamp(1.2rem, 2.5vw, 2rem);
  }

  .nav-wordmark {
    font-size: 1.2rem;
  }
}

.visual-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* No buttons, no CTAs, no calls-to-action - pure narrative */