/*
Theme Name: VITA Explorers Blog
Theme URI: https://www.vita-explorers.dk/blog/
Author: VITA Explorers
Author URI: https://www.vita-explorers.dk/
Description: Et varmt, redaktionelt blog-tema til VITA Explorers (Globalong). Minimal header med ét tilbage-link til hovedsiden, fremhævet artikel, kortgitter og citater fra deltagere. Bygget på VITAs visuelle identitet.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vita-blog
Tags: blog, two-columns, custom-logo, featured-images, translation-ready, editor-style
*/

/* ============================================================
   VITA Explorers — Blog theme (redesign mockup)
   Shared stylesheet for the index + single-article pages
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Newsreader:ital,opsz,wght@0,16..72,400;0,16..72,500;0,16..72,600;1,16..72,400;1,16..72,500&display=swap');

:root{
  /* Brand */
  --blue:        #005FCC;
  --blue-700:    #0a4ea6;
  --navy:        #0c2c50;   /* deep brand navy: footer, headings on light */
  --navy-900:    #081f3a;
  --red:         #e5391b;   /* CTA accent (from site buttons) */
  --red-600:     #cb2f12;

  /* Neutrals (warm) */
  --ink:         #1b2733;
  --muted:       #5d6b79;
  --faint:       #8694a2;
  --cream:       #faf6ef;
  --cream-2:     #f3ece0;
  --line:        #e7ddcd;
  --line-cool:   #e3e8ef;
  --white:       #ffffff;

  /* tunables (Tweaks) */
  --accent:      var(--red);
  --radius:      8px;
  --maxw:        1200px;

  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:  'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--white);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }

/* ---------- Eyebrow / labels ---------- */
.eyebrow{
  font-family:var(--sans);
  font-weight:700;
  font-size:12.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--blue);
}
.eyebrow.on-dark{ color:#9ec3f4; }
.eyebrow.red{ color:var(--accent); }

/* ============================================================
   TOP UTILITY BAR (thin blue strip — mirrors main site)
   ============================================================ */
.utility{
  background:var(--blue);
  color:#dfeaf8;
  font-size:13px;
}
.utility .wrap{
  display:flex; align-items:center; justify-content:flex-end;
  gap:26px; height:38px;
}
.utility a{ color:#eaf2fc; display:inline-flex; align-items:center; gap:7px; opacity:.92; }
.utility a:hover{ opacity:1; }
.utility .dot{ width:4px;height:4px;border-radius:50%;background:#ffffff66; }
.utility svg{ width:14px;height:14px;display:block; }

/* ============================================================
   HEADER — minimal: logo + single back link
   ============================================================ */
.masthead{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line-cool);
}
.masthead .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:74px; gap:20px;
}
.brand{ display:flex; align-items:center; gap:14px; }
.brand img{ height:42px; width:auto; }
.brand .blogtag{
  font-family:var(--sans); font-weight:800;
  font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--navy);
  padding-left:14px; margin-left:2px;
  border-left:1px solid var(--line-cool);
  line-height:1;
}
.back-link{
  display:inline-flex; align-items:center; gap:9px;
  font-weight:600; font-size:14.5px; color:var(--navy);
  padding:10px 18px; border-radius:999px;
  border:1px solid var(--line-cool);
  background:#fff;
  transition:all .18s ease;
  white-space:nowrap;
}
.back-link svg{ width:17px;height:17px; transition:transform .18s ease; }
.back-link:hover{ border-color:var(--blue); color:var(--blue); box-shadow:0 4px 14px rgba(0,95,204,.10); }
.back-link:hover svg{ transform:translateX(-3px); }

/* ============================================================
   FEATURED / HERO ARTICLE
   ============================================================ */
