/* Self-hosted. No external requests: bank networks frequently block CDNs,
   and a blocked font silently drops the whole design back to a system face.
   These are the LATIN subsets of the variable fonts, so one file covers
   every weight the site uses. */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400 500;
  font-display:swap;
  src:url('/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:500 800;
  font-display:swap;
  src:url('/fonts/manrope-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* CaseLEA blog
   Matched to the visual overhaul of caselea.com. Tokens, typeface stack and the
   floating nav bubble are copied from the new homepage so the blog reads as the
   same site. Every class name here already exists in the 17 blog pages, so this
   file alone restyles all of them with no markup changes.

   Per CLAUDE.md, deliberately NOT changed:
     - the post list stays hairline ROWS, never cards, and carries no imagery
     - the mono column carries the DATE, not an index number (freshness signal)
     - no .reveal on post rows: it hid every row below the fold
*/

:root{
  --ink:#041b5b;
  --ink-2:#17347a;
  --muted:#5b6f9c;
  --faint:#5e719a;
  --paper:#f6f8fc;
  --surface:#ffffff;
  /* --teal is for NON-TEXT use only (rules, dots, fills): white text on it is
     3.22:1 and fails AA. --teal-deep is 5.09:1 and carries any text. */
  --teal:#019db8;
  --teal-deep:#01798f;
  --teal-ink:#016b7e;
  --teal-lit:#63d6e8;
  --teal-soft:rgba(1,157,184,.09);
  --line:rgba(4,27,91,.14);
  --line-soft:rgba(4,27,91,.075);
  --max:1200px;
  --read:68ch;
  --display:"Manrope","Avenir Next",Avenir,"Segoe UI",system-ui,sans-serif;
  --sans:"Inter","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}

body{
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* clearance for the floating nav bubble */
  padding-top:94px;
}

/* the dot grid, fixed behind everything, matching the homepage */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,rgba(4,27,91,.13) 1px,transparent 0);
  background-size:22px 22px;
}
body>*{position:relative;z-index:1;}

a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:3px;}

.container{width:min(var(--max),calc(100% - 40px));margin-inline:auto;}
.container-narrow{width:min(760px,calc(100% - 40px));margin-inline:auto;}

.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--ink);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;
  font-size:14px;z-index:200;
}
.skip:focus{left:0;}

/* anchor jumps must clear the floating bubble */
[id]{scroll-margin-top:104px;}

/* ============ nav: a floating bubble, same as the homepage ============ */
.nav-wrap{
  position:fixed;top:16px;left:0;right:0;z-index:60;
  padding-inline:20px;pointer-events:none;
  background:none;border:0;
}
.nav{
  pointer-events:auto;
  width:min(1120px,100%);margin-inline:auto;
  min-height:56px;padding:0 8px 0 20px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(4,27,91,.1);
  border-radius:999px;
  backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 10px 34px -18px rgba(4,27,91,.42);
}
.brand{display:inline-flex;align-items:center;}
.brand img{height:27px;width:auto;}
.nav-links{display:flex;align-items:center;gap:26px;font-size:14px;color:var(--ink-2);font-weight:500;}
.nav-links a{display:inline-flex;align-items:center;min-height:36px;transition:color .18s ease;}
.nav-links a:hover{color:var(--teal-deep);}
/* colour only: a weight change widens the label and shifts the whole row */
.nav-links a[aria-current="page"]{color:var(--teal-deep);}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:42px;padding:0 18px;border:1px solid transparent;border-radius:8px;
  font-family:var(--display);font-size:14px;font-weight:700;letter-spacing:-.01em;
  cursor:pointer;transition:background .2s,border-color .2s,transform .2s,color .2s;
}
.btn-primary{background:var(--teal-deep);color:#fff;}
.btn-primary:hover{background:var(--teal-ink);transform:translateY(-1px);}
.btn-ghost{border-color:var(--line);color:var(--ink);background:var(--surface);}
.btn-ghost:hover{border-color:var(--ink);}
.nav .btn{border-radius:999px;min-height:40px;padding:0 20px;}
/* the homepage dropped the arrow glyph from buttons; hide it rather than edit 17 files */
.arrow{display:none;}

/* ============ shared type ============ */
h1,h2,h3,h4{font-family:var(--display);margin:0;letter-spacing:-.03em;font-weight:800;color:var(--ink);}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--teal-deep);
  margin-bottom:16px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--teal);}

