/* ==========================================================================
   Korea Care Guide - single stylesheet
   Edit only here. Do not add new stylesheets; reuse the classes below.
   ========================================================================== */

:root {
  /* Light only. The site does not follow the OS dark preference: clinic and
     procedure photography is shot on white interiors and reads wrong against a
     dark shell. color-scheme pins form controls and scrollbars to light too. */
  color-scheme: light;

  --bg: #ffffff;
  --bg-soft: #faf8f7;
  --bg-tint: #fdf4f2;
  --ink: #1a1620;
  --ink-2: #3d3746;
  --muted: #736c7d;
  --line: #e9e4e1;
  --line-soft: #f2eeec;
  --accent: #b0433e;
  --accent-hover: #93332f;
  --accent-ink: #ffffff;
  --ok: #1f7a5c;
  --warn: #9a6512;

  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --shadow: 0 1px 2px rgba(26, 22, 32, .05), 0 8px 24px rgba(26, 22, 32, .05);
  --shadow-sm: 0 1px 2px rgba(26, 22, 32, .06);

  --wrap: 1180px;
  --gap: 24px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; font-weight: 650; letter-spacing: -.015em; }
h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.6rem); }
h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.02rem; }
p { margin: 0 0 1em; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 20px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--accent);
  color: var(--accent-ink); padding: 10px 16px; z-index: 100;
}
.skip-link:focus { left: 0; }

/* ---------- header ---------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-row { display: flex; align-items: center; gap: 20px; height: 64px; }

.logo { font-weight: 700; color: var(--ink); font-size: 1.08rem; letter-spacing: -.02em; white-space: nowrap; }
.logo:hover { text-decoration: none; }

.main-nav { display: flex; gap: 4px; margin-left: auto; }
.main-nav a {
  padding: 8px 12px; border-radius: var(--r-sm); color: var(--ink-2);
  font-size: .94rem; font-weight: 550;
}
.main-nav a:hover { background: var(--bg-soft); color: var(--ink); text-decoration: none; }
.main-nav a[aria-current="page"] { color: var(--accent); background: var(--bg-tint); }

.nav-toggle {
  display: none; margin-left: auto; background: none; border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 7px 11px; color: var(--ink); font-size: .9rem; cursor: pointer;
}

@media (max-width: 900px) {
  .header-row { gap: 12px; }
  .nav-toggle { display: block; }
  .main-nav {
    display: none; position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; gap: 0; background: var(--bg);
    border-bottom: 1px solid var(--line); padding: 8px 20px 16px;
  }
  .main-nav.is-open { display: flex; }
  .main-nav a { padding: 12px 8px; border-bottom: 1px solid var(--line-soft); border-radius: 0; }
  /* .btn is declared later in this file at equal specificity, so the selector
     here has to be more specific to win. */
  .btn.header-cta { display: none; }
}

@media (max-width: 420px) {
  .logo { font-size: .95rem; gap: 6px; }
  .wrap, .wrap-narrow { padding: 0 14px; }
}

/* ---------- buttons --------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px; border: 1px solid transparent;
  font-size: .92rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: var(--bg); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-sm { padding: 7px 14px; font-size: .86rem; }
.btn-block { display: flex; width: 100%; }

/* ---------- hero + search --------------------------------------------- */

