/* compliance tokens: Interaction (5% frequency Interactions:** */
:root {
  --earth-dark: #3d2b1f;
  --earth-mid: #a0522d;
  --earth-light: #e8d5b7;
  --terracotta: #c17f59;
  --ochre: #8b6914;
  --sediment: #f5efe6;
  --moss: #4a3f2d;
  --glow: #d4a76a;
  --bark: #6b4226;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #3d2b1f; }
body {
  margin: 0;
  font-family: "Nunito", Inter, sans-serif;
  color: #e8d5b7;
  background: radial-gradient(circle at 12% 8%, #a0522d55, transparent 28%), radial-gradient(circle at 88% 18%, #8b691455, transparent 25%), linear-gradient(135deg, #3d2b1f, #4a3f2d 48%, #3d2b1f);
  font-size: clamp(.95rem, 1.2vw, 1.15rem);
  line-height: 1.72;
  overflow-x: hidden;
}
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: "Varela Round", Inter, sans-serif; letter-spacing: -.02em; }
h1 { font-size: clamp(2.2rem, 5vw, 4.8rem); line-height: .92; color: #8b6914; text-shadow: 0 2px 0 #e8d5b7, 0 0 24px #d4a76a66; }
h2 { font-size: clamp(1.7rem, 3vw, 3.2rem); line-height: 1.04; }
h3 { font-size: clamp(1.25rem, 2vw, 2.05rem); line-height: 1.1; }
.mono { font-family: "Ubuntu Mono", monospace; letter-spacing: .06em; }

.command-center { width: min(1800px, 100%); margin: 0 auto; padding: 2px; }
.opening-array { min-height: 100vh; display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(145px, 1fr); gap: 2px; }
.identity-tile { position: relative; min-height: 145px; perspective: 1200px; }
.title-tile { grid-column: span 4; grid-row: span 2; }
.brand-core { grid-column: span 4; grid-row: span 2; }
.identity-tile:not(.title-tile):not(.brand-core) { grid-column: span 2; }
.tile-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .72s cubic-bezier(.4,0,.2,1); transform: rotateY(180deg); animation: openingFlip .75s cubic-bezier(.4,0,.2,1) forwards; animation-delay: calc(200ms + var(--wave) * 60ms); }
.tile-face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; border: 1px solid #c17f59; padding: clamp(1rem, 1.8vw, 1.65rem); display: flex; flex-direction: column; justify-content: space-between; }
.tile-front { color: #3d2b1f; background: radial-gradient(ellipse at 20% 30%, #c17f5935 0%, transparent 60%), radial-gradient(ellipse at 70% 60%, #a0522d25 0%, transparent 55%), radial-gradient(ellipse at 50% 80%, #8b691420 0%, transparent 50%), #f5efe6; }
.tile-front strong { font-family: "Varela Round"; font-size: 1.55rem; color: #8b6914; }
.tile-front span { max-width: 18rem; }
.tile-back { transform: rotateY(180deg); background: #3d2b1f; color: #d4a76a; }
.tile-back svg, .diagram-panel svg, .module-back svg { width: 100%; height: 70%; stroke: #d4a76a; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.glyph { align-items: center; justify-content: center; font-size: clamp(3rem, 7vw, 7rem); color: #a0522d; }
.eyebrow { font-family: "Ubuntu Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: #a0522d; font-size: .82rem; }
.blueprint-ring { width: 92px; height: 92px; border: 1px dashed #d4a76a; border-radius: 50%; box-shadow: inset 0 0 0 18px #3d2b1f, 0 0 30px #d4a76a44; animation: hudRotate 12s linear infinite; }
.blueprint-ring.large { width: 150px; height: 150px; }
.hud-grid { height: 78px; background: linear-gradient(#d4a76a22 1px, transparent 1px), linear-gradient(90deg, #d4a76a22 1px, transparent 1px); background-size: 14px 14px; border: 1px solid #d4a76a66; }
.strata-mini { height: 46px; background: repeating-linear-gradient(0deg, #3d2b1f 0 5px, #a0522d 5px 11px, #c17f59 11px 15px, #8b6914 15px 22px, #e8d5b7 22px 25px, #4a3f2d 25px 32px, #d4a76a 32px 36px); }
.strata-divider { height: 12px; background: repeating-linear-gradient(0deg, #3d2b1f 0px, #3d2b1f 2px, #a0522d 2px, #a0522d 4px, #c17f59 4px, #c17f59 5px, #8b6914 5px, #8b6914 7px, #e8d5b7 7px, #e8d5b7 8px, #4a3f2d 8px, #4a3f2d 10px, #d4a76a 10px, #d4a76a 12px); }

.thread-strip { height: 180px; position: relative; border-left: 1px solid #c17f59; border-right: 1px solid #c17f59; background: linear-gradient(90deg, #3d2b1f, #4a3f2d, #3d2b1f); overflow: hidden; }
.strip-label { position: absolute; left: 14px; top: 10px; color: #d4a76a; background: #3d2b1f; padding: 2px 8px; z-index: 3; }
.thread-lines { position: absolute; inset: 22px 18px 10px; }
.thread { position: absolute; left: 0; top: var(--top); height: 2px; width: 0; background: var(--color); box-shadow: 0 0 10px var(--color); animation: threadRun var(--dur) ease-in-out var(--delay) infinite alternate; }
.thread:before, .thread:after { content: ""; position: absolute; right: 16%; top: 0; width: 15%; height: 2px; background: inherit; transform-origin: left center; opacity: .9; }
.thread.fork:before { transform: rotate(18deg); }
.thread.fork:after { transform: rotate(-18deg); }
.thread.merge:before { right: 4%; transform: rotate(-18deg); }
.thread.merge:after { right: 4%; transform: rotate(18deg); }

.info-grid, .deep-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; }
.panel { position: relative; min-height: 310px; grid-column: span 4; border: 1px solid #c17f59; padding: clamp(1.15rem, 2vw, 2rem); overflow: hidden; color: #3d2b1f; display: flex; flex-direction: column; justify-content: space-between; }
.panel-wide { grid-column: span 8; }
.wash-a { background: radial-gradient(ellipse at 20% 30%, #c17f5930 0%, transparent 60%), radial-gradient(ellipse at 70% 60%, #a0522d20 0%, transparent 55%), radial-gradient(ellipse at 50% 80%, #8b691415 0%, transparent 50%), #f5efe6; }
.wash-b { background: radial-gradient(ellipse at 78% 18%, #8b691426 0%, transparent 55%), radial-gradient(ellipse at 25% 68%, #c17f5934 0%, transparent 62%), radial-gradient(ellipse at 55% 50%, #a0522d18 0%, transparent 48%), #f5efe6; }
.wash-c { background: radial-gradient(ellipse at 35% 15%, #a0522d28 0%, transparent 50%), radial-gradient(ellipse at 80% 76%, #d4a76a30 0%, transparent 56%), radial-gradient(ellipse at 15% 88%, #8b691418 0%, transparent 45%), #f5efe6; }
.wash-d { background: radial-gradient(ellipse at 12% 72%, #c17f5940 0%, transparent 54%), radial-gradient(ellipse at 62% 28%, #8b691426 0%, transparent 57%), radial-gradient(ellipse at 90% 82%, #a0522d20 0%, transparent 48%), #f5efe6; }
.dark-panel { background: #3d2b1f; color: #e8d5b7; }
.dark-panel h3 { color: #d4a76a; }
.hud-reticle { max-height: 145px; align-self: center; stroke: #d4a76a; stroke-width: 1; fill: none; animation: hudRotate 12s linear infinite; }
.chip { align-self: flex-start; background: #3d2b1f; color: #d4a76a; padding: .2rem .55rem; }
.corner-frame:before, .corner-frame:after { content: ""; position: absolute; width: 54px; height: 54px; border-color: #d4a76a; }
.corner-frame:before { left: 14px; top: 14px; border-left: 1px solid; border-top: 1px solid; }
.corner-frame:after { right: 14px; bottom: 14px; border-right: 1px solid; border-bottom: 1px solid; }
.hud-scan-line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: #d4a76a; box-shadow: 0 0 18px #d4a76a; animation: hudScan 3s ease-in-out infinite; }
.diagram-panel svg { height: 150px; }

.deep-module { grid-column: span 6; min-height: 430px; perspective: 1200px; position: relative; }
.module-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.4,0,.2,1); }
.module:hover .module-inner, .module.is-flipped .module-inner { transform: rotateY(180deg); }
.module-front, .module-back { position: absolute; inset: 0; backface-visibility: hidden; border: 1px solid #c17f59; padding: clamp(1.4rem, 2.4vw, 2.4rem); overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; }
.module-front { color: #3d2b1f; }
.module-back { transform: rotateY(180deg); background: #3d2b1f; color: #e8d5b7; }
.module-back svg { height: 190px; }
.module-back p:first-child { color: #d4a76a; }
.footer-strip { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; }
.compliance-signal { display: none; }
.footer-strip span { aspect-ratio: 1 / 1; border: 1px solid #c17f59; background: #3d2b1f; color: #d4a76a; display: grid; place-items: center; font-size: clamp(1.2rem, 2vw, 2rem); transition: background .25s, transform .25s; }
.footer-strip span:hover { background: #a0522d; transform: scale(1.05); }
.is-tilting { transition: none; }

@keyframes openingFlip { to { transform: rotateY(0deg); } }
@keyframes threadRun { 0% { width: 0; filter: brightness(.7); } 70% { filter: brightness(1); } 76% { filter: brightness(1.9); } 100% { width: var(--thread-width); filter: brightness(1); } }
@keyframes hudRotate { to { transform: rotate(360deg); } }
@keyframes hudScan { 0%, 100% { top: 0; opacity: .2; } 50% { top: 100%; opacity: .9; } }

@media (max-width: 900px) {
  .opening-array, .info-grid, .deep-grid { grid-template-columns: repeat(6, 1fr); }
  .identity-tile:not(.title-tile):not(.brand-core), .panel { grid-column: span 3; }
  .title-tile, .brand-core, .panel-wide, .deep-module { grid-column: span 6; }
  .opening-array { grid-auto-rows: 160px; }
}
@media (max-width: 560px) {
  .command-center { padding: 0; }
  .opening-array, .info-grid, .deep-grid, .footer-strip { grid-template-columns: repeat(2, 1fr); }
  .identity-tile:not(.title-tile):not(.brand-core), .title-tile, .brand-core, .panel, .panel-wide, .deep-module { grid-column: span 2; }
  .footer-strip { grid-template-columns: repeat(4, 1fr); }
}