/* Guru Site Health - blog.

   Tokens are copied from index.html so a post and the landing page are visibly
   the same site. The landing page keeps its CSS inline because it is one file;
   the blog shares this one file, because nine pages each repeating 14KB of
   rules is exactly how a stylesheet and a page drift apart.

   Mobile first. Every rule below is the phone layout, and the media queries
   only ever add to it - so a width nobody anticipated gets the simple
   single-column version rather than a broken wide one. */

:root{
  --void:#06080C; --ground:#0A0E14; --surface:#111823; --surface-2:#18212E;
  --edge:#1F2B3A; --edge-2:#2B3A4D;
  --ink:#EDF3FA; --ink-2:#A7B5C6; --ink-3:#778AA1;  /* lifted: #6E7F94 measured 4.35:1 on --surface, under AA */
  --cyan:#22D3EE; --violet:#8B5CF6; --pink:#EC4899;
  --good:#34D399; --warn:#FBBF24; --bad:#F87171;
  --ramp:linear-gradient(100deg,var(--cyan),var(--violet) 55%,var(--pink));
  --measure:68ch;
  --pad:clamp(18px,5vw,32px);
  --radius:16px;
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
  scroll-behavior:smooth;
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink-2);
  font-family:"Jakarta",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* 16px on a phone, up to 17.5px on a wide screen. Never below 16: iOS zooms
     the whole page when text drops under it, and the layout jumps sideways. */
  font-size:clamp(16px,.95rem + .18vw,17.5px);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{max-width:100%;height:auto;display:block}

a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px;
}

/* ---------------------------------------------------------------- shell -- */

.wrap{width:100%;max-width:var(--measure);margin-inline:auto;padding-inline:var(--pad)}
.wrap--wide{max-width:1080px}

/* ------------------------------------------------------------------ nav -- */

.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(6,8,12,.88);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--edge);
}
.nav__in{
  display:flex;align-items:center;gap:14px;min-height:58px;
  width:100%;max-width:1080px;margin-inline:auto;padding-inline:var(--pad);
}
.nav__brand{display:flex;align-items:center;gap:9px;color:var(--ink);font-weight:700;letter-spacing:-.01em}
.nav__brand:hover{text-decoration:none}
.nav__brand img{width:26px;height:26px;border-radius:7px}
.nav__links{margin-left:auto;display:flex;gap:clamp(12px,3vw,22px);align-items:center}
.nav__links a{color:var(--ink-2);font-size:.92rem;font-weight:500}
.nav__links a:hover{color:var(--ink);text-decoration:none}
.nav__cta{
  background:var(--ramp);color:#06080C!important;font-weight:700;
  padding:8px 15px;border-radius:999px;white-space:nowrap;
}

/* Under 560px the secondary link and the CTA together overflow the bar. The
   CTA is the one that earns its place, so the other steps aside. */
@media (max-width:559px){ .nav__links .nav__opt{display:none} }

/* ----------------------------------------------------------- typography -- */

h1,h2,h3{
  color:var(--ink);line-height:1.17;letter-spacing:-.022em;margin:0 0 .5em;
  text-wrap:balance;overflow-wrap:break-word;
}
h1{font-size:clamp(1.85rem,1.3rem + 2.7vw,3.1rem);font-weight:800}
h2{font-size:clamp(1.35rem,1.1rem + 1.2vw,1.95rem);font-weight:700;margin-top:2.1em}
h3{font-size:clamp(1.08rem,1rem + .45vw,1.3rem);font-weight:700;margin-top:1.6em}
p{margin:0 0 1.15em;overflow-wrap:break-word}

.grad{background:var(--ramp);-webkit-background-clip:text;background-clip:text;color:transparent}
.thin{font-weight:400;color:var(--ink-2)}
.eyebrow{
  text-transform:uppercase;letter-spacing:.15em;font-size:.72rem;font-weight:700;
  color:var(--ink-3);margin:0 0 .9em;
}

