/*
 * ═══════════════════════════════════════════════════════════════
 * SAINT CLAIR — WEB STYLESHEET
 * ═══════════════════════════════════════════════════════════════
 *
 * Version:   1.0
 * Date:      20 February 2026
 * Author:    Diane — Creative Director, Saint Clair Pte. Ltd.
 *
 * Purpose:   Shared foundation for ALL Saint Clair websites.
 *            Reset overrides for web context, navigation,
 *            footer, ghost mark, screener, easing, transitions.
 *
 * Hierarchy: Layer 2c (Web)
 *            Imports: saint-clair-base.css (Layer 1)
 *                     └─ saint-clair-tokens.css (Layer 0)
 *
 * Consumed by: assetsc/css/saint-clair-web.css (symlinked/copied)
 *              then each site's local.css adds site-specific rules
 *
 * ═══════════════════════════════════════════════════════════════
 */

@import url('./saint-clair-base.css');


/* =================================================================
   1. WEB-SPECIFIC TOKENS
   ================================================================= */

:root {
  /* ── Easing ── */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Web Transitions ── */
  --transition-web-fast:   200ms ease;
  --transition-web-base:   300ms ease;
  --transition-web-reveal:  800ms var(--ease-spring);
}


/* =================================================================
   2. WEB RESET OVERRIDES
   ================================================================= */

/*
 * base.css sets body to cream text on violet — correct for docs.
 * Web needs context-specific overrides per page, so we keep the
 * base body light and let pages set their own scheme.
 */

html {
  scrollbar-width: none;
}
html::-webkit-scrollbar {
  display: none;
}

body {
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}


/* =================================================================
   3. GHOST MARK — Atmospheric brand element
   ================================================================= */

.ghost-mark {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.ghost-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}


/* =================================================================
   4. NAVIGATION — Shared across all Saint Clair websites
   ================================================================= */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 48px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms var(--ease-spring);
}
.nav.active {
  opacity: 1;
  pointer-events: auto;
}

/* ── Brand lockup ── */
.nav__brand {
  display: flex;
  align-items: center;
  gap: 16px;
}
.nav__mark {
  height: 22px;
  width: auto;
}
.nav__mark polygon {
  fill: var(--sc-cream);
}
.nav__wordmark {
  font-family: var(--font-primary);
  font-weight: var(--weight-regular);
  font-size: 0.7rem;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--sc-cream);
}

/* ── Links ── */
.nav__links {
  display: flex;
  gap: 36px;
  list-style: none;
}
.nav__links a {
  font-family: var(--font-primary);
  font-weight: var(--weight-light);
  font-size: 0.65rem;
  letter-spacing: var(--tracking-labels);
  text-transform: uppercase;
  color: var(--sc-lavender);
  transition: color var(--transition-base);
}
.nav__links a:hover {
  color: var(--sc-gold);
}
.nav__links a.gold {
  color: var(--sc-gold);
}

/* ── Dropdown ── */
.nav__dropdown {
  position: relative;
}
.nav__dropdown-trigger {
  cursor: pointer;
}
.nav__dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: var(--sc-deep-violet);
  border: 1px solid rgba(176, 173, 192, 0.12);
  padding: 16px 0;
  min-width: 180px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease, transform 250ms var(--ease-spring);
}
.nav__dropdown-menu::before {
  content: '';
  position: absolute;
  top: -13px;
  left: 0;
  right: 0;
  height: 14px;
}
.nav__dropdown:hover .nav__dropdown-menu,
.nav__dropdown.open .nav__dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav__dropdown-menu a {
  display: block;
  padding: 8px 24px;
  font-family: var(--font-primary);
  font-weight: var(--weight-light);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sc-lavender);
  transition: color 200ms ease, padding-left 200ms ease;
}
.nav__dropdown-menu a:hover {
  color: var(--sc-gold);
  padding-left: 28px;
}

/* ── Portal (auth section) ── */
.nav__portal {
  margin-left: 8px;
  padding-left: 20px;
  border-left: 1px solid rgba(176, 173, 192, 0.2);
}
.nav__portal-trigger {
  padding: 5px 14px !important;
  border: 1px solid rgba(176, 173, 192, 0.25);
  border-radius: 20px;
  font-size: 0.6rem !important;
  transition: border-color 250ms ease, color 250ms ease !important;
}
.nav__portal-trigger:hover {
  border-color: var(--sc-gold) !important;
}

/* ── Hamburger ── */
.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  z-index: 210;
}
.nav__hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--sc-cream);
  transition: transform 300ms var(--ease-spring), opacity 200ms ease;
}
.nav__hamburger.open span:nth-child(1) {
  transform: rotate(45deg) translate(4px, 4px);
}
.nav__hamburger.open span:nth-child(2) {
  opacity: 0;
}
.nav__hamburger.open span:nth-child(3) {
  transform: rotate(-45deg) translate(4px, -4px);
}

/* ── Mobile overlay ── */
.nav__mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--sc-deep-violet);
  z-index: 199;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms var(--ease-spring);
}
.nav__mobile-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.nav__mobile-overlay a {
  font-family: var(--font-primary);
  font-weight: var(--weight-light);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sc-lavender);
  transition: color 250ms ease;
}
.nav__mobile-overlay a:hover {
  color: var(--sc-gold);
}
.nav__mobile-overlay a.gold {
  color: var(--sc-gold);
}
.nav__mobile-divider {
  width: 40px;
  height: 1px;
  background: rgba(176, 173, 192, 0.25);
  margin: 8px 0;
}
.nav__mobile-overlay .nav__mobile-sub {
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: var(--sc-lavender);
  margin-top: -16px;
  padding-left: 20px;
}


