/* =====================================================================
   Simply ExAC: shared styles for the blog and legal pages
   Mirrors src/index.css so these static pages match the app: forest green
   and lime on warm white, big condensed headlines, pill controls, and the
   watercolour paintings from public/art as imagery. Light is the default;
   .dark switches the theme.
   ===================================================================== */

@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal;font-display:swap;font-weight:200 800;font-stretch:75% 100%;
  src:url('/fonts/bricolage-grotesque-latin-standard-normal.woff2') format('woff2-variations');
}
@font-face{
  font-family:'Instrument Sans';
  font-style:normal;font-display:swap;font-weight:400 700;
  src:url('/fonts/instrument-sans-latin-wght-normal.woff2') format('woff2-variations');
}

/* ---------- LIGHT theme (default), from the site :root ---------- */
:root{
  --heading:'Bricolage Grotesque','Instrument Sans',system-ui,-apple-system,Segoe UI,sans-serif;
  --sans:'Instrument Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;

  /* How far each full-width card overlaps the section above it; also its
     top corner radius. Keep in step with --stack-overlap in src/index.css. */
  --stack-overlap:28px;

  --background:#fdfdfa;
  --foreground:#0c2a1e;
  --surface:#ffffff;
  --surface-2:#eef4ea;
  --accent:#e3f2d5;
  --border:#dbe5d8;
  --muted-foreground:#4c6156;

  --primary:#15803d;
  --link:#15803d;

  /* forest and cream do not flip: dark panels and text over paintings */
  --forest:#0c2a1e;
  --forest-soft:#143c2b;
  --cream:#f3f8ea;
  --lime:#b9f45c;
  --lime-strong:#a4e63f;
  --solid:#0c2a1e;
  --solid-foreground:#f3f8ea;

  --radius:14px;
  --container:1180px;
  --shadow-soft:0 30px 60px -40px rgb(12 42 30 / .5);
}

/* ---------- DARK theme, from the site .dark ---------- */
.dark{
  --background:#07170f;
  --foreground:#edf5e6;
  --surface:#0d2218;
  --surface-2:#12291d;
  --accent:#143424;
  --border:#1e3a2b;
  --muted-foreground:#9fb3a5;

  --primary:#4ade80;
  --link:#4ade80;

  --forest:#0f2f21;
  --forest-soft:#184531;
  --solid:#f3f8ea;
  --solid-foreground:#0c2a1e;
  --shadow-soft:0 30px 60px -40px rgb(0 0 0 / .8);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--foreground);
  background:var(--background);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--lime);color:#0c2a1e;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px;}
.reading{width:100%;max-width:760px;margin:0 auto;padding:0 24px;}

/* smooth theme transition on the elements that change */
body,.card,.chip,.theme-toggle,.news-form input,.article-tag,.callout,.author-box,
.prose table{
  transition:background-color .25s ease, border-color .25s ease, color .2s ease;
}

@keyframes rise{
  from{opacity:0;transform:translateY(24px);}
  to{opacity:1;transform:none;}
}

/* small uppercase labels */
.eyebrow,.read-min,.foot-col h4,.takeaways h4,.callout .lbl,.breadcrumb ol{
  font-family:var(--sans);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
}

/* Stacked 3D lettering, the static-page version of components/text-3d. The
   deepest copy stays where the text would normally sit; the lime face is
   stepped up and to the right of it and slides sideways after the mouse.
   Here the copies are text-shadows, so the face itself is what gets moved.
   blog.js rewrites --shift; .7616 is tanh(1), the resting slide. */
.hl{
  --shift:.7616;--step:.08333em;--rise:.06347em;
  display:inline-block;padding:0 .04em;margin:.3em .3em 0 0;
  color:var(--lime);
  -webkit-text-stroke:.05em #0c2a1e;paint-order:stroke fill;
  transform:translate(calc(4*var(--step)*var(--shift)),calc(-4*var(--rise)));
  text-shadow:
    calc(-1*var(--step)*var(--shift)) var(--rise) 0 #93dd58,
    calc(-2*var(--step)*var(--shift)) calc(2*var(--rise)) 0 #6fc355,
    calc(-3*var(--step)*var(--shift)) calc(3*var(--rise)) 0 #4ea653,
    calc(-4*var(--step)*var(--shift)) calc(4*var(--rise)) 0 #36894b;
}

