/* Blog templates: post, page, archive, author, search and 404. Shared chrome is in site.css.
   The first two blocks are the homepage's latest-guides and newsletter styles, reused here. */
/* Chapter: latest (one cover, then a numbered list) */
.guides { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--cp-space-8); align-items: start; }
.gf { display: block; color: var(--cp-slate); text-decoration: none; }
.gf__cover { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 28rem; padding: var(--cp-space-6); overflow: hidden; background-color: var(--cp-sage-deep); border-radius: var(--cp-radius-lg); color: var(--cp-white); }
.gf__kind { position: relative; margin-bottom: var(--cp-space-3); font-size: var(--cp-text-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.gf__cover :is(h2, h3) { position: relative; max-width: 12ch; margin: 0; color: var(--cp-white); font-size: clamp(2rem, 1.2rem + 2.4vw, 3.5rem); line-height: 1.05; letter-spacing: -0.015em; }
.gf__diagram { position: absolute; top: var(--cp-space-5); right: var(--cp-space-5); width: 46%; height: auto; background: var(--cp-linen); border-radius: var(--cp-radius-md); box-shadow: var(--cp-shadow-lift); rotate: 4deg; transition: rotate var(--cp-dur-slow) var(--cp-ease); }
.gf:hover .gf__diagram, .gf:focus-visible .gf__diagram { rotate: 0deg; }
.gf__text { margin: var(--cp-space-4) 0 var(--cp-space-3); font-size: var(--cp-text-base); }
.gf .cp-btn { pointer-events: none; }
.gl-head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 var(--cp-space-3); }
.gl-head :is(h2, h3) { margin: 0; font-size: var(--cp-text-xl); }
.gl { list-style: none; margin: 0; padding: 0; }
.gl li { margin: 0; }
.gl a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--cp-space-3); align-items: start; padding: var(--cp-space-4) 0; border-top: 1px solid var(--cp-line); color: var(--cp-slate); text-decoration: none; }
.gl li:last-child a { border-bottom: 1px solid var(--cp-line); }
.gl__k { display: block; margin-bottom: .2rem; font-size: var(--cp-text-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-sage-deep); }
.gl b { display: block; font-family: var(--cp-font-heading); font-size: var(--cp-text-lg); font-weight: 400; line-height: 1.2; color: var(--cp-midnight); }
.gl__d { display: block; margin-top: .25rem; font-size: var(--cp-text-sm); line-height: 1.5; }
.gl .arrow { margin-top: .3rem; color: var(--cp-midnight); transition: transform var(--cp-dur-base) var(--cp-ease); }
.gl a:hover b { color: var(--cp-sage-deep); text-decoration: underline; }
.gl a:hover .arrow { transform: translateX(4px); }
@media (max-width: 960px) { .guides { grid-template-columns: minmax(0, 1fr); gap: var(--cp-space-6); } .gf__cover { min-height: 22rem; } }
@media (max-width: 560px) { .gf__cover { min-height: 20rem; padding: var(--cp-space-5); } .gf__diagram { width: 54%; } .gl__d { display: none; } }
/* Newsletter: a slim band, not a second hero */
.news { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--cp-space-7); align-items: center; padding: var(--cp-space-6) var(--cp-space-7); background-color: var(--cp-linen); border: 1px solid var(--cp-line); border-radius: var(--cp-radius-lg); }
.news h2 { margin: 0 0 .25rem; font-size: var(--cp-text-xl); }
.news p { margin: 0; font-size: var(--cp-text-sm); }
.news .cp-inline-form { margin: 0; }
@media (max-width: 860px) { .news { grid-template-columns: minmax(0, 1fr); gap: var(--cp-space-4); padding: var(--cp-space-5); } }

/* ---- Cover tiles: an icon on a tinted tile stands in for a photo on every post card ---- */
.cover { position: relative; display: grid; place-content: center; aspect-ratio: 16 / 10; overflow: hidden; background-color: var(--cp-linen); border-radius: var(--cp-radius-md); color: var(--cp-sage-deep); transition: transform var(--cp-dur-base) var(--cp-ease); }
.cover__ico { width: 4.75rem; height: 4.75rem; }
.cover[data-tone="oat"] { background-color: var(--cp-oat); }
.cover[data-tone="sage"] { background-color: var(--cp-sage-deep); color: rgba(255, 255, 255, .85); }
.cover[data-tone="night"] { background-color: var(--cp-midnight); color: var(--cp-mist); }