/* =================================================================
   5. FOOTER — Shared across all Saint Clair websites
   ================================================================= */

.footer {
  background: var(--sc-dark-grey);
  color: var(--sc-cream);
  padding: 80px 8vw 48px;
}

.footer__top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 64px;
}

.footer__brand-name {
  font-family: var(--font-primary);
  font-weight: var(--weight-regular);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sc-cream);
  margin-bottom: 12px;
}
.footer__brand-tagline {
  font-weight: var(--weight-light);
  font-style: italic;
  font-size: 1rem;
  color: var(--sc-lavender);
}

.footer__heading {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sc-gold);
  margin-bottom: 16px;
}

.footer__link {
  font-size: 0.85rem;
  color: var(--sc-lavender);
  line-height: 1.8;
  display: block;
  transition: color 250ms ease;
}
.footer__link:hover {
  color: var(--sc-gold);
}

.footer__bottom {
  border-top: 1px solid rgba(250, 249, 245, 0.06);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.footer__legal-links {
  display: flex;
  gap: 32px;
  margin-bottom: 16px;
}
.footer__legal-links a {
  font-weight: var(--weight-light);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sc-lavender);
  transition: color 250ms ease;
}
.footer__legal-links a:hover {
  color: var(--sc-gold);
}

.footer__disclaimer {
  font-size: 0.7rem;
  color: var(--sc-lavender);
  line-height: 1.6;
  max-width: 640px;
}

.footer__copyright {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--sc-lavender);
  white-space: nowrap;
}


/* =================================================================
   6. SCREENER — Shared founder screening component
   ================================================================= */

.screener__counter {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sc-lavender);
  margin-bottom: 8px;
}
.screener__question {
  font-family: var(--font-primary);
  font-weight: var(--weight-regular);
  font-size: 1.05rem;
  color: var(--sc-charcoal);
  margin-bottom: 28px;
}
.screener__options {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.screener__btn {
  font-family: var(--font-primary);
  font-weight: var(--weight-light);
  font-size: 0.8rem;
  padding: 14px 32px;
  border: 1px solid var(--sc-divider);
  background: transparent;
  color: var(--sc-charcoal);
  cursor: pointer;
  transition: all 300ms var(--ease-spring);
  letter-spacing: 0.02em;
}
.screener__btn:hover {
  border-color: var(--sc-gold);
  color: var(--sc-violet);
  transform: translateY(-2px);
}

.screener__progress {
  width: 100%;
  max-width: 400px;
  height: 2px;
  background: var(--sc-divider);
  margin: 0 auto 40px;
  overflow: hidden;
}
.screener__progress-bar {
  height: 100%;
  width: 0%;
  background: var(--sc-gold);
  transition: width 400ms var(--ease-spring);
}

.screener__step {
  transition: opacity 250ms ease, transform 250ms ease;
}

.screener__result {
  max-width: 480px;
  margin: 0 auto;
  transition: opacity 250ms ease, transform 250ms ease;
}
.screener__result-title {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: 1.6rem;
  color: var(--sc-violet);
  margin-bottom: 16px;
}
.screener__result-text {
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--sc-violet-grey);
  margin-bottom: 24px;
}
.screener__result-cta {
  display: inline-block;
  font-weight: var(--weight-regular);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--sc-gold) !important;
  border-bottom: 1px solid var(--sc-gold-30);
  padding-bottom: 4px;
  transition: border-color 300ms ease;
}
.screener__result-cta:hover {
  border-color: var(--sc-gold);
}

.screener__reset {
  margin-top: 24px;
}
.screener__reset a {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: var(--tracking-labels);
  text-transform: uppercase;
  color: var(--sc-lavender) !important;
  transition: color 250ms ease;
}
.screener__reset a:hover {
  color: var(--sc-gold) !important;
}


/* =================================================================
   7. SCROLL PROGRESS THREAD
   ================================================================= */

.thread {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: var(--sc-gold);
  z-index: 300;
  pointer-events: none;
}


/* =================================================================
   8. WEB LABELS — Shared patterns
   ================================================================= */

.web-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sc-gold);
}

.web-heading {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  line-height: 1.08;
}

.web-rule {
  height: 1.5px;
  background: var(--sc-gold);
  will-change: width;
  width: 0;
}
.web-rule.revealed {
  width: 48px;
  transition: width 600ms var(--ease-spring);
}


/* =================================================================
   9. REVEAL ANIMATIONS — Shared scroll-triggered reveals
   ================================================================= */

.reveal {
  opacity: 0;
  transform: translateY(20px);
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--transition-web-reveal), transform var(--transition-web-reveal);
}


/* =================================================================
   10. RESPONSIVE — Web shared breakpoints
   ================================================================= */

