/* ==========================================================================
   SAFE21 blog — shared stylesheet
   ==========================================================================

   Every blog page (the index and all articles) loads this one file instead
   of carrying its own copy of the same ~370 lines inline. It is the union of
   what those pages used to declare separately: nothing was dropped, and the
   few genuine per-article differences are kept as modifier classes at the
   bottom (`figure.source.inline`, `.article-body.dense`).

   Deliberately NOT included here: the tiny script in each page's <head> that
   applies the saved theme before first paint. That one must stay inline, or
   the page would flash the dark theme before the light one is applied.

   The site has no build step: this is plain CSS, loaded with a <link>.
   Behaviour lives in blog.js.
   ========================================================================== */

/* ---------- Design tokens (identical to index.html) ---------- */
:root {
  --ink:    #0A0F1C;   /* base background ("vault") */
  --ink-2:  #0E1525;   /* alternating section background */
  --panel:  #111B2E;   /* cards / elevated surfaces */
  --line:   #1F2B44;   /* hairline borders */
  --light:  #F5F7FA;   /* primary text */
  --muted:  #95A1B5;   /* secondary text */
  --teal:   #2DD4BF;   /* primary accent (security) */
  --teal-d: #0D9488;   /* deep teal (logo tile, solid fills) */
  --orange: #F7931A;   /* Bitcoin accent — used sparingly */
  --danger: #F26D6D;   /* used ONLY for the "never do this" rules */

  --maxw: 1120px;
  --readw: 720px;      /* narrower measure for long-form reading */
  --radius: 16px;

  /* --- Tokens added in [12] so the light theme can override them.
         These values are exactly what the stylesheet used to hardcode,
         so the dark rendering is byte-for-byte unchanged. --- */
  --body:         #DDE4EE;                    /* long-form body copy */
  --header-bg:    rgba(10, 15, 28, 0.72);     /* sticky header (blurred) */
  --drawer-bg:    rgba(10, 15, 28, 0.96);     /* mobile drawer */
  --accent-hover: #45e0cd;                    /* button + link hover */
  --btn-text:     #04201C;                    /* text on the teal button */
  --tint-teal-bg: rgba(45, 212, 191, 0.07);   /* callout fill */
  --tint-teal-bd: rgba(45, 212, 191, 0.28);   /* callout border */
  --tint-btc-bg:  rgba(247, 147, 26, 0.07);   /* Bitcoin callout fill */
  --tint-btc-bd:  rgba(247, 147, 26, 0.30);   /* Bitcoin callout border */
  --logo-word:    #F5F7FA;                    /* "SAFE" in the wordmark */
  --logo-21:      #2DD4BF;                    /* "21" in the wordmark */
  --card-shadow:  none;
}

/* ---------- Light theme (blog only) ----------
   Applied by setting data-theme="light" on <html>. Every value is a
   deliberate counterpart of the dark token, not a generic light
   palette: the page background is a cool white tinted toward the
   brand's navy, and the primary text colour IS the dark theme's
   background (#0A0F1C), so the two modes mirror each other.

   The teal is darkened from #2DD4BF to #0A7568 because the bright
   teal fails contrast on white. #0A7568 clears 4.5:1 everywhere while
   still reading as the same colour family. All pairings were checked
   against WCAG 2.1 AA; see CHANGELOG entry [12] for the ratios. --- */
