/*
 * ═══════════════════════════════════════════════════════════════
 * 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);
}

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);
}
.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.
   Noto Serif KR 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;
}