/* roulang page: index */
:root {
      --ink: #1C1B1A;
      --paper: #F7F5F1;
      --soft: #EEECE7;
      --line: #E9E6E0;
      --muted: #605D58;
      --wine: #8C2933;
      --wine-dark: #6F1F28;
      --sage: #51645A;
      --white: #FFFFFF;
      --shadow: 0 14px 32px rgba(28, 27, 26, .08);
      --radius: 6px;
      --container: 1200px;
      --font: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: var(--font);
      color: var(--ink);
      background: var(--paper);
      line-height: 1.82;
      font-size: 16px;
    }
    body.is-reveal-open { overflow: hidden; }
    a { color: inherit; text-decoration: none; transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease; }
    img { display: block; width: 100%; height: auto; object-fit: cover; }
    button, input { font-family: inherit; }
    button { cursor: pointer; }
    :focus-visible { outline: 3px solid rgba(140, 41, 51, .35); outline-offset: 3px; }
    .skip-link { position: absolute; left: -999px; top: 10px; background: var(--wine); color: var(--white); padding: 10px 14px; z-index: 999; }
    .skip-link:focus { left: 12px; }
    .grid-container { max-width: var(--container); }
    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(247, 245, 241, .97);
      border-bottom: 1px solid var(--line);
      backdrop-filter: blur(10px);
    }
    .brand-row { padding: 14px 0 12px; border-bottom: 1px solid rgba(233, 230, 224, .78); }
    .brand-wrap { align-items: center; gap: 16px; }
    .brand-logo {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 19px;
      font-weight: 700;
      line-height: 1.25;
      min-height: 44px;
    }
    .brand-mark {
      width: 34px;
      height: 34px;
      display: inline-grid;
      place-items: center;
      color: var(--paper);
      background: var(--ink);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: var(--radius);
      font-size: 15px;
    }
    .search-shell {
      display: flex;
      align-items: center;
      min-height: 44px;
      border: 1px solid var(--line);
      background: var(--white);
      border-radius: var(--radius);
      overflow: hidden;
    }
    .search-shell input {
      flex: 1;
      height: 44px;
      min-width: 0;
      border: 0;
      background: transparent;
      color: var(--ink);
      padding: 0 14px;
      box-shadow: none;
      margin: 0;
    }
    .search-shell input:focus { background: #FCFBF8; box-shadow: inset 0 0 0 1px rgba(140, 41, 51, .28); }
    .search-shell button {
      width: 48px;
      height: 44px;
      border: 0;
      background: var(--ink);
      color: var(--paper);
    }
    .header-actions { display: flex; justify-content: flex-end; gap: 8px; align-items: center; }
    .icon-btn, .menu-icon-btn {
      min-width: 44px;
      height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border: 1px solid var(--line);
      background: var(--white);
      color: var(--ink);
      border-radius: var(--radius);
      font-size: 14px;
    }
    .icon-btn:hover, .menu-icon-btn:hover { border-color: var(--wine); color: var(--wine); background: #FBFAF7; transform: translateY(-1px); }
    .channel-row { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .channel-nav {
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 54px;
      white-space: nowrap;
    }
    .channel-nav a {
      display: inline-flex;
      align-items: center;
      min-height: 36px;
      padding: 7px 14px;
      border: 1px solid transparent;
      color: var(--muted);
      border-radius: var(--radius);
      font-size: 14px;
      font-weight: 600;
    }
    .channel-nav a:hover { color: var(--ink); background: var(--soft); }
    .channel-nav a.active { color: var(--paper); background: var(--wine); border-color: var(--wine); }
    .hero {
      position: relative;
      min-height: calc(100vh - 112px);
      display: flex;
      align-items: flex-end;
      overflow: hidden;
      background: var(--ink);
    }
    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(28,27,26,.18), rgba(28,27,26,.84)), url('https://images.unsplash.com/photo-1519608487953-e999c86e7455?auto=format&fit=crop&w=1800&q=80') center/cover no-repeat;
      filter: saturate(.74) contrast(1.02);
    }
    .hero-inner { position: relative; width: 100%; padding: 88px 0 72px; color: var(--paper); }
    .hero-kicker { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
    .tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 28px;
      padding: 4px 10px;
      border: 1px solid rgba(247,245,241,.28);
      color: inherit;
      font-size: 13px;
      line-height: 1.4;
      border-radius: var(--radius);
      background: rgba(28,27,26,.34);
    }
    .tag.light { color: var(--muted); border-color: var(--line); background: var(--white); }
    .tag.current { background: var(--wine); color: var(--paper); border-color: var(--wine); }
    h1, h2, h3 { margin: 0; line-height: 1.28; font-weight: 700; letter-spacing: 0; }
    h1 { max-width: 880px; font-size: clamp(32px, 5vw, 54px); margin-bottom: 20px; }
    .hero p { max-width: 780px; margin: 0 0 24px; color: rgba(247,245,241,.86); font-size: 17px; line-height: 1.85; }
    .hero-actions, .cta-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
    .button, button.button {
      margin: 0;
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 18px;
      border-radius: 4px;
      border: 1px solid transparent;
      font-weight: 700;
      line-height: 1.2;
      transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
    }
    .button.primary { background: var(--wine); color: var(--paper); }
    .button.primary:hover, .button.primary:focus { background: var(--wine-dark); color: var(--paper); transform: translateY(-2px); box-shadow: var(--shadow); }
    .button.secondary { background: rgba(247,245,241,.08); color: var(--paper); border-color: rgba(247,245,241,.4); }
    .button.secondary:hover { background: rgba(247,245,241,.16); color: var(--paper); }
    .button.outline { background: transparent; color: var(--ink); border-color: var(--line); }
    .button.outline:hover { background: var(--soft); border-color: var(--wine); color: var(--wine); }
    .hero-metrics { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 18px; }
    .metric { min-width: 145px; padding-left: 16px; border-left: 2px solid var(--wine); }
    .metric strong { display: block; font-size: 22px; line-height: 1.2; }
    .metric span { color: rgba(247,245,241,.72); font-size: 13px; }
    section { padding: 82px 0; }
    .section-soft { background: var(--soft); }
    .section-dark { background: var(--ink); color: var(--paper); }
    .section-head { margin-bottom: 34px; }
    .section-head h2 { font-size: clamp(26px, 3vw, 34px); margin-bottom: 12px; }
    .section-head p { max-width: 760px; margin: 0; color: var(--muted); line-height: 1.86; }
    .section-dark .section-head p { color: rgba(247,245,241,.72); }
    .catalog-feature {
      height: 100%;
      border: 1px solid var(--line);
      background: var(--white);
      border-radius: var(--radius);
      overflow: hidden;
    }
    .catalog-feature img { aspect-ratio: 4 / 3; }
    .catalog-feature-body { padding: 22px; }
    .catalog-feature-body h3 { font-size: 22px; margin: 12px 0 10px; }
    .catalog-list { border-top: 1px solid var(--line); background: rgba(255,255,255,.54); }
    .catalog-row {
      display: grid;
      grid-template-columns: 108px 1fr 190px 34px;
      gap: 18px;
      align-items: center;
      padding: 22px 4px;
      border-bottom: 1px solid var(--line);
    }
    .catalog-row:hover { background: rgba(255,255,255,.7); }
    .catalog-row:hover h3 { color: var(--wine); }
    .catalog-row:hover .row-arrow { transform: translateX(5px); color: var(--wine); }
    .row-num { font-weight: 700; color: var(--wine); font-size: 20px; }
    .row-label { display: block; color: var(--muted); font-size: 13px; margin-top: 4px; }
    .catalog-row h3 { font-size: 19px; margin-bottom: 7px; transition: color .2s ease; }
    .catalog-row p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.75; }
    .row-meta { color: var(--muted); font-size: 13px; text-align: right; }
    .row-arrow { transition: transform .2s ease, color .2s ease; }
    .feature-grid { align-items: stretch; }
    .entry-card {
      height: 100%;
      border: 1px solid var(--line);
      background: var(--white);
      border-radius: var(--radius);
      overflow: hidden;
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }
    .entry-card:hover { transform: translateY(-2px); border-color: var(--wine); box-shadow: var(--shadow); }
    .entry-card img { aspect-ratio: 16 / 10; }
    .entry-card.large img { aspect-ratio: 16 / 9; }
    .entry-body { padding: 20px; }
    .entry-body h3 { font-size: 20px; margin: 10px 0 9px; }
    .entry-card.large .entry-body h3 { font-size: 24px; }
    .entry-body p { margin: 0 0 14px; color: var(--muted); line-height: 1.78; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .text-link { display: inline-flex; align-items: center; gap: 7px; color: var(--wine); font-weight: 700; }
    .text-link:hover { color: var(--wine-dark); transform: translateX(2px); }
    .topic-strip { display: flex; gap: 16px; overflow-x: auto; padding: 6px 0 18px; scroll-snap-type: x mandatory; }
    .topic-card {
      flex: 0 0 285px;
      scroll-snap-align: start;
      border: 1px solid rgba(247,245,241,.18);
      background: rgba(247,245,241,.06);
      border-radius: var(--radius);
      padding: 20px;
      min-height: 210px;
    }
    .topic-card:hover { border-color: rgba(247,245,241,.42); background: rgba(247,245,241,.1); transform: translateY(-2px); }
    .topic-card h3 { font-size: 19px; margin: 16px 0 10px; }
    .topic-card p { margin: 0; color: rgba(247,245,241,.72); font-size: 15px; }
    .slider-controls { display: flex; gap: 8px; justify-content: flex-end; margin-top: -62px; margin-bottom: 28px; }
    .slider-controls button { background: transparent; color: var(--paper); border: 1px solid rgba(247,245,241,.28); border-radius: var(--radius); width: 44px; height: 44px; }
    .slider-controls button:hover { background: rgba(247,245,241,.1); }
    .focus-grid .focus-card {
      padding: 22px;
      height: 100%;
      border: 1px solid var(--line);
      background: var(--white);
      border-radius: var(--radius);
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }
    .focus-card:hover { transform: translateY(-2px); border-color: var(--wine); box-shadow: var(--shadow); }
    .focus-card h3 { font-size: 19px; margin: 12px 0 8px; }
    .focus-card p { color: var(--muted); margin: 0; font-size: 15px; }
    .news-layout { align-items: start; }
    .news-list { border-top: 1px solid var(--line); }
    .news-item {
      display: grid;
      grid-template-columns: 116px 1fr;
      gap: 18px;
      padding: 18px 0;
      border-bottom: 1px solid var(--line);
    }
    .news-date { color: var(--wine); font-weight: 700; font-size: 14px; }
    .news-item h3 { font-size: 18px; margin-bottom: 7px; }
    .news-item p { margin: 0; color: var(--muted); font-size: 15px; }
    .side-note { border: 1px solid var(--line); background: var(--white); border-radius: var(--radius); padding: 22px; }
    .side-note h3 { font-size: 20px; margin-bottom: 10px; }
    .side-note p { color: var(--muted); margin-bottom: 16px; }
    .age-band {
      border-left: 3px solid var(--sage);
      background: #EEF1ED;
      padding: 18px 20px;
      color: #34443B;
      border-radius: var(--radius);
    }
    .cta-band { background: var(--soft); padding: 58px 0; }
    .cta-box {
      border: 1px solid var(--line);
      background: var(--paper);
      padding: 30px;
      border-radius: var(--radius);
    }
    .cta-box h2 { font-size: 30px; margin-bottom: 10px; }
    .cta-box p { color: var(--muted); margin: 0; }
    .accordion { background: transparent; border: 0; }
    .accordion-item { margin-bottom: 10px; border: 1px solid var(--line); background: var(--white); border-radius: var(--radius); overflow: hidden; }
    .accordion-title {
      border: 0;
      color: var(--ink);
      font-size: 16px;
      font-weight: 700;
      padding: 18px 50px 18px 20px;
      background: var(--white);
    }
    .accordion-title:hover, .accordion-title:focus { background: #FCFBF8; color: var(--wine); }
    .accordion-title::before { color: var(--wine); font-size: 20px; margin-top: -12px; }
    .accordion-content { border: 0; border-top: 1px solid var(--line); background: #FCFBF8; color: var(--muted); line-height: 1.85; padding: 18px 20px; }
    .site-footer { background: var(--ink); color: var(--paper); padding: 58px 0 24px; }
    .footer-brand { font-size: 22px; font-weight: 700; margin-bottom: 10px; }
    .footer-desc { color: rgba(247,245,241,.72); max-width: 560px; }
    .footer-col h3 { font-size: 16px; margin-bottom: 12px; }
    .footer-col a { display: block; color: rgba(247,245,241,.72); margin: 8px 0; font-size: 14px; }
    .footer-col a:hover { color: var(--paper); }
    .copyright { margin-top: 34px; padding-top: 20px; border-top: 1px solid rgba(247,245,241,.14); color: rgba(247,245,241,.56); font-size: 13px; }
    .reveal { border: 0; border-radius: var(--radius); padding: 24px; }
    .reveal h2 { font-size: 24px; margin-bottom: 10px; }
    .reveal p { color: var(--muted); }
    .mobile-only { display: none; }
    @media (max-width: 1024px) {
      .brand-logo { font-size: 17px; }
      .catalog-row { grid-template-columns: 92px 1fr 132px 28px; gap: 14px; }
      section { padding: 68px 0; }
    }
    @media (max-width: 768px) {
      .desktop-search, .desktop-action { display: none; }
      .mobile-only { display: inline-flex; }
      .brand-row { padding: 10px 0; }
      .channel-nav { min-height: 50px; gap: 6px; }
      .channel-nav a { padding: 7px 12px; }
      .hero { min-height: 720px; }
      .hero-inner { padding: 76px 0 56px; }
      .hero p { font-size: 16px; }
      .hero-actions .button { width: 100%; }
      .hero-metrics { gap: 12px; }
      .metric { min-width: calc(50% - 8px); }
      section { padding: 56px 0; }
      .catalog-row { grid-template-columns: 1fr 28px; gap: 10px; padding: 20px 0; }
      .catalog-row > div:first-child, .row-meta { grid-column: 1 / -1; text-align: left; }
      .news-item { grid-template-columns: 1fr; gap: 6px; }
      .slider-controls { display: none; }
      .cta-actions { margin-top: 20px; }
    }
    @media (max-width: 520px) {
      body { font-size: 15px; }
      .brand-logo span:last-child { max-width: 230px; }
      .brand-mark { width: 32px; height: 32px; }
      .icon-btn span { display: none; }
      .hero { min-height: 680px; }
      .hero-kicker { gap: 8px; }
      .tag { font-size: 12px; }
      .metric { min-width: 100%; }
      .catalog-feature-body, .entry-body, .focus-grid .focus-card, .side-note, .cta-box { padding: 18px; }
      .topic-card { flex-basis: 252px; }
      .cta-box h2 { font-size: 25px; }
    }

/* roulang page: category1 */
:root {
      --ink: #1C1B1A;
      --paper: #F7F5F1;
      --paper-strong: #FFFFFF;
      --line: #E9E6E0;
      --muted: #605D58;
      --soft: #F0EDE7;
      --wine: #8C2933;
      --wine-deep: #6F1F28;
      --safe: #51645A;
      --shadow: 0 12px 30px rgba(28, 27, 26, 0.08);
      --radius: 6px;
      --container: 1200px;
      --font: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: var(--font);
      color: var(--ink);
      background: var(--paper);
      line-height: 1.78;
      font-size: 16px;
      letter-spacing: 0;
      text-rendering: optimizeLegibility;
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
    }

    img,
    svg {
      max-width: 100%;
      display: block;
    }

    button,
    input,
    select,
    textarea {
      font: inherit;
    }

    button {
      cursor: pointer;
    }

    :focus-visible {
      outline: 3px solid rgba(140, 41, 51, .28);
      outline-offset: 3px;
    }

    .grid-container {
      max-width: var(--container);
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(247, 245, 241, .96);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--line);
    }

    .brand-row {
      border-bottom: 1px solid var(--line);
    }

    .brand-wrap {
      min-height: 72px;
      align-items: center;
    }

    .brand-logo {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-weight: 700;
      color: var(--ink);
      line-height: 1.25;
    }

    .brand-mark {
      width: 36px;
      height: 36px;
      border: 1px solid rgba(28, 27, 26, .16);
      background: var(--ink);
      color: var(--paper);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius);
      font-size: 17px;
    }

    .desktop-search {
      display: block;
    }

    .search-shell {
      width: 100%;
      display: flex;
      align-items: center;
      background: var(--paper-strong);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }

    .search-shell:focus-within {
      border-color: var(--wine);
      box-shadow: 0 0 0 3px rgba(140, 41, 51, .08);
      background: #fff;
    }

    .search-shell input {
      height: 44px;
      border: 0;
      margin: 0;
      background: transparent;
      box-shadow: none;
      padding: 0 14px;
      color: var(--ink);
    }

    .search-shell input::placeholder {
      color: rgba(96, 93, 88, .82);
    }

    .search-shell button {
      width: 46px;
      min-height: 44px;
      border: 0;
      background: transparent;
      color: var(--muted);
    }

    .search-shell button:hover {
      color: var(--wine);
      background: var(--soft);
    }

    .header-actions {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 8px;
    }

    .icon-btn,
    .menu-icon-btn {
      min-height: 42px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--paper-strong);
      color: var(--ink);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 12px;
      font-size: 14px;
      transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
    }

    .icon-btn:hover,
    .menu-icon-btn:hover {
      transform: translateY(-1px);
      border-color: var(--wine);
      color: var(--wine);
      box-shadow: 0 8px 18px rgba(28, 27, 26, .06);
    }

    .icon-btn.is-saved {
      background: var(--wine);
      color: var(--paper);
      border-color: var(--wine);
    }

    .mobile-only {
      display: none;
    }

    .channel-row {
      background: var(--paper);
    }

    .channel-nav {
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 50px;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .channel-nav::-webkit-scrollbar {
      display: none;
    }

    .channel-nav a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 34px;
      padding: 0 14px;
      border-radius: var(--radius);
      border: 1px solid transparent;
      white-space: nowrap;
      font-size: 14px;
      color: var(--muted);
    }

    .channel-nav a:hover {
      background: var(--soft);
      color: var(--ink);
      border-color: var(--line);
    }

    .channel-nav a.active {
      background: var(--wine);
      color: var(--paper);
      border-color: var(--wine);
    }

    main {
      overflow: hidden;
    }

    .breadcrumb-band {
      padding: 22px 0 14px;
      background: var(--paper);
    }

    .breadcrumbs {
      margin: 0;
      background: transparent;
      font-size: 13px;
      color: var(--muted);
    }

    .breadcrumbs a {
      color: var(--muted);
    }

    .breadcrumbs a:hover {
      color: var(--wine);
    }

    .category-hero {
      position: relative;
      min-height: 430px;
      display: flex;
      align-items: flex-end;
      color: var(--paper);
      background: var(--ink);
      isolation: isolate;
    }

    .category-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      background:
        radial-gradient(circle at 18% 24%, rgba(140, 41, 51, .34), transparent 26%),
        linear-gradient(120deg, rgba(28, 27, 26, .72), rgba(28, 27, 26, .46)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='620' viewBox='0 0 1600 620'%3E%3Crect width='1600' height='620' fill='%231C1B1A'/%3E%3Cpath d='M0 390 C230 340 320 512 540 442 C770 370 820 184 1054 222 C1240 252 1330 388 1600 320 L1600 620 L0 620 Z' fill='%23312A28'/%3E%3Cpath d='M112 96 C280 60 356 128 488 96 C674 50 810 26 998 82 C1184 138 1320 104 1488 62' fill='none' stroke='%238C2933' stroke-width='3' opacity='.36'/%3E%3Crect x='116' y='142' width='382' height='242' rx='6' fill='%23282524' stroke='%23534B48'/%3E%3Crect x='545' y='126' width='236' height='318' rx='6' fill='%23201F1E' stroke='%23413A38'/%3E%3Crect x='830' y='158' width='512' height='258' rx='6' fill='%232A2725' stroke='%23534B48'/%3E%3Ccircle cx='1260' cy='248' r='72' fill='%23383230' opacity='.9'/%3E%3Cpath d='M212 238 h190 M212 278 h140 M912 256 h296 M912 298 h210' stroke='%23E9E6E0' stroke-width='8' opacity='.14' stroke-linecap='round'/%3E%3C/svg%3E");
      background-size: cover;
      background-position: center;
    }

    .category-hero::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: rgba(28, 27, 26, .36);
    }

    .hero-inner {
      width: 100%;
      padding: 72px 0 58px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 10px;
      border-radius: var(--radius);
      border: 1px solid rgba(247, 245, 241, .28);
      color: rgba(247, 245, 241, .9);
      font-size: 13px;
      margin-bottom: 18px;
      background: rgba(28, 27, 26, .32);
    }

    h1 {
      font-size: clamp(34px, 4.4vw, 52px);
      line-height: 1.22;
      margin: 0 0 16px;
      font-weight: 700;
      max-width: 860px;
      color: var(--paper);
    }

    .hero-copy {
      max-width: 760px;
      color: rgba(247, 245, 241, .88);
      margin: 0 0 24px;
      font-size: 17px;
    }

    .hero-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 26px;
    }

    .meta-pill {
      border: 1px solid rgba(247, 245, 241, .24);
      background: rgba(28, 27, 26, .35);
      color: rgba(247, 245, 241, .88);
      padding: 7px 10px;
      border-radius: var(--radius);
      font-size: 13px;
    }

    .hero-actions,
    .cta-actions,
    .list-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: center;
    }

    .button,
    button.button {
      border-radius: var(--radius);
      margin: 0;
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-weight: 600;
      padding: 0 18px;
      transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
    }

    .button.primary-action {
      background: var(--wine);
      color: var(--paper);
      border: 1px solid var(--wine);
    }

    .button.primary-action:hover,
    .button.primary-action:focus {
      background: var(--wine-deep);
      border-color: var(--wine-deep);
      transform: translateY(-2px);
      box-shadow: 0 12px 24px rgba(111, 31, 40, .18);
    }

    .button.secondary-action {
      background: rgba(247, 245, 241, .08);
      color: var(--paper);
      border: 1px solid rgba(247, 245, 241, .34);
    }

    .button.secondary-action:hover,
    .button.secondary-action:focus {
      background: rgba(247, 245, 241, .18);
      color: var(--paper);
      transform: translateY(-2px);
    }

    .section {
      padding: 82px 0;
    }

    .section.compact {
      padding: 58px 0;
    }

    .section-title {
      margin-bottom: 32px;
    }

    .section-kicker {
      color: var(--wine);
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 8px;
    }

    h2 {
      font-size: clamp(26px, 3vw, 32px);
      line-height: 1.28;
      margin: 0 0 10px;
      color: var(--ink);
      font-weight: 700;
    }

    h3 {
      font-size: 19px;
      line-height: 1.35;
      margin: 0 0 8px;
      color: var(--ink);
      font-weight: 700;
    }

    .section-desc {
      max-width: 760px;
      color: var(--muted);
      margin: 0;
    }

    .filter-strip {
      position: relative;
      z-index: 4;
      margin-top: -34px;
    }

    .filter-panel {
      background: var(--paper-strong);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 14px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
    }

    .filter-label {
      color: var(--muted);
      font-size: 13px;
      font-weight: 600;
      margin-right: 2px;
    }

    .tag,
    .filter-btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 36px;
      border-radius: var(--radius);
      border: 1px solid var(--line);
      background: var(--paper-strong);
      color: var(--muted);
      padding: 0 11px;
      font-size: 13px;
    }

    .tag.active,
    .filter-btn.active {
      background: var(--wine);
      border-color: var(--wine);
      color: var(--paper);
    }

    .tag:hover,
    .filter-btn:hover {
      border-color: var(--wine);
      color: var(--wine);
      background: var(--soft);
    }

    .filter-btn.active:hover {
      color: var(--paper);
      background: var(--wine-deep);
      border-color: var(--wine-deep);
    }

    .dropdown-pane {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      background: var(--paper-strong);
      padding: 10px;
    }

    .dropdown-pane a {
      display: block;
      padding: 8px 10px;
      border-radius: var(--radius);
      color: var(--muted);
      font-size: 14px;
    }

    .dropdown-pane a:hover {
      background: var(--soft);
      color: var(--wine);
    }

    .side-panel {
      background: var(--paper-strong);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 24px;
      position: sticky;
      top: 142px;
    }

    .side-panel p {
      color: var(--muted);
      margin-bottom: 18px;
      font-size: 15px;
    }

    .side-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 10px;
    }

    .side-list a {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 0;
      border-bottom: 1px solid var(--line);
      color: var(--muted);
      font-size: 14px;
    }

    .side-list a:hover {
      color: var(--wine);
    }

    .side-note {
      margin-top: 24px;
      padding: 14px;
      border-left: 3px solid var(--safe);
      background: #EEF1ED;
      color: var(--safe);
      font-size: 14px;
      line-height: 1.7;
    }

    .entry-list {
      display: grid;
      gap: 18px;
    }

    .entry-card {
      display: grid;
      grid-template-columns: 220px minmax(0, 1fr);
      gap: 22px;
      align-items: stretch;
      padding: 18px;
      background: var(--paper-strong);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }

    .entry-card:hover {
      transform: translateY(-2px);
      border-color: rgba(140, 41, 51, .52);
      box-shadow: var(--shadow);
    }

    .entry-card.featured {
      grid-template-columns: 300px minmax(0, 1fr);
      padding: 22px;
      background: #FFFEFC;
    }

    .thumb {
      aspect-ratio: 16 / 10;
      border-radius: var(--radius);
      overflow: hidden;
      background: var(--ink);
      border: 1px solid rgba(28, 27, 26, .08);
    }

    .thumb svg {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .entry-body {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    .entry-top {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      margin-bottom: 8px;
    }

    .entry-title {
      margin: 0 0 8px;
      font-size: 20px;
      line-height: 1.38;
    }

    .entry-title a:hover {
      color: var(--wine);
    }

    .entry-desc {
      color: var(--muted);
      margin: 0 0 16px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .entry-bottom {
      margin-top: auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      color: var(--muted);
      font-size: 13px;
    }

    .text-link {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: var(--wine);
      font-weight: 700;
    }

    .text-link:hover {
      color: var(--wine-deep);
      gap: 10px;
    }

    .bookmark-mini {
      border: 1px solid var(--line);
      background: var(--paper);
      color: var(--muted);
      border-radius: var(--radius);
      width: 38px;
      height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .bookmark-mini:hover,
    .bookmark-mini.is-saved {
      border-color: var(--wine);
      background: var(--wine);
      color: var(--paper);
    }

    .notice-band {
      display: grid;
      grid-template-columns: 56px minmax(0, 1fr);
      gap: 16px;
      align-items: start;
      padding: 20px;
      background: #EEF1ED;
      border: 1px solid rgba(81, 100, 90, .22);
      border-radius: var(--radius);
      color: var(--safe);
    }

    .notice-icon {
      width: 48px;
      height: 48px;
      border-radius: var(--radius);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(81, 100, 90, .12);
      color: var(--safe);
      font-size: 20px;
    }

    .notice-band h3 {
      color: var(--safe);
      margin-bottom: 4px;
    }

    .notice-band p {
      margin: 0;
      color: var(--safe);
      font-size: 15px;
    }

    .pager {
      margin-top: 28px;
      display: flex;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .pager .button {
      background: var(--paper-strong);
      color: var(--ink);
      border: 1px solid var(--line);
    }

    .pager .button:hover {
      background: var(--soft);
      border-color: var(--wine);
      color: var(--wine);
      transform: translateY(-2px);
    }

    .related-band {
      background: var(--soft);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .related-scroll {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(260px, 1fr);
      gap: 16px;
      overflow-x: auto;
      padding-bottom: 8px;
      scroll-snap-type: x mandatory;
    }

    .related-card {
      scroll-snap-align: start;
      background: var(--paper-strong);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 20px;
      min-height: 184px;
      display: flex;
      flex-direction: column;
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }

    .related-card:hover {
      transform: translateY(-2px);
      border-color: var(--wine);
      box-shadow: var(--shadow);
    }

    .related-card p {
      color: var(--muted);
      margin: 0 0 16px;
      font-size: 15px;
    }

    .related-card .text-link {
      margin-top: auto;
    }

    .cta-band {
      background: var(--ink);
      color: var(--paper);
    }

    .cta-box {
      padding: 46px 0;
      align-items: center;
    }

    .cta-box h2 {
      color: var(--paper);
      margin-bottom: 10px;
    }

    .cta-box p {
      color: rgba(247, 245, 241, .78);
      margin: 0;
      max-width: 680px;
    }

    .cta-actions {
      justify-content: flex-end;
    }

    .cta-actions .button.secondary-action {
      background: transparent;
    }

    .faq-section {
      background: var(--paper);
    }

    .accordion {
      background: transparent;
      border: 0;
    }

    .accordion-item {
      background: var(--paper-strong);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      margin-bottom: 10px;
      overflow: hidden;
    }

    .accordion-title {
      border: 0;
      color: var(--ink);
      font-size: 16px;
      font-weight: 700;
      padding: 18px 54px 18px 18px;
      line-height: 1.45;
      background: var(--paper-strong);
    }

    .accordion-title:hover,
    .accordion-title:focus {
      background: var(--soft);
      color: var(--wine);
    }

    .accordion-title::before {
      color: var(--wine);
      font-size: 20px;
      right: 20px;
      margin-top: -13px;
    }

    .accordion-content {
      border: 0;
      border-top: 1px solid var(--line);
      background: #FFFEFC;
      color: var(--muted);
      padding: 18px;
      line-height: 1.78;
    }

    .feedback-form {
      background: var(--paper-strong);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 22px;
    }

    .feedback-form label {
      color: var(--ink);
      font-weight: 700;
      font-size: 14px;
      margin-bottom: 8px;
    }

    .feedback-form input,
    .feedback-form select,
    .feedback-form textarea {
      min-height: 44px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #FFFEFC;
      box-shadow: none;
      color: var(--ink);
      margin-bottom: 14px;
    }

    .feedback-form textarea {
      min-height: 116px;
      resize: vertical;
    }

    .feedback-form input:focus,
    .feedback-form select:focus,
    .feedback-form textarea:focus {
      border-color: var(--wine);
      box-shadow: 0 0 0 3px rgba(140, 41, 51, .08);
      background: #fff;
    }

    .site-footer {
      background: var(--ink);
      color: rgba(247, 245, 241, .78);
      padding: 58px 0 24px;
    }

    .footer-brand {
      color: var(--paper);
      font-size: 22px;
      font-weight: 700;
      margin-bottom: 12px;
    }

    .footer-desc {
      max-width: 560px;
      margin: 0;
      color: rgba(247, 245, 241, .72);
    }

    .footer-col h3 {
      color: var(--paper);
      font-size: 15px;
      margin-bottom: 12px;
    }

    .footer-col a {
      display: block;
      color: rgba(247, 245, 241, .68);
      margin: 7px 0;
      font-size: 14px;
    }

    .footer-col a:hover {
      color: var(--paper);
    }

    .copyright {
      border-top: 1px solid rgba(247, 245, 241, .12);
      margin-top: 34px;
      padding-top: 18px;
      color: rgba(247, 245, 241, .56);
      font-size: 13px;
    }

    .reveal {
      border: 0;
      border-radius: var(--radius);
      background: var(--paper);
      color: var(--ink);
      padding: 28px;
    }

    .reveal h2 {
      font-size: 24px;
      margin-bottom: 10px;
    }

    .reveal p {
      color: var(--muted);
    }

    .close-button {
      color: var(--muted);
    }

    .toast {
      position: fixed;
      right: 24px;
      bottom: 24px;
      z-index: 100;
      background: var(--ink);
      color: var(--paper);
      padding: 12px 16px;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      transform: translateY(20px);
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s ease, transform .2s ease;
      font-size: 14px;
    }

    .toast.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    @media (max-width: 1024px) {
      .brand-wrap {
        min-height: 66px;
      }

      .desktop-action span {
        display: none;
      }

      .side-panel {
        position: static;
        margin-bottom: 24px;
      }

      .entry-card.featured,
      .entry-card {
        grid-template-columns: 190px minmax(0, 1fr);
      }

      .cta-actions {
        justify-content: flex-start;
        margin-top: 20px;
      }
    }

    @media (max-width: 768px) {
      body {
        font-size: 15px;
      }

      .desktop-search,
      .desktop-action {
        display: none;
      }

      .mobile-only {
        display: inline-flex;
      }

      .brand-logo {
        font-size: 15px;
      }

      .brand-mark {
        width: 34px;
        height: 34px;
      }

      .channel-nav {
        display: none;
        padding: 10px 0 14px;
        min-height: auto;
      }

      .channel-nav.is-open {
        display: flex;
      }

      .category-hero {
        min-height: 420px;
      }

      .hero-inner {
        padding: 56px 0 48px;
      }

      .filter-strip {
        margin-top: 0;
        padding-top: 16px;
      }

      .filter-panel {
        box-shadow: none;
      }

      .section {
        padding: 58px 0;
      }

      .entry-card.featured,
      .entry-card {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .entry-card {
        padding: 16px;
      }

      .notice-band {
        grid-template-columns: 1fr;
      }

      .related-scroll {
        grid-auto-columns: minmax(245px, 86vw);
      }

      .cta-box {
        padding: 38px 0;
      }
    }

    @media (max-width: 520px) {
      .hero-actions,
      .cta-actions,
      .list-actions,
      .pager {
        align-items: stretch;
        flex-direction: column;
      }

      .button,
      button.button {
        width: 100%;
      }

      .filter-panel {
        align-items: stretch;
      }

      .filter-label {
        width: 100%;
      }

      .tag,
      .filter-btn {
        justify-content: center;
      }

      .entry-bottom {
        align-items: stretch;
        flex-direction: column;
      }

      .toast {
        left: 16px;
        right: 16px;
        bottom: 18px;
        text-align: center;
      }
    }