/* ============================================
   GVP — pages.css
   Components for generated pages: case studies, Performance Lab,
   articles, regional pages, and the website review tool.
   Builds on the tokens in styles.css.
   ============================================ */

/* ---- Breadcrumbs ---- */
.crumbs-wrap { padding-top: var(--sp-5); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--sp-2); list-style: none; font-size: var(--text-xs); color: var(--ivory-dim); }
.crumbs li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.crumbs li + li::before { content: "/"; color: var(--ivory-faint); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-color: var(--border-hover); text-underline-offset: 3px; }
.crumbs a:hover { color: var(--ivory); text-decoration-color: var(--gold); }
.crumbs [aria-current] { color: var(--ivory); }

/* ---- Page hero ---- */
.page-hero { padding: var(--sp-6) 0 var(--sp-8); border-bottom: 1px solid var(--border); position: relative; overflow: hidden; }
.page-hero::before {
  content: ""; position: absolute; top: -200px; right: -120px; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(200,168,75,0.07) 0%, transparent 70%); pointer-events: none;
}
.page-title {
  font-family: var(--font-serif); font-weight: 500; line-height: 1.06; letter-spacing: -0.01em;
  font-size: clamp(36px, 5.2vw, 64px); max-width: 20ch; text-wrap: balance; margin-bottom: var(--sp-5);
}
.page-title em { font-style: italic; color: var(--gold-pale); }
.page-title--post { font-size: clamp(32px, 4.4vw, 52px); max-width: 24ch; }
.page-sub-lead { font-size: var(--text-md); color: var(--ivory-dim); font-weight: 300; line-height: 1.75; max-width: 62ch; margin-bottom: var(--sp-6); }
.page-hero .hero-cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin: 0; }
.page-hero .project-flag { margin-bottom: var(--sp-4); }

.section--tight { padding: var(--sp-9) 0; }
.section-title--sm { font-size: var(--text-xl); }
.container--narrow { width: min(760px, calc(100% - 56px)); margin: 0 auto; }
@media (max-width: 480px) { .container--narrow { width: calc(100% - 32px); } }
.btn-row--start { justify-content: flex-start; margin-top: var(--sp-5); }
.prose-p { color: var(--ivory-dim); line-height: 1.8; margin-bottom: var(--sp-4); max-width: 64ch; }
.prose-p a, .lh-note a, .faq-answer a, .explain-card a { color: var(--gold-pale); text-decoration: underline; text-underline-offset: 3px; }
.lh-note { font-size: var(--text-sm); color: var(--ivory-dim); margin-top: var(--sp-3); max-width: 72ch; }
.more-link { margin-top: var(--sp-5); }
.more-link a { display: inline-flex; min-height: 44px; align-items: center; color: var(--gold-pale); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Lists ---- */
.check-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.check-list li { position: relative; padding-left: var(--sp-6); color: var(--ivory-dim); line-height: 1.6; }
.check-list li::before {
  content: ""; position: absolute; left: 4px; top: 0.45em; width: 10px; height: 5px;
  border-left: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); transform: rotate(-45deg);
}
.check-list--boxes li::before { width: 14px; height: 14px; left: 0; top: 0.3em; border: 1.5px solid var(--gold); border-radius: 3px; transform: none; }
.steps-list { list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: var(--sp-4); }
.steps-list li { counter-increment: s; position: relative; padding-left: 44px; color: var(--ivory-dim); line-height: 1.65; }
.steps-list li::before {
  content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: -2px;
  font-family: var(--font-serif); font-size: var(--text-lg); color: var(--gold);
}
.steps-list strong { color: var(--ivory); font-weight: 600; }
.chip-list { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.chip-list li {
  padding: 4px 10px; border-radius: var(--r-full); font-size: var(--text-xs);
  background: var(--ivory-ghost); border: 1px solid var(--border); color: var(--ivory-dim);
}

/* ---- Case study ---- */
.case-visual { padding: var(--sp-7) 0 0; }
.case-shot { margin: 0; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--border-gold); background: var(--bg-card); box-shadow: var(--shadow-lg); }
.case-shot .project-img-wrap { aspect-ratio: 16 / 9; }
.case-shot figcaption { padding: var(--sp-3) var(--sp-4); font-size: var(--text-xs); color: var(--ivory-dim); border-top: 1px solid var(--border); }
.case-facts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4) var(--sp-5);
  margin: var(--sp-6) 0 0; padding: var(--sp-5); border-radius: var(--r-xl); border: 1px solid var(--border); background: var(--bg-card);
}
.case-facts dt { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.case-facts dd { margin: 0; color: var(--ivory); font-size: var(--text-sm); }
.case-facts dd a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-gold); }
.case-facts-wide { grid-column: span 2; }
.case-columns { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--sp-8); align-items: start; }
.solution-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-4); counter-reset: sol; }
.solution-list li {
  counter-increment: sol; position: relative; padding: var(--sp-4) var(--sp-5) var(--sp-4) 64px;
  border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--bg-card);
}
.solution-list li::before {
  content: counter(sol, decimal-leading-zero); position: absolute; left: var(--sp-5); top: var(--sp-4);
  font-family: var(--font-serif); color: var(--gold); font-size: var(--text-md);
}
.solution-list h3 { font-size: var(--text-base); font-weight: 600; margin-bottom: 4px; color: var(--ivory); }
.solution-list p { font-size: var(--text-sm); color: var(--ivory-dim); line-height: 1.65; }
.demonstrates { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--sp-7); align-items: start; }
.projects-grid--two { grid-template-columns: repeat(2, 1fr); }
.reviews-grid--single { grid-template-columns: 1fr; }
.reviews-grid--single .review { grid-column: auto; }
.reviews-grid--pair { grid-template-columns: repeat(2, 1fr); }
.reviews-grid--pair .review { grid-column: auto; }
.reviews-grid--pair .review:only-child { grid-column: span 2; }
@media (max-width: 1000px) {
  .case-columns, .demonstrates { grid-template-columns: 1fr; gap: var(--sp-6); }
  .case-facts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .projects-grid--two, .reviews-grid--pair { grid-template-columns: 1fr; }
  .reviews-grid--pair .review:only-child { grid-column: auto; }
  .case-facts { grid-template-columns: 1fr; }
  .case-facts-wide { grid-column: auto; }
  .solution-list li { padding-left: var(--sp-5); padding-top: 44px; }
}

