/*
Theme Name: London Bioprocess
Theme URI: https://londonbioprocess.com
Author: KTRL AS
Author URI: https://ktrl.no
Description: Custom theme for London Bioprocess — precision fermentation CDMO. Carries the reviewed customer-page design (Source Serif 4 + Inter, deep-blue/teal palette) across the homepage, pages and blog.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: londonbioprocess
*/

/* ==========================================================================
   Sections marked "design" below are carried over verbatim from the reviewed
   static page (reference/original-static-page.html). Blog, prose and
   WordPress-integration styles start at "── WP ──" near the bottom.
   ========================================================================== */
/* ── Tokens ───────────────────────────────────────── */
:root {
  --n50:#f0f4f8;--n100:#d9e2ec;--n200:#bcccdc;--n300:#9fb3c8;
  --n400:#7b8fa8;--n500:#627d98;--n600:#486581;--n700:#334e68;
  --n800:#243b53;--n900:#102a43;
  --t50:#effcf6;--t100:#c6f7e2;--t500:#27ab83;--t700:#147d64;
  --ac:#0F4C75;--ac2:#007B7F;
  --gb:linear-gradient(135deg,#0F4C75 0%,#007B7F 100%);
  --gh:linear-gradient(135deg,#f0f4f8 0%,#effcf6 60%,#fff 100%);
  --gc:linear-gradient(135deg,#0F4C75 0%,#243b53 100%);
  --sh-sm:0 1px 3px rgba(15,76,117,.06),0 1px 2px rgba(15,76,117,.04);
  --sh-md:0 4px 12px rgba(15,76,117,.09),0 2px 4px rgba(15,76,117,.05);
  --sh-lg:0 20px 40px rgba(15,76,117,.13);
  --fs:'Source Serif 4',Georgia,serif;
  --fn:'Inter',system-ui,sans-serif;
  --eo:cubic-bezier(0.16,1,0.3,1);
}

/* ── Reset ───────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--fn);font-size:1rem;line-height:1.6;
  color:var(--n900);background:#fff;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
p{margin:0;}h1,h2,h3,h4{margin:0;}
ul,ol{list-style:none;padding:0;margin:0;}
img{display:block;max-width:100%;}

/* ── Type ────────────────────────────────────────── */
h1,h2{font-family:var(--fs);letter-spacing:-.02em;line-height:1.1;text-wrap:balance;}
h3{font-family:var(--fn);font-weight:700;font-size:1.0625rem;line-height:1.3;}

/* ── Layout ──────────────────────────────────────── */
.wrap   {max-width:1160px;margin:0 auto;padding:0 28px;}
.wrap-md{max-width:960px; margin:0 auto;padding:0 28px;}
.wrap-sm{max-width:720px; margin:0 auto;padding:0 28px;}
.section{padding:96px 0;}
.section-tint{background:linear-gradient(180deg,var(--n50) 0%,#fff 100%);}
.section-dark{background:var(--n900);color:#fff;}

/* ── Eyebrow ─────────────────────────────────────── */
.ew{display:inline-flex;align-items:center;gap:6px;font-family:var(--fn);
  font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ac);background:color-mix(in oklab,var(--ac) 8%,transparent);
  border:1px solid color-mix(in oklab,var(--ac) 18%,transparent);
  padding:4px 12px;border-radius:9999px;margin-bottom:1.125rem;}
.ew-teal{color:var(--t700);background:var(--t50);border-color:var(--t100);}
.ew-white{color:rgba(255,255,255,.75);background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);}
.ew-dark{color:var(--n400);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);}

/* ── Buttons ─────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--fn);font-weight:600;border-radius:12px;cursor:pointer;
  border:none;transition:background 150ms,border-color 150ms;line-height:1;white-space:nowrap;}
.btn-p{background:var(--ac);color:#fff;padding:13px 26px;font-size:1rem;
  box-shadow:0 2px 8px rgba(15,76,117,.22);}
.btn-p:hover{background:var(--n800);}
.btn-s{background:transparent;color:var(--ac);padding:12px 25px;font-size:1rem;
  border:1.5px solid var(--n200);}
.btn-s:hover{border-color:var(--ac);}
.btn-w{background:#fff;color:var(--ac);padding:13px 26px;font-size:1rem;}
.btn-w:hover{background:var(--n50);}
.btn-gw{background:transparent;color:#fff;padding:12px 25px;font-size:1rem;
  border:1.5px solid rgba(255,255,255,.3);}
.btn-gw:hover{border-color:rgba(255,255,255,.65);}
.btn-sm{padding:8px 16px;font-size:.875rem;}

/* ── Gradient text ───────────────────────────────── */
.gt{background:var(--gb);-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text;}

/* ── Fade reveal ─────────────────────────────────── */
.fu{opacity:0;transform:translateY(28px);
  transition:opacity .7s var(--eo),transform .7s var(--eo);}
.fu.on{opacity:1;transform:none;}

/* ── Section header ──────────────────────────────── */
.sh{text-align:center;margin-bottom:60px;}
.sh h2{font-size:clamp(1.875rem,3.5vw,2.5rem);font-weight:600;
  color:var(--n900);margin-bottom:.875rem;}
.sh .lead{font-size:1.0625rem;color:var(--n500);
  max-width:580px;margin:0 auto;line-height:1.65;}

/* ── NAV ─────────────────────────────────────────── */
.nav{position:fixed;top:0;width:100%;
  background:rgba(255,255,255,.93);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--n100);z-index:50;}
.nav-in{display:flex;align-items:center;justify-content:space-between;
  max-width:1160px;margin:0 auto;padding:0 28px;height:64px;}
.nav-brand{display:flex;align-items:center;}
.nav-logo{height:36px;width:auto;object-fit:contain;}
.nav-links{display:flex;align-items:center;gap:28px;}
.nav-links a{font-size:.875rem;font-weight:500;color:var(--n600);transition:color 150ms;}
.nav-links a:hover{color:var(--n900);}

/* ── HERO ────────────────────────────────────────── */
.hero{background:var(--gh);padding:136px 0 96px;}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.hero h1{font-size:clamp(2.375rem,4.5vw,3.5rem);font-weight:700;
  color:var(--n900);margin-bottom:1.25rem;line-height:1.08;}
.hero-lead{font-size:1.125rem;line-height:1.65;color:var(--n600);margin-bottom:2.5rem;}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;}
.hero-img{border-radius:20px;overflow:hidden;aspect-ratio:4/3;
  box-shadow:var(--sh-lg);}
.hero-img picture{display:block;width:100%;height:100%;}
.hero-img img{width:100%;height:100%;object-fit:cover;}

/* ── PROBLEM ─────────────────────────────────────── */
.prob-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.prob-card{display:flex;gap:18px;padding:22px 24px;
  background:var(--n50);border:1px solid var(--n100);border-radius:14px;}
.prob-icon{flex-shrink:0;width:40px;height:40px;border-radius:50%;
  background:#fee2e2;color:#dc2626;
  display:flex;align-items:center;justify-content:center;}
.prob-card b{display:block;font-size:.9375rem;font-weight:600;color:var(--n800);margin-bottom:4px;}
.prob-card p{font-size:.875rem;color:var(--n500);line-height:1.5;}

/* ── SERVICES ────────────────────────────────────── */
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.svc-card{background:#fff;border:1px solid var(--n100);border-radius:20px;
  overflow:hidden;box-shadow:var(--sh-sm);
  transition:transform .3s,box-shadow .3s;}
.svc-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);}
.svc-img{height:200px;overflow:hidden;}
.svc-img img{width:100%;height:100%;object-fit:cover;}
.svc-body{padding:28px 28px 32px;}
.svc-body h3{font-size:1.125rem;margin-bottom:10px;}
.svc-body p{font-size:.9375rem;color:var(--n500);line-height:1.65;}

