/* ==========================================================================
   KAIVANT Score · ks.css
   Light house style for kaivantscore.com, aligned to kaivant.org style.css v1.0
   Tokens copied verbatim from kaivant.org. Graph tokens added for the score UI.
   U-01 · Session 159 · 2026-09-18
   Replaces site.css page by page. site.css retires when the last page has moved.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Tokens
   -------------------------------------------------------------------------- */
:root{
  /* colour: identical to kaivant.org */
  --stone:#F1EDE6;        /* page ground */
  --paper:#FBF9F5;        /* raised surfaces, cards */
  --ink:#1C1A17;          /* primary text, dark bands */
  --muted:#6E665C;        /* secondary text */
  --line:#DAD3C8;         /* hairlines, borders */
  --damson:#5E2A4D;       /* accent only */
  --damson-deep:#3E1C32;  /* deep hover states */
  --ft-bg:#15130F;        /* footer band */

  /* graph colours: kaivant.org infographic palette, plus amber for middle states */
  --pos:#27500A;          /* strong, augmenting, within range */
  --pos-soft:#EAF3DE;
  --neg:#A32D2D;          /* weak, substituting, floor breach */
  --neg-soft:#FCEBEB;
  --amber:#8A5A00;        /* middle state only */
  --track:#E6E0D6;        /* gauge and bar tracks */

  /* new logo */
  --logo-gold:#c89545;
  --logo-word:#933f3b;

  /* type */
  --font-display:"Fraunces",Georgia,serif;
  --font-body:"Inter",system-ui,sans-serif;

  /* layout */
  --wrap:1120px;
}

/* --------------------------------------------------------------------------
   2 · Reset and base
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--stone);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit}
em{font-family:var(--font-display);font-style:italic}

/* --------------------------------------------------------------------------
   3 · Typography atoms
   -------------------------------------------------------------------------- */
.eyebrow{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.2em;
  color:var(--damson);font-weight:600;
}
.cap{font-size:.68rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);font-weight:600}
.num{font-family:var(--font-display);font-weight:500;font-variant-numeric:lining-nums tabular-nums}

/* --------------------------------------------------------------------------
   4 · Layout
   -------------------------------------------------------------------------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.wrap-tight{max-width:1080px;margin:0 auto;padding:0 28px}
.wrap-narrow{max-width:880px;margin:0 auto;padding:0 28px}
.band-stone{background:var(--stone)}
.band-paper{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band-ink{background:var(--ink);color:var(--stone)}

/* --------------------------------------------------------------------------
   5 · Buttons  (kaivant.org)
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-size:.82rem;font-weight:500;
  letter-spacing:.02em;text-decoration:none;padding:11px 20px;border-radius:2px;
  transition:all .2s;cursor:pointer;border:1px solid var(--ink);white-space:nowrap;
}
.btn .ar{transition:transform .2s}
.btn:hover .ar{transform:translateX(3px)}
.btn-ink{background:var(--ink);color:var(--stone)}
.btn-ink:hover{background:#000}
.btn-line{background:transparent;color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--stone)}
.btn-stone{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-stone:hover{background:#fff}
.chip-links{display:flex;gap:8px;flex-wrap:wrap}
.chip-links a{font-size:.8rem;font-weight:500;color:var(--muted);text-decoration:none;padding:5px 13px;border:1px solid var(--line);background:var(--paper);transition:color .15s,border-color .15s}
.chip-links a:hover{color:var(--ink);border-color:var(--muted)}

/* --------------------------------------------------------------------------
   6 · Navigation  (kaivant.org header, kaivantscore links)
   -------------------------------------------------------------------------- */
header.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(241,237,230,.92);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:66px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-logo{height:26px;width:auto;display:block}
.brand-logo .lg-g{fill:var(--logo-gold)}
.brand-logo .lg-w{fill:var(--logo-word)}
.brand .bs{font-size:.66rem;text-transform:uppercase;letter-spacing:.2em;color:var(--muted);font-weight:600;padding-left:12px;border-left:1px solid var(--line)}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{text-decoration:none;font-size:.84rem;color:var(--muted);transition:color .2s;white-space:nowrap}
@media (max-width:1180px){.nav-links{gap:18px}}
.nav-links a:hover{color:var(--ink)}
.nav-links a.btn{color:var(--stone)}
.nav-links a.btn:hover{color:var(--stone)}