[data-theme="light"] {
  --ink:          #F4F6F9;
  --ink-2:        #E8EDF4;
  --panel:        #FFFFFF;
  --line:         #D3DBE6;
  --light:        #0A0F1C;
  --body:         #1E2735;
  --muted:        #54637A;
  --teal:         #0A7568;
  --teal-d:       #0D9488;
  --orange:       #9A5B00;
  --danger:       #B3261E;
  --header-bg:    rgba(244, 246, 249, 0.82);
  --drawer-bg:    rgba(244, 246, 249, 0.97);
  --accent-hover: #0D9488;
  --btn-text:     #FFFFFF;
  --tint-teal-bg: rgba(10, 117, 104, 0.06);
  --tint-teal-bd: rgba(10, 117, 104, 0.30);
  --tint-btc-bg:  rgba(154, 91, 0, 0.06);
  --tint-btc-bd:  rgba(154, 91, 0, 0.28);
  --logo-word:    #0A0F1C;
  --logo-21:      #0D9488;
  /* On white, cards need a shadow to separate from the page; on the
     dark theme the border alone is enough. */
  --card-shadow:  0 1px 3px rgba(10, 15, 28, 0.06);
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--light);
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
/* Reading column: long-form text is capped narrower than the site grid
   so lines stay around 70-80 characters, which is easier to read. */
.read { max-width: var(--readw); margin: 0 auto; padding: 0 24px; }

.eyebrow {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 14px;
}

h1, h2, h3 { font-family: 'Space Grotesk', sans-serif; line-height: 1.15; margin: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Space Grotesk', sans-serif; font-weight: 600;
  font-size: 15px; padding: 13px 22px; border-radius: 10px;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}
.btn-primary { background: var(--teal); color: var(--btn-text); }
.btn-primary:hover { transform: translateY(-2px); background: var(--accent-hover); }
.btn-ghost { border-color: var(--line); color: var(--light); background: transparent; }
.btn-ghost:hover { border-color: var(--teal); transform: translateY(-2px); }

/* ---------- Header (same structure as index.html) ---------- */
header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 84px; }
.nav .logo svg { height: 60px; width: auto; }
.nav-links { display: flex; gap: 30px; align-items: center; }
.nav-links a { font-size: 14px; color: var(--muted); font-weight: 500; transition: color .15s ease; }
.nav-links a:hover { color: var(--light); }
.nav-links a.current { color: var(--teal); }
.nav .cta { display: flex; align-items: center; gap: 16px; }

.menu-toggle {
  display: none;
  flex: none; width: 42px; height: 42px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line);
  border-radius: 10px; color: var(--light); cursor: pointer;
}
.menu-toggle svg { width: 22px; height: 22px; }
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

.mobile-menu {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--drawer-bg);
}
.mobile-menu.open { display: block; }
.mobile-menu nav { display: flex; flex-direction: column; padding: 8px 24px 18px; }
.mobile-menu nav a {
  padding: 14px 0; font-size: 16px; color: var(--light);
  border-bottom: 1px solid var(--line);
}
.mobile-menu nav a:last-child { border-bottom: none; color: var(--teal); }

/* Header collapses to the hamburger at 1024px, not 760px: between
   those widths the full link row + Contact button no longer fits and
   "Blog" wrapped under "Contattaci". Below 1024px the tidy drawer takes
   over; the theme switch and hamburger stay visible at every width. */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .menu-toggle { display: inline-flex; }
  .nav .cta > a.btn-primary { display: none; }
}
@media (max-width: 760px) {
  .nav { height: 72px; }
  .nav .logo svg { height: 44px; }
}

/* ---------- Article layout ---------- */
.article-head {
  padding: 64px 0 8px;
  background: var(--ink-2);
  border-bottom: 1px solid var(--line);
}
.back-link {
  font-family: 'Space Mono', monospace; font-size: 12px;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); display: inline-block; margin-bottom: 28px;
  transition: color .15s ease;
}
.back-link:hover { color: var(--teal); }

.article-head h1 { font-size: 44px; font-weight: 700; letter-spacing: -0.5px; }
.article-head .standfirst {
  font-size: 19px; color: var(--muted); margin: 22px 0 0;
}
/* Byline: mono, because it is metadata rather than prose. */
.byline {
  font-family: 'Space Mono', monospace; font-size: 12px;
  color: var(--muted); letter-spacing: 1px;
  margin: 30px 0 0; padding: 16px 0 40px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 8px 18px;
}
.byline .read-time { color: var(--teal); }