/* ── CAPABILITIES ────────────────────────────────── */
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  background:rgba(255,255,255,.08);border-radius:16px;overflow:hidden;margin-bottom:40px;}
.cap-block{padding:36px 32px;}
.cap-block:not(:last-child){border-right:1px solid rgba(255,255,255,.1);}
.cap-label{font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--t500);margin-bottom:16px;display:flex;align-items:center;gap:8px;}
.cap-specs{display:flex;flex-direction:column;gap:6px;}
.cap-spec{display:flex;align-items:baseline;gap:10px;}
.cap-scale{font-family:var(--fs);font-size:1.375rem;font-weight:600;color:#fff;
  letter-spacing:-.02em;flex-shrink:0;}
.cap-desc{font-size:.875rem;color:var(--n400);}
.cap-tags{display:flex;flex-wrap:wrap;gap:8px;}
.cap-tag{font-size:.8125rem;font-weight:500;color:var(--n400);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  padding:5px 12px;border-radius:9999px;}

/* ── AUDIENCE ────────────────────────────────────── */
.aud-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;}
.aud-copy h2{font-size:clamp(1.875rem,3.5vw,2.5rem);font-weight:600;
  color:var(--n900);margin-bottom:1rem;}
.aud-copy .lead{font-size:1.0625rem;color:var(--n500);line-height:1.65;margin-bottom:1rem;}
.seg-list{display:flex;flex-direction:column;gap:18px;}
.seg{display:flex;gap:16px;align-items:flex-start;}
.seg-ic{flex-shrink:0;width:40px;height:40px;border-radius:10px;
  background:var(--t100);color:var(--t700);
  display:flex;align-items:center;justify-content:center;margin-top:2px;}