.hamburger{display:none;background:none;border:none;cursor:pointer;font-size:1.4rem;line-height:1;color:var(--ink);padding:6px}
/* mobile menu: dropdown panel under the sticky header (S160), not a full-page overlay */
.mob-nav{position:fixed;top:66px;left:0;right:0;z-index:200;background:var(--paper);display:none;flex-direction:column;border-bottom:1px solid var(--line);box-shadow:0 14px 28px rgba(28,26,23,.10);max-height:calc(100vh - 66px);overflow-y:auto;padding:6px 0 10px}
.mob-nav.open{display:flex;animation:mobDrop .18s ease-out}
@keyframes mobDrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.mob-close{display:none}
.mob-nav a{font-family:var(--font-body);font-size:.95rem;font-weight:500;color:var(--ink);text-decoration:none;padding:13px 28px;border-bottom:1px solid var(--line);transition:color .15s,background .15s}
.mob-nav a:last-child{border-bottom:none}
.mob-nav a:hover{background:var(--stone)}
.mob-nav a.acct{color:var(--damson)}

@media (max-width:1000px){
  .nav-links{display:none}
  .hamburger{display:block}
}

/* --------------------------------------------------------------------------
   7 · Section heads
   -------------------------------------------------------------------------- */
.sec{padding:clamp(64px,9vw,110px) 0}
.sec-head{margin-bottom:clamp(32px,4.5vw,52px)}
.sec-eye{font-size:.7rem;text-transform:uppercase;letter-spacing:.22em;color:var(--damson);font-weight:600;margin-bottom:14px}
.sec-title{font-family:var(--font-display);font-weight:500;font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.08;max-width:24ch;letter-spacing:-.01em;text-wrap:balance}
.sec-title em{color:var(--damson);font-weight:500}
.sec-sub{color:var(--muted);max-width:60ch;margin-top:18px;font-size:1.02rem;line-height:1.72}

/* --------------------------------------------------------------------------
   8 · Etymology strip  (dark ink band, kaivant.org)
   -------------------------------------------------------------------------- */