/* ============ blog index hero ============ */
.blog-hero{padding:clamp(52px,6.6vw,92px) 0 clamp(48px,5.4vw,74px);}
.blog-hero h1{font-size:clamp(34px,4.4vw,52px);line-height:1.06;max-width:20ch;}
.blog-hero p{
  margin:24px 0 0;color:var(--muted);font-size:clamp(15.5px,1.3vw,17.5px);
  line-height:1.62;max-width:62ch;
}

/* ============ post list: hairline rows, never cards ============ */
.post-list{padding-bottom:clamp(82px,10.4vw,146px);}
.post-list-head{
  display:grid;grid-template-columns:112px minmax(0,1fr) auto;gap:30px;
  padding:0 0 16px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:.04em;
}
.posts{display:flex;flex-direction:column;}
.post-row{
  display:grid;grid-template-columns:112px minmax(0,1fr) auto;gap:36px;
  align-items:start;
  padding:44px 0;border-bottom:1px solid var(--line-soft);
  transition:padding-left .26s cubic-bezier(.16,1,.3,1),background .26s ease;
}
.post-row:hover{padding-left:10px;background:rgba(255,255,255,.55);}
/* the middle column is a bare <span> wrapping the h2 and its summary */
.post-row>span:nth-child(2){min-width:0;display:block;}
.post-row h2{font-size:17.5px;font-weight:700;letter-spacing:-.018em;line-height:1.4;transition:color .2s ease;}
.post-row:hover h2{color:var(--teal-deep);}
.post-row p{
  margin:11px 0 0;
  color:var(--muted);font-size:14px;line-height:1.66;max-width:70ch;
}
/* date and read-time are inline siblings in the markup, so they must be stacked
   here or they run together and overflow the column */
.post-date{
  display:flex;flex-direction:column;gap:3px;
  font-family:var(--mono);font-size:11px;color:var(--faint);white-space:nowrap;
}
.post-date b{font-weight:500;font-size:11.5px;color:var(--muted);}
.post-tag{
  font-family:var(--mono);font-size:10.5px;color:var(--teal-deep);
  background:var(--teal-soft);border-radius:5px;padding:4px 9px;white-space:nowrap;
}
/* .keep is a no-wrap helper INSIDE headings ("post-complaint" must not break
   across lines). It is not a label: it must inherit the heading entirely. */
.keep{white-space:nowrap;}

/* ============ article ============ */
.article-head{padding:clamp(48px,6vw,82px) 0 clamp(36px,4.2vw,54px);}
/* flex + fit-content so it claims its own line: as inline-flex the eyebrow
   that follows it sat on the same row and the two collided */
.back-link{
  display:flex;width:fit-content;align-items:center;gap:7px;
  min-height:32px;
  font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-bottom:14px;
  transition:color .18s ease;
}
.back-link:hover{color:var(--teal-deep);}
.article-head h1{font-size:clamp(30px,3.8vw,46px);line-height:1.08;}
.article-meta{
  display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;
  margin-top:24px;padding-top:20px;border-top:1px solid var(--line-soft);
  font-family:var(--mono);font-size:11.5px;color:var(--faint);
}
.article-standfirst{
  margin:26px 0 0;color:var(--ink-2);
  font-size:clamp(16.5px,1.4vw,18.5px);line-height:1.74;
}