/* ---- Post card ---- */
.pcard { display: flex; flex-direction: column; gap: var(--cp-space-4); color: var(--cp-slate); text-decoration: none; }
.pcard:hover { color: var(--cp-slate); }
.pcard:hover .cover { transform: translateY(-4px); }
.pcard__kind { display: block; margin-bottom: .35rem; font-size: var(--cp-text-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cp-sage-deep); }
.pcard h3 { margin: 0 0 .4rem; font-size: var(--cp-text-card); font-weight: 400; line-height: 1.25; }
.pcard:hover h3 { color: var(--cp-sage-deep); text-decoration: underline; text-underline-offset: .2em; }
.pcard__meta { margin: 0; font-size: var(--cp-text-xs); color: var(--cp-slate); }
.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cp-space-7) var(--cp-space-5); list-style: none; margin: 0; padding: 0; }
.pgrid > li { margin: 0; }
@media (max-width: 960px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .pgrid { grid-template-columns: minmax(0, 1fr); gap: var(--cp-space-5); }
  .pgrid .pcard { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: start; gap: var(--cp-space-4); }
  .pgrid .cover { aspect-ratio: 1; }
  .pgrid .cover__ico { width: 2.75rem; height: 2.75rem; }
  .pgrid .pcard h3 { font-size: 1.0625rem; }
}

/* ---- Page head (shared by every template) ---- */
.ph { padding: var(--cp-space-5) 0 var(--cp-space-8); }
.ph .cp-crumbs { margin-bottom: var(--cp-space-7); }
.ph h1 { margin: 0 0 var(--cp-space-4); font-size: clamp(2.25rem, 1.1rem + 3.8vw, 4.25rem); font-weight: 400; line-height: 1.06; letter-spacing: -0.02em; max-width: 20ch; }
.ph .cp-lead { max-width: 40rem; margin: 0; }
@media (max-width: 760px) { .ph { padding-bottom: var(--cp-space-7); } .ph .cp-crumbs { margin-bottom: var(--cp-space-5); } }

/* ---- Single post ---- */
.read-bar { position: fixed; inset: 0 0 auto 0; z-index: 90; height: 3px; pointer-events: none; }
.read-bar i { display: block; height: 100%; background: var(--cp-sage-deep); transform: scaleX(0); transform-origin: 0 50%; }
/* Layout: contents + share rail | article | at-a-glance card. Up to 1200px wide it stacks: title, card, article, with contents as a floating button. */
.post-layout { display: grid; grid-template-columns: 13rem minmax(0, 44rem) 18rem; grid-template-areas: "rail top card" "rail body card"; justify-content: center; column-gap: var(--cp-space-6); padding-block: var(--cp-space-6) var(--cp-space-9); }
.post-layout > * { min-width: 0; }
.post-top { grid-area: top; }
.post-body { grid-area: body; }
.post-rail { grid-area: rail; }
.post-card { grid-area: card; }
.post-top .cp-crumbs { margin-bottom: var(--cp-space-3); }
.post-disclosure { margin: 0 0 var(--cp-space-5); font-size: var(--cp-text-xs); line-height: 1.5; color: #6e7280; color: color-mix(in srgb, var(--cp-slate) 80%, var(--cp-pearl)); /* 4.6:1 on the page background, the AA minimum */ }
.post-disclosure a { color: inherit; text-decoration-thickness: 1px; }
.post-disclosure a:hover { color: var(--cp-midnight); }
.post-top h1 { margin: 0 0 var(--cp-space-4); font-size: clamp(2.25rem, 1.2rem + 3.2vw, 3.75rem); font-weight: 400; line-height: 1.08; letter-spacing: -0.02em; }
.post-top .cp-lead { margin: 0 0 var(--cp-space-5); }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem var(--cp-space-4); margin: 0 0 var(--cp-space-6); padding: 0; list-style: none; font-size: var(--cp-text-xs); }
.post-meta li { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
.post-meta li + li::before { content: ""; width: 3px; height: 3px; margin-right: var(--cp-space-1); border-radius: 50%; background: var(--cp-slate); }
.post-meta a { color: var(--cp-midnight); font-weight: 600; text-decoration: none; }
.post-meta a:hover { text-decoration: underline; }
.post-figure { margin: 0 0 var(--cp-space-7); }
.post-figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--cp-radius-lg); }
.post-figure figcaption { margin-top: var(--cp-space-3); font-size: var(--cp-text-xs); color: var(--cp-slate); }

