/* ============================================
   OLIABO SCIENCE — THESIS
   The page's main hit. Three-pillar convergence:
     Ancient Wisdom · OLIABO (centerpiece) · Modern Science
   Centered editorial header, then the diagram, then a
   closing accent line. The center pillar is pulled forward
   visually (slightly larger type, taller padding, a top
   accent rule) so the eye reads "two streams → one synthesis."
   Swiss-Grid Editorial × Mediterranean warmth.
   ============================================ */

.osth { position: relative; overflow: hidden; }

/* ─── Header ─────────────────────────────────────────────── */
.osth__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
  max-width: 760px;
  margin: 0 auto var(--space-2xl);
}

@media (min-width: 1024px) {
  .osth__header {
    margin-bottom: var(--space-3xl);
    gap: var(--space-lg);
  }
}

.osth__eyebrow {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clr-primary);
  line-height: 1.4;
}

.osth__heading {
  margin: 0;
  font-size: clamp(1.75rem, 4.5vw + 0.5rem, 4rem);
  line-height: 0.98;
  letter-spacing: 0.015em;
  color: var(--clr-primary);
  display: flex;
  flex-direction: column;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.osth__heading-line1 {
  display: block;
  text-transform: uppercase;
  font-weight: 600;
}

.osth__heading-line2 {
  display: block;
  font-weight: 400;
  letter-spacing: 0;
  font-size: 0.85em;
  line-height: 1.05;
  margin-top: var(--space-xs);
}

.osth__body {
  font-size: var(--font-size-base);
  font-weight: 300;
  line-height: 1.7;
  color: var(--clr-text-secondary);
  text-wrap: pretty;
  max-width: 60ch;
  margin: 0 auto;
}

.osth__body p { margin: 0 0 var(--space-md); }
.osth__body p:last-child { margin-bottom: 0; }

@media (min-width: 1024px) {
  .osth__body { font-size: var(--font-size-lg); }
}

/* ============================================
   CONVERGENCE — pillar · synthesis · pillar
   Mobile: stacked column (pillar → synthesis → pillar).
   Desktop: 3-column grid with hairline rules between, and
   the center column subtly enlarged.
   ============================================ */
.osth__converge {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border: 1px solid rgba(60, 66, 46, 0.18);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

@media (min-width: 960px) {
  .osth__converge {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
  }
}

/* ─── Side pillars ─── */
.osth__pillar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-xl) var(--space-md);
  min-width: 0;
}

@media (min-width: 960px) {
  .osth__pillar {
    padding: var(--space-2xl) var(--space-xl);
    gap: var(--space-md);
  }
}

@media (min-width: 1024px) {
  .osth__pillar {
    padding: var(--space-3xl) var(--space-2xl);
    gap: var(--space-lg);
  }
}

/* Mobile: horizontal hairline between stacked items.
   Desktop: vertical hairline between columns. */
.osth__pillar + .osth__synthesis,
.osth__synthesis + .osth__pillar {
  border-top: 1px solid rgba(60, 66, 46, 0.18);
}

@media (min-width: 960px) {
  .osth__pillar + .osth__synthesis,
  .osth__synthesis + .osth__pillar {
    border-top: none;
    border-left: 1px solid rgba(60, 66, 46, 0.18);
  }
}

.osth__pillar-label {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
  line-height: 1.3;
}

@media (min-width: 1024px) {
  .osth__pillar-label { font-size: 12px; }
}

.osth__pillar-title {
  margin: 0;
  font-size: clamp(1.25rem, 1.75vw + 0.5rem, 1.75rem);
  font-weight: 600;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--clr-primary);
  line-height: 1.05;
}

.osth__pillar-body {
  margin: 0;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--clr-text-secondary);
  text-wrap: pretty;
}

@media (min-width: 1024px) {
  .osth__pillar-body { font-size: 15px; }
}

/* ─── Synthesis (center column) ─── */
.osth__synthesis {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-2xl) var(--space-md);
  min-width: 0;
  background: rgba(60, 66, 46, 0.04);
  text-align: center;
  align-items: center;
}

@media (min-width: 960px) {
  .osth__synthesis {
    padding: var(--space-2xl) var(--space-lg);
    gap: var(--space-md);
  }
}

@media (min-width: 1024px) {
  .osth__synthesis {
    padding: var(--space-4xl) var(--space-xl);
    gap: var(--space-lg);
  }
}

/* Top accent rule — primary olive on light bg.
   Switches to gold on dark variants below. */
.osth__synthesis::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--clr-primary);
}

.osth__synthesis-label {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--clr-brand-alt);
  line-height: 1.3;
}

@media (min-width: 1024px) {
  .osth__synthesis-label { font-size: 12px; }
}

.osth__synthesis-name {
  margin: 0;
  font-size: clamp(2.25rem, 4vw + 0.5rem, 3.5rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--clr-primary);
  line-height: 1;
}

.osth__synthesis-tagline {
  margin: 0;
  font-size: clamp(1.125rem, 1.25vw + 0.5rem, 1.5rem);
  font-weight: 400;
  /* Upright Cormorant per design guide §5 — never italic */
  line-height: 1.3;
  color: var(--clr-brand-alt);
  text-wrap: balance;
  max-width: 28ch;
}

.osth__synthesis-body {
  margin: 0;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--clr-text-secondary);
  text-wrap: pretty;
  max-width: 32ch;
}

@media (min-width: 1024px) {
  .osth__synthesis-body { font-size: 15px; }
}

