/*
 * Tribute Blog — light editorial redesign.
 *
 * One stylesheet for every page on blog.tribute.co. The blog runs on its own
 * base template (blog_base.html) and never loads homepage.css or the product
 * app's main.css, so everything it needs is here.
 *
 * Direction: warm, light, readable. Newsreader (display cut) for headlines, Roboto Flex
 * (the v3 brand sans) for everything else, article prose included. Brand red
 * is reserved for calls to action and small accents; it is never a text color.
 * Buttons and nav items match v3's .nav-button / .nav-link in homepage.css.
 *
 * Sections, in page order:
 *   tokens · reset · nav · chips · index hero · post cards · archive ·
 *   post · body typography · CTA band · resources · recommended ·
 *   pagination · footer · errors
 */

:root {
  /* Palette. Pale pink page with dusty pink panels and plum display type;
     brand red stays for calls to action. --bg is the page, --bg-2 the
     panels and cards, --surface white for inputs and the footer. */
  --bg: #fbf4f6;
  --bg-2: #f1e8eb;
  --bg-3: #e9dde2;
  --surface: #ffffff;
  --ink: #221721;
  --ink-2: #4a3a44;
  --ink-3: #7a6a73;
  --ink-4: #a99ba3;
  --ink-display: #3d1a2c;
  --line: #ebdfe4;
  --line-2: #dccbd3;

  --brand: #c71f0d;
  --brand-hover: #a01808;
  --brand-soft: #f8e4e1;

  /* Inline prose links. A muted wine that sits between --ink-display and
     --brand: distinct from the body ink at a glance, calm enough to read a
     whole article through. 8.0:1 on --bg, 7.2:1 on --bg-2. */
  --link: #8a2540;
  --link-hover: var(--brand);

  /* Type */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans: "Roboto Flex", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-pixel: "Doto", "Roboto Flex", monospace;  /* eyebrows, "Most popular" (dot matrix) */

  /* v3 primary button (homepage.css .nav-button / .primary-btn) */
  --gradient-primary: linear-gradient(135deg, #c71f0d 0%, #d62916 100%);
  --gradient-primary-hover: linear-gradient(135deg, #a01808 0%, #c71f0d 100%);



  /* Rhythm */
  --measure: 42rem;        /* article prose column */
  --measure-wide: 60rem;   /* post header, featured image */
  --container: 87.5rem;    /* 1400px, the homepage's section content width */
  --gutter: 1.5rem;        /* the homepage's section side padding */
  --radius: 14px;
  --radius-lg: 20px;
  --nav-height: clamp(4.5rem, 7vw, 6rem);

  --shadow-card: 0 1px 2px rgba(28, 25, 23, 0.04), 0 8px 24px -12px rgba(28, 25, 23, 0.12);
  --shadow-card-hover: 0 2px 4px rgba(28, 25, 23, 0.05), 0 16px 32px -12px rgba(28, 25, 23, 0.18);
  --shadow-btn: 0 4px 14px -4px rgba(199, 31, 13, 0.45);

  --ease: 0.18s ease;
}

/* ------------------------------------------------------------- reset ---- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-height) + 1rem);
}

body.blog {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:where(body.blog img, body.blog svg) { display: block; max-width: 100%; }

:where(body.blog a) {
  color: inherit;
  text-decoration: none;
}

:where(body.blog h1, body.blog h2) { color: var(--ink-display); }

:where(body.blog h1, body.blog h2, body.blog h3, body.blog h4) {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 36;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

:where(body.blog p) { margin: 0; }

:where(body.blog ul, body.blog ol) { margin: 0; padding: 0; list-style: none; }

body.blog :focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

/* Dot-matrix label above headings (Doto 800). Sized up a step from a normal
   eyebrow because the dots need the room to resolve. */
.eyebrow {
  font-family: var(--font-pixel);
  font-size: 0.9375rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Buttons. Red is for the primary action only. Weight 500, like v3's .btn. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
  will-change: transform, box-shadow;
  transition: all 0.3s ease;
}

.btn--primary {
  background: var(--gradient-primary);
  color: #fff;
}
.btn--primary:hover {
  background: var(--gradient-primary-hover);
  color: #fff;
  transform: translateY(-2px);
}
.btn--primary:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(199, 31, 13, 0.55);
}

.btn--ghost {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-2);
}
.btn--ghost:hover { border-color: var(--ink-4); transform: translateY(-2px); }

.btn--lg { padding: 0.95rem 1.75rem; font-size: 1.0625rem; }

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

/* Fixed over the page. At the top it is transparent so the hero pattern shows
   through; a short way down it hides; past the threshold it slides back in on
   a blurred light background. Same choreography as the www nav (homepage.js). */
.blog-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
  transform: translateY(0);
  transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.blog-nav.hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