@media (max-width: 991px) {
  .nav {
    padding: 16px 32px;
  }
  .nav__hamburger {
    display: flex;
  }
  .nav__links {
    display: none;
  }
  .nav__mobile-overlay {
    display: flex;
  }
  .footer__top {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 767px) {
  .nav {
    padding: 14px 24px;
  }
  .footer {
    padding: 48px 24px 32px;
  }
  .footer__bottom {
    flex-direction: column;
    gap: 16px;
  }
  .footer__legal-links {
    flex-wrap: wrap;
    gap: 16px 24px;
  }
}


/* =================================================================
   11. THE LANGUAGE (v6) — Fluid design tokens
   =================================================================
   Terminal-scaled, non-linear clamp() system.
   Three curves: DISPLAY (aggressive), READING (legible), SPACING (fastest).
   Reference: sample-terminal-scaled.html (10 April 2026)
   ================================================================= */

:root {
  /* ── Indent ── */
  --sc-indent:       clamp(16px, 3.79vw, 54px);

  /* ── Display — low floors, shrink aggressively ── */
  --lang-h1:         clamp(28px, 5.31vw, 76px);
  --lang-h2:         clamp(22px, 4.17vw, 60px);
  --lang-h3:         clamp(18px, 3.41vw, 49px);
  --lang-h4:         clamp(16px, 2.84vw, 41px);
  --lang-num:        clamp(36px, 7.58vw, 108px);
  --lang-stat:       clamp(32px, 6.82vw, 97px);

  /* ── Reading — high floors, legibility first ── */
  --lang-body:       clamp(15px, 2.08vw, 30px);
  --lang-tag:        clamp(9px, 1.33vw, 19px);
  --lang-sys:        clamp(9px, 1.33vw, 19px);
  --lang-nav-size:   clamp(11px, 1.52vw, 22px);
  --lang-nav-ext:    clamp(10px, 1.33vw, 19px);
  --lang-mono:       clamp(11px, 1.52vw, 22px);
  --lang-td:         clamp(13px, 1.90vw, 27px);
  --lang-city:       clamp(16px, 2.65vw, 38px);
  --lang-addr:       clamp(13px, 1.90vw, 27px);
  --lang-net:        clamp(12px, 1.71vw, 24px);
  --lang-col:        clamp(8px, 1.14vw, 16px);
  --lang-mark:       clamp(8px, 1.52vw, 22px);
  --lang-quote:      clamp(17px, 3.41vw, 49px);
  --lang-contact:    clamp(14px, 2.08vw, 30px);

  /* ── Structure — borders, rules ── */
  --lang-bdr:        clamp(1px, 0.19vw, 3px);
  --lang-bdr-sp:     clamp(2px, 0.35vw, 5px);

  /* ── Spacing — shrinks fastest ── */
  --lang-sp-xs:      clamp(6px, 1.52vw, 22px);
  --lang-sp-sm:      clamp(12px, 3.03vw, 43px);
  --lang-sp-md:      clamp(20px, 5.31vw, 76px);
  --lang-sp-lg:      clamp(40px, 11.37vw, 162px);
  --lang-sp-xl:      clamp(48px, 15.16vw, 216px);
  --lang-sp-2:       clamp(2px, 0.57vw, 8px);
  --lang-sp-4:       clamp(3px, 0.76vw, 11px);
  --lang-sp-6:       clamp(4px, 1.14vw, 16px);
  --lang-sp-8:       clamp(6px, 1.52vw, 22px);
  --lang-sp-10:      clamp(8px, 1.90vw, 27px);
  --lang-sp-12:      clamp(8px, 2.27vw, 32px);
  --lang-sp-14:      clamp(10px, 2.65vw, 38px);
  --lang-sp-20:      clamp(14px, 3.79vw, 54px);
  --lang-sp-24:      clamp(16px, 4.55vw, 65px);
  --lang-sp-32:      clamp(20px, 6.06vw, 86px);
  --lang-sp-36:      clamp(24px, 6.82vw, 97px);
  --lang-sp-40:      clamp(28px, 7.58vw, 108px);
  --lang-sp-48:      clamp(32px, 9.09vw, 130px);

  /* ── Decorative widths ── */
  --lang-gold-w:     clamp(20px, 4.55vw, 65px);
  --lang-gold-h:     clamp(1px, 0.28vw, 5px);
  --lang-gold-sm:    clamp(10px, 2.27vw, 32px);
  --lang-hr-w:       clamp(80px, 18.95vw, 270px);
}


/* =================================================================
   12. THE LANGUAGE — Element resets (scoped under body.lang)
   ================================================================= */

body.lang {
  background: var(--sc-violet);
  color: var(--sc-lavender);
  font-family: var(--font-primary);
  font-weight: var(--weight-light);
  font-size: var(--lang-body);
  line-height: 1.55;
  max-width: 72vw;
  overflow-x: hidden;
}

body.lang a {
  color: var(--sc-lavender);
  text-decoration: underline;
  text-decoration-color: var(--sc-gold);
  text-underline-offset: var(--lang-sp-2);
  text-decoration-thickness: var(--lang-bdr);
}
body.lang a:hover {
  text-decoration-color: var(--sc-cream);
  color: var(--sc-cream);
}

body.lang h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--lang-h1);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--sc-lavender);
}

/* Korean monumental nameplate — Black Han Sans, the Korean voice of the
   heavy GT Sectra hero. Applied by opt-in class on Hangul page-hero h1s
   only (문의, 지원) — never Latin (its Latin is crude), never recurring
   titles (those keep KoPub Batang via the --font-display fallback).
   Mirrors the paper system's cover-wordmark rule. Added 7 Jun 2026.
   Single-weight face → reset 900 to 400; clear the Latin tracking. */
