/*
 * ═══════════════════════════════════════════════════════════════
 * CAPITAL DIPLOMACY — LOCAL STYLESHEET
 * ═══════════════════════════════════════════════════════════════
 *
 * Site:    capitaldiplomacy.com (the philosophy surface)
 * Version: v1.0 — 31 May 2026
 * Author:  Diane — Creative Director, Saint Clair Pte. Ltd.
 *
 * Loaded after the platform layer
 *   Layer 0  — saint-clair-tokens.css   (loaded via lang-head)
 *   Layer 1  — saint-clair-base.css     (loaded via lang-head)
 *   Layer 2c — saint-clair-web.css      (loaded via lang-head)
 * via $extraHeadMeta in htdocs/index.php.
 *
 * Activated by `body.lang.lang--capdip` (set via $bodyClasses in
 * htdocs/index.php). All site-specific rules either scope to that
 * body class or use the cd-* prefix, leaving the v6 estate idiom
 * (used by saintclair.sg, .ltd, .global, .capital, .markets, .asia)
 * untouched.
 *
 * Posture: the chapel inside The Language.
 *   Same v6 palette, fonts, mark, and lang-* vocabulary as the
 *   sister sites — but the ground breathes. Seven panels in a
 *   polyptych, cream into violet-grey into dark, descent and rise.
 *   Where the sister sites are terminals, this surface is the room
 *   in which the philosophy is read.
 *
 * ═══════════════════════════════════════════════════════════════
 */


/* =================================================================
   1. BODY OVERRIDE — full width for cinematographic ground panels
   =================================================================
   The v6 base scopes body.lang to max-width: 72vw (single-column
   terminal). The chapel needs the full viewport so each ground
   bleeds edge-to-edge. We widen the body and let the section
   inner-wrappers carry the reading column.
   ================================================================= */

body.lang.lang--capdip {
  max-width: none;
  overflow-x: hidden;
  background: var(--sc-cream);
  color: var(--sc-violet);
}


/* =================================================================
   2. GHOST MARK — suppress on this surface
   =================================================================
   The lang-ghost is a v6 terminal idiom. The chapel does not host
   it: the mark appears in the nav and in the colophon, framed by
   the panels themselves. Removing the ghost is the single,
   deliberate omission that lets the alternating grounds breathe.
   ================================================================= */

body.lang--capdip .lang-ghost {
  display: none;
}


/* =================================================================
   3. TERMINAL NAV — inherit v6 estate signature
   =================================================================
   The v6 nav (lavender on violet) is canonical and stays. On the
   chapel's cream sections it reads as a discreet trace — light grey
   on cream, deliberately restrained. The visitor's first impression
   is the hero, where the nav lands clearly on violet. On the cream
   panels the nav recedes; on hover it returns. This is the chapel's
   acoustic: present without intrusion.
   ================================================================= */


/* =================================================================
   4. HERO — the threshold
   =================================================================
   Cinematographic full-viewport violet. The one moment GT Sectra
   Display earns the page — the architectural threshold from the
   world into the room.
   ================================================================= */

.cd-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh; /* iOS — accounts for browser chrome */
  background-color: var(--sc-violet);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 24px 100px;
  box-sizing: border-box;
  overflow: hidden;
}

.cd-hero__inner {
  max-width: 720px;
  margin: 0 auto;
}

.cd-hero__rule {
  width: 48px;
  height: 1.5px;
  background-color: var(--sc-gold);
  margin: 0 auto 56px;
}

.cd-hero__title {
  /* GT Sectra Display — gravity. Light weight at display scale is
     the signature of the doorway-threshold register (per Diane's
     2026-05-01 typographic discipline). */
  font-family: var(--font-display);
  font-weight: 300;
  font-style: normal;
  font-size: clamp(2.8rem, 8vw, 6.5rem);
  line-height: 1.0;
  letter-spacing: -0.015em;
  color: var(--sc-cream);
  margin: 0 0 36px;
  text-transform: none; /* the serif speaks; no caps required */
}

.cd-hero__tagline {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.05rem, 2vw, 1.45rem);
  line-height: 1.4;
  letter-spacing: 0.005em;
  color: var(--sc-gold);
  margin: 0 0 40px;
}

.cd-hero__definition {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  line-height: 1.85;
  letter-spacing: 0.005em;
  color: var(--sc-cream);
  opacity: 0.55;
  margin: 0;
}

/* Scroll indicator — single gold thread, pulse */
.cd-hero__scroll {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  text-decoration: none;
  display: block;
  width: 24px;
  height: 56px;
  text-align: center;
  z-index: 2;
}