/* Left rail: contents, share, copy link */
.post-rail { position: sticky; top: 6rem; align-self: start; display: flex; flex-direction: column; gap: var(--cp-space-1); }
.rail-toc { position: relative; }
.rail-btn { position: relative; display: grid; place-content: center; width: 2.75rem; height: 2.75rem; padding: 0; background: none; border: 0; border-radius: 50%; color: var(--cp-midnight); cursor: pointer; transition: background var(--cp-dur-fast) var(--cp-ease), color var(--cp-dur-fast) var(--cp-ease); }
.rail-btn:hover { background: var(--cp-oat); color: var(--cp-midnight); }
.rail-btn svg { width: 1.3rem; height: 1.3rem; }
.rail-btn[aria-expanded="true"] { background: var(--cp-midnight); color: var(--cp-white); }
.rail-btn.is-done { background: var(--cp-sage-deep); color: var(--cp-white); }
.toc-pop { position: absolute; left: calc(100% + .75rem); top: 0; z-index: 30; width: 17rem; padding: var(--cp-space-4) var(--cp-space-5); background: var(--cp-white); border: 1px solid var(--cp-line); border-radius: var(--cp-radius-md); box-shadow: var(--cp-shadow-lift); transform-origin: 0 0; opacity: 0; visibility: hidden; transform: translateX(-10px) scale(.96); transition: opacity 220ms var(--cp-ease), transform 380ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 380ms; }
.toc-pop.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity 260ms var(--cp-ease), transform 520ms cubic-bezier(.22, 1, .36, 1), visibility 0s; }
.toc-pop li { opacity: 0; transform: translateX(-6px); transition: opacity 160ms var(--cp-ease), transform 160ms var(--cp-ease); }
.toc-pop.is-open li { opacity: 1; transform: none; transition: opacity 420ms var(--cp-ease), transform 520ms cubic-bezier(.22, 1, .36, 1); transition-delay: calc(90ms + var(--i, 0) * 45ms); }
.rail-label { display: none; }
.post-share { display: none; align-items: center; justify-content: space-between; gap: var(--cp-space-4); margin: 0 0 var(--cp-space-6); padding-bottom: var(--cp-space-5); border-bottom: 1px solid var(--cp-line); }
.post-share p { margin: 0; font: 600 var(--cp-text-xs) var(--cp-font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--cp-sage-deep); }
.post-share > div { display: flex; gap: var(--cp-space-2); }
.post-share .rail-btn { border: 1px solid var(--cp-line); }
.rail-share { display: contents; }
.rail-btn svg { transition: transform 420ms cubic-bezier(.22, 1, .36, 1); }
.rail-btn[aria-expanded="true"] svg { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .toc-pop, .toc-pop.is-open, .toc-pop li, .toc-pop.is-open li, .rail-btn svg { transition-duration: .01ms !important; transition-delay: 0s !important; } }
.toc-pop .label-sm { margin: 0 0 var(--cp-space-3); letter-spacing: .14em; }
.toc { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--cp-line); }
.toc li { margin: 0; }
.toc a { display: block; margin-left: -1px; padding: .45rem 0 .45rem var(--cp-space-4); border-left: 2px solid transparent; font-size: var(--cp-text-sm); line-height: 1.4; color: var(--cp-slate); text-decoration: none; transition: color var(--cp-dur-fast) var(--cp-ease), border-color var(--cp-dur-fast) var(--cp-ease); }
.toc a:hover { color: var(--cp-midnight); }
.toc a.is-current { border-left-color: var(--cp-sage-deep); color: var(--cp-midnight); font-weight: 600; }

/* Right card: key facts and one action */
.post-card { position: sticky; top: 6rem; align-self: start; padding: var(--cp-space-5); background: var(--cp-linen); border-radius: var(--cp-radius-lg); }
.post-card h2 { margin: 0 0 var(--cp-space-3); font-size: var(--cp-text-xl); font-weight: 400; }
.glance { margin: 0 0 var(--cp-space-5); }
.glance > div { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); gap: var(--cp-space-3); padding: .65rem 0; font-size: var(--cp-text-sm); line-height: 1.45; }
.glance dt { font-weight: 600; color: var(--cp-midnight); }
.glance dd { margin: 0; }
.post-card .cp-btn { width: 100%; }
@media (max-width: 1200px) {
  .post-layout { grid-template-columns: minmax(0, 44rem); grid-template-areas: "top" "card" "body"; padding-top: var(--cp-space-5); }
  .post-card { position: static; margin-bottom: var(--cp-space-7); }
  .post-figure { margin-bottom: var(--cp-space-4); }
  .post-figure img { aspect-ratio: 16 / 10; border-radius: var(--cp-radius-md); }
  /* The rail goes away: contents becomes a floating button at the bottom left, share moves to the end of the post */
  .post-rail { display: contents; }
  .rail-share { display: none; }
  .rail-toc { position: fixed; left: var(--cp-space-4); bottom: calc(var(--cp-space-4) + env(safe-area-inset-bottom, 0px)); z-index: 50; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 320ms var(--cp-ease), transform 420ms cubic-bezier(.22, 1, .36, 1); }
  .rail-toc.is-away { opacity: 1; transform: none; pointer-events: auto; }
  .rail-toc .rail-btn { width: auto; height: 3rem; padding: 0 1.15rem 0 1rem; gap: .55rem; grid-auto-flow: column; place-content: center; border-radius: var(--cp-radius-pill); background: var(--cp-midnight); color: var(--cp-white); font: 600 var(--cp-text-sm) var(--cp-font-body); box-shadow: var(--cp-shadow-lift); }
  .rail-toc .rail-btn:hover { background: var(--cp-midnight-soft, var(--cp-midnight)); color: var(--cp-white); }
  .rail-toc .rail-btn[aria-expanded="true"] { background: var(--cp-white); color: var(--cp-midnight); }
  .rail-toc .rail-btn[aria-expanded="true"] svg { transform: none; }
  .rail-label { display: inline; }
  .toc-pop { left: 0; top: auto; bottom: calc(100% + .75rem); width: min(20rem, calc(100vw - 2rem)); max-height: 60vh; overflow-y: auto; transform-origin: 1.4rem 100%; transform: translateY(10px) scale(.96); }
  .toc-pop.is-open { transform: none; }
  .post-share { display: flex; }
}
@media (prefers-reduced-motion: reduce) { .rail-toc { transition: none; } }
/* Wide screens: the contents list stays open in the left column, with the share buttons under it */
@media (min-width: 1201px) {
  .rail-toc > .rail-btn { display: none; }
  .toc-pop { position: static; width: auto; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: none; }
  .toc-pop li, .toc-pop.is-open li { opacity: 1; transform: none; transition: none; }
  .rail-share { display: flex; gap: var(--cp-space-1); margin-top: var(--cp-space-5); padding-top: var(--cp-space-4); border-top: 1px solid var(--cp-line); }
}
}