/* ---- Score rings ---- */
.ring-row { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.ring { position: relative; width: var(--size, 88px); display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.ring svg { width: var(--size, 88px); height: var(--size, 88px); transform: rotate(-90deg); }
.ring-track { fill: none; stroke: rgba(245,240,232,0.1); stroke-width: 3; }
.ring-arc { fill: none; stroke-width: 3; stroke-linecap: round; }
.ring--good .ring-arc { stroke: #5fc488; }
.ring--ok .ring-arc { stroke: #e3a64b; }
.ring--poor .ring-arc { stroke: #f08a8a; }
.ring-num {
  position: absolute; top: 0; left: 0; width: var(--size, 88px); height: var(--size, 88px);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: calc(var(--size, 88px) * 0.32); color: var(--ivory);
}
.ring--none .ring-num { color: var(--ivory-dim); }
.ring-label { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ivory-dim); text-align: center; line-height: 1.3; }
.lh-device { padding: var(--sp-5) 0; border-top: 1px solid var(--border); }
.lh-device:first-of-type { border-top: 0; padding-top: 0; }
.lh-device-title { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ivory); margin-bottom: var(--sp-4); }

/* ---- CTA band ---- */
.cta-band { padding: var(--sp-9) 0; border-top: 1px solid var(--border); }
.cta-band-inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap;
  padding: var(--sp-7); border-radius: var(--r-2xl); border: 1px solid var(--border-gold);
  background: radial-gradient(120% 140% at 100% 0%, rgba(200,168,75,0.12), transparent 60%), var(--bg-card);
}
.cta-band-title { font-family: var(--font-serif); font-size: var(--text-xl); font-weight: 500; line-height: 1.2; max-width: 26ch; margin-bottom: var(--sp-2); }
.cta-band p { color: var(--ivory-dim); max-width: 50ch; }
@media (max-width: 640px) { .cta-band-inner { padding: var(--sp-6) var(--sp-5); } .cta-band .btn-row { width: 100%; } .cta-band .btn { flex: 1 1 100%; } }

/* ---- FAQ (details) ---- */
.faq-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.faq-item-d { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-card); }
.faq-item-d summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  min-height: 52px; padding: var(--sp-3) var(--sp-4); font-weight: 500; color: var(--ivory);
}
.faq-item-d summary::-webkit-details-marker { display: none; }
.faq-item-d summary::after { content: "+"; font-size: 20px; color: var(--gold); flex-shrink: 0; }
.faq-item-d[open] summary::after { content: "−"; }
.faq-answer { padding: 0 var(--sp-4) var(--sp-4); color: var(--ivory-dim); line-height: 1.7; font-size: var(--text-sm); }