/* The logo: a still wordmark with one solid block of depth running down and
   to the left. Matches .wordmark-3d in src/index.css. */
.brand .name{
  --wordmark-depth:#0c2a1e;
  display:inline-block;
  font-family:var(--heading);font-weight:800;font-stretch:84%;font-size:1.6rem;letter-spacing:-.025em;line-height:1;
  color:var(--lime);
  -webkit-text-stroke:.04em #0c2a1e;paint-order:stroke fill;
  text-shadow:
    -.0085em .0085em 0 var(--wordmark-depth),
    -.017em .017em 0 var(--wordmark-depth),
    -.0255em .0255em 0 var(--wordmark-depth),
    -.034em .034em 0 var(--wordmark-depth),
    -.0425em .0425em 0 var(--wordmark-depth),
    -.051em .051em 0 var(--wordmark-depth),
    -.0595em .0595em 0 var(--wordmark-depth),
    -.068em .068em 0 var(--wordmark-depth),
    -.0765em .0765em 0 var(--wordmark-depth),
    -.085em .085em 0 var(--wordmark-depth),
    -.0935em .0935em 0 var(--wordmark-depth),
    -.102em .102em 0 var(--wordmark-depth);
}
/* On dark panels the ink would vanish, so the depth turns green. */
.dark .brand .name,footer.site .brand .name{--wordmark-depth:#2e8c45;}
.brand .name small{display:none;}

/* ---------- Header: a floating pill ----------
   Kept identical to the app's header (src/components/header.tsx): the same
   items in the same order, sized in rem. The app grows its root size on
   windows wider than 1920px, so the same rule is repeated here; only the
   header on these pages is sized in rem, so only it follows. */
@media(min-width:1920px){
  html{font-size:clamp(100%, calc(100% + (100vw - 1920px) * .00625), 137.5%);}
}
header.site{position:sticky;top:0;z-index:50;padding:.75rem .75rem 0;}
header.site .nav{
  position:relative;display:flex;align-items:center;gap:.75rem;
  max-width:72rem;height:3.5rem;margin:0 auto;padding:0 .5rem 0 1.25rem;border-radius:999px;
  border:1px solid color-mix(in oklab, var(--foreground) 10%, transparent);
  background:color-mix(in oklab, var(--background) 85%, transparent);
  backdrop-filter:blur(24px);
  box-shadow:0 12px 32px -16px rgb(12 42 30 / .35);
}
@media(min-width:640px){
  header.site{padding:.75rem 1.25rem 0;}
  header.site .nav{padding-left:1.5rem;}
}
.brand{display:flex;align-items:center;flex-shrink:0;}
header.site .brand{padding-bottom:.25rem;}
/* the wordmark is the logo; the square mark is kept for avatars only */
.brand .logo,.brand .mark{display:none;}
.site-nav{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:.25rem;}
.site-nav > a{
  flex-shrink:0;padding:.5rem .875rem;border-radius:999px;font-size:.875rem;line-height:1.25rem;font-weight:500;
  color:color-mix(in oklab, var(--foreground) 70%, transparent);transition:color .15s, background-color .15s;
}
.site-nav > a:hover{color:var(--foreground);background:color-mix(in oklab, var(--foreground) 5%, transparent);}
.nav-actions{display:flex;flex-shrink:0;align-items:center;gap:.375rem;margin-left:auto;}
.nav-toggle,.theme-toggle{
  width:2.25rem;height:2.25rem;padding:0;border:none;background:transparent;color:var(--foreground);
  place-items:center;cursor:pointer;border-radius:999px;transition:background .15s,color .15s;
}
.nav-toggle{display:none;}
.theme-toggle{display:grid;}
.nav-toggle:hover,.theme-toggle:hover,.nav-signin:hover{background:var(--surface-2);}
.theme-toggle svg{width:1rem;height:1rem;}
.nav-toggle svg{width:1.25rem;height:1.25rem;}
.theme-toggle .icon-sun{display:none;}
.theme-toggle .icon-moon{display:block;}
.dark .theme-toggle .icon-moon{display:none;}
.dark .theme-toggle .icon-sun{display:block;}
.nav-signin,.nav-cta,.nav-outline{
  display:inline-flex;align-items:center;justify-content:center;
  height:2.25rem;padding:0 1rem;border:1px solid transparent;border-radius:999px;white-space:nowrap;
  font-family:var(--sans);font-size:.8125rem;font-weight:600;cursor:pointer;
  transition:background-color .2s, box-shadow .2s, transform .2s, border-color .2s;
}
.nav-signin,.nav-outline{color:var(--foreground);}
.nav-outline{border-color:color-mix(in oklab, var(--foreground) 20%, transparent);}
.nav-outline:hover{border-color:color-mix(in oklab, var(--foreground) 40%, transparent);}
.nav-cta,.news-form button{background:var(--lime);color:#0c2a1e;}
.news-form button{
  display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:999px;
  font-family:var(--sans);font-weight:600;cursor:pointer;
  transition:background-color .2s, box-shadow .2s, transform .2s;
}
.nav-cta:hover,.news-form button:hover{background:var(--lime-strong);box-shadow:0 10px 24px -10px var(--lime-strong);}
.nav-cta:active,.news-form button:active{transform:scale(.98);}
/* Below 1024px the links drop into a card under the pill; below 640px the two
   buttons move into it as well. */
.nav-mobile-actions{display:none;}
@media(max-width:1023.98px){
  .nav-toggle{display:grid;}
  .site-nav{
    display:none;position:absolute;top:calc(100% + .5rem);left:0;right:0;z-index:50;
    flex-direction:column;align-items:stretch;gap:0;padding:.75rem;border-radius:1.5rem;
    border:1px solid color-mix(in oklab, var(--foreground) 10%, transparent);
    background:color-mix(in oklab, var(--background) 95%, transparent);backdrop-filter:blur(24px);
    box-shadow:0 18px 40px -18px rgb(12 42 30 / .4);
  }
  .site-nav.open{display:flex;}
  .site-nav > a{
    padding:.75rem 1rem;font-size:1rem;line-height:1.5rem;border-radius:1rem;
    color:color-mix(in oklab, var(--foreground) 80%, transparent);
  }
}
@media(max-width:639.98px){
  .nav-actions .nav-signin,.nav-actions .nav-cta{display:none;}
  .nav-mobile-actions{
    display:grid;grid-template-columns:1fr 1fr;gap:.5rem;
    margin-top:.5rem;padding-top:.75rem;border-top:1px solid var(--border);
  }
  .nav-mobile-actions a{height:2.5rem;padding:0 1.25rem;font-size:.875rem;}
}

/* ---------- Reading progress ---------- */
.reading-progress{
  position:fixed;top:0;left:0;height:4px;width:0;border-radius:0 4px 4px 0;
  background:linear-gradient(90deg, var(--lime), var(--primary));
  z-index:60;transition:width .08s linear;
}

/* ---------- Hero (listing): a painting panel behind the floating header ---------- */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  margin:-4.25rem 0 0;padding:150px 0 calc(76px + var(--stack-overlap));color:#0c2a1e;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:url(/art/paint-dusk.webp) center / cover no-repeat;
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg, rgb(253 253 250 / .9) 0%, rgb(253 253 250 / .6) 45%, rgb(253 253 250 / 0) 78%);
}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-size:12px;color:#0c2a1e;margin-bottom:18px;
}
.eyebrow .dot{width:8px;height:8px;border-radius:999px;background:var(--primary);}
.hero h1{
  font-family:var(--heading);font-weight:800;font-stretch:82%;font-size:clamp(46px,8vw,96px);line-height:.92;
  letter-spacing:-.025em;margin:0 0 24px;max-width:13ch;text-wrap:balance;
  animation:rise .9s cubic-bezier(.2,.7,.2,1) both;
}
.hero p{
  font-size:19px;line-height:1.6;color:rgb(12 42 30 / .8);max-width:58ch;margin:0;
  animation:rise .9s cubic-bezier(.2,.7,.2,1) .12s both;
}

