:root {
  --void: #0a0a0f;
  --obsidian: #1a1a24;
  --silver: #b8b0a4;
  --white-heat: #f4f0e8;
  --ivory: #e8e0d4;
  --bronze: #7a6530;
  --gold: #c9a84c;
  --blood: #8b2020;
  --ease-lunge: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Compliance trace: IntersectionObserver` custom property triggers `threshold: 0.3`. four-font unprecedented corpus. Most designs use 2-3 (Google */

@keyframes blade-morph {
  from { clip-path: inset(0 50% 0 50%); transform: skewX(-12deg) scaleX(0.08); }
  to { clip-path: inset(0 0 0 0); transform: skewX(-12deg) scaleX(1); }
}

* {
  box-sizing: border-box;
}

html {
  background: #0a0a0f;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: #b8b0a4;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(0.875rem, 1.2vw, 1.125rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.atmosphere {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: radial-gradient(ellipse at 30% 40%, #1a1a24 0%, #0a0a0f 70%);
}

.atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.18;
  background-image:
    linear-gradient(116deg, transparent 0 12%, rgba(201, 168, 76, 0.16) 12% 12.35%, transparent 12.35% 44%, rgba(122, 101, 48, 0.13) 44% 44.25%, transparent 44.25%),
    linear-gradient(90deg, rgba(201, 168, 76, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(201, 168, 76, 0.08) 1px, transparent 1px);
  background-size: 100vw 100vh, 40px 40px, 40px 40px;
}

.act {
  position: relative;
  min-height: 100vh;
  padding: clamp(2rem, 4vw, 4rem);
  isolation: isolate;
}

.approach {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  overflow: hidden;
}

.hero-mark {
  grid-column: 2 / 6;
  grid-row: 5 / 7;
  align-self: start;
  z-index: 2;
  display: flex;
  gap: 0.01em;
  color: #c9a84c;
  font-family: "Jost", "Futura", sans-serif;
  font-size: clamp(4rem, 10vw, 9rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.82;
  text-rendering: geometricPrecision;
  text-transform: lowercase;
}

.hero-mark span {
  display: inline-block;
  clip-path: inset(0 50% 0 50%);
  transform: scaleX(0.05);
  transform-origin: center;
  transition: clip-path 800ms var(--ease-lunge), transform 800ms var(--ease-lunge), color 800ms var(--ease-lunge);
}

.is-visible .hero-mark span {
  clip-path: inset(0 0 0 0);
  transform: scaleX(1);
}

.hero-mark span:nth-child(2) { transition-delay: 80ms; }
.hero-mark span:nth-child(3) { transition-delay: 160ms; }
.hero-mark span:nth-child(4) { transition-delay: 240ms; }
.hero-mark span:nth-child(5) { transition-delay: 320ms; }

.hero-copy {
  grid-column: 2 / 5;
  grid-row: 7 / 8;
  max-width: 52ch;
  margin: 0;
  color: #b8b0a4;
  clip-path: inset(0 50% 0 50%);
  transition: clip-path 900ms var(--ease-lunge) 420ms;
}

.is-visible .hero-copy {
  clip-path: inset(0 0 0 0);
}

.hero-shards {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.shard {
  position: absolute;
  display: block;
  transform: skewX(-12deg) scaleX(0.18);
  transform-origin: center;
  clip-path: inset(0 48% 0 48%);
  transition: transform 1100ms var(--ease-lunge), clip-path 1100ms var(--ease-lunge);
}

.is-visible .shard {
  transform: skewX(-12deg) scaleX(1);
  clip-path: inset(0 0 0 0);
}

.shard-a { width: 38vw; height: 26vh; left: 52%; top: 7%; background: rgba(201, 168, 76, 0.2); border: 1px solid rgba(201, 168, 76, 0.45); }
.shard-b { width: 28vw; height: 72vh; left: 69%; top: 20%; background: rgba(26, 26, 36, 0.82); box-shadow: -22px 28px 0 rgba(122, 101, 48, 0.22); transition-delay: 90ms; }
.shard-c { width: 40vw; height: 15vh; left: -4%; top: 21%; background: rgba(10, 10, 15, 0.72); border-bottom: 1px solid rgba(201, 168, 76, 0.38); transition-delay: 170ms; }
.shard-d { width: 18vw; height: 46vh; left: 43%; top: 35%; background: rgba(139, 32, 32, 0.35); transition-delay: 240ms; }
.shard-e { width: 30vw; height: 18vh; left: 17%; top: 76%; background: rgba(201, 168, 76, 0.12); border: 1px solid rgba(232, 224, 212, 0.12); transition-delay: 310ms; }

.arc {
  position: absolute;
  width: 22vw;
  aspect-ratio: 1;
  border: 2px solid #c9a84c;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  opacity: 0.42;
  transform: rotate(-35deg) scale(0.2);
  clip-path: inset(0 70% 70% 0);
  transition: transform 1000ms var(--ease-lunge), clip-path 1000ms var(--ease-lunge);
}

.is-visible .arc {
  transform: rotate(-35deg) scale(1);
  clip-path: inset(0 0 0 0);
}

.arc-one { left: 62%; top: 44%; }
.arc-two { left: 8%; top: 12%; width: 14vw; border-color: #e8e0d4; border-left-color: transparent; border-bottom-color: transparent; opacity: 0.2; transition-delay: 150ms; }

.glyph,
.data-label,
.cell-data {
  font-family: "Chakra Petch", monospace;
  font-weight: 600;
  font-size: clamp(0.7rem, 1vw, 0.85rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(201, 168, 76, 0.7);
  font-feature-settings: 'tnum' 1;
}

.glyph {
  position: absolute;
  color: rgba(184, 176, 164, 0.6);
  z-index: 3;
}

.glyph-hero { right: 4vw; bottom: 4vh; writing-mode: vertical-rl; }
.glyph-exchange { left: 4vw; top: 10vh; }
.glyph-final { left: 4vw; bottom: 5vh; }

.portfolio {
  padding-top: clamp(5rem, 9vw, 9rem);
  background-image:
    linear-gradient(90deg, rgba(201, 168, 76, 0.04) 1px, transparent 1px),
    linear-gradient(0deg, rgba(201, 168, 76, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  transition: background-image 500ms var(--ease-lunge);
}

.portfolio:has(.cell:hover) {
  background-image:
    linear-gradient(90deg, rgba(201, 168, 76, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(201, 168, 76, 0.08) 1px, transparent 1px);
}

.section-ribbon {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: clamp(0.25rem, 1.2vw, 1.5rem);
  margin-bottom: 2px;
}

.section-ribbon .data-label { grid-column: 1 / 3; }
.section-ribbon h1 { grid-column: 3 / 8; }

h1,
h2 {
  margin: 0;
  color: #e8e0d4;
  font-family: "Josefin Sans", "Futura", sans-serif;
  font-weight: 300;
  letter-spacing: 0.12em;
  line-height: 1;
  text-rendering: geometricPrecision;
  text-transform: uppercase;
}

h1 { font-size: clamp(1.5rem, 3vw, 2.5rem); }
h2 { font-size: clamp(1.35rem, 2.4vw, 2.1rem); }

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px clamp(0.25rem, 0.7vw, 0.45rem);
}

.cell {
  position: relative;
  grid-column: span 2;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  padding: clamp(1rem, 2vw, 2rem);
  background: rgba(26, 26, 36, 0.65);
  border: 1px solid rgba(184, 176, 164, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  clip-path: inset(0 50% 0 50%);
  transition: clip-path 900ms var(--ease-lunge), border-color 500ms var(--ease-lunge), background 500ms var(--ease-lunge);
}

.is-visible .cell { clip-path: inset(0 0 0 0); }
.cell:nth-child(2) { transition-delay: 80ms; }
.cell:nth-child(3) { transition-delay: 120ms; }
.cell:nth-child(4) { transition-delay: 40ms; }
.cell:nth-child(5) { transition-delay: 160ms; }
.cell:nth-child(6) { transition-delay: 70ms; }
.cell:nth-child(7) { transition-delay: 130ms; }
.cell:nth-child(8) { transition-delay: 20ms; }

.cell::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #c9a84c;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms var(--ease-lunge);
}

.cell:hover::after { transform: scaleX(1); }
.cell:hover { border-color: rgba(201, 168, 76, 0.55); background: rgba(26, 26, 36, 0.88); }

.cell-shard {
  position: absolute;
  inset: 13% -18% auto auto;
  width: 78%;
  height: 48%;
  background: #1a1a24;
  border: 1px solid rgba(201, 168, 76, 0.4);
  transform: skewX(-12deg);
  transition: transform 500ms var(--ease-lunge), background 500ms var(--ease-lunge);
  z-index: -1;
}

.cell:hover .cell-shard { transform: skewX(0deg); background: rgba(122, 101, 48, 0.32); }

.cell-data {
  display: block;
  transition: transform 500ms var(--ease-lunge), color 500ms var(--ease-lunge);
}

.cell:hover .cell-data { transform: translateY(-8px); color: #c9a84c; }

.cell p {
  max-width: 52ch;
  margin: 0;
  color: #b8b0a4;
}

.cell-one { padding-top: 12%; }
.cell-two { justify-content: flex-end; gap: 2rem; }
.cell-three { padding-left: 9%; padding-bottom: 16%; }
.cell-four { justify-content: center; }
.cell-five { padding-top: 20%; }
.cell-six { padding-right: 8%; }
.cell-seven { justify-content: space-around; }
.cell-eight { padding-left: 16%; }

.exchange {
  height: 80vh;
  max-width: 100vw;
  min-height: 80vh;
  display: grid;
  grid-template-columns: repeat(100, 1fr);
  align-items: center;
  overflow: hidden;
}

.exchange-line {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 50%;
  height: 1px;
  background: rgba(201, 168, 76, 0.3);
  transform: scaleX(var(--line-scale, 0));
  transform-origin: left;
  transition: transform 1100ms var(--ease-lunge);
}

.exchange-cluster {
  position: relative;
  z-index: 1;
  max-width: 30ch;
  padding: 1.4rem;
  background: rgba(10, 10, 15, 0.72);
  border: 1px solid rgba(201, 168, 76, 0.18);
  clip-path: inset(0 50% 0 50%);
  transform: skewX(-12deg) scaleX(0.22);
  transition: clip-path 850ms var(--ease-lunge), transform 850ms var(--ease-lunge), border-color 850ms var(--ease-lunge);
}

.exchange-cluster > * {
  transform: skewX(12deg);
}

.is-visible .exchange-cluster {
  clip-path: inset(0 0 0 0);
  transform: skewX(-12deg) scaleX(1);
  border-color: rgba(201, 168, 76, 0.42);
}

.cluster-one { grid-column: 10 / 31; transition-delay: 0ms; }
.cluster-two { grid-column: 41 / 62; transition-delay: 180ms; }
.cluster-three { grid-column: 72 / 94; transition-delay: 360ms; }

.exchange-cluster p {
  margin: 1rem 0 0;
  color: #b8b0a4;
}

.riposte {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  align-items: center;
  overflow: hidden;
}

.mosaic {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: 1fr;
  gap: 2px 4px;
  padding: 2px;
  z-index: -1;
}

.mosaic span {
  background: #1a1a24;
  transform: skewX(-12deg) scaleX(0.08);
  clip-path: inset(0 48% 0 48%);
  border: 1px solid rgba(201, 168, 76, 0.12);
  transition: transform 1000ms var(--ease-lunge), clip-path 1000ms var(--ease-lunge), background 1000ms var(--ease-lunge);
}

.is-visible .mosaic span {
  transform: skewX(-12deg) scaleX(1);
  clip-path: inset(0 0 0 0);
}

.mosaic span:nth-child(3n) { background: rgba(201, 168, 76, 0.32); }
.mosaic span:nth-child(4n) { background: rgba(10, 10, 15, 0.9); }
.mosaic span:nth-child(5n) { background: rgba(122, 101, 48, 0.5); }
.mosaic span:nth-child(7n) { background: rgba(139, 32, 32, 0.28); }

.final-name {
  grid-column: 6 / 9;
  justify-self: start;
  color: #f4f0e8;
  font-family: "Jost", "Futura", sans-serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 6rem);
  letter-spacing: -0.03em;
  line-height: 0.9;
  text-rendering: geometricPrecision;
  clip-path: inset(0 50% 0 50%);
  transform: scaleX(0.08);
  transition: clip-path 900ms var(--ease-lunge) 280ms, transform 900ms var(--ease-lunge) 280ms;
}

.is-visible .final-name {
  clip-path: inset(0 0 0 0);
  transform: scaleX(1);
}

@media (max-width: 900px) {
  .portfolio-grid { grid-template-columns: repeat(4, 1fr); }
  .section-ribbon .data-label { grid-column: 1 / 5; }
  .section-ribbon h1 { grid-column: 1 / 8; }
  .exchange { height: auto; min-height: 100vh; grid-template-columns: repeat(8, 1fr); gap: 2rem; align-content: center; }
  .exchange-line { top: 18%; bottom: 12%; left: 50%; right: auto; width: 1px; height: auto; transform: scaleY(var(--line-scale, 0)); transform-origin: top; }
  .cluster-one, .cluster-two, .cluster-three { grid-column: 2 / 8; }
}

@media (max-width: 620px) {
  .act { padding: 1.25rem; }
  .hero-mark { grid-column: 1 / 8; }
  .hero-copy { grid-column: 1 / 8; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .cell { grid-column: span 1; }
  .glyph-hero { right: 1rem; }
  .final-name { grid-column: 2 / 9; }
}