.blog-nav.scrolled {
  background: rgba(251, 244, 246, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Pages without a hero panel still need room under the fixed nav. */
.post, .blog-error { padding-top: calc(var(--nav-height) + clamp(2rem, 5vw, 3.5rem)); }

.blog-nav__inner {
  height: var(--nav-height);
  display: flex;
  align-items: center;
  gap: 2rem;
}

.blog-nav__brand {
  display: flex;
  align-items: stretch;
  gap: 0.875rem;
  margin-right: auto;
  height: 36px;
}

.blog-nav__logo { display: flex; align-items: center; }
.blog-nav__logo img { height: 36px; width: auto; }

/* The rule spans the full logo height; the wordmark sits on the logo's baseline. */
.blog-nav__wordmark {
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 36;
  font-weight: 700;
  font-size: 1.875rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  padding-left: 1rem;
  border-left: 1px solid rgba(34, 23, 33, 0.22);
  line-height: 1;
  padding-top: 0.15rem;
  /* Hidden while the bar sits over the hero; slides in with the scrolled bar. */
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.35s ease 0.1s, transform 0.35s ease 0.1s;
}
.blog-nav.scrolled .blog-nav__wordmark,
.blog-nav--open .blog-nav__wordmark { opacity: 1; transform: none; }

.blog-nav__links {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.blog-nav__actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Mirrors v3 .nav-link: Roboto Flex, 1rem, weight 500, lift on hover. */
.blog-nav__link,
.blog-nav__dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  transition: color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}
.blog-nav__link:hover,
.blog-nav__dropdown-toggle:hover {
  opacity: 0.8;
  transform: translateY(-2px);
}
.blog-nav__dropdown[open] > .blog-nav__dropdown-toggle { opacity: 0.8; }

.blog-nav__dropdown { position: relative; }
.blog-nav__dropdown-toggle::-webkit-details-marker { display: none; }
.blog-nav__dropdown-toggle::marker { content: ""; }
.blog-nav__dropdown-toggle svg { width: 12px; height: 12px; transition: transform var(--ease); }
.blog-nav__dropdown[open] > .blog-nav__dropdown-toggle svg { transform: rotate(180deg); }

/* Menus: the www dropdown (homepage.css .dropdown-menu) on a light ground. */
.blog-nav__menu {
  position: absolute;
  top: 100%;
  padding-top: 0;
  margin-top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  min-width: 15rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  box-shadow: 0 10px 40px rgba(61, 26, 44, 0.16);
  overflow: hidden;
}
.blog-nav__dropdown--categories .blog-nav__menu { min-width: 14rem; }
/* The wide Occasions panel hangs from its label's left edge rather than
   centering, so it cannot run off the right of a narrow desktop window. */
.blog-nav__dropdown--occasions .blog-nav__menu { left: 0; transform: none; }
.blog-nav__menu--mega { display: flex; min-width: 34rem; }

.menu-list {
  flex: 1;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.blog-nav__menu--mega .menu-list { border-right: 1px solid var(--line); }

.menu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  color: var(--ink);
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.menu-item:hover { background: var(--bg-2); transform: translateX(4px); }
.menu-item__text { font-size: 0.9375rem; }

.menu-item__icon {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.menu-item__icon img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 0.3s ease; }
.menu-item__icon .icon-hover { opacity: 0; }
.menu-item:hover .menu-item__icon { transform: scale(1.15); }
.menu-item:hover .menu-item__icon:not(.menu-item__icon--static) .icon-default { opacity: 0; }
.menu-item:hover .menu-item__icon .icon-hover { opacity: 1; }

/* Occasions: the www "Not ready yet?" aside, on the panel pink. */
.menu-aside {
  flex: 1;
  padding: 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--bg-2);
}
.menu-aside__title { font-size: 1.25rem; font-weight: 700; }
.menu-aside__body { font-size: 0.875rem; color: var(--ink-3); margin: 0.35rem 0 1rem; }
.menu-aside__image { width: 100%; max-width: 180px; border-radius: 0.5rem; margin-bottom: 1rem; }
.menu-aside__button { padding: 0.625rem 1.5rem; font-size: 0.875rem; }

.blog-nav__cta { margin-left: 0; }

/* Hamburger + mobile panel (hidden on wide screens). */
.blog-nav__toggle {
  display: none;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
}
.blog-nav__toggle svg { width: 2rem; height: 2rem; transition: transform 0.3s ease; }
.blog-nav__toggle-x { opacity: 0; transition: opacity 0.2s ease; }
.blog-nav__toggle-lines { transition: opacity 0.2s ease; }
.blog-nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.blog-nav__toggle[aria-expanded="true"] .blog-nav__toggle-lines { opacity: 0; }
.blog-nav__toggle[aria-expanded="true"] .blog-nav__toggle-x { opacity: 1; }

.blog-nav__mobile {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  padding: 1rem 0 3rem;
  background: rgba(251, 244, 246, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.blog-nav--open {
  background: rgba(251, 244, 246, 0.98);
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
html.blog-menu-open { overflow: hidden; }

.mobile-menu__heading {
  font-family: var(--font-pixel);
  font-size: 0.875rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 1.5rem 0 0.5rem;
}
.mobile-menu__list a {
  display: block;
  padding: 0.6rem 0;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.mobile-menu__list--two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.5rem;
}
.mobile-menu__list--primary { margin-top: 1.5rem; padding-top: 0.5rem; border-top: 1px solid var(--line-2); }
.mobile-menu__list--primary a { font-size: 1.25rem; font-weight: 600; border-bottom: 0; padding: 0.7rem 0; }
.mobile-menu__cta { margin-top: 1.5rem; width: 100%; }

@media (max-width: 1100px) {
  .blog-nav__links { gap: 1.25rem; }
  .blog-nav__actions { gap: 1rem; }
  .blog-nav__links .blog-nav__link { display: none; }        /* Work, Pricing live in the panel and footer */
  .blog-nav__menu--mega { min-width: 0; flex-direction: column; }
  .blog-nav__menu--mega .menu-list { border-right: 0; border-bottom: 1px solid var(--line); }
  .menu-aside { display: none; }
}
@media (max-width: 900px) {
  .blog-nav__links { display: none; }
  .blog-nav__toggle { display: inline-flex; align-items: center; justify-content: center; }
  .blog-nav__inner { gap: 0.75rem; }
  .blog-nav__actions { gap: 0.5rem; margin-left: auto; }
  .blog-nav__brand { height: 30px; margin-right: 0; }
  .blog-nav__logo img { height: 30px; }
  .blog-nav__wordmark { font-size: 1.5rem; }
  .blog-nav__cta { padding: 0.55rem 0.9rem; font-size: 0.9375rem; }
}
@media (max-width: 420px) {
  .blog-nav__wordmark { display: none; }
  .blog-nav__cta { padding: 0.5rem 0.75rem; font-size: 0.875rem; }
}

/* -------------------------------------------------------------- chips ---- */

.chips {
  display: flex;
  gap: 0.625rem;
  overflow-x: auto;
  padding-block: 0.25rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.chips::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto;
  padding: 0.8rem 1.35rem;
  border-radius: 0.5rem;
  border: 1px solid var(--line-2);
  background: var(--surface);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: background var(--ease), color var(--ease), border-color var(--ease), transform var(--ease);
}
.chip:hover { color: var(--ink); border-color: var(--line-2); transform: translateY(-1px); }
.chip[aria-current="page"] {
  background: var(--bg-3);
  border-color: var(--bg-3);
  color: var(--ink);
}

/* --------------------------------------------------------- index hero ---- */

.blog-hero {
  position: relative;
  padding: calc(var(--nav-height) + clamp(3rem, 6.75vw, 7rem)) 0 clamp(2rem, 4vw, 4.5rem);
  text-align: center;
}

/* Dot field. One element: the background is a soft wash of seven colours
   (mauve base with coral, violet, amber, sky, sage and plum pools), and the
   mask cuts it into a 5px grid of round dots that only show through a set of
   soft orbs and ellipses. Colour therefore varies smoothly across the field,
   and every dot sits on the same grid; interleaving separate colour grids
   made the orb edges read as steps and corners, because each colour dropped
   out of view at a different point along the fade. Every orb eases out
   through five stops so overlaps stay round. The first mask layer is the
   dot grid, the second a vertical fade, so the field dissolves before the
   layer's bottom edge between the panels. The orbs drift slowly; still for
   readers who prefer reduced motion. */
.blog-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 -26rem;
  z-index: -1;
  pointer-events: none;
  opacity: 0.72;
  background:
    radial-gradient(ellipse 40vw 30vw at 12% 62%, rgb(128, 74, 100) 0%, transparent 70%),
    radial-gradient(ellipse 30vw 24vw at 40% 78%, rgb(222, 118, 104) 0%, transparent 70%),
    radial-gradient(ellipse 34vw 26vw at 70% 58%, rgb(150, 128, 212) 0%, transparent 70%),
    radial-gradient(ellipse 28vw 22vw at 92% 82%, rgb(226, 160, 92) 0%, transparent 70%),
    radial-gradient(ellipse 26vw 20vw at 56% 36%, rgb(96, 150, 214) 0%, transparent 70%),
    radial-gradient(ellipse 24vw 20vw at 24% 30%, rgb(104, 170, 134) 0%, transparent 70%),
    radial-gradient(ellipse 30vw 18vw at 50% 100%, rgb(222, 118, 104) 0%, transparent 70%),
    rgb(190, 150, 168);
  -webkit-mask-image: var(--orbs);
  mask-image: var(--orbs);
  -webkit-mask-size: 5px 5px, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  mask-size: 5px 5px, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  mask-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  -webkit-mask-composite: source-in, source-in, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over;
  mask-composite: intersect, intersect, add, add, add, add, add, add, add, add, add, add, add, add, add, add, add, add, add, add, add;
  --orbs:
    radial-gradient(circle, #000 1px, transparent 1.7px),
    linear-gradient(#000 0%, #000 55%, transparent 92%),
    linear-gradient(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04)),
    radial-gradient(circle 24vw at 16% 70%, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.496) 30%, rgba(0, 0, 0, 0.24) 55%, rgba(0, 0, 0, 0.096) 75%, rgba(0, 0, 0, 0.024) 90%, transparent 100%),
    radial-gradient(circle 28vw at 72% 82%, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.434) 30%, rgba(0, 0, 0, 0.21) 55%, rgba(0, 0, 0, 0.084) 75%, rgba(0, 0, 0, 0.021) 90%, transparent 100%),
    radial-gradient(ellipse 14vw 22vw at 92% 48%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.372) 30%, rgba(0, 0, 0, 0.18) 55%, rgba(0, 0, 0, 0.072) 75%, rgba(0, 0, 0, 0.018) 90%, transparent 100%),
    radial-gradient(circle 12vw at 28% 36%, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.248) 30%, rgba(0, 0, 0, 0.12) 55%, rgba(0, 0, 0, 0.048) 75%, rgba(0, 0, 0, 0.012) 90%, transparent 100%),
    radial-gradient(ellipse 26vw 10vw at 44% 60%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.31) 30%, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0.06) 75%, rgba(0, 0, 0, 0.015) 90%, transparent 100%),
    radial-gradient(circle 8vw at 6% 46%, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.279) 30%, rgba(0, 0, 0, 0.135) 55%, rgba(0, 0, 0, 0.054) 75%, rgba(0, 0, 0, 0.013) 90%, transparent 100%),
    radial-gradient(ellipse 34vw 14vw at 50% 98%, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.403) 30%, rgba(0, 0, 0, 0.195) 55%, rgba(0, 0, 0, 0.078) 75%, rgba(0, 0, 0, 0.019) 90%, transparent 100%),
    radial-gradient(circle 10vw at 62% 40%, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.186) 30%, rgba(0, 0, 0, 0.09) 55%, rgba(0, 0, 0, 0.036) 75%, rgba(0, 0, 0, 0.009) 90%, transparent 100%),
    radial-gradient(ellipse 18vw 8vw at 84% 20%, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.155) 30%, rgba(0, 0, 0, 0.075) 55%, rgba(0, 0, 0, 0.03) 75%, rgba(0, 0, 0, 0.007) 90%, transparent 100%),
    radial-gradient(circle 18vw at 34% 80%, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.434) 30%, rgba(0, 0, 0, 0.21) 55%, rgba(0, 0, 0, 0.084) 75%, rgba(0, 0, 0, 0.021) 90%, transparent 100%),
    radial-gradient(ellipse 12vw 8vw at 82% 62%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.372) 30%, rgba(0, 0, 0, 0.18) 55%, rgba(0, 0, 0, 0.072) 75%, rgba(0, 0, 0, 0.018) 90%, transparent 100%),
    radial-gradient(circle 22vw at 60% 94%, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.341) 30%, rgba(0, 0, 0, 0.165) 55%, rgba(0, 0, 0, 0.066) 75%, rgba(0, 0, 0, 0.017) 90%, transparent 100%),
    radial-gradient(circle 10vw at 12% 90%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.372) 30%, rgba(0, 0, 0, 0.18) 55%, rgba(0, 0, 0, 0.072) 75%, rgba(0, 0, 0, 0.018) 90%, transparent 100%),
    radial-gradient(ellipse 16vw 7vw at 48% 44%, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.186) 30%, rgba(0, 0, 0, 0.09) 55%, rgba(0, 0, 0, 0.036) 75%, rgba(0, 0, 0, 0.009) 90%, transparent 100%),
    radial-gradient(circle 14vw at 96% 86%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.31) 30%, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0.06) 75%, rgba(0, 0, 0, 0.015) 90%, transparent 100%),
    radial-gradient(circle 9vw at 70% 52%, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.248) 30%, rgba(0, 0, 0, 0.12) 55%, rgba(0, 0, 0, 0.048) 75%, rgba(0, 0, 0, 0.012) 90%, transparent 100%),
    radial-gradient(ellipse 8vw 14vw at 22% 56%, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.248) 30%, rgba(0, 0, 0, 0.12) 55%, rgba(0, 0, 0, 0.048) 75%, rgba(0, 0, 0, 0.012) 90%, transparent 100%),
    radial-gradient(circle 8vw at 14% 26%, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.174) 30%, rgba(0, 0, 0, 0.084) 55%, rgba(0, 0, 0, 0.034) 75%, rgba(0, 0, 0, 0.008) 90%, transparent 100%);
  animation: orbs-drift 42s ease-in-out infinite alternate;
}
@keyframes orbs-drift {
  from { -webkit-mask-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; mask-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to   { -webkit-mask-position: 0 0, 0 0, 0 0, 28px -18px, -20px 26px, 22px 20px, -30px -10px, 12px 30px, -18px -28px, 30px 10px, 20px -22px, -24px 16px, -28px 18px, 20px -26px, -22px -20px, 30px 10px, -12px -30px, 18px 28px, -30px -10px, -20px 22px, 24px -16px;
         mask-position: 0 0, 0 0, 0 0, 28px -18px, -20px 26px, 22px 20px, -30px -10px, 12px 30px, -18px -28px, 30px 10px, 20px -22px, -24px 16px, -28px 18px, 20px -26px, -22px -20px, 30px 10px, -12px -30px, 18px 28px, -30px -10px, -20px 22px, 24px -16px; }
}
@media (prefers-reduced-motion: reduce) { .blog-hero::before { animation: none; } }

.blog-hero__inner {
  max-width: 52rem;
  margin-inline: auto;
}

.blog-hero h1 {
  font-size: clamp(2.75rem, 7.1vw, 7.1rem);
  font-weight: 800;
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.blog-hero__lede {
  margin: clamp(1rem, 2.2vw, 2.25rem) auto 0;
  max-width: 44rem;
  font-family: var(--font-sans);
  font-size: clamp(1.0625rem, 1.4vw, 1.5rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
}
.blog-hero__lede p { margin: 0; }

/* Home: the category chips sit under the "Latest" heading on the dark band. */
.categories { margin-top: clamp(1.25rem, 2.5vw, 2rem); text-align: center; }
.categories .chips {
  flex-wrap: wrap;
  justify-content: center;
  overflow: visible;
}
@media (max-width: 760px) {
  .categories .chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; }
}
.dark-band .chip {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
  font-weight: 600;
}
.dark-band .chip:hover { border-color: rgba(255, 255, 255, 0.6); }
.dark-band .chip[aria-current="page"] {
  background: #ffffff;
  border-color: #ffffff;
  color: #2b1a21;
}

/* "More": the long tail of categories in a small menu. */
.chips__more { position: relative; flex: 0 0 auto; }
.chips__more-toggle { display: inline-flex; align-items: center; gap: 0.4rem; list-style: none; cursor: pointer; }
.chips__more-toggle::-webkit-details-marker { display: none; }
.chips__more-toggle::marker { content: ""; }
.chips__more-toggle svg { width: 12px; height: 12px; }
.chips__more[open] .chips__more-toggle svg { transform: rotate(180deg); }
.chips__menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 13rem;
  padding: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  box-shadow: 0 10px 40px rgba(61, 26, 44, 0.16);
}
.chips__menu .chip { border-color: transparent; color: var(--ink-2); text-align: left; }
.chips__menu .chip:hover { background: var(--bg-2); color: var(--ink); transform: none; }
.chips__menu .chip[aria-current="page"] { background: var(--bg-3); border-color: var(--bg-3); color: var(--ink); }
@media (max-width: 760px) {
  .chips__menu { left: auto; right: 0; transform: none; }
}

/* ------------------------------------------------- latest + popular ---- */

.spotlight {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 1.6vw, 1.75rem);
  margin-top: 0;
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
@media (max-width: 900px) { .spotlight { grid-template-columns: 1fr; } }

.panel {
  background: var(--bg-2);
  border-radius: 8px;
  padding: clamp(1rem, 1.6vw, 1.75rem);
}

.lead { display: flex; flex-direction: column; gap: 0.75rem; }
.lead .card__media { margin-bottom: clamp(1rem, 1.8vw, 2rem); }
.lead .card__media { aspect-ratio: 16 / 9; border-radius: 6px; box-shadow: none; }
.lead__title {
  font-size: clamp(1.875rem, 3.1vw, 3.25rem);
  font-weight: 800;
  font-variation-settings: "opsz" 72;
  line-height: 1.22;
}
.lead__intro {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lead__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.popular { display: flex; flex-direction: column; }

.popular__heading {
  font-family: var(--font-pixel);
  font-size: clamp(0.9rem, 1.45vw, 1.5rem);
  font-weight: 900;  /* Doto's heaviest; the stroke below fattens each dot past it */
  -webkit-text-stroke: 0.5px currentColor;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7d4d61;
  margin: 0.25rem 0 1.5rem;
}
.popular__list { display: flex; flex-direction: column; }
.popular__item {
  display: grid;
  grid-template-columns: 37% 1fr;
  gap: clamp(1rem, 1.6vw, 1.75rem);
  align-items: center;
  padding: clamp(0.75rem, 1.2vw, 1.25rem) 0;
}
.popular__item:first-child { padding-top: 0.25rem; }
.popular__item:last-child { padding-bottom: 0; }
.popular__item .card__media { aspect-ratio: 16 / 10; border-radius: 6px; box-shadow: none; }
.popular__title {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 36;
  font-size: clamp(1.125rem, 1.65vw, 1.625rem);
  font-weight: 800;
  line-height: 1.34;
  letter-spacing: -0.01em;
}
.popular__meta { margin-top: 0.6rem; font-size: clamp(0.8125rem, 1vw, 1.0625rem); color: var(--ink-3); }
@media (max-width: 480px) { .popular__item { grid-template-columns: 7rem 1fr; gap: 0.875rem; } }

/* --------------------------------------------------------- post cards ---- */

.post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem 2rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

@media (max-width: 960px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .post-grid { grid-template-columns: 1fr; gap: 2.25rem; } }

/* Every card fills its grid cell, so a row's tiles share one height and the
   date row (margin-top: auto) sits on a common baseline. */
.post-grid > li { display: flex; }
.card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
}

.card__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 3 / 2;
  background: var(--bg-2);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--ease), transform var(--ease);
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.card:hover .card__media { box-shadow: var(--shadow-card-hover); }
.card:hover .card__media img { transform: scale(1.03); }