.cp-article { font-size: 1.0625rem; line-height: 1.75; }
.cp-article > h2, .cp-article > h3 { scroll-margin-top: 6rem; }
.cp-article > h2:first-child { margin-top: 0; }
.cp-article figure { margin: var(--cp-space-6) 0; }
.cp-article figure img { display: block; width: 100%; height: auto; border-radius: var(--cp-radius-md); }
.cp-article figcaption { margin-top: var(--cp-space-2); font-size: var(--cp-text-xs); color: var(--cp-slate); }
.cp-article li > strong { color: var(--cp-midnight); }
.cp-article .cp-table-wrap, .cp-article .cp-proscons, .cp-article .cp-product { margin: var(--cp-space-6) 0; }
.quick { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--cp-space-4); margin: 0 0 var(--cp-space-7); padding: var(--cp-space-5); background: var(--cp-white); border: 1px solid var(--cp-line); border-left: 4px solid var(--cp-sage-deep); border-radius: var(--cp-radius-md); }
.quick svg { width: 1.6rem; height: 1.6rem; margin-top: .15rem; color: var(--cp-sage-deep); }
.quick .label-sm { margin: 0 0 .25rem; }
.quick p { margin: 0; font-size: 1rem; line-height: 1.65; }
.pbox { margin: var(--cp-space-6) 0; }
.pbox .cp-card__media { padding: var(--cp-space-4); }
.pbox .cp-card__media img { width: 100%; height: 100%; object-fit: contain; }
.pbox .cp-eyebrow { margin-bottom: var(--cp-space-2); }
.pbox h3 { -webkit-line-clamp: 4; margin-bottom: var(--cp-space-2); font-size: var(--cp-text-xl); }
.pbox .pick__meta { margin: 0 0 var(--cp-space-2); font-size: var(--cp-text-sm); }
.pbox ul { padding-left: 1.1rem; }
.pbox__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cp-space-3) var(--cp-space-5); margin-top: var(--cp-space-4); }
@media (max-width: 640px) { .cp-product.pbox { grid-template-columns: minmax(0, 1fr); } .pbox .cp-card__media { aspect-ratio: 4 / 3; border-right: 0; border-bottom: 1px solid var(--cp-line); } }
.cp-article .cp-faq { margin: var(--cp-space-5) 0 0; }
.post-end { margin-top: var(--cp-space-8); padding-top: var(--cp-space-6); border-top: 1px solid var(--cp-line); }
.post-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cp-space-2); margin: 0 0 var(--cp-space-6); padding: 0; list-style: none; }
.post-tags li { margin: 0; }
.post-tags .lbl { margin-right: var(--cp-space-2); font-size: var(--cp-text-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cp-slate); }
.cp-author { align-items: flex-start; }
.cp-author .cp-btn--text { margin-top: var(--cp-space-2); }
.pn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cp-space-4); margin-top: var(--cp-space-6); }
.pn a { display: block; padding: var(--cp-space-5); background: var(--cp-white); border: 1px solid var(--cp-line); border-radius: var(--cp-radius-md); text-decoration: none; color: var(--cp-slate); transition: border-color var(--cp-dur-fast) var(--cp-ease), box-shadow var(--cp-dur-base) var(--cp-ease); }
.pn a:hover { border-color: var(--cp-midnight); box-shadow: var(--cp-shadow-soft); color: var(--cp-slate); }
.pn small { display: flex; align-items: center; gap: .4rem; margin-bottom: .35rem; font-size: var(--cp-text-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cp-sage-deep); }
.pn b { display: block; font-family: var(--cp-font-heading); font-size: var(--cp-text-lg); font-weight: 400; line-height: 1.25; color: var(--cp-midnight); }
.pn a:last-child { text-align: right; }
.pn a:last-child small { justify-content: flex-end; }
@media (max-width: 560px) { .pn { grid-template-columns: minmax(0, 1fr); } .pn a:last-child { text-align: left; } .pn a:last-child small { justify-content: flex-start; } }