/* ---- Two-column prose / explain cards ---- */
.two-col-prose { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: start; }
@media (max-width: 900px) { .two-col-prose { grid-template-columns: 1fr; gap: var(--sp-7); } }
.explain-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.explain-card { padding: var(--sp-5); border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--bg-card); }
.explain-card h3 { font-family: var(--font-serif); font-size: var(--text-lg); font-weight: 500; margin-bottom: var(--sp-3); }
.explain-card p { font-size: var(--text-sm); color: var(--ivory-dim); line-height: 1.7; }
.explain-card p + p { margin-top: var(--sp-2); }
.explain-card strong { color: var(--ivory); font-weight: 600; }
@media (max-width: 720px) { .explain-grid { grid-template-columns: 1fr; } }

/* ---- Stat tiles ---- */
.stat-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin: 0; }
.stat-tile { display: flex; flex-direction: column-reverse; gap: var(--sp-2); padding: var(--sp-5); border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--bg-card); }
.stat-tile dd { margin: 0; font-family: var(--font-serif); font-size: var(--text-2xl); line-height: 1; color: var(--gold-pale); }
.stat-tile dd.stat-tile-date { font-size: var(--text-lg); line-height: 1.2; }
.stat-tile dt { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ivory-dim); }
@media (max-width: 900px) { .stat-tiles { grid-template-columns: 1fr 1fr; } }

/* ---- Performance Lab ---- */
.lab-filters { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: flex-end; margin-bottom: var(--sp-5); }
.lab-filters .field { min-width: 200px; flex: 1 1 200px; }
.lab-count { font-size: var(--text-sm); color: var(--ivory-dim); flex: 1 1 100%; }
.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-card); margin-bottom: var(--sp-7); }
.table-wrap:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.lab-table, .compare-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.lab-table { min-width: 860px; }
.lab-table th, .lab-table td, .compare-table th, .compare-table td { padding: var(--sp-3) var(--sp-4); text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.lab-table thead th, .compare-table thead th { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ivory-dim); background: var(--charcoal-3); }
.lab-table tbody tr:last-child > *, .compare-table tbody tr:last-child > * { border-bottom: 0; }
.lab-table th[scope="row"] a { color: var(--ivory); text-decoration: underline; text-decoration-color: var(--border-hover); text-underline-offset: 3px; }
.lab-table td a { color: var(--gold-pale); text-decoration: underline; text-underline-offset: 3px; }
.cell-sub { display: block; font-size: var(--text-xs); color: var(--ivory-dim); font-weight: 400; }
.num { text-align: center !important; }
.nr { color: var(--ivory-dim); }
.pill { display: inline-block; min-width: 40px; padding: 2px 10px; border-radius: var(--r-full); font-weight: 600; text-align: center; color: var(--ivory); }
.pill--good { background: rgba(95,196,136,0.14); border: 1px solid rgba(95,196,136,0.45); }
.pill--ok { background: rgba(227,166,75,0.14); border: 1px solid rgba(227,166,75,0.45); }
.pill--poor { background: rgba(240,138,138,0.14); border: 1px solid rgba(240,138,138,0.45); }
.compare-table td, .compare-table th[scope="row"] { color: var(--ivory-dim); }
.compare-table th[scope="row"] { color: var(--ivory); font-weight: 500; }
.compare-table { min-width: 640px; }