.article{padding-bottom:clamp(78px,9vw,124px);}
/* same typographic polish as the landing pages */
.article p,.article li,.post-row p,.bluf p,.article-standfirst{text-wrap:pretty;}
.article h2,.article h3,.post-row h2{text-wrap:balance;}
.article p,.article ul,.article ol{
  margin:0 0 34px;color:var(--ink-2);
  font-size:17px;line-height:1.85;max-width:var(--read);
}
.article h2{
  font-size:clamp(23px,2.5vw,30px);line-height:1.15;
  margin:86px 0 26px;max-width:26ch;
}
.article h3{
  font-family:var(--display);font-size:18px;font-weight:700;letter-spacing:-.018em;
  margin:58px 0 18px;
}
.article ul,.article ol{padding-left:22px;}
.article li{margin-bottom:18px;}
/* :not(.btn) is essential. ".article a" is (0,1,1) and outranks ".btn-primary"
   at (0,1,0), so without the exclusion it repainted the CTA button's white text
   teal - on a teal background, leaving the button invisible. */
.article a:not(.btn){
  color:var(--teal-deep);
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(1,121,143,.35);
  transition:text-decoration-color .18s ease;
}
.article a:not(.btn):hover{text-decoration-color:var(--teal-deep);}
.article strong{font-weight:600;color:var(--ink);}
.article hr{border:0;border-top:1px solid var(--line-soft);margin:74px 0;}

/* bottom line up front */
.bluf{
  position:relative;
  margin:0 0 54px;padding:40px 40px 40px 44px;
  background:rgba(255,255,255,.82);
  border:1px solid var(--line);border-radius:12px;
  overflow:hidden;
}
.bluf::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--teal),var(--teal-lit));
}
.bluf p{margin:0;font-size:16px;line-height:1.74;color:var(--ink);max-width:none;}
.bluf p+p{margin-top:16px;}

/* metric cells inside an article */
.stat-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:12px;overflow:hidden;
  margin:0 0 12px;
}
.stat{background:rgba(255,255,255,.86);padding:38px 32px;}
.stat b{
  display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(24px,2.6vw,30px);line-height:1;letter-spacing:-.03em;
  color:var(--teal-deep);margin-bottom:6px;font-variant-numeric:tabular-nums;
}
.stat span{font-size:12.5px;color:var(--muted);line-height:1.45;}
.stat-note{font-family:var(--mono);font-size:11px;color:var(--faint);margin:0 0 44px;}

/* comparison tables stay inside a scroll container at every width */
.compare{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin:0 0 54px;border:1px solid var(--line);border-radius:12px;
  background:rgba(255,255,255,.86);
}
.compare table{border-collapse:collapse;width:100%;min-width:520px;font-size:14.5px;}
.compare th,.compare td{
  text-align:left;padding:25px 27px;border-bottom:1px solid var(--line-soft);
  vertical-align:top;
}
.compare thead th{
  font-family:var(--display);font-weight:700;font-size:13.5px;color:var(--ink);
  background:var(--teal-soft);border-bottom:1px solid var(--line);
  position:sticky;top:0;
}
.compare tbody tr:last-child td{border-bottom:0;}
.compare td{color:var(--ink-2);}

/* sibling links */
.more{
  margin-top:clamp(70px,7.8vw,100px);padding-top:50px;
  border-top:1px solid var(--line);
}
.more h2{font-size:15px;font-weight:700;letter-spacing:-.015em;margin-bottom:18px;}
.more ul{list-style:none;margin:0;padding:0;max-width:none;}
.more li{margin:0;border-bottom:1px solid var(--line-soft);}
.more li:last-child{border-bottom:0;}
.more a{
  display:block;padding:28px 0;font-size:15px;color:var(--ink);
  text-decoration:none;transition:color .18s ease,padding-left .24s ease;
}
.more a:hover{color:var(--teal-deep);padding-left:8px;}

/* end-of-article call to action */
.article-cta{
  margin-top:clamp(30px,3.6vw,44px);
  padding:clamp(48px,5.4vw,68px);
  background:rgba(255,255,255,.9);
  border:1px solid var(--line);border-radius:16px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:center;
}
.article-cta h2{margin:0 0 8px;font-size:clamp(19px,2vw,24px);line-height:1.2;}
.article-cta p{margin:0;color:var(--muted);font-size:14.5px;max-width:52ch;}
.cta-side{display:flex;flex-direction:column;gap:9px;}