.ety-strip{background:var(--ink);padding:clamp(44px,6vw,72px) 0}
.ety-inner{display:flex;align-items:center;gap:48px}
.ety-kanji{font-family:var(--font-display);font-size:88px;font-weight:400;color:rgba(255,255,255,.07);line-height:1;flex-shrink:0;user-select:none}
.ety-word{font-family:var(--font-display);font-weight:500;font-size:1.35rem;color:#EDE7DD;margin-bottom:8px;line-height:1}
.ety-word em{font-style:italic;color:rgba(185,143,168,.9)}
.ety-body{font-size:.93rem;line-height:1.7;color:rgba(255,255,255,.55);max-width:58ch}
.ety-body em{color:rgba(255,255,255,.82);font-style:italic}

/* --------------------------------------------------------------------------
   9 · Footer  (deep ink band, kaivant.org)
   -------------------------------------------------------------------------- */
footer.ft{background:var(--ft-bg);color:#B6AEA2;position:relative;overflow:hidden;padding:clamp(56px,7vw,82px) 0 40px}
footer.ft .fglyph{position:absolute;right:3vw;top:0;font-family:var(--font-display);font-size:15rem;line-height:1;color:rgba(94,42,77,.14);pointer-events:none}
footer.ft .brand-logo{height:32px}
footer.ft .brand-logo .lg-w{fill:#EDE7DD}
.ft-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px;position:relative}
.ft .tagline{font-size:.9rem;margin-top:16px;max-width:34ch;line-height:1.55}
.ft .tagline em{color:#D8CEC1}
.ft h4{font-size:.7rem;text-transform:uppercase;letter-spacing:.18em;color:#807769;margin-bottom:16px;font-weight:600}
.ft ul{list-style:none}
.ft li{margin-bottom:10px}
.ft a{text-decoration:none;font-size:.88rem;color:#B6AEA2;transition:color .2s}
.ft a:hover{color:var(--paper)}
.ft a span{color:#807769;font-style:italic}
.ft-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:54px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);font-size:.78rem;color:#807769;position:relative}

/* --------------------------------------------------------------------------
   10 · Accessibility and responsive
   -------------------------------------------------------------------------- */
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--damson);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}
@media (max-width:860px){
  .ft-top{grid-template-columns:1fr 1fr;gap:30px}
  .ety-inner{gap:20px}
  .ety-kanji{font-size:52px}
}
@media (max-width:560px){
  .ft-top{grid-template-columns:1fr}
}

/* --------------------------------------------------------------------------
   11 · Content-page components  (light rewrite of site.css §9 to §15, S159)
   -------------------------------------------------------------------------- */
.btn{color:var(--ink);background:transparent}
.btn-ink,.btn-primary{background:var(--ink);color:var(--stone);border-color:var(--ink)}
.btn-ink:hover,.btn-primary:hover{background:#000;color:var(--stone)}
.btn-ghost,.btn-secondary{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover,.btn-secondary:hover,.btn-line:hover{background:var(--ink);color:var(--stone)}
.btn .arrow{font-family:var(--font-display);font-style:italic;line-height:1}
.btn-stone{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-stone:hover{background:#fff}

.section-marker{display:flex;align-items:center;gap:14px;margin-bottom:28px}
.section-marker .roman{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:1.9rem;color:var(--damson);line-height:1}
.section-marker .rule{flex:1;height:1px;background:var(--line)}
.section-marker .cap{color:var(--muted)}
.section-title{font-family:var(--font-display);font-weight:500;font-size:clamp(2rem,4vw,3rem);line-height:1.06;color:var(--ink);letter-spacing:-.012em;text-wrap:balance;margin-bottom:22px}
.section-title em{color:var(--damson);font-weight:500}

.page-hero{padding:clamp(64px,9vw,120px) 0 clamp(56px,7vw,90px);border-bottom:1px solid var(--line);position:relative;background:var(--stone);overflow:hidden}
.page-hero::after{content:"\6539";position:absolute;right:-2vw;top:50%;transform:translateY(-50%);font-family:var(--font-display);font-size:clamp(180px,22vw,340px);line-height:1;color:rgba(94,42,77,.04);pointer-events:none;user-select:none;z-index:1}
.page-hero .bg-grad{display:none}
.page-hero .wrap-tight,.page-hero .wrap,.page-hero .wrap-narrow{position:relative;z-index:2}
.page-hero .kicker{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.page-hero h1{font-family:var(--font-display);font-weight:500;font-size:clamp(2.5rem,5.5vw,4.4rem);line-height:1.03;color:var(--ink);letter-spacing:-.018em;text-wrap:balance;max-width:22ch;margin-bottom:24px}
.page-hero h1 em{color:var(--damson);font-weight:500}
.page-hero .sub{font-family:var(--font-display);font-style:italic;font-size:clamp(1.15rem,1.8vw,1.4rem);line-height:1.5;color:var(--muted);max-width:60ch;margin-bottom:36px}
.page-hero .sub em{color:var(--ink);font-style:normal}
.page-hero .meta-row{display:flex;align-items:center;gap:32px;padding-top:28px;border-top:1px solid var(--line)}
.page-hero .meta-row .item{display:flex;flex-direction:column;gap:4px}
.page-hero .meta-row .lbl{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.page-hero .meta-row .val{font-family:var(--font-display);font-style:italic;font-size:1rem;color:var(--ink)}
.page-hero .meta-row .sep{width:1px;height:36px;background:var(--line)}

.framework-section{padding:clamp(64px,8vw,100px) 0;border-bottom:1px solid var(--line)}
.framework-section.alt{background:var(--paper)}
.framework-section .content-grid{margin-top:44px;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.framework-section .content-grid.single{grid-template-columns:1fr;max-width:72ch}
.framework-section .content-grid p{font-size:1.05rem;line-height:1.78;color:var(--muted);margin-top:.8em}
.framework-section .content-grid p:first-child{margin-top:0}
.framework-section .content-grid p em{color:var(--ink)}
.framework-section .content-grid p strong{color:var(--ink);font-weight:600}

.ls{background:var(--paper)!important;border-top:1px solid var(--line)!important}
.ls p,.ls .d,.ls .desc{font-size:1.02rem;line-height:1.78;color:var(--muted)}
.ls p em{color:var(--ink)}
.ls p strong{color:var(--ink);font-weight:600}

.dim-grid{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.dim-card{padding:28px 26px 26px;background:var(--stone);display:flex;flex-direction:column;gap:10px}
.dim-card .dim-abbr{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--damson)}
.dim-card h3{font-family:var(--font-display);font-weight:500;font-size:1.3rem;color:var(--ink);line-height:1.15;margin:0}
.dim-card .dim-def{font-size:.95rem;line-height:1.7;color:var(--muted);margin:0}

.cta-band{padding:clamp(64px,8vw,100px) 0;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cta-band .inner{display:flex;align-items:center;justify-content:space-between;gap:48px;flex-wrap:wrap}
.cta-band .copy h2{font-family:var(--font-display);font-weight:500;font-size:clamp(1.8rem,3.4vw,2.7rem);line-height:1.1;color:var(--ink);text-wrap:balance;max-width:22ch;margin-bottom:14px}
.cta-band .copy h2 em{color:var(--damson);font-weight:500}
.cta-band .copy p{color:var(--muted);max-width:52ch}
.cta-band .actions{display:flex;gap:12px;flex-wrap:wrap}

@media (max-width:960px){
  .page-hero::after{display:none}
  .page-hero .meta-row{flex-wrap:wrap;gap:16px}
  .framework-section .content-grid{grid-template-columns:1fr;gap:32px}
  .dim-grid{grid-template-columns:1fr}
  .cta-band .inner{flex-direction:column;align-items:flex-start;gap:28px}
}
.ls p + p,.prose p + p{margin-top:.9em}
.link-u{color:inherit;text-decoration:underline;text-underline-offset:3px}
.link-ink{color:var(--ink)}

/* --------------------------------------------------------------------------
   12 · Client logos  (U-04, S160, homepage)
   Logos are pre-balanced on a 360x120 canvas, so every cell uses one size.
   -------------------------------------------------------------------------- */
.logo-grid{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:18px 0}
.logo-grid li{flex:0 0 12.5%;display:flex;justify-content:center;padding:0 8px}
.logo-grid img{display:block;width:100%;max-width:150px;height:auto;filter:grayscale(1);opacity:.6;mix-blend-mode:multiply;transition:filter .25s,opacity .25s}
.logo-grid li:hover img{filter:none;opacity:1}
@media (max-width:1000px){.logo-grid li{flex-basis:16.666%}}
@media (max-width:760px){.logo-grid li{flex-basis:25%;padding:0 6px}}
@media (max-width:420px){.logo-grid{gap:12px 0}.logo-grid li{flex-basis:33.333%}}

/* --------------------------------------------------------------------------
   S171 · Free tests ribbon above the header (both sites, same design)
   -------------------------------------------------------------------------- */
.kv-rib{background:#3E1C32;color:#F1EDE6;font-family:var(--font-body);font-size:.84rem;line-height:1.3;position:relative;z-index:60}
.kv-rib-in{max-width:var(--wrap,1120px);margin:0 auto;padding:8px 24px;display:flex;align-items:center;justify-content:center;gap:14px}
.kv-rib-lbl{flex:none;border:1px solid rgba(200,149,69,.55);background:rgba(200,149,69,.16);color:#E5B86E;border-radius:999px;padding:3px 9px;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.kv-rib-full{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.kv-rib-full a{color:#fff;font-weight:600;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.kv-rib-full a:hover{border-bottom-color:#c89545}
.kv-rib-full i{font-style:normal;color:#c89545;font-size:.74rem;font-weight:600;margin-right:4px}
.kv-rib-sep{width:1px;height:14px;background:rgba(241,237,230,.35);margin:0 6px}
.kv-rib-short{display:none;color:#fff;font-weight:600;white-space:nowrap}
.kv-rib-go{flex:none;display:inline-flex;align-items:center;gap:8px;background:#c89545;color:#3E1C32;border-radius:999px;padding:7px 15px;font-weight:700;font-size:.82rem;text-decoration:none;white-space:nowrap;transition:background .15s,transform .15s}
.kv-rib-go:hover{background:#D9A758;color:#3E1C32;transform:translateY(-1px)}
.kv-rib-dot{width:7px;height:7px;border-radius:50%;background:#3E1C32;animation:kvRibPulse 2s infinite}
@keyframes kvRibPulse{0%{box-shadow:0 0 0 0 rgba(62,28,50,.55)}70%{box-shadow:0 0 0 6px rgba(62,28,50,0)}100%{box-shadow:0 0 0 0 rgba(62,28,50,0)}}
@media (prefers-reduced-motion:reduce){.kv-rib-dot{animation:none}}
@media (max-width:900px){.kv-rib-lbl{display:none}.kv-rib-in{justify-content:flex-start;padding:7px 16px;gap:12px}.kv-rib-full{display:block;line-height:1.35}.kv-rib-sep{display:block;width:0;height:2px;margin:0;background:none}.kv-rib-full i{margin-left:6px;white-space:nowrap}}
@media (max-width:480px){.kv-rib{font-size:.78rem}.kv-rib-full i{display:none}.kv-rib-go{padding:6px 12px;font-size:.78rem}}