body.lang h1.lang-h1--kr {
  font-family: var(--font-korean-display);
  font-weight: 400;
  letter-spacing: 0;
}

body.lang h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--lang-h2);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--sc-lavender);
}

body.lang h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--lang-h3);
  line-height: 1.1;
  color: var(--sc-lavender);
}

body.lang h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--lang-h4);
  line-height: 1.15;
  color: var(--sc-lavender);
}

body.lang hr {
  border: none;
  border-top: var(--lang-bdr) solid var(--sc-gold);
  margin: 0 0 0 var(--sc-indent);
  max-width: var(--lang-hr-w);
  opacity: 0.4;
}

body.lang img {
  display: block;
  height: auto;
}

body.lang blockquote {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-style: italic;
  font-size: var(--lang-quote);
  line-height: 1.3;
  color: var(--sc-lavender);
}

/* ── Dilettante tables — 90s Netscape ── */
body.lang table {
  border-collapse: separate;
  border-spacing: var(--lang-bdr-sp);
  width: auto;
  border: var(--lang-bdr) solid var(--sc-gold);
}
body.lang th,
body.lang td {
  border: var(--lang-bdr) solid var(--sc-gold);
  padding: var(--lang-sp-2) clamp(8px, 1.52vw, 22px);
  text-align: left;
}
body.lang th {
  font-family: var(--font-mono);
  font-size: var(--lang-tag);
  font-weight: var(--weight-regular);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sc-gold);
  white-space: nowrap;
}
body.lang td {
  font-size: var(--lang-td);
  font-weight: var(--weight-light);
  color: var(--sc-lavender);
}
body.lang td:first-child {
  font-weight: var(--weight-regular);
  color: var(--sc-cream);
}
body.lang td a {
  font-family: var(--font-mono);
  font-size: var(--lang-mono);
  color: var(--sc-lavender);
  text-decoration: none;
  letter-spacing: 0.03em;
}
body.lang td a:hover {
  color: var(--sc-cream);
}


/* =================================================================
   13. THE LANGUAGE — Components
   ================================================================= */

/* ── Ghost mark — fixed atmospheric ── */
.lang-ghost {
  position: fixed;
  right: -6%;
  top: 50%;
  transform: translateY(-50%);
  height: 160vh;
  width: auto;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
  color: var(--sc-lavender);
}

/* ── Page wrapper ── */
.lang-pg {
  position: relative;
  z-index: 1;
}

/* ── Terminal nav — fixed right ── */
.lang-nav {
  position: fixed;
  top: var(--lang-sp-sm);
  right: var(--lang-sp-sm);
  z-index: 10;
  text-align: right;
}
.lang-nav a {
  font-family: var(--font-mono);
  font-size: var(--lang-nav-size);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sc-lavender);
  opacity: 0.6;
  text-decoration: none;
  display: block;
  line-height: 2.2;
  transition: opacity 0.15s;
}
.lang-nav a:hover {
  opacity: 1;
  color: var(--sc-cream);
}
.lang-nav a[href^="http"] {
  text-transform: none;
  font-size: var(--lang-nav-ext);
  letter-spacing: 0.02em;
  opacity: 0.45;
}
.lang-nav a[href^="http"]:hover {
  opacity: 1;
}
.lang-nav__rule {
  display: block;
  width: clamp(14px, 2.65vw, 38px);
  height: var(--lang-bdr);
  background: var(--sc-gold);
  opacity: 0.7;
  margin: var(--lang-sp-4) 0 var(--lang-sp-4) auto;
}
.lang-nav__cursor {
  display: block;
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--lang-nav-size);
  color: var(--sc-gold);
  margin-top: var(--lang-sp-4);
  animation: lang-blink 1s step-end infinite;
}
@keyframes lang-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ── Mobile nav — horizontal bottom bar ── */
.lang-nav-mobile {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 10;
  background: rgba(26,20,69,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: var(--lang-bdr) solid rgba(202,170,99,0.25);
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  padding: clamp(8px, 2vw, 14px) clamp(10px, 3vw, 16px);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.lang-nav-mobile::-webkit-scrollbar { display: none; }
.lang-nav-mobile a {
  font-family: var(--font-mono);
  font-size: clamp(9px, 2.4vw, 13px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sc-lavender);
  opacity: 0.7;
  text-decoration: none;
  padding: clamp(4px, 1vw, 6px) clamp(6px, 1.5vw, 10px);
  display: inline-block;
}
.lang-nav-mobile a:active {
  opacity: 1;
  color: var(--sc-cream);
}
.lang-nav-mobile__cursor {
  font-family: var(--font-mono);
  font-size: clamp(9px, 2.4vw, 13px);
  color: var(--sc-gold);
  animation: lang-blink 1s step-end infinite;
  padding-left: clamp(4px, 1vw, 6px);
}

/* ── Tags ── */
.lang-tag {
  font-family: var(--font-mono);
  font-size: var(--lang-tag);
  font-weight: var(--weight-regular);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--lang-sp-2) clamp(5px, 0.95vw, 14px) clamp(1px, 0.19vw, 3px);
  display: inline-block;
  line-height: 1.4;
}
.lang-tag--gold  { background: rgba(202,170,99,0.15); color: var(--sc-gold); }
.lang-tag--ghost { background: rgba(250,249,245,0.07); color: var(--sc-lavender); }
.lang-tag--solid { background: rgba(250,249,245,0.12); color: var(--sc-cream); }

/* ── CTA pill — anchor styled as a gold tag pill ── */
a.lang-cta-pill {
  text-decoration: none;
  transition: background 200ms ease, color 200ms ease;
}
a.lang-cta-pill:hover {
  background: rgba(202,170,99,0.28);
  color: var(--sc-cream);
  text-decoration: none;
}

/* ── Tag group ── */
.lang-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lang-sp-2);
}