/* ---- Static page ---- */
.page-grid { display: grid; grid-template-columns: 14rem minmax(0, 44rem); justify-content: center; gap: var(--cp-space-9); padding-block: var(--cp-space-8) var(--cp-space-9); }
.subnav { position: sticky; top: 6rem; align-self: start; }
.subnav h2 { margin: 0 0 var(--cp-space-3); font: 600 var(--cp-text-xs) var(--cp-font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--cp-sage-deep); }
.subnav ul { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--cp-line); }
.subnav li { margin: 0; }
.subnav a { display: block; margin-left: -1px; padding: .5rem 0 .5rem var(--cp-space-4); border-left: 2px solid transparent; font-size: var(--cp-text-sm); color: var(--cp-slate); text-decoration: none; }
.subnav a:hover { color: var(--cp-midnight); }
.subnav a[aria-current] { border-left-color: var(--cp-sage-deep); color: var(--cp-midnight); font-weight: 600; }
.page-body .steps-lite { list-style: none; margin: var(--cp-space-5) 0; padding: 0; }
.steps-lite li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--cp-space-4); margin: 0; padding: var(--cp-space-4) 0; border-top: 1px solid var(--cp-line); }
.steps-lite li:last-child { border-bottom: 1px solid var(--cp-line); }
.steps-lite svg { width: 1.5rem; height: 1.5rem; margin-top: .15rem; color: var(--cp-sage-deep); }
.steps-lite h3 { margin: 0 0 .2rem; font-size: var(--cp-text-lg); }
.steps-lite p { margin: 0; font-size: var(--cp-text-sm); }
.page-body .statement { font-size: clamp(1.75rem, 1.1rem + 2vw, 2.75rem); line-height: 1.15; margin-bottom: var(--cp-space-5); }
@media (max-width: 960px) {
  .page-grid { grid-template-columns: minmax(0, 44rem); gap: var(--cp-space-6); padding-top: var(--cp-space-6); }
  .subnav { position: static; }
  .subnav ul { display: flex; flex-wrap: wrap; gap: var(--cp-space-2); border: 0; }
  .subnav a { margin: 0; padding: .45rem .9rem; border: 1px solid var(--cp-line); border-radius: var(--cp-radius-pill); }
  .subnav a[aria-current] { background: var(--cp-midnight); border-color: var(--cp-midnight); color: var(--cp-white); }
}

/* ---- Archives (category, blog index) ---- */
.topics { display: flex; flex-wrap: wrap; gap: var(--cp-space-2); margin: var(--cp-space-5) 0 0; padding: 0; list-style: none; }
.topics li { margin: 0; }
.topics a { display: inline-block; padding: .45rem 1rem; background: var(--cp-white); border: 1px solid var(--cp-line); border-radius: var(--cp-radius-pill); font-size: var(--cp-text-sm); font-weight: 500; color: var(--cp-midnight); text-decoration: none; transition: background var(--cp-dur-fast) var(--cp-ease), border-color var(--cp-dur-fast) var(--cp-ease); }
.topics a:hover { border-color: var(--cp-midnight); }
.topics a[aria-current] { background: var(--cp-midnight); border-color: var(--cp-midnight); color: var(--cp-white); }
.arch-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--cp-space-4); margin-bottom: var(--cp-space-6); }
.arch-bar h2 { margin: 0; font-size: var(--cp-text-2xl); }
.arch-bar p { margin: .25rem 0 0; font-size: var(--cp-text-sm); }
.pager-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--cp-space-4); margin-top: var(--cp-space-8); padding-top: var(--cp-space-5); border-top: 1px solid var(--cp-line); }
.pager-row p { margin: 0; font-size: var(--cp-text-sm); }
.cp-pager a[aria-disabled] { opacity: .4; pointer-events: none; }
.cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cp-space-4); }
.cats a { display: flex; flex-direction: column; gap: var(--cp-space-3); padding: var(--cp-space-5); background: var(--cp-white); border: 1px solid var(--cp-line); border-radius: var(--cp-radius-md); color: var(--cp-slate); text-decoration: none; transition: border-color var(--cp-dur-fast) var(--cp-ease), transform var(--cp-dur-base) var(--cp-ease); }
.cats a:hover { border-color: var(--cp-midnight); transform: translateY(-3px); color: var(--cp-slate); }
.cats svg { width: 2rem; height: 2rem; color: var(--cp-sage-deep); }
.cats b { font-family: var(--cp-font-heading); font-size: var(--cp-text-lg); font-weight: 400; line-height: 1.2; color: var(--cp-midnight); }
.cats span { font-size: var(--cp-text-sm); line-height: 1.5; }
@media (max-width: 960px) { .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cats span { display: none; } .cats a { padding: var(--cp-space-4); } }