.seg b{display:block;font-size:.9375rem;font-weight:600;color:var(--n800);margin-bottom:3px;}
.seg span{font-size:.875rem;color:var(--n400);line-height:1.5;}
.seg-note{border-top:1px solid var(--n100);padding-top:18px;margin-top:18px;
  font-size:.875rem;color:var(--n400);line-height:1.55;}
.seg-note b{color:var(--n600);}

/* ── PARTNERS ────────────────────────────────────── */
.partners-row{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:center;gap:32px 40px;}
.partner-logo{height:32px;width:auto;object-fit:contain;
  filter:grayscale(1) opacity(.55);transition:filter .25s;}
.partner-logo:hover{filter:grayscale(0) opacity(1);}
.partners-cat{text-align:center;font-size:.75rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--n500);margin-bottom:24px;}

/* ── PROCESS ─────────────────────────────────────── */
.proc-list{display:flex;flex-direction:column;}
.proc-step{display:flex;gap:24px;padding-bottom:36px;}
.proc-step:last-child{padding-bottom:0;}
.step-spine{flex-shrink:0;display:flex;flex-direction:column;align-items:center;}
.step-n{width:48px;height:48px;border-radius:50%;background:var(--ac);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:1.0625rem;}
.step-n.fin{background:var(--gb);}
.step-line{flex:1;width:2px;background:linear-gradient(180deg,var(--ac),var(--ac2));
  margin:4px 0;min-height:12px;}
.proc-step:last-child .step-line{display:none;}
.step-body{padding-top:8px;}
.step-tag{display:inline-flex;font-size:.6875rem;font-weight:600;letter-spacing:.04em;
  background:var(--t100);color:var(--t700);
  padding:3px 10px;border-radius:9999px;margin-bottom:6px;}
.step-body h3{margin-bottom:4px;}
.step-body p{font-size:.9375rem;color:var(--n500);line-height:1.55;}

/* ── TEAM ────────────────────────────────────────── */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;align-items:stretch;}
/* Cards are equal-height flex columns so the LinkedIn tag sits on a common
   baseline across the row regardless of name/role wrapping. */
.team-card{text-align:center;min-width:0;display:flex;flex-direction:column;}
.team-photo{width:100%;aspect-ratio:1;border-radius:16px;overflow:hidden;
  margin-bottom:16px;background:var(--n100);}