.featured{
  background:linear-gradient(180deg,#fff 0%, var(--cream) 100%);
  padding:46px 0 58px;
}
.featured-grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:46px; align-items:center;
}
.featured-media{
  position:relative; border-radius:var(--radius); overflow:hidden;
  aspect-ratio:4/3; background:var(--cream-2);
  box-shadow:0 24px 60px -28px rgba(12,44,80,.42);
}
.featured-media img{ width:100%; height:100%; object-fit:cover; }
.featured-media .ribbon{
  position:absolute; top:18px; left:18px;
  background:var(--accent); color:#fff;
  font-weight:700; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  padding:8px 14px; border-radius:6px;
}
.featured-body .kicker{ margin-bottom:16px; display:flex; align-items:center; gap:12px; }
.featured-body .cat{
  font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
}
.featured-body h1{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(34px,3.6vw,52px); line-height:1.06;
  letter-spacing:-.01em; color:var(--navy); margin:0 0 18px;
  text-wrap:balance;
}
.featured-body p{
  font-size:18px; color:var(--muted); margin:0 0 26px; max-width:46ch;
}
.meta-row{
  display:flex; align-items:center; gap:14px; color:var(--faint);
  font-size:13.5px; font-weight:500; margin-bottom:28px;
}
.meta-row .av{ width:34px;height:34px;border-radius:50%;object-fit:cover;background:var(--cream-2); }
.meta-row .sep{ width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:600; font-size:15px; cursor:pointer;
  padding:13px 24px; border-radius:999px; border:1px solid transparent;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn svg{ width:17px;height:17px; }
.btn-primary{ background:var(--accent); color:#fff; box-shadow:0 10px 24px -10px var(--accent); }
.btn-primary:hover{ transform:translateY(-2px); }
.btn-blue{ background:var(--blue); color:#fff; box-shadow:0 10px 24px -12px var(--blue); }
.btn-blue:hover{ transform:translateY(-2px); }
.btn-ghost{ background:#fff; color:var(--navy); border-color:var(--line-cool); }
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue); }
.btn-text{ color:var(--blue); font-weight:700; gap:7px; padding:0; }
.btn-text svg{ width:15px;height:15px; transition:transform .18s ease; }
.btn-text:hover svg{ transform:translateX(4px); }

/* ============================================================
   CATEGORY FILTER (blog-only chips, not site nav)
   ============================================================ */
.filterbar{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--white); }
.filterbar .wrap{ display:flex; align-items:center; gap:10px; padding-top:16px; padding-bottom:16px; flex-wrap:wrap; }
.filterbar .lbl{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-right:6px; }
.chip{
  font-weight:600; font-size:14px; color:var(--navy);
  padding:8px 16px; border-radius:999px; border:1px solid var(--line-cool);
  background:#fff; cursor:pointer; transition:all .16s ease; white-space:nowrap;
}
.chip:hover{ border-color:var(--blue); color:var(--blue); }
.chip.active{ background:var(--navy); border-color:var(--navy); color:#fff; }

/* ============================================================
   ARTICLE GRID
   ============================================================ */
.section{ padding:64px 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:34px; }
.section-head h2{
  font-family:var(--sans); font-weight:800;
  font-size:clamp(22px,2.4vw,30px); letter-spacing:.01em; text-transform:uppercase;
  color:var(--navy); margin:6px 0 0; line-height:1.1;
}
.section-head p{ margin:0; color:var(--muted); font-size:16px; }

.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px 30px; }

.card{
  display:flex; flex-direction:column;
  background:#fff; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line-cool);
  transition:transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 26px 50px -28px rgba(12,44,80,.35); border-color:transparent; }
.card-media{ position:relative; aspect-ratio:16/10; background:var(--cream-2); overflow:hidden; }
.card-media img{ width:100%;height:100%;object-fit:cover; transition:transform .5s ease; }
.card:hover .card-media img{ transform:scale(1.05); }
.card-tag{
  position:absolute; top:13px; left:13px;
  background:rgba(255,255,255,.94); color:var(--navy);
  font-weight:700; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  padding:6px 11px; border-radius:6px;
}
.card-body{ padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.card-body h3{
  font-family:var(--serif); font-weight:500; font-size:22px; line-height:1.18;
  color:var(--navy); margin:0 0 10px; letter-spacing:-.005em;
}
.card:hover .card-body h3{ color:var(--blue); }
.card-body p{ margin:0 0 18px; color:var(--muted); font-size:15px; line-height:1.55; }
.card-meta{ margin-top:auto; display:flex; align-items:center; gap:10px; color:var(--faint); font-size:13px; font-weight:500; }
.card-meta .sep{ width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6; }

/* ============================================================
   TESTIMONIAL BAND (blue) — "voices from the field"
   ============================================================ */
.voices{ background:var(--blue); color:#eaf2fc; position:relative; overflow:hidden; }
.voices::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(900px 400px at 85% -10%, rgba(255,255,255,.10), transparent 60%);
  pointer-events:none;
}
.voices .wrap{ position:relative; padding:70px 28px 76px; }
.voices .vhead{ text-align:center; max-width:640px; margin:0 auto 46px; }
.voices .vhead h2{
  font-family:var(--serif); font-weight:500; font-size:clamp(28px,3vw,40px);
  line-height:1.12; color:#fff; margin:12px 0 0;
}
.voices-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.vcard{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius); padding:28px 26px; backdrop-filter:blur(2px);
  display:flex; flex-direction:column;
}
.vcard .quote{ font-family:var(--serif); font-style:italic; font-size:19px; line-height:1.45; color:#fff; margin:0 0 22px; }
.vcard .who{ margin-top:auto; display:flex; align-items:center; gap:13px; }
.vcard .who img{ width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.4); }
.vcard .who .n{ font-weight:700; color:#fff; font-size:15px; }
.vcard .who .c{ font-size:13px; color:#bcd5f4; }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta{ background:var(--cream); border-top:1px solid var(--line); }
.cta .wrap{ display:flex; align-items:center; justify-content:space-between; gap:40px; padding:54px 28px; flex-wrap:wrap; }
.cta h2{ font-family:var(--serif); font-weight:500; font-size:clamp(26px,2.8vw,38px); color:var(--navy); margin:0 0 8px; max-width:18ch; line-height:1.1; }
.cta p{ margin:0; color:var(--muted); font-size:17px; max-width:42ch; }
.cta .actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--navy-900); color:#aab9cb; padding:62px 0 30px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
.foot-brand img{ height:40px; margin-bottom:18px; filter:brightness(0) invert(1); opacity:.96; }
.foot-brand p{ font-size:14.5px; line-height:1.6; max-width:34ch; color:#90a2b6; margin:0 0 22px; }
.foot-social{ display:flex; gap:12px; }
.foot-social a{ width:38px;height:38px;border-radius:50%; display:grid;place-items:center; background:rgba(255,255,255,.07); transition:background .2s ease; }
.foot-social a:hover{ background:var(--blue); }
.foot-social svg{ width:17px;height:17px;fill:#dce6f1; }
.foot-col h4{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#fff; margin:6px 0 18px; }
.foot-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.foot-col a{ font-size:14.5px; color:#9fb0c3; transition:color .16s ease; }
.foot-col a:hover{ color:#fff; }
.foot-bottom{
  margin-top:48px; padding-top:24px; border-top:1px solid rgba(255,255,255,.10);
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:13px; color:#7e90a4;
}
.foot-bottom a{ color:#9fb0c3; } .foot-bottom a:hover{ color:#fff; }
.foot-bottom .links{ display:flex; gap:20px; flex-wrap:wrap; }

/* ============================================================
   SINGLE ARTICLE
   ============================================================ */
.article-head{ background:var(--cream); padding:44px 0 0; }
.article-head .wrap{ max-width:860px; }
.crumbs{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--faint); font-weight:500; margin-bottom:22px; }
.crumbs a:hover{ color:var(--blue); }
.crumbs svg{ width:13px;height:13px;opacity:.6; }
.article-head .cat{ font-weight:700; font-size:12.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--accent); }
.article-head h1{
  font-family:var(--serif); font-weight:500; font-size:clamp(32px,4.4vw,56px);
  line-height:1.07; letter-spacing:-.015em; color:var(--navy); margin:14px 0 20px; text-wrap:balance;
}
.article-head .lede{ font-size:20px; line-height:1.55; color:var(--muted); margin:0 0 28px; }
.byline{ display:flex; align-items:center; gap:13px; padding-bottom:40px; }
.byline img{ width:46px;height:46px;border-radius:50%;object-fit:cover; }
.byline .n{ font-weight:700; color:var(--navy); font-size:15px; }
.byline .d{ font-size:13.5px; color:var(--faint); display:flex; align-items:center; gap:9px; }
.byline .d .sep{ width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6; }

.hero-figure{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.hero-figure .img{
  width:100%; aspect-ratio:16/8; border-radius:var(--radius); overflow:hidden; background:var(--cream-2);
  box-shadow:0 30px 70px -34px rgba(12,44,80,.4); margin-top:-1px;
}
.hero-figure img{ width:100%;height:100%;object-fit:cover; }
.hero-figure figcaption{ font-size:13px; color:var(--faint); margin-top:12px; padding-left:2px; }

.prose{ max-width:720px; margin:0 auto; padding:54px 28px 20px; }
.prose p{ font-size:18.5px; line-height:1.72; color:#33424f; margin:0 0 24px; }
.prose h2{ font-family:var(--sans); font-weight:800; font-size:26px; color:var(--navy); margin:46px 0 16px; letter-spacing:.005em; }
.prose h3{ font-family:var(--serif); font-weight:600; font-size:23px; color:var(--navy); margin:34px 0 12px; }
.prose ul{ margin:0 0 24px; padding-left:4px; list-style:none; }
.prose li{ position:relative; padding-left:30px; margin-bottom:13px; font-size:18px; color:#33424f; line-height:1.6; }
.prose li::before{ content:""; position:absolute; left:4px; top:11px; width:9px;height:9px;border-radius:2px; background:var(--accent); transform:rotate(45deg); }
.prose a.inline{ color:var(--blue); font-weight:600; border-bottom:1.5px solid #aecdf3; }
.prose a.inline:hover{ border-color:var(--blue); }
.prose figure{ margin:38px 0; }
.prose figure img{ width:100%; border-radius:var(--radius); }
.prose figcaption{ font-size:13.5px; color:var(--faint); margin-top:11px; }

.pullquote{
  border-left:4px solid var(--blue); background:var(--cream);
  padding:26px 30px; border-radius:0 var(--radius) var(--radius) 0; margin:38px 0;
}
.pullquote p{ font-family:var(--serif); font-style:italic; font-size:24px; line-height:1.4; color:var(--navy); margin:0; }
.pullquote cite{ display:block; font-style:normal; font-family:var(--sans); font-weight:600; font-size:14px; color:var(--blue); margin-top:14px; }

.share{ max-width:720px; margin:18px auto 0; padding:24px 28px; display:flex; align-items:center; gap:16px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.share .lbl{ font-weight:700; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.share .btns{ display:flex; gap:10px; margin-left:auto; }
.share .btns a{ width:40px;height:40px;border-radius:50%; display:grid;place-items:center; border:1px solid var(--line-cool); transition:all .18s ease; }
.share .btns a:hover{ background:var(--navy); border-color:var(--navy); }
.share .btns a:hover svg{ fill:#fff; }
.share .btns svg{ width:16px;height:16px;fill:var(--navy); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .featured-grid{ grid-template-columns:1fr; gap:30px; }
  .featured-media{ aspect-ratio:16/10; }
  .grid{ grid-template-columns:repeat(2,1fr); }
  .voices-grid{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:34px; }
}
@media (max-width:640px){
  body{ font-size:16px; }
  .wrap{ padding:0 18px; }
  .masthead .wrap{ height:64px; }
  .brand img{ height:34px; }
  .brand .blogtag{ display:none; }
  .back-link{ padding:9px 14px; font-size:13.5px; }
  .utility .wrap{ justify-content:center; gap:16px; }
  .grid{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  .cta .wrap{ flex-direction:column; align-items:flex-start; }
  .section{ padding:48px 0; }
}

/* ---------- Entrance: content is always visible (capture-safe). ---------- */
.reveal{ }

/* ---------- Density (Tweaks) ---------- */
body[data-density="compact"] .section{ padding:46px 0; }
body[data-density="compact"] .grid{ gap:26px 24px; }
body[data-density="compact"] .featured{ padding:34px 0 44px; }
body[data-density="comfy"] .section{ padding:84px 0; }
body[data-density="comfy"] .grid{ gap:44px 38px; }
body[data-density="comfy"] .featured{ padding:58px 0 72px; }


/* ============================================================
   WORDPRESS ADDITIONS
   ============================================================ */
.screen-reader-text{
  border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%);
  height:1px; width:1px; margin:-1px; overflow:hidden; padding:0; position:absolute !important; word-wrap:normal !important;
}
.skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background:#fff; color:var(--blue); padding:12px 18px; border-radius:0 0 8px 0; font-weight:700; }
.skip-link:focus{ left:0; }

/* Ordered lists in prose */
.prose ol{ margin:0 0 24px; padding-left:4px; list-style:none; counter-reset:vita; }
.prose ol li{ position:relative; padding-left:38px; margin-bottom:13px; font-size:18px; color:#33424f; line-height:1.6; counter-increment:vita; }
.prose ol li::before{ content:counter(vita); position:absolute; left:0; top:1px; width:26px; height:26px; border-radius:50%; background:var(--blue); color:#fff; font-family:var(--sans); font-weight:700; font-size:13px; display:grid; place-items:center; transform:none; }

/* Gutenberg blocks inside .prose */
.prose .wp-block-image{ margin:38px 0; }
.prose .wp-block-image img{ width:100%; border-radius:var(--radius); display:block; }
.prose .wp-block-image figcaption{ font-size:13.5px; color:var(--faint); margin-top:11px; text-align:left; }
.prose .wp-block-quote{ border-left:4px solid var(--blue); background:var(--cream); padding:26px 30px; border-radius:0 var(--radius) var(--radius) 0; margin:38px 0; }
.prose .wp-block-quote p{ font-family:var(--serif); font-style:italic; font-size:24px; line-height:1.4; color:var(--navy); margin:0; }
.prose .wp-block-quote cite{ display:block; font-style:normal; font-family:var(--sans); font-weight:600; font-size:14px; color:var(--blue); margin-top:14px; }
.prose .wp-block-pullquote{ border:none; }
.prose blockquote:not(.wp-block-quote){ border-left:4px solid var(--blue); background:var(--cream); padding:22px 28px; border-radius:0 var(--radius) var(--radius) 0; margin:32px 0; font-family:var(--serif); font-style:italic; font-size:22px; color:var(--navy); }
.prose img.alignleft{ float:left; margin:8px 28px 18px 0; max-width:46%; border-radius:var(--radius); }
.prose img.alignright{ float:right; margin:8px 0 18px 28px; max-width:46%; border-radius:var(--radius); }
.prose .aligncenter{ margin-left:auto; margin-right:auto; }
.prose figure.alignwide{ width:min(96vw,980px); margin-left:50%; transform:translateX(-50%); }

.sticky-flag{ display:inline-flex; align-items:center; gap:7px; }

/* Pagination */
.pagination{ display:flex; justify-content:center; gap:8px; margin-top:50px; flex-wrap:wrap; }
.pagination .page-numbers{
  display:inline-grid; place-items:center; min-width:44px; height:44px; padding:0 14px;
  border:1px solid var(--line-cool); border-radius:999px; background:#fff; color:var(--navy);
  font-weight:600; font-size:15px; transition:all .16s ease;
}
.pagination .page-numbers:hover{ border-color:var(--blue); color:var(--blue); }
.pagination .page-numbers.current{ background:var(--navy); border-color:var(--navy); color:#fff; }
.pagination .page-numbers.dots{ border:none; background:none; }

/* Archive / search header */
.page-hero{ background:var(--cream); border-bottom:1px solid var(--line); padding:54px 0; }
.page-hero h1{ font-family:var(--serif); font-weight:500; font-size:clamp(30px,3.4vw,46px); color:var(--navy); margin:10px 0 8px; line-height:1.08; }
.page-hero p{ margin:0; color:var(--muted); font-size:17px; max-width:54ch; }

/* Search form */
.search-form{ display:flex; gap:10px; max-width:420px; }
.search-form input[type=search]{ flex:1; padding:12px 16px; border:1px solid var(--line-cool); border-radius:999px; font-family:var(--sans); font-size:15px; }
.search-form input[type=search]:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,95,204,.12); }

/* Comments */
.comments{ max-width:720px; margin:10px auto 0; padding:46px 28px 0; }
.comments h2{ font-family:var(--sans); font-weight:800; font-size:22px; color:var(--navy); text-transform:uppercase; letter-spacing:.02em; margin:0 0 24px; }
.comment-list{ list-style:none; margin:0 0 30px; padding:0; display:flex; flex-direction:column; gap:24px; }
.comment-list .comment-body{ background:var(--cream); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; }
.comment-author{ font-weight:700; color:var(--navy); }
.comment-meta{ font-size:13px; color:var(--faint); margin-bottom:8px; }
.comment-respond input[type=text],.comment-respond input[type=email],.comment-respond input[type=url],.comment-respond textarea{
  width:100%; padding:12px 15px; border:1px solid var(--line-cool); border-radius:10px; font-family:var(--sans); font-size:15px; margin-bottom:14px;
}
.comment-respond textarea:focus,.comment-respond input:focus{ outline:none; border-color:var(--blue); }

/* No-thumbnail fallback for cards/figures */
.ph{ width:100%; height:100%; background:
  repeating-linear-gradient(135deg, var(--cream-2) 0 14px, #ece3d3 14px 28px);
  display:grid; place-items:center; color:#b9a98c; font-family:var(--sans); font-size:12px; letter-spacing:.1em; text-transform:uppercase; }

@media (max-width:640px){
  .prose img.alignleft,.prose img.alignright{ float:none; max-width:100%; margin:18px 0; }
}