/* ============ footer ============ */
.footer-row{
  display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center;
  padding:64px 0 54px;margin-top:clamp(68px,7.6vw,104px);
  border-top:1px solid var(--line);
  font-size:13px;color:var(--faint);
}
.footer-links{display:flex;flex-wrap:wrap;gap:22px;font-size:14px;color:var(--muted);}
.footer-links a{display:inline-flex;align-items:center;min-height:36px;transition:color .18s ease;}
.footer-links a:hover{color:var(--teal-deep);}

/* ============ motion ============ */
/* NOTE: .reveal is deliberately NOT applied to post rows. It hid every row
   below the fold and read as generic motion. Left here for article blocks. */
/* unused in current markup. Visible by default so nothing can ever be
   hidden by a reveal that never fires. */
.reveal{opacity:1;transform:none;}
.motion-ready .reveal{transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);}
.reveal.is-visible{opacity:1;transform:none;}
@supports (animation-timeline: view()){
  .reveal{animation:blogRise linear both;animation-timeline:view();animation-range:entry 6% entry 56%;}
}
@keyframes blogRise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

/* ============ responsive ============ */
@media(max-width:860px){
  .post-list-head{display:none;}
  .post-row{grid-template-columns:1fr auto;gap:10px 14px;padding:30px 0;}
  .post-row h2{grid-column:1;}
  .post-row p{grid-column:1/-1;}
  .post-date{grid-column:1;order:-1;}
  .post-tag{grid-column:2;order:-1;justify-self:end;}
  .article-cta{grid-template-columns:1fr;}
  .nav-links a:not(.btn){display:none;}
  .nav{padding-right:10px;}
}
@media(max-width:640px){
  .nav-wrap{top:10px;padding-inline:12px;}
  .nav{min-height:52px;padding-left:16px;padding-right:6px;}
  body{padding-top:78px;}
  .article p,.article ul,.article ol{font-size:16px;line-height:1.8;}
  .bluf{padding:24px 22px 24px 26px;}
  .stat-note,.footer-row{font-size:12.5px;}
}

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

/* ============ custom cursor, same as the rest of the site ============ */
.cursor-dot,.cursor-ring{
  position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
  border-radius:50%;opacity:0;
  transition:opacity .25s ease,width .22s ease,height .22s ease,
             background .22s ease,border-color .22s ease,margin .22s ease;
}
.cursor-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--teal-deep);}
.cursor-ring{
  width:30px;height:30px;margin:-15px 0 0 -15px;
  border:1.5px solid rgba(1,157,184,.55);background:rgba(1,157,184,.05);
}
html.has-cursor .cursor-dot,html.has-cursor .cursor-ring{opacity:1;}
html.has-cursor,html.has-cursor a,html.has-cursor button{cursor:none;}
html.has-cursor.cursor-hot .cursor-ring{
  width:54px;height:54px;margin:-27px 0 0 -27px;
  border-color:var(--teal);background:rgba(1,157,184,.1);
}
html.has-cursor.cursor-hot .cursor-dot{width:4px;height:4px;margin:-2px 0 0 -2px;}
@media (hover: none),(pointer: coarse){
  .cursor-dot,.cursor-ring{display:none;}
  html.has-cursor,html.has-cursor a,html.has-cursor button{cursor:auto;}
}
@media(prefers-reduced-motion:reduce){
  .cursor-dot,.cursor-ring{display:none;}
  html.has-cursor,html.has-cursor a,html.has-cursor button{cursor:auto;}
}


/* ===========================================================================
   VISUAL PASS, 2026-09-22
   Added with the 25-post rebuild. Everything here is built from the existing
   tokens, so the blog still reads as caselea.com rather than as a second site.
   No cards, no stock imagery, no photographs. The interest comes from rules,
   accents and restrained motion.
   =========================================================================== */

/* --- reading progress. Fixed hairline at the very top of the viewport. ----- */
.readbar{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:60;
  background:transparent;pointer-events:none;
}
.readbar>i{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--teal-deep),var(--teal-lit));
  transition:width .08s linear;
}
@media (prefers-reduced-motion:reduce){ .readbar>i{transition:none;} }