.hero {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  padding: clamp(40px, 6vw, 80px) 0;
}
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.hero-grid > * { min-width: 0; }
.hero-figure img {
  width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-lg); box-shadow: var(--shadow); border: 1px solid var(--line);
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-figure { order: -1; }
  .hero-figure img { aspect-ratio: 16 / 9; }
}
.hero h1 { max-width: 18ch; margin-bottom: .35em; }
.hero-lede { font-size: clamp(1rem, .95rem + .3vw, 1.15rem); color: var(--ink-2); max-width: 62ch; margin-bottom: 1.6em; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.hero-stat strong { display: block; font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.hero-stat span { font-size: .85rem; color: var(--muted); }

.search-box { display: flex; gap: 8px; max-width: 620px; }
.search-box input[type="search"] {
  flex: 1; padding: 13px 18px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); color: var(--ink); font-size: .98rem; font-family: inherit;
}
.search-box input[type="search"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }

.search-results {
  margin-top: 12px; background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow); max-height: 380px; overflow-y: auto;
  max-width: 620px;
}
.search-results:empty { display: none; }
.search-results a {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  padding: 11px 16px; border-bottom: 1px solid var(--line-soft); color: var(--ink); font-size: .94rem;
}
.search-results a:last-child { border-bottom: 0; }
.search-results a:hover { background: var(--bg-soft); text-decoration: none; }
.search-results .sr-kind { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }

/* ---------- layout shells --------------------------------------------- */

.section { padding: clamp(40px, 5vw, 68px) 0; }
.section-tint { background: var(--bg-soft); border-block: 1px solid var(--line); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.section-head p { color: var(--muted); margin: .3em 0 0; max-width: 62ch; }
.section-head h2 { margin: 0; }

.layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 44px; align-items: start; padding: 40px 0 64px; }
.layout > * { min-width: 0; }
@media (max-width: 980px) { .layout { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

.sidebar { position: sticky; top: 84px; display: grid; gap: 20px; }
@media (max-width: 980px) { .sidebar { position: static; } }

.side-card { border: 1px solid var(--line); border-radius: var(--r); padding: 18px; background: var(--bg); }
.side-card h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 12px; font-weight: 650; }
.side-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
/* Only the flat variants scroll. The collapsible tree must not, or collapsing
   a category would still leave the list clipped. */
.side-card > .side-list { max-height: 460px; overflow-y: auto; }

.side-group { border-top: 1px solid var(--line-soft); }
.side-group:first-of-type { border-top: 0; }
.side-group > summary {
  cursor: pointer; list-style: none; padding: 9px 4px; font-size: .88rem;
  font-weight: 650; color: var(--ink); display: flex; align-items: center;
  justify-content: space-between; gap: 8px;
}
.side-group > summary::-webkit-details-marker { display: none; }
.side-group > summary::before {
  content: "\203A"; color: var(--muted); font-size: 1.05rem; line-height: 1;
  transition: transform .15s ease; order: -1; width: 12px;
}
.side-group[open] > summary::before { transform: rotate(90deg); }
.side-group > summary:hover { color: var(--accent); }
.side-group-n {
  margin-left: auto; font-size: .74rem; font-weight: 600; color: var(--muted);
  background: var(--bg-soft); border-radius: 999px; padding: 2px 8px;
}
.side-group .side-list { padding: 0 0 10px 16px; }
.side-list a { display: flex; justify-content: space-between; gap: 10px; padding: 6px 8px; border-radius: var(--r-sm); color: var(--ink-2); font-size: .9rem; }
.side-list a:hover { background: var(--bg-soft); color: var(--ink); text-decoration: none; }
.side-list a[aria-current="page"] { background: var(--bg-tint); color: var(--accent); font-weight: 600; }
.side-list .count { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.side-list .group-label { padding: 10px 8px 4px; font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 650; }

/* ---------- breadcrumb ------------------------------------------------ */

.breadcrumb { padding: 16px 0 0; font-size: .84rem; color: var(--muted); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.breadcrumb li::after { content: "/"; margin-left: 6px; color: var(--line); }
.breadcrumb li:last-child::after { content: ""; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--accent); }

/* ---------- cards: category / procedure ------------------------------- */

.grid { display: grid; gap: var(--gap); }
/* min() keeps a track from forcing the grid wider than its container on
   narrow screens, which is what plain minmax(420px, 1fr) would do. */
.grid-2 { grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); }

.cat-card {
  display: block; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px; background: var(--bg); color: var(--ink); box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.cat-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); text-decoration: none; }