.article-body { padding: 48px 0 24px; }
.article-body h2 {
  font-size: 27px; font-weight: 600;
  margin: 52px 0 16px; letter-spacing: -0.2px;
}
.article-body h3 {
  font-size: 19px; font-weight: 600; margin: 34px 0 10px;
}
.article-body p { margin: 0 0 20px; font-size: 17px; color: var(--body); }
.article-body strong { color: var(--light); font-weight: 600; }
.article-body em { color: var(--body); }
.article-body ul, .article-body ol { margin: 0 0 22px; padding-left: 22px; }
.article-body li { margin-bottom: 14px; font-size: 17px; color: var(--body); }
/* Inline links inside prose are underlined so they are obvious in
   body copy, where colour alone is not a reliable signal. */
.article-body a.inline {
  color: var(--teal); text-decoration: underline;
  text-underline-offset: 3px;
}
.article-body a.inline:hover { color: var(--accent-hover); }

/* ---------- Figure (the infographic) ---------- */
figure.source {
  margin: 8px 0 40px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
}
figure.source img { width: 100%; height: auto; cursor: zoom-in; }
figure.source figcaption {
  font-size: 13px; color: var(--muted);
  padding: 14px 18px; border-top: 1px solid var(--line);
}

/* ---------- Image lightbox (click to zoom, 1:1) ----------
   The figure image advertises itself as clickable; the overlay shows the
   image at natural size and scrolls if it overflows the viewport. */
.lightbox-overlay {
  position: fixed; inset: 0; z-index: 200; display: none;
  background: rgba(4, 8, 16, 0.85);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  overflow: auto; cursor: zoom-out; padding: 24px; text-align: center;
}
.lightbox-overlay.open { display: block; }
.lightbox-overlay img {
  /* Natural pixel size (1:1), but capped to fit the viewport: width/
     height:auto preserve the aspect ratio, max-width/max-height scale
     the image down (never up) so it never exceeds the screen. The
     -48px accounts for the overlay's own 24px padding on each side. */
  display: inline-block; width: auto; height: auto;
  max-width: calc(100vw - 48px); max-height: calc(100vh - 48px);
  margin: 0 auto; cursor: default; box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.lightbox-close {
  position: fixed; top: 16px; right: 20px; z-index: 210;
  width: 44px; height: 44px; display: inline-flex;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.5); color: #fff;
  border: 1px solid rgba(255,255,255,0.4); border-radius: 10px; cursor: pointer;
}
.lightbox-close:hover { background: rgba(0,0,0,0.75); }
.lightbox-close svg { width: 22px; height: 22px; }

/* ---------- Article footer note (closing links + disclaimer) ---------- */
.footnote {
  font-size: 14px; color: var(--muted); line-height: 1.7;
  margin: 44px 0 0; padding-top: 22px;
  border-top: 1px solid var(--line);
}
.footnote p { font-size: 14px; color: var(--muted); }
.footnote ul { margin: 10px 0 20px; }
.footnote li { font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.footnote a.inline { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Callout (neutral highlight) ---------- */
.callout {
  background: var(--tint-teal-bg);
  border: 1px solid var(--tint-teal-bd);
  border-radius: var(--radius);
  padding: 24px 26px; margin: 34px 0;
}
.callout ul { margin: 0; padding-left: 20px; }
.callout li { font-size: 16.5px; color: var(--body); margin-bottom: 12px; }
.callout li:last-child { margin-bottom: 0; }
.callout .eyebrow { margin-bottom: 10px; }
.callout ul + p { margin-top: 16px; }

/* ---------- Footnote reference + note ----------
   The article cites a source once (the "lost BTC" range). A small
   superscript links down to a muted note at the foot of the body. */
a.fn-ref { color: var(--teal); text-decoration: none; font-weight: 600; }
a.fn-ref sup { font-size: 0.72em; }
.footnote {
  font-size: 14px; color: var(--muted); line-height: 1.7;
  margin: 44px 0 0; padding-top: 22px;
  border-top: 1px solid var(--line);
}

/* ---------- Rule cards: the "never do this" list ----------
   Numbered deliberately: these are not decorative markers, the list is
   a fixed set of rules the reader is meant to be able to refer back to
   ("regola 2"), so the numbering carries real information. */
.rules { margin: 30px 0 36px; display: grid; gap: 14px; }
.rule {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--danger);
  border-radius: 12px; padding: 18px 20px;
}
.rule .num {
  font-family: 'Space Mono', monospace; font-size: 13px;
  color: var(--danger); flex: none; padding-top: 2px;
}
.rule h3 { font-size: 17px; margin: 0 0 6px; }
.rule p { margin: 0; font-size: 15px; color: var(--muted); }

/* ---------- Checklist ---------- */
.checklist {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px 30px; margin: 40px 0;
}
.checklist h2 { margin: 0 0 6px; font-size: 22px; }
.checklist ul { list-style: none; margin: 18px 0 0; padding: 0; }
.checklist li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 11px 0; border-bottom: 1px solid var(--line);
  font-size: 16px; color: var(--body);
}
.checklist li:last-child { border-bottom: none; }
.checklist li svg { flex: none; width: 20px; height: 20px; margin-top: 3px; color: var(--teal); }