/* --- hero. A soft teal wash sitting behind the headline, nothing literal. -- */
.blog-hero{position:relative;}
.blog-hero::before{
  content:"";position:absolute;z-index:-1;
  top:-14%;left:-12%;width:58%;height:150%;
  background:radial-gradient(52% 46% at 40% 44%,var(--teal-soft),transparent 72%);
  pointer-events:none;
}
.blog-hero .eyebrow{position:relative;padding-left:26px;}
.blog-hero .eyebrow::before{
  content:"";position:absolute;left:0;top:50%;width:18px;height:1px;
  background:var(--teal);
}

/* --- post rows. The hairline pattern stays. It just responds better. ------- */
.post-row{position:relative;}
.post-row::before{
  content:"";position:absolute;left:0;top:50%;height:0;width:2px;
  background:linear-gradient(180deg,var(--teal),var(--teal-lit));
  transform:translateY(-50%);
  transition:height .3s cubic-bezier(.16,1,.3,1);
}
.post-row:hover::before,.post-row:focus-visible::before{height:56%;}
.post-row:focus-visible{outline:2px solid var(--teal-deep);outline-offset:4px;}

/* topic pill. One accent, varied only by weight, so 20 tags stay calm. */
.post-tag{
  border:1px solid var(--line);border-radius:999px;
  padding:5px 12px;white-space:nowrap;
  transition:border-color .22s ease,color .22s ease,background .22s ease;
}
.post-row:hover .post-tag{
  border-color:rgba(1,157,184,.45);color:var(--teal-ink);background:var(--teal-soft);
}
.post-list-head{position:relative;}

/* --- article furniture ---------------------------------------------------- */
.bluf-label{
  margin:0 0 14px !important;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal-ink) !important;
}

/* a short teal rule above every H2, so sections read as separate chunks */
.article h2{position:relative;}
.article h2::before{
  content:"";position:absolute;top:-18px;left:0;width:22px;height:2px;
  background:var(--teal);opacity:.55;
}

/* --- pull quote. Carries the named expert attribution AEO asks for. -------- */
.pullquote{
  margin:0 0 54px;padding:6px 0 6px 30px;
  border-left:2px solid var(--teal);
}
.pullquote blockquote{margin:0;}
.pullquote blockquote p{
  margin:0;font-family:var(--display);font-weight:600;
  font-size:clamp(18px,2vw,22px);line-height:1.46;letter-spacing:-.015em;
  color:var(--ink);max-width:none;
}
.pullquote figcaption{
  margin-top:16px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);
}

/* --- table caption -------------------------------------------------------- */
.compare caption{
  caption-side:bottom;text-align:left;
  padding:16px 27px 20px;
  font-family:var(--mono);font-size:12.5px;line-height:1.65;
  letter-spacing:.02em;color:var(--faint);
  border-top:1px solid var(--line-soft);
}
.compare tbody tr{transition:background .18s ease;}
.compare tbody tr:hover{background:var(--teal-soft);}
.compare tbody th[scope="row"]{font-weight:650;color:var(--ink);}

/* --- sources block. Every post ends with where its figures came from. ------ */
.sources{
  margin:60px 0 0;padding:30px 0 0;border-top:1px solid var(--line);
}
.sources h2{
  font-size:12px !important;letter-spacing:.14em;text-transform:uppercase;
  font-family:var(--mono);color:var(--faint);margin:0 0 18px !important;
}
.sources h2::before{display:none;}
.sources ul{margin:0;padding:0;list-style:none;counter-reset:src;}
.sources li{
  position:relative;counter-increment:src;
  margin:0 0 12px;padding-left:30px;
  font-size:14.5px;line-height:1.7;color:var(--muted);
}
.sources li::before{
  content:counter(src);position:absolute;left:0;top:1px;
  font-family:var(--mono);font-size:11px;color:var(--teal-ink);
}
.sources li::marker{content:none;}