/* ---------- Filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:34px 0 14px;}
.chip{
  border:1px solid var(--border);background:var(--surface);color:var(--foreground);
  padding:9px 18px;border-radius:999px;font-size:14px;font-weight:600;cursor:pointer;
  transition:.2s;font-family:var(--sans);
}
.chip:hover{border-color:color-mix(in oklab, var(--foreground) 35%, transparent);}
.chip.active{background:var(--solid);color:var(--solid-foreground);border-color:transparent;}

/* ---------- Post listing ---------- */
/* A card with rounded top corners that slides up over the hero. */
.posts{
  position:relative;margin-top:calc(var(--stack-overlap) * -1);padding:64px 0 70px;
  border-radius:var(--stack-overlap) var(--stack-overlap) 0 0;background:var(--background);
}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;}

.card{
  background:var(--surface);border:1px solid var(--border);border-radius:28px;padding:12px;
  display:flex;flex-direction:column;
  transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease, border-color .3s ease, background-color .3s ease;
  animation:rise .8s cubic-bezier(.2,.7,.2,1) both;
}
.card:nth-child(2){animation-delay:.08s;}
.card:nth-child(3){animation-delay:.16s;}
.card:nth-child(4){animation-delay:.24s;}
.card:nth-child(n+5){animation-delay:.3s;}
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow-soft);border-color:var(--lime-strong);background:var(--accent);}
.card.hidden{display:none;}
a.card{color:inherit;}