/* No featured image: a dark plum tile with the same soft coral and amber
   pools as the dark bands, and a landscape glyph in pale rose. */
.card__media--empty {
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse 70% 60% at 20% 20%, rgba(255, 138, 120, 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 85% 80%, rgba(251, 191, 36, 0.18) 0%, transparent 60%),
    #3d1a2c;
}
.card__media--empty svg { width: 34px; height: 34px; color: rgba(251, 244, 246, 0.72); }

.card__pill {
  display: inline-block;
  font-family: var(--font-pixel);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand);
  opacity: 0.85;
}

.card__title {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.26;
}
/* Title links underline with a 2px border on hover: an inline border paints
   under every wrapped line, and reads a touch heavier than text-decoration. */
.card__title a,
.lead__title a,
.popular__title a,
.row-card__title a {
  border-bottom: 2px solid transparent;
  transition: border-color var(--ease);
}
.card:hover .card__title a,
.lead__title a:hover,
.popular__title a:hover,
.row-card:hover .row-card__title a { border-color: currentColor; }

.card__intro {
  margin-top: 0.25rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__meta {
  font-size: 0.8125rem;
  color: var(--ink-4);
  display: flex;
  gap: 0.4rem;
  align-items: center;
  margin-top: auto;
}
.card__meta .dot { color: var(--ink-4); }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
.section-head { margin-bottom: 1.75rem; }
.section-head h2 { font-size: 1.75rem; }
.section-head a { font-size: 0.9375rem; font-weight: 500; color: var(--ink-2); }
.section-head a:hover { color: var(--ink); text-decoration: underline; }

/* ------------------------------------------------------------ archive ---- */

.archive-head {
  padding: calc(var(--nav-height) + clamp(1.5rem, 3vw, 2.5rem)) 0 clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
}
.archive-head__title {
  margin-top: 1.5rem;
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  font-weight: 800;
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.025em;
  line-height: 1.12;
}
.archive-head__slash { font-weight: 400; color: var(--ink-4); }
.archive-head__desc {
  margin-top: 1rem;
  max-width: 30rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-2);
}