.bar-chart { margin: 0; padding: var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-card); }
.bar-cap { font-weight: 600; color: var(--ivory); margin-bottom: var(--sp-4); }
.bar-cap span { display: block; font-weight: 400; font-size: var(--text-xs); color: var(--ivory-dim); }
.bar-axis, .bar-row { display: grid; grid-template-columns: minmax(120px, 220px) 1fr 44px; gap: var(--sp-3); align-items: center; }
.bar-axis { position: relative; font-size: var(--text-2xs); color: var(--ivory-dim); margin-bottom: var(--sp-2); }
.bar-scale { position: relative; height: 16px; }
.bar-scale i { position: absolute; top: 0; transform: translateX(-50%); font-style: normal; }
.bar-scale i:first-child { transform: none; }
.bar-scale i:last-child { transform: translateX(-100%); }
.bars { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.bar-name { font-size: var(--text-sm); color: var(--ivory); min-height: 32px; display: inline-flex; align-items: center; text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; }
.bar-name:hover { text-decoration-color: var(--gold); }
.bar-track {
  position: relative; height: 18px; border-radius: 4px;
  background: rgba(245,240,232,0.05);
}
.bar-track::after { content: ""; position: absolute; top: -3px; bottom: -3px; left: 90%; width: 2px; background: var(--ivory); opacity: 0.55; z-index: 1; }
.bar-fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 1%); background: var(--gold); border-radius: 0 4px 4px 0; }
.bar-val { font-family: var(--font-serif); font-size: var(--text-md); color: var(--ivory); text-align: right; }
.bar-foot { font-size: var(--text-xs); color: var(--ivory-dim); margin-top: var(--sp-4); }
@media (max-width: 560px) {
  .bar-axis, .bar-row { grid-template-columns: 1fr 40px; }
  .bar-name { grid-column: 1 / -1; min-height: 0; }
  .bar-axis > span:first-child { display: none; }
}

/* ---- Article / guide ---- */
.article-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--sp-8); padding: var(--sp-8) 0 var(--sp-9); align-items: start; }
.toc { position: sticky; top: 100px; font-size: var(--text-sm); }
.toc-title { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--sp-3); }
.toc ol { list-style: none; display: flex; flex-direction: column; border-left: 1px solid var(--border); }
.toc a { display: flex; align-items: center; min-height: 36px; padding-left: var(--sp-3); color: var(--ivory-dim); }
.toc a:hover { color: var(--ivory); border-left: 1px solid var(--gold); margin-left: -1px; }
@media (max-width: 960px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .toc { position: static; padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg); }
}
.prose { max-width: 70ch; color: var(--ivory-dim); font-size: var(--text-md); line-height: 1.8; font-weight: 300; }
.prose > * + * { margin-top: var(--sp-4); }
.prose h2 { font-family: var(--font-serif); font-size: var(--text-xl); font-weight: 500; line-height: 1.25; color: var(--ivory); margin-top: var(--sp-8); scroll-margin-top: 96px; }
.prose h3 { font-size: var(--text-md); font-weight: 600; color: var(--ivory); margin-top: var(--sp-6); }
.prose strong { color: var(--ivory); font-weight: 600; }
.prose a { color: var(--gold-pale); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li::marker { color: var(--gold); }
.prose code { font-size: 0.9em; padding: 1px 6px; border-radius: 4px; background: var(--charcoal-3); color: var(--ivory); }
.prose .table-wrap { margin: var(--sp-5) 0; }
.prose .check-list, .prose .steps-list { padding-left: 0; list-style: none; }
.lede { font-size: var(--text-lg); color: var(--ivory); line-height: 1.7; }
.cite { font-size: 0.7em; margin-left: 1px; }
.cite a { text-decoration: none; padding: 0 2px; color: var(--gold); }
.callout { padding: var(--sp-5); border-radius: var(--r-lg); border: 1px solid var(--border-gold); background: var(--gold-ghost); }
.callout-title { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--sp-2); }
.my-take { padding-left: var(--sp-4); border-left: 2px solid var(--gold); }
.six-q { list-style: none !important; counter-reset: q; padding-left: 0 !important; }
.six-q li { counter-increment: q; position: relative; padding: var(--sp-3) var(--sp-4) var(--sp-3) 56px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-card); }
.six-q li::before { content: counter(q); position: absolute; left: var(--sp-4); top: var(--sp-3); font-family: var(--font-serif); color: var(--gold); font-size: var(--text-lg); line-height: 1.4; }
.example-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.example-card { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--border); background: var(--bg-card); text-decoration: none !important; }
.example-card:hover { border-color: var(--border-gold); }
.example-label { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.example-text { font-size: var(--text-sm); color: var(--ivory-dim); line-height: 1.6; }
@media (max-width: 640px) { .example-grid { grid-template-columns: 1fr; } }
.sources { font-size: var(--text-sm); }
.sources li { scroll-margin-top: 100px; }
.sources span { display: block; color: var(--ivory-dim); font-size: var(--text-xs); }
.sources li:target { background: var(--gold-ghost); border-radius: 4px; }
.before-after { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.before-after > div { padding: var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--border); background: var(--bg-card); }
.before-after > div:last-child { border-color: var(--border-gold); }
.ba-label { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--sp-2); }
@media (max-width: 640px) { .before-after { grid-template-columns: 1fr; } }

