/* Palette matches public/mockups/ exactly — cream/ink/lime editorial
     look, Instrument Serif + Manrope. Variable NAMES below are kept the
     same as before (--paper, --accent, --gold, etc.) so none of the ~700
     lines of component CSS further down needed touching — only what each
     token points to changed. There's no dark-mode variant here because
     the mockups don't define one; matching them "exactly" means one
     consistent palette rather than a second, unrelated dark theme. */
  :root {
    --paper: #F3F1EA;         /* was pink-tinted cream; now mockup's --bg */
    --paper-raised: #FCFBF7;  /* was a darker pink-gray; now mockup's --paper (brighter card bg) */
    --ink: #111310;
    --ink-soft: #62665e;      /* mockup's --muted */
    --accent: #C96F50;        /* was hot pink; now mockup's --rust (text-color accent) */
    --accent-tint: #F1DCD3;   /* light rust tint, for soft accent backgrounds */
    --gold: #C96F50;          /* mockup has no separate gold — points to rust too */
    --line: #C9CBC1;          /* mockup's --line */
    --lime: #CFFF00;          /* mockup's pop highlight color, used for hover/CTA fills */
    --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    --sans: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    --link: #A8472E;          /* darker/more saturated than --accent, so a link is readable as text color alone, not just on hover */
    --link-visited: #7A5566;  /* distinct muted plum, so a visited link is visibly different from an unvisited one */
  }

  * { box-sizing: border-box; }

  html, body {
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
  }

  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Default: any link in body copy is visibly a link — colored, underlined,
     and a distinct shade once visited — so it doesn't wash out against
     plain text. Navigation/chrome elements (masthead nav, dropdowns,
     buttons, wordmark, filter chips, card titles that are really just
     tappable blocks) opt back OUT of this below, since those already
     signal "clickable" through position, hover state, or being a button. */
  a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
  a:visited { color: var(--link-visited); }
  a:hover { color: var(--ink); }

  /* Chrome/navigation opt-out: these read as clickable through their
     position and hover treatment, not through underline+color, so they
     keep the old reset. */
  .wordmark,
  nav.masthead-nav > a,
  .nav-dropdown-menu a,
  .filter-chip,
  .btn,
  .read-toggle,
  .fwordmark,
  h2 a,
  h4 a,
  .article-page-back a,
  .article-page-more a,
  .footer-sitemap a,
  .footer-brand a {
    color: inherit;
    text-decoration: none;
  }
  .wordmark:visited, nav.masthead-nav > a:visited, .nav-dropdown-menu a:visited,
  .filter-chip:visited, .btn:visited, .read-toggle:visited, .fwordmark:visited,
  h2 a:visited, h4 a:visited, .article-page-back a:visited, .article-page-more a:visited,
  .footer-sitemap a:visited, .footer-brand a:visited {
    color: inherit;
  }
  .footer-sitemap a:hover, .footer-brand a:hover { color: var(--accent); }

  .wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 28px;
  }

  /* Masthead */
  header.masthead {
    border-bottom: 1px solid var(--line);
    padding: 28px 0 22px;
  }

  .masthead-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
  }

  .wordmark {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(28px, 4vw, 38px);
    letter-spacing: -0.01em;
  }

  .wordmark .dot { color: var(--accent); }

  nav.masthead-nav {
    display: flex;
    align-items: center;
    gap: 28px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-soft);
    flex-wrap: wrap;
  }

  nav.masthead-nav > a:hover, nav.masthead-nav > a.active { color: var(--accent); }

  /* Dropdown menus (Sections, Community) — replaces the old two-row nav
     with a single spacious row plus organized dropdowns, mirroring a
     classic "mega menu" pattern. */
  .nav-dropdown {
    position: relative;
  }

  .nav-dropdown-toggle {
    background: none;
    border: none;
    font: inherit;
    font-weight: 500;
    color: inherit;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .nav-dropdown-toggle::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    margin-top: -4px;
    transition: transform 0.2s ease;
  }

  .nav-dropdown.open .nav-dropdown-toggle::after {
    transform: rotate(-135deg);
    margin-top: 4px;
  }

  .nav-dropdown-toggle:hover,
  .nav-dropdown.has-active .nav-dropdown-toggle {
    color: var(--accent);
  }

  .nav-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 18px);
    left: -22px;
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px 0;
    min-width: 230px;
    box-shadow: 0 14px 34px rgba(17, 19, 16, 0.10);
    z-index: 40;
  }

  .nav-dropdown.open .nav-dropdown-menu {
    display: block;
  }

  .nav-dropdown-menu a {
    display: block;
    padding: 10px 24px;
    font-size: 14px;
    line-height: 1.3;
    color: var(--ink-soft);
    white-space: nowrap;
  }

  .nav-dropdown-menu a:hover,
  .nav-dropdown-menu a.active {
    color: var(--accent);
    background: var(--accent-tint);
  }

  @media (max-width: 760px) {
    nav.masthead-nav { gap: 16px; font-size: 13px; }
    .nav-dropdown-menu {
      position: static;
      display: none;
      box-shadow: none;
      border: none;
      border-radius: 0;
      padding: 4px 0 4px 16px;
      min-width: 0;
      margin-top: 6px;
    }
    .nav-dropdown.open .nav-dropdown-menu { display: block; }
    .nav-dropdown-menu a { padding: 8px 0; white-space: normal; }
  }

  /* Legacy band */
  .legacy-band {
    padding: 34px 0;
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .legacy-band .legacy-quote {
    font-family: var(--serif);
    font-style: italic;
    font-size: 21px;
    line-height: 1.45;
    margin: 0;
  }

  .legacy-band .legacy-note {
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0;
    border-left: 3px solid var(--gold);
    padding-left: 20px;
  }

  @media (max-width: 760px) {
    .legacy-band { grid-template-columns: 1fr; gap: 20px; }
  }

  /* Category filter chips */
  .filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 18px 0 8px;
  }

  .filter-chip {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    background: none;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 16px;
    cursor: pointer;
  }

  .filter-chip.active {
    color: var(--paper);
    background: var(--accent);
    border-color: var(--accent);
  }

  .article-row { display: grid; }
  .article-row.hidden { display: none; }

  /* Hero */
  .hero-photo {
    position: relative;
    width: 100%;
    min-height: 25vh;
    margin: 8px 0 32px;
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
    background: var(--paper-raised);
  }

  .hero-photo img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 25vh;
    object-fit: cover;
  }

  .hero-photo-placeholder {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
    font-size: 14px;
    color: var(--ink-soft);
    max-width: 480px;
    margin: 0 auto;
  }

  .hero-photo.hero-photo-missing img { display: none; }
  .hero-photo.hero-photo-missing .hero-photo-placeholder { display: flex; }
  .hero-photo.hero-photo-missing { min-height: 25vh; border: 1px dashed var(--line); }

  .hero-photo-credit {
    position: absolute;
    right: 10px;
    bottom: 8px;
    margin: 0;
    font-size: 11px;
    color: #fff;
    background: rgba(0,0,0,0.45);
    padding: 3px 8px;
    border-radius: 3px;
    line-height: 1.4;
  }

  .hero-photo-credit a { color: #fff; text-decoration: underline; }
  .hero-photo.hero-photo-missing .hero-photo-credit { display: none; }

  .article-page {
    max-width: 680px;
    margin: 0 auto;
    padding: 40px 0 60px;
  }

  .article-page-back {
    font-size: 13px;
    margin-bottom: 20px;
  }

  .article-page h1 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(28px, 5vw, 42px);
    line-height: 1.1;
    margin: 8px 0 16px;
  }

  .article-page .dek {
    font-size: 18px;
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 0 0 14px;
  }

  .article-page .meta {
    font-size: 13px;
    color: var(--ink-soft);
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
  }

  .article-page-body p {
    font-size: 17px;
    line-height: 1.7;
    margin: 0 0 20px;
  }

  .article-page-more {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    font-size: 14px;
  }

  .vol1-cover {
    position: relative;
    max-width: 1100px;
    margin: 36px auto 8px;
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
  }

  .vol1-cover > img:first-child {
    display: block;
    width: 100%;
    height: auto;
  }

  .vol1-cover-photo {
    position: absolute;
    right: 24px;
    bottom: -28px;
    width: 130px;
    height: 130px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid var(--paper);
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  }

  @media (max-width: 560px) {
    .vol1-cover-photo { width: 90px; height: 90px; right: 14px; bottom: -18px; }
  }

  .ad-banner {
    border-bottom: 1px solid var(--line);
    background: var(--paper-raised);
  }

  .ad-banner-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 14px 20px;
    font-size: 13px;
    color: var(--ink);
    text-decoration: none;
    text-align: center;
  }

  .ad-banner-link:hover { text-decoration: underline; }

  /* Image banner (728x90 leaderboard) — no label/text chrome, just the
     image, capped at its native size and centered. Scales down on narrow
     viewports without distorting (height:auto keeps aspect ratio). */
  .ad-banner-link.image {
    padding: 8px 20px;
    max-width: 728px;
  }
  .ad-banner-link.image img {
    display: block;
    width: 100%;
    max-width: 728px;
    height: auto;
  }

  /* Affiliate/ad disclosure — small and out of the way, but present, per
     FTC "clear and conspicuous" guidance and (for Amazon links) the
     Associates program's own disclosure requirement. */
  .ad-banner {
    text-align: center;
    padding-bottom: 6px;
  }
  /* Kept italic + gray per request, but with a floor: below ~10px or a
     lighter gray than #8a8a83-ish starts failing FTC's "clear and
     conspicuous" bar (and Amazon's "easily noticed" one) — not decorative
     fine print, an actual disclosure has to still be readable at a glance. */
  .ad-banner-tag {
    display: block;
    font-size: 10px;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #8a8a83;
    margin-top: 2px;
  }
  .ad-banner-disclosure {
    font-size: 10px;
    font-style: italic;
    color: #8a8a83;
    margin: 2px 0 0;
  }

  .ad-banner-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gold);
    border: 1px solid var(--gold);
    border-radius: 3px;
    padding: 2px 6px;
    flex: none;
  }

  .ad-banner-link.house .ad-banner-label {
    color: var(--ink-soft);
    border-color: var(--line);
  }

  .ad-banner-link.house { color: var(--ink-soft); }

  @media (max-width: 560px) {
    .ad-banner-link { flex-direction: column; gap: 4px; padding: 12px 16px; }
  }

  .hero {
    padding: 56px 0 48px;
    display: block;
    border-bottom: 1px solid var(--line);
  }

  .hero-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--gold);
    margin-bottom: 18px;
    letter-spacing: 0.02em;
  }

  .hero h1 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(38px, 6vw, 64px);
    line-height: 1.04;
    margin: 0 0 20px;
    letter-spacing: -0.015em;
  }

  .hero-underline {
    display: inline-block;
    width: 64px;
    height: 4px;
    background: var(--accent);
    margin-bottom: 22px;
  }

  .hero p.dek {
    font-size: 18px;
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 46ch;
    margin: 0;
  }

  .hero-side {
    border-left: 1px solid var(--line);
    padding-left: 32px;
  }

  .hero-side .issue {
    font-size: 13px;
    color: var(--ink-soft);
    margin-bottom: 14px;
  }

  .hero-side p {
    font-family: var(--serif);
    font-style: italic;
    font-size: 20px;
    line-height: 1.45;
    color: var(--ink);
    margin: 0;
  }

  /* Section label */
  .section-label {
    padding: 40px 0 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
  }

  /* Article list */
  .articles {
    padding-bottom: 20px;
  }

  .article-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 28px;
    padding: 30px 0;
    border-bottom: 1px solid var(--line);
  }

  .article-row:first-of-type {
    border-top: 1px solid var(--line);
  }

  .article-tag {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    padding-top: 6px;
  }

  .article-body h2 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(22px, 3vw, 28px);
    line-height: 1.2;
    margin: 0 0 10px;
    letter-spacing: -0.01em;
  }

  .article-body h2 a:hover { color: var(--accent); }

  .article-body .dek {
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 0 0 14px;
    max-width: 62ch;
  }

  .article-body .meta {
    font-size: 13px;
    color: var(--ink-soft);
    opacity: 0.75;
  }

  .article-full {
    display: none;
    margin-top: 18px;
    font-size: 16px;
    line-height: 1.7;
    max-width: 62ch;
    color: var(--ink);
  }

  .article-full p { margin: 0 0 16px; }

  .article-row.open .article-full { display: block; }

  .read-toggle {
    display: inline-block;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    font-family: var(--sans);
  }

  /* About / disclosure block */
  .about-block {
    margin-top: 48px;
    background: var(--accent-tint);
    padding: 56px 0;
  }

  .about-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 56px;
  }

  .about-grid h3 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(24px, 3vw, 30px);
    margin: 0 0 16px;
  }

  .about-grid p {
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink);
    margin: 0 0 16px;
    max-width: 58ch;
  }

  .disclosure {
    border-left: 3px solid var(--accent);
    padding-left: 22px;
  }

  .disclosure h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    margin: 0 0 10px;
  }

  .disclosure p {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--ink);
    margin: 0;
  }

  /* Events strip */
  .events-strip {
    padding-bottom: 12px;
  }

  .events-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 6px 0 8px;
  }

  .event-item {
    border-top: 2px solid var(--gold);
    padding-top: 12px;
  }

  .event-date {
    font-size: 13px;
    font-weight: 600;
    color: var(--gold);
    margin-bottom: 6px;
  }

  .event-name {
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink);
  }

  .event-name a { color: var(--accent); font-weight: 600; }

  @media (max-width: 760px) {
    .events-list { grid-template-columns: 1fr; }
  }

  /* Contribute + newsletter */
  .contribute-block, .newsletter-block {
    padding: 44px 0;
    border-top: 1px solid var(--line);
  }

  .contribute-block h3, .newsletter-block h3 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(22px, 3vw, 27px);
    margin: 0 0 12px;
  }

  .contribute-block p, .newsletter-block p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 56ch;
    margin: 0 0 18px;
  }

  .contribute-block .contribute-note {
    font-size: 14px;
    margin-top: 16px;
    margin-bottom: 0;
  }

  .btn {
    display: inline-block;
    background: var(--accent);
    color: var(--paper);
    font-weight: 600;
    font-size: 15px;
    padding: 12px 26px;
    border-radius: 4px;
  }

  .btn:hover { opacity: 0.9; }

  .newsletter-form {
    display: flex;
    gap: 12px;
    max-width: 440px;
    flex-wrap: wrap;
  }

  .newsletter-form input {
    flex: 1;
    min-width: 200px;
    font-family: var(--sans);
    font-size: 15px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--paper-raised);
    color: var(--ink);
  }

  .newsletter-form button {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 15px;
    padding: 12px 22px;
    border: none;
    border-radius: 4px;
    background: var(--accent);
    color: var(--paper);
    cursor: pointer;
  }

  .newsletter-status {
    font-size: 14px;
    color: var(--gold);
    min-height: 20px;
    margin-top: 10px !important;
  }

  /* Front matter: editor's letter + contributors */
  .frontmatter {
    padding: 40px 0;
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 48px;
  }

  .frontmatter h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--gold);
    margin: 0 0 14px;
  }

  .frontmatter .letter-body p {
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink);
    margin: 0 0 14px;
    max-width: 58ch;
  }

  .frontmatter .sign-off {
    font-family: var(--serif);
    font-style: italic;
    font-size: 16px;
    color: var(--ink-soft);
  }

  .contributors-list {
    border-left: 1px solid var(--line);
    padding-left: 28px;
  }

  .contributor {
    margin-bottom: 16px;
  }

  .contributor .name {
    font-weight: 600;
    font-size: 15px;
  }

  .contributor .role {
    font-size: 13.5px;
    color: var(--ink-soft);
  }

  @media (max-width: 760px) {
    .frontmatter { grid-template-columns: 1fr; gap: 24px; }
    .contributors-list { border-left: none; border-top: 1px solid var(--line); padding-left: 0; padding-top: 20px; }
  }

  /* Radar / shortlist */
  .radar {
    padding: 12px 0 40px;
    border-bottom: 1px solid var(--line);
  }

  .radar-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 40px;
  }

  .radar-item {
    display: flex;
    gap: 14px;
    align-items: baseline;
  }

  .radar-item .radar-cat {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    white-space: nowrap;
  }

  .radar-item p {
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink);
    margin: 0;
  }

  @media (max-width: 760px) {
    .radar-grid { grid-template-columns: 1fr; }
  }

  /* Advice column + Last word */
  .backmatter {
    padding: 44px 0;
    border-top: 1px solid var(--line);
  }

  .backmatter h3 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(22px, 3vw, 27px);
    margin: 0 0 20px;
  }

  .advice-q {
    font-weight: 600;
    font-size: 15.5px;
    margin: 0 0 10px;
  }

  .advice-a {
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--ink-soft);
    max-width: 60ch;
    margin: 0 0 6px;
  }

  .advice-signed {
    font-size: 13.5px;
    color: var(--ink-soft);
    opacity: 0.8;
  }

  .lastword {
    background: var(--paper-raised);
  }

  .lastword p.body-text {
    font-family: var(--serif);
    font-style: italic;
    font-size: 19px;
    line-height: 1.6;
    max-width: 62ch;
    color: var(--ink);
    margin: 0 0 14px;
  }

  .lastword .byline {
    font-family: var(--sans);
    font-style: normal;
    font-size: 14px;
    color: var(--ink-soft);
  }

  .article-byline {
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink-soft);
    margin: 24px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--line);
  }

  .article-byline-top {
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink-soft);
    margin: 0 0 20px;
  }

  /* Directory & Classifieds grids — also reused by the newer Directory &
     Listings pages (Video, Blog, Site Reviews, Movie Reviews) so they all
     share one visual system rather than each inventing its own card. */
  .directory-grid, .classifieds-grid, .listing-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    padding: 20px 0 36px;
  }

  .directory-card, .classified-card, .listing-card {
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 20px 22px;
  }

  .directory-card {
    background: var(--paper-raised);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  }

  .directory-card .dir-cat, .classified-card .cl-cat, .listing-card .li-cat {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 8px;
  }

  .directory-card h4, .classified-card h4, .listing-card h4 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 19px;
    margin: 0 0 8px;
  }

  .directory-card h4 a:hover, .classified-card h4 a:hover, .listing-card h4 a:hover { color: var(--link); text-decoration: underline; }

  .directory-card p, .classified-card p, .listing-card p {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 0 0 8px;
  }

  .directory-card .dir-meta, .classified-card .cl-meta, .listing-card .li-meta {
    font-size: 13px;
    color: var(--ink-soft);
    opacity: 0.8;
  }

  @media (max-width: 760px) {
    .directory-grid, .classifieds-grid, .listing-grid { grid-template-columns: 1fr; }
  }

  .section-intro {
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 62ch;
    margin: 0 0 4px;
  }

  /* Ad rates table */
  .rates-table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0 12px;
    font-size: 15px;
  }

  .rates-table th, .rates-table td {
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
  }

  .rates-table th {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink-soft);
    text-transform: none;
  }

  .rates-table td.price {
    font-weight: 600;
    white-space: nowrap;
  }

  .rates-note {
    font-size: 13.5px;
    color: var(--ink-soft);
    opacity: 0.85;
    margin-top: 4px;
  }

  @media (max-width: 760px) {
    .rates-table { display: block; overflow-x: auto; }
  }

  /* Footer */
  footer {
    padding: 36px 0 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    border-top: 1px solid var(--line);
    margin-top: 24px;
  }

  footer .footer-sitemap {
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.9;
  }

  footer .footer-sitemap a {
    margin: 0 2px;
  }

  footer .footer-brand {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 17px;
  }

  footer .fwordmark {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 18px;
  }

  footer .fmeta {
    font-size: 13px;
    color: var(--ink-soft);
  }

  @media (max-width: 760px) {
    .about-grid { grid-template-columns: 1fr; gap: 32px; }
    .article-row { grid-template-columns: 1fr; gap: 8px; }
    .article-tag { padding-top: 0; }
  }