/* -------------------------------------------------------------- article -- */

.post{padding:clamp(30px,7vw,60px) 0 clamp(50px,9vw,90px)}
.post__meta{
  color:var(--ink-3);font-size:.86rem;margin:0 0 2.2em;
  display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;
}
.post__lede{
  font-size:clamp(1.05rem,1rem + .5vw,1.28rem);color:var(--ink);
  line-height:1.6;margin-bottom:1.6em;
}
/* Article art. aspect-ratio plus explicit width/height on the img means the
   space is reserved before the SVG loads, so nothing below it jumps - which
   is the whole of CLS, and the one Core Web Vital that images usually ruin. */
.hero{
  width:100%;aspect-ratio:1200/630;object-fit:cover;
  border-radius:var(--radius);border:1px solid var(--edge);
  margin:0 0 1.8em;background:var(--surface);
}

.post ul,.post ol{margin:0 0 1.3em;padding-left:1.25em}
.post li{margin-bottom:.55em}
.post li::marker{color:var(--ink-3)}
.post strong,.post b{color:var(--ink);font-weight:650}

code{
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:.875em;background:var(--surface-2);color:#CDE4F5;
  padding:.15em .42em;border-radius:5px;border:1px solid var(--edge);
  overflow-wrap:break-word;
}
pre{
  background:var(--surface);border:1px solid var(--edge);border-radius:12px;
  padding:16px;overflow-x:auto;margin:0 0 1.4em;
  font-size:.86rem;line-height:1.6;-webkit-overflow-scrolling:touch;
}
pre code{background:none;border:0;padding:0;font-size:inherit}

blockquote{
  margin:0 0 1.4em;padding:2px 0 2px 18px;
  border-left:3px solid var(--violet);
  color:var(--ink);font-size:1.03em;
}

hr{border:0;border-top:1px solid var(--edge);margin:2.6em 0}

/* ------------------------------------------------------------- callout --- */

.note{
  background:var(--surface);border:1px solid var(--edge);
  border-left:3px solid var(--cyan);border-radius:12px;
  padding:clamp(14px,3.5vw,20px);margin:0 0 1.5em;
}
.note p:last-child{margin-bottom:0}
.note__t{color:var(--ink);font-weight:700;display:block;margin-bottom:.35em}

/* ----------------------------------------------------------- tick list --- */

.never{list-style:none;padding:0;margin:0 0 1.5em}
.never li{display:flex;gap:11px;align-items:flex-start;margin-bottom:.8em}
.tick{
  flex:0 0 auto;width:19px;height:19px;border-radius:50%;
  background:rgba(52,211,153,.16);display:grid;place-items:center;margin-top:.26em;
}
.tick svg{width:11px;height:11px}
.never b{display:block;color:var(--ink)}

/* --------------------------------------------------------------- table --- */

.tblwrap{
  overflow-x:auto;margin:0 0 1.5em;-webkit-overflow-scrolling:touch;
  border:1px solid var(--edge);border-radius:12px;
}
table{border-collapse:collapse;width:100%;font-size:.92rem;min-width:420px}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--edge)}
th{color:var(--ink);font-weight:700;background:var(--surface);white-space:nowrap}
tr:last-child td{border-bottom:0}

/* ----------------------------------------------------------------- FAQ --- */

