/* ---- fonts.css ---- */
/* VASSOKA brand faces. Fraunces is requested opsz,wght ONLY — that yields
   SOFT 0 / WONK 0, the serious cut. Never add the WONK axis. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Public+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap");


/* ---- tokens.css ---- */
/* ==========================================================================
   VASSOKA — design tokens. Palette "Neelam and Panna" (Arya, 8 Oct 2026).
   Sapphire (Neelam, Saturn) is the accent; emerald (Panna, Mercury) marks
   sections and verified states; blue-charcoal ink on ivory (Venus) in light,
   ivory on deep indigo in dark — the logo's own colours. Red, saffron and gold
   are used sparingly (Arya's chart): red only for a blocked verdict, amber
   only for a caution. Vassoka's kokum/laterite/tide palette is retired; those
   names survive as aliases in aliases.css so older pages keep resolving.

   STRUCTURE — do not reorganise:
     1. Full light palette on bare :root. Every colour gets its first and
        canonical definition here.
     2. Dark overrides inside @media (prefers-color-scheme: dark), guarded as
        :root:not([data-theme="light"]) so an explicit light choice wins.
     3. The same dark overrides repeated under :root[data-theme="dark"] so an
        explicit dark choice wins in a light-preference environment.
   No colour is ever defined only inside a media query.

   Audited to WCAG 2.2 AA: run python3 scripts/audit-contrast.py (every
   text, rule and focus pair the components use, both themes).
   ========================================================================== */

:root {
  /* --- Surfaces ------------------------------------------------------ */
  --ground:          #EFECE4;  /* Ivory stone. Page background */
  --paper:           #F8F6F1;  /* Cards, dossier sheets, table bodies */
  --stripe:          #F2EFE8;  /* Zebra row fill */

  /* --- Text ---------------------------------------------------------- */
  --ink:             #172033;  /* Blue-charcoal ink, the logo's letters. Body, display, table values */
  --ink-2:           #3A4457;  /* Secondary prose, lower-rank table values */
  --muted:           #5A6375;  /* Column headers, captions, units, footnotes */

  /* --- Structure ----------------------------------------------------- */
  --line:            #757C8C;  /* Load-bearing: gridlines, inputs, cards — 3:1 min */
  --line-soft:       #D6D3CA;  /* Decorative hairlines ONLY. Never disambiguates data */

  /* --- Brand hues and washes ----------------------------------------- */
  --sapphire:        #1F3F7A;  /* Neelam. The single accent: links, the primary action, focus. Ration it: max 2 per viewport */
  --sapphire-wash:   #E3E8F1;
  --emerald:         #0F6B4F;  /* Panna. Eyebrows, section marks, data emphasis, verified states */
  --emerald-wash:    #E0EDE6;
  --amber:           #80530A;  /* Cautions only: caution verdicts, unverified notices, form errors */
  --amber-wash:      #F5EBD8;
  --alert:           #9A2B2B;  /* A blocked verdict only. Never decoration */
  --alert-wash:      #F6E3E1;

  /* --- Logo constants: the app-icon / avatar disc. Never flip with the theme. */
  --brand-sapphire:      #1F3F7A;
  --brand-ivory:         #F6F3EA;
  --brand-emerald-light: #5CC79C;

  /* --- Status: the dossier verdict register --------------------------
     Aliases, not new hues. Always paired with the word (VERIFIED / CAUTION /
     BLOCKED) — never colour alone (WCAG 1.4.1). Always rendered as a pill;
     nothing else in the system is a pill. */
  --status-verified:      var(--emerald);
  --status-verified-bg:   var(--emerald-wash);
  --status-caution:       var(--amber);
  --status-caution-bg:    var(--amber-wash);
  --status-blocked:       var(--alert);
  --status-blocked-bg:    var(--alert-wash);

  /* --- Interaction ---------------------------------------------------- */
  --on-accent:       #F6F3EA;        /* Ivory on a solid --sapphire fill */
  --btn-fg:          var(--on-accent);
  --focus:           var(--sapphire); /* Clears 3:1 on every surface, both themes */
  --focus-width:     2px;
  --focus-offset:    2px;
  --link:            var(--sapphire);

  /* --- Elevation ------------------------------------------------------
     Lifts --paper off --ground. Never used for decoration. */
  --shadow:      0 1px 2px rgba(23, 32, 51, .05), 0 8px 24px -12px rgba(23, 32, 51, .18);
  --shadow-lift: 0 2px 4px rgba(23, 32, 51, .06), 0 16px 40px -16px rgba(23, 32, 51, .22);

  /* --- Type faces ----------------------------------------------------- */
  --f-display: "Fraunces", Georgia, "Times New Roman", serif;
  --f-body:    "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- Type scale — base 16px, ratio ~1.2 ----------------------------- */
  --t-eyebrow: 0.6875rem;  /* 11px · mono, caps, .18em — eyebrows only */
  --t-micro:   0.75rem;    /* 12px · mono · table column headers, status pills */
  --t-xs:      0.8125rem;  /* 13px · mono · dense table numerics */
  --t-sm:      0.875rem;   /* 14px · table body, captions, footnotes */
  --t-base:    1rem;       /* 16px · UI body */
  --t-prose:   1.0625rem;  /* 17px · long-form body */
  --t-lede:    1.25rem;    /* 20px · standfirst */
  --t-h3:      1.5rem;     /* 24px */
  --t-h2:      1.875rem;   /* 30px */
  --t-h1:      2.5rem;     /* 40px · interior page titles */
  --t-display: clamp(3.2rem, 13vw, 6.2rem);  /* hero only, once per page */

  --lh-tight:  0.94;
  --lh-snug:   1.2;
  --lh-normal: 1.4;
  --lh-prose:  1.6;

  --ls-display: -0.02em;
  --ls-body:     0;
  --ls-label:    0.1em;
  --ls-eyebrow:  0.18em;

  /* --- Spacing — 4px base. Added for the component library; the source
     stylesheets used raw px. Layout glue should use these. --------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 22px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* --- Radii ---------------------------------------------------------- */
  --r-pill:  999px;  /* status pills — the ONLY pill in the system */
  --r-card:  4px;    /* documents have corners, not curves */
  --r-input: 3px;

  /* --- Measure -------------------------------------------------------- */
  --w-page:   1120px;
  --w-narrow: 760px;
  --w-prose:  62ch;

  color-scheme: light;
}