.cd-hero__scroll span {
  display: block;
  margin: 0 auto;
  width: 1px;
  height: 48px;
  background-color: var(--sc-gold);
  animation: cd-pulse 2.4s ease-in-out infinite;
  transform-origin: top center;
}

@keyframes cd-pulse {
  0%, 100% { opacity: 0.18; transform: scaleY(0.55); }
  50%      { opacity: 0.55; transform: scaleY(1); }
}


/* =================================================================
   5. SECTION GROUNDS — the polyptych
   =================================================================
   Three grounds in deliberate rhythm:
     cream → violet-grey → dark → dark → cream → dark → cream
   The double-dark passage (§3 + §4) is the chamber where the
   architecture is built and taught. The brief's lean.
   ================================================================= */

.cd-section {
  position: relative;
  padding: clamp(80px, 13vw, 180px) clamp(24px, 6vw, 64px);
  box-sizing: border-box;
  overflow: hidden;
}

/* The continuation flag removes the top padding so §4 reads as a
   continuation of §3's dark chamber rather than a fresh panel. */
.cd-section--continues {
  padding-top: clamp(40px, 7vw, 100px);
}

.cd-section--closing {
  padding-bottom: clamp(60px, 10vw, 140px);
}

.cd-section--cream {
  background-color: var(--sc-cream);
  color: var(--sc-violet);
}

.cd-section--violet-grey {
  background-color: var(--sc-violet-grey);
  color: var(--sc-cream);
}

.cd-section--dark {
  background-color: var(--sc-violet);
  color: var(--sc-cream);
}

.cd-section__inner {
  max-width: 720px;
  margin: 0 auto;
  padding-left: clamp(0px, 1.5vw, 16px);
  padding-right: clamp(0px, 1.5vw, 16px);
}


/* =================================================================
   6. SECTION TYPOGRAPHY — rule · title · body
   =================================================================
   The cadence inside every panel:
     1. gold rule (signature)
     2. display title — GT Sectra Display, restrained
     3. lead text (Jost light, larger)
     4. body text (Jost light, reading scale)
   ================================================================= */

.cd-section__rule {
  width: 48px;
  height: 1.5px;
  background-color: var(--sc-gold);
  margin: 0 0 36px;
}

.cd-section__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--sc-violet);
  margin: 0 0 48px;
  text-transform: none;
}

.cd-section__title--light {
  color: var(--sc-cream);
}


/* ── Body text ── */

.cd-text--lead {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  line-height: 1.6;
  letter-spacing: 0.005em;
  color: var(--sc-violet);
  margin: 0 0 32px;
}

.cd-text--lead.cd-text--mb-lg {
  margin-bottom: 56px;
}

.cd-text--body {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: clamp(0.98rem, 1.3vw, 1.08rem);
  line-height: 1.85;
  letter-spacing: 0.005em;
  color: var(--sc-violet-grey);
  margin: 0 0 22px;
}

.cd-text--body:last-of-type {
  margin-bottom: 0;
}

.cd-text--body a {
  color: var(--sc-violet);
  text-decoration: none;
  border-bottom: 1px solid var(--sc-gold-30);
  transition: border-color 280ms ease, color 280ms ease;
}

.cd-text--body a:hover {
  color: var(--sc-gold);
  border-bottom-color: var(--sc-gold);
}

/* Dark-ground link variant */
.cd-section--dark .cd-text--body a,
.cd-section--violet-grey .cd-text--body a {
  color: var(--sc-cream);
  border-bottom-color: var(--sc-gold-30);
}

.cd-section--dark .cd-text--body a:hover,
.cd-section--violet-grey .cd-text--body a:hover {
  color: var(--sc-gold);
  border-bottom-color: var(--sc-gold);
}

/* Small text & contact line */
.cd-text--small {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--sc-violet-grey);
  margin: 0 0 8px;
}

.cd-text--small a {
  color: var(--sc-gold);
  text-decoration: none;
  transition: opacity 280ms ease;
}

.cd-text--small a:hover {
  opacity: 0.65;
}

.cd-text--contact {
  margin-top: 36px;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  letter-spacing: 0.04em;
}

/* Colour modifiers */
.cd-text--cream {
  color: var(--sc-cream);
}

.cd-text--cream-muted {
  color: rgba(250, 249, 245, 0.68);
}


/* =================================================================
   7. THE PROGRESSIVE MODEL — pillars (preserved canonical)
   =================================================================
   Five pillars on the dark ground. Gold numbers (small, mono),
   cream titles, dimmed cream body. The left rule starts at the
   gold-30 hairline and gold-locks on hover. The last pillar (05)
   is gold-locked by default — it is the outcome the philosophy
   makes possible.
   ================================================================= */