/* ── System label (gold mono, e.g. "Saint Clair", "About") ── */
.lang-sys {
  font-family: var(--font-mono);
  font-size: var(--lang-sys);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sc-gold);
}

/* ── Mono link (domain arrows) ── */
.lang-mono-link {
  font-family: var(--font-mono);
  font-size: var(--lang-mono);
  letter-spacing: 0.05em;
  color: var(--sc-lavender);
  text-decoration: none;
}
.lang-mono-link:hover {
  color: var(--sc-cream);
}

/* ── Gold rule (decorative bar) ── */
.lang-gold-rule {
  width: var(--lang-gold-w);
  height: var(--lang-gold-h);
  background: var(--sc-gold);
}
.lang-gold-rule--sm {
  width: var(--lang-gold-sm);
}

/* ── Pillar number (01, 02, 03) ── */
.lang-num {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--lang-num);
  line-height: 0.85;
  color: var(--sc-gold);
  opacity: 0.4;
}

/* ── Stat number (950+, etc.) ── */
.lang-stat {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--lang-stat);
  line-height: 0.9;
  color: var(--sc-gold);
}

/* ── Caption (image/stat labels) ── */
.lang-caption {
  font-family: var(--font-mono);
  font-size: var(--lang-col);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sc-lavender);
}

/* ── MI Feed ── */
.lang-feed__item {
  padding: var(--lang-sp-6) 0;
  border-bottom: var(--lang-bdr) solid rgba(250,249,245,0.12);
}
.lang-feed__item:last-child {
  border-bottom: none;
}
.lang-feed__date {
  font-family: var(--font-mono);
  font-size: var(--lang-sys);
  color: var(--sc-lavender);
  letter-spacing: 0.05em;
}
.lang-feed__link {
  font-size: var(--lang-body);
  font-weight: var(--weight-light);
  text-decoration-color: transparent;
  line-height: 1.4;
}

/* ── Feed "more" link ── */
.lang-feed__more {
  font-family: var(--font-mono);
  font-size: var(--lang-sys);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sc-lavender);
}

/* ── Presence entries ── */
.lang-presence {
  padding-bottom: var(--lang-sp-10);
  border-bottom: var(--lang-bdr) solid rgba(202,170,99,0.2);
}
.lang-presence + .lang-presence {
  padding-top: var(--lang-sp-10);
}
.lang-presence:last-child {
  border-bottom: none;
  padding-top: var(--lang-sp-10);
}
.lang-presence__city {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--lang-city);
}
.lang-presence__addr {
  font-size: var(--lang-addr);
  color: var(--sc-lavender);
  line-height: 1.6;
  margin-top: var(--lang-sp-2);
}

/* ── Contact block ── */
.lang-contact {
  font-family: var(--font-mono);
  font-size: var(--lang-contact);
  color: var(--sc-lavender);
  line-height: 1.8;
  letter-spacing: 0.01em;
}
.lang-contact a {
  color: var(--sc-cream);
  text-decoration: none;
}
.lang-contact a.lang-contact--muted {
  color: var(--sc-lavender);
}

/* ── Network directory ── */
.lang-directory {
  font-family: var(--font-mono);
  font-size: var(--lang-net);
  line-height: 2;
  color: var(--sc-lavender);
  letter-spacing: 0.02em;
}
.lang-directory a {
  color: var(--sc-lavender);
  text-decoration-color: transparent;
}

/* ── Colophon ── */
.lang-colophon {
  display: flex;
  align-items: center;
  gap: var(--lang-sp-4);
}
.lang-colophon__mark {
  width: clamp(5px, 0.95vw, 14px);
}
.lang-colophon__text {
  font-family: var(--font-mono);
  font-size: var(--lang-col);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sc-lavender);
  opacity: 0.5;
}

/* ── Small header mark ── */
.lang-mark {
  width: var(--lang-mark);
}

/* ── Image widths (dilettante — various sizes) ── */
.lang-img--hero    { width: clamp(280px, 56.84vw, 810px); max-width: 100%; }
.lang-img--feature { width: clamp(220px, 45.47vw, 648px); max-width: 100%; }
.lang-img--portrait { width: clamp(120px, 26.53vw, 378px); max-width: 85%; }

/* ── Heading variants ── */
.lang-h3--bold {
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.lang-h3--name {
  font-size: clamp(20px, 3.79vw, 54px);
  line-height: 1.05;
}

/* ── Caption dimmed (opacity variant) ── */
.lang-caption--dim {
  opacity: 0.5;
}

/* ── Legal link (small mono, footer context) ── */
.lang-legal-link {
  font-family: var(--font-mono);
  font-size: var(--lang-col);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sc-lavender);
  text-decoration: none;
}
.lang-legal-link:hover {
  color: var(--sc-cream);
}


/* =================================================================
   14. THE LANGUAGE — Utilities
   ================================================================= */