.archive-section { padding-top: clamp(2.5rem, 5vw, 4rem); }
.archive-section__title {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 800;
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}
.archive-section .post-grid { margin-top: 0; }

/* "All": list rows with a hairline between them. */
.post-rows { display: flex; flex-direction: column; }
.post-rows > li { padding: 1.75rem 0; border-top: 1px solid var(--line); }
.post-rows > li:first-child { padding-top: 0.25rem; border-top: 0; }

.row-card {
  display: grid;
  grid-template-columns: minmax(10rem, 27%) minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2.5rem);
  align-items: center;
}
.row-card__media {
  display: block;
  aspect-ratio: 3 / 2;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-2);
}
.row-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.row-card:hover .row-card__media img { transform: scale(1.03); }
.row-card__body { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.row-card__title { font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.34; }
.row-card__intro {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 600px) {
  .row-card { grid-template-columns: 1fr; }
}

.post-list-section { padding-bottom: 1rem; }

/* Dark plum bands (the home grid, the CTA, the sidebar card). The color
   tokens are redeclared inside, so cards, buttons and type restyle themselves
   without per-element overrides. */
.dark-band {
  --ink: #ffffff;
  --ink-2: #e8d9df;
  --ink-3: #c2adb7;
  --ink-4: #8f7883;
  --ink-display: #ffffff;
  --bg: #2b1a21;
  --bg-2: #3a272f;
  --bg-3: #4a333c;
  --surface: #3a272f;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.18);
  --brand: #ff8a78;
  --brand-soft: rgba(255, 138, 120, 0.14);
  color: var(--ink);
  background: var(--bg);
}

.post-list-section--dark { padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(3rem, 6vw, 4.5rem); }
.post-list-section--dark .post-grid { margin-top: clamp(1.5rem, 3vw, 2.5rem); gap: clamp(1rem, 1.6vw, 1.75rem); }
.post-list-section--dark .card {
  background: var(--bg-2);
  border-radius: 8px;
  padding: clamp(0.875rem, 1.6vw, 1.5rem);
}
.post-list-section--dark .card__media { box-shadow: none; border-radius: 6px; }
.post-list-section--dark .card__title { color: var(--ink); }
.post-list-section--dark .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.post-list-section--dark .btn--ghost:hover { border-color: var(--ink-3); }

/* Swapping the grid: the old cards sink and fade, the new ones rise in with
   a short stagger (--i set per card by the script). */
.latest-grid {
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.latest-grid--leaving {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}
.latest-grid--entering .post-grid > li {
  animation: latest-card-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes latest-card-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.latest-more__all { display: flex; justify-content: center; margin-top: 2.5rem; }
.latest-more__all .btn svg { width: 16px; height: 16px; }

.latest-grid--first .post-grid { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.latest-grid--rest .post-grid { margin-top: 0; gap: clamp(1rem, 1.6vw, 1.75rem); }

/* The light half: condensed white tiles in two columns, photo left and
   text right, so posts seven onward read as a list rather than more of
   the same grid. */
.latest-grid--rest .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.latest-grid--rest .card {
  display: grid;
  /* Column 1 is the photo; the text stack sits in explicit rows between two
     flexible spacer rows, so it centers on the photo whatever its height. */
  grid-template-columns: minmax(8rem, 38%) minmax(0, 1fr);
  grid-template-rows: 1fr auto auto auto auto 1fr;
  column-gap: clamp(1rem, 2vw, 1.5rem);
  row-gap: 0;
  background: var(--surface);
  border-radius: 8px;
  padding: clamp(0.75rem, 1.2vw, 1rem);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--ease), transform var(--ease);
}
.latest-grid--rest .card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.latest-grid--rest .card__media {
  grid-column: 1;
  grid-row: 1 / -1;
  /* Width has to be explicit: a stretched item with an aspect ratio takes its
     height from the row and then sizes its width from that ratio, so a tall
     card pushed the photo over the text column. The ratio stays as the floor
     for a card too short to stretch. */
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  box-shadow: none;
  align-self: stretch;
}
.latest-grid--rest .card:hover .card__media { box-shadow: none; }
.latest-grid--rest .card__pill { grid-column: 2; grid-row: 2; margin-bottom: 0.35rem; }
.latest-grid--rest .card__title { grid-column: 2; grid-row: 3; font-size: 1.25rem; line-height: 1.28; }
.latest-grid--rest .card__intro {
  display: -webkit-box;
  grid-column: 2;
  grid-row: 4;
  margin-top: 0.4rem;
  font-size: 0.875rem;
  -webkit-line-clamp: 2;
}
.latest-grid--rest .card__meta { grid-column: 2; grid-row: 5; margin-top: 0.6rem; }
@media (max-width: 900px) { .latest-grid--rest .post-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .latest-grid--rest .card { grid-template-columns: 7rem minmax(0, 1fr); }
  .latest-grid--rest .card__title { font-size: 1.125rem; }
}

/* Posts seven onward, on the light ground after the newsletter break. */
.latest-more { padding-bottom: 1rem; }
.latest-more__title {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 800;
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}
.latest-more .post-grid { margin-top: 0; }
.latest-more--empty { display: none; }
.latest-more:has(.post-grid:empty) { display: none; }
@media (prefers-reduced-motion: reduce) {
  .latest-grid { transition: none; }
  .latest-grid--entering .post-grid > li { animation: none; }
}

.section-title {
  text-align: center;
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 800;
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.02em;
}

.empty-state {
  padding: 4rem 0;
  text-align: center;
  color: var(--ink-3);
  font-size: 1.25rem;
}

/* --------------------------------------------------------------- post ---- */

.post__crumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--ink-3);
  min-width: 0;
}
.post__crumbs a { flex-shrink: 0; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.post__crumbs a:hover { color: var(--ink); }
.post__crumbs-category { flex-shrink: 1; min-width: 2.5rem; overflow: hidden; text-overflow: ellipsis; }
.post__crumbs-current { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Header: text left, featured image right, as Descript's. */
.post__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 40%);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 900px) {
  .post__header { grid-template-columns: 1fr; }
  .post__featured { order: -1; }
}

/* Doto tops out at 900, so the date gets its extra weight from a hairline
   stroke that fattens every dot, plus a step in size. */
.post__eyebrow {
  color: var(--brand);
  font-size: 1.0625rem;
  -webkit-text-stroke: 0.45px currentColor;
}

.post__title {
  margin-top: 0.75rem;
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 800;
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.025em;
  line-height: 1.16;
}

.post__deck {
  margin-top: 1rem;
  max-width: 38rem;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--ink-2);
}