/* Uniform treatment: the seven headshots come from mixed sources, so normalise
   crop (square, face-safe framing) and tone (desaturated, colour on hover —
   same idiom as .partner-logo). Tune or drop the filter to restore full colour. */
.team-photo picture{display:block;width:100%;height:100%;}
.team-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;
  filter:grayscale(1) contrast(1.04) brightness(1.02);transition:filter .25s;}
.team-card:hover .team-photo img{filter:grayscale(0) contrast(1) brightness(1);}
.team-card h4{font-size:.9375rem;font-weight:700;color:var(--n900);margin-bottom:3px;
  line-height:1.3;overflow-wrap:break-word;word-break:normal;hyphens:none;
  overflow:visible;text-wrap:balance;}
.team-card .role{font-size:.8125rem;color:var(--n500);line-height:1.4;margin-bottom:10px;}
.team-li{display:inline-flex;align-items:center;justify-content:center;gap:5px;
  font-size:.8125rem;font-weight:500;color:var(--ac);transition:color 150ms;
  margin-top:auto;align-self:center;}
.team-li:hover{color:var(--ac2);}
.team-li .li-mark{width:13px;height:13px;flex-shrink:0;}
@media(prefers-reduced-motion:reduce){.team-photo img{transition:none;}}

/* ── FAQ ─────────────────────────────────────────── */
.faq-stack{display:flex;flex-direction:column;gap:12px;}
details.faq{background:#fff;border:1px solid var(--n100);border-radius:14px;}
details.faq summary{font-size:1rem;font-weight:600;color:var(--n800);
  padding:22px 56px 22px 24px;cursor:pointer;list-style:none;position:relative;
  transition:color 150ms;}
details.faq summary::-webkit-details-marker{display:none;}
details.faq summary::after{content:'+';position:absolute;right:24px;top:50%;
  transform:translateY(-50%);font-size:1.375rem;font-weight:300;color:var(--ac);
  transition:transform .25s;}
details.faq[open] summary{color:var(--ac);}
details.faq[open] summary::after{transform:translateY(-50%) rotate(45deg);}
.faq-body{padding:0 24px 22px;font-size:.9375rem;color:var(--n500);line-height:1.7;}

/* ── CTA SECTION ─────────────────────────────────── */
.cta-sec{background:var(--gc);padding:96px 0;text-align:center;}
.cta-sec h2{font-family:var(--fs);font-size:clamp(1.875rem,4vw,2.875rem);font-weight:600;
  color:#fff;margin-bottom:1rem;letter-spacing:-.02em;}
.cta-lead{font-size:1.0625rem;color:var(--n200);
  max-width:520px;margin:0 auto 2.5rem;line-height:1.65;}
.cta-btns{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;}

/* ── FOOTER ──────────────────────────────────────── */
.footer{background:var(--n900);padding:56px 0 32px;}
.foot-top{display:flex;align-items:flex-start;justify-content:space-between;
  gap:32px;margin-bottom:36px;}
.foot-logo{height:28px;width:auto;object-fit:contain;
  filter:brightness(0) invert(1);margin-bottom:10px;}
.foot-meta p{font-size:.875rem;color:var(--n400);line-height:1.6;}
.foot-links{display:flex;flex-direction:column;gap:8px;}
.foot-links a{font-size:.875rem;color:var(--n400);transition:color 150ms;}
.foot-links a:hover{color:#fff;}
.foot-hr{border:none;border-top:1px solid var(--n700);margin:0;}
.foot-copy{text-align:center;padding-top:24px;font-size:.8125rem;color:var(--n500);}

/* ── Responsive ──────────────────────────────────── */
@media(max-width:960px){
  .hero-grid,.aud-grid{grid-template-columns:1fr;gap:40px;}
  .hero-img{max-width:560px;}
  .svc-grid{grid-template-columns:1fr;}
  .cap-grid{grid-template-columns:1fr;}
  .cap-block:not(:last-child){border-right:none;border-bottom:1px solid rgba(255,255,255,.1);}
  .team-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:640px){
  .section{padding:72px 0;}
  .hero{padding:108px 0 72px;}
  .hero h1{font-size:2.125rem;}
  .prob-grid{grid-template-columns:1fr;}
  .team-grid{grid-template-columns:repeat(2,1fr);gap:20px;}
  .foot-top{flex-direction:column;}
  .nav-links{display:none;}
}

/* ══════════════════════════════════════════════════════════════════════════
   ── WP ── Everything below is new: WordPress chrome, blog and prose.
   Same tokens as the design above — no new colours, fonts or shadows.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Admin bar ───────────────────────────────────────
   The nav is position:fixed at top:0, which the logged-in admin bar overlaps. */
body.admin-bar .nav{top:32px;}
@media screen and (max-width:782px){body.admin-bar .nav{top:46px;}}

/* ── Skip link ───────────────────────────────────── */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ac);color:#fff;padding:12px 20px;border-radius:0 0 12px 0;
  font-family:var(--fn);font-weight:600;font-size:.875rem;}
.skip-link:focus{left:0;}

/* Anchor targets clear the fixed nav when linked from another page. */
[id]{scroll-margin-top:84px;}

/* ── Nav menu (WP-managed) ───────────────────────────
   Mirrors the hard-coded .nav-links anchors when a menu is assigned in
   Appearance → Menus. */
.nav-menu{display:flex;align-items:center;gap:28px;}
.nav-menu li{display:block;}
.nav-menu a{font-size:.875rem;font-weight:500;color:var(--n600);transition:color 150ms;}
.nav-menu a:hover,.nav-menu .current-menu-item>a{color:var(--n900);}

/* ── Inner page header ───────────────────────────── */
.page-head{background:var(--gh);padding:136px 0 64px;}
.page-head .ew{margin-bottom:1rem;}
.page-head h1{font-family:var(--fs);font-size:clamp(2rem,4vw,3rem);font-weight:700;
  color:var(--n900);line-height:1.1;letter-spacing:-.02em;text-wrap:balance;}
.page-head .lead{font-size:1.0625rem;line-height:1.65;color:var(--n500);
  margin-top:1rem;max-width:640px;}
.page-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:1.25rem;
  font-family:var(--fn);font-size:.8125rem;color:var(--n500);}