.cat-card h3 { margin-bottom: .3em; }
.cat-card p { color: var(--muted); font-size: .92rem; margin-bottom: 1em; }
.cat-card .cat-count { font-size: .8rem; color: var(--accent); font-weight: 600; }

.chip-row { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  display: inline-block; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink-2); font-size: .82rem;
}
a.chip:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.chip-accent { background: var(--bg-tint); border-color: transparent; color: var(--accent); font-weight: 600; }

/* ---------- listing block --------------------------------------------- */
/* Directory listings sit above the editorial body on procedure and category
   pages: finding a clinic is the job, reading the guide is secondary. */

.listing-block {
  margin: 32px 0 40px; padding: 22px; border: 1px solid var(--line);
  border-radius: var(--r-lg); background: var(--bg-soft);
}
.listing-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 18px;
}
.listing-head h2 { margin: 0; font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); }
.listing-count {
  font-size: .8rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); background: var(--bg); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 12px; white-space: nowrap;
}
.listing-count-inline { font-size: .88rem; color: var(--muted); margin: -.4em 0 1em; }
.listing-block .clinic-card { background: var(--bg); }
.listing-block .grid { gap: 14px; }

/* ---------- clinic card ----------------------------------------------- */

.clinic-card {
  display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 20px;
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px;
  background: var(--bg); box-shadow: var(--shadow-sm); transition: border-color .15s ease, box-shadow .15s ease;
}
.clinic-card:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: var(--shadow); transform: translateY(-1px);
}
/* No stretched-link overlay here: the card contains its own procedure links
   and an overlay would swallow them. */
@media (max-width: 620px) { .clinic-card { grid-template-columns: 1fr; } }

.thumb {
  aspect-ratio: 4 / 3; border-radius: var(--r); display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; letter-spacing: .04em;
  color: var(--muted); background: var(--bg-soft);
  text-transform: uppercase; user-select: none;
}
.thumb-lg { aspect-ratio: 16 / 7; font-size: 3rem; border-radius: var(--r-lg); }

/* image-backed thumbnails ------------------------------------------------ */
.thumb-img { background: var(--bg-soft); overflow: hidden; padding: 0; }
.thumb-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* body figures ----------------------------------------------------------- */
.figure { margin: 28px 0; }
.figure img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--bg-soft);
}
.figure figcaption { font-size: .82rem; color: var(--muted); margin-top: 9px; }
.figure-wide { margin: 32px 0; }

.hero-media { margin: 0 0 28px; }
.hero-media img {
  width: 100%; height: auto; display: block; aspect-ratio: 16 / 7; object-fit: cover;
  border-radius: var(--r-lg); border: 1px solid var(--line);
}
@media (max-width: 620px) {
  .hero-media img { aspect-ratio: 16 / 10; }
}

.clinic-card h3 { margin-bottom: .2em; font-size: 1.1rem; }
.clinic-card h3 a { color: var(--ink); }
.clinic-card h3 a:hover { color: var(--accent); text-decoration: none; }
.clinic-meta { font-size: .85rem; color: var(--muted); margin-bottom: .6em; }
.clinic-summary { font-size: .93rem; color: var(--ink-2); margin-bottom: .8em; }

.rating { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; color: var(--ink-2); }
.rating .stars { color: var(--accent); letter-spacing: .1em; font-size: .9rem; }
.rating .score { font-weight: 650; }

.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: .7em; }
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
  background: var(--bg-soft); border: 1px solid var(--line); font-size: .74rem;
  font-weight: 600; color: var(--ink-2); letter-spacing: .01em;
}
.badge-key { color: var(--accent); font-weight: 700; font-size: .68rem; }
.badge-verified { background: color-mix(in srgb, var(--ok) 10%, transparent); border-color: color-mix(in srgb, var(--ok) 30%, transparent); color: var(--ok); }

.price-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: .86rem; }
.price-list li { display: flex; justify-content: space-between; gap: 14px; color: var(--muted); }
.price-list li b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- quick facts / cost table ---------------------------------- */