.post__meta {
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: var(--ink-3);
}
.post__meta .dot { color: var(--ink-4); }
/* Category chips | share buttons, one row, everything one fixed height. */
.post__meta-row {
  --row-h: 2.5rem;
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.post__meta-top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.post__badge {
  display: inline-flex;
  align-items: center;
  height: var(--row-h);
  padding: 0 0.9rem;
  font-size: 0.875rem;
  line-height: 1;
}
.post__meta-divider { width: 1px; height: var(--row-h); background: var(--line-2); margin: 0 0.25rem; }
/* Beats .share's own top margin, which is declared later in the file. */
.post__meta-row .share--compact { margin-top: 0; }
.share--compact .share__button { width: var(--row-h); height: var(--row-h); }

.post__featured {
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-2);
}
.post__featured img { width: 100%; height: auto; display: block; }

/* Body: sticky sidebar (contents + CTA) beside the prose column. */
.post__layout {
  display: grid;
  grid-template-columns: minmax(14rem, 27%) minmax(0, 1fr);
  gap: 0;
  align-items: start;
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
}
.post__main {
  padding-left: clamp(1.5rem, 2.5vw, 3rem);
  border-left: 1px solid var(--line-2);
}
.post__aside-sticky { padding-right: clamp(1.5rem, 2.5vw, 3rem); }
/* Sticky column that never exceeds the viewport. The contents list is the
   only part allowed to shrink, so it scrolls internally when the article has
   more headings than fit, and the CTA card keeps its place beneath it: right
   under a short list, pinned to the bottom under a long one. */
.post__aside-sticky {
  position: sticky;
  top: calc(var(--nav-height) + 1rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-height: calc(100vh - var(--nav-height) - 2rem);
}
.post__main { min-width: 0; }
@media (max-width: 1000px) {
  .post__layout { grid-template-columns: 1fr; }
  .post__main { padding-left: 0; border-left: 0; }
  .post__aside { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
  .post__aside-sticky { position: static; max-height: none; padding-right: 0; }
  .side-cta { display: none; }   /* the full CTA band follows the article */
}

.post__body {
  max-width: 54rem;
  margin: 0;
}

.post__aside { min-width: 0; align-self: stretch; }   /* full height, so the sticky child has room to travel */
.post__header-text { min-width: 0; }
.toc {
  flex: 0 1 auto;
  min-height: 7rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
  padding: 0.75rem 0.5rem 0.25rem 0;
}
/* Fades at whichever end has more list beyond it (classes set by script). */
.toc--fade-bottom {
  -webkit-mask-image: linear-gradient(#000 calc(100% - 3.5rem), transparent);
  mask-image: linear-gradient(#000 calc(100% - 3.5rem), transparent);
}
.toc--fade-top {
  -webkit-mask-image: linear-gradient(transparent, #000 2.5rem);
  mask-image: linear-gradient(transparent, #000 2.5rem);
}
.toc--fade-top.toc--fade-bottom {
  -webkit-mask-image: linear-gradient(transparent, #000 2.5rem, #000 calc(100% - 3.5rem), transparent);
  mask-image: linear-gradient(transparent, #000 2.5rem, #000 calc(100% - 3.5rem), transparent);
}
@media (prefers-reduced-motion: reduce) { .toc { scroll-behavior: auto; } }
.toc__item { list-style: none; }

.toc__heading {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.625rem;
}
.toc__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: default;
}
.toc__toggle svg { display: none; width: 12px; height: 12px; transition: transform var(--ease); }
@media (max-width: 1000px) {
  .toc__toggle { cursor: pointer; }
  .toc__toggle svg { display: block; }
  .toc--collapsed .toc__toggle svg { transform: rotate(-90deg); }
  .toc--collapsed .toc__list { display: none; }
  .toc { min-height: 0; padding-top: 0; }
  .toc__heading { margin-bottom: 0; }
  .toc:not(.toc--collapsed) .toc__heading { margin-bottom: 0.625rem; }
}
.toc__list { display: flex; flex-direction: column; gap: 0.25rem; }
.toc__link {
  display: block;
  padding: 0.35rem 0.5rem 0.35rem 0.625rem;
  margin-left: -0.625rem;
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  font-size: 1.0625rem;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink-2);
  opacity: 0.55;
  transition: color var(--ease), opacity var(--ease), background var(--ease),
              border-color var(--ease), padding-left var(--ease);
}
.toc__link:hover { color: var(--ink); opacity: 1; background: var(--bg-2); }
/* Nudged in from the rail, so where you are reads at a glance rather than
   resting on weight alone. */
.toc__link--active {
  color: var(--ink);
  opacity: 1;
  border-left-color: var(--brand);
  font-weight: 700;
  padding-left: 0.875rem;
}

/* Sidebar CTA: the CTA band, as a card. Dark tokens come from .dark-band. */
.side-cta {
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
  padding: 1.25rem 1.25rem 1.125rem;
  border-radius: 12px;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 80% 60% at 10% 0%, rgba(199, 31, 13, 0.3) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 100% 100%, rgba(253, 230, 138, 0.14) 0%, transparent 60%),
    linear-gradient(170deg, #2b1a21 0%, #33202a 60%, #2b1a21 100%);
}
.side-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0.9px, transparent 1.55px);
  background-size: 5px 5px;
  -webkit-mask-image: var(--orbs);
  mask-image: var(--orbs);
  --orbs:
    linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)),
    radial-gradient(circle 9rem at 90% 90%, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.2) 60%, transparent 100%),
    radial-gradient(circle 5rem at 15% 65%, rgba(0, 0, 0, 0.5) 0%, transparent 100%),
    radial-gradient(circle 4rem at 70% 25%, rgba(0, 0, 0, 0.4) 0%, transparent 100%),
    radial-gradient(circle 3rem at 40% 45%, rgba(0, 0, 0, 0.3) 0%, transparent 100%);
  opacity: 0.6;
}
.side-cta > * { position: relative; }
.side-cta__title {
  font-size: 1.5rem;
  font-weight: 800;
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.02em;
  line-height: 1.16;
}
.side-cta__body { margin-top: 0.5rem; font-size: 0.9375rem; line-height: 1.45; color: var(--ink-2); }
.side-cta__button { margin-top: 0.875rem; width: 100%; padding-block: 0.625rem; }
.side-cta__offer { margin-top: 0.5rem; font-size: 0.8125rem; color: var(--ink-3); text-align: center; }
.side-cta__offer strong { color: var(--brand); font-weight: 600; }

/* Share row: header and end of article. */
.share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-top: 1.5rem;
}
.share__label {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 36;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--ink-display);
}
.share__buttons { display: flex; gap: 0.5rem; }
.share__button {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 0.5rem;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  font: inherit;
  transition: border-color var(--ease), transform var(--ease), background var(--ease);
}
.share__button svg { width: 18px; height: 18px; }
.share__button:hover { border-color: var(--ink-4); transform: translateY(-2px); }
.share__copy { -webkit-appearance: none; appearance: none; }
.share__copy--done { border-color: var(--brand); color: var(--brand); }