.cd-pillars {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
}

.cd-pillar {
  position: relative;
  padding: 28px 0 28px 32px;
  border-left: 1px solid var(--sc-gold-30);
  transition: border-color 480ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cd-pillar:hover {
  border-left-color: var(--sc-gold);
}

.cd-pillar--last {
  border-left-color: var(--sc-gold);
}

.cd-pillar__number {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--sc-gold);
  display: block;
  margin-bottom: 8px;
}

.cd-pillar__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: 0.005em;
  line-height: 1.2;
  color: var(--sc-cream);
  margin: 0 0 12px;
  text-transform: none;
}

.cd-pillar__text {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 0.96rem;
  line-height: 1.8;
  color: rgba(250, 249, 245, 0.6);
  margin: 0;
  max-width: 560px;
}

@media (min-width: 992px) {
  .cd-pillar {
    padding: 36px 0 36px 40px;
  }
}


/* (§8 Areas of Impact — RETIRED v1.1, 31 May 2026.
   Coco's verdict: "three deck-headings dressed in serif … the
   section restates §4's pillars in different vocabulary, on the
   assumption the reader has forgotten what they read forty seconds
   ago." Subtraction test passed. Section deleted; HTML cd-impact*
   classes no longer used.) */


/* =================================================================
   9. IN PRACTICE — operational tiles
   =================================================================
   Pillars 01–04 are single tiles with gold numbers, mono labels,
   display titles. Pillar 05 is a dual-tile compound under a
   shared "05 Investment" header — option (b) per the brief —
   preserving the five-pillar architecture while honouring the
   two surfaces (Saint Clair Asia + Saint Clair Capital).
   ================================================================= */

.cd-practice {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
}

.cd-practice__item,
.cd-practice__tile {
  display: block;
  position: relative;
  padding: 32px 0 32px 32px;
  border-left: 1px solid var(--sc-gold-30);
  text-decoration: none;
  transition: border-color 480ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cd-practice__item:hover,
.cd-practice__tile:hover {
  border-left-color: var(--sc-gold);
  text-decoration: none;
}

.cd-practice__number {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--sc-gold);
  display: block;
  margin-bottom: 8px;
}

.cd-practice__label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--sc-cream);
  opacity: 0.42;
  text-transform: uppercase;
  display: block;
  margin-bottom: 18px;
}

.cd-practice__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: 0.005em;
  line-height: 1.2;
  color: var(--sc-cream);
  margin: 0 0 14px;
  text-transform: none;
}

.cd-practice__text {
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: 0.96rem;
  line-height: 1.8;
  color: rgba(250, 249, 245, 0.6);
  margin: 0 0 18px;
  max-width: 540px;
}

.cd-practice__link {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--sc-gold);
  opacity: 0.7;
  transition: opacity 320ms ease;
}

.cd-practice__arrow {
  display: inline-block;
  margin-left: 6px;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cd-practice__item:hover .cd-practice__link,
.cd-practice__tile:hover .cd-practice__link {
  opacity: 1;
}

.cd-practice__item:hover .cd-practice__arrow,
.cd-practice__tile:hover .cd-practice__arrow {
  transform: translateX(4px);
}

/* Tiles without outbound link (04 Frontier Networks) — same scaffold,
   no cursor, no hover glow */
.cd-practice__item--no-link {
  cursor: default;
}

.cd-practice__item--no-link:hover {
  border-left-color: var(--sc-gold-30);
}

/* ── Dual-tile compound (pillar 05) ── */

.cd-practice__group {
  position: relative;
  padding: 32px 0 0 32px;
  border-left: 1px solid var(--sc-gold);
}

.cd-practice__group-header {
  margin-bottom: 28px;
}

.cd-practice__group-header .cd-practice__number {
  margin-bottom: 8px;
}

.cd-practice__group-header .cd-practice__label {
  opacity: 0.58;
  margin-bottom: 0;
}

.cd-practice__group-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 36px;
  margin: 0 -32px 0 0;
}

.cd-practice__group-tiles .cd-practice__tile {
  padding-left: 28px;
  border-left: 1px solid var(--sc-gold-30);
}

@media (max-width: 720px) {
  .cd-practice__group-tiles {
    grid-template-columns: 1fr;
    gap: 0;
    margin-right: 0;
  }
}

@media (min-width: 992px) {
  .cd-practice__item,
  .cd-practice__tile {
    padding: 36px 0 36px 40px;
  }
  .cd-practice__group {
    padding-left: 40px;
  }
  .cd-practice__group-tiles .cd-practice__tile {
    padding-left: 32px;
  }
}