/* ==========================================================================
   DARK — system preference, unless an explicit light choice is stamped
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:        #0E1A33;  /* Deep indigo, the logo's dark ground */
    --paper:         #14223F;
    --stripe:        #182745;

    --ink:           #F6F3EA;  /* Ivory */
    --ink-2:         #C9D1DA;  /* Silver */
    --muted:         #94A0B5;

    --line:          #6B7A96;
    --line-soft:     #25365A;

    --sapphire:      #86A8E8;
    --sapphire-wash: #1A2D55;
    --emerald:       #5CC79C;
    --emerald-wash:  #0F3330;
    --amber:         #D9A441;
    --amber-wash:    #33280F;
    --alert:         #EE8A8A;
    --alert-wash:    #3B1C26;

    --on-accent:     #0E1A33;

    --shadow:      0 1px 2px rgba(0, 0, 0, .40), 0 10px 30px -14px rgba(0, 0, 0, .70);
    --shadow-lift: 0 2px 6px rgba(0, 0, 0, .45), 0 18px 44px -18px rgba(0, 0, 0, .78);

    color-scheme: dark;
  }
}

/* ==========================================================================
   DARK — explicit choice. Identical block; wins in a light-preference OS.
   ========================================================================== */
/* .vassoka[data-theme] (and the legacy .koast) mirror the document-root selector so <VassokaRoot theme>
   actually works on a nested element — a forced theme is common in previews,
   embeds and side-by-side comparisons. */
:root[data-theme="dark"],
:is(.vassoka, .koast)[data-theme="dark"] {
  --ground:        #0E1A33;  /* Deep indigo, the logo's dark ground */
  --paper:         #14223F;
  --stripe:        #182745;

  --ink:           #F6F3EA;  /* Ivory */
  --ink-2:         #C9D1DA;  /* Silver */
  --muted:         #94A0B5;

  --line:          #6B7A96;
  --line-soft:     #25365A;

  --sapphire:      #86A8E8;
  --sapphire-wash: #1A2D55;
  --emerald:       #5CC79C;
  --emerald-wash:  #0F3330;
  --amber:         #D9A441;
  --amber-wash:    #33280F;
  --alert:         #EE8A8A;
  --alert-wash:    #3B1C26;

  --on-accent:     #0E1A33;

  --shadow:      0 1px 2px rgba(0, 0, 0, .40), 0 10px 30px -14px rgba(0, 0, 0, .70);
  --shadow-lift: 0 2px 6px rgba(0, 0, 0, .45), 0 18px 44px -18px rgba(0, 0, 0, .78);

  color-scheme: dark;
}


/* A forced LIGHT theme on a nested root must re-assert the light palette —
   the document root may be in dark. */
:is(.vassoka, .koast)[data-theme="light"] {
  --ground: #EFECE4; --paper: #F8F6F1; --stripe: #F2EFE8;
  --ink: #172033; --ink-2: #3A4457; --muted: #5A6375;
  --line: #757C8C; --line-soft: #D6D3CA;
  --sapphire: #1F3F7A; --sapphire-wash: #E3E8F1;
  --emerald: #0F6B4F; --emerald-wash: #E0EDE6;
  --amber: #80530A; --amber-wash: #F5EBD8;
  --alert: #9A2B2B; --alert-wash: #F6E3E1;
  --on-accent: #F6F3EA;
  --shadow: 0 1px 2px rgba(23,32,51,.05), 0 8px 24px -12px rgba(23,32,51,.18);
  --shadow-lift: 0 2px 4px rgba(23,32,51,.06), 0 16px 40px -16px rgba(23,32,51,.22);
  color-scheme: light;
}



/* ---- base.css ---- */
/* ==========================================================================
   VASSOKA — base layer.
   Everything here reads tokens, never hexes.

   The page surface (ground, ink, body face, prose measure) is established by
   <VassokaRoot>, which renders .vassoka (the legacy .koast class is honoured too). Components do NOT depend on it for their
   own colour or face — every component class sets those explicitly — so a
   component dropped into a foreign page still renders correctly. What the
   root gives you is the page: the correct background, the correct default
   text colour, and the type ramp.

   Element rules use :where() so they carry ZERO class weight: a component
   class (.k-eyebrow, .k-lede, .k-sechead-title) always beats the base ramp.
   With :is() the base `p` rule (0,1,1) used to override eyebrow colour and
   lede/heading margins (found in the 8 Oct 2026 preview grading).
   ========================================================================== */

:is(.vassoka, .koast) {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--t-prose);
  line-height: var(--lh-prose);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:is(.vassoka, .koast) *,
:is(.vassoka, .koast) *::before,
:is(.vassoka, .koast) *::after { box-sizing: border-box; }

:where(.vassoka, .koast) h1, :where(.vassoka, .koast) h2, :where(.vassoka, .koast) h3, :where(.vassoka, .koast) h4 {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
  margin: 0;
}
:where(.vassoka, .koast) h1 { font-size: calc(clamp(2.1rem, 5vw, 3.2rem) * var(--k-scale, 1)); line-height: 1.06; }
:where(.vassoka, .koast) h2 { font-size: clamp(1.5rem, 3vw, var(--t-h2)); line-height: 1.15; }
:where(.vassoka, .koast) h3 { font-size: 1.15rem; }
:where(.vassoka, .koast) h4 { font-size: var(--t-base); }

:where(.vassoka, .koast) p { margin: 0 0 var(--s-3); color: var(--ink-2); }
:where(.vassoka, .koast) strong { color: var(--ink); font-weight: 600; }

:where(.vassoka, .koast) a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

:is(.vassoka, .koast) :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-offset);
  border-radius: 2px;
}

:where(.vassoka, .koast) img { max-width: 100%; }

/* Layout containers */
.k-wrap   { max-width: var(--w-page);   margin: 0 auto; padding: 0 var(--s-5); }
.k-narrow { max-width: var(--w-narrow); margin: 0 auto; padding: 0 var(--s-5); }
.k-section { padding: var(--s-8) 0; }
.k-section--ruled { border-top: 1px solid var(--line); }

/* Decorative hairline. Never disambiguates data. */
.k-divider { border: 0; border-top: 1px solid var(--line-soft); margin: var(--s-5) 0; }