/* Featured: content left, painting right */
.featured{grid-column:1 / -1;display:grid;grid-template-columns:1.05fr .95fr;gap:8px;}
.featured .body{order:0;padding:30px;}
.featured .cover{order:1;min-height:340px;}
.featured h2{
  font-family:var(--heading);font-weight:800;font-stretch:84%;font-size:clamp(30px,3.8vw,48px);
  line-height:.98;letter-spacing:-.02em;
}
@media(max-width:820px){
  .featured{grid-template-columns:1fr;}
  .featured .cover{order:-1;min-height:200px;}
  .featured .body{padding:18px 12px 12px;}
}

/* Cover: one of the watercolour paintings, chosen per category */
.cover{
  --painting:url(/art/paint-dawn.webp);
  position:relative;min-height:170px;overflow:hidden;isolation:isolate;border-radius:20px;
}
.cover::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--painting) center / cover no-repeat;
  transition:transform .7s ease;
}
.card:hover .cover::before{transform:scale(1.12) translate(-1.5%, -1.5%);}
.cover .tag{transition:transform .5s cubic-bezier(.2,1.5,.4,1), background-color .3s;}
.card:hover .cover .tag{transform:translateY(-2px) scale(1.06);background:var(--lime);}
.cover--start{--painting:url(/art/paint-dawn.webp);}
.cover--strategy{--painting:url(/art/paint-meadow.webp);}
.cover--resources{--painting:url(/art/paint-dusk.webp);}
.cover--code{--painting:url(/art/paint-lake.webp);}
.cover--tips{--painting:url(/art/paint-meadow.webp);}
.cover--compare{--painting:url(/art/paint-lake.webp);}
/* the emoji glyphs in the markup are not shown; the painting is the cover */
.cover .glyph{display:none;}
.cover .tag,.cover .read-min{
  position:absolute;left:12px;z-index:2;padding:5px 12px;border-radius:999px;
  background:rgb(255 255 255 / .9);color:#0c2a1e;font-family:var(--sans);font-size:12px;font-weight:600;
  backdrop-filter:blur(6px);
}
.cover .tag{top:12px;}
.cover .read-min{bottom:12px;font-size:10.5px;display:flex;align-items:center;gap:6px;}