/* ---- Author ---- */
.au { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--cp-space-7); align-items: center; }
.au__mono { display: grid; place-content: center; width: 11rem; height: 11rem; background: var(--cp-sage-deep); border-radius: 50%; color: var(--cp-white); font-family: var(--cp-font-heading); font-size: 3.5rem; font-weight: 300; letter-spacing: .02em; box-shadow: 0 0 0 8px var(--cp-linen), 0 0 0 9px var(--cp-line); }
.au h1 { max-width: none; font-size: clamp(2.25rem, 1.1rem + 3.4vw, 3.75rem); }
.au__role { margin: 0 0 var(--cp-space-4); font-size: var(--cp-text-sm); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cp-sage-deep); }
.au .cp-lead { margin-bottom: var(--cp-space-5); }
.au__links { display: flex; flex-wrap: wrap; gap: var(--cp-space-3) var(--cp-space-5); margin: 0; padding: 0; list-style: none; }
.au__links li { margin: 0; }
@media (max-width: 760px) { .au { grid-template-columns: minmax(0, 1fr); gap: var(--cp-space-5); } .au__mono { width: 6.5rem; height: 6.5rem; font-size: 2.25rem; } }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--cp-line); border-bottom: 1px solid var(--cp-line); }
.facts li { margin: 0; padding: var(--cp-space-5) var(--cp-space-5) var(--cp-space-5) 0; }
.facts li + li { padding-left: var(--cp-space-5); border-left: 1px solid var(--cp-line); }
.facts b { display: block; margin-bottom: .25rem; font-family: var(--cp-font-heading); font-size: var(--cp-text-lg); font-weight: 400; color: var(--cp-midnight); }
.facts span { font-size: var(--cp-text-sm); line-height: 1.5; }
@media (max-width: 760px) { .facts { grid-template-columns: minmax(0, 1fr); } .facts li, .facts li + li { padding: var(--cp-space-4) 0; border-left: 0; } .facts li + li { border-top: 1px solid var(--cp-line); } }
.rows { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--cp-line); }
.rows li { margin: 0; }
.rows a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--cp-space-2) var(--cp-space-5); align-items: center; padding: var(--cp-space-4) 0; border-top: 1px solid var(--cp-line); color: var(--cp-slate); text-decoration: none; }
.rows b { display: block; font-family: var(--cp-font-heading); font-size: var(--cp-text-lg); font-weight: 400; line-height: 1.25; color: var(--cp-midnight); }
.rows a:hover b { color: var(--cp-sage-deep); text-decoration: underline; text-underline-offset: .2em; }
.rows .k { display: block; margin-bottom: .2rem; font-size: var(--cp-text-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-sage-deep); }
.rows .d { font-size: var(--cp-text-xs); white-space: nowrap; }
.rows mark, .sr-list mark { padding: 0 .1em; background: rgba(143, 160, 138, .35); border-radius: 3px; color: inherit; }
@media (max-width: 560px) { .rows a { grid-template-columns: minmax(0, 1fr); } }

/* ---- Search results ---- */
.sr-form { position: relative; display: flex; align-items: center; gap: var(--cp-space-3); max-width: 44rem; margin-top: var(--cp-space-6); padding: .4rem .4rem .4rem 1.25rem; background: var(--cp-white); border: 2px solid var(--cp-midnight); border-radius: var(--cp-radius-pill); transition: box-shadow var(--cp-dur-base) var(--cp-ease); }
.sr-form:focus-within { box-shadow: var(--cp-ring); }
.sr-form > svg { width: 1.5rem; height: 1.5rem; flex: none; color: var(--cp-slate); }
.sr-form input { flex: 1; min-width: 0; padding: .6rem 0; background: transparent; border: 0; outline: 0; font: 400 var(--cp-text-lg) var(--cp-font-body); color: var(--cp-midnight); }
.sr-form input::-webkit-search-cancel-button { display: none; }
.sr-grid { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: var(--cp-space-9); align-items: start; padding-block: var(--cp-space-7) var(--cp-space-9); }
.sr-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--cp-space-4); margin-bottom: var(--cp-space-5); }
.sr-count { margin: 0; font-size: var(--cp-text-sm); color: var(--cp-midnight); font-weight: 600; }
.sr-filter { display: flex; flex-wrap: wrap; gap: var(--cp-space-2); margin: 0; padding: 0; list-style: none; }
.sr-filter li { margin: 0; }
.sr-filter button { padding: .4rem .95rem; background: var(--cp-white); border: 1px solid var(--cp-line); border-radius: var(--cp-radius-pill); font: 500 var(--cp-text-sm) var(--cp-font-body); color: var(--cp-midnight); cursor: pointer; transition: background var(--cp-dur-fast) var(--cp-ease), border-color var(--cp-dur-fast) var(--cp-ease); }
.sr-filter button:hover { border-color: var(--cp-midnight); }
.sr-filter button[aria-pressed="true"] { background: var(--cp-midnight); border-color: var(--cp-midnight); color: var(--cp-white); }
.sr-filter small { margin-left: .25rem; opacity: .7; }
.sr-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--cp-line); }
.sr-list li { margin: 0; }
.sr-list a { display: block; padding: var(--cp-space-5) 0; border-top: 1px solid var(--cp-line); color: var(--cp-slate); text-decoration: none; }
.sr-list b { display: block; margin-bottom: .35rem; font-family: var(--cp-font-heading); font-size: var(--cp-text-xl); font-weight: 400; line-height: 1.25; color: var(--cp-midnight); }
.sr-list a:hover b { color: var(--cp-sage-deep); text-decoration: underline; text-underline-offset: .2em; }
.sr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem var(--cp-space-3); font-size: var(--cp-text-xs); }
.sr-kind { padding: .1rem .5rem; border: 1px solid var(--cp-sage-deep); border-radius: var(--cp-radius-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cp-sage-deep); }
.sr-url { color: var(--cp-slate); overflow-wrap: anywhere; }
.sr-more { margin-top: var(--cp-space-6); text-align: center; }
.sr-side { position: sticky; top: 6rem; display: grid; gap: var(--cp-space-6); }
.sr-side h2 { margin: 0 0 var(--cp-space-3); font: 600 var(--cp-text-xs) var(--cp-font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--cp-sage-deep); }
.sr-side .topics { margin-top: 0; }
.sr-none { padding: var(--cp-space-6); background: var(--cp-white); border: 1px solid var(--cp-line); border-radius: var(--cp-radius-md); }
.sr-none h2 { margin-bottom: var(--cp-space-3); font-size: var(--cp-text-xl); }
.sr-none ul { margin-bottom: var(--cp-space-5); }
@media (max-width: 960px) { .sr-grid { grid-template-columns: minmax(0, 1fr); gap: var(--cp-space-7); } .sr-side { position: static; } }

