/* ============================================================================
   KFCI — WEB  (Layer 2c)
   Website, holding page, and the HTML brand book.
   Imports base (L1) → tokens (L0). Class prefix: kfci-*
   The cross is the layout system: monumental in reach, discreet in weight.
   ============================================================================ */

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

/* ── Shell ───────────────────────────────────────────────────────────────── */
.kfci-site { max-width: 1200px; margin: 0 auto; padding: 0 var(--kfci-space-32); }
.kfci-bleed { width: 100%; }

/* ── The cross-page: a framed field organised by an (a)symmetric cross ─────
   Place .kfci-cross on a positioned container. The cadre and the cross are
   drawn for you. Offsets are tunable per surface via custom properties.      */
.kfci-frame {
  position: relative;
  border: var(--kfci-cadre-width) solid var(--kfci-cadre-color);
  border-radius: var(--kfci-radius);
}
.kfci-cross { position: relative; --kfci-cx: 50%; --kfci-cy: 50%; }
.kfci-cross::before,                      /* vertical line */
.kfci-cross::after {                      /* horizontal line */
  content: "";
  position: absolute;
  background: var(--kfci-cross-color);
  opacity: var(--kfci-cross-opacity);
  pointer-events: none;
}
.kfci-cross::before { top: 0; bottom: 0; left: var(--kfci-cx); width: var(--kfci-cross-width); }
.kfci-cross::after  { left: 0; right: 0; top: var(--kfci-cy);  height: var(--kfci-cross-width); }

/* ── The seal, sized ─────────────────────────────────────────────────────── */
.kfci-seal--sm { width: 56px;  }
.kfci-seal--md { width: 96px;  }
.kfci-seal--lg { width: 160px; }

/* ── Wordmark lockup ─────────────────────────────────────────────────────── */
.kfci-wordmark { line-height: 1.15; }
.kfci-wordmark__eyebrow { display:block; }
.kfci-wordmark__name {
  font-family: var(--kfci-font-display);
  color: var(--kfci-garnet);
  font-size: clamp(20px, 2.2vw, 30px);
  letter-spacing: var(--kfci-track-snug);
  white-space: nowrap;
}
.kfci-wordmark__kr { display:block; font-family: var(--kfci-font-korean); color: var(--kfci-muted); letter-spacing: var(--kfci-track-wide); white-space: nowrap; }

/* ── Navigation ──────────────────────────────────────────────────────────── */
.kfci-nav { display:flex; flex-wrap: nowrap; gap: var(--kfci-space-32); align-items:center; }
.kfci-nav__link { font-family: var(--kfci-font-primary); font-weight: var(--kfci-weight-regular); color: var(--kfci-ink); font-size: 14px; white-space: nowrap; }
.kfci-nav__link:hover { color: var(--kfci-garnet); }
.kfci-nav__lang { font-size: 13px; color: var(--kfci-garnet); letter-spacing: var(--kfci-track-wide); white-space: nowrap; }