@media (prefers-reduced-motion: reduce) {
  :is(.vassoka, .koast) * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* ---- components.css ---- */
/* ==========================================================================
   VASSOKA — component layer.
   Derived from site/pages/site.css and the .verdict/.data-table/.sheet rules
   in design/tokens.css. All classes are `k-` prefixed: the design agent
   composes these alongside its own layout classes, and bare `.card`/`.chip`
   collide with almost anything.

   Every component sets its own colour and face explicitly rather than
   inheriting, so a component dropped outside <VassokaRoot> still renders right.
   ========================================================================== */

/* --- Type ------------------------------------------------------------ */
.k-eyebrow {
  font-family: var(--f-mono);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--emerald);
  margin: 0 0 var(--s-3);
}
.k-eyebrow--muted { color: var(--muted); }

.k-lede {
  font-family: var(--f-body);
  font-size: var(--t-lede);
  line-height: var(--lh-normal);
  color: var(--ink-2);
  max-width: var(--w-prose);
  margin: 0 0 var(--s-4);
}

.k-src {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  line-height: var(--lh-normal);
  color: var(--muted);
  margin: 0;
}

.k-mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* --- Buttons ---------------------------------------------------------- */
.k-btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: .92rem;
  line-height: 1.2;
  padding: .8rem 1.5rem;
  border-radius: var(--r-card);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.k-btn--primary { background: var(--sapphire); color: var(--on-accent); }
.k-btn--primary:hover { filter: brightness(1.08); }
.k-btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.k-btn--ghost:hover { border-color: var(--muted); }
.k-btn[aria-disabled="true"], .k-btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }

.k-linkbtn {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--f-body);
  font-size: .85rem;
  color: var(--sapphire);
  text-decoration: underline;
  text-underline-offset: .18em;
  cursor: pointer;
}

/* --- Mark (wordmark) --------------------------------------------------
   The vector VASSOKA wordmark, inline SVG coloured by tokens (.k-mark-svg).
   The text fallback (`asText`) sets the O in sapphire via `.k-mark i`. */
.k-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.k-mark i { font-style: normal; color: var(--sapphire); }
.k-mark--lg { font-size: 1.6rem; }
.k-mark-svg { display: block; width: var(--mark-w, 150px); height: auto; overflow: visible; }
.k-mark-svg--lg { --mark-w: 280px; }

/* --- Nav --------------------------------------------------------------- */
.k-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--ground) 90%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-soft);
}
.k-nav-in {
  max-width: var(--w-page);
  margin: 0 auto;
  padding: 14px var(--s-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}
.k-nav-links { display: flex; gap: var(--s-1); align-items: center; flex-wrap: wrap; }
.k-nav-links a {
  font-family: var(--f-body);
  font-size: .875rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  padding: 7px 11px;
  border-radius: var(--r-card);
}
.k-nav-links a:hover { background: var(--stripe); color: var(--ink); }
.k-nav-links a[aria-current="page"] { color: var(--sapphire); }

/* Mobile: the links collapse behind one "Menu" button (build-spec §4.1).
   The button is a plain word, not an icon, so it needs no explaining. */
.k-nav-toggle {
  display: none;
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 8px 12px;
  min-height: 40px;
  cursor: pointer;
}
.k-nav-toggle:hover { background: var(--stripe); }
.k-nav-toggle:focus-visible { outline: 2px solid var(--sapphire); outline-offset: 2px; }
@media (max-width: 720px) {
  .k-nav-in { flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
  .k-nav-toggle { display: inline-flex; align-items: center; }
  .k-nav-links {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
    padding: var(--s-2) 0 var(--s-3);
    border-top: 1px solid var(--line-soft);
    margin-top: 12px;
  }
  .k-nav.is-open .k-nav-links { display: flex; }
  .k-nav-links a { padding: 12px 6px; font-size: 1rem; border-radius: 0; border-bottom: 1px solid var(--line-soft); }
  .k-nav-links a:last-child { border-bottom: 0; }
}

/* --- Footer ------------------------------------------------------------ */
.k-footer {
  border-top: 1px solid var(--line);
  margin-top: var(--s-7);
  padding: var(--s-7) 0 56px;
  background: var(--ground);
}
.k-foot { display: flex; justify-content: space-between; gap: var(--s-6); flex-wrap: wrap; }
.k-foot h4 {
  font-family: var(--f-mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin: 0 0 10px;
}
.k-foot ul { list-style: none; margin: 0; padding: 0; }
.k-foot li { margin-bottom: 6px; }
.k-foot a { color: var(--ink-2); text-decoration: none; font-size: .875rem; }
.k-foot a:hover { color: var(--sapphire); }
.k-foot-legal {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-soft);
  font-family: var(--f-mono);
  font-size: .68rem;
  color: var(--muted);
  line-height: 1.7;
}

/* --- Verdict pills — the ONLY pills in the system ----------------------
   Always carry the word. The dot is decoration on top of the word, never a
   substitute for it (WCAG 1.4.1). */
.k-verdict {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  padding: .25em .7em;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.k-verdict::before {
  content: "";
  width: .45em;
  height: .45em;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.k-verdict--verified { color: var(--status-verified); background: var(--status-verified-bg); }
.k-verdict--clear    { color: var(--status-verified); background: var(--status-verified-bg); }
.k-verdict--caution  { color: var(--status-caution);  background: var(--status-caution-bg); }
.k-verdict--blocked  { color: var(--status-blocked);  background: var(--status-blocked-bg); }
.k-verdict--none     { color: var(--muted);           background: var(--stripe); }

/* --- Cards ------------------------------------------------------------- */
.k-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s-5); }

.k-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--f-body);
}
.k-card:hover { box-shadow: var(--shadow); }
.k-card-img {
  aspect-ratio: 4/3;
  background: repeating-linear-gradient(135deg, var(--stripe), var(--stripe) 10px, var(--paper) 10px, var(--paper) 20px);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: flex-end;
  padding: var(--s-3);
}
.k-card-cap {
  font-family: var(--f-mono);
  font-size: .66rem;
  color: var(--muted);
  background: var(--ground);
  padding: 3px var(--s-2);
  border-radius: var(--r-card);
}
.k-card-body { padding: var(--s-4) 18px 18px; display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.k-card-loc {
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
}
.k-card h3 { font-size: 1.1rem; }
.k-card-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) 14px;
  font-family: var(--f-mono);
  font-size: .76rem;
  color: var(--ink-2);
}
.k-card-price {
  font-family: var(--f-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ink);
  margin-top: auto;
  padding-top: var(--s-2);
}
.k-card-price small { font-family: var(--f-mono); font-size: .7rem; font-weight: 400; color: var(--muted); }
.k-card-price--poa { font-family: var(--f-mono); font-size: .95rem; font-weight: 500; color: var(--ink-2); }

