/* Decision Crafters — Ghost theme
   Ink Navy #0D1B2A · Signal Blue #2E7BA6 · Mist #EEF2F5 · Graphite #5A6B7A
   Palette is the identity kit only; no colour is introduced here.
   Signal Blue is not used on navy: at 10-13px it measures 3.73:1, below the
   4.5:1 WCAG AA floor. --on-navy (white @82%, renders #D3D6D9, 11.92:1) is
   used instead, which also keeps Signal Blue to the kit's punctuation role.
   Jost: headlines + wordmark only. IBM Plex Sans: body/UI. IBM Plex Mono: labels. */

:root{
  --navy:#0D1B2A; --signal:#2E7BA6; --on-navy:rgba(255,255,255,.82);
  --mist:#EEF2F5; --graphite:#5A6B7A; --graphite-mute:#687682; --hairline:rgba(13,27,42,.14);
  --hairline-inv:rgba(255,255,255,.14);
  --sans:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --display:"Jost",var(--sans);
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --gutter:48px; --measure:700px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

/* Keyboard focus. Browser defaults are close to invisible on Ink Navy, so
   every focusable element gets an explicit ring: Signal Blue on light
   (4.67:1) and white inside navy bands (17.39:1). :focus-visible keeps it
   off mouse clicks. The :focus fallback covers browsers without support. */
:focus{outline:2px solid var(--signal);outline-offset:2px}
:focus:not(:focus-visible){outline:none}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px;border-radius:1px}
.band :focus-visible,.site-head :focus-visible,.site-foot :focus-visible,
.signup :focus-visible,.gate :focus-visible{outline-color:#fff}
body{margin:0;background:#fff;color:var(--navy);font:400 16px/1.6 var(--sans);text-wrap:pretty}
img{max-width:100%;height:auto;display:block}
a{color:var(--signal);text-decoration:none}
a:hover{color:var(--navy)}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;margin:0;letter-spacing:-.01em}
.u-mono{font:400 11.5px/1.6 var(--mono);color:var(--graphite)}
.u-eyebrow{font:500 10px/1 var(--mono);letter-spacing:.13em;color:var(--signal)}
.u-wrap{max-width:1180px;margin:0 auto;padding:0 var(--gutter)}
.u-measure{max-width:var(--measure);margin:0 auto}
.u-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---- navy band ---------------------------------------------------------- */
.band{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.band .u-eyebrow{color:var(--on-navy)}
.band__ring{position:absolute;border-radius:50%;border:1px solid rgba(46,123,166,.2);pointer-events:none}
.band__ring--wide{border-color:rgba(255,255,255,.08)}
.band__mark{position:absolute;opacity:.06;pointer-events:none}

/* ---- header ------------------------------------------------------------- */
.site-head{display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--gutter);border-bottom:1px solid var(--hairline-inv);position:relative}
.site-head__logo img{height:22px;width:auto}
.site-nav{display:flex;align-items:center;gap:30px;
  font:500 13px/1 var(--sans);color:rgba(255,255,255,.82)}
.site-nav ul,.site-foot nav ul{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0}
.site-foot nav ul{gap:26px}
.site-nav li,.site-foot nav li{margin:0}
.site-nav a{color:inherit;white-space:nowrap}
.site-nav a:hover,.site-nav .is-current{color:#fff}
.site-nav .is-current{border-bottom:2px solid var(--signal);padding-bottom:3px}
.btn{display:inline-block;flex:none;white-space:nowrap;padding:9px 18px;border-radius:2px;
  font:500 13px/1 var(--sans);border:1px solid transparent;cursor:pointer}
.btn--ghost{border-color:rgba(255,255,255,.32);color:#fff}
.btn--light{background:#fff;color:var(--navy)}
.btn--navy{background:var(--navy);color:#fff}
.btn--outline{border-color:rgba(13,27,42,.24);color:var(--navy)}
.btn--lg{padding:14px 26px;font-size:13.5px}
.nav-toggle{display:none}

/* ---- hero / paths ------------------------------------------------------- */
.hero{padding:104px var(--gutter) 88px;max-width:900px;position:relative;
  display:flex;flex-direction:column;gap:30px}
.hero h1{font-weight:300;font-size:clamp(36px,5vw,66px);line-height:1.04;letter-spacing:-.018em;color:#fff}
.hero p{margin:0;max-width:50ch;font-size:17.5px;line-height:1.7;color:rgba(255,255,255,.66)}
.paths{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--hairline-inv);position:relative}
.path{padding:38px var(--gutter);display:flex;flex-direction:column;gap:11px}
.path+.path{border-left:1px solid var(--hairline-inv)}
.path__label{font:500 10px/1 var(--mono);letter-spacing:.12em;color:rgba(255,255,255,.55)}
.path h2{font-size:27px;line-height:1.2;color:#fff}
.path p{margin:0;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.6)}
.path a{color:var(--on-navy)}

/* ---- evidence chips ----------------------------------------------------- */
.chip{display:inline-block;flex:none;white-space:nowrap;border-radius:2px;
  font:500 9px/1 var(--mono);letter-spacing:.05em;padding:4px 8px;border:1px solid transparent}
.chip--verified{background:var(--navy);color:#fff}
.chip--inference{background:var(--signal);color:#fff}
.chip--hypothesis{border-color:var(--graphite);color:var(--graphite);padding:3.5px 7px}
.chip--unknown{border-style:dashed;border-color:#8592A0;color:var(--graphite-mute);padding:3.5px 7px}
.band .chip--verified{background:rgba(255,255,255,.16)}
.band .chip--hypothesis{border-color:rgba(255,255,255,.35);color:rgba(255,255,255,.75)}
.band .chip--unknown{border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.55)}

/* Evidence callout — insert via saved HTML card in the editor:
   <div class="ev ev--verified"><span class="chip chip--verified">VERIFIED</span><p>…</p></div> */
.ev{display:flex;gap:16px;padding:18px 20px;border-radius:0 3px 3px 0;background:var(--mist);
  border-left:3px solid var(--navy);margin:0}
.ev p{margin:0;font-size:15.5px;line-height:1.65;color:var(--navy)}
.ev .chip{height:fit-content}
.ev--inference{background:rgba(46,123,166,.07);border-left-color:var(--signal)}
.ev--hypothesis{border-left-color:var(--graphite)}
.ev--unknown{border-left-style:dashed;border-left-color:#8592A0}

/* ---- ruled index list --------------------------------------------------- */
.index__head{padding:56px var(--gutter) 18px;display:flex;align-items:baseline;justify-content:space-between}
.index__head h2{font-size:22px}
.index{padding:0 var(--gutter) 60px;display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:150px 1fr 118px;gap:30px;padding:24px 0;
  border-top:1px solid var(--hairline);align-items:start}
.index .row:last-child{border-bottom:1px solid var(--hairline)}
.row__meta{font:400 11.5px/1.6 var(--mono);color:var(--graphite)}
.row__body{display:flex;flex-direction:column;gap:7px}
.row__body h3{font-size:25px;line-height:1.24}
.row__body h3 a{color:var(--navy)}
.row__body h3 a:hover{color:var(--signal)}
.row__body p{margin:0;max-width:66ch;font-size:14px;line-height:1.65;color:var(--graphite)}
.row__status{display:flex;justify-content:flex-end}

/* ---- hub filters -------------------------------------------------------- */
.filters{padding:0 var(--gutter) 26px;display:flex;gap:26px;align-items:center;flex-wrap:wrap;position:relative}
.filters__group{display:flex;gap:9px;align-items:center}
.filters__label{font:500 9.5px/1 var(--mono);letter-spacing:.1em;color:rgba(255,255,255,.55)}
.pill{padding:7px 12px;border:1px solid rgba(255,255,255,.24);border-radius:2px;
  font:400 12px/1 var(--sans);color:rgba(255,255,255,.8)}
.pill.is-active{background:#fff;color:var(--navy);border-color:#fff;font-weight:500}
.pill__count{font:400 10px/1 var(--mono);color:rgba(255,255,255,.55);padding-left:3px}
.pill.is-active .pill__count{color:var(--graphite-mute)}

/* ---- post --------------------------------------------------------------- */
.progress{height:2px;background:rgba(13,27,42,.08)}
.progress__bar{height:2px;width:0;background:var(--signal);transition:width .1s linear}
.post-head{padding:64px var(--gutter) 46px;max-width:800px;display:flex;flex-direction:column;gap:20px;position:relative}
.post-head h1{font-weight:300;font-size:clamp(30px,4vw,46px);line-height:1.1;letter-spacing:-.015em;color:#fff}
.post-head .excerpt{margin:0;max-width:56ch;font-size:18px;line-height:1.65;color:rgba(255,255,255,.66)}
.post-byline{display:flex;align-items:center;gap:12px;margin-top:8px;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.16);font:400 12px/1 var(--mono);color:rgba(255,255,255,.55)}
.post-byline img{height:30px;width:30px;border-radius:3px}
.post-content{max-width:var(--measure);margin:0 auto;padding:48px var(--gutter) 0;
  display:flex;flex-direction:column;align-items:stretch;gap:20px;text-align:left}
.post-content p{margin:0;font-size:17px;line-height:1.78}
.post-content h2{font-size:28px;line-height:1.25;margin:14px 0 0;text-align:left}
.post-content h3{font-size:21px;line-height:1.3;margin:10px 0 0;text-align:left}
.post-content ul,.post-content ol{margin:0;padding-left:22px;font-size:17px;line-height:1.7}
.post-content li{margin:0 0 8px}
.post-content li:last-child{margin-bottom:0}
.post-content hr{width:100%;border:0;border-top:1px solid var(--hairline);margin:10px 0}
.post-content blockquote{margin:0;padding-left:20px;border-left:3px solid var(--mist);
  font-size:18px;line-height:1.7;color:var(--graphite)}
.post-content figcaption{font:400 10.5px/1.5 var(--mono);color:var(--graphite);padding-top:8px}
.post-content a{border-bottom:1px solid rgba(46,123,166,.4)}
.post-content > *{margin-left:0;margin-right:0;text-align:left;align-self:stretch}
.post-content > h1,.post-content > h2,.post-content > h3,.post-content > h4{text-align:left}
.post-content .kg-width-wide{width:calc(100% + 140px);max-width:100vw;margin-left:-70px}
.post-content .kg-width-full{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw)}
.post-content [id]{scroll-margin-top:24px}
.anchor{display:block;height:0;overflow:hidden}
.kg-image{margin:0 auto}
.kg-embed-card,.kg-gallery-card,.kg-bookmark-card{width:100%}
.kg-gallery-container{display:flex;flex-direction:column;gap:8px}
.kg-gallery-row{display:flex;gap:8px}
.kg-gallery-image img{width:100%;height:100%;object-fit:cover}
.kg-bookmark-container{display:flex;border:1px solid var(--hairline);border-radius:3px;overflow:hidden;color:var(--navy)}
.kg-bookmark-content{padding:20px;display:flex;flex-direction:column;gap:6px}
.kg-bookmark-title{font:500 15px/1.4 var(--sans)}
.kg-bookmark-description{font:400 13.5px/1.6 var(--sans);color:var(--graphite)}
.kg-bookmark-metadata{font:400 11.5px/1 var(--mono);color:var(--graphite);padding-top:6px;
  display:flex;align-items:center;gap:8px}
.kg-bookmark-icon{width:15px;height:15px;flex:none;object-fit:contain}
.kg-bookmark-author{color:var(--graphite)}
.kg-bookmark-publisher{color:var(--graphite-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:24ch}
.kg-bookmark-thumbnail img{height:100%;width:100%;object-fit:cover}
.kg-callout-card{display:flex;gap:14px;padding:18px 20px;background:var(--mist);border-radius:3px}
.kg-toggle-card{border-top:1px solid var(--hairline);padding:16px 0}
.kg-button-card a{display:inline-block;padding:14px 26px;background:var(--navy);color:#fff;border-radius:2px;font:500 13.5px/1 var(--sans)}
.feature-image{margin:0;padding:0}
.feature-image img{width:100%}

/* ---- paywall / cta ------------------------------------------------------ */
.gate{margin-top:22px;padding:44px var(--gutter) 46px;position:relative;overflow:hidden}
.gate__inner{max-width:640px;display:flex;flex-direction:column;gap:16px;align-items:flex-start;position:relative}
.gate h2{font-size:30px;line-height:1.22;color:#fff}
.gate p{margin:0;max-width:54ch;font-size:14.5px;line-height:1.68;color:rgba(255,255,255,.62)}
.gate__actions{display:flex;gap:14px;align-items:center;margin-top:6px;flex-wrap:wrap}
.gate__actions span{font-size:13px;color:rgba(255,255,255,.55)}
.gate__actions a{color:var(--on-navy)}
.fade{position:relative}
.fade::after{content:"";position:absolute;left:0;right:0;bottom:-14px;height:100px;
  background:linear-gradient(180deg,rgba(255,255,255,0),#fff 80%)}

/* ---- signup / footer ---------------------------------------------------- */
.signup{padding:52px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:48px;flex-wrap:wrap}
.signup h2{font-size:27px;line-height:1.2;color:#fff}
.signup p{margin:6px 0 0;font-size:14px;line-height:1.6;color:rgba(255,255,255,.6)}
.signup form{display:flex;flex:none}
.signup input{padding:15px 18px;width:250px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.25);border-right:none;color:#fff;
  font:400 13.5px/1 var(--sans);border-radius:0}
.signup input::placeholder{color:rgba(255,255,255,.6)}
.signup button{border-radius:0;padding:15px 24px}
.site-foot{padding:26px var(--gutter);display:flex;align-items:center;justify-content:space-between;
  border-top:1px solid var(--hairline-inv);gap:20px;flex-wrap:wrap}
.site-foot img{height:20px;width:20px;opacity:.6}
.site-foot nav{font:400 12.5px/1 var(--sans);color:rgba(255,255,255,.5)}
.site-foot nav a{color:inherit}

/* ---- 404 ---------------------------------------------------------------- */
.error{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:20px;padding:70px var(--gutter);text-align:center;position:relative}
.error h1{font-weight:300;font-size:clamp(32px,4.5vw,46px);line-height:1.12;max-width:20ch;color:#fff}
.error p{margin:0;max-width:44ch;font-size:15.5px;line-height:1.7;color:rgba(255,255,255,.6)}

/* ---- author ------------------------------------------------------------- */
.author-head{padding:52px var(--gutter) 46px;display:flex;gap:26px;align-items:flex-start;position:relative}
.author-head img{height:78px;width:78px;border-radius:4px;flex:none}
.author-head h1{font-weight:300;font-size:38px;line-height:1.1;color:#fff}
.author-head p{margin:0;max-width:52ch;font-size:15.5px;line-height:1.68;color:rgba(255,255,255,.64)}
.author-stats{display:flex;gap:20px;font:400 11.5px/1 var(--mono);color:rgba(255,255,255,.55);padding-top:4px}

/* ---- responsive --------------------------------------------------------- */
@media (max-width:900px){
  :root{--gutter:20px}
  .post-content .kg-width-wide{width:100%;margin-left:0}
  .site-nav{display:none}
  .site-nav.is-open{display:flex;flex-direction:column;align-items:flex-start;gap:0;
    position:absolute;top:100%;left:0;right:0;background:var(--navy);padding:20px var(--gutter);
    border-bottom:1px solid var(--hairline-inv);z-index:20}
  .site-nav.is-open ul{flex-direction:column;align-items:flex-start;gap:0;width:100%}
  .site-nav.is-open li{width:100%;border-bottom:1px solid rgba(255,255,255,.1)}
  .site-nav.is-open a{display:block;padding:14px 0;font:400 24px/1.2 var(--display);color:#fff}
  .site-nav.is-open .btn{margin-top:16px}
  .nav-toggle{display:flex;flex-direction:column;gap:5px;width:22px;padding:11px 0;background:none;border:0}
  .nav-toggle span{height:1.5px;background:#fff;display:block;width:100%}
  .hero{padding:44px var(--gutter) 36px;gap:20px}
  .paths{grid-template-columns:1fr}
  .path+.path{border-left:0;border-top:1px solid var(--hairline-inv)}
  .row{grid-template-columns:1fr;gap:8px;padding:18px 0}
  .row__status{justify-content:flex-start;order:-1}
  .row__meta{order:-2}
  .row__body h3{font-size:21px}
  .signup{flex-direction:column;align-items:stretch;gap:14px}
  .signup form{flex-direction:column;gap:9px}
  .signup input{width:100%;border-right:1px solid rgba(255,255,255,.25)}
  .post-content{padding-top:28px}
  .post-content p{font-size:16px}
}
@media print{.site-head,.site-foot,.signup,.gate,.nav-toggle{display:none}.band{background:#fff;color:var(--navy)}}