.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 10px;
  margin: 28px 0;
}
.fact {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--r); padding: 12px 14px;
}
.fact dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 3px; }
.fact dd { margin: 0; font-size: .93rem; font-weight: 600; }

.table-scroll { overflow-x: auto; margin: 20px 0 8px; border: 1px solid var(--line); border-radius: var(--r); }
table.cost { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 440px; }
@media (max-width: 520px) { table.cost { min-width: 380px; font-size: .86rem; } table.cost th, table.cost td { padding: 9px 11px; } }
table.cost th, table.cost td { padding: 11px 16px; text-align: left; border-bottom: 1px solid var(--line-soft); }
table.cost thead th { background: var(--bg-soft); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 650; white-space: nowrap; }
table.cost tbody tr:last-child td { border-bottom: 0; }
table.cost td:not(:first-child) { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.cost tbody tr:hover { background: var(--bg-soft); }
.table-note { font-size: .82rem; color: var(--muted); margin: 0 0 24px; }

/* ---------- prose ----------------------------------------------------- */

.prose { font-size: 1.02rem; }
.prose h2 { margin-top: 1.9em; padding-top: .2em; }
.prose h3 { margin-top: 1.6em; }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.prose li { margin-bottom: .4em; }
.prose strong { font-weight: 650; }

.lede {
  font-size: 1.12rem; line-height: 1.6; color: var(--ink-2);
  margin: 0 0 1.8em; max-width: 74ch;
}

.steps { list-style: none; margin: 20px 0 28px; padding: 0; display: grid; gap: 0; }
.steps li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 16px; padding-bottom: 20px; position: relative; }
.steps li::before {
  content: ""; grid-column: 1; width: 9px; height: 9px; margin: 8px auto 0;
  border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 3px var(--bg); z-index: 1;
}
.steps li::after { content: ""; position: absolute; left: 13px; top: 20px; bottom: -2px; width: 1px; background: var(--line); }
.steps li:last-child { padding-bottom: 0; }
.steps li:last-child::after { display: none; }
.steps b { display: block; font-size: .95rem; margin-bottom: 2px; }
.steps span { font-size: .93rem; color: var(--ink-2); }

.faq { border-top: 1px solid var(--line); margin-top: 12px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 16px 34px 16px 0; position: relative;
  font-weight: 600; font-size: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 1.35rem; font-weight: 400; color: var(--muted); line-height: 1;
}
.faq details[open] summary::after { content: "\2013"; }
.faq details > p { margin: 0 0 18px; color: var(--ink-2); font-size: .97rem; max-width: 72ch; }

.callout {
  border: 1px solid var(--line); background: var(--bg-soft); border-radius: var(--r);
  padding: 16px 20px; margin: 28px 0; font-size: .92rem; color: var(--ink-2);
}
.callout strong { color: var(--ink); }
.callout-warn { border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); }

.disclaimer { font-size: .84rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 18px; margin-top: 44px; }

/* ---------- article --------------------------------------------------- */

.article-card {
  position: relative;
  display: flex; flex-direction: column; border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; background: var(--bg); box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, transform .15s ease;
}
/* The whole card is the click target, not just the words in the heading. The
   link itself is still the only link in the card, so the accessible name, the
   tab order and the status-bar URL are unchanged - the ::after only grows where
   a pointer counts as being on it. */