/* Market tier. Dashed edge + no plate imagery — the tier reads as different
   BEFORE any text is read. Never apply to a Vassoka Parcel. */
.k-card--market { border-style: dashed; }
.k-card--market .k-card-img { background: var(--stripe); }
.k-card-note {
  font-size: .78rem;
  color: var(--amber);
  line-height: 1.45;
  border-top: 1px dashed var(--line);
  padding-top: var(--s-2);
  margin-top: 2px;
}

/* --- The unverified notice — a sentence, deliberately not a badge ------- */
.k-unverified {
  background: var(--amber-wash);
  border: 1px solid var(--amber);
  border-radius: var(--r-card);
  padding: 14px 18px;
  margin-bottom: var(--s-5);
  font-family: var(--f-body);
}
.k-unverified p { margin: 0; font-size: .9rem; color: var(--ink); line-height: var(--lh-normal); }
.k-unverified strong { color: var(--amber); }

/* --- Filters ------------------------------------------------------------ */
.k-filters {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 18px var(--s-5);
  margin-bottom: 26px;
  font-family: var(--f-body);
}
.k-frow { display: flex; flex-wrap: wrap; gap: 18px 26px; align-items: flex-end; }
.k-fgroup { display: flex; flex-direction: column; gap: 7px; min-width: 150px; }
.k-flabel {
  font-family: var(--f-mono);
  font-size: .66rem;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
}
.k-fchips { display: flex; flex-wrap: wrap; gap: 6px; }
.k-chip {
  font-family: var(--f-body);
  font-size: .8rem;
  font-weight: 500;
  padding: 5px var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
}
.k-chip:hover { border-color: var(--muted); }
.k-chip[aria-pressed="true"] { background: var(--sapphire); border-color: var(--sapphire); color: var(--on-accent); }
.k-select {
  font-family: var(--f-body);
  font-size: .85rem;
  padding: 7px 10px;
  background: var(--ground);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.k-fmeta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: 18px;
  font-family: var(--f-body);
  font-size: .875rem;
  color: var(--muted);
}
.k-fmeta .k-count { font-family: var(--f-mono); font-size: .8rem; }

/* --- Tables ------------------------------------------------------------- */
.k-table-wrap { overflow-x: auto; }
.k-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  font-family: var(--f-body);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
}
.k-table th {
  font-family: var(--f-mono);
  font-size: .66rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  text-align: left;
  padding: 9px 11px;
  border-bottom: 1px solid var(--line);
}
.k-table td { padding: 10px 11px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: top; }
.k-table tbody tr:nth-child(even) { background: var(--stripe); }
.k-table tbody tr:last-child td { border-bottom: none; }
.k-table .num, .k-table .ref { font-family: var(--f-mono); font-size: .8rem; color: var(--ink); }
.k-table .unit { color: var(--muted); }
.k-table td.num, .k-table th.num { text-align: right; }
/* Header cells keep the header voice even on numeric/reference columns (.k-table .num outranks .k-table th). */
.k-table th.num, .k-table th.ref { font-size: .66rem; color: var(--muted); }
/* A source line under a table lines up with the cell text. */
.k-table-wrap > .k-src, .k-table-wrap + .k-src { padding-inline: 11px; margin-top: var(--s-2); }

/* --- Dossier ------------------------------------------------------------ */
.k-sheet {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: var(--s-6);
  font-family: var(--f-body);
  color: var(--ink);
}
.k-sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-5);
}

.k-dsec { border-top: 1px solid var(--line); padding: var(--s-5) 0; }
.k-dsec:last-child { padding-bottom: 0; }
.k-dsec-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.k-dsec-letter {
  font-family: var(--f-display);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--emerald);
  line-height: 1;
  flex: none;
}
.k-dsec-title { font-family: var(--f-display); font-size: 1.15rem; font-weight: 600; color: var(--ink); margin: 0; flex: 1; }
.k-dsec-body { color: var(--ink-2); font-size: var(--t-base); line-height: var(--lh-prose); }
.k-dsec-body > :last-child { margin-bottom: 0; }
/* An empty section is a finding, not an omission — say so in this voice. */
.k-dsec--empty .k-dsec-body { color: var(--muted); font-style: italic; }

/* --- Covenant / draft banner -------------------------------------------- */
.k-covenant {
  background: var(--paper);
  border-left: 3px solid var(--sapphire);
  padding: var(--s-5) var(--s-5);
  font-family: var(--f-body);
}
.k-covenant ol { margin: 0; padding-left: var(--s-5); }
.k-covenant li { margin-bottom: var(--s-2); color: var(--ink-2); }
.k-covenant li:last-child { margin-bottom: 0; }

.k-draft {
  background: var(--sapphire);
  color: var(--on-accent);
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  padding: .5rem;
}

/* --- Dossier pillar question ------------------------------------------- */
.k-dsec-q {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  color: var(--muted);
  margin: 0 0 var(--s-3);
}

/* --- Access callout — dossier cover ------------------------------------ */
.k-access {
  border: 1px solid var(--line);
  border-left: 3px solid var(--emerald);
  border-radius: var(--r-card);
  padding: var(--s-4) var(--s-5);
  background: var(--paper);
  font-family: var(--f-body);
}
.k-access-row { margin: 0 0 var(--s-2); font-size: var(--t-sm); color: var(--ink-2); }
.k-access-row:last-child { margin-bottom: 0; }
.k-access-row strong { color: var(--ink); }

/* --- Parcel card, spec §6.5 field set ---------------------------------- */
.k-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.k-card-ref {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: var(--ls-label);
  color: var(--emerald);
  flex: none;
}
.k-card-fields {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-1) var(--s-3);
  margin: var(--s-2) 0 0;
  font-size: .8rem;
  line-height: var(--lh-normal);
}
.k-card-fields dt {
  font-family: var(--f-mono);
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  padding-top: .15em;
  white-space: nowrap;
}
.k-card-fields dd { margin: 0; color: var(--ink-2); }
.k-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-soft);
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.k-card-tier { color: var(--ink-2); }
.k-card-status { color: var(--muted); }
.k-card-status--available { color: var(--emerald); }
.k-card-status--under-diligence { color: var(--amber); }
.k-card-status--reserved { color: var(--amber); }
.k-card-status--sold, .k-card-status--withdrawn { color: var(--muted); }

