/* KP UI Delights Preview — cream / ink / yellow brand only */

/* Preview banner */
.kp-preview-banner{display:none!important}
.kp-preview-banner a{color:#ffe066;text-decoration:underline;text-underline-offset:2px}
body{padding-top:0}
/* preview padding removed */

/* 1. Essay rows as cards-in-a-list */
.row.kp-card{
  position:relative;
  border:1.5px solid transparent;
  border-radius:14px;
  padding:14px 14px;
  margin:6px 0;
  border-bottom-color:transparent;
  background:transparent;
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.row.kp-card + .row.kp-card{border-top:none}
.row.kp-card:hover,
.row.kp-card:focus-within{
  background:#fff;
  border-color:#efe9db;
  box-shadow:0 8px 24px rgba(28,27,24,.07), 0 2px 0 #f3ead4;
  transform:translateY(-2px);
}
.row.kp-card:active{
  transform:translateY(0);
  box-shadow:0 3px 10px rgba(28,27,24,.05);
}
.row.kp-card .tag{
  transition:background .2s, border-color .2s;
}
.row.kp-card:hover .tag.t-story,
.row.kp-card:hover .tag.t-career,
.row.kp-card:focus-within .tag.t-story,
.row.kp-card:focus-within .tag.t-career{
  background:#fff5cc;border-color:#ffe066;
}
.row.kp-card:hover .tag.t-tactical,
.row.kp-card:focus-within .tag.t-tactical{
  background:#ffead9;border-color:#ffa94d;
}
.row.kp-card .t a{
  background-image:linear-gradient(currentColor,currentColor);
  background-position:0 100%;
  background-repeat:no-repeat;
  background-size:0% 1.5px;
  transition:background-size .28s ease;
  text-decoration:none;
}
.row.kp-card:hover .t a,
.row.kp-card:focus-within .t a{
  background-size:100% 1.5px;
  text-decoration:none;
}

/* 2. Logo strip silent ticker */
.logostrip.kp-ticker{margin:28px 0 8px}
.logostrip.kp-ticker .logostrip-label{margin-bottom:12px}
.logostrip.kp-ticker .kp-ticker-mask{
  overflow:hidden;position:relative;
  margin:0 -20px;padding:10px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.logostrip.kp-ticker .kp-ticker-track{
  display:flex;width:max-content;
  animation:kp-logo-marquee 38s linear infinite;
}
.logostrip.kp-ticker:hover .kp-ticker-track,
.logostrip.kp-ticker:focus-within .kp-ticker-track{
  animation-play-state:paused;
}
.logostrip.kp-ticker .kp-ticker-set{
  display:flex;align-items:center;gap:44px;padding-right:44px;flex:none;
}
.logostrip.kp-ticker .kp-ticker-set img{
  height:26px;width:auto;border-radius:0;margin:0;
  filter:grayscale(100%);opacity:.7;
  transition:filter .25s,opacity .25s;flex:none;
}
.logostrip.kp-ticker .kp-ticker-set img.lg-nba{height:32px}
.logostrip.kp-ticker .kp-ticker-set img.lg-dl{height:21px}
.logostrip.kp-ticker .kp-ticker-set img.lg-d1{height:22px}
.logostrip.kp-ticker .kp-ticker-set img.lg-nt{height:30px}
.logostrip.kp-ticker .kp-ticker-set img:hover{filter:none;opacity:1}
.logostrip.kp-ticker .kp-ticker-set a{display:inline-flex}
@keyframes kp-logo-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:640px){
  .logostrip.kp-ticker .kp-ticker-set{gap:34px;padding-right:34px}
  .logostrip.kp-ticker .kp-ticker-set img{height:22px}
  .logostrip.kp-ticker .kp-ticker-set img.lg-nba{height:27px}
  .logostrip.kp-ticker .kp-ticker-set img.lg-dl{height:18px}
  .logostrip.kp-ticker .kp-ticker-set img.lg-d1{height:19px}
  .logostrip.kp-ticker .kp-ticker-set img.lg-nt{height:25px}
}
@media (prefers-reduced-motion:reduce){
  .logostrip.kp-ticker .kp-ticker-mask{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .logostrip.kp-ticker .kp-ticker-track{animation:none;flex-wrap:wrap;width:auto;justify-content:flex-start}
  .logostrip.kp-ticker .kp-ticker-set:nth-child(2){display:none}
  .logostrip.kp-ticker .kp-ticker-set{flex-wrap:wrap;gap:16px 34px;padding-right:0}
}

/* 3. Hero mark draw-on — clean CSS background-size paint */
.hero h1 mark.kp-draw{
  background-color:transparent;
  background-image:linear-gradient(#ffe066,#ffe066);
  background-repeat:no-repeat;
  background-position:left center;
  background-size:0% 100%;
  animation:kp-mark-paint .9s cubic-bezier(.22,1,.36,1) .15s forwards;
}
@keyframes kp-mark-paint{
  from{background-size:0% 100%}
  to{background-size:100% 100%}
}
@media (prefers-reduced-motion:reduce){
  .hero h1 mark.kp-draw{
    background-color:#ffe066;
    background-image:none;
    background-size:auto;
    animation:none;
  }
}

/* 4. Currently live status pill — removed */

/* 5. Mobile menu = full-height cream sheet */
@media (max-width:640px){
  .kp-nav-scrim{
    display:none;
    position:fixed;inset:0;z-index:9000;
    background:rgba(28,27,24,.28);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    opacity:0;transition:opacity .28s ease;
  }
  body.navopen .kp-nav-scrim{display:block;opacity:1}
  nav:not(.fnav){
    position:relative;z-index:9100;
  }
  body.navopen{
    overflow:hidden;
  }
  body.navopen nav:not(.fnav){
    position:fixed;left:0;right:0;top:0;bottom:0;
    z-index:9100;
    background:#faf9f4;
    flex-direction:column;flex-wrap:nowrap;
    align-items:stretch;justify-content:flex-start;
    padding:18px 24px 40px;
    gap:0;
    overflow-y:auto;
    animation:kp-sheet-in .42s cubic-bezier(.22,1,.36,1);
  }
  @keyframes kp-sheet-in{
    from{transform:translateY(18px);opacity:.6}
    to{transform:translateY(0);opacity:1}
  }
  body.navopen nav:not(.fnav) a:first-child{
    flex-basis:auto;margin:0;padding:6px 0 18px;text-align:left;
  }
  body.navopen nav:not(.fnav) .navlbl{
    position:absolute;top:14px;right:16px;margin:0;
  }
  body.navopen nav:not(.fnav) a:not(:first-child){
    display:block;flex-basis:auto;
    text-align:left;
    padding:18px 4px;
    font-size:22px;font-weight:800;letter-spacing:.08em;
    border-top:1px solid #efe9db;
    opacity:0;transform:translateY(10px);
    animation:kp-link-in .38s cubic-bezier(.22,1,.36,1) forwards;
  }
  body.navopen nav:not(.fnav) a:nth-of-type(2){margin-top:28px;animation-delay:.05s}
  body.navopen nav:not(.fnav) a:nth-of-type(3){animation-delay:.09s}
  body.navopen nav:not(.fnav) a:nth-of-type(4){animation-delay:.13s}
  body.navopen nav:not(.fnav) a:nth-of-type(5){animation-delay:.17s}
  body.navopen nav:not(.fnav) a:nth-of-type(6){animation-delay:.21s}
  body.navopen nav:not(.fnav) a:nth-of-type(7){animation-delay:.25s}
  body.navopen nav:not(.fnav) a:nth-of-type(8){animation-delay:.29s}
  body.navopen nav:not(.fnav) .kp-search-btn{
    display:flex !important;
    margin-top:20px;
    border:1.5px solid #efe9db;border-radius:12px;
    padding:14px 16px;justify-content:flex-start;gap:10px;
    font-size:14px;letter-spacing:.04em;
    background:#fff;opacity:0;animation:kp-link-in .38s cubic-bezier(.22,1,.36,1) .34s forwards;
  }
  @keyframes kp-link-in{to{opacity:1;transform:translateY(0)}}
}
@media (max-width:640px) and (prefers-reduced-motion:reduce){
  body.navopen nav:not(.fnav),
  body.navopen nav:not(.fnav) a:not(:first-child),
  body.navopen nav:not(.fnav) .kp-search-btn{animation:none;opacity:1;transform:none}
}

/* Search button in nav */
.kp-search-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  margin-left:auto;
  background:#fff;border:1.5px solid #efe9db;border-radius:999px;
  width:36px;height:36px;padding:0;cursor:pointer;color:var(--ink);
  transition:border-color .2s, box-shadow .2s;
}
.kp-search-btn:hover{border-color:#c9bfa4;box-shadow:0 2px 0 #f3ead4}
.kp-search-btn svg{width:16px;height:16px;display:block}
.kp-search-btn .kp-kbd{
  display:none;font-size:10px;font-weight:700;color:#8a867a;
  border:1px solid #efe9db;border-radius:5px;padding:1px 5px;
  font-family:"IBM Plex Sans",sans-serif;
}
@media (min-width:641px){
  nav:not(.fnav) .navlbl{display:none}
  .kp-search-btn{width:auto;padding:0 10px 0 12px;height:34px}
  .kp-search-btn .kp-kbd{display:inline-block}
}
@media (max-width:640px){
  .kp-search-btn{margin-left:0;margin-right:4px}
  nav:not(.fnav) .kp-search-btn:not(.in-sheet){order:2}
  nav:not(.fnav) .navlbl{order:3}
}

/* 6. Command palette */
.kp-cmd{
  display:none;position:fixed;inset:0;z-index:12000;
  align-items:flex-start;justify-content:center;
  padding:12vh 16px 24px;
  background:rgba(28,27,24,.32);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.kp-cmd.open{display:flex}
.kp-cmd-panel{
  width:min(560px,100%);
  background:#faf9f4;
  border:1.5px solid #efe9db;
  border-radius:16px;
  box-shadow:0 24px 60px rgba(28,27,24,.18), 0 2px 0 #f3ead4;
  overflow:hidden;
  animation:kp-cmd-in .22s cubic-bezier(.22,1,.36,1);
}
@keyframes kp-cmd-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.kp-cmd-input{
  width:100%;border:0;outline:0;background:transparent;
  font:600 16px "IBM Plex Sans",sans-serif;color:var(--ink);
  padding:18px 18px 14px;border-bottom:1px solid #efe9db;
}
.kp-cmd-input::placeholder{color:#8a867a}
.kp-cmd-list{
  max-height:min(52vh,420px);overflow:auto;padding:8px;
}
.kp-cmd-item{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;text-align:left;border:0;background:transparent;cursor:pointer;
  border-radius:10px;padding:11px 12px;
  font:600 14.5px "IBM Plex Sans",sans-serif;color:var(--ink);
}
.kp-cmd-item:hover,.kp-cmd-item.active{background:#fff;box-shadow:inset 0 0 0 1.5px #efe9db}
.kp-cmd-item .kp-cmd-kind{
  font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#8a867a;flex:none;
}
.kp-cmd-empty{padding:22px 14px;text-align:center;color:#8a867a;font-size:14px}
.kp-cmd-hint{padding:8px 14px 12px;font-size:11px;color:#8a867a;border-top:1px solid #efe9db}
@media (prefers-reduced-motion:reduce){
  .kp-cmd-panel{animation:none}
}

/* 7. Essay reading chrome */
.kp-readbar{
  position:fixed;left:0;top:0;height:3px;width:0%;
  background:#ffe066;z-index:9990;
  box-shadow:0 0 0 1px rgba(255,224,102,.25);
  pointer-events:none;
}
body.kp-has-preview .kp-readbar{top:34px}
.kp-readtime{
  display:inline-block;margin-left:8px;
  font-size:12px;color:#8a867a;font-weight:600;
}
article.post.kp-fade{
  animation:kp-post-in .55s ease both;
}
@keyframes kp-post-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  article.post.kp-fade{animation:none}
}

/* 8. Pull quotes upgrade */
.pullcar .ptrack{scroll-snap-type:x mandatory;scroll-padding:0}
.pullcar .ptrack .pull.pslide{
  scroll-snap-align:center;scroll-snap-stop:always;
  transition:transform .35s ease, box-shadow .35s ease, opacity .35s ease;
  transform:scale(.97);opacity:.82;
}
.pullcar .ptrack .pull.pslide.kp-active{
  transform:scale(1);opacity:1;
  box-shadow:4px 4px #efe9db;
}
.pullcar:focus-within{outline:none}
.pullcar[tabindex="0"]:focus{outline:2px solid #ffe066;outline-offset:4px;border-radius:14px}
@media (prefers-reduced-motion:reduce){
  .pullcar .ptrack .pull.pslide{transition:none;transform:none;opacity:1}
}

/* 9. Homepage hybrid CTA (option 4) */
.cta.cta-hybrid{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  padding:22px 22px 20px;
  margin:28px 0 8px;
  background:#fff;
  border:1.5px solid #efe9db;
  box-shadow:3px 3px #efe9db;
  border-radius:14px;
  font-size:15px;
}
.cta-hybrid .cta-eyebrow{
  margin:0;
  font-family:"Cabinet Grotesk",sans-serif;
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#8a867a;
}
.cta-hybrid .cta-main{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  width:100%;
}
.cta-hybrid .cta-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:#1c1b18;
  color:#faf9f4 !important;
  font-family:"Cabinet Grotesk",sans-serif;
  font-weight:800;
  font-size:16px;
  letter-spacing:-.01em;
  padding:13px 22px;
  border-radius:999px;
  text-decoration:none !important;
  box-shadow:0 0 0 0 #ffe066;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.cta-hybrid .cta-primary:hover{
  background:#000;
  box-shadow:3px 3px 0 #ffe066;
  transform:translate(-1px,-1px);
}
.cta-hybrid .cta-primary:focus-visible{
  outline:2px solid #1f5fe0;
  outline-offset:3px;
}
.cta-hybrid .cta-sub{
  margin:0;
  font-size:14px;
  color:#6f6a5c;
  line-height:1.4;
}
.cta-hybrid .cta-secondary{
  display:inline-flex;
  align-items:center;
  margin-top:2px;
  padding:8px 0;
  font-family:"Cabinet Grotesk",sans-serif;
  font-weight:700;
  font-size:14.5px;
  color:var(--link,#1f5fe0) !important;
  text-decoration:none !important;
  border-bottom:1.5px solid transparent;
  transition:border-color .15s ease, color .15s ease;
}
.cta-hybrid .cta-secondary:hover{
  border-bottom-color:var(--link,#1f5fe0);
}
.cta-hybrid .cta-secondary:focus-visible{
  outline:2px solid #1f5fe0;
  outline-offset:3px;
  border-radius:4px;
}
@media (min-width:560px){
  .cta.cta-hybrid{
    padding:24px 26px 22px;
  }
  .cta-hybrid .cta-primary{
    font-size:17px;
    padding:14px 26px;
  }
}
@media (max-width:420px){
  .cta-hybrid .cta-primary{
    width:100%;
    text-align:center;
  }
}