/* =================================================================
   10. CLOSING REGISTER — three rows beneath §6
   =================================================================
   Per Coco v1.1 (31 May 2026), the closing register is dissolved
   into three discrete rows rather than crammed into §6:
     (a) §6 Origin — three paragraphs only (narrative, IP, email)
     (b) cd-address-row — a quiet mono line, between §6 and the
         gold colophon hr emitted by lang-foot
     (c) lang-foot colophon — mark + caption (canonical v6)
     (d) cd-disclaimer-row — small-print, beneath the colophon,
         emitted through the v1.2 $postColophonHTML hook in lang-foot
   A philosophy site closes with a benediction, not a corporate
   footer crammed into the last section.
   ================================================================= */

/* (a) — Address row, between §6 and the colophon */
.cd-address-row {
  background-color: var(--sc-cream);
  padding: clamp(40px, 6vw, 80px) clamp(24px, 6vw, 64px) clamp(24px, 4vw, 56px);
  box-sizing: border-box;
}

.cd-address-row__inner {
  max-width: 720px;
  margin: 0 auto;
  padding-left: clamp(0px, 1.5vw, 16px);
  padding-right: clamp(0px, 1.5vw, 16px);
}

.cd-address-row p {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: var(--sc-violet-grey);
  opacity: 0.75;
  margin: 0;
}

/* (b) — Disclaimer row, beneath the colophon via $postColophonHTML */
.cd-disclaimer-row {
  margin-top: clamp(16px, 2.5vw, 28px);
  max-width: 720px;
}

.cd-disclaimer-row p {
  font-family: var(--font-primary);
  font-style: italic;
  font-weight: 300;
  font-size: 0.78rem;
  line-height: 1.65;
  color: var(--sc-violet-grey);
  opacity: 0.6;
  margin: 0;
  max-width: 560px;
}


/* =================================================================
   11. FOOTER / COLOPHON OVERRIDES
   =================================================================
   The lang-foot colophon defaults to the violet-on-violet idiom
   (mark + mono caption at low opacity). On the cream closing
   panel we re-tone it for legibility while preserving the v6
   colophon structure.
   ================================================================= */

body.lang--capdip .lang-colophon__mark {
  fill: var(--sc-violet);
  opacity: 0.25;
}

body.lang--capdip .lang-colophon__text {
  color: var(--sc-violet);
  opacity: 0.5;
}

/* The lang-foot emits a top-rule before the colophon (hr). On cream
   we tone it down so it reads as a closing flourish, not a divider. */
body.lang--capdip .lang-pg > hr {
  opacity: 0.25;
  max-width: 240px;
  border-top-color: var(--sc-gold);
}

body.lang--capdip .lang-colophon {
  padding-left: clamp(24px, 6vw, 64px);
}

/* The lang-foot wraps the colophon in lang-indent; restore the
   chapel's indent rhythm rather than the terminal's. */
body.lang--capdip .lang-indent {
  padding-left: clamp(24px, 6vw, 64px);
}


/* =================================================================
   12. SELECTION & FOCUS
   ================================================================= */

body.lang--capdip ::selection {
  background-color: var(--sc-gold);
  color: var(--sc-violet);
}

body.lang--capdip ::-moz-selection {
  background-color: var(--sc-gold);
  color: var(--sc-violet);
}

body.lang--capdip a:focus-visible {
  outline: 2px solid var(--sc-gold);
  outline-offset: 4px;
}


/* =================================================================
   13. RESPONSIVE — the chapel scales
   ================================================================= */

@media (max-width: 600px) {
  .cd-hero {
    padding: 100px 20px 80px;
  }
  .cd-hero__rule {
    margin-bottom: 40px;
  }
  .cd-section {
    padding: 72px 20px;
  }
  .cd-section--continues {
    padding-top: 36px;
  }
  .cd-section__inner {
    padding-left: 0;
    padding-right: 0;
  }
  .cd-pillar,
  .cd-practice__item,
  .cd-practice__tile {
    padding-left: 24px;
  }
  .cd-practice__group {
    padding-left: 24px;
  }
  .cd-practice__group-tiles .cd-practice__tile {
    padding-left: 20px;
  }
}

@media (min-width: 1440px) {
  .cd-section__inner {
    max-width: 760px;
  }
}


/* =================================================================
   14. REDUCED-MOTION
   ================================================================= */

@media (prefers-reduced-motion: reduce) {
  .cd-hero__scroll span {
    animation: none;
    opacity: 0.4;
  }
  .lang-nav__cursor,
  .lang-nav-mobile__cursor {
    animation: none;
    opacity: 0.8;
  }
  * {
    transition-duration: 0.01ms !important;
  }
}