/* ---- Blog ---- */
.cat-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-7); }
.cat-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: 0 var(--sp-4);
  border-radius: var(--r-full); border: 1px solid var(--border-hover); font-size: var(--text-sm); color: var(--ivory);
}
.cat-chip span { color: var(--gold); font-weight: 600; }
.cat-chip:hover { border-color: var(--gold); }
.cat-section + .cat-section { margin-top: var(--sp-8); }
.cat-section { scroll-margin-top: 96px; }
.cat-title { font-family: var(--font-serif); font-size: var(--text-xl); font-weight: 500; margin-bottom: var(--sp-5); }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
@media (max-width: 1000px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-card { position: relative; display: flex; flex-direction: column; border-radius: var(--r-xl); border: 1px solid var(--border); background: var(--bg-card); overflow: hidden; }
.blog-card:hover { border-color: var(--border-gold); }
.blog-card:has(.card-link:focus-visible) { outline: 2px solid var(--gold); outline-offset: 4px; }
.blog-card-cover { display: block; aspect-ratio: 1200 / 630; border-bottom: 1px solid var(--border); }
.cover { display: block; width: 100%; height: 100%; }
.blog-card-body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.blog-card-meta { font-size: var(--text-xs); color: var(--ivory-dim); }
.blog-card-meta span { color: var(--gold); font-weight: 600; letter-spacing: 0.06em; }
.blog-card-title { font-family: var(--font-serif); font-size: var(--text-lg); font-weight: 500; line-height: 1.3; color: var(--ivory); }
.blog-card-body p:last-child { font-size: var(--text-sm); color: var(--ivory-dim); line-height: 1.65; }
.post-head { padding: var(--sp-6) 0 var(--sp-6); }
.post-head .section-label a { color: inherit; display: inline-flex; min-height: 44px; align-items: center; }
.post-meta { font-size: var(--text-sm); color: var(--ivory-dim); }
.post-meta a { color: var(--ivory); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-gold); }
.post-cover { border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--border); margin-bottom: var(--sp-7); aspect-ratio: 1200 / 630; }
.post .prose { margin-bottom: var(--sp-8); }
.author-box { display: flex; gap: var(--sp-4); align-items: flex-start; padding: var(--sp-5); border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--bg-card); margin-bottom: var(--sp-9); }
.author-box img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--border-gold); flex-shrink: 0; }
.author-name { font-weight: 600; color: var(--ivory); }
.author-box p { font-size: var(--text-sm); color: var(--ivory-dim); }
.author-box a { color: var(--gold-pale); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Regional ---- */
.town-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.town { padding: var(--sp-5); border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--bg-card); }
.town h3 { font-family: var(--font-serif); font-size: var(--text-lg); font-weight: 500; margin-bottom: var(--sp-3); }
.town ul { display: flex; flex-direction: column; gap: var(--sp-2); }
.town a { display: inline-flex; min-height: 36px; align-items: center; color: var(--ivory); text-decoration: underline; text-decoration-color: var(--border-gold); text-underline-offset: 3px; }
.town li span { display: block; font-size: var(--text-xs); color: var(--ivory-dim); }
@media (max-width: 800px) { .town-grid { grid-template-columns: 1fr; } }