.faq{margin-top:.6em}
.faq details{
  border:1px solid var(--edge);border-radius:12px;background:var(--surface);
  margin-bottom:10px;overflow:hidden;
}
.faq summary{
  cursor:pointer;list-style:none;padding:15px clamp(14px,3.5vw,18px);
  color:var(--ink);font-weight:650;display:flex;gap:12px;align-items:flex-start;
  min-height:44px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";margin-left:auto;flex:0 0 auto;width:9px;height:9px;margin-top:.45em;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details[open] summary{border-bottom:1px solid var(--edge)}
.faq .a{padding:15px clamp(14px,3.5vw,18px) 4px}
.faq .a p:last-child{margin-bottom:1em}

/* ----------------------------------------------------------------- CTA --- */

.cta{
  background:var(--surface);border:1px solid var(--edge-2);
  border-radius:var(--radius);padding:clamp(20px,5vw,30px);margin:2.6em 0 0;
}
.cta h2{margin-top:0;font-size:clamp(1.2rem,1.05rem + .8vw,1.6rem)}
.cta p{color:var(--ink-2)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--ramp);color:#06080C;font-weight:750;
  padding:13px 22px;border-radius:999px;border:0;cursor:pointer;
  min-height:46px;font-size:.97rem;
  transition:transform .16s ease,filter .16s ease;
}
.btn:hover{filter:brightness(1.09);text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

/* -------------------------------------------------------- index cards ---- */

.cards{display:grid;gap:16px;grid-template-columns:1fr;margin:0 0 2em;padding:0;list-style:none}
@media (min-width:680px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .cards{grid-template-columns:repeat(3,1fr)} }

.card{
  background:var(--surface);border:1px solid var(--edge);border-radius:var(--radius);
  padding:clamp(18px,4vw,24px);display:flex;flex-direction:column;
  transition:border-color .18s ease,transform .18s ease;
}
.card:hover{border-color:var(--edge-2);transform:translateY(-2px)}
.card__art{
  width:calc(100% + 2px);aspect-ratio:1200/630;object-fit:cover;
  /* Pull out to the card's own border so the art is flush with the top
     corners instead of floating in a panel inside a panel. */
  margin:calc(-1 * clamp(18px,4vw,24px) - 1px) calc(-1 * clamp(18px,4vw,24px) - 1px) clamp(14px,3vw,18px);
  border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
  background:var(--surface-2);
}
.card h2{font-size:1.09rem;margin:.1em 0 .5em;line-height:1.35}
.card h2 a{color:var(--ink)}
.card h2 a:hover{text-decoration:none;color:var(--cyan)}
.card p{color:var(--ink-2);font-size:.93rem;margin-bottom:1em}
.card .more{margin-top:auto;color:var(--cyan);font-size:.89rem;font-weight:650}

/* ------------------------------------------------- crumb and next/prev --- */

.crumb{
  font-size:.84rem;color:var(--ink-3);margin:0 0 1.4em;
  display:flex;flex-wrap:wrap;gap:7px;align-items:center;
}
.crumb a{color:var(--ink-3)}
.crumb a:hover{color:var(--ink-2)}

.more-posts{display:grid;gap:12px;grid-template-columns:1fr;margin-top:1.4em;padding:0;list-style:none}
@media (min-width:640px){ .more-posts{grid-template-columns:repeat(2,1fr)} }
.more-posts a{
  display:block;background:var(--surface);border:1px solid var(--edge);
  border-radius:12px;padding:15px 17px;color:var(--ink);font-weight:600;
  font-size:.95rem;line-height:1.45;
}
.more-posts a:hover{border-color:var(--edge-2);text-decoration:none}
.more-posts span{
  display:block;color:var(--ink-3);font-size:.78rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:5px;
}

/* -------------------------------------------------------------- footer --- */

.foot{border-top:1px solid var(--edge);padding:30px 0 44px;color:var(--ink-3);font-size:.88rem}
.foot__in{
  display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;
  width:100%;max-width:1080px;margin-inline:auto;padding-inline:var(--pad);
}
.foot a{color:var(--ink-3)}
.foot a:hover{color:var(--ink-2)}
.foot .sp{margin-left:auto}
@media (max-width:559px){ .foot .sp{margin-left:0;width:100%} }

.skip{position:absolute;left:-9999px}
.skip:focus{
  left:var(--pad);top:10px;z-index:100;background:var(--surface);
  color:var(--ink);padding:10px 16px;border-radius:8px;border:1px solid var(--edge-2);
}