/* ============================================================
   Klyply blog listing.

   Home 3 owns the brand now, so this page borrows its tokens rather
   than inventing a second palette. It does not borrow its stylesheet:
   home3.css is 50 KB of compiled Tailwind for one long sales page, and
   a listing needs roughly a twentieth of it. The tokens below are the
   same values, declared once, so the two cannot drift apart silently.

   No dark/light switch. The whole site commits to one dark world; a
   blog that flipped to a light theme would read as a different site.
   ============================================================ */

:root{
  --ink:#0D0308;   --ink2:#170810;
  --card:#1C0A13;  --card2:#241019;
  --line:#3A1524;  --line2:#5A2136;
  --txt:#F5ECEF;   --sub:#B79AA6;  --mut:#7D6570;
  --acc:#EC4899;   --acc2:#FF4FA3; --acc3:#F43F98;
  --wrap:1152px;
}

/* Self-hosted, the same file Home 3 preloads. A third-party font request
   on every page view is a performance cost and, in the EU, hands the
   visitor's IP address to another company without their consent. */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/wp-content/themes/klyply/assets/fonts/inter-var-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;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--txt);
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.6;overflow-x:clip;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;text-wrap:balance;line-height:1.15;font-weight:800;letter-spacing:-.02em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
::selection{background:rgba(236,72,153,.4);color:#fff}
:focus-visible{outline:2px solid var(--acc2);outline-offset:3px;border-radius:6px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--ink2)}
::-webkit-scrollbar-thumb{background:#42182a;border-radius:6px;border:2px solid var(--ink2)}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
@media(min-width:768px){.wrap{padding:0 32px}}

.skip{position:absolute;left:-9999px}
.skip:focus{position:fixed;left:12px;top:12px;z-index:100}

/* ---- fixed background layers, lifted from Home 3 so the two pages sit on
       the same ground rather than one looking flat next to the other ---- */
.bg-glow{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(760px 560px at 6% -6%,rgba(236,72,153,.16),transparent 70%),
    radial-gradient(900px 700px at 98% 34%,rgba(244,63,152,.055),transparent 70%),
    radial-gradient(820px 620px at 50% 112%,rgba(236,72,153,.07),transparent 70%)}
.bg-grain{position:fixed;inset:0;z-index:64;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E")}
.page{position:relative;z-index:10}

/* ---- shared bits ---- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--acc)}
.eyebrow::before{content:"";width:22px;height:1px;background:linear-gradient(90deg,transparent,rgba(236,72,153,.85))}
.gtxt{background:linear-gradient(92deg,#EC4899 0%,#FF4FA3 55%,#F43F98 110%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.lbl{font-size:9.5px;font-weight:800;letter-spacing:.18em;color:var(--mut);text-transform:uppercase}
.tchip{display:inline-flex;align-items:center;gap:7px;border-radius:8px;border:1px solid var(--line);
  background:rgba(245,236,239,.02);padding:5px 10px;font-size:11px;font-weight:500;color:var(--sub)}
.tchip svg{width:14px;height:14px;color:var(--acc2)}
.btn-p{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 22px;
  border-radius:10px;font-weight:700;font-size:14px;color:#2B0812;
  background:linear-gradient(90deg,#EC4899,#FF4FA3);border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 30px -10px rgba(236,72,153,.55);
  transition:transform .18s,box-shadow .18s,filter .18s;cursor:pointer;white-space:nowrap}
.btn-p:hover{transform:translateY(-1px);filter:brightness(1.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 14px 38px -10px rgba(236,72,153,.7)}
.btn-g{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 22px;
  border-radius:10px;font-weight:600;font-size:14px;color:#EBDFE4;background:rgba(245,236,239,.03);
  border:1px solid var(--line);transition:background .18s,border-color .18s,transform .18s;white-space:nowrap}
.btn-g:hover{background:rgba(245,236,239,.06);border-color:var(--line2);transform:translateY(-1px)}

/* ---- navbar ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;border-bottom:1px solid transparent;
  transition:background .3s,border-color .3s,box-shadow .3s}
.nav.stuck{background:rgba(13,3,8,.85);backdrop-filter:blur(18px);border-bottom-color:var(--line);
  box-shadow:0 10px 36px -14px rgba(0,0,0,.7)}
.nav-in{position:relative;display:flex;align-items:center;height:64px}
.brand{display:inline-flex;align-items:center;gap:9px;flex:none;font-weight:800;font-size:18px;letter-spacing:-.03em}
.brand svg{width:28px;height:28px;flex:none}
.navlinks{position:absolute;left:50%;transform:translateX(-50%);display:none;align-items:center;gap:2px}
@media(min-width:900px){.navlinks{display:flex}}
.navlinks a{padding:8px 14px;border-radius:6px;font-size:14px;color:var(--sub);transition:color .18s,background .18s}
.navlinks a:hover{color:var(--txt);background:rgba(236,72,153,.08)}
.navlinks a[aria-current]{color:var(--txt)}
/* Between 640 and 900 the button and the burger are both on screen. Only one
   of them can hold the auto margin: give it to both and flex splits the free
   space between them, which parks the button in the middle of the bar. */
.nav-cta{height:36px;padding:0 16px;font-size:13px;display:none}
@media(min-width:640px){
  .nav-cta{display:inline-flex;margin-left:auto}
  .nav-cta+.burger{margin-left:10px}
}
.burger{position:relative;margin-left:auto;width:40px;height:40px;display:grid;place-items:center;
  border-radius:8px;border:1px solid var(--line);background:rgba(236,72,153,.06);cursor:pointer}
@media(min-width:900px){.burger{display:none}}
.burger span{position:absolute;width:18px;height:1.8px;background:var(--txt);border-radius:2px;
  transition:transform .3s}
.burger span:first-child{transform:translateY(-4px)}
.burger span:last-child{transform:translateY(4px)}
.burger[aria-expanded="true"] span:first-child{transform:rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:rotate(-45deg)}
.mnav{position:absolute;top:100%;left:0;right:0;border-bottom:1px solid var(--line);
  background:rgba(13,3,8,.96);backdrop-filter:blur(18px);transform-origin:top;
  transition:opacity .3s,transform .3s;opacity:0;transform:scaleY(.95);pointer-events:none}
.mnav.open{opacity:1;transform:none;pointer-events:auto}
@media(min-width:900px){.mnav{display:none}}
.mnav ul{display:flex;flex-direction:column;gap:2px;padding:14px 20px 18px}
.mnav a{display:block;padding:12px;border-radius:8px;font-size:15px;font-weight:500;color:var(--sub)}
.mnav a:hover{color:var(--txt);background:rgba(236,72,153,.08)}
.mnav .btn-p{margin-top:10px;width:100%}

/* ---- hero ---- */
.hero{position:relative;padding:128px 0 54px}
@media(min-width:768px){.hero{padding:150px 0 66px}}
.hero-grid{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(236,72,153,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(236,72,153,.05) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(65% 72% at 50% 18%,#000 30%,transparent 100%);
  mask-image:radial-gradient(65% 72% at 50% 18%,#000 30%,transparent 100%)}
.hero-in{position:relative;max-width:760px}
.hero h1{margin-top:18px;font-size:clamp(34px,6.4vw,56px);letter-spacing:-.035em}
.hero .lede{margin-top:18px;max-width:640px;font-size:clamp(15px,2.2vw,17.5px);line-height:1.65;color:var(--sub)}
.hero-meta{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px}

/* ---- category rail ----
   Horizontal scroll rather than a wrapping pile: category counts grow, and a
   filter row that reflows to three lines pushes the first post below the fold. */
.rail{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--ink2)}
.rail ul{display:flex;gap:8px;overflow-x:auto;padding:14px 0;scrollbar-width:none}
.rail ul::-webkit-scrollbar{display:none}
.rail a{flex:none;display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;
  border:1px solid var(--line);background:rgba(245,236,239,.02);font-size:13px;font-weight:600;
  color:var(--sub);transition:color .18s,border-color .18s,background .18s}
.rail a:hover{color:var(--txt);border-color:var(--line2)}
.rail a[aria-current]{color:#2B0812;background:linear-gradient(90deg,#EC4899,#FF4FA3);border-color:transparent}
.rail .n{font-size:11px;font-weight:800;opacity:.65;font-variant-numeric:tabular-nums}

/* ---- the feed ---- */
.feed{padding:54px 0 40px}
.grid{display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:640px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}}

.pcard{position:relative;display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--line);border-radius:16px;overflow:hidden;
  transition:border-color .2s,transform .2s,box-shadow .2s}
.pcard:hover{border-color:var(--line2);transform:translateY(-3px);
  box-shadow:0 24px 60px -28px rgba(0,0,0,.9)}
.pcard:focus-within{border-color:var(--acc2)}
.pfig{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--card2);
  border-bottom:1px solid var(--line)}
.pfig img{width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.2,.6,.2,1)}
.pcard:hover .pfig img{transform:scale(1.04)}
/* No featured image: the mark on the same ruled ground the hero uses, rather
   than a grey box. A flat tint alone reads as empty at featured size, which is
   most of a 640px-wide panel doing nothing; the grid gives it something to be.
   The hue rotation is keyed off the post ID, so two cards side by side are
   never the same panel twice. */
.pfig.blank{display:grid;place-items:center;
  background:
    linear-gradient(rgba(236,72,153,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(236,72,153,.09) 1px,transparent 1px),
    radial-gradient(115% 105% at 18% 0%,rgba(236,72,153,.15),transparent 64%),
    linear-gradient(150deg,#26101C,#150610);
  background-size:26px 26px,26px 26px,auto,auto}
.pfig.blank svg{width:42px;height:42px;opacity:.72;filter:hue-rotate(var(--hr,0deg))}
.pbody{display:flex;flex-direction:column;gap:11px;padding:19px 20px 20px;flex:1}
.pcat{align-self:flex-start;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acc2);background:rgba(236,72,153,.12);box-shadow:inset 0 0 0 1px rgba(236,72,153,.38);
  border-radius:6px;padding:3px 8px}
.pcard h3{font-size:17.5px;line-height:1.32;letter-spacing:-.015em}
/* The title's link covers the card, so the whole tile is the target while the
   accessible name stays the title alone. */
.pcard h3 a::after{content:"";position:absolute;inset:0}
.pcard h3 a:hover{color:var(--acc2)}
.dek{font-size:13.5px;line-height:1.62;color:var(--sub)}
.pmeta{margin-top:auto;padding-top:4px;display:flex;align-items:center;gap:8px;
  font-size:11.5px;color:var(--mut);font-variant-numeric:tabular-nums}
.pmeta .dot{opacity:.55}

/* ---- featured: the newest post, first page only ---- */
.feat{position:relative;display:grid;background:var(--card);border:1px solid var(--line);
  border-radius:18px;overflow:hidden;margin-bottom:34px;
  transition:border-color .2s,box-shadow .2s}
.feat:hover{border-color:var(--line2);box-shadow:0 30px 80px -34px rgba(0,0,0,.9)}
.feat:focus-within{border-color:var(--acc2)}
@media(min-width:860px){.feat{grid-template-columns:1.15fr 1fr;align-items:stretch}}
.feat .pfig{border-right:0}
@media(min-width:860px){.feat .pfig{aspect-ratio:auto;height:100%;border-bottom:0;border-right:1px solid var(--line)}}
.feat .pfig.blank svg{width:56px;height:56px}
.feat .pfig.blank{background-size:34px 34px,34px 34px,auto,auto}
.feat-body{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:26px 24px 28px}
@media(min-width:860px){.feat-body{padding:38px 36px}}
.feat h2{font-size:clamp(22px,3vw,29px);line-height:1.24;letter-spacing:-.025em}
.feat h2 a::after{content:"";position:absolute;inset:0}
.feat h2 a:hover{color:var(--acc2)}
.feat .dek{font-size:14.5px;line-height:1.65}

/* ---- empty state ----
   A listing with nothing in it is the one screen a blog is guaranteed to show
   on day one. Given a shape it reads as "not yet"; left as a bare heading it
   reads as broken. */
.empty{margin:8px 0 12px;padding:52px 28px;text-align:center;background:var(--card);
  border:1px solid var(--line);border-radius:18px;
  background-image:radial-gradient(60% 70% at 50% 0%,rgba(236,72,153,.09),transparent 70%)}
.empty svg{width:52px;height:52px;margin:0 auto 20px;opacity:.55}
.empty h2{font-size:clamp(20px,3vw,26px)}
.empty p{margin:14px auto 0;max-width:490px;font-size:14.5px;line-height:1.7;color:var(--sub)}
.empty .btn-g{margin-top:26px}

/* ---- pagination ---- */
.pager{margin-top:44px;display:flex;justify-content:center}
.pager .nav-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;
  padding:0 13px;border-radius:10px;border:1px solid var(--line);background:rgba(245,236,239,.02);
  font-size:14px;font-weight:600;color:var(--sub);font-variant-numeric:tabular-nums;
  transition:color .18s,border-color .18s,background .18s}
.pager a.page-numbers:hover{color:var(--txt);border-color:var(--line2);background:rgba(245,236,239,.05)}
.pager .page-numbers.current{color:#2B0812;background:linear-gradient(90deg,#EC4899,#FF4FA3);border-color:transparent}
.pager .page-numbers.dots{border-color:transparent;background:none}

/* ---- CTA band ---- */
.cta{border-top:1px solid var(--line);
  background:linear-gradient(180deg,#0D0308 0%,#1A0812 45%,#0D0308 100%)}
.cta-in{padding:64px 0 68px;text-align:center}
.cta h2{font-size:clamp(24px,4vw,36px);letter-spacing:-.03em}
.cta p{margin:16px auto 0;max-width:560px;font-size:15px;line-height:1.7;color:var(--sub)}
.cta-btns{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ---- footer ---- */
.foot{border-top:1px solid var(--line);background:var(--ink2)}
.foot-grid{display:grid;gap:38px;padding:56px 0 0;grid-template-columns:1fr}
@media(min-width:720px){.foot-grid{grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}}
.foot p{font-size:14px;color:var(--sub);line-height:1.7}
.foot ul{display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--sub)}
.foot ul a:hover,.foot .mail:hover{color:var(--txt)}
.foot .mail{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--sub)}
.foot .mail svg{width:16px;height:16px;color:var(--acc2)}
.foot-bot{margin-top:48px;padding:22px 0 26px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:12px;font-size:12.5px;color:var(--mut)}
@media(min-width:640px){.foot-bot{flex-direction:row;justify-content:space-between}}
.chipk{display:inline-flex;align-items:center;gap:4px;border-radius:6px;border:1px solid var(--line);
  background:rgba(245,236,239,.04);padding:3px 8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:9px;font-weight:800;letter-spacing:.12em;color:var(--sub)}

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

/* ============================================================
   SINGLE POST
   Same tokens, same header, same footer. Everything below is only
   reachable from single.php.
   ============================================================ */

/* ---- reading progress, sitting on the header's bottom edge ---- */
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
.progress span{display:block;height:100%;width:0;
  background:linear-gradient(90deg,#EC4899,#FF4FA3);box-shadow:0 0 12px rgba(255,79,163,.6)}

/* ---- post header ---- */
.phead{position:relative;padding:104px 0 26px}
@media(min-width:768px){.phead{padding:128px 0 32px}}
/* Title and artwork side by side rather than stacked. A full-width hero image
   between the title and the first paragraph pushes the article itself off a
   laptop screen, which is the one thing the reader came for. */
.phead-grid{display:grid;gap:26px;grid-template-columns:minmax(0,1fr);align-items:center}
@media(min-width:940px){
  .phead-grid{grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);gap:44px}
}
.phead-in{min-width:0;max-width:720px}
.phead-fig{min-width:0}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12.5px;color:var(--mut)}
.crumbs a{color:var(--mut)}
.crumbs a:hover{color:var(--sub)}
.crumbs .dot{opacity:.5}
.phead .pcat{display:inline-block;margin-top:20px}
.phead h1{margin-top:16px;font-size:clamp(29px,5.2vw,46px);letter-spacing:-.033em;line-height:1.12}
.phead .lede{margin-top:18px;font-size:clamp(15px,2.2vw,17.5px);line-height:1.62;color:var(--sub)}
.phead-meta{margin-top:22px;padding-top:0;font-size:12.5px;flex-wrap:wrap;row-gap:4px}
.byline{color:var(--sub);font-weight:600}

/* The image keeps its own proportions here. A fixed ratio plus object-fit:cover
   crops the sides, and a featured image for a post is usually a designed card
   with a title on it: cropping it eats the words. width:100% with height:auto
   takes the ratio from the file's own dimensions.

   max-height is the guard a fixed ratio used to provide. Without it a portrait
   photograph would set the height of the whole header row and leave the title
   floating in the middle of it; object-fit:contain letterboxes rather than
   squashing on the rare image tall enough to hit the cap. */
.phero{aspect-ratio:auto;overflow:hidden;border:1px solid var(--line);border-radius:16px;
  box-shadow:0 30px 80px -34px rgba(0,0,0,.9)}
.phero img{width:100%;height:auto}
/* The cap belongs to the two-column header only, and only for images tall
   enough to blow out the row. In the stacked layout the image sits above the
   article at its natural size and needs no guard at all: a 58vh cap there was
   letterboxing an ordinary 16:9 file on a tablet. */
@media(min-width:940px){
  .phero img{max-height:520px;object-fit:contain}
}
/* The drawn placeholder has no proportions of its own, so it still needs a box. */
.phero.blank{aspect-ratio:16/10;background-size:30px 30px,30px 30px,auto,auto}
.phero.blank svg{width:54px;height:54px}

/* ---- body and sidebar ---- */
/* The measure is set by the TRACK, never by an auto margin on the item.
   margin-inline:auto on a grid item switches off justify-self:stretch and
   makes it shrink-to-fit, at which point its width comes from its own
   max-content: the comparison table's min-width:520px then set the width of
   the whole article column, and on a 320px phone that is 520px of content
   hanging outside the viewport. A bounded track has no such failure mode. */
.pgrid{display:grid;gap:40px;padding:26px 0 12px;
  grid-template-columns:minmax(0,72ch);justify-content:center}
/* 1000 rather than 1040 so a 1024px laptop and an iPad Pro in landscape get
   the contents column rather than falling a hair short of it. */
@media(min-width:1000px){
  /* No align-items:start here. It shrinks the sidebar grid item to its own
     content height, and a sticky child can only travel inside its parent's
     box: with nothing to travel in, the column scrolled away with the page.
     The default stretch gives it the full height of the row. */
  .pgrid{grid-template-columns:minmax(0,1fr) 272px;gap:52px;justify-content:stretch}
  .pgrid-solo{grid-template-columns:minmax(0,78ch);justify-content:center}
}
.entry{min-width:0;max-width:100%}
/* Nothing inside the article may set the article's width. Anything that wants
   to be wider scrolls in its own box instead. */
.entry>*{max-width:100%}

.side{display:none}
@media(min-width:1000px){.side{display:block}}
/* Capped to the viewport, with the list taking the squeeze. A long post can
   easily produce a contents list taller than a laptop screen, and once the
   column sticks anything past the fold is unreachable: the product card was
   sitting 115px below it. The card keeps its height and the list scrolls. */
.side-in{position:sticky;top:88px;display:flex;flex-direction:column;gap:18px;
  max-height:calc(100vh - 108px)}

/* scrollbar-color has to be set alongside scrollbar-width: once the standard
   properties are in play Chrome stops honouring the ::-webkit- pseudo-elements
   entirely, and the list was drawing a stock light-grey bar down a dark page.
   Both are declared so either engine lands on the page's own scrollbar. */
.toc{border-left:1px solid var(--line);padding-left:16px;min-height:0;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:#42182a var(--ink2)}
.toc::-webkit-scrollbar{width:6px}
.toc::-webkit-scrollbar-track{background:var(--ink2)}
.toc::-webkit-scrollbar-thumb{background:#42182a;border-radius:3px}
.toc ul{display:flex;flex-direction:column;gap:2px;margin-top:12px}
.toc a{display:block;padding:5px 0;font-size:13px;line-height:1.45;color:var(--mut);
  transition:color .18s}
.toc a:hover{color:var(--txt)}
.toc a[aria-current]{color:var(--acc2);font-weight:600}
.toc .lv3 a{padding-left:14px;font-size:12.5px}

.sidecard{flex:none;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;
  background-image:radial-gradient(90% 80% at 50% 0%,rgba(236,72,153,.1),transparent 70%)}
.sidemark{width:30px;height:30px}
.sidecard-t{margin-top:12px;font-size:14.5px;font-weight:800;letter-spacing:-.01em}
.sidecard-p{margin-top:8px;font-size:12.5px;line-height:1.6;color:var(--sub)}
.sidecard .btn-p{margin-top:16px;width:100%;height:38px;font-size:13px}

/* ---- prose ----
   One measure, one rhythm. Spacing is set with margin-top on the following
   element rather than margin-bottom on the preceding one, so the first child
   never opens with a gap and no pair of margins can collapse into a surprise. */
.entry>*{margin-top:22px}
.entry>*:first-child{margin-top:0}
.entry p{font-size:16.5px;line-height:1.78;color:#DFCFD7}
.entry a{color:var(--acc2);text-decoration:underline;text-decoration-color:rgba(255,79,163,.4);
  text-underline-offset:3px;transition:text-decoration-color .18s}
.entry a:hover{text-decoration-color:var(--acc2)}
.entry strong{color:var(--txt);font-weight:700}
.entry h2{margin-top:52px;font-size:clamp(21px,3vw,27px);letter-spacing:-.024em;scroll-margin-top:92px}
.entry h3{margin-top:36px;font-size:clamp(17px,2.2vw,19.5px);letter-spacing:-.015em;scroll-margin-top:92px}
.entry h2+p,.entry h3+p{margin-top:15px}
/* A hairline over each h2 marks the section boundary without a full rule
   across the measure, which at this width reads as a divider between articles. */
.entry h2::before{content:"";display:block;width:34px;height:2px;margin-bottom:16px;border-radius:2px;
  background:linear-gradient(90deg,#EC4899,rgba(236,72,153,0))}

.entry ul,.entry ol{padding-left:22px;display:flex;flex-direction:column;gap:10px}
.entry ul{list-style:disc}
.entry ol{list-style:decimal}
.entry li{font-size:16px;line-height:1.7;color:#DFCFD7}
.entry li::marker{color:var(--acc)}

.entry>blockquote,.entry>.wp-block-table,.entry>figure,.entry>pre,
.entry>blockquote+*,.entry>.wp-block-table+*,.entry>figure+*,.entry>pre+*{margin-top:30px}
/* Sides and bottom only. A margin shorthand here has the same specificity as
   the spacing rule above and sits later in the file, so it silently reset the
   margin-top back to zero and pinned every callout to the paragraph above it. */
.entry blockquote{margin-left:0;margin-right:0;margin-bottom:0;padding:18px 22px;
  border-left:2px solid var(--acc);border-radius:0 12px 12px 0;
  background:rgba(236,72,153,.06)}
.entry blockquote p{font-size:16px;line-height:1.7;color:var(--txt)}
.entry blockquote cite{display:block;margin-top:10px;font-size:12px;font-style:normal;color:var(--mut)}

.entry figure{margin-left:0;margin-right:0;margin-bottom:0}
.entry img{border-radius:12px;border:1px solid var(--line)}
.entry figcaption{margin-top:9px;font-size:12.5px;color:var(--mut);text-align:center}

/* Tables scroll in their own box. A comparison table is the widest thing in
   any post, and letting it set the page width is what makes a phone scroll
   sideways through the prose as well. */
.entry .wp-block-table{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
/* On a phone the comparison table shows two of its three columns and nothing
   says the third exists, which on this page is the entire point of the table.
   A soft right edge is the hint. Only where it is true: above 640 the table
   fits and a fade over the last column would be decoration. */
@media(max-width:639px){
  .entry .wp-block-table{
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),rgba(0,0,0,.15));
    mask-image:linear-gradient(90deg,#000 calc(100% - 34px),rgba(0,0,0,.15))}
}
.entry table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.entry th,.entry td{padding:11px 14px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line)}
.entry thead th{background:rgba(236,72,153,.08);font-size:11px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--acc2);white-space:nowrap}
.entry tbody tr:last-child td{border-bottom:0}
.entry tbody td:first-child{color:var(--sub);font-weight:600}

.entry code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:rgba(245,236,239,.06);border:1px solid var(--line);border-radius:5px;padding:1px 5px}
.entry pre{overflow-x:auto;padding:16px;border-radius:12px;background:var(--card2);
  border:1px solid var(--line)}
.entry pre code{background:none;border:0;padding:0;font-size:13px;line-height:1.65}
.entry hr{border:0;height:1px;background:var(--line);margin-top:34px}

.ptags{display:flex;flex-wrap:wrap;gap:8px;margin-top:38px;padding-top:24px;
  border-top:1px solid var(--line)}
.ptags a:hover{color:var(--txt);border-color:var(--line2)}

/* ---- related ---- */
.related{padding-top:46px;border-top:1px solid var(--line)}
.related-h{margin-top:14px;font-size:clamp(20px,3vw,26px);letter-spacing:-.025em}
.related .grid{margin-top:28px}

/* ---- key takeaways ----
   A summary panel directly under the introduction. Marked up as an ordinary
   heading and list inside a group, so it is still a list to a screen reader and
   still legible if this stylesheet never arrives. */
.entry>.takeaways{margin-top:34px;padding:22px 24px 24px;border:1px solid var(--line);
  border-radius:16px;background:var(--card);
  background-image:radial-gradient(75% 90% at 12% 0%,rgba(236,72,153,.12),transparent 66%)}
@media(min-width:640px){.entry>.takeaways{padding:26px 28px 28px}}
.takeaways h2{margin:0;font-size:15px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acc2)}
.takeaways h2::before{display:none}
.takeaways ul{margin-top:16px;padding-left:0;gap:12px;list-style:none}
.takeaways li{position:relative;padding-left:28px;font-size:14.5px;line-height:1.62;color:#DFCFD7}
.takeaways li::marker{content:none}
/* The tick is drawn rather than a list marker so the text can hang correctly
   on a wrapped second line. */
.takeaways li::before{content:"";position:absolute;left:0;top:.34em;width:16px;height:16px;
  border-radius:5px;background:rgba(236,72,153,.16);box-shadow:inset 0 0 0 1px rgba(236,72,153,.42)}
.takeaways li::after{content:"";position:absolute;left:4.5px;top:.63em;width:6px;height:3px;
  border-left:1.7px solid var(--acc2);border-bottom:1.7px solid var(--acc2);
  transform:rotate(-45deg)}

/* ---- author box ---- */
.authorbox{display:flex;gap:16px;margin-top:40px;padding:22px;border:1px solid var(--line);
  border-radius:16px;background:var(--card);
  background-image:radial-gradient(70% 100% at 0% 0%,rgba(236,72,153,.09),transparent 70%)}
.authorbox-mark{flex:none;width:52px;height:52px}
.authorbox-mark svg{width:100%;height:100%}
.authorbox-body{min-width:0}
.authorbox-name{margin-top:7px;font-size:16.5px;font-weight:800;letter-spacing:-.015em;color:var(--txt)}
.authorbox-bio{margin-top:8px;font-size:13.5px;line-height:1.65;color:var(--sub)}
.authorbox-links{margin-top:12px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:12.5px;color:var(--mut)}
.authorbox-links a{color:var(--acc2)}
.authorbox-links a:hover{text-decoration:underline;text-underline-offset:3px}
@media(max-width:479px){
  .authorbox{flex-direction:column;gap:12px;padding:20px}
  .authorbox-mark{width:44px;height:44px}
}