.card .body{padding:20px 12px 12px;display:flex;flex-direction:column;flex:1;}
.card h2,.card h3{font-family:var(--heading);font-weight:700;letter-spacing:-.015em;margin:0 0 10px;line-height:1.2;color:var(--foreground);}
.card h3{font-size:20px;}
.card .excerpt{color:var(--muted-foreground);font-size:14px;margin:0 0 20px;flex:1;line-height:1.6;}
.meta{display:flex;align-items:center;gap:11px;font-size:12.5px;color:var(--muted-foreground);margin-top:auto;padding-top:16px;border-top:1px solid var(--border);}
.meta .avatar,.article-meta .avatar,.author-box .avatar{
  flex:none;font-size:0;color:transparent;letter-spacing:0;
  background:url(/logo.svg) center / contain no-repeat;
}
.meta .avatar{width:32px;height:32px;}
.meta .who{font-weight:600;color:var(--foreground);}
.card-link{
  margin-top:16px;align-self:flex-start;color:var(--foreground);font-weight:600;font-size:14px;
  display:inline-flex;align-items:center;gap:8px;transition:gap .2s, color .2s;
}
a.card:hover .card-link{gap:12px;color:var(--link);}

/* ---------- CTA band ---------- */
.cta-band{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--forest);color:var(--cream);border-radius:32px;
  padding:56px 48px;margin:8px 0 14px;
}
.cta-band::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.65;
  background:url(/art/paint-forest.webp) center / cover no-repeat;
}
.cta-band .inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;}
.cta-band h3{
  font-family:var(--heading);font-weight:800;font-stretch:84%;font-size:clamp(30px,4vw,44px);line-height:.98;
  letter-spacing:-.02em;margin:0 0 12px;color:var(--cream);
}
.cta-band p{margin:0;color:rgb(243 248 234 / .75);max-width:46ch;}
.news-form{display:flex;gap:10px;flex-wrap:wrap;}
.news-form input{
  border:1px solid rgb(243 248 234 / .25);background:rgb(243 248 234 / .08);color:var(--cream);
  padding:13px 20px;border-radius:999px;font-size:15px;min-width:240px;font-family:var(--sans);
}
.news-form input::placeholder{color:rgb(243 248 234 / .55);}
.news-form input:focus{outline:2px solid var(--lime);outline-offset:2px;}
.news-form button{padding:13px 26px;font-size:14px;}
.news-form button:disabled{cursor:default;opacity:.75;}
/* Result of a sign-up, filled in by blog.js. */
.news-note{flex-basis:100%;min-height:1.3em;margin:0;font-size:13px;color:rgb(243 248 234 / .85);}

/* ---------- Footer ---------- */
footer.site{
  background:var(--forest);color:rgb(243 248 234 / .7);
  border-radius:var(--stack-overlap) var(--stack-overlap) 0 0;padding:64px 0 32px;
}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;}
footer.site .brand .name{font-size:2rem;}
.foot-about{margin:18px 0 0;font-size:14px;line-height:1.6;max-width:34ch;}
.foot-contact{margin:16px 0 0;font-size:14px;}
.foot-contact a{
  color:var(--cream);font-weight:600;
  text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:2px;text-underline-offset:4px;
}
.foot-contact a:hover{color:var(--lime);}
.foot-col h4{color:var(--lime);font-size:12px;margin:4px 0 14px;}
.foot-col a{display:block;width:fit-content;padding:6px 0;font-size:14px;transition:color .15s;}
.foot-col a:hover{color:var(--lime);}
.foot-social .social-row{display:flex;gap:10px;flex-wrap:wrap;}
.foot-social a.social{
  display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;
  border-radius:999px;background:rgb(243 248 234 / .1);color:var(--cream);
  transition:color .2s, background .2s, transform .2s;
}
.foot-social a.social:hover{color:#0c2a1e;background:var(--lime);transform:translateY(-2px);}
.foot-social a.social svg{width:18px;height:18px;display:block;}
.foot-bottom{
  margin-top:48px;padding-top:24px;border-top:1px solid rgb(243 248 234 / .15);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:rgb(243 248 234 / .6);
}
.foot-legal{display:flex;gap:18px;align-items:center;flex-wrap:wrap;}
.foot-legal a{transition:color .15s;}
.foot-legal a:hover{color:var(--lime);}

/* =====================================================================
   Article page
   ===================================================================== */
.breadcrumb{padding:34px 0 0;}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;font-size:11.5px;color:var(--muted-foreground);}
.breadcrumb li{display:flex;align-items:center;gap:8px;}
.breadcrumb li::after{content:"/";opacity:.45;}
.breadcrumb li:last-child::after{content:"";}
.breadcrumb a:hover{color:var(--link);}
.breadcrumb li[aria-current]{color:var(--foreground);}