/* Nav dropdown — the Circle access point (CSS-only; opens on hover + keyboard focus) */
.kfci-nav__group { position: relative; }
.kfci-nav__trigger {
  font-family: var(--kfci-font-primary); font-weight: var(--kfci-weight-regular);
  color: var(--kfci-ink); font-size: 14px; background: none; border: 0; padding: 0;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.kfci-nav__trigger:hover { color: var(--kfci-garnet); }
.kfci-nav__caret { width: 8px; height: 5px; transition: transform 0.2s; }
.kfci-nav__group:hover .kfci-nav__caret,
.kfci-nav__group:focus-within .kfci-nav__caret { transform: rotate(180deg); }
.kfci-nav__menu {
  display: none; position: absolute; right: 0; top: calc(100% + 12px); min-width: 150px;
  background: var(--kfci-cream); border: 1px solid var(--kfci-gold-30);
  padding: 8px 0; z-index: 50;
}
/* Transparent bridge over the 12px gap — keeps :hover continuous from trigger to menu */
.kfci-nav__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.kfci-nav__group:hover .kfci-nav__menu,
.kfci-nav__group:focus-within .kfci-nav__menu { display: block; }
.kfci-nav__menu-item {
  display: block; font-family: var(--kfci-font-primary); font-size: 14px;
  color: var(--kfci-ink); padding: 8px 18px; white-space: nowrap;
}
.kfci-nav__menu-item:hover { color: var(--kfci-garnet); background: var(--kfci-gold-10, rgba(202,170,99,0.08)); }

/* ── The garnet chamber ──────────────────────────────────────────────────── */
.kfci-chamber {
  background: var(--kfci-garnet);
  color: var(--kfci-cream);
  border-radius: var(--kfci-radius);
  padding: var(--kfci-space-32);
}
.kfci-chamber .kfci-eyebrow { color: var(--kfci-gold); }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.kfci-hero__title {
  font-family: var(--kfci-font-display);
  font-weight: var(--kfci-weight-regular);
  color: var(--kfci-garnet);
  font-size: clamp(46px, 7vw, 90px);
  line-height: 0.98;
  letter-spacing: -0.02em;
}
.kfci-hero__lede { color: var(--kfci-ink); max-width: 44ch; margin-top: var(--kfci-space-24);
  font-family: var(--kfci-font-primary); font-weight: var(--kfci-weight-light); font-size: 17px; line-height: 1.62; }
.kfci-hero__seal { display:block; width:100%; height:auto; border-radius: var(--kfci-radius); }

/* ── Button ──────────────────────────────────────────────────────────────── */
.kfci-btn {
  display:inline-block;
  background: var(--kfci-garnet);
  color: var(--kfci-cream);
  font-family: var(--kfci-font-primary);
  font-size: 13px;
  letter-spacing: var(--kfci-track-wide);
  text-transform: uppercase;
  padding: 14px 26px;
  border-radius: var(--kfci-radius);
  transition: background var(--kfci-transition);
}
.kfci-btn:hover { background: var(--kfci-garnet-deep); color: var(--kfci-cream); }

/* ============================================================================
   BRAND-BOOK COMPONENTS (system-scoped; used by brand-book.html)
   ============================================================================ */
.kfci-bk { background: var(--kfci-cream); }
.kfci-bk__section { padding: var(--kfci-space-64) 0; border-top: 1px solid var(--kfci-divider); }
.kfci-bk__section:first-of-type { border-top: 0; }
.kfci-bk__lead { font-family: var(--kfci-font-display); font-size: clamp(24px,2.7vw,34px); line-height: 1.12; letter-spacing:-0.01em; color: var(--kfci-garnet); max-width: 30ch; }
.kfci-bk__body { max-width: 64ch; margin-top: var(--kfci-space-16); color: var(--kfci-ink); }
.kfci-bk__grid { display:grid; gap: var(--kfci-space-24); }
.kfci-bk__grid--2 { grid-template-columns: repeat(2, 1fr); }
.kfci-bk__grid--3 { grid-template-columns: repeat(3, 1fr); }
.kfci-bk__grid--4 { grid-template-columns: repeat(4, 1fr); }

/* swatches */
.kfci-swatch__chip { height: 90px; border-radius: var(--kfci-radius); border: 1px solid var(--kfci-divider); }
.kfci-swatch__name { margin-top: var(--kfci-space-8); font-size: 12px; letter-spacing: var(--kfci-track-wide); color: var(--kfci-ink); text-transform: uppercase; }
.kfci-swatch__hex  { font-family: var(--kfci-font-primary); font-size: 11px; color: var(--kfci-muted); }

/* swatch ground tokens (no hardcoded colour in the HTML) */
.kfci-swatch__chip--cream  { background: var(--kfci-cream); }
.kfci-swatch__chip--garnet { background: var(--kfci-garnet); border-color: var(--kfci-garnet); }
.kfci-swatch__chip--gold   { background: var(--kfci-gold);   border-color: var(--kfci-gold); }
.kfci-swatch__chip--ink    { background: var(--kfci-ink);    border-color: var(--kfci-ink); }

/* book masthead bar */
.kfci-bk__top { display:flex; align-items:center; justify-content:space-between; padding: var(--kfci-space-24) 0; }
.kfci-bk__hero { border-radius: var(--kfci-radius); padding: var(--kfci-space-64) var(--kfci-space-48); margin: var(--kfci-space-16) 0 var(--kfci-space-32); }
.kfci-bk__hero .kfci-hero__title { color: var(--kfci-cream); }

/* type specimen */
.kfci-spec { display:grid; grid-template-columns: 180px 1fr; gap: var(--kfci-space-24); align-items: baseline; padding: var(--kfci-space-16) 0; border-top: 1px solid var(--kfci-divider); }
.kfci-spec__label { font-size: 11px; letter-spacing: var(--kfci-track-label); text-transform: uppercase; color: var(--kfci-muted); }
.kfci-spec__face--display { font-family: var(--kfci-font-display); font-size: 34px; color: var(--kfci-garnet); }
.kfci-spec__face--sans { font-family: var(--kfci-font-primary); font-size: 20px; letter-spacing: var(--kfci-track-wide); color: var(--kfci-ink); }
.kfci-spec__face--korean { font-family: var(--kfci-font-korean); font-size: 28px; color: var(--kfci-ink); }

/* asset figure */
.kfci-fig { border: 1px solid var(--kfci-divider); border-radius: var(--kfci-radius); overflow: hidden; background: var(--kfci-white); }
.kfci-fig img { display:block; width: 100%; height: auto; }
.kfci-fig__cap { font-size: 12px; color: var(--kfci-muted); padding: var(--kfci-space-12) var(--kfci-space-16); }

/* definition rows (do / don't, rules) */
.kfci-rule-row { display:flex; gap: var(--kfci-space-12); padding: var(--kfci-space-8) 0; }
.kfci-rule-row__key { color: var(--kfci-garnet); min-width: 1.4em; }

/* footer / endorsement */
.kfci-endorse { font-size: 11px; letter-spacing: var(--kfci-track-wide); color: var(--kfci-faint); }

/* ============================================================================
   SITE — header, sections, bands, cards, footer (homepage and inner pages)
   ============================================================================ */
.kfci-header { display:flex; align-items:center; justify-content:space-between; padding: var(--kfci-space-24) 0; border-bottom: 1px solid var(--kfci-gold-30); }
.kfci-header__id { display:flex; align-items:center; gap: var(--kfci-space-12); }
.kfci-header__id img { width: 44px; height: 44px; display:block; }
.kfci-section { padding: var(--kfci-space-64) 0; border-top: 1px solid var(--kfci-divider); }
.kfci-section:first-of-type { border-top: 0; }
.kfci-band { background: var(--kfci-garnet); color: var(--kfci-cream); }
.kfci-band .kfci-eyebrow { color: var(--kfci-gold); }
.kfci-band .kfci-hero__title { color: var(--kfci-cream); }
.kfci-cols { display:grid; gap: var(--kfci-space-24); margin-top: var(--kfci-space-32); }
.kfci-cols--2 { grid-template-columns: repeat(2,1fr); }
.kfci-cols--3 { grid-template-columns: repeat(3,1fr); }
.kfci-cols--4 { grid-template-columns: repeat(4,1fr); }
.kfci-card { border:1px solid var(--kfci-divider); border-radius: var(--kfci-radius); padding: var(--kfci-space-24); }
.kfci-card__num { font-family: var(--kfci-font-primary); font-weight: var(--kfci-weight-medium); font-size: 11px; letter-spacing: var(--kfci-track-wide); color: var(--kfci-gold); }
.kfci-card__title { font-family: var(--kfci-font-display); color: var(--kfci-garnet); font-size: 19px; margin-top: 6px; }
.kfci-cols .kfci-eyebrow + .kfci-gold-rule { margin: 10px 0 14px; }
.kfci-hero-chamber { display:grid; place-items:center; min-height: 360px; }
.kfci-hero-chamber__mark { font-family: var(--kfci-font-korean); font-weight: var(--kfci-weight-korean-bold); font-size: clamp(48px,8vw,96px); letter-spacing: 0.14em; color: var(--kfci-cream); }
.kfci-footer { background: var(--kfci-ink); color: var(--kfci-cream); padding: var(--kfci-space-48) 0; }
.kfci-footer a { color: var(--kfci-gold); }
.kfci-footer__row { display:flex; justify-content:space-between; gap: var(--kfci-space-32); flex-wrap:wrap; }
@media (max-width: 820px){ .kfci-cols--3,.kfci-cols--4{ grid-template-columns:repeat(2,1fr);} }
@media (max-width: 560px){ .kfci-cols--2{ grid-template-columns:1fr;} }

/* ============================================================================
   HOLDING PAGE (web layer) — a framed garnet field, the cross, the seal text
   ============================================================================ */
.kfci-holding { min-height: 100vh; background: var(--kfci-garnet); color: var(--kfci-cream); display: grid; place-items: center; padding: var(--kfci-space-32); }
.kfci-holding__field { position: relative; width: min(640px, 90vw); padding: 64px 40px; text-align: center; }
.kfci-holding__field.kfci-frame { border-color: var(--kfci-gold-50); }
.kfci-holding .kfci-eyebrow { color: var(--kfci-gold); }
.kfci-holding__mark { font-family: var(--kfci-font-korean); font-weight: var(--kfci-weight-korean-bold); color: var(--kfci-cream); font-size: clamp(48px, 11vw, 88px); letter-spacing: 0.14em; line-height: 1; }
.kfci-holding__name { font-family: var(--kfci-font-display); color: var(--kfci-cream); font-size: clamp(22px, 3vw, 30px); margin-top: var(--kfci-space-24); }
.kfci-holding__kr { font-family: var(--kfci-font-korean); color: var(--kfci-cream-70); letter-spacing: var(--kfci-track-wide); margin-top: 4px; }
.kfci-holding__meta { color: var(--kfci-cream-70); font-size: 13px; letter-spacing: var(--kfci-track-wide); }
.kfci-holding__contact { color: var(--kfci-gold); margin-top: var(--kfci-space-8); display:inline-block; }
.kfci-holding .kfci-gold-rule { margin: var(--kfci-space-24) auto; }
.kfci-holding__endorse { color: var(--kfci-cream-70); font-size: 11px; letter-spacing: var(--kfci-track-wide); margin-top: var(--kfci-space-32); }

@media (max-width: 820px) {
  .kfci-bk__grid--3, .kfci-bk__grid--4 { grid-template-columns: repeat(2,1fr); }
  .kfci-spec { grid-template-columns: 1fr; gap: var(--kfci-space-8); }
}

/* ── Refinements (21 Jun) — hero rhythm · band legibility · contained cover ── */
.kfci-hero__copy .kfci-eyebrow { display:block; margin-bottom: 22px; }
.kfci-hero__copy .kfci-hero__title { margin: 0; }
.kfci-hero__copy .kfci-hero__lede { margin: 26px 0 0; max-width: 38ch; }
.kfci-hero__copy .kfci-cta { margin: 34px 0 0; }

/* garnet band — legible lede + inverted (cream) button */
.kfci-band .kfci-hero__lede { color: var(--kfci-cream); opacity: 0.82; }
.kfci-band .kfci-btn { background: var(--kfci-cream); color: var(--kfci-garnet); }
.kfci-band .kfci-btn:hover { background: #ffffff; color: var(--kfci-garnet-deep); }

/* the Consultation Paper cover — contained to ~the hero-seal height */
.kfci-fig--cover { border: 0; background: transparent; display:flex; justify-content:center; align-items:center; }
.kfci-fig--cover img { width:auto; height: 460px; max-width:100%; border-radius: var(--kfci-radius); }
@media (max-width: 820px){ .kfci-fig--cover img { height:auto; max-width: 64%; } }

/* ── Prose (legal / long-form text pages) ───────────────────────────────── */
.kfci-prose { max-width: 72ch; margin: 0 auto; }
.kfci-prose h2 { font-family: var(--kfci-font-display); color: var(--kfci-garnet); font-size: 22px; line-height: 1.2; margin: 40px 0 12px; }
.kfci-prose h3 { font-family: var(--kfci-font-primary); font-weight: var(--kfci-weight-medium); font-size: 13px; letter-spacing: var(--kfci-track-wide); text-transform: uppercase; color: var(--kfci-garnet); margin: 28px 0 8px; }
.kfci-prose p, .kfci-prose li { font-family: var(--kfci-font-primary); font-weight: var(--kfci-weight-light); font-size: 15.5px; line-height: 1.66; color: var(--kfci-ink); }
.kfci-prose p { margin: 10px 0; }
.kfci-prose ul { padding-left: 1.2em; margin: 8px 0; }
.kfci-prose li { margin: 5px 0; }
.kfci-prose a { color: var(--kfci-garnet); text-decoration: underline; }
.kfci-prose__meta { color: var(--kfci-muted); font-size: 13px; letter-spacing: var(--kfci-track-wide); }
.kfci-prose h1 { font-family: var(--kfci-font-display); color: var(--kfci-garnet); font-size: clamp(36px,4vw,52px); line-height: 1.1; margin: 8px 0 14px; }

/* ============================================================================
   REGISTER-INTEREST FORM (capture-only release) — named modifier, 21 Jun
   Diane to review layout/placement before launch. No inline patching.
   ============================================================================ */
.kfci-form__panel { max-width: 56ch; }
.kfci-form { margin-top: var(--kfci-space-32); display: grid; gap: var(--kfci-space-8); }
.kfci-form__label {
  font-family: var(--kfci-font-primary); font-weight: var(--kfci-weight-medium);
  font-size: 11px; letter-spacing: var(--kfci-track-label); text-transform: uppercase;
  color: var(--kfci-muted); margin-top: var(--kfci-space-12);
}
.kfci-form__input {
  font-family: var(--kfci-font-primary); font-weight: var(--kfci-weight-light);
  font-size: 15.5px; color: var(--kfci-ink); background: var(--kfci-white, #ffffff);
  border: 1px solid var(--kfci-gold-30); border-radius: var(--kfci-radius-sm);
  padding: 11px 13px; width: 100%; transition: border-color var(--kfci-transition);
}
.kfci-form__input:focus { outline: none; border-color: var(--kfci-garnet); }
.kfci-form__textarea { resize: vertical; min-height: 96px; line-height: 1.6; }
.kfci-form__consent {
  display: flex; gap: var(--kfci-space-8); align-items: flex-start;
  margin-top: var(--kfci-space-16);
  font-family: var(--kfci-font-primary); font-weight: var(--kfci-weight-light);
  font-size: 14px; line-height: 1.5; color: var(--kfci-ink);
}
.kfci-form__consent input { margin-top: 3px; }
.kfci-form__consent a { color: var(--kfci-garnet); text-decoration: underline; }
.kfci-form__submit { margin-top: var(--kfci-space-24); justify-self: start; border: 0; cursor: pointer; }
.kfci-form__errors {
  margin-top: var(--kfci-space-16); padding: var(--kfci-space-12) var(--kfci-space-16);
  border: 1px solid var(--kfci-garnet); border-radius: var(--kfci-radius-sm);
  background: rgba(110,30,42,0.04);
}
.kfci-form__error {
  font-family: var(--kfci-font-primary); font-size: 14px; color: var(--kfci-garnet); margin: 2px 0;
}

/* secondary CTA + quiet link (homepage opt-in line) — copy pending Coco/Diane */
.kfci-cta--secondary { margin-top: var(--kfci-space-12); }
.kfci-link-quiet {
  font-family: var(--kfci-font-primary); font-weight: var(--kfci-weight-light);
  font-size: 14px; letter-spacing: var(--kfci-track-snug); color: var(--kfci-gold);
  text-decoration: underline; text-underline-offset: 3px;
}
.kfci-band .kfci-link-quiet { color: var(--kfci-gold); }