/* ── Indent (standard left padding) ── */
.lang-indent {
  padding-left: var(--sc-indent);
}

/* ── Table wrapper (indent + horizontal scroll) ── */
.lang-table-wrap {
  padding-left: var(--sc-indent);
  overflow-x: auto;
}

/* ── Spacers (height-only divs) ── */
.lang-sp-xs  { height: var(--lang-sp-xs); }
.lang-sp-sm  { height: var(--lang-sp-sm); }
.lang-sp-md  { height: var(--lang-sp-md); }
.lang-sp-lg  { height: var(--lang-sp-lg); }
.lang-sp-xl  { height: var(--lang-sp-xl); }
.lang-sp-2   { height: var(--lang-sp-2); }
.lang-sp-4   { height: var(--lang-sp-4); }
.lang-sp-6   { height: var(--lang-sp-6); }
.lang-sp-8   { height: var(--lang-sp-8); }
.lang-sp-10  { height: var(--lang-sp-10); }
.lang-sp-12  { height: var(--lang-sp-12); }
.lang-sp-14  { height: var(--lang-sp-14); }
.lang-sp-20  { height: var(--lang-sp-20); }
.lang-sp-24  { height: var(--lang-sp-24); }
.lang-sp-32  { height: var(--lang-sp-32); }
.lang-sp-36  { height: var(--lang-sp-36); }
.lang-sp-40  { height: var(--lang-sp-40); }
.lang-sp-48  { height: var(--lang-sp-48); }


/* =================================================================
   15. THE LANGUAGE — Responsive
   ================================================================= */

@media (max-width: 600px) {
  body.lang {
    max-width: 100%;
    padding-bottom: 48px;
  }
  .lang-nav { display: none; }
  .lang-nav-mobile { display: block; }
  .lang-ghost { height: 80vh; right: -15%; opacity: 0.04; }
  .lang-table-wrap {
    padding-left: 0 !important;
    margin-left: 12px;
    margin-right: 12px;
    -webkit-overflow-scrolling: touch;
  }
}

@media (min-width: 1440px) {
  body.lang { max-width: 1020px; }
}


/* =================================================================
   16. THE LANGUAGE — Screener (saintclair.global, Korean only)
   =================================================================
   Terminal-log progressive reveal. Single <form>, all six fieldsets
   in DOM. Active fieldset shows full options + blinking cursor.
   Answered fieldsets keep prompt + question + chosen answer
   visible (transcript). Upcoming fieldsets are hidden until the
   previous is answered. Confirm appears when all six are answered.
   On submit, the result block replaces the form inline.
   ================================================================= */

.lang-screener {
  /* hosted inside .lang-pg column; no extra padding */
}
.lang-screener__intro {
  font-family: var(--font-mono);
  font-size: var(--lang-mono);
  letter-spacing: 0.02em;
  color: var(--sc-cream);
  opacity: 0.85;
  margin: 0;
}
/* Accelerator invitation — public-programme operators bypass the screener.
   Reference: 2026-05-03_Diane_Build_Brief_Screener_v1.md §3.
   Caption-scale monospace, lavender, framed by a gold rule above and below. */
.lang-screener__accelerator-invitation {
  border-top: 1px solid var(--sc-gold);
  border-bottom: 1px solid var(--sc-gold);
  padding: var(--lang-sp-10) 0;
  margin: 0;
}
.lang-screener__accelerator-invitation p {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--lang-tag);
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--sc-lavender);
}
.lang-screener__form {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}
.lang-screener__q {
  display: none;
  margin: 0 0 var(--lang-sp-20) 0;
  padding: 0;
  border: 0;
}
.lang-screener__q--active,
.lang-screener__q--answered {
  display: block;
}
.lang-screener__line {
  display: flex;
  align-items: baseline;
  gap: var(--lang-sp-4);
}
.lang-screener__prompt {
  font-family: var(--font-mono);
  font-size: var(--lang-mono);
  font-weight: var(--weight-regular);
  letter-spacing: 0.04em;
  color: var(--sc-gold);
}
.lang-screener__cursor {
  font-family: var(--font-mono);
  font-size: var(--lang-mono);
  color: var(--sc-gold);
  animation: lang-blink 1s step-end infinite;
}
.lang-screener__q--answered .lang-screener__cursor {
  display: none;
}
.lang-screener__legend {
  display: block;
  margin: var(--lang-sp-6) 0 var(--lang-sp-10) 0;
  padding: 0;
  font-family: var(--font-primary);
  font-weight: var(--weight-light);
  font-size: var(--lang-body);
  line-height: 1.55;
  color: var(--sc-cream);
}
.lang-screener__opts {
  display: flex;
  flex-direction: column;
  gap: var(--lang-sp-6);
}
.lang-screener__opts label {
  display: flex;
  align-items: baseline;
  gap: var(--lang-sp-8);
  font-family: var(--font-mono);
  font-size: var(--lang-mono);
  letter-spacing: 0.02em;
  color: var(--sc-lavender);
  cursor: pointer;
  padding: var(--lang-sp-2) 0;
  transition: color 200ms ease;
}
.lang-screener__opts label:hover {
  color: var(--sc-cream);
}
.lang-screener__opts input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: clamp(10px, 1.33vw, 16px);
  height: clamp(10px, 1.33vw, 16px);
  border: var(--lang-bdr) solid var(--sc-lavender);
  border-radius: 50%;
  background: transparent;
  margin: 0;
  flex: 0 0 auto;
  position: relative;
  top: clamp(2px, 0.3vw, 4px);
  cursor: pointer;
  transition: border-color 200ms ease;
}
.lang-screener__opts input[type="radio"]:hover {
  border-color: var(--sc-cream);
}
.lang-screener__opts input[type="radio"]:checked {
  border-color: var(--sc-gold);
  background: radial-gradient(circle, var(--sc-gold) 40%, transparent 45%);
}
/* Answered state: hide unselected options, gold the selected */
.lang-screener__q--answered .lang-screener__opts label:not(:has(input:checked)) {
  display: none;
}
.lang-screener__q--answered .lang-screener__opts label:has(input:checked) {
  color: var(--sc-gold);
  cursor: default;
  pointer-events: none;
}
.lang-screener__q--answered .lang-screener__opts input[type="radio"] {
  pointer-events: none;
}
.lang-screener__submit {
  margin-top: var(--lang-sp-14);
  display: flex;
  align-items: baseline;
  gap: var(--lang-sp-10);
}
/* Honour the HTML [hidden] attribute against the rule above.
   Sir Marcus inline patch 30 May 2026, migrated to canonical CSS
   30 May 2026 per validation report v1.1 §4.4. The screener relocates
   from /ko/index to /ko/apply/ and /apply/; this rule covers both
   surfaces and prevents future inline overrides. */