.share__tip {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translate(-50%, 4px);
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ease), transform var(--ease);
}
.share__tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: var(--ink);
}
.share__copy--done .share__tip { opacity: 1; transform: translate(-50%, 0); }

.post__share-end {
  max-width: 54rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.post__share-end .share { margin-top: 0; }

.post__tags {
  max-width: var(--measure);
  margin: 2.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--ink-3);
}
.post__tags a {
  padding: 0.3rem 0.7rem;
  border-radius: 0.5rem;
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  font-weight: 500;
}
.post__tags a:hover { background: var(--surface); color: var(--ink); }

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

.prose {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--ink);
}

.prose > * + * { margin-top: 1.4em; }

.prose p { margin: 0; }
.prose p + p { margin-top: 1.4em; }

.prose h2,
.prose h3,
.prose h4 {
  font-family: var(--font-display);
  color: var(--ink);
  margin-top: 2.2em;
  margin-bottom: 0.6em;
  text-wrap: pretty;
}
.prose h2 { font-size: 1.875rem; line-height: 1.22; }
.prose h3 { font-size: 1.4375rem; line-height: 1.28; }
.prose h4 { font-size: 1.125rem; font-family: var(--font-sans); font-weight: 600; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }

/* Inline links: wine with a matching underline, so they still read as links
   with color removed; brand red on hover. */
.prose a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--ease);
}
.prose a:hover { color: var(--link-hover); }

.prose strong, .prose b { font-weight: 700; }
.prose em, .prose i { font-style: italic; }

.prose ul, .prose ol {
  padding-left: 1.4em;
  margin-top: 1.2em;
}
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-top: 0.45em; padding-left: 0.2em; }
.prose li::marker { color: var(--ink-3); }

.prose blockquote {
  margin: 2em 0;
  padding: 0.25em 0 0.25em 1.4em;
  border-left: 3px solid var(--brand);
  font-size: 1.3125rem;
  line-height: 1.5;
  color: var(--ink-2);
  font-style: italic;
}
.prose blockquote p { margin: 0; }

.prose hr {
  border: 0;
  height: 1px;
  background: var(--line);
  margin: 2.5em 0;
}

.prose img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.prose figure,
.prose .image-with-caption-block {
  margin: 2.25em 0;
}
.prose figure figure { margin: 0; }
.prose figcaption {
  margin-top: 0.75em;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-3);
  text-align: center;
}

/* Embedded video. Wagtail wraps responsive embeds in .responsive-object with
   an inline padding-bottom; YouTube oEmbed arrives here as a bare 200×150
   iframe, so size any iframe to the column at 16:9. */
.prose .responsive-object {
  position: relative;
  height: 0;
  overflow: hidden;
  border-radius: var(--radius);
}
.prose .responsive-object iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.prose iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: var(--radius);
  background: var(--ink);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.4;
}
.prose th, .prose td {
  text-align: left;
  padding: 0.6em 0.75em;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.prose th { font-weight: 600; color: var(--ink-2); }

.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875em;
  background: var(--bg-2);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

/* WordPress-era raw HTML blocks arrive with theme classes we do not ship;
   neutralise the common ones so they read like the rest of the article. */
.prose .wp-block-image, .prose .wp-caption { max-width: 100%; margin: 2.25em 0; }
.prose .wp-caption-text { font-family: var(--font-sans); font-size: 0.875rem; color: var(--ink-3); text-align: center; margin-top: 0.75em; }
.prose .alignleft, .prose .alignright, .prose .aligncenter { float: none; margin-inline: auto; }
.prose .wp-block-buttons a, .prose .wp-block-button__link {
  display: inline-block;
  text-decoration: none;
  background: var(--ink);
  color: #fff;
  padding: 0.7em 1.2em;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
}

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

.cta-band {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding: clamp(2.5rem, 5.5vw, 4.5rem) 0;
  position: relative;
  overflow: hidden;
  background-color: var(--bg);
  /* The soft glow survives the dark ground: the same three orbs, brighter. */
  /* The blue and amber orbs are centered past the edges and much larger, so
     only their soft falloff reaches the band and there is no visible rim. */
  background-image:
    radial-gradient(ellipse 60% 70% at 12% 20%, rgba(199, 31, 13, 0.26) 0%, transparent 60%),
    radial-gradient(ellipse 90% 110% at 105% 110%, rgba(253, 230, 138, 0.14) 0%, transparent 65%),
    radial-gradient(ellipse 85% 120% at 55% -25%, rgba(147, 197, 253, 0.12) 0%, transparent 65%),
    linear-gradient(170deg, #2b1a21 0%, #33202a 55%, #2b1a21 100%);
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0.9px, transparent 1.55px);
  background-size: 5px 5px;
  -webkit-mask-image: var(--orbs);
  mask-image: var(--orbs);
  --orbs:
    linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)),
    radial-gradient(circle 24vw at 82% 45%, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.2) 60%, transparent 100%),
    radial-gradient(circle 12vw at 62% 20%, rgba(0, 0, 0, 0.55) 0%, transparent 100%),
    radial-gradient(circle 16vw at 92% 88%, rgba(0, 0, 0, 0.6) 0%, transparent 100%),
    radial-gradient(circle 9vw at 48% 80%, rgba(0, 0, 0, 0.4) 0%, transparent 100%),
    radial-gradient(circle 7vw at 20% 30%, rgba(0, 0, 0, 0.3) 0%, transparent 100%),
    radial-gradient(circle 11vw at 35% 95%, rgba(0, 0, 0, 0.35) 0%, transparent 100%);
  opacity: 0.6;
}
.cta-band__inner { position: relative; }

