/* roulang page: index */
:root {
      --brand: #24483a;
      --brand-dark: #173229;
      --brand-soft: #dfeee5;
      --brand-mist: #edf6ef;
      --leaf: #6c927a;
      --sand: #f7f1e6;
      --sand-2: #fbf7ef;
      --amber: #d89b45;
      --amber-soft: #fff0d4;
      --ink: #23302a;
      --muted: #68756f;
      --line: rgba(36,72,58,.15);
      --white: #ffffff;
      --radius-xl: 32px;
      --radius-lg: 24px;
      --radius-md: 18px;
      --radius-pill: 999px;
      --shadow: 0 18px 50px rgba(38,55,44,.08);
      --shadow-hover: 0 24px 68px rgba(38,55,44,.14);
      --container: 1200px;
      --ease: all .25s ease;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
      color: var(--ink);
      background:
        radial-gradient(circle at 12% 8%, rgba(223,238,229,.85) 0, rgba(223,238,229,0) 34%),
        radial-gradient(circle at 88% 18%, rgba(255,240,212,.65) 0, rgba(255,240,212,0) 30%),
        linear-gradient(180deg, #fbf8f0 0%, #f8f4eb 42%, #ffffff 100%);
      line-height: 1.75;
      overflow-x: hidden;
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: var(--ease);
    }

    a:hover {
      color: var(--brand);
    }

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

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

    .site-container {
      width: min(100% - 32px, var(--container));
      margin-inline: auto;
    }

    .section-pad {
      padding: 88px 0;
    }

    .section-pad-sm {
      padding: 64px 0;
    }

    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 34px;
    }

    .section-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--brand);
      background: var(--brand-mist);
      border: 1px solid var(--line);
      border-radius: var(--radius-pill);
      padding: 7px 13px;
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 12px;
    }

    .section-title {
      margin: 0;
      font-size: clamp(28px, 3vw, 38px);
      line-height: 1.18;
      letter-spacing: -.04em;
      font-weight: 800;
      color: var(--ink);
    }

    .section-desc {
      max-width: 620px;
      color: var(--muted);
      margin: 12px 0 0;
      font-size: 16px;
    }

    .btn-brand,
    .btn-soft,
    .btn-ghost {
      border-radius: var(--radius-pill);
      padding: 12px 20px;
      font-weight: 800;
      border: 1px solid transparent;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: var(--ease);
      min-height: 48px;
      white-space: nowrap;
    }

    .btn-brand {
      background: var(--brand);
      color: #fffaf0;
      box-shadow: 0 14px 34px rgba(36,72,58,.18);
    }

    .btn-brand:hover,
    .btn-brand:focus {
      background: var(--brand-dark);
      color: #fffaf0;
      transform: translateY(-2px);
      box-shadow: var(--shadow-hover);
    }

    .btn-soft {
      background: #fff9ec;
      color: var(--brand);
      border-color: rgba(36,72,58,.16);
    }

    .btn-soft:hover,
    .btn-soft:focus {
      background: var(--brand-mist);
      color: var(--brand-dark);
      border-color: rgba(36,72,58,.26);
      transform: translateY(-2px);
    }

    .btn-ghost {
      background: rgba(255,255,255,.58);
      color: var(--brand);
      border-color: rgba(36,72,58,.18);
    }

    .btn-ghost:hover,
    .btn-ghost:focus {
      background: #fff;
      border-color: var(--brand);
      color: var(--brand-dark);
    }

    .badge-soft {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: var(--radius-pill);
      padding: 7px 11px;
      font-size: 12px;
      font-weight: 800;
      color: var(--brand-dark);
      background: var(--brand-mist);
      border: 1px solid rgba(36,72,58,.12);
    }

    .badge-amber {
      background: var(--amber-soft);
      color: #7a4c13;
      border-color: rgba(216,155,69,.24);
    }

    .site-header {
      position: relative;
      z-index: 20;
      background: rgba(251,247,239,.88);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(36,72,58,.12);
    }

    .top-nav {
      min-height: 78px;
      display: grid;
      grid-template-columns: minmax(250px, 1fr) minmax(280px, 430px) auto;
      align-items: center;
      gap: 22px;
      padding: 16px 0;
    }

    .brand-logo {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
      font-weight: 900;
      color: var(--brand-dark);
      letter-spacing: -.03em;
    }

    .logo-mark {
      width: 42px;
      height: 42px;
      border-radius: 16px;
      background:
        radial-gradient(circle at 70% 30%, #f1ca83 0 12%, transparent 13%),
        linear-gradient(135deg, var(--brand) 0%, #6f967e 100%);
      box-shadow: 0 12px 28px rgba(36,72,58,.18);
      position: relative;
      flex: 0 0 auto;
    }

    .logo-mark:after {
      content: "";
      position: absolute;
      left: 10px;
      bottom: 9px;
      width: 20px;
      height: 12px;
      border-radius: 20px 20px 20px 2px;
      background: rgba(255,250,240,.9);
      transform: rotate(-18deg);
    }

    .brand-text {
      display: block;
      overflow-wrap: anywhere;
      font-size: 17px;
      line-height: 1.28;
    }

    .search-box {
      position: relative;
    }

    .search-box i {
      position: absolute;
      left: 17px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--leaf);
      z-index: 2;
    }

    .search-input {
      width: 100%;
      border-radius: var(--radius-pill);
      border: 1px solid rgba(36,72,58,.16);
      background: rgba(255,255,255,.72);
      color: var(--ink);
      min-height: 48px;
      padding: 12px 18px 12px 44px;
      outline: none;
      transition: var(--ease);
    }

    .search-input::placeholder {
      color: rgba(104,117,111,.82);
    }

    .search-input:focus {
      border-color: var(--brand);
      box-shadow: 0 0 0 4px rgba(36,72,58,.10);
      background: #fff;
    }

    .channel-row {
      border-top: 1px solid rgba(36,72,58,.08);
      padding: 12px 0 14px;
      overflow-x: auto;
      scrollbar-width: none;
    }

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

    .channel-tabs {
      display: flex;
      gap: 10px;
      min-width: max-content;
    }

    .channel-link {
      border-radius: var(--radius-pill);
      padding: 9px 16px;
      font-size: 14px;
      font-weight: 800;
      color: var(--muted);
      background: rgba(255,255,255,.62);
      border: 1px solid rgba(36,72,58,.12);
    }

    .channel-link:hover {
      color: var(--brand);
      background: var(--brand-mist);
      border-color: rgba(36,72,58,.22);
    }

    .channel-link.active {
      color: #fffaf0;
      background: var(--brand);
      border-color: var(--brand);
      box-shadow: 0 10px 24px rgba(36,72,58,.16);
    }

    .hero {
      padding: 34px 0 70px;
    }

    .hero-kv {
      min-height: 620px;
      border-radius: 38px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: stretch;
      background:
        linear-gradient(120deg, rgba(23,50,41,.86), rgba(36,72,58,.62) 48%, rgba(248,241,230,.10)),
        radial-gradient(circle at 76% 18%, rgba(216,155,69,.40), transparent 27%),
        radial-gradient(circle at 22% 74%, rgba(223,238,229,.42), transparent 28%),
        linear-gradient(135deg, #24483a, #78987e);
      box-shadow: var(--shadow);
    }

    .hero-kv:before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
      background-size: 54px 54px;
      mask-image: linear-gradient(90deg, rgba(0,0,0,.9), rgba(0,0,0,.3));
    }

    .hero-kv:after {
      content: "";
      position: absolute;
      right: -100px;
      top: 70px;
      width: 520px;
      height: 520px;
      border-radius: 48%;
      background:
        radial-gradient(circle at 40% 40%, rgba(255,255,255,.42), transparent 0 15%, rgba(255,255,255,.10) 16% 24%, transparent 25%),
        linear-gradient(135deg, rgba(255,250,240,.24), rgba(223,238,229,.12));
      transform: rotate(18deg);
      border: 1px solid rgba(255,255,255,.18);
    }

    .hero-content {
      position: relative;
      z-index: 2;
      width: 100%;
      padding: clamp(28px, 5vw, 64px);
      display: grid;
      grid-template-columns: 1.08fr .92fr;
      gap: 38px;
      align-items: center;
    }

    .hero-copy {
      max-width: 720px;
      color: #fffaf0;
    }

    .hero-copy .badge-soft {
      background: rgba(255,250,240,.14);
      color: #fffaf0;
      border-color: rgba(255,255,255,.26);
      margin-bottom: 18px;
    }

    h1 {
      margin: 0;
      font-size: clamp(32px, 5.2vw, 58px);
      line-height: 1.14;
      letter-spacing: -.06em;
      font-weight: 900;
      overflow-wrap: anywhere;
    }

    .hero-lead {
      margin: 22px 0 0;
      max-width: 650px;
      font-size: clamp(16px, 1.6vw, 19px);
      color: rgba(255,250,240,.86);
      line-height: 1.85;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 30px;
    }

    .hero-actions .btn-soft {
      background: #fffaf0;
      border-color: rgba(255,255,255,.22);
    }

    .hero-data {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-top: 34px;
      max-width: 640px;
    }

    .data-pill {
      border: 1px solid rgba(255,255,255,.2);
      border-radius: 20px;
      padding: 14px 16px;
      background: rgba(255,250,240,.12);
      color: #fffaf0;
    }

    .data-pill strong {
      display: block;
      font-size: 20px;
      line-height: 1.1;
    }

    .data-pill span {
      display: block;
      color: rgba(255,250,240,.74);
      font-size: 13px;
      margin-top: 4px;
    }

    .hero-panel {
      position: relative;
      z-index: 3;
      border-radius: 30px;
      background: rgba(255,250,240,.9);
      border: 1px solid rgba(255,255,255,.5);
      padding: 24px;
      box-shadow: 0 24px 70px rgba(23,50,41,.18);
    }

    .cover-board {
      border-radius: 26px;
      background:
        linear-gradient(150deg, #fffaf0, #eef6ed),
        radial-gradient(circle at 80% 15%, rgba(216,155,69,.16), transparent 28%);
      padding: 22px;
      border: 1px solid rgba(36,72,58,.12);
      min-height: 360px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
      overflow: hidden;
    }

    .cover-board:before {
      content: "";
      position: absolute;
      right: -42px;
      top: -58px;
      width: 210px;
      height: 210px;
      border-radius: 50%;
      background: rgba(223,238,229,.72);
    }

    .cover-board > * {
      position: relative;
      z-index: 1;
    }

    .cover-date {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: center;
      color: var(--brand-dark);
      font-weight: 900;
    }

    .cover-date .month {
      font-size: 52px;
      line-height: 1;
      letter-spacing: -.06em;
    }

    .cover-date .note {
      text-align: right;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
    }

    .cover-list {
      display: grid;
      gap: 12px;
      margin-top: 24px;
    }

    .cover-list li {
      list-style: none;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 14px;
      border-radius: 16px;
      background: rgba(255,255,255,.72);
      border: 1px solid rgba(36,72,58,.09);
      color: var(--ink);
      font-weight: 700;
      font-size: 14px;
    }

    .cover-list i {
      color: var(--brand);
    }

    .hero-countbar {
      position: absolute;
      left: clamp(18px, 4vw, 42px);
      right: clamp(18px, 4vw, 42px);
      bottom: 24px;
      z-index: 5;
      border-radius: 24px;
      background: rgba(255,250,240,.94);
      border: 1px solid rgba(255,255,255,.7);
      box-shadow: 0 16px 46px rgba(23,50,41,.16);
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 18px;
      padding: 14px 18px;
    }

    .status-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--amber);
      box-shadow: 0 0 0 6px rgba(216,155,69,.18);
      flex: 0 0 auto;
    }

    .countbar-title {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 900;
      color: var(--brand-dark);
      min-width: 0;
    }

    .mini-count {
      display: flex;
      gap: 8px;
      justify-content: center;
    }

    .mini-count span {
      min-width: 62px;
      border-radius: 16px;
      padding: 7px 10px;
      text-align: center;
      background: var(--brand-mist);
      color: var(--brand-dark);
      font-weight: 900;
      line-height: 1.2;
    }

    .mini-count small {
      display: block;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
    }

    .ticket-grid {
      display: grid;
      grid-template-columns: 1.25fr .85fr .85fr;
      gap: 18px;
    }

    .ticket-card {
      border-radius: var(--radius-lg);
      background: rgba(255,255,255,.78);
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      padding: 28px;
      position: relative;
      overflow: hidden;
      transition: var(--ease);
      min-height: 230px;
    }

    .ticket-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-hover);
      border-color: rgba(36,72,58,.26);
    }

    .ticket-card.featured {
      background:
        radial-gradient(circle at 90% 0%, rgba(216,155,69,.18), transparent 28%),
        linear-gradient(135deg, #fffaf0, #edf6ef);
    }

    .ticket-card:after {
      content: "";
      position: absolute;
      right: -36px;
      bottom: -36px;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      border: 18px solid rgba(36,72,58,.06);
    }

    .ticket-icon {
      width: 48px;
      height: 48px;
      border-radius: 18px;
      display: grid;
      place-items: center;
      background: var(--brand);
      color: #fffaf0;
      font-size: 20px;
      margin-bottom: 18px;
    }

    .ticket-card h3 {
      margin: 0 0 10px;
      font-size: 22px;
      font-weight: 900;
      letter-spacing: -.03em;
    }

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

    .rule-wrap {
      display: grid;
      grid-template-columns: .86fr 1.14fr;
      gap: 24px;
      align-items: start;
    }

    .rule-note {
      border-radius: var(--radius-xl);
      background: var(--brand);
      color: #fffaf0;
      padding: 34px;
      min-height: 100%;
      box-shadow: var(--shadow);
      position: relative;
      overflow: hidden;
    }

    .rule-note:after {
      content: "";
      position: absolute;
      width: 220px;
      height: 220px;
      border-radius: 50%;
      right: -90px;
      bottom: -90px;
      background: rgba(255,250,240,.08);
      border: 1px solid rgba(255,255,255,.14);
    }

    .rule-note h2 {
      font-size: clamp(26px, 3vw, 36px);
      font-weight: 900;
      line-height: 1.2;
      margin: 0 0 16px;
    }

    .rule-note p {
      color: rgba(255,250,240,.82);
      margin: 0;
    }

    .rule-list {
      display: grid;
      gap: 14px;
    }

    .rule-item {
      display: grid;
      grid-template-columns: 48px 1fr;
      gap: 16px;
      padding: 22px;
      border-radius: 22px;
      background: rgba(255,255,255,.78);
      border: 1px solid var(--line);
      transition: var(--ease);
    }

    .rule-item:hover {
      background: var(--brand-mist);
      border-color: rgba(36,72,58,.24);
    }

    .rule-num {
      width: 48px;
      height: 48px;
      border-radius: 18px;
      display: grid;
      place-items: center;
      background: var(--sand);
      color: var(--brand);
      font-weight: 900;
    }

    .rule-item h3 {
      margin: 0 0 4px;
      font-size: 18px;
      font-weight: 900;
    }

    .rule-item p {
      margin: 0;
      color: var(--muted);
      font-size: 15px;
    }

    .news-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 360px;
      gap: 24px;
    }

    .news-list {
      border-radius: var(--radius-xl);
      background: rgba(255,255,255,.78);
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      padding: 18px;
    }

    .news-row {
      display: grid;
      grid-template-columns: 118px 1fr auto;
      gap: 18px;
      align-items: center;
      padding: 18px;
      border-radius: 22px;
      transition: var(--ease);
      border: 1px solid transparent;
    }

    .news-row + .news-row {
      border-top: 1px solid rgba(36,72,58,.08);
    }

    .news-row:hover {
      background: var(--brand-mist);
      border-color: rgba(36,72,58,.15);
    }

    .news-date {
      color: var(--brand);
      font-weight: 900;
      font-size: 14px;
    }

    .news-row h3 {
      margin: 0 0 4px;
      font-size: 18px;
      font-weight: 900;
    }

    .news-row p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.55;
    }

    .recommend-card {
      border-radius: var(--radius-xl);
      background: linear-gradient(155deg, var(--brand), #466f5a);
      color: #fffaf0;
      padding: 28px;
      box-shadow: var(--shadow);
      position: sticky;
      top: 24px;
      overflow: hidden;
    }

    .recommend-card:before {
      content: "";
      position: absolute;
      right: -44px;
      top: -44px;
      width: 150px;
      height: 150px;
      border-radius: 50%;
      background: rgba(255,250,240,.10);
    }

    .recommend-card h3 {
      position: relative;
      margin: 18px 0 10px;
      font-size: 24px;
      font-weight: 900;
    }

    .recommend-card p {
      position: relative;
      color: rgba(255,250,240,.82);
      margin-bottom: 22px;
    }

    .countdown-block {
      border-radius: 36px;
      background:
        radial-gradient(circle at 10% 12%, rgba(216,155,69,.15), transparent 28%),
        linear-gradient(135deg, #fffaf0, #f2f7ef);
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      padding: clamp(24px, 4vw, 40px);
      display: grid;
      grid-template-columns: .8fr 1.2fr;
      gap: 30px;
      align-items: center;
    }

    .countdown-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }

    .time-box {
      border-radius: 24px;
      background: rgba(255,255,255,.78);
      border: 1px solid rgba(36,72,58,.12);
      padding: 24px 14px;
      text-align: center;
    }

    .time-box strong {
      display: block;
      font-size: clamp(30px, 4vw, 48px);
      line-height: 1;
      color: var(--brand);
      font-weight: 900;
      letter-spacing: -.04em;
    }

    .time-box span {
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
    }

    .spotlight-wrap {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 24px;
      align-items: stretch;
    }

    .spot-list {
      display: grid;
      gap: 14px;
    }

    .spot-item {
      display: grid;
      grid-template-columns: 54px 1fr;
      gap: 16px;
      border-radius: 24px;
      background: rgba(255,255,255,.78);
      border: 1px solid var(--line);
      padding: 20px;
      transition: var(--ease);
    }

    .spot-item:hover {
      transform: translateX(4px);
      background: var(--brand-mist);
      border-color: rgba(36,72,58,.22);
    }

    .spot-index {
      width: 54px;
      height: 54px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: var(--brand);
      color: #fffaf0;
      font-weight: 900;
    }

    .spot-item h3 {
      margin: 0 0 5px;
      font-size: 18px;
      font-weight: 900;
    }

    .spot-item p {
      margin: 0 0 10px;
      color: var(--muted);
      font-size: 15px;
    }

    .summary-card {
      border-radius: var(--radius-xl);
      background:
        linear-gradient(145deg, rgba(36,72,58,.92), rgba(36,72,58,.76)),
        radial-gradient(circle at 70% 20%, rgba(216,155,69,.22), transparent 28%);
      color: #fffaf0;
      padding: 34px;
      min-height: 100%;
      position: relative;
      overflow: hidden;
    }

    .summary-card h3 {
      font-size: 28px;
      font-weight: 900;
      line-height: 1.25;
      margin: 0 0 14px;
    }

    .summary-card p {
      color: rgba(255,250,240,.82);
      margin: 0 0 22px;
    }

    .summary-check {
      display: grid;
      gap: 12px;
      padding: 0;
      margin: 0;
    }

    .summary-check li {
      list-style: none;
      display: flex;
      gap: 10px;
      align-items: flex-start;
      color: rgba(255,250,240,.9);
      font-weight: 700;
    }

    .summary-check i {
      color: #f3c77c;
      margin-top: 4px;
    }

    .subscribe-box {
      border-radius: 36px;
      background:
        radial-gradient(circle at 82% 16%, rgba(216,155,69,.16), transparent 28%),
        linear-gradient(135deg, #f6efe1, #edf6ef);
      border: 1px solid rgba(36,72,58,.13);
      padding: clamp(24px, 4vw, 42px);
      box-shadow: var(--shadow);
    }

    .subscribe-form {
      display: grid;
      grid-template-columns: 1fr 1fr auto;
      gap: 12px;
      margin-top: 24px;
    }

    .form-control.custom-input,
    .form-select.custom-input {
      border-radius: var(--radius-pill);
      min-height: 52px;
      border: 1px solid rgba(36,72,58,.16);
      background-color: rgba(255,255,255,.82);
      padding: 12px 18px;
      color: var(--ink);
      box-shadow: none;
    }

    .form-control.custom-input:focus,
    .form-select.custom-input:focus {
      border-color: var(--brand);
      box-shadow: 0 0 0 4px rgba(36,72,58,.10);
      background-color: #fff;
    }

    .privacy-note {
      margin-top: 12px;
      color: var(--muted);
      font-size: 13px;
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .entry-matrix {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 18px;
    }

    .entry-main,
    .entry-card {
      border-radius: var(--radius-xl);
      background: rgba(255,255,255,.8);
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      padding: 28px;
      transition: var(--ease);
    }

    .entry-main:hover,
    .entry-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-hover);
    }

    .entry-main {
      min-height: 360px;
      background:
        radial-gradient(circle at 78% 18%, rgba(216,155,69,.16), transparent 28%),
        linear-gradient(135deg, #fffaf0, #edf6ef);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .entry-main h3,
    .entry-card h3 {
      margin: 14px 0 10px;
      font-size: 22px;
      font-weight: 900;
    }

    .entry-main p,
    .entry-card p {
      color: var(--muted);
      margin: 0 0 18px;
      font-size: 15px;
    }

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

    .assurance-bar {
      border-radius: var(--radius-xl);
      background: var(--brand-dark);
      color: #fffaf0;
      padding: 24px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      box-shadow: var(--shadow);
    }

    .assurance-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px;
      border-radius: 18px;
      background: rgba(255,250,240,.08);
      border: 1px solid rgba(255,255,255,.10);
    }

    .assurance-item i {
      width: 38px;
      height: 38px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      background: rgba(255,250,240,.12);
      color: #f3c77c;
      flex: 0 0 auto;
    }

    .assurance-item strong {
      display: block;
      line-height: 1.2;
      font-size: 15px;
    }

    .assurance-item span {
      display: block;
      color: rgba(255,250,240,.68);
      font-size: 12px;
      margin-top: 2px;
    }

    .member-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }

    .member-card {
      border-radius: var(--radius-lg);
      background: rgba(255,255,255,.78);
      border: 1px solid var(--line);
      padding: 24px;
      transition: var(--ease);
    }

    .member-card.recommend {
      background: linear-gradient(160deg, var(--brand), #527761);
      color: #fffaf0;
      transform: translateY(-8px);
    }

    .member-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow);
    }

    .member-card.recommend:hover {
      transform: translateY(-12px);
    }

    .member-card h3 {
      margin: 14px 0 8px;
      font-size: 21px;
      font-weight: 900;
    }

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

    .member-card.recommend p {
      color: rgba(255,250,240,.78);
    }

    .member-list {
      padding: 0;
      margin: 0 0 20px;
      display: grid;
      gap: 8px;
    }

    .member-list li {
      list-style: none;
      display: flex;
      gap: 8px;
      align-items: flex-start;
      font-size: 14px;
    }

    .member-list i {
      color: var(--brand);
      margin-top: 4px;
    }

    .member-card.recommend .member-list i {
      color: #f3c77c;
    }

    .accordion.faq-accordion {
      display: grid;
      gap: 12px;
    }

    .faq-accordion .accordion-item {
      border: 1px solid var(--line);
      border-radius: 22px;
      overflow: hidden;
      background: rgba(255,255,255,.78);
      box-shadow: none;
    }

    .faq-accordion .accordion-button {
      border-radius: 22px;
      background: transparent;
      color: var(--ink);
      font-weight: 900;
      padding: 20px 22px;
      box-shadow: none;
      gap: 12px;
    }

    .faq-accordion .accordion-button:not(.collapsed) {
      background: var(--brand-mist);
      color: var(--brand-dark);
    }

    .faq-accordion .accordion-button:focus {
      box-shadow: 0 0 0 4px rgba(36,72,58,.10);
      border-color: transparent;
    }

    .faq-accordion .accordion-button::after {
      filter: hue-rotate(90deg) saturate(.8);
    }

    .faq-accordion .accordion-body {
      padding: 0 22px 22px 22px;
      color: var(--muted);
      line-height: 1.8;
    }

    .final-cta {
      border-radius: 38px;
      background:
        radial-gradient(circle at 18% 18%, rgba(255,240,212,.26), transparent 28%),
        linear-gradient(135deg, var(--brand-dark), var(--brand));
      color: #fffaf0;
      padding: clamp(28px, 5vw, 52px);
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 28px;
      align-items: center;
      box-shadow: var(--shadow);
      position: relative;
      overflow: hidden;
    }

    .final-cta:after {
      content: "";
      position: absolute;
      right: -70px;
      bottom: -90px;
      width: 260px;
      height: 260px;
      border-radius: 50%;
      background: rgba(255,250,240,.08);
    }

    .final-cta h2,
    .final-cta p,
    .final-cta .cta-actions {
      position: relative;
      z-index: 1;
    }

    .final-cta h2 {
      margin: 0 0 10px;
      font-size: clamp(28px, 3.5vw, 42px);
      font-weight: 900;
      letter-spacing: -.05em;
    }

    .final-cta p {
      margin: 0;
      color: rgba(255,250,240,.8);
      max-width: 680px;
    }

    .floating-cta {
      position: sticky;
      bottom: 16px;
      z-index: 15;
      width: min(100% - 32px, 980px);
      margin: 0 auto 24px;
      border-radius: var(--radius-pill);
      background: rgba(255,250,240,.94);
      border: 1px solid rgba(36,72,58,.14);
      box-shadow: 0 16px 52px rgba(23,50,41,.18);
      backdrop-filter: blur(16px);
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 16px;
      padding: 12px 14px 12px 22px;
    }

    .floating-cta strong {
      color: var(--brand-dark);
      font-size: 15px;
    }

    .floating-cta span {
      color: var(--muted);
      font-size: 13px;
      display: block;
      margin-top: 1px;
    }

    .site-footer {
      background: var(--brand-dark);
      color: #fffaf0;
      padding: 62px 0 34px;
      margin-top: 72px;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.25fr .75fr .75fr;
      gap: 34px;
      padding-bottom: 36px;
      border-bottom: 1px solid rgba(255,255,255,.12);
    }

    .footer-brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-weight: 900;
      margin-bottom: 16px;
    }

    .footer-brand .logo-mark {
      box-shadow: none;
      background:
        radial-gradient(circle at 70% 30%, #f1ca83 0 12%, transparent 13%),
        linear-gradient(135deg, #6f967e 0%, #dfeee5 100%);
    }

    .footer-text {
      color: rgba(255,250,240,.72);
      max-width: 520px;
      margin: 0;
      line-height: 1.8;
    }

    .footer-title {
      font-size: 15px;
      font-weight: 900;
      margin: 0 0 14px;
      color: #fffaf0;
    }

    .footer-links {
      display: grid;
      gap: 10px;
    }

    .footer-links a {
      color: rgba(255,250,240,.72);
      font-size: 14px;
    }

    .footer-links a:hover {
      color: #f3c77c;
      transform: translateX(3px);
    }

    .copyright {
      padding-top: 24px;
      display: flex;
      justify-content: space-between;
      gap: 18px;
      flex-wrap: wrap;
      color: rgba(255,250,240,.58);
      font-size: 13px;
    }

    @media (max-width: 1100px) {
      .top-nav {
        grid-template-columns: 1fr auto;
      }

      .search-box {
        grid-column: 1 / -1;
        order: 3;
      }

      .hero-content,
      .countdown-block,
      .spotlight-wrap,
      .rule-wrap,
      .news-layout,
      .entry-matrix {
        grid-template-columns: 1fr;
      }

      .recommend-card {
        position: relative;
        top: auto;
      }

      .ticket-grid {
        grid-template-columns: 1fr 1fr;
      }

      .ticket-card.featured {
        grid-column: 1 / -1;
      }

      .assurance-bar,
      .member-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 768px) {
      .site-container {
        width: min(100% - 22px, var(--container));
      }

      .section-pad {
        padding: 58px 0;
      }

      .section-pad-sm {
        padding: 46px 0;
      }

      .top-nav {
        grid-template-columns: 1fr;
        gap: 12px;
      }

      .top-nav .btn-brand {
        width: 100%;
      }

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

      .hero {
        padding-top: 18px;
      }

      .hero-kv {
        min-height: auto;
        border-radius: 28px;
      }

      .hero-content {
        padding: 24px;
        padding-bottom: 172px;
      }

      .hero-data {
        grid-template-columns: 1fr;
      }

      .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
      }

      .hero-countbar {
        grid-template-columns: 1fr;
        align-items: stretch;
        border-radius: 22px;
      }

      .mini-count {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
      }

      .mini-count span {
        min-width: 0;
      }

      .ticket-grid,
      .countdown-grid,
      .assurance-bar,
      .member-grid,
      .footer-grid {
        grid-template-columns: 1fr;
      }

      .news-row {
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .subscribe-form {
        grid-template-columns: 1fr;
      }

      .final-cta {
        grid-template-columns: 1fr;
      }

      .final-cta .cta-actions {
        display: grid;
        gap: 10px;
      }

      .floating-cta {
        grid-template-columns: 1fr;
        border-radius: 24px;
        padding: 14px;
      }

      .floating-cta .btn-brand {
        width: 100%;
      }

      .copyright {
        display: grid;
      }
    }

    @media (max-width: 420px) {
      h1 {
        font-size: 30px;
      }

      .cover-date .month {
        font-size: 42px;
      }

      .hero-panel,
      .cover-board,
      .ticket-card,
      .entry-main,
      .entry-card,
      .member-card {
        padding: 20px;
      }

      .mini-count {
        grid-template-columns: repeat(2, 1fr);
      }

      .spot-item,
      .rule-item {
        grid-template-columns: 1fr;
      }
    }

/* roulang page: category1 */
:root {
      --color-ink: #26372c;
      --color-text: #33443a;
      --color-muted: #6f7f72;
      --color-soft: #f7f1e6;
      --color-cream: #fffaf1;
      --color-leaf: #2f6b4f;
      --color-leaf-dark: #1f4f3a;
      --color-leaf-soft: #e6f0e7;
      --color-sand: #efe3cf;
      --color-amber: #d99a43;
      --color-border: rgba(68, 94, 75, .16);
      --shadow-soft: 0 18px 50px rgba(38, 55, 44, .08);
      --shadow-hover: 0 22px 60px rgba(38, 55, 44, .13);
      --radius-xl: 32px;
      --radius-lg: 24px;
      --radius-md: 18px;
      --radius-pill: 999px;
      --container: 1200px;
      --transition: all .24s ease;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
      color: var(--color-text);
      background:
        radial-gradient(circle at 12% 8%, rgba(214, 230, 205, .62), transparent 34%),
        radial-gradient(circle at 84% 18%, rgba(239, 218, 181, .55), transparent 30%),
        linear-gradient(180deg, #fffaf1 0%, #f7f1e6 46%, #f8f4ea 100%);
      line-height: 1.75;
      overflow-x: hidden;
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: var(--transition);
    }

    a:hover {
      color: var(--color-leaf-dark);
    }

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

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

    ::selection {
      color: #fff;
      background: var(--color-leaf);
    }

    .site-container {
      width: min(var(--container), calc(100% - 40px));
      margin: 0 auto;
    }

    .section {
      padding: 84px 0;
      position: relative;
    }

    .section-tight {
      padding: 56px 0;
    }

    .section-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 12px;
      border-radius: var(--radius-pill);
      background: rgba(47, 107, 79, .1);
      color: var(--color-leaf-dark);
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 16px;
    }

    .section-kicker::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--color-amber);
      box-shadow: 0 0 0 5px rgba(217, 154, 67, .16);
    }

    .section-title {
      margin: 0;
      color: var(--color-ink);
      font-size: clamp(28px, 4vw, 38px);
      line-height: 1.18;
      font-weight: 800;
      letter-spacing: -.02em;
    }

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

    .site-header {
      position: relative;
      z-index: 10;
      background: rgba(255, 250, 241, .88);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--color-border);
    }

    .top-nav {
      min-height: 82px;
      display: grid;
      grid-template-columns: auto minmax(280px, 1fr) auto;
      align-items: center;
      gap: 22px;
    }

    .brand-logo, .footer-brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-weight: 800;
      color: var(--color-ink);
      letter-spacing: -.02em;
    }

    .brand-text {
      max-width: 360px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .logo-mark {
      width: 38px;
      height: 38px;
      flex: 0 0 auto;
      border-radius: 14px 14px 18px 14px;
      background:
        radial-gradient(circle at 70% 28%, #f3c982 0 9%, transparent 10%),
        linear-gradient(135deg, #2f6b4f 0%, #4c8a66 56%, #9fbc89 100%);
      box-shadow: 0 12px 26px rgba(47, 107, 79, .22);
      position: relative;
    }

    .logo-mark::after {
      content: "";
      position: absolute;
      left: 10px;
      bottom: 8px;
      width: 18px;
      height: 12px;
      border-radius: 50% 50% 50% 0;
      border: 2px solid rgba(255, 250, 241, .72);
      transform: rotate(-18deg);
    }

    .search-box {
      display: flex;
      align-items: center;
      gap: 10px;
      height: 48px;
      padding: 0 16px;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-pill);
      background: rgba(255, 255, 255, .72);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
      transition: var(--transition);
    }

    .search-box:focus-within {
      border-color: rgba(47, 107, 79, .55);
      box-shadow: 0 0 0 4px rgba(47, 107, 79, .1);
      background: #fff;
    }

    .search-box i {
      color: var(--color-muted);
    }

    .search-input {
      width: 100%;
      border: 0;
      outline: none;
      background: transparent;
      color: var(--color-text);
      font-size: 15px;
    }

    .search-input::placeholder {
      color: #89958a;
    }

    .btn-brand, .btn-soft, .btn-line {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 46px;
      padding: 12px 20px;
      border-radius: var(--radius-pill);
      font-weight: 750;
      border: 1px solid transparent;
      transition: var(--transition);
      white-space: nowrap;
      cursor: pointer;
    }

    .btn-brand {
      background: var(--color-leaf);
      color: #fffaf1;
      box-shadow: 0 16px 34px rgba(47, 107, 79, .23);
    }

    .btn-brand:hover, .btn-brand:focus {
      color: #fff;
      background: var(--color-leaf-dark);
      transform: translateY(-2px);
      box-shadow: 0 20px 42px rgba(31, 79, 58, .28);
    }

    .btn-soft {
      color: var(--color-leaf-dark);
      background: rgba(255, 250, 241, .85);
      border-color: var(--color-border);
    }

    .btn-soft:hover, .btn-soft:focus {
      color: var(--color-leaf-dark);
      background: var(--color-leaf-soft);
      border-color: rgba(47, 107, 79, .24);
      transform: translateY(-2px);
    }

    .btn-line {
      color: var(--color-leaf-dark);
      background: transparent;
      border-color: rgba(47, 107, 79, .28);
    }

    .btn-line:hover, .btn-line:focus {
      background: rgba(47, 107, 79, .08);
      border-color: rgba(47, 107, 79, .48);
      transform: translateY(-2px);
    }

    a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
      outline: 3px solid rgba(217, 154, 67, .42);
      outline-offset: 3px;
    }

    .channel-row {
      padding: 0 0 16px;
    }

    .channel-tabs {
      display: flex;
      align-items: center;
      gap: 10px;
      overflow-x: auto;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }

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

    .channel-link {
      display: inline-flex;
      align-items: center;
      min-height: 38px;
      padding: 8px 16px;
      border-radius: var(--radius-pill);
      color: var(--color-muted);
      background: rgba(255,255,255,.48);
      border: 1px solid var(--color-border);
      font-size: 14px;
      font-weight: 750;
      white-space: nowrap;
    }

    .channel-link:hover {
      color: var(--color-leaf-dark);
      background: rgba(230, 240, 231, .85);
      border-color: rgba(47, 107, 79, .24);
    }

    .channel-link.active {
      color: #fffaf1;
      background: var(--color-leaf);
      border-color: var(--color-leaf);
      box-shadow: 0 12px 28px rgba(47, 107, 79, .18);
    }

    .hero-category {
      padding: 62px 0 42px;
    }

    .category-bento {
      display: grid;
      grid-template-columns: minmax(0, 1.48fr) minmax(300px, .78fr);
      grid-template-rows: auto auto;
      gap: 20px;
      align-items: stretch;
    }

    .hero-main-card {
      grid-row: span 2;
      min-height: 460px;
      padding: clamp(28px, 5vw, 48px);
      border-radius: var(--radius-xl);
      background:
        linear-gradient(135deg, rgba(255,250,241,.96), rgba(230,240,231,.88)),
        radial-gradient(circle at 88% 20%, rgba(217,154,67,.26), transparent 34%);
      border: 1px solid var(--color-border);
      box-shadow: var(--shadow-soft);
      position: relative;
      overflow: hidden;
    }

    .hero-main-card::before {
      content: "";
      position: absolute;
      right: -74px;
      bottom: -96px;
      width: 280px;
      height: 280px;
      border-radius: 50%;
      background: rgba(47,107,79,.08);
      border: 38px solid rgba(255,250,241,.5);
    }

    .hero-main-card::after {
      content: "";
      position: absolute;
      inset: auto 42px 34px auto;
      width: 210px;
      height: 138px;
      border-radius: 28px;
      background:
        linear-gradient(90deg, rgba(47,107,79,.16) 0 18%, transparent 18% 100%),
        repeating-linear-gradient(180deg, rgba(47,107,79,.08) 0 2px, transparent 2px 24px),
        rgba(255,255,255,.54);
      border: 1px solid rgba(47,107,79,.12);
      transform: rotate(-3deg);
    }

    .hero-content {
      position: relative;
      z-index: 2;
      max-width: 760px;
    }

    .hero-title {
      margin: 16px 0 0;
      color: var(--color-ink);
      font-size: clamp(32px, 5.2vw, 54px);
      line-height: 1.14;
      font-weight: 850;
      letter-spacing: -.045em;
      overflow-wrap: anywhere;
    }

    .hero-summary {
      max-width: 680px;
      margin: 20px 0 0;
      color: #52645a;
      font-size: 17px;
      line-height: 1.85;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 30px;
    }

    .hero-meta-line {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 34px;
    }

    .meta-pill, .status-badge, .tag-pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      border-radius: var(--radius-pill);
      font-size: 13px;
      font-weight: 750;
    }

    .meta-pill {
      padding: 8px 12px;
      background: rgba(255,255,255,.62);
      border: 1px solid var(--color-border);
      color: var(--color-text);
    }

    .status-badge {
      padding: 6px 10px;
      color: #7d5319;
      background: rgba(217,154,67,.16);
      border: 1px solid rgba(217,154,67,.22);
    }

    .tag-pill {
      padding: 7px 12px;
      color: var(--color-leaf-dark);
      background: rgba(47,107,79,.09);
      border: 1px solid rgba(47,107,79,.14);
    }

    .mini-card {
      padding: 24px;
      border-radius: var(--radius-lg);
      background: rgba(255,255,255,.66);
      border: 1px solid var(--color-border);
      box-shadow: var(--shadow-soft);
      overflow: hidden;
      position: relative;
    }

    .mini-card:hover, .entry-card:hover, .stream-item:hover, .aside-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-hover);
      border-color: rgba(47,107,79,.25);
    }

    .mini-card, .entry-card, .stream-item, .aside-card, .filter-pill {
      transition: var(--transition);
    }

    .mini-icon {
      width: 46px;
      height: 46px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--color-leaf-dark);
      background: var(--color-leaf-soft);
      border-radius: 16px;
      font-size: 22px;
      margin-bottom: 18px;
    }

    .mini-title {
      margin: 0;
      color: var(--color-ink);
      font-size: 20px;
      font-weight: 800;
    }

    .mini-text {
      margin: 10px 0 0;
      color: var(--color-muted);
      font-size: 15px;
    }

    .cta-strip {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 20px 24px;
      border-radius: var(--radius-lg);
      background: var(--color-ink);
      color: #fffaf1;
      box-shadow: 0 18px 46px rgba(38,55,44,.18);
    }

    .cta-strip p {
      margin: 0;
      color: rgba(255,250,241,.78);
      font-size: 15px;
    }

    .filter-panel {
      padding: 22px;
      border-radius: var(--radius-lg);
      background: rgba(255,255,255,.58);
      border: 1px solid var(--color-border);
      box-shadow: var(--shadow-soft);
    }

    .filter-scroll {
      display: flex;
      align-items: center;
      gap: 10px;
      overflow-x: auto;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }

    .filter-scroll::-webkit-scrollbar {
      display: none;
    }

    .filter-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 15px;
      border-radius: var(--radius-pill);
      border: 1px solid var(--color-border);
      background: rgba(255,250,241,.72);
      color: var(--color-muted);
      font-size: 14px;
      font-weight: 750;
      white-space: nowrap;
    }

    .filter-pill:hover, .filter-pill.active {
      color: #fffaf1;
      background: var(--color-leaf);
      border-color: var(--color-leaf);
    }

    .content-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 340px;
      gap: 26px;
      align-items: start;
      margin-top: 30px;
    }

    .stream-list {
      display: grid;
      gap: 16px;
    }

    .stream-item {
      display: grid;
      grid-template-columns: 120px minmax(0, 1fr) auto;
      gap: 20px;
      align-items: center;
      padding: 24px;
      border-radius: var(--radius-lg);
      background: rgba(255,255,255,.64);
      border: 1px solid var(--color-border);
      box-shadow: 0 12px 34px rgba(38,55,44,.055);
    }

    .date-box {
      min-height: 92px;
      padding: 14px;
      border-radius: 20px;
      background:
        linear-gradient(180deg, rgba(230,240,231,.92), rgba(255,250,241,.86));
      border: 1px solid rgba(47,107,79,.14);
      text-align: center;
    }

    .date-box strong {
      display: block;
      color: var(--color-leaf-dark);
      font-size: 30px;
      line-height: 1.05;
      font-weight: 850;
    }

    .date-box span {
      color: var(--color-muted);
      font-size: 13px;
      font-weight: 750;
    }

    .stream-title {
      margin: 0;
      color: var(--color-ink);
      font-size: 21px;
      line-height: 1.34;
      font-weight: 820;
    }

    .stream-desc {
      margin: 9px 0 0;
      color: var(--color-muted);
      font-size: 15px;
    }

    .stream-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
    }

    .stream-action {
      display: flex;
      justify-content: flex-end;
    }

    .aside-stack {
      position: sticky;
      top: 18px;
      display: grid;
      gap: 16px;
    }

    .aside-card {
      padding: 24px;
      border-radius: var(--radius-lg);
      background: rgba(255,250,241,.78);
      border: 1px solid var(--color-border);
      box-shadow: 0 12px 34px rgba(38,55,44,.055);
    }

    .aside-title {
      margin: 0 0 14px;
      color: var(--color-ink);
      font-size: 19px;
      font-weight: 820;
    }

    .aside-note {
      margin: 0;
      color: var(--color-muted);
      font-size: 14px;
    }

    .countdown-card {
      display: grid;
      grid-template-columns: .8fr 1.2fr;
      gap: 24px;
      align-items: center;
      padding: 30px;
      border-radius: var(--radius-xl);
      background:
        linear-gradient(135deg, rgba(47,107,79,.95), rgba(31,79,58,.92)),
        radial-gradient(circle at 12% 18%, rgba(217,154,67,.22), transparent 30%);
      color: #fffaf1;
      box-shadow: 0 22px 58px rgba(31,79,58,.22);
    }

    .countdown-copy h2 {
      margin: 0;
      font-size: clamp(26px, 4vw, 36px);
      line-height: 1.2;
      font-weight: 850;
    }

    .countdown-copy p {
      margin: 14px 0 0;
      color: rgba(255,250,241,.78);
    }

    .countdown-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
    }

    .time-box {
      padding: 18px 10px;
      text-align: center;
      border-radius: 22px;
      background: rgba(255,250,241,.1);
      border: 1px solid rgba(255,250,241,.18);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
    }

    .time-box strong {
      display: block;
      font-size: clamp(28px, 4vw, 44px);
      line-height: 1;
      font-weight: 850;
      color: #ffe3a4;
    }

    .time-box span {
      display: block;
      margin-top: 8px;
      color: rgba(255,250,241,.76);
      font-size: 13px;
      font-weight: 750;
    }

    .entry-grid {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 20px;
      margin-top: 30px;
    }

    .entry-card {
      padding: 28px;
      border-radius: var(--radius-lg);
      background: rgba(255,255,255,.62);
      border: 1px solid var(--color-border);
      box-shadow: var(--shadow-soft);
    }

    .entry-card.featured {
      min-height: 310px;
      background:
        radial-gradient(circle at 82% 10%, rgba(217,154,67,.16), transparent 32%),
        linear-gradient(135deg, rgba(255,255,255,.78), rgba(230,240,231,.72));
    }

    .entry-group {
      display: grid;
      gap: 20px;
    }

    .entry-title {
      margin: 14px 0 0;
      color: var(--color-ink);
      font-size: 23px;
      line-height: 1.28;
      font-weight: 820;
    }

    .entry-text {
      margin: 12px 0 22px;
      color: var(--color-muted);
      font-size: 15px;
    }

    .subscribe-box {
      padding: 34px;
      border-radius: var(--radius-xl);
      background:
        linear-gradient(135deg, rgba(255,250,241,.92), rgba(230,240,231,.74)),
        radial-gradient(circle at 90% 16%, rgba(217,154,67,.18), transparent 26%);
      border: 1px solid var(--color-border);
      box-shadow: var(--shadow-soft);
    }

    .form-control, .form-select {
      min-height: 50px;
      border-radius: 18px;
      border: 1px solid var(--color-border);
      background-color: rgba(255,255,255,.76);
      color: var(--color-text);
      padding: 12px 15px;
      box-shadow: none;
    }

    .form-control:focus, .form-select:focus {
      border-color: rgba(47,107,79,.55);
      box-shadow: 0 0 0 4px rgba(47,107,79,.1);
      background-color: #fff;
    }

    .form-hint {
      margin: 12px 0 0;
      color: var(--color-muted);
      font-size: 13px;
    }

    .quick-links {
      display: grid;
      gap: 10px;
    }

    .quick-links a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 14px;
      border-radius: 16px;
      background: rgba(230,240,231,.52);
      border: 1px solid rgba(47,107,79,.12);
      color: var(--color-text);
      font-weight: 720;
      font-size: 14px;
    }

    .quick-links a:hover {
      background: rgba(47,107,79,.1);
      transform: translateX(2px);
    }

    .faq-wrap {
      margin-top: 30px;
      border-radius: var(--radius-xl);
      overflow: hidden;
      box-shadow: var(--shadow-soft);
      border: 1px solid var(--color-border);
      background: rgba(255,255,255,.56);
    }

    .accordion-item {
      border: 0;
      border-bottom: 1px solid var(--color-border);
      background: transparent;
    }

    .accordion-item:last-child {
      border-bottom: 0;
    }

    .accordion-button {
      padding: 22px 24px;
      color: var(--color-ink);
      background: rgba(255,250,241,.44);
      font-weight: 800;
      box-shadow: none;
      gap: 10px;
    }

    .accordion-button::before {
      content: "";
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--color-amber);
      flex: 0 0 auto;
    }

    .accordion-button:not(.collapsed) {
      color: var(--color-leaf-dark);
      background: rgba(230,240,231,.62);
      box-shadow: none;
    }

    .accordion-button:focus {
      box-shadow: 0 0 0 4px rgba(47,107,79,.1);
      border-color: transparent;
    }

    .accordion-body {
      padding: 0 24px 24px 43px;
      color: var(--color-muted);
      background: rgba(255,250,241,.28);
    }

    .final-cta {
      padding: 44px;
      border-radius: var(--radius-xl);
      background:
        linear-gradient(135deg, rgba(38,55,44,.98), rgba(47,107,79,.94));
      color: #fffaf1;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 24px;
      box-shadow: 0 24px 68px rgba(38,55,44,.22);
    }

    .final-cta h2 {
      margin: 0;
      font-size: clamp(26px, 4vw, 38px);
      line-height: 1.2;
      font-weight: 850;
    }

    .final-cta p {
      margin: 12px 0 0;
      color: rgba(255,250,241,.76);
    }

    .final-cta .btn-soft {
      background: #fffaf1;
      color: var(--color-leaf-dark);
      border-color: rgba(255,255,255,.3);
    }

    .site-footer {
      margin-top: 40px;
      padding: 58px 0 30px;
      background: #203529;
      color: rgba(255,250,241,.82);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.35fr .8fr .8fr;
      gap: 44px;
      align-items: start;
    }

    .footer-brand {
      color: #fffaf1;
      margin-bottom: 16px;
    }

    .footer-text {
      max-width: 520px;
      margin: 0;
      color: rgba(255,250,241,.68);
      font-size: 15px;
    }

    .footer-title {
      margin: 0 0 14px;
      color: #fffaf1;
      font-size: 16px;
      font-weight: 820;
    }

    .footer-links {
      display: grid;
      gap: 9px;
    }

    .footer-links a {
      color: rgba(255,250,241,.68);
      font-size: 14px;
    }

    .footer-links a:hover {
      color: #ffe3a4;
      transform: translateX(2px);
    }

    .copyright {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      margin-top: 42px;
      padding-top: 22px;
      border-top: 1px solid rgba(255,250,241,.14);
      color: rgba(255,250,241,.56);
      font-size: 13px;
    }

    @media (max-width: 1100px) {
      .top-nav {
        grid-template-columns: 1fr auto;
      }

      .search-box {
        grid-column: 1 / -1;
        order: 3;
      }

      .category-bento {
        grid-template-columns: 1fr;
      }

      .hero-main-card {
        grid-row: auto;
        min-height: 420px;
      }

      .content-layout {
        grid-template-columns: 1fr;
      }

      .aside-stack {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .countdown-card {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 768px) {
      .site-container {
        width: min(100% - 28px, var(--container));
      }

      .section {
        padding: 58px 0;
      }

      .top-nav {
        min-height: auto;
        padding: 18px 0 14px;
        grid-template-columns: 1fr;
        gap: 14px;
      }

      .brand-text {
        max-width: calc(100vw - 92px);
      }

      .top-nav .btn-brand {
        width: 100%;
      }

      .hero-category {
        padding-top: 34px;
      }

      .hero-main-card {
        min-height: auto;
        padding: 26px;
      }

      .hero-main-card::after {
        display: none;
      }

      .hero-actions {
        flex-direction: column;
      }

      .hero-actions .btn-brand,
      .hero-actions .btn-soft,
      .cta-strip .btn-soft {
        width: 100%;
      }

      .cta-strip {
        flex-direction: column;
        align-items: stretch;
      }

      .stream-item {
        grid-template-columns: 1fr;
        gap: 14px;
      }

      .stream-action {
        justify-content: stretch;
      }

      .stream-action .btn-line {
        width: 100%;
      }

      .entry-grid {
        grid-template-columns: 1fr;
      }

      .aside-stack {
        grid-template-columns: 1fr;
      }

      .countdown-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .subscribe-box {
        padding: 24px;
      }

      .final-cta {
        grid-template-columns: 1fr;
        padding: 30px;
      }

      .final-cta .btn-soft {
        width: 100%;
      }

      .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
      }

      .copyright {
        flex-direction: column;
      }
    }

    @media (max-width: 420px) {
      .logo-mark {
        width: 34px;
        height: 34px;
      }

      .hero-title {
        font-size: 31px;
      }

      .mini-card, .entry-card, .aside-card, .stream-item {
        padding: 20px;
      }

      .filter-panel {
        padding: 16px;
      }

      .accordion-button {
        padding: 18px;
      }

      .accordion-body {
        padding: 0 18px 20px 34px;
      }
    }