.lang-screener__submit[hidden] {
  display: none !important;
}
.lang-screener__btn {
  display: inline-block;
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--lang-mono);
  letter-spacing: 0.06em;
  color: var(--sc-gold);
  cursor: pointer;
  text-transform: uppercase;
  transition: opacity 200ms ease;
}
.lang-screener__btn:hover {
  opacity: 0.7;
}
.lang-screener__error {
  margin: var(--lang-sp-8) 0 0 0;
  font-family: var(--font-mono);
  font-size: var(--lang-tag);
  letter-spacing: 0.02em;
  color: var(--sc-lavender);
  opacity: 0.7;
}
.lang-screener__result {
  margin: 0;
  padding: 0;
}
.lang-screener__result-headline {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: var(--lang-h3);
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--sc-lavender);
  text-transform: uppercase;
}
.lang-screener__result-lede {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: var(--weight-light);
  font-size: var(--lang-body);
  line-height: 1.4;
  color: var(--sc-cream);
  font-style: italic;
}
.lang-screener__result p {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: var(--weight-light);
  font-size: var(--lang-body);
  line-height: 1.55;
  color: var(--sc-lavender);
}
.lang-screener__result em {
  color: var(--sc-cream);
  font-style: italic;
}
.lang-screener__result a.lang-mono-link {
  /* inherits .lang-mono-link styling from elsewhere in stylesheet */
}

@media (max-width: 600px) {
  .lang-screener__opts label {
    align-items: flex-start;
  }
  .lang-screener__submit {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--lang-sp-6);
  }
}


/* =================================================================
   17. THE LANGUAGE — Paper Form (white paper offer)
   =================================================================
   Editorial form treatment per Sir Marcus's "library, not mailing
   list" brief. No boxed inputs, no card containers, no urgency.
   Email input is a single line with a lavender bottom rule. Custom
   checkbox. Submit rendered as gold pill (matching .lang-cta-pill).
   Used on Section 5 (international) and the Korean hero, with
   Coco's English copy and Mr. Lee's Korean copy respectively.

   Strips Kit's default form styling — we keep their data attrs and
   their JS hooks (formkit-form, formkit-input, formkit-submit
   classes + data-element attributes) so their JS continues to
   handle AJAX submission and redirect, but visual style is ours.
   ================================================================= */