.cta-band__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.cta-band__title {
  margin-top: 1rem;
  font-size: clamp(2rem, 4.6vw, 3.25rem);
  font-weight: 800;
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.028em;
  line-height: 1.12;
  max-width: 16ch;
}

.cta-band__body {
  margin-top: 1.25rem;
  max-width: 34rem;
  font-family: var(--font-sans);
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.cta-band__action {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.cta-band__offer {
  font-size: 0.9375rem;
  color: var(--ink-2);
  font-weight: 500;
}
.cta-band__offer strong { color: var(--brand); font-weight: 600; }
.cta-band .eyebrow { color: var(--ink-3); }

.cta-band__figure {
  position: relative;
  margin: 0;
  justify-self: center;
  width: min(100%, 30rem);
}
.cta-band__figure .book-frame { filter: drop-shadow(0 28px 44px rgba(0, 0, 0, 0.5)); }

@media (max-width: 820px) {
  .cta-band__inner { grid-template-columns: 1fr; }
  .cta-band__figure { order: -1; width: min(100%, 20rem); }
}

/* ---------------------------------------------------------- resources ---- */

.resources { padding: clamp(2rem, 4vw, 3rem) 0 0; }

.resources__head {
  text-align: center;
  max-width: 36rem;
  margin-inline: auto;
}
.resources__head h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.25rem);
  font-weight: 800;
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.02em;
}
.resources__lede {
  margin-top: 0.875rem;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--ink-3);
}

.resources__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}
.resources__grid > li { display: flex; }
@media (max-width: 900px) { .resources__grid { grid-template-columns: 1fr; max-width: 32rem; margin-inline: auto; } }

.resource {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--bg-2);
  border: 1px solid transparent;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.resource:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.resource__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-3);
}
.resource__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.resource:hover .resource__media img { transform: scale(1.03); }

/* Image wells share one field: the panel's deeper pink with a soft white
   highlight, so the three tiles read as a set on the pink page. */
.resource__media--clipper,
.resource__media--work,
.resource__media--pricing {
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse 70% 70% at 25% 20%, rgba(255, 255, 255, 0.55) 0%, transparent 60%),
    linear-gradient(160deg, #eddfe5 0%, #e2d0d9 100%);
}

/* Clipper: the trim-bar illustration. */
.resource__art { width: 100%; height: 100%; }

/* Work: customer logos on white tiles in a tight, centered cluster. Tiles
   size to their logo (height in em, width follows), so nothing floats
   off-center inside its box; the em scales with the card via a container
   query. */
.resource__media--work { container-type: inline-size; }
.logo-cluster {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.55em 0.6em;
  width: 82%;
  font-size: clamp(10px, 4.2cqw, 18px);
}
.logo-tile {
  display: inline-grid;
  place-items: center;
  padding: 0.55em 0.85em;
  background: #fff;
  border-radius: 0.6em;
  box-shadow: 0 0.5em 1.2em -0.5em rgba(61, 26, 44, 0.3), 0 1px 2px rgba(61, 26, 44, 0.08);
  transition: transform 0.4s ease;
}
.logo-tile img { display: block; width: auto; height: 2.1em; }
.logo-tile--lego { padding: 0.45em; }
.logo-tile--lego img { height: 3.1em; }
.logo-tile--kaiser img { height: 2.3em; }
.logo-tile--godaddy img { height: 1.7em; }
.logo-tile--cleveland img { height: 2em; }
.logo-tile--shopify { transform: rotate(-4deg); }
.logo-tile--lego { transform: rotate(5deg); }
.logo-tile--kaiser { transform: rotate(3deg); }
.logo-tile--godaddy { transform: rotate(-3deg); }
.logo-tile--cleveland { transform: rotate(2deg); }
.resource:hover .logo-tile { transform: rotate(0) translateY(-2px); }

/* Pricing: the pricing page's three packages as fanned dark tiles (the logo
   tiles next door are white), sized by the card via a container query. */
.resource__media--pricing { container-type: inline-size; position: relative; }
.price-tiles {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: clamp(8px, 3.6cqw, 15px);
}
.price-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.14em;
  width: 9.4em;
  padding: 1em 1em 1.1em;
  border-radius: 0.7em;
  background: #2b1a21;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 0.8em 1.6em -0.5em rgba(43, 26, 33, 0.5), 0 1px 2px rgba(43, 26, 33, 0.2);
  transition: transform 0.4s ease;
}
.price-tile__name {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 36;
  font-weight: 700;
  font-size: 1em;
  line-height: 1.15;
}
.price-tile__price {
  font-family: var(--font-pixel);
  font-weight: 900;
  font-size: 1.7em;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #ff8a78;
  margin: 0.15em 0 0.3em;
}
.price-tile__note { font-size: 0.68em; line-height: 1.35; color: #c2adb7; white-space: nowrap; }
.price-tile__badge {
  align-self: flex-start;
  font-family: var(--font-pixel);
  font-weight: 900;
  font-size: 0.55em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--brand);
  padding: 0.3em 0.6em;
  border-radius: 999px;
  margin-bottom: 0.3em;
}
/* Fanned: the outer tiles tuck under the raised middle one. */
.price-tile--diy { transform: rotate(-7deg) translateY(0.6em); margin-right: -1.4em; z-index: 1; }
.price-tile--deluxe { transform: rotate(1deg) scale(1.06) translateY(-0.4em); z-index: 3; background: #3a272f; }
.price-tile--concierge { transform: rotate(6deg) translateY(0.8em); margin-left: -1.4em; z-index: 2; }
.resource:hover .price-tile--diy { transform: rotate(-9deg) translateY(0.3em); }
.resource:hover .price-tile--deluxe { transform: rotate(0) scale(1.1) translateY(-0.7em); }
.resource:hover .price-tile--concierge { transform: rotate(8deg) translateY(0.5em); }

/* The Video Book with a looping clip behind its transparent screen, as on
   the homepage. The clip is centered on the screen opening (measured from
   the cut-out's alpha: center 73% / 25%, about 35% wide) and oversized a
   little so its edges stay hidden behind the book. The shadow is on the
   frame, not the image, so nothing bleeds into the screen. */
.book-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1218 / 914;
  filter: drop-shadow(0 16px 24px rgba(28, 25, 23, 0.18));
  transition: transform 0.5s ease;
}
.book-frame__book {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.book-frame__screen {
  position: absolute;
  z-index: 0;
  left: 73.4%;
  top: 25%;
  width: 40%;
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%) rotate(-4deg);
  object-fit: cover;
  background: #111;
}
@media (prefers-reduced-motion: reduce) {
  .book-frame__screen { display: none; }
}

.resource__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem 1.5rem 1.5rem;
  text-align: center;
  flex: 1;
}

.resource__title {
  font-size: 1.375rem;
  font-weight: 600;
}

.resource__desc {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-3);
}

.resource__more {
  margin-top: auto;
  padding-top: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--brand);
}
.resource__more svg { width: 18px; height: 18px; transition: transform var(--ease); }
.resource:hover .resource__more svg { transform: translateX(3px); }

/* -------------------------------------------------------- recommended ---- */

