/* --------------------------------------------------------- */
/* GD ARCHITECTURE — MS0 SYSTEM                              */
/* Diagonal fields, corridor physics, alignment correction   */
/* --------------------------------------------------------- */


/* --------------------------------------------- */
/* ARCHITECTURE PAGE WRAPPER                     */
/* --------------------------------------------- */

.gd-architecture {
  background: var(--bone);
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.gd-architecture .gd-container {
  max-width: 1200px;
}


/* --------------------------------------------- */
/* PAGE TITLE + SUBHEAD                          */
/* --------------------------------------------- */

.gd-architecture-title h1 {
  font-size: 56px;
  line-height: 1.05;
  margin-bottom: var(--space-m);
}

.gd-architecture-title p {
  max-width: 680px;
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: var(--space-xl);
}


/* --------------------------------------------- */
/* DIAGONAL TENSION FIELD (Avara Geometry)       */
/* --------------------------------------------- */

.gd-diagonal-field {
  position: relative;
  background: var(--bone);
  overflow: hidden;
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.gd-diagonal-field::before {
  content: "";
  position: absolute;
  top: -20%;
  left: 0;
  width: 200%;
  height: 200%;

  background: var(--bone);

  /* The architectural “cut” */
  transform: rotate(-2.2deg);
  transform-origin: center;

  z-index: -1;
}


/* --------------------------------------------- */
/* CORRIDOR PHYSICS (Avara Void System)          */
/* --------------------------------------------- */

.gd-corridor {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.gd-corridor-block {
  grid-column: 1 / span 6;
  max-width: 680px;
  margin-bottom: var(--space-l);
}


/* --------------------------------------------- */
/* PINE DIAGRAM (Analysis Field)                 */
/* --------------------------------------------- */

.gd-pine-diagram {
  width: 100%;
  height: 320px;
  background: var(--slate);
  opacity: 0.12;
  border-radius: 4px;
  margin-top: var(--space-l);
  margin-bottom: var(--space-l);
}


/* --------------------------------------------- */
/* TEXT BLOCKS — Architecture Rhythm             */
/* --------------------------------------------- */

.gd-arch-block {
  max-width: 680px;
  margin-bottom: var(--space-l);
  line-height: 1.5;
}

.gd-arch-block h2 {
  font-size: 32px;
  margin-bottom: var(--space-s);
}

.gd-arch-block p {
  font-size: 18px;
  margin-bottom: var(--space-m);
}


/* ------------------------------------------------------- */
/* FOX EVENT 2 — ALIGNMENT CORRECTION (Structural Awareness) */
/* ------------------------------------------------------- */

/* Initial misalign (applied via JS or inline class) */
.fox-misaligned {
  transform: translateX(1px); /* subtle error */
  transition: transform 0s linear;
}

/* Correction during scroll threshold */
.fox-corrected {
  transform: translateX(0);
  transition: transform 0s linear;
}

/* Containers that participate */
.gd-align-correct {
  will-change: transform;
}


/* --------------------------------------------- */
/* MOBILE BEHAVIOR (<680px)                      */
/* --------------------------------------------- */

@media (max-width: 680px) {

  /* Disable alignment correction */
  .fox-misaligned,
  .fox-corrected,
  .gd-align-correct {
    transform: none !important;
  }

  .gd-corridor {
    padding-top: var(--space-l);
    padding-bottom: var(--space-l);
  }

  .gd-architecture-title h1 {
    font-size: 42px;
  }
}