.lang-paper-form {
  display: block;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.lang-paper-form__preamble {
  font-family: var(--font-primary);
  font-weight: var(--weight-light);
  font-size: var(--lang-body);
  line-height: 1.55;
  color: var(--sc-cream);
  margin: 0;
}

/* Korean editorial title — used on the hero white paper announcement.
   KoPub Batang (var --font-korean) provides hangul gravitas comparable to
   GT Sectra in Latin. h3 scale (not h2) accommodates the longer Korean
   line without awkward wraps. */
.lang-paper-form__title-ko {
  font-family: var(--font-korean);
  font-weight: 500;
  font-size: var(--lang-h3);
  line-height: 1.35;
  color: var(--sc-cream);
  margin: 0;
  letter-spacing: 0;
}
.lang-paper-form__description-ko {
  font-family: var(--font-primary);
  font-weight: var(--weight-light);
  font-size: var(--lang-body);
  line-height: 1.55;
  color: var(--sc-lavender);
  margin: 0;
}

.lang-paper-form__field {
  margin-top: var(--lang-sp-14);
}

/* Email input — single line, bottom rule only */
.lang-paper-form input[type="email"],
.lang-paper-form .formkit-input[type="email"] {
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: var(--lang-bdr) solid var(--sc-lavender);
  border-radius: 0;
  padding: var(--lang-sp-4) 0;
  font-family: var(--font-mono);
  font-size: var(--lang-mono);
  letter-spacing: 0.02em;
  color: var(--sc-cream);
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 200ms ease;
}
.lang-paper-form input[type="email"]:focus,
.lang-paper-form .formkit-input[type="email"]:focus {
  outline: none;
  border-bottom-color: var(--sc-gold);
}
.lang-paper-form input[type="email"]::placeholder,
.lang-paper-form .formkit-input[type="email"]::placeholder {
  color: var(--sc-lavender);
  opacity: 0.6;
}

/* Hide Kit's text field for ongoing_consent — we mirror state from
   the visible checkbox into a hidden input of the same name. */
.lang-paper-form .formkit-field input[name^="fields["] {
  display: none;
}
.lang-paper-form .formkit-field:has(input[name^="fields["]) {
  display: none;
}

/* Optional consent — visible checkbox, mirrored to hidden Kit field */
.lang-paper-form__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--lang-sp-8);
  margin-top: var(--lang-sp-14);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--lang-mono);
  letter-spacing: 0.02em;
  color: var(--sc-lavender);
  line-height: 1.5;
  transition: color 200ms ease;
}
.lang-paper-form__consent:hover { color: var(--sc-cream); }
.lang-paper-form__consent input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: clamp(12px, 1.52vw, 18px);
  height: clamp(12px, 1.52vw, 18px);
  border: var(--lang-bdr) solid var(--sc-lavender);
  border-radius: 0;
  background: transparent;
  margin: 0;
  position: relative;
  top: clamp(2px, 0.3vw, 4px);
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease;
}
.lang-paper-form__consent input[type="checkbox"]:hover {
  border-color: var(--sc-cream);
}
.lang-paper-form__consent input[type="checkbox"]:checked {
  border-color: var(--sc-gold);
  background: var(--sc-gold);
}
.lang-paper-form__consent input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 28%;
  top: 8%;
  width: 30%;
  height: 60%;
  border-right: 2px solid var(--sc-violet);
  border-bottom: 2px solid var(--sc-violet);
  transform: rotate(45deg);
}

/* Submit button — gold pill, same vocabulary as .lang-cta-pill */
.lang-paper-form__submit-row {
  margin-top: var(--lang-sp-14);
}
.lang-paper-form button[type="submit"],
.lang-paper-form .formkit-submit {
  display: inline-block;
  background: rgba(202,170,99,0.15);
  border: 0;
  padding: 0;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--lang-tag);
  font-weight: var(--weight-regular);
  letter-spacing: 0.08em;
  color: var(--sc-gold);
  text-transform: uppercase;
  cursor: pointer;
  line-height: 1.4;
  border-radius: 0;
  transition: background 200ms ease, color 200ms ease;
  position: relative;
  overflow: visible;
}
.lang-paper-form button[type="submit"] > span,
.lang-paper-form .formkit-submit > span {
  display: inline-block;
  padding: var(--lang-sp-2) clamp(5px, 0.95vw, 14px) clamp(1px, 0.19vw, 3px);
  transition: none;
}
.lang-paper-form button[type="submit"]:hover,
.lang-paper-form .formkit-submit:hover {
  background: rgba(202,170,99,0.28);
  color: var(--sc-cream);
}
.lang-paper-form button[type="submit"]:hover > span,
.lang-paper-form .formkit-submit:hover > span {
  background-color: transparent;
}

/* Privacy link below the submit (footnote-style) */
.lang-paper-form__privacy {
  margin: var(--lang-sp-12) 0 0 0;
  font-family: var(--font-mono);
  font-size: var(--lang-tag);
  letter-spacing: 0.04em;
  color: var(--sc-lavender);
  opacity: 0.7;
}
.lang-paper-form__privacy a {
  color: inherit;
  text-decoration-color: var(--sc-lavender);
}

/* Kit's error display restyled */
.lang-paper-form .formkit-alert {
  background: transparent;
  border: 0;
  border-left: var(--lang-bdr-sp) solid var(--sc-gold);
  border-radius: 0;
  padding: var(--lang-sp-4) var(--lang-sp-8);
  margin: var(--lang-sp-10) 0 0 0;
  font-family: var(--font-mono);
  font-size: var(--lang-tag);
  color: var(--sc-cream);
  text-align: left;
  width: auto;
}
.lang-paper-form .formkit-alert:empty { display: none; }

/* Dim Kit's "Built with Kit" branding — kept for ToS compliance,
   reduced to discreet footnote scale. */
.lang-paper-form .formkit-powered-by-convertkit-container {
  opacity: 0.25;
  margin: var(--lang-sp-14) 0 0 0 !important;
  justify-content: flex-start !important;
}
.lang-paper-form .formkit-powered-by-convertkit-container:hover {
  opacity: 0.5;
}


/* ═══════════════════════════════════════════════════════════════
   RECONCILIATION NOTE — 30 May 2026

   On 30 May 2026 this canonical file was reset to match
   `platform.saintclair.sg/htdocs/assetsc/css/saint-clair-web.css`.
   The two had diverged: between the original creation (20 Feb 2026)
   and 30 May 2026, edits landed directly on the platform deploy
   without round-tripping through this canonical — chiefly the
   screener block (3 May 2026) and Sir Marcus's inline-CSS fix
   (30 May 2026, validation report v1.1 §4.4).

   Going forward, all edits are made HERE first, then copied to
   the platform deploy via the protocol documented in Diane's
   PRE-FLIGHT B/F. The webserver symlink chain delivers from
   platform to all sites — including saintclair.global, .sg,
   .asia, .capital, and .ltd.

   — Diane, Creative Director
   ═══════════════════════════════════════════════════════════════ */