.recommended { padding: clamp(3rem, 7vw, 5rem) 0 0; }
.recommended .post-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 1.5rem; gap: 2rem 1.5rem; }
.recommended .card__title { font-size: 1.125rem; line-height: 1.36; }
@media (max-width: 960px) { .recommended .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .recommended .post-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------- pagination ---- */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 3.5rem;
}
.pagination__status {
  font-size: 0.875rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.pagination .btn svg { width: 16px; height: 16px; }

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

/* The www footer (static/v3/includes/footer.css) on a white ground. Same
   rhythm and breakpoints; the white-on-dark colors become ink-on-white. */
.footer {
  background: var(--surface);
  color: var(--ink);
  padding: 3rem 0 2rem;
  border-top: 1px solid var(--line);
}

.footer-content {
  max-width: 2400px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.footer-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.footer-column-header {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 1rem 0;
}

.footer-column-no-header ul { margin-top: 2rem; }

.footer-column ul li { margin-bottom: 0.5rem; }

.footer-column ul li a {
  color: var(--ink-3);
  font-size: 0.9375rem;
  transition: color 0.3s ease;
}
.footer-column ul li a:hover { color: var(--ink); }

.footer-seo-text {
  padding: 1.5rem 0;
  border-top: 1px solid var(--line);
  margin-bottom: 0.5rem;
}
.footer-seo-text p {
  color: var(--ink-4);
  font-size: 0.75rem;
  line-height: 1.6;
}

.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.footer-copyright {
  color: var(--ink-3);
  font-size: 0.875rem;
  text-align: center;
}

.footer-legal { display: flex; gap: 1.5rem; }
.footer-legal a {
  color: var(--ink-3);
  font-size: 0.875rem;
  transition: color 0.3s ease;
}
.footer-legal a:hover { color: var(--ink); }

@media (min-width: 768px) {
  .footer { padding: 3.5rem 0 2rem; }
  .footer-content { padding: 0 3rem; }
  .footer-columns {
    grid-template-columns: repeat(6, 1fr);
    gap: 2.5rem;
    align-items: start;
  }
  .footer-bottom { flex-direction: row; justify-content: space-between; }
  .footer-copyright { text-align: left; }
}

/* ------------------------------------------------------------- errors ---- */

.blog-error {
  padding-top: calc(var(--nav-height) + clamp(0.5rem, 2vw, 1.5rem));
  padding-bottom: clamp(3rem, 7vw, 5rem);
}

/* The stage: title and clip over a giant ghosted "404" and the dot field. */
.blog-error__stage {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(1rem, 2.5vw, 2rem) 1rem clamp(2.5rem, 5vw, 3.5rem);
}
.blog-error__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(213, 190, 199, 0.62) 1px, transparent 1.7px);
  background-size: 5px 5px;
  -webkit-mask-image: var(--orbs);
  mask-image: var(--orbs);
  --orbs:
    linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
    radial-gradient(circle 20vw at 12% 30%, rgba(0, 0, 0, 0.7) 0%, transparent 100%),
    radial-gradient(circle 18vw at 88% 65%, rgba(0, 0, 0, 0.65) 0%, transparent 100%),
    radial-gradient(circle 10vw at 55% 95%, rgba(0, 0, 0, 0.5) 0%, transparent 100%),
    radial-gradient(circle 8vw at 35% 5%, rgba(0, 0, 0, 0.4) 0%, transparent 100%);
}
.blog-error__ghost {
  position: absolute;
  top: -0.12em;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 72;
  font-weight: 800;
  font-size: clamp(9rem, 28vw, 22rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--bg-2);
  user-select: none;
  pointer-events: none;
}
.blog-error__eyebrow { color: var(--brand); }
.blog-error__title {
  margin-top: 0.75rem;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 800;
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.03em;
  line-height: 1.08;
}
/* Transparent animated WebP, so it floats on the dots with no box around it. */
.blog-error__media {
  width: min(100%, 20rem);
  height: auto;
  margin-top: -0.5rem;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
  filter: drop-shadow(0 20px 30px rgba(61, 26, 44, 0.22));
  transform: rotate(-2deg);
  animation: error-bob 5s ease-in-out infinite;
}
@keyframes error-bob {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50% { transform: rotate(-1deg) translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) { .blog-error__media { animation: none; } }
.blog-error__body {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 30rem;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.blog-error__actions {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.blog-error__suggested { padding-top: clamp(2rem, 5vw, 3.5rem); }
.blog-error__suggested-title {
  text-align: center;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  font-variation-settings: "opsz" 72;
  margin-bottom: 0.5rem;
}

/* 500: the same stage, filling the viewport, no calls to action. */
.blog-error--full { min-height: 100vh; display: flex; flex-direction: column; padding-bottom: 0; }
.blog-error--full .blog-error__stage { flex: 1; justify-content: center; }
.blog-error__media--clip {
  width: min(100%, 13rem);
  image-rendering: auto;
  border-radius: 14px;
  box-shadow: 0 24px 48px -20px rgba(61, 26, 44, 0.35);
  filter: none;
  transform: rotate(1.5deg);
  animation-name: error-bob-dialog;
}
.blog-error__media--wide { width: min(100%, 24rem); }
@keyframes error-bob-dialog {
  0%, 100% { transform: rotate(1.5deg) translateY(0); }
  50% { transform: rotate(0.5deg) translateY(-6px); }
}
.blog-error__body a { text-decoration: underline; text-underline-offset: 3px; }
.blog-error__body a:hover { color: var(--brand); }

/* --------------------------------------------------------- newsletter ---- */

.newsletter { padding: clamp(2.5rem, 5vw, 4rem) 0; }

/* Dotted frame around a solid panel, Descript-style. The dots (and the mask
   that varies their intensity) live on a pseudo-element, so the panel and
   its form are never masked with them. */
.newsletter__frame {
  position: relative;
  isolation: isolate;
  padding: clamp(1rem, 3vw, 2rem);
  border-radius: var(--radius-lg);
  background-color: var(--bg-2);
  overflow: hidden;
}
.newsletter__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(61, 26, 44, 0.24) 0.9px, transparent 1.55px);
  background-size: 5px 5px;
  -webkit-mask-image: var(--orbs);
  mask-image: var(--orbs);
  --orbs:
    linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    radial-gradient(circle 18vw at 8% 20%, rgba(0, 0, 0, 0.6) 0%, transparent 100%),
    radial-gradient(circle 14vw at 92% 80%, rgba(0, 0, 0, 0.6) 0%, transparent 100%),
    radial-gradient(circle 9vw at 55% 105%, rgba(0, 0, 0, 0.45) 0%, transparent 100%),
    radial-gradient(circle 7vw at 40% -5%, rgba(0, 0, 0, 0.4) 0%, transparent 100%),
    radial-gradient(circle 6vw at 75% 40%, rgba(0, 0, 0, 0.3) 0%, transparent 100%);
}

.newsletter__panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem);
  border-radius: var(--radius);
  background: var(--bg);
}
@media (max-width: 820px) { .newsletter__panel { grid-template-columns: 1fr; } }

.newsletter__title {
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  font-weight: 800;
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.025em;
  line-height: 1.12;
  max-width: 18ch;
}

.newsletter__form { display: flex; flex-direction: column; gap: 0.875rem; }

.newsletter__row { display: flex; gap: 0.75rem; }
@media (max-width: 480px) { .newsletter__row { flex-direction: column; } }

/* Text for screen readers and crawlers, off-screen for everyone else. Link
   checkers read an icon-only <a> as an empty anchor; aria-label alone does not
   satisfy them. */
.visually-hidden,
.newsletter__label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

.newsletter__input {
  flex: 1;
  min-width: 0;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--line-2);
  background: var(--surface);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.newsletter__input::placeholder { color: var(--ink-4); }
.newsletter__input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(28, 25, 23, 0.12);
}
.newsletter__input[aria-invalid="true"] { border-color: var(--brand); }

.newsletter__submit { flex: 0 0 auto; }

.newsletter__consent {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-3);
}
.newsletter__consent a {
  display: block;
  margin-top: 0.15rem;
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.newsletter__consent a:hover { color: var(--ink); }

.newsletter__status { font-size: 0.9375rem; font-weight: 500; min-height: 0; }
.newsletter__status:empty { display: none; }
.newsletter__status--ok { color: #15803d; }
.newsletter__status--error { color: var(--brand); }
.newsletter__form--done .newsletter__row { opacity: 0.6; }