.article-hero{padding:26px 0 26px;}
.article-tag{
  display:inline-block;padding:6px 14px;border-radius:999px;font-size:12px;font-weight:600;
  color:var(--foreground);background:var(--accent);margin-bottom:20px;
}
.article-hero h1{
  font-family:var(--heading);font-weight:800;font-stretch:84%;font-size:clamp(38px,5.6vw,64px);line-height:.98;
  letter-spacing:-.025em;margin:0 0 22px;color:var(--foreground);text-wrap:balance;
  animation:rise .9s cubic-bezier(.2,.7,.2,1) both;
}
.article-hero .deck{font-size:20px;color:var(--muted-foreground);margin:0 0 28px;line-height:1.55;}
.article-meta{display:flex;align-items:center;gap:13px;font-size:13.5px;color:var(--muted-foreground);}
.article-meta .avatar{width:42px;height:42px;}
.article-meta .who{font-weight:600;color:var(--foreground);display:block;font-size:14.5px;}
.article-meta .sub{font-size:13px;}

.article-cover{height:340px;border-radius:28px;margin:30px auto 6px;}
@media(max-width:600px){.article-cover{height:210px;}}

/* ---------- Prose ---------- */
.prose{padding:34px 0 18px;}
.prose p{margin:0 0 22px;color:var(--foreground);font-size:18px;line-height:1.75;}
.prose h2{
  font-family:var(--heading);font-weight:800;font-stretch:88%;font-size:clamp(28px,3.6vw,38px);letter-spacing:-.02em;
  margin:52px 0 16px;line-height:1.05;scroll-margin-top:96px;color:var(--foreground);
}
.prose h3{font-family:var(--heading);font-weight:700;font-size:22px;letter-spacing:-.01em;margin:32px 0 10px;color:var(--foreground);}
.prose ul,.prose ol{margin:0 0 24px;padding-left:24px;color:var(--foreground);font-size:17.5px;}
.prose li{margin-bottom:10px;line-height:1.7;}
.prose li::marker{color:var(--link);font-weight:700;}
.prose strong{color:var(--foreground);font-weight:700;}
.prose a{
  color:var(--foreground);font-weight:600;
  text-decoration:underline;text-decoration-color:var(--primary);text-decoration-thickness:2px;text-underline-offset:4px;
  transition:color .15s;
}
.prose a:hover{color:var(--link);}
.prose hr{border:none;border-top:1px solid var(--border);margin:44px 0;}

.prose blockquote{
  margin:32px 0;padding:6px 0 6px 26px;border-left:4px solid var(--lime);
  font-family:var(--heading);font-weight:700;font-size:26px;line-height:1.25;letter-spacing:-.01em;color:var(--foreground);
}

.prose table{
  width:100%;border-collapse:separate;border-spacing:0;margin:30px 0;font-size:15.5px;
  border:1px solid var(--border);border-radius:20px;overflow:hidden;background:var(--surface);
}
.prose th,.prose td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--border);vertical-align:top;color:var(--foreground);}
.prose tbody tr:last-child td{border-bottom:none;}
.prose thead th{background:var(--surface-2);font-weight:700;}
.prose tbody tr:hover{background:color-mix(in oklab, var(--foreground) 3%, transparent);}

.callout{
  background:var(--accent);border-radius:20px;padding:22px 26px;margin:32px 0;
  border-left:5px solid var(--lime-strong);
}
.callout p{margin:0;font-size:16.5px;color:var(--foreground);}
.callout .lbl{display:block;color:var(--primary);font-size:11.5px;margin-bottom:8px;}