/* ---------- Data table (first used by this article) ----------
   Wrapped in .table-wrap so a wide table scrolls inside its own box
   instead of forcing the whole page to scroll sideways on a phone. */
.table-wrap {
  overflow-x: auto;
  margin: 0 0 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.article-body table { width: 100%; border-collapse: collapse; font-size: 15px; }
.article-body th, .article-body td {
  padding: 13px 16px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.article-body thead th {
  font-family: 'Space Mono', monospace; font-size: 11px;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--light); white-space: nowrap;
}
.article-body td { color: var(--body); }
.article-body tbody tr:last-child td { border-bottom: none; }
/* The example passwords: monospace chips, so a space or a symbol inside
   them is unmistakable. */
.article-body code {
  font-family: 'Space Mono', monospace; font-size: 0.92em;
  background: var(--tint-teal-bg); border: 1px solid var(--tint-teal-bd);
  border-radius: 6px; padding: 2px 7px; color: var(--light);
  white-space: nowrap;
}

/* Mobile override — must come after the base table rules above, which
   carry equal specificity and would otherwise win on source order. */
@media (max-width: 760px) {
  .article-body th, .article-body td { padding: 11px 13px; font-size: 14px; }
}

/* ---------- Closing CTA ---------- */
.article-cta {
  background: var(--ink-2); border-top: 1px solid var(--line);
  margin-top: 56px; padding: 64px 0;
}
.article-cta h2 { font-size: 30px; margin-bottom: 14px; }
.article-cta p { color: var(--muted); font-size: 17px; margin: 0 0 26px; }
.article-cta .actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Blog intro ---------- */
.blog-head {
  padding: 76px 0 56px;
  background: var(--ink-2);
  border-bottom: 1px solid var(--line);
}
.blog-head h1 { font-size: 46px; font-weight: 700; letter-spacing: -0.5px; }
.blog-head p.lede {
  font-size: 19px; color: var(--muted);
  max-width: 640px; margin: 20px 0 0;
}

/* ---------- Article list ----------
   Cards are full-width rows rather than a grid: with few articles a
   multi-column grid would leave obvious empty cells, and a single
   column keeps the newest post visually dominant. */
.posts { padding: 56px 0 72px; display: grid; gap: 20px; }

.post-card {
  display: block;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 32px;
  /* min-width:0 lets this grid item shrink to its track instead of being
     held open at its min-content width by the flex row inside. */
  min-width: 0;
  transition: border-color .15s ease, transform .15s ease;
}
.post-card:hover { border-color: var(--teal); transform: translateY(-2px); }
/* Each card is a flex row: text on the left, a cover thumbnail on the
   right. The thumbnail is optional — cards without an image (a couple of
   older articles) simply let .post-text span the full width. */
.post-card article { display: flex; gap: 30px; align-items: stretch; }
.post-text { flex: 1 1 auto; min-width: 0; }
/* Fills the card's full height as a panel on the right; object-fit: cover
   crops each cover (all ~16:9 except one portrait) into the same box. */
.post-thumb {
  flex: 0 0 clamp(200px, 30%, 300px);
  /* min-width:0 defeats the flex default (min-width:auto = the image's
     intrinsic width), which would otherwise blow the thumbnail up to full
     size and ignore flex-basis. */
  min-width: 0;
  align-self: center;
  /* Fixed 16:9 box, centred beside the text. aspect-ratio + height:auto
     override the width/height HTML attributes (there only to document the
     source ratio for the audit); object-fit:cover crops each cover — all
     ~16:9 except one portrait — into the same shape. */
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--ink-2);
}
.post-card .meta {
  font-family: 'Space Mono', monospace; font-size: 12px;
  letter-spacing: 1px; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 14px;
}
.post-card .meta .tag { color: var(--teal); text-transform: uppercase; }
.post-card h2 { font-size: 28px; font-weight: 600; letter-spacing: -0.2px; }
.post-card p { color: var(--muted); font-size: 16.5px; margin: 12px 0 0; max-width: 720px; }
.post-card .more {
  display: inline-block; margin-top: 18px;
  font-family: 'Space Grotesk', sans-serif; font-weight: 600;
  font-size: 15px; color: var(--teal);
}