/* --- NO entrance animation on article blocks.
   One was built here and removed the same day. It set opacity:0 on every
   direct child of .article until an observer revealed it, which means the copy
   depends on JavaScript to become visible. Post rows were already excluded
   from reveal motion for the same reason. Do not add it back for either. --- */

/* --- stat cells. Slight lift so a metric row reads as the anchor it is. ---- */
.stat{transition:background .22s ease;}
.stat:hover{background:rgba(255,255,255,.96);}
.stat b{font-variant-numeric:tabular-nums;}

/* --- links in body copy get a teal underline that thickens on hover ------- */
.article p > a,.article li > a{
  color:var(--teal-ink);text-decoration-color:rgba(1,157,184,.42);
  text-underline-offset:3px;transition:text-decoration-color .2s ease;
}
.article p > a:hover,.article li > a:hover{text-decoration-color:var(--teal);}

/* --- small screens -------------------------------------------------------- */
@media (max-width:720px){
  .pullquote{padding-left:20px;margin-bottom:40px;}
  .sources{margin-top:44px;}
  .blog-hero::before{width:100%;left:-30%;opacity:.8;}
  .article h2::before{top:-14px;}
}


/* ===========================================================================
   VISUAL PASS 2, 2026-09-23
   One memorable thing: the convergence drawing in each header. Channels arrive
   from the left and meet in one point, which is what CaseLEA does, drawn
   without a word. Everything around it stays quiet.
   Also here: contents rail, About block, calmer sentence-case labels.
   =========================================================================== */
:root{ --night:#06164a; --night-2:#0a2166; }

/* --- header art ---------------------------------------------------------- */
.article-head,.blog-hero{position:relative;overflow:hidden;isolation:isolate;}
.article-head-inner,.blog-hero-inner{position:relative;z-index:1;}
.art-wrap{
  position:absolute;z-index:0;top:0;right:0;bottom:0;
  width:100%;pointer-events:none;opacity:.26;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 92%);
          mask-image:linear-gradient(180deg,#000 0%,transparent 92%);
}
/* With room to spare, the drawing leaves the text alone and sits in the right
   margin, above the contents rail, so the header reads as one column of words
   and one column of picture. */
@media (min-width:1100px){
  .article-head .art-wrap{
    left:calc(50% + 380px - 30px);right:0;top:56px;bottom:24px;width:auto;opacity:1;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 30%,#000 86%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0%,#000 30%,#000 86%,transparent 100%);
  }
  .blog-hero .art-wrap{
    left:auto;width:min(46vw,720px);top:20px;bottom:0;opacity:1;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 34%,#000 88%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0%,#000 34%,#000 88%,transparent 100%);
  }
}
.post-art{display:block;width:100%;height:100%;}
.art-lines path{stroke-dasharray:900;stroke-dashoffset:0;}
.art-out{opacity:.9;}
.art-dot{fill:var(--teal);}
.art-dot-out{fill:var(--teal-lit);}
.art-core{fill:var(--teal);}
.art-rings circle{stroke:var(--teal);stroke-width:1;opacity:0;}
@media (prefers-reduced-motion:no-preference){
  .art-lines path{animation:artDraw 1.6s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--d,0s);}
  .art-out{animation:artDraw 1.4s cubic-bezier(.16,1,.3,1) .9s both;stroke-dasharray:900;}
  .art-core{animation:artCore .6s ease 1.1s both;transform-box:fill-box;transform-origin:center;}
  .art-rings circle{transform-box:fill-box;transform-origin:center;
    animation:artRing 4.8s ease-out infinite;animation-delay:calc(1.4s + var(--d,0s));}
}
@keyframes artDraw{from{stroke-dashoffset:900;}to{stroke-dashoffset:0;}}
@keyframes artCore{from{transform:scale(0);}60%{transform:scale(1.5);}to{transform:scale(1);}}
@keyframes artRing{0%{transform:scale(.5);opacity:.55;}70%{opacity:0;}100%{transform:scale(1.35);opacity:0;}}
.index-art .art-dot{r:3;}