/* --- Disclosure line ---------------------------------------------------- */
.k-disclosure {
  font-family: var(--f-mono);
  font-size: .68rem;
  line-height: 1.7;
  color: var(--muted);
  margin: 0;
}
.k-disclosure a { color: var(--muted); }

/* --- MahaRERA badge ----------------------------------------------------- */
.k-rera {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s-2) var(--s-3);
  background: var(--paper);
  font-family: var(--f-mono);
  font-size: .72rem;   /* never smaller than the contact details */
  color: var(--ink);
  line-height: 1.5;
}
.k-rera-qr { width: 56px; height: 56px; display: block; }

/* --- Eligibility verdict ------------------------------------------------ */
.k-elig {
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--r-card);
  padding: var(--s-4) var(--s-5);
  background: var(--paper);
  font-family: var(--f-body);
}
.k-elig--eligible    { border-left-color: var(--emerald); }
.k-elig--conditional { border-left-color: var(--amber); }
.k-elig--barred      { border-left-color: var(--alert); }
.k-elig-label {
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--ink);
  margin: 0 0 var(--s-2);
}
.k-elig-body { color: var(--ink-2); font-size: var(--t-base); }
.k-elig-body > :last-child { margin-bottom: 0; }

/* --- Rejection ratio ---------------------------------------------------- */
.k-ratio {
  font-family: var(--f-body);
  font-size: var(--t-lede);
  line-height: var(--lh-normal);
  color: var(--ink-2);
  margin: 0;
  max-width: var(--w-prose);
}
.k-ratio-fig {
  font-family: var(--f-display);
  font-size: 1.6em;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.k-ratio-of { color: var(--muted); }

/* --- Anchors that are not prose ----------------------------------------
   base.css styles `:is(.vassoka, .koast) a` (underlined, --link coloured) at specificity
   0,1,1 — which outranks a bare `.k-btn--primary` at 0,1,0 and painted
   anchor buttons accent-on-accent. Anything that is a control rather than a
   link re-asserts itself here. Keep both the bare and root-scoped forms so
   components work outside the root too. */
a.k-btn, :is(.vassoka, .koast) a.k-btn { text-decoration: none; }
a.k-btn--primary, :is(.vassoka, .koast) a.k-btn--primary { color: var(--on-accent); }
a.k-btn--ghost, :is(.vassoka, .koast) a.k-btn--ghost { color: var(--ink); }
a.k-mark, :is(.vassoka, .koast) a.k-mark { color: var(--ink); text-decoration: none; }
a.k-linkbtn, :is(.vassoka, .koast) a.k-linkbtn { color: var(--sapphire); }
a.k-card, :is(.vassoka, .koast) a.k-card { text-decoration: none; color: var(--ink); }

/* --- Foundations: palette + type ramp ---------------------------------- */
.k-palette { font-family: var(--f-body); }
.k-palette-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s-3); }
.k-swatch { display: flex; flex-direction: column; gap: 3px; }
.k-swatch-chip {
  display: block; height: 36px; border-radius: var(--r-card);
  border: 1px solid var(--line-soft); margin-bottom: var(--s-1);
}
/* Rules are shown as a 3px band of the colour, not a fill — a hairline token
   rendered as a big block reads as a surface, which is the wrong lesson. */
.k-swatch-chip--rule { height: 36px; background: var(--paper); border: 0; border-top: 3px solid; border-radius: 0; }
.k-swatch-token { font-family: var(--f-mono); font-size: .7rem; color: var(--ink); letter-spacing: .02em; }
.k-swatch-role { font-family: var(--f-body); font-size: .76rem; color: var(--muted); line-height: 1.35; }

.k-typescale { font-family: var(--f-body); display: grid; gap: var(--s-5); }
.k-typerow { display: grid; gap: var(--s-1); border-top: 1px solid var(--line-soft); padding-top: var(--s-3); }
.k-typemeta { display: flex; gap: var(--s-3); align-items: baseline; flex-wrap: wrap; }
.k-typesample { margin: 0; color: var(--ink); line-height: 1.15; }

/* --- Forms ------------------------------------------------------------- */
.k-field { display: flex; flex-direction: column; gap: 6px; font-family: var(--f-body); }
.k-label { font-family: var(--f-body); font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.k-label-opt { font-weight: 400; color: var(--muted); }
.k-hint { margin: 0; font-size: .82rem; color: var(--muted); line-height: var(--lh-normal); }
.k-error { margin: 0; font-size: .82rem; color: var(--amber); line-height: var(--lh-normal); }
.k-input {
  font-family: var(--f-body); font-size: var(--t-base); line-height: 1.35;
  padding: 11px 13px; min-height: 46px; width: 100%;
  background: var(--field); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-input);
}
.k-input::placeholder { color: var(--muted); }
.k-input:hover { border-color: var(--muted); }
.k-input[aria-invalid="true"], .k-field--error .k-input { border-color: var(--amber); }
.k-input--mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.k-textarea { resize: vertical; min-height: 96px; }
.k-select { appearance: none; -webkit-appearance: none; padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.k-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-family: var(--f-body); font-size: var(--t-sm); color: var(--ink-2); line-height: var(--lh-normal); }
.k-check-box { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--sapphire); border-radius: 2px; }
.k-check-text a { color: var(--sapphire); }

/* --- Notice — the plain-spoken callout ---------------------------------- */
.k-notice { border: 1px solid; border-radius: var(--r-card); padding: 15px 17px; font-family: var(--f-body); }
.k-notice--caution { border-color: var(--amber); background: var(--amber-wash); }
.k-notice--unknown { border-color: var(--sapphire);    background: var(--sapphire-wash); }
.k-notice--note    { border-color: var(--emerald);     background: var(--emerald-wash); }
.k-notice-title { margin: 0 0 7px; font-family: var(--f-mono); font-size: .63rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.k-notice--caution .k-notice-title { color: var(--amber); }
.k-notice--unknown .k-notice-title { color: var(--sapphire); }
.k-notice--note .k-notice-title    { color: var(--emerald); }
.k-notice-body { font-size: .91rem; color: var(--ink-2); line-height: var(--lh-normal); }
.k-notice-body > :last-child { margin-bottom: 0; }

/* --- Section header ------------------------------------------------------ */
.k-sechead { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-5); flex-wrap: wrap; margin-bottom: var(--s-6); font-family: var(--f-body); }
.k-sechead-main { flex: 1 1 480px; min-width: 0; }
.k-sechead-title { font-family: var(--f-display); font-weight: 600; line-height: var(--lh-snug); letter-spacing: var(--ls-display); text-wrap: balance; color: var(--ink); margin: 0 0 var(--s-3); }
h1.k-sechead-title { font-size: calc(clamp(2.1rem, 5vw, 3.2rem) * var(--k-scale, 1)); line-height: 1.06; }
h2.k-sechead-title { font-size: clamp(1.5rem, 3vw, var(--t-h2)); }
h3.k-sechead-title { font-size: var(--t-h3); }
.k-sechead .k-lede { margin-bottom: 0; }
.k-sechead-aside { flex: none; padding-top: 4px; }