.page-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--n300);}
.page-meta a{color:var(--ac);font-weight:500;}
.page-meta a:hover{text-decoration:underline;}

/* ── Post list ───────────────────────────────────── */
.post-list{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.post-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--n100);
  border-radius:16px;overflow:hidden;box-shadow:var(--sh-sm);
  transition:box-shadow 200ms var(--eo),transform 200ms var(--eo);}
.post-card:hover{box-shadow:var(--sh-md);transform:translateY(-2px);}
.post-thumb{aspect-ratio:16/9;overflow:hidden;background:var(--n50);}
.post-thumb img{width:100%;height:100%;object-fit:cover;}
.post-card-body{padding:24px;display:flex;flex-direction:column;flex:1;gap:.625rem;}
.post-card h2{font-family:var(--fs);font-size:1.25rem;font-weight:600;line-height:1.25;
  color:var(--n900);}
.post-card h2 a:hover{color:var(--ac);}
.post-card .post-date{font-size:.75rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--n400);}
.post-card .post-excerpt{font-size:.9375rem;line-height:1.65;color:var(--n500);}
.post-card .post-more{margin-top:auto;padding-top:.5rem;font-size:.875rem;font-weight:600;
  color:var(--ac);display:inline-flex;align-items:center;gap:6px;}
.post-card .post-more:hover{gap:10px;transition:gap 150ms var(--eo);}

.no-posts{text-align:center;color:var(--n500);padding:40px 0;}

/* ── Pagination ──────────────────────────────────── */
.pagination{display:flex;justify-content:center;gap:8px;margin-top:56px;}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 12px;border-radius:10px;border:1px solid var(--n200);
  font-family:var(--fn);font-size:.9375rem;font-weight:500;color:var(--n600);
  transition:border-color 150ms,color 150ms;}