/* ─── Closing accent line ──────────────────────────────── */
.osth__closing {
  margin: var(--space-2xl) auto 0;
  text-align: center;
  font-size: clamp(1.25rem, 1.75vw + 0.5rem, 1.75rem);
  font-weight: 400;
  /* Upright Cormorant per design guide §5 — never italic */
  line-height: 1.4;
  color: var(--clr-brand-alt);
  text-wrap: balance;
  max-width: 60ch;
}

@media (min-width: 1024px) {
  .osth__closing { margin-top: var(--space-3xl); }
}

/* ============================================
   TINTED LIGHT BACKGROUNDS — sage / cream / peach / soft
   The default 4%-olive synthesis tint disappears on these
   tinted backgrounds, and the muted-grey pillar label loses
   contrast. Promote the synthesis fill to clean white so the
   centerpiece stays distinct, and bump labels to mid olive
   for legibility. Per design guide §4, all text stays olive
   (no gold) on light backgrounds.
   ============================================ */
.osth.bg-neutral-light .osth__synthesis,
.osth.bg-accent-warm   .osth__synthesis,
.osth.bg-card-secondary .osth__synthesis,
.osth.bg-accent-soft   .osth__synthesis {
  background: var(--clr-white);
}

.osth.bg-neutral-light .osth__pillar-label,
.osth.bg-accent-warm   .osth__pillar-label,
.osth.bg-card-secondary .osth__pillar-label,
.osth.bg-accent-soft   .osth__pillar-label {
  color: var(--clr-brand-alt);
}

/* Hairline rules slightly stronger so the diagram structure
   reads against the tinted ground. */
.osth.bg-neutral-light  .osth__converge,
.osth.bg-accent-warm    .osth__converge,
.osth.bg-card-secondary .osth__converge,
.osth.bg-accent-soft    .osth__converge { border-color: rgba(60, 66, 46, 0.28); }

.osth.bg-neutral-light  .osth__pillar + .osth__synthesis,
.osth.bg-neutral-light  .osth__synthesis + .osth__pillar,
.osth.bg-accent-warm    .osth__pillar + .osth__synthesis,
.osth.bg-accent-warm    .osth__synthesis + .osth__pillar,
.osth.bg-card-secondary .osth__pillar + .osth__synthesis,
.osth.bg-card-secondary .osth__synthesis + .osth__pillar,
.osth.bg-accent-soft    .osth__pillar + .osth__synthesis,
.osth.bg-accent-soft    .osth__synthesis + .osth__pillar { border-color: rgba(60, 66, 46, 0.28); }

/* ============================================
   DARK BACKGROUND VARIANT — bg-accent-dark / bg-primary
   Per design guide §4, gold accents only render on dark.
   ============================================ */
.osth.bg-accent-dark .osth__eyebrow,
.osth.bg-primary    .osth__eyebrow { color: var(--clr-brand-accent); }

.osth.bg-accent-dark .osth__heading,
.osth.bg-primary    .osth__heading { color: var(--clr-text-inverse); }

.osth.bg-accent-dark .osth__heading-line1,
.osth.bg-primary    .osth__heading-line1 { color: var(--clr-text-inverse); }

.osth.bg-accent-dark .osth__heading-line2,
.osth.bg-primary    .osth__heading-line2 { color: var(--clr-brand-accent); }

.osth.bg-accent-dark .osth__body,
.osth.bg-primary    .osth__body { color: var(--clr-text-inverse); opacity: 0.82; }

.osth.bg-accent-dark .osth__converge,
.osth.bg-primary    .osth__converge { border-color: rgba(253, 252, 250, 0.18); }

.osth.bg-accent-dark .osth__pillar + .osth__synthesis,
.osth.bg-accent-dark .osth__synthesis + .osth__pillar,
.osth.bg-primary    .osth__pillar + .osth__synthesis,
.osth.bg-primary    .osth__synthesis + .osth__pillar { border-color: rgba(253, 252, 250, 0.18); }

.osth.bg-accent-dark .osth__pillar-label,
.osth.bg-primary    .osth__pillar-label { color: var(--clr-text-inverse); opacity: 0.55; }

.osth.bg-accent-dark .osth__pillar-title,
.osth.bg-primary    .osth__pillar-title { color: var(--clr-text-inverse); }

.osth.bg-accent-dark .osth__pillar-body,
.osth.bg-primary    .osth__pillar-body { color: var(--clr-text-inverse); opacity: 0.82; }

.osth.bg-accent-dark .osth__synthesis,
.osth.bg-primary    .osth__synthesis { background: rgba(181, 168, 130, 0.10); }

.osth.bg-accent-dark .osth__synthesis::before,
.osth.bg-primary    .osth__synthesis::before { background: var(--clr-brand-accent); }

.osth.bg-accent-dark .osth__synthesis-label,
.osth.bg-primary    .osth__synthesis-label { color: var(--clr-brand-accent); }

.osth.bg-accent-dark .osth__synthesis-name,
.osth.bg-primary    .osth__synthesis-name { color: var(--clr-text-inverse); }

.osth.bg-accent-dark .osth__synthesis-tagline,
.osth.bg-primary    .osth__synthesis-tagline { color: var(--clr-brand-accent); }

.osth.bg-accent-dark .osth__synthesis-body,
.osth.bg-primary    .osth__synthesis-body { color: var(--clr-text-inverse); opacity: 0.82; }

.osth.bg-accent-dark .osth__closing,
.osth.bg-primary    .osth__closing { color: var(--clr-brand-accent); }