.article-card .ac-title a::after,
.article-card h3 a::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
}
.article-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.article-card .thumb { border-radius: 0; aspect-ratio: 16 / 8; font-size: 1.5rem; }
.article-card .ac-body { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.article-card h3 { font-size: 1.05rem; margin-bottom: .35em; }
.article-card h3 a { color: var(--ink); }
.article-card h3 a:hover { color: var(--accent); text-decoration: none; }
.article-card p { font-size: .9rem; color: var(--muted); margin-bottom: 1em; }
.article-card .ac-meta { margin-top: auto; font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

/* ---------- pager ----------------------------------------------------- */
/* Numbered pages under the guide grid. Written as links, never buttons: each
   page is a URL a crawler has to be able to follow. */

.pager {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 10px; margin: 52px 0 8px;
}
.pager a, .pager span {
  min-width: 44px; height: 44px; padding: 0 14px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r); font-size: 1rem; font-variant-numeric: tabular-nums;
}
.pager a {
  border: 1px solid var(--line); background: var(--bg); color: var(--ink-2);
  transition: border-color .15s ease, color .15s ease;
}
.pager a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.pager .is-current {
  border: 1px solid var(--accent); background: var(--accent);
  color: var(--accent-ink); font-weight: 650;
}
.pager .pager__gap { min-width: 0; padding: 0 4px; color: var(--muted); letter-spacing: .1em; }
/* The arrows stand off from the numbers, so the run of pages reads as one
   group with a way in and out of it rather than as five equal buttons. */
.pager [rel="prev"] { margin-right: 10px; }
.pager [rel="next"] { margin-left: 10px; }

.article-head { padding: 40px 0 8px; }
.article-head .kicker { font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); font-weight: 650; }
.article-head .byline { font-size: .87rem; color: var(--muted); }

/* ---------- misc ------------------------------------------------------ */

.pagelist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pagelist a { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); }
.pagelist a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.pagelist .meta { font-size: .82rem; color: var(--muted); }

.az-index { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 28px; }
.az-index a { padding: 5px 11px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: .85rem; font-weight: 600; }

.result-count { font-size: .88rem; color: var(--muted); margin-bottom: 20px; }
.empty { padding: 40px 20px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--r-lg); }

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

.site-footer { background: var(--bg-soft); border-top: 1px solid var(--line); padding: 52px 0 32px; margin-top: 60px; font-size: .92rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 36px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 12px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.site-footer a { color: var(--ink-2); }
.site-footer a:hover { color: var(--accent); }
.footer-about p { color: var(--muted); font-size: .88rem; max-width: 42ch; }
.footer-bottom {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between;
  font-size: .82rem; color: var(--muted);
}
.footer-bottom ul { display: flex; gap: 18px; }

/* ---------- guides blog ------------------------------------------------ */
/* Cards are text-only, so give the type room instead of an image slot. */
.article-card .ac-body { padding: 20px 22px; }
.article-card h3 { font-size: 1.08rem; line-height: 1.35; }
.article-card p { font-size: .92rem; color: var(--ink-2); }
.article-card .ac-meta { font-variant-numeric: tabular-nums; }

ol.sources { font-size: .9rem; color: var(--ink-2); padding-left: 1.3em; }
ol.sources li { margin-bottom: .6em; }
ol.sources a { overflow-wrap: anywhere; }

/* ---------- further reading + reference -------------------------------- */
/* Appended to every page except the guides, which carry their own sources. */
.further-reading {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px;
  margin: 48px 0 0; padding: 24px; border: 1px solid var(--line);
  border-radius: var(--r-lg); background: var(--bg-soft);
}
@media (max-width: 760px) { .further-reading { grid-template-columns: 1fr; gap: 22px; } }
.further-reading > * { min-width: 0; }
.further-reading h3 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin-bottom: 12px; font-weight: 650;
}
.fr-guides .pagelist a { background: var(--bg); }
.fr-note { font-size: .88rem; color: var(--ink-2); margin: 0 0 .6em; }
.fr-cite { font-size: .84rem; color: var(--muted); margin: 0; overflow-wrap: anywhere; }
.fr-cite a { color: var(--ink-2); }

/* Cards use h2 for document outline correctness but must not look like section
   headings. Size is set here rather than by tag. */
.cat-card-title { font-size: 1.2rem; margin: 0 0 .3em; }
.article-card .ac-title { font-size: 1.08rem; line-height: 1.35; margin: 0 0 .35em; }
.article-card .ac-title a { color: var(--ink); }
.article-card .ac-title a:hover { color: var(--accent); text-decoration: none; }