/* --- calmer labels: sentence case, no tracking, in the body face ---------- */
.bluf-label{
  font-family:var(--sans) !important;font-size:13px !important;font-weight:650;
  letter-spacing:0 !important;text-transform:none !important;color:var(--teal-deep) !important;
}
.sources h2{
  font-family:var(--sans) !important;font-size:14px !important;font-weight:650;
  letter-spacing:0 !important;text-transform:none !important;color:var(--ink) !important;
}
.pullquote figcaption{text-transform:none;letter-spacing:.01em;font-family:var(--sans);font-size:13px;font-weight:600;color:var(--muted);}

/* --- index hero meta row: plain facts, separated by space, not dots ------- */
.hero-meta{
  display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:30px;
  font-size:13.5px;color:var(--muted);
}
.hero-meta b{color:var(--ink);font-weight:700;}
.hero-meta span{position:relative;}
.hero-meta span+span::before{
  content:"";position:absolute;left:-14px;top:50%;width:1px;height:12px;
  background:var(--line);transform:translateY(-50%);
}

/* --- contents rail: sticky, right gutter, only where there is room -------- */
.post-wrap{position:relative;}
.toc{display:none;}
@media (min-width:1240px){
  .toc{
    display:block;position:absolute;top:0;bottom:0;
    left:calc(50% + 380px + 48px);width:208px;
  }
  .toc-inner{position:sticky;top:118px;padding-left:18px;border-left:1px solid var(--line-soft);}
}
.toc-label{margin:0 0 12px;font-size:13px;font-weight:650;color:var(--ink);}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:none;}
.toc li{margin:0;}
.toc a{
  position:relative;display:block;padding:6px 0;
  font-size:13px;line-height:1.45;color:var(--muted);
  transition:color .2s ease;
}
.toc a::before{
  content:"";position:absolute;left:-19px;top:8px;bottom:8px;width:2px;border-radius:2px;
  background:var(--teal);transform:scaleY(0);transition:transform .25s cubic-bezier(.16,1,.3,1);
}
.toc a:hover{color:var(--ink);}
.toc a.is-active{color:var(--teal-deep);font-weight:600;}
.toc a.is-active::before{transform:scaleY(1);}
.article h2[id]{scroll-margin-top:110px;}

/* --- About CaseLEA: the one dark block on the page ------------------------ */
.about-caselea{margin-top:clamp(40px,5vw,64px);}
.about-inner{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:start;
  padding:32px 34px;border-radius:18px;
  background:
    radial-gradient(120% 140% at 100% 0%,rgba(1,157,184,.30),transparent 55%),
    linear-gradient(160deg,var(--night-2),var(--night));
  color:#e7efff;
  box-shadow:0 30px 60px -32px rgba(4,27,91,.55);
}
.about-inner::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:1px solid rgba(99,214,232,.18);
}
.about-mark{
  display:block;width:44px;height:44px;padding:6px;border-radius:12px;
  background:#fff;box-shadow:0 6px 18px -6px rgba(0,0,0,.4);
}
.about-label{margin:0 0 8px;font-size:13px;font-weight:650;color:var(--teal-lit);}
.about-text{margin:0;font-size:15.5px;line-height:1.72;color:rgba(231,239,255,.86);max-width:64ch;}
.about-stats{display:flex;flex-wrap:wrap;gap:14px 34px;margin-top:22px;}
.about-stats div{display:flex;flex-direction:column;}
.about-stats b{font-family:var(--display);font-size:24px;font-weight:800;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums;}
.about-stats span{font-size:13px;color:rgba(231,239,255,.66);}
.about-cap{margin:14px 0 0;font-size:12.5px;color:rgba(231,239,255,.55);}
@media (max-width:560px){
  .about-inner{grid-template-columns:1fr;padding:26px 22px;}
}

/* keyboard focus stays visible on the new pieces */
.toc a:focus-visible,.about-caselea a:focus-visible{outline:2px solid var(--teal-deep);outline-offset:3px;border-radius:4px;}