/* ---- 404 ---- */
.nf { position: relative; overflow: hidden; padding: var(--cp-space-8) 0 var(--cp-space-9); text-align: center; }
.nf__num { display: flex; justify-content: center; align-items: center; gap: clamp(.25rem, 1.5vw, 1rem); margin: 0 0 var(--cp-space-5); font-family: var(--cp-font-heading); font-size: clamp(7rem, 4rem + 16vw, 16rem); font-weight: 300; line-height: .9; letter-spacing: -0.03em; color: var(--cp-midnight); font-variation-settings: 'SOFT' 100, 'WONK' 0; }
.nf__pillow { width: .82em; height: .6em; color: var(--cp-sage-deep); transform: rotate(-6deg); }
.nf h1 { max-width: 20ch; margin: 0 auto var(--cp-space-3); font-size: clamp(1.75rem, 1.1rem + 2vw, 2.75rem); font-weight: 400; }
.nf p.cp-lead { max-width: 32rem; margin: 0 auto var(--cp-space-6); }
.nf .sr-form { margin: 0 auto var(--cp-space-5); text-align: left; }
.nf .cp-actions { justify-content: center; }
.nf-help { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--cp-space-8); align-items: start; }
.nf-help h2 { margin: 0 0 var(--cp-space-4); font-size: var(--cp-text-xl); }
@media (max-width: 860px) { .nf-help { grid-template-columns: minmax(0, 1fr); gap: var(--cp-space-6); } }
@media (prefers-reduced-motion: no-preference) { .nf__pillow { animation: nf-sway 6s ease-in-out infinite; } }
@keyframes nf-sway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(5deg) translateY(-.04em); } }
.ph h1 span { color: var(--cp-sage-deep); }
.band-oat .cover[data-tone="oat"] { background-color: var(--cp-pearl); }
[hidden] { display: none !important; }
.page-body .statement { font-family: var(--cp-font-heading); font-weight: 400; letter-spacing: -0.015em; color: var(--cp-midnight); font-variation-settings: 'SOFT' 100, 'WONK' 0; }
.page-grid > * { min-width: 0; }