/* --- Figure --------------------------------------------------------------- */
.k-figure { margin: 0; font-family: var(--f-body); }
.k-figure-plate { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card);
  background: repeating-linear-gradient(135deg, var(--stripe), var(--stripe) 10px, var(--paper) 10px, var(--paper) 20px);
  display: flex; align-items: flex-end; padding: var(--s-3); }
.k-figure-plate > img, .k-figure-plate > svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.k-figure-plate .k-card-cap { position: relative; }
.k-figure--map .k-figure-plate { background: var(--sapphire-wash); }
.k-figure--document .k-figure-plate { background: var(--paper); }
.k-figure-cap { display: flex; flex-direction: column; gap: 3px; margin-top: var(--s-2); font-size: var(--t-sm); color: var(--ink-2); line-height: var(--lh-normal); }

/* --- Monogram (asset in mark.css) ---------------------------------------- */
.k-monogram { display: inline-block; background-repeat: no-repeat; background-position: center; background-size: contain; }
.k-monogram--disc { background-color: var(--brand-sapphire); border-radius: 50%; background-size: 62%; box-shadow: var(--shadow); }
.k-monogram-v { display: inline-grid; place-items: center; flex: none; }
.k-monogram-v svg { display: block; width: 100%; height: 100%; }
.k-monogram-v--disc { background: var(--brand-sapphire); border-radius: 50%; box-shadow: var(--shadow); }
.k-monogram-v--disc svg { width: 62%; height: 62%; }

/* --- Foundation demos ------------------------------------------------------ */
.k-spacing { display: grid; gap: 10px; font-family: var(--f-body); }
.k-spacing-row { display: grid; grid-template-columns: 64px 1fr; gap: 6px 14px; align-items: center; }
.k-spacing-bar { display: block; height: 14px; background: var(--emerald); border-radius: 1px; }
.k-spacing-row .k-swatch-role { grid-column: 2; }
.k-elevation { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--s-5); font-family: var(--f-body); padding: var(--s-2); }
.k-elev-cell { display: flex; flex-direction: column; gap: 4px; }
.k-elev-box { display: block; height: 64px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); margin-bottom: 4px; }
.k-elev-box--shadow { box-shadow: var(--shadow); }
.k-elev-box--lift { box-shadow: var(--shadow-lift); }
.k-elev-box--input { border-radius: var(--r-input); background: var(--field); }
.k-elev-box--pill { border-radius: var(--r-pill); height: 28px; width: 110px; background: var(--emerald-wash); border-color: transparent; }
.k-layoutdemo { font-family: var(--f-body); display: grid; gap: var(--s-4); }
.k-layoutdemo-wrap, .k-layoutdemo-narrow, .k-layoutdemo-prose { border: 1px dashed var(--line); border-radius: var(--r-card); padding: 12px; }
.k-layoutdemo-narrow { margin: 10px 10% 0; }
.k-layoutdemo-prose { margin: 10px 8% 0; background: var(--paper); }
.k-layoutdemo-grid { margin-top: var(--s-2); }
.k-layoutdemo-cell { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px; min-height: 60px; }


/* ---- aliases.css ---- */
/* ==========================================================================
   VASSOKA — token aliases.

   1. Build-spec names (koast-site-build-spec.md §3) so the hand-written site
      can use spec names while components keep the audited ones.
   2. LEGACY Vassoka palette names. --kokum, --laterite and --tide were retired
      on 8 Oct 2026 for the Neelam and Panna palette. They resolve to their
      successors so older pages keep rendering; new work never uses them.
        --kokum    -> --sapphire   (the accent)
        --laterite -> --emerald    (eyebrows, section marks). Cautions that
                      used laterite must move to --amber by hand.
        --tide     -> --emerald    (secondary data, verified)

   The spec has no load-bearing rule token: gridlines, input borders and card
   edges must use --line; --rule/--rule-soft alias the decorative --line-soft.
   Never disambiguate data with --rule.
   ========================================================================== */

:root {
  --surface:      var(--paper);
  --surface-2:    #E5E1D7;
  --field:        #FFFFFF;
  --ink-3:        var(--muted);
  --rule:         var(--line-soft);
  --rule-soft:    var(--line-soft);
  --accent:       var(--sapphire);
  --accent-soft:  var(--sapphire-wash);
  --warn:         var(--amber);

  --kokum:          var(--sapphire);
  --kokum-wash:     var(--sapphire-wash);
  --laterite:       var(--emerald);
  --laterite-wash:  var(--emerald-wash);
  --tide:           var(--emerald);
  --tide-wash:      var(--emerald-wash);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-2: #1E2F50;
    --field:     var(--paper);
  }
}
:root[data-theme="dark"],
:is(.vassoka, .koast)[data-theme="dark"] {
  --surface-2: #1E2F50;
  --field:     var(--paper);
}
:is(.vassoka, .koast)[data-theme="light"] {
  --surface-2: #E5E1D7;
  --field:     #FFFFFF;
}


/* ---- mark.web.css ---- */
/* ==========================================================================
   VASSOKA — wordmark and monogram as CSS backgrounds, WEB variant (files under /assets/).
   Generated by scripts/build-logo.py. Vector, from the brand-vassoka masters:
   ink letters, emerald wave, sapphire ring on light; ivory, light emerald and
   light sapphire on dark. The <Mark> and <Monogram> components draw inline SVG
   coloured by tokens instead; these classes serve plain-HTML pages.
   /assets/* are served immutable for a year: bump ?v= whenever a file changes.
   ========================================================================== */

:root {
  --k-mark-light: url("/assets/vassoka-wordmark-light.svg?v=20261008");
  --k-mark-dark: url("/assets/vassoka-wordmark-dark.svg?v=20261008");
  --k-mono-light: url("/assets/vassoka-monogram-light.svg?v=20261008");
  --k-mono-dark: url("/assets/vassoka-monogram-dark.svg?v=20261008");
  --k-mono-disc: url("/assets/vassoka-monogram-disc.svg?v=20261008");
}