/* Empty-state note shown under the list while the blog is still small. */
.list-note {
  margin-top: 28px; font-size: 14.5px; color: var(--muted);
  text-align: center;
}
.list-note a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Footer (same as index.html) ---------- */
footer { background: var(--ink); border-top: 1px solid var(--line); padding: 56px 0 34px; }
.foot-top { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; }
.foot-brand { max-width: 320px; }
.foot-brand .logo svg { height: 54px; width: auto; margin-bottom: 14px; }
.foot-brand p { color: var(--muted); font-size: 14px; margin: 0; }
.foot-cols { display: flex; flex-wrap: wrap; gap: 48px; }
.foot-col { display: flex; flex-direction: column; gap: 10px; }
.foot-col h4 {
  font-family: 'Space Mono', monospace; font-size: 11px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--light); margin: 0 0 4px;
}
.foot-col a { font-size: 14px; color: var(--muted); transition: color .15s ease; }
.foot-col a:hover { color: var(--teal); }
.disclaimer {
  margin: 44px 0 18px; padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--muted); line-height: 1.7;
}
.copyright { font-size: 12.5px; color: var(--muted); margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .article-head { padding-top: 40px; }
  .article-head h1 { font-size: 32px; }
  .article-head .standfirst { font-size: 17px; }
  .article-body h2 { font-size: 23px; margin-top: 42px; }
  .article-body p, .article-body li { font-size: 16.5px; }
  .article-cta h2 { font-size: 25px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .blog-head { padding: 48px 0 40px; }
  .blog-head h1 { font-size: 34px; }
  .blog-head p.lede { font-size: 17px; }
  .posts { padding: 36px 0 52px; }
  .post-card { padding: 22px 20px; }
  .post-card h2 { font-size: 23px; }
  /* Stack on narrow screens: cover on top (16:9), text below. */
  .post-card article { flex-direction: column-reverse; gap: 18px; }
  .post-thumb {
    flex: none; width: 100%; align-self: auto;
    aspect-ratio: 16 / 9; min-height: 0;
  }
}

/* ---------- Theme toggle button ---------- */
/* Unlike the "Contattaci" button, this control stays visible at every
   width: on a phone the light theme is exactly where it matters most,
   so hiding the switch on mobile would defeat the purpose. */
.theme-toggle {
  flex: none; width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line);
  border-radius: 10px; color: var(--light); cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.theme-toggle:hover { border-color: var(--teal); color: var(--teal); }
.theme-toggle svg { width: 20px; height: 20px; }
/* Show the icon of the theme the click will switch TO. */
.theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }

/* Smooth crossfade between themes. Disabled automatically by the
   prefers-reduced-motion block above. */
body, header, .callout, figure.source, .table-wrap {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* Cards gain a soft shadow on white; the token is `none` in dark mode. */
.callout, figure.source, .table-wrap { box-shadow: var(--card-shadow); }

@media (max-width: 400px) {
  /* Very narrow phones: tighten the header gap so logo + theme +
     hamburger never collide. */
  .nav .cta { gap: 10px; }
  .theme-toggle, .menu-toggle { width: 38px; height: 38px; }
}

/* ---------- Callout variants ----------
   The teal callout also accepts prose and links, and a Bitcoin-orange
   variant used when the box carries a caveat rather than advice. */
.callout p { font-size: 17px; color: var(--body); }
.callout p:last-child { margin-bottom: 0; }
.callout a.inline { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.callout.btc {
  background: var(--tint-btc-bg);
  border-color: var(--tint-btc-bd);
}
.callout.btc .eyebrow { color: var(--orange); }

figure.source figcaption a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Per-article modifiers ----------
   Two older articles (dadi-semplicita, seed-mai-online) place their
   figure in the middle of the text rather than as a lead image, and use
   tighter list spacing. These modifier classes keep their original
   rendering exactly while everything else shares one stylesheet. */
figure.source.inline { margin: 34px 0 34px; }
.article-body.dense li { margin-bottom: 10px; }

/* ---------- Light-theme card elevation ----------
   On white, card-like surfaces need a shadow to separate from the page;
   on the dark theme --card-shadow is `none`, so this is inert there.
   Listed once here instead of being repeated per page. */
.post-card, .post-thumb, .callout, .checklist, .rule, figure.source {
  box-shadow: var(--card-shadow);
}
body, header, .post-card, .post-thumb, .callout, .checklist, .rule, figure.source {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

@media (max-width: 760px) {
  .checklist { padding: 22px 20px; }
}

/* ---------- Animated guide card (Àncòra article) ----------
   Cover + two links to the narrated animations on bitcoin-after.life
   (?lang=it), laid out like the "Animated guide" card on that home page.
   Nothing else loads here: no iframe, no audio. */
.anim-card {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr);
  gap: 20px; align-items: center; margin: 24px 0 22px;
}
.anim-cover {
  position: relative; display: block; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--card-shadow);
}
.anim-cover img { display: block; width: 100%; height: auto; }
.anim-play {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-radius: 50%; background: var(--teal); color: var(--btn-text);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; padding-left: 4px; box-shadow: 0 6px 18px rgba(45, 212, 191, 0.35);
  transition: transform .15s;
}
.anim-cover:hover .anim-play { transform: scale(1.08); }
.anim-text .eyebrow { margin-bottom: 8px; }
.anim-text p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.5; color: var(--muted); }
.anim-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; max-width: 300px; }
.anim-actions .btn { padding: 10px 16px; font-size: 14px; justify-content: center; }
@media (max-width: 760px) { .anim-card { grid-template-columns: 1fr; gap: 16px; } }

/* ---------- Command-line chips (Àncòra article) ----------
   A row of example commands; each chip wraps on its own line on phones. */
.cli { display: flex; flex-wrap: wrap; gap: 8px; }
.cli code, .article-body p > code {
  font-family: 'Space Mono', monospace; font-size: 13.5px; color: var(--light);
  background: var(--tint-teal-bg); border: 1px solid var(--tint-teal-bd);
  border-radius: 8px; padding: 4px 10px; white-space: nowrap;
}
.article-body p > code { font-size: 0.85em; padding: 1px 7px; }
@media (max-width: 760px) { .cli code { white-space: normal; overflow-wrap: anywhere; min-width: 0; max-width: 100%; } }