/* ---- Website review ---- */
.review-layout { display: grid; grid-template-columns: 1.4fr 0.9fr; gap: var(--sp-6); align-items: start; }
@media (max-width: 900px) { .review-layout { grid-template-columns: 1fr; } }
.review-aside .remote-note { margin-top: 0; }
.review-aside .remote-note h2 { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--sp-3); }
.field-optional { font-weight: 400; color: var(--ivory-dim); font-size: var(--text-xs); }
.fieldset { border: 0; padding: 0; margin: 0; }
.fieldset legend { font-size: var(--text-sm); font-weight: 500; color: var(--ivory); margin-bottom: var(--sp-2); }
.check-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.check-grid label {
  display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: 0 var(--sp-3);
  border: 1px solid var(--border-hover); border-radius: var(--r-md); font-size: var(--text-sm); color: var(--ivory-dim); cursor: pointer;
}
.check-grid input { accent-color: var(--gold); width: 18px; height: 18px; }
.check-grid label:has(input:checked) { border-color: var(--gold); color: var(--ivory); }
@media (max-width: 560px) { .check-grid { grid-template-columns: 1fr 1fr; } }
.review-form button[disabled] { opacity: 0.7; cursor: progress; }
.report-section:focus-within { outline: none; }
#report-root:focus { outline: none; }
.report-head { margin-bottom: var(--sp-6); }
.report-url { color: var(--ivory-dim); word-break: break-all; }
.stat-tiles--report { margin-bottom: var(--sp-7); }
.report-h { font-family: var(--font-serif); font-size: var(--text-lg); font-weight: 500; color: var(--ivory); margin: var(--sp-7) 0 var(--sp-3); }
.report-lh { padding: var(--sp-5); border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--bg-card); }
.report-lh .lh-device-title { font-size: var(--text-xs); }
.findings { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); }
.finding { padding: var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--border); background: var(--bg-card); }
.finding--issue { border-left: 3px solid var(--gold); }
.finding-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2); }
.finding-area, .finding-kind { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ivory-dim); }
.finding-kind { margin-left: auto; }
.finding-title { color: var(--ivory); font-weight: 500; }
.finding-detail { font-size: var(--text-sm); color: var(--ivory-dim); margin-top: 4px; word-break: break-word; }
.sev { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--r-full); font-size: var(--text-xs); font-weight: 600; }
.sev::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sev--critical { color: #f4a4a4; background: rgba(240,138,138,0.12); border: 1px solid rgba(240,138,138,0.4); }
.sev--important { color: #f0c27a; background: rgba(227,166,75,0.12); border: 1px solid rgba(227,166,75,0.4); }
.sev--suggestion { color: var(--ivory); background: var(--ivory-ghost); border: 1px solid var(--border-hover); }
.sev--manual { color: #b9c6f0; background: rgba(140,160,230,0.12); border: 1px solid rgba(140,160,230,0.4); }
.sev--pass { color: #a6e3bf; background: rgba(95,196,136,0.12); border: 1px solid rgba(95,196,136,0.4); }
.passed-list { margin-top: var(--sp-6); }
.passed-list summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--ivory); }
.passed-list .findings { margin-top: var(--sp-3); }
.report-next { margin-top: var(--sp-7); padding: var(--sp-6); border-radius: var(--r-xl); border: 1px solid var(--border-gold); background: var(--gold-ghost); }
.report-next .report-h { margin-top: 0; }
.report-next .steps-list { margin-bottom: var(--sp-4); }
.report-disclaimer { margin-top: var(--sp-5); }

@media print {
  body::after, .nav-bar, .footer, .cta-bar, .skip-link, .crumbs-wrap, .page-hero, .review-layout, .review-form, .section:not(.report-section), .report-next .btn-row { display: none !important; }
  body { background: #fff; color: #111; }
  .report-section { padding: 0; background: #fff; border: 0; }
  .finding, .report-lh, .stat-tile, .report-next { background: #fff; border-color: #ccc; color: #111; break-inside: avoid; }
  .finding-title, .report-h, .section-title, .ring-num, .stat-tile dd { color: #111 !important; }
  .finding-detail, .lh-note, .report-url, .finding-area, .stat-tile dt { color: #444 !important; }
  .passed-list[open] .findings, .passed-list .findings { display: flex; }
}
button.cat-chip { font: inherit; font-size: var(--text-sm); background: transparent; cursor: pointer; }
.cat-chip[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-ghost); }
.no-js button.cat-chip { display: none; }