.k-mark-img {
  display: block;
  width: var(--mark-w, 150px);
  aspect-ratio: 3176 / 816;
  background-image: var(--k-mark-light);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}
.k-mark-img--lg { --mark-w: 280px; }
.k-monogram { background-image: var(--k-mono-light); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .k-mark-img { background-image: var(--k-mark-dark); }
  :root:not([data-theme="light"]) .k-monogram { background-image: var(--k-mono-dark); }
}
:root[data-theme="dark"] .k-mark-img, :is(.vassoka, .koast)[data-theme="dark"] .k-mark-img { background-image: var(--k-mark-dark); }
:root[data-theme="dark"] .k-monogram, :is(.vassoka, .koast)[data-theme="dark"] .k-monogram { background-image: var(--k-mono-dark); }
:is(.vassoka, .koast)[data-theme="light"] .k-mark-img { background-image: var(--k-mark-light); }
:is(.vassoka, .koast)[data-theme="light"] .k-monogram { background-image: var(--k-mono-light); }
/* The avatar / app-icon treatment: ivory ring and light emerald wave on a sapphire disc, in both themes. */
.k-monogram.k-monogram--disc, :root .k-monogram.k-monogram--disc { background-image: var(--k-mono-disc); }


/* ---- site.css ---- */
/* ==========================================================================
   SITE-ONLY RULES for vassoka.com (formerly vassoka.com). Appended after the
   Vassoka Design System web build by scripts/assemble-css.mjs. Edit here,
   never in pages/koast.css (it is generated). Hero overlay colours are fixed
   on purpose: the hero always sits on dark video.
   ========================================================================== */

/* ==========================================================================
   Site controls (added 25 Sep 2026): language, theme and text size live in
   the nav; the choice is kept in localStorage and applied before first paint
   by a two-line script inject-chrome.mjs puts in every <head>.
   ========================================================================== */
html { font-size: calc(100% * var(--k-scale, 1)); }
.k-ctl { display: flex; align-items: center; gap: 4px; }
.k-ctl button, .k-ctl a {
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2); background: transparent; border: 1px solid var(--line-soft); border-radius: var(--r-card);
  padding: 6px 8px; min-height: 32px; min-width: 32px; cursor: pointer; text-decoration: none; line-height: 1;
}
.k-ctl button:hover, .k-ctl a:hover { background: var(--stripe); color: var(--ink); }
.k-ctl button:focus-visible, .k-ctl a:focus-visible { outline: 2px solid var(--sapphire); outline-offset: 2px; }
.k-ctl [aria-pressed="true"] { color: var(--sapphire); border-color: var(--sapphire); }
@media (max-width: 720px) {
  .k-nav-in { justify-content: flex-start; }
  .k-ctl { margin-left: auto; }
  .k-ctl button, .k-ctl a { padding: 6px 7px; }
}

/* Eyebrow line under the wordmark (the positioning line) */
.k-mark-line { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-left: 12px; white-space: nowrap; }
@media (max-width: 900px) { .k-mark-line { display: none; } }

/* Glossary hover-links */
:is(.vassoka, .koast) a.k-term { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-decoration-color: var(--emerald); text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: help; }
:is(.vassoka, .koast) a.k-term:hover, :is(.vassoka, .koast) a.k-term:focus-visible { text-decoration-style: solid; color: var(--emerald); }
.k-tip { position: absolute; z-index: 40; background: var(--ink); color: var(--ground); font-family: var(--f-body); font-size: .85rem; line-height: 1.45; padding: 10px 12px; border-radius: var(--r-card); box-shadow: var(--shadow-lift); pointer-events: none; }
.k-tip[hidden] { display: none; }
@media (hover: none) { .k-tip { display: none !important; } }

/* Benchmark callout, placed wherever price is mentioned (25 Sep 2026) */
.k-bench { border: 1px solid var(--line); border-left: 3px solid var(--emerald); border-radius: var(--r-card); background: var(--paper); padding: var(--s-4); margin: var(--s-4) 0; }
.k-bench .k-bench-t { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--emerald); margin: 0 0 4px; }
.k-bench p { margin: 0 0 6px; color: var(--ink-2); font-size: .95rem; }
.k-bench .go { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }

/* Section banner under the header: the page's own topics, sticky, with Top.
   Built by glossary.js from the page's h2s (or data-nav on a section). */