.pagination .page-numbers:hover{border-color:var(--ac);color:var(--ac);}
.pagination .page-numbers.current{background:var(--ac);border-color:var(--ac);color:#fff;}
.pagination .dots{border-color:transparent;}

/* ── Prose (post + page content from the editor) ───
   The global reset strips list and heading margins, so normal document flow
   has to be restored inside editor content. */
.prose{font-size:1.0625rem;line-height:1.75;color:var(--n700);}
.prose > * + *{margin-top:1.25rem;}
.prose h2{font-family:var(--fs);font-size:1.75rem;font-weight:600;line-height:1.25;
  color:var(--n900);margin-top:2.5rem;}
.prose h3{font-family:var(--fn);font-size:1.1875rem;font-weight:700;line-height:1.35;
  color:var(--n900);margin-top:2rem;}
.prose h4{font-family:var(--fn);font-size:1.0625rem;font-weight:700;color:var(--n900);
  margin-top:1.5rem;}
.prose a{color:var(--ac);text-decoration:underline;text-underline-offset:2px;}
.prose a:hover{color:var(--ac2);}
.prose strong{font-weight:600;color:var(--n900);}
.prose ul,.prose ol{padding-left:1.5rem;}
.prose ul{list-style:disc;}
.prose ol{list-style:decimal;}
.prose li{margin-top:.5rem;}
.prose li::marker{color:var(--n400);}
.prose blockquote{border-left:3px solid var(--t500);padding:.25rem 0 .25rem 1.25rem;
  font-family:var(--fs);font-size:1.1875rem;font-style:italic;color:var(--n800);}
.prose img,.prose video{border-radius:16px;box-shadow:var(--sh-sm);}
.prose figure figcaption{font-size:.8125rem;color:var(--n500);text-align:center;
  margin-top:.625rem;}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.875em;
  background:var(--n50);border:1px solid var(--n100);border-radius:6px;padding:.125em .375em;}
.prose pre{background:var(--n900);color:var(--n50);border-radius:14px;padding:20px 24px;
  overflow-x:auto;font-size:.875rem;line-height:1.6;}
.prose pre code{background:none;border:none;padding:0;color:inherit;}
.prose hr{border:none;border-top:1px solid var(--n100);margin-top:2.5rem;}
.prose table{width:100%;border-collapse:collapse;font-size:.9375rem;display:block;
  overflow-x:auto;}
.prose th,.prose td{border:1px solid var(--n100);padding:10px 14px;text-align:left;}
.prose th{background:var(--n50);font-weight:600;color:var(--n900);}
.prose .wp-caption,.prose .alignwide{max-width:100%;}
.prose .aligncenter{margin-left:auto;margin-right:auto;}

/* ── Post navigation ─────────────────────────────── */
.post-nav{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:56px;padding-top:32px;border-top:1px solid var(--n100);}
.post-nav a{max-width:46%;font-family:var(--fn);}
.post-nav .lbl{display:block;font-size:.75rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--n400);margin-bottom:.25rem;}
.post-nav .ttl{font-weight:600;color:var(--n800);line-height:1.35;}
.post-nav a:hover .ttl{color:var(--ac);}
.post-nav .nxt{text-align:right;margin-left:auto;}

/* ── Featured image on single posts ──────────────── */
.post-hero-img{border-radius:20px;overflow:hidden;box-shadow:var(--sh-lg);
  margin-bottom:48px;aspect-ratio:16/9;}
.post-hero-img img{width:100%;height:100%;object-fit:cover;}

/* ── 404 ─────────────────────────────────────────── */
.err-code{font-family:var(--fs);font-size:clamp(4rem,12vw,7rem);font-weight:700;
  line-height:1;color:var(--n200);margin-bottom:1rem;}

/* ── Responsive ──────────────────────────────────── */
@media (max-width:960px){
  .post-list{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .post-list{grid-template-columns:1fr;}
  .page-head{padding:112px 0 48px;}
  .post-nav a{max-width:100%;}
  .post-nav .nxt{text-align:left;margin-left:0;}
}