/* ---- Roundup post ---- */
.lineup { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cp-space-3); margin: 0 0 var(--cp-space-6); padding: 0; list-style: none; }
.lineup li { margin: 0; }
.lineup a { display: flex; flex-direction: column; gap: .3rem; height: 100%; color: var(--cp-slate); text-decoration: none; }
.lineup__img { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background-color: var(--cp-white); border: 1px solid var(--cp-line); border-radius: var(--cp-radius-md); transition: border-color var(--cp-dur-fast) var(--cp-ease), transform var(--cp-dur-base) var(--cp-ease); }
.lineup__img img { position: absolute; inset: 0; width: 100%; height: 100%; padding: .6rem; object-fit: contain; mix-blend-mode: multiply; }
.lineup__img.is-photo img { padding: 0; object-fit: cover; mix-blend-mode: normal; }
.lineup a:hover .lineup__img { border-color: var(--cp-midnight); transform: translateY(-3px); }
.lineup__t { margin-top: .35rem; font-size: var(--cp-text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cp-sage-deep); line-height: 1.3; }
.lineup__n { font-size: var(--cp-text-sm); line-height: 1.3; color: var(--cp-midnight); }
@media (max-width: 560px) { .lineup { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cp-space-4) var(--cp-space-3); } }
.post-card--pick h3 { margin: var(--cp-space-4) 0 var(--cp-space-1); font-size: var(--cp-text-lg); line-height: 1.25; }
.post-card--pick .pick__meta { margin: 0 0 var(--cp-space-4); font-size: var(--cp-text-sm); }
.post-card--pick .cp-btn--text { display: block; width: auto; margin-top: var(--cp-space-3); text-align: center; }
.post-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background-color: var(--cp-white); border-radius: var(--cp-radius-md); }
.post-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; padding: .75rem; object-fit: contain; mix-blend-mode: multiply; }
.pick-note { margin: calc(var(--cp-space-2) * -1) 0 var(--cp-space-5); font-size: var(--cp-text-sm); }
.rpicks { margin: 0 0 var(--cp-space-7); }
.rpick { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: var(--cp-space-5); padding: var(--cp-space-6) 0; border-top: 1px solid var(--cp-line); scroll-margin-top: 6rem; }
.rpick:last-child { border-bottom: 1px solid var(--cp-line); }
.rpick__media { position: relative; align-self: start; aspect-ratio: 1; overflow: hidden; background-color: var(--cp-white); border: 1px solid var(--cp-line); border-radius: var(--cp-radius-md); }
.rpick__media img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 1rem; object-fit: contain; mix-blend-mode: multiply; }
.rpick__media.is-photo img { padding: 0; object-fit: cover; mix-blend-mode: normal; }
.rpick .cp-eyebrow { margin-bottom: var(--cp-space-2); }
.cp-article .rpick h2 { margin: 0 0 var(--cp-space-2); font-size: var(--cp-text-xl); line-height: 1.2; }
.rpick .pick__meta { margin: 0 0 var(--cp-space-3); font-size: var(--cp-text-sm); }
.rpick p { font-size: 1rem; line-height: 1.7; }
.rpick .chips { margin: var(--cp-space-3) 0 0; }
.rpick .pbox__actions { margin-top: var(--cp-space-5); }
@media (max-width: 640px) {
  .rpick { grid-template-columns: minmax(0, 1fr); gap: var(--cp-space-4); }
  .rpick__media { aspect-ratio: 4 / 3; }
  .rpick .cp-btn--buy { width: 100%; }
}
.post-card--pick .cp-btn--buy { white-space: nowrap; padding-inline: 1rem; font-size: var(--cp-text-sm); }
@media (max-width: 640px) { .hide-sm { display: none; } }
@media (max-width: 1200px) { .post-card--pick .post-card__media { aspect-ratio: 16 / 9; } }
@media (max-width: 640px) { .cp-article .cp-table th, .cp-article .cp-table td { padding: .75rem .6rem; font-size: .8125rem; } .cp-article .cp-table .cp-btn { padding: .5rem .8rem; } .cp-article .cp-table .cp-btn svg { display: none; } }
.cp-article .cp-table .cp-btn { white-space: nowrap; }
.cp-article .cp-table td:last-child { text-align: right; }
.post-card--pick .cp-btn--text { display: block; width: fit-content; margin: var(--cp-space-4) auto var(--cp-space-1); padding: .25rem 0; }

/* Table row headers keep the table's look but are real <th scope=row> for screen readers */
.cp-table tbody th { padding: .9rem 1.1rem; background: transparent; color: var(--cp-midnight); font-weight: 600; text-align: left; white-space: normal; }
.cp-table-wrap:focus-visible { outline: 2px solid var(--cp-midnight); outline-offset: 2px; }
/* Bigger tap targets on touch screens; room above the floating contents button for keyboard focus */
@media (pointer: coarse) { .cp-article .cp-table .cp-btn { min-height: 2.75rem; } }
@media (max-width: 1200px) { html { scroll-padding-bottom: 5rem; } }

/* ---- Product review post ---- */
.post-figure--product { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background-color: var(--cp-white); border: 1px solid var(--cp-line); border-radius: var(--cp-radius-lg); }
.post-figure--product img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; padding: 2rem; object-fit: contain; mix-blend-mode: multiply; border-radius: 0; }
.cp-proscons h3.h5 { display: flex; align-items: center; gap: .5rem; margin: 0 0 var(--cp-space-3); font: 600 var(--cp-text-base) / 1.35 var(--cp-font-body); letter-spacing: 0; color: var(--cp-midnight); }
.cp-proscons .con h3.h5 svg, .cp-proscons .con li svg { color: var(--cp-error-line, #9a3b32); }
.cp-proscons li { margin-bottom: var(--cp-space-2); }
.cp-proscons li svg { margin-top: .2rem; }
.cp-verdict { margin: var(--cp-space-7) 0; }
.cp-verdict h2 { margin: 0 0 var(--cp-space-2); color: var(--cp-white); font-size: var(--cp-text-xl); }
.cp-verdict .label-sm { margin-bottom: var(--cp-space-2); color: var(--cp-mist); }
.cp-verdict p { color: var(--cp-mist); }
@media (max-width: 640px) { .cp-verdict { grid-template-columns: minmax(0, 1fr); } .cp-verdict .cp-btn { width: 100%; } .post-figure--product img { padding: 1.25rem; } }