/* 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: #FAF8F3;         /* 2026-09-23: lightened from a beige-y #F3F1EA to a cleaner warm cream, for a less "worn zine" / more "premium magazine" feel */
    --paper-raised: #FFFFFF;  /* 2026-09-23: brightened to true white so cards/panels read as crisp layers sitting on the cream page, not the same flat tone */
    --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 utility bar — sits above the main header row, just the date
     for now (a real newspaper/magazine-style top bar). No social icons
     here yet: add them once real, live LNmag social accounts exist —
     shipping icons that link nowhere would be worse than no bar at all. */
  .masthead-utility {
    border-bottom: 1px solid var(--line);
    background: var(--paper-raised);
  }

  .masthead-utility-row {
    padding: 6px 28px;
    font-size: 12px;
    color: var(--ink-soft);
  }

  /* Masthead */
  header.masthead {
    border-bottom: 1px solid var(--line);
    padding: 28px 0 22px;
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--paper);
  }

  .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);
  }

  /* Mega menu — the "Sections" dropdown, one column per beat with the
     beat's raw categories listed underneath as sub-links. Same open/close
     JS as every other .nav-dropdown; only the panel layout differs. */
  .nav-dropdown-menu--mega {
    display: none;
    grid-template-columns: repeat(4, minmax(110px, 1fr));
    gap: 4px 20px;
    min-width: 480px;
    max-width: min(620px, calc(100vw - 56px));
    left: -40px;
    padding: 18px 20px;
  }

  .nav-dropdown.open .nav-dropdown-menu--mega {
    display: grid;
  }

  .mega-col {
    display: flex;
    flex-direction: column;
  }

  .nav-dropdown-menu--mega a {
    padding: 5px 4px;
    white-space: normal;
  }

  .mega-col-head {
    font-weight: 700;
    color: var(--ink) !important;
    border-bottom: 1px solid var(--line);
    margin-bottom: 4px;
    padding-bottom: 8px !important;
  }

  .mega-col-head:hover,
  .mega-col-head.active {
    color: var(--accent) !important;
  }

  @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; }
    .nav-dropdown-menu--mega {
      grid-template-columns: 1fr;
      min-width: 0;
      max-width: none;
      left: 0;
      gap: 0;
      padding: 4px 0 4px 16px;
    }
    .nav-dropdown.open .nav-dropdown-menu--mega { display: grid; }
    .mega-col { margin-bottom: 10px; }
  }

  /* Legacy band */
  .legacy-band {
    padding-top: 34px;
    padding-bottom: 34px;
    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; }

  /* Magazine-cover hero treatment (2026-09-23). Progressive enhancement:
     .cover-title-block starts in normal document flow (plain tag + h1
     stacked above the image, same as the site always looked) so that
     while no real image exists yet, the page reads cleanly rather than
     showing white text overlaid on an empty placeholder box. The moment
     a real image file loads successfully, the inline onload handler on
     the <img> adds .cover-image-loaded to the wrapping .cover-wrap,
     which switches the title block to an absolutely-positioned overlay
     on top of the photo with a dark gradient behind it — the "cover"
     look. onerror removes the class again, so a later-broken image link
     falls back to the plain layout too, not a white-on-nothing overlay. */
  .cover-wrap {
    position: relative;
  }

  .cover-title-block {
    padding: 4px 0 0;
  }

  .cover-wrap.cover-image-loaded .cover-title-block {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 48px 28px 22px;
    background: linear-gradient(to top, rgba(17,19,16,0.88), rgba(17,19,16,0));
  }

  .cover-wrap.cover-image-loaded .cover-title-block .article-tag {
    color: var(--lime);
  }

  .cover-wrap.cover-image-loaded .cover-title-block h1 {
    color: #fff;
    text-shadow: 0 1px 12px rgba(0,0,0,0.35);
  }

  .hero-photo-caption {
    font-size: 13px;
    font-style: italic;
    color: var(--ink-soft);
    margin: 8px 0 18px;
  }

  .article-page {
    max-width: 680px;
    margin: 0 auto;
    padding-top: 40px;
    padding-bottom: 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-top: 56px;
    padding-bottom: 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: 140px 1fr;
    gap: 28px;
    padding: 30px 0;
    border-bottom: 1px solid var(--line);
  }

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

  .article-thumb-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* Card thumbnail — same graceful-fallback pattern as the homepage hero
     (.hero-photo): until a real image file exists at that path, the
     onerror handler adds -missing and the whole box disappears rather
     than showing a broken-image icon, so the card just looks like it did
     before hero images existed. */
  .article-thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
    background: var(--paper-raised);
  }

  .article-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .article-thumb.article-thumb-missing {
    display: none;
  }

  .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-top: 44px;
    padding-bottom: 44px;
    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-top: 40px;
    padding-bottom: 40px;
    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-top: 12px;
    padding-bottom: 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-top: 44px;
    padding-bottom: 44px;
    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; }
  }

  /* Job Board: "Selected Roles" partner-feed cards, filters, and detail pages */
  .job-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: 3px;
    padding: 2px 0;
    vertical-align: middle;
  }

  .job-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 4px 0 8px;
  }

  .job-filters label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
  }

  .job-filters select {
    font-family: var(--sans);
    font-size: 14px;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--paper);
    color: var(--ink);
  }

  .job-filters-empty {
    color: var(--ink-soft);
    font-style: italic;
    padding: 8px 0 24px;
  }

  .job-card[hidden] { display: none; }

  .job-detail-back {
    margin: 20px 0 0;
    font-size: 14px;
  }

  .job-ad {
    padding: 12px 0 8px;
  }

  .job-ad h1 {
    font-size: 28px;
    line-height: 1.25;
  }

  .job-ad h2 {
    font-size: 18px;
    margin-top: 28px;
  }

  .job-ad ul {
    padding-left: 20px;
  }

  .job-ad li {
    margin-bottom: 6px;
  }

  .job-detail-note {
    color: var(--ink-soft);
    font-size: 13.5px;
    font-style: italic;
    border-top: 1px solid var(--line);
    padding: 16px 0 32px;
  }

  .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; }
  }

  /* Site search — a small toggle in the masthead nav that expands into an
     input on click. Deliberately quiet (muted icon color, no border until
     opened) so it doesn't compete with an already-busy nav row, but it's
     never hidden in a menu — it's inconspicuous, not concealed. */
  .nav-search {
    position: relative;
    display: flex;
    align-items: center;
  }

  .nav-search-toggle {
    background: none;
    border: none;
    padding: 2px;
    margin: 0;
    cursor: pointer;
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    line-height: 0;
  }

  .nav-search-toggle:hover { color: var(--accent); }

  .nav-search-toggle svg { width: 16px; height: 16px; display: block; }

  .nav-search-form {
    display: flex;
    align-items: center;
    max-width: 0;
    overflow: hidden;
    transition: max-width 0.18s ease;
  }

  .nav-search.open .nav-search-form {
    max-width: 220px;
    margin-left: 8px;
  }

  .nav-search-input {
    width: 190px;
    font: inherit;
    font-size: 13px;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 5px 8px;
    background: var(--paper-raised);
    color: var(--ink);
  }

  .nav-search-input:focus { outline: none; border-color: var(--accent); }

  .nav-search-results {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 320px;
    max-width: calc(100vw - 32px);
    max-height: 380px;
    overflow-y: auto;
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: 0 10px 28px rgba(17, 19, 16, 0.14);
    display: none;
    z-index: 60;
  }

  .nav-search-results.show { display: block; }

  .nav-search-result {
    display: block;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
  }

  .nav-search-result:last-child { border-bottom: none; }

  .nav-search-result:hover { background: var(--paper); }

  .nav-search-result .nsr-tag {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent);
  }

  .nav-search-result .nsr-title {
    display: block;
    color: var(--ink);
    font-weight: 600;
    font-size: 13.5px;
    margin-top: 2px;
  }

  .nav-search-result .nsr-desc {
    display: block;
    color: var(--ink-soft);
    font-size: 12px;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav-search-empty {
    padding: 14px;
    color: var(--ink-soft);
    font-size: 13px;
  }

  @media (max-width: 760px) {
    .nav-search.open .nav-search-form { max-width: 150px; }
    .nav-search-input { width: 130px; }
    .nav-search-results { width: 280px; }
  }