/* key takeaways: a dark card with lime ticks */
.takeaways{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--forest);color:var(--cream);border-radius:28px;padding:32px 34px;margin:44px 0 14px;
}
.takeaways::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.55;
  background:url(/art/paint-forest.webp) center / cover no-repeat;
}
.takeaways h4{margin:0 0 18px;font-size:12px;color:var(--lime);}
.takeaways ul{margin:0;padding-left:0;list-style:none;}
.takeaways li{position:relative;color:var(--cream);font-size:16.5px;line-height:1.55;margin-bottom:12px;padding-left:34px;}
.takeaways li:last-child{margin-bottom:0;}
.takeaways li::before{
  content:"";position:absolute;left:0;top:.2em;width:20px;height:20px;border-radius:999px;
  background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%230c2a1e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* author + back */
.article-foot{padding:10px 0 4px;}
.author-box{
  display:flex;gap:18px;align-items:flex-start;background:var(--surface-2);
  border-radius:24px;padding:24px 26px;margin:30px 0;
}
.author-box .avatar{width:48px;height:48px;}
.author-box h4{margin:0 0 5px;font-family:var(--heading);font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--foreground);}
.author-box p{margin:0;font-size:14.5px;color:var(--muted-foreground);}
.back-link{
  display:inline-flex;align-items:center;gap:8px;color:var(--foreground);font-weight:600;font-size:14px;
  margin:6px 0 4px;padding:10px 18px;border-radius:999px;
  border:1px solid color-mix(in oklab, var(--foreground) 20%, transparent);
  transition:gap .2s, background-color .2s, border-color .2s;
}
.back-link:hover{gap:12px;background:color-mix(in oklab, var(--foreground) 5%, transparent);border-color:color-mix(in oklab, var(--foreground) 40%, transparent);}

/* related */
.related{padding:40px 0 10px;}
.related h2{
  font-family:var(--heading);font-weight:800;font-stretch:84%;font-size:clamp(34px,5vw,56px);line-height:.95;
  letter-spacing:-.025em;margin:0 0 28px;color:var(--foreground);
}
.related .grid{grid-template-columns:repeat(3,minmax(0,1fr));}

/* ---------- Responsive ---------- */
@media(min-width:768px){:root{--stack-overlap:40px;}}
@media(max-width:1080px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:920px){.foot-grid{grid-template-columns:1fr 1fr;gap:32px;}}
@media(max-width:880px){.related .grid{grid-template-columns:1fr;}}
@media(max-width:680px){
  .grid{grid-template-columns:1fr;}
  .hero{padding:128px 0 calc(56px + var(--stack-overlap));}
  .posts{padding-top:44px;}
  .cta-band{padding:40px 26px;border-radius:26px;}
  .foot-grid{grid-template-columns:1fr;}
  .prose p{font-size:17px;}
  .prose blockquote{font-size:22px;}
  .takeaways{padding:26px 24px;}
  /* wide comparison tables scroll sideways instead of squeezing */
  .prose table{display:block;overflow-x:auto;}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .hero h1,.hero p,.article-hero h1,.card{animation:none;}
  .card:hover,.card:hover .cover::before,.card:hover .cover .tag{transform:none;}
}

body.no-scroll{overflow:hidden;}

/* Embedded in signed-in dashboard (iframe ?embed=1) */
html[data-embed="1"] header.site,
html[data-embed="1"] footer.site,
html[data-embed="1"] .reading-progress{display:none;}
html[data-embed="1"] main{padding-top:0;}
/* With the header gone the listing hero no longer tucks under it. */
html[data-embed="1"] .hero{margin:12px 12px 0;padding:76px 0;border-radius:32px;}
html[data-embed="1"] .posts{margin-top:0;padding-top:24px;border-radius:0;}
/* The iframe is sized to content by the parent, so the embedded doc never
   scrolls on its own , avoids a second scrollbar inside the dashboard. */
html[data-embed="1"],
html[data-embed="1"] body{overflow:hidden;}