/* GENERATED — edit /design/ at repo root, then run scripts/sync-design.sh. */

/* Greco-Futurism — motif primitives.
   CSS-only decorative elements. Composable via class names.
   Apply sparingly: the silence between motifs is the loudest thing. */

/* Display type — the classical face, for hero moments only.
   Apply sparingly: the display face is rare punctuation, like gold. */
.motif-display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--tracking-normal);
}

/* Fluted column backdrop — vertical gold flutes at low opacity.
   Use on hero / large sections. No animation: motion is implied. */
.motif-flute-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent 119px,
    rgba(212, 168, 67, 0.06) 119px,
    rgba(212, 168, 67, 0.06) 120px
  );
}

.motif-flute-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent 39px,
    rgba(212, 168, 67, 0.02) 39px,
    rgba(212, 168, 67, 0.02) 40px
  );
}

/* Marble surface — warm off-white section, inverts the stage.
   Use as a deliberate pause in a sea of warm black. */
.surface-marble {
  background: var(--marble);
  color: var(--text-stone);
}

.surface-marble h1,
.surface-marble h2,
.surface-marble h3 {
  color: var(--text-stone);
}

.surface-marble .section-label,
.surface-marble .card-label,
.surface-marble .principle-title {
  color: var(--patina-soft);
}

.surface-marble .accent {
  color: var(--patina-soft);
}

.surface-marble p {
  color: #3a342a;
}

.surface-marble .card {
  background: transparent;
  border-color: var(--marble-border);
}

/* L-corner — gold L-shaped brackets on card corners.
   Preserved from neo art-deco. */
.motif-l-corners {
  position: relative;
}

.motif-l-corners::before,
.motif-l-corners::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: var(--accent);
  border-style: solid;
  pointer-events: none;
}

.motif-l-corners::before {
  top: 0;
  left: 0;
  border-width: 1px 0 0 1px;
}

.motif-l-corners::after {
  bottom: 0;
  right: 0;
  border-width: 0 1px 1px 0;
}

/* Meander — Greek-key repeating border.
   Use as a horizontal divider or as the top/bottom of a framed section. */
.motif-meander {
  height: 12px;
  background-image:
    linear-gradient(90deg, var(--accent) 1px, transparent 1px),
    linear-gradient(90deg, transparent calc(100% - 1px), var(--accent) 1px);
  background-size: 24px 100%;
  background-repeat: repeat-x;
  border-top: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  opacity: 0.8;
}

/* Fluted divider — vertical column-flutes rendered horizontally.
   Use as a subtle hairline with rhythm. */
.motif-flute {
  height: 1px;
  background-image: repeating-linear-gradient(
    90deg,
    var(--border) 0 6px,
    transparent 6px 8px
  );
}

/* Pediment — a triangular frame above a heading.
   Pure CSS, no SVG needed. */
.motif-pediment {
  position: relative;
  padding-top: 16px;
}

.motif-pediment::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 8px solid var(--accent);
  opacity: 0.6;
}

/* Laurel frame — open wreath framing quotes and emphasis.
   Uses gold verticals flanking the content. */
.motif-laurel {
  position: relative;
  padding: 16px 40px;
}

.motif-laurel::before,
.motif-laurel::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 60%;
  background: var(--accent);
  opacity: 0.5;
}

.motif-laurel::before { left: 16px; }
.motif-laurel::after { right: 16px; }