.k-sub { position: sticky; top: var(--k-nav-h, 64px); z-index: 29; background: color-mix(in srgb, var(--ground) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line-soft); }
.k-sub-in { max-width: var(--w-page); margin: 0 auto; padding: 6px var(--s-5); display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.k-sub-in::-webkit-scrollbar { display: none; }
.k-sub a { flex: 0 0 auto; font-family: var(--f-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; padding: 6px 10px; border-radius: var(--r-card); border: 1px solid transparent; white-space: nowrap; }
.k-sub a:hover { background: var(--stripe); color: var(--ink); }
.k-sub a[aria-current="true"] { color: var(--sapphire); border-color: var(--sapphire); }
.k-sub a.k-sub-top { color: var(--muted); }
.k-sub[hidden] { display: none; }
main [id] { scroll-margin-top: calc(var(--k-nav-h, 64px) + 48px); }

/* Sticky WhatsApp on phones (29 Sep 2026); desktop keeps the in-page buttons. */
.k-wa { display: none; }
@media (max-width: 720px) {
  .k-wa { display: inline-flex; align-items: center; gap: 6px; position: fixed; right: 14px; bottom: 14px; z-index: 35; background: var(--emerald); color: var(--on-accent); font-family: var(--f-body); font-weight: 600; font-size: .9rem; text-decoration: none; padding: 12px 16px; border-radius: 999px; box-shadow: var(--shadow-lift); }
  :is(.vassoka, .koast) a.k-wa { text-decoration: none; color: var(--on-accent); }
  .k-wa::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #9BE7A3; }
  main { padding-bottom: 72px; }
}
/* The language switch stands out a little from the other controls. */
.k-ctl [data-lang-switch] { border-color: var(--sapphire); color: var(--sapphire); font-weight: 600; }

/* Phones (30 Sep 2026): header is one row. Only the language switch stays
   beside the menu button; theme and text size live inside the menu. */
.k-nav-mctl { display: none; }
@media (max-width: 720px) {
  .k-ctl [data-theme-toggle], .k-ctl [data-size] { display: none; }
  .k-mark { order: 0; } .k-ctl { order: 1; margin-left: auto; } .k-nav-toggle { order: 2; margin-left: 8px; } .k-nav-links { order: 3; }
  .k-nav-mctl { display: flex; gap: 8px; padding: 12px 6px 4px; border-top: 1px solid var(--line-soft); margin-top: 4px; }
  .k-nav-mctl button { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); background: transparent; border: 1px solid var(--line); border-radius: var(--r-card); padding: 10px 12px; min-height: 40px; cursor: pointer; }
  .k-nav-mctl button[aria-pressed="true"] { color: var(--sapphire); border-color: var(--sapphire); }
}

/* Scenery label (30 Sep 2026): every non-parcel view of the coast carries it, with place and date. */
.k-scenery { display: inline-block; font-family: var(--f-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--emerald); border: 1px solid var(--emerald); border-radius: 999px; padding: 2px 8px; vertical-align: middle; }

/* Full-bleed video hero (scenery, always labelled). Home and why-Konkan. */
.hero-v { position: relative; width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; background: #0E1A33; color: #F6F3EA; isolation: isolate; }
.hero-v video, .hero-v .hero-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero-v .hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(14,26,51,.82) 0%, rgba(14,26,51,.62) 45%, rgba(14,26,51,.18) 100%), linear-gradient(0deg, rgba(14,26,51,.55) 0%, rgba(14,26,51,0) 40%); }
@media (max-width: 760px) { .hero-v .hero-shade { background: linear-gradient(180deg, rgba(14,26,51,.55) 0%, rgba(14,26,51,.72) 55%, rgba(14,26,51,.86) 100%); } }
.hero-v .hx { max-width: var(--w-page); margin: 0 auto; padding: 96px var(--s-5) 64px; min-height: 78vh; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; }
.hero-v .hx > * { max-width: 46rem; }
.hero-v .k-eyebrow { color: rgba(246,243,234,.85); }
.hero-v h1 { color: #F6F3EA; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.hero-v h1 em { color: #86A8E8; }
.hero-v .k-lede { color: rgba(246,243,234,.92); }
.hero-v .hx-kinds a { background: rgba(246,243,234,.94); color: #172033; }
.hero-v .hx-kinds b { color: #172033; } .hero-v .hx-kinds span { color: #3A4457; }
.hero-v .k-btn--ghost { color: #F6F3EA; border-color: rgba(246,243,234,.7); background: rgba(14,26,51,.25); }
:is(.vassoka, .koast) .hero-v a.k-term { color: inherit; text-decoration-color: rgba(246,243,234,.6); }
.hero-v .hero-tag { position: absolute; right: 14px; bottom: 12px; color: #F6F3EA; border-color: rgba(246,243,234,.7); background: rgba(14,26,51,.35); }
.hero-v .hero-play { position: absolute; left: 14px; bottom: 12px; font-family: var(--f-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: #F6F3EA; background: rgba(14,26,51,.35); border: 1px solid rgba(246,243,234,.5); border-radius: 999px; padding: 4px 10px; cursor: pointer; }
.hero-v--short .hx { min-height: 58vh; }
@media (max-width: 760px) { .hero-v--short .hx { min-height: 52vh; } }
/* Phones: a slightly smaller wordmark keeps logo, language and Menu on one row in both languages. */
@media (max-width: 720px) { .k-nav .k-mark-img { --mark-w: 124px; } .k-nav-in { gap: 12px; } .k-ctl [data-lang-switch] { padding: 6px 7px; letter-spacing: .04em; } }
@media (max-width: 560px) { .hero-v .hero-tag { max-width: calc(100% - 110px); white-space: normal; text-align: right; line-height: 1.5; font-size: .56rem; } .hero-v .hx { padding-bottom: 76px; } }

/* Video heroes keep the film's own 16:9 shape (30 Sep 2026): the box follows the
   video, so almost nothing is cropped. Phones show the whole frame, uncropped,
   with the text beneath it on the dark ground. */
.hero-v { aspect-ratio: 16 / 9; max-height: 92vh; min-height: 520px; }
.hero-v .hx { min-height: 0; height: 100%; }
.hero-v--short { min-height: 440px; }
@media (max-width: 760px) {
  .hero-v { aspect-ratio: auto; min-height: 0; max-height: none; }
  .hero-v video, .hero-v .hero-poster { position: relative; inset: auto; display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; z-index: 0; }
  .hero-v .hero-shade { display: none; }
  .hero-v .hx { min-height: 0; height: auto; padding: 22px var(--s-5) 40px; }
  .hero-v .hero-tag, .hero-v .hero-play { top: calc(56.25vw - 34px); bottom: auto; }
  .hero-v h1 { text-shadow: none; }
}

/* 30 Sep: short scenery bands (parcels, about, why-konkan) never crop the film.
   The video is always shown whole at 16:9; text sits over it only when it fits, otherwise below. */
.hero-v--short { aspect-ratio: 16 / 9; min-height: 0; max-height: none; }
.hero-v--short .hx { min-height: 0; height: 100%; }
@media (max-width: 1279px) {
  .hero-v--short { aspect-ratio: auto; }
  .hero-v--short video, .hero-v--short .hero-poster { position: relative; inset: auto; display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; z-index: 0; }
  .hero-v--short .hero-shade { display: none; }
  .hero-v--short .hx { min-height: 0; height: auto; padding: 28px var(--s-5) 44px; }
  .hero-v--short .hero-tag, .hero-v--short .hero-play { top: calc(56.25vw - 34px); bottom: auto; }
  .hero-v--short h1 { text-shadow: none; }
}

/* 30 Sep: home hero also never crops the film (same rule as the short bands). */
.hero-v { aspect-ratio: 16 / 9; min-height: 0; max-height: none; }
.hero-v .hx { min-height: 0; height: 100%; }
@media (max-width: 1279px) {
  .hero-v { aspect-ratio: auto; }
  .hero-v video, .hero-v .hero-poster { position: relative; inset: auto; display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; z-index: 0; }
  .hero-v .hero-shade { display: none; }
  .hero-v .hx { min-height: 0; height: auto; padding: 28px var(--s-5) 44px; }
  .hero-v .hero-tag, .hero-v .hero-play { top: calc(56.25vw - 34px); bottom: auto; }
  .hero-v h1 { text-shadow: none; }
}