/* roulang page: index */
:root{
      --bg: #f6efe8;
      --bg-soft: #fbf6f1;
      --surface: #ffffff;
      --surface-2: #f7eee7;
      --surface-3: #efe2db;
      --ink: #241316;
      --muted: #6d5458;
      --weak: #8c7478;
      --brand: #6a1f2b;
      --brand-2: #8d3a42;
      --brand-3: #b87757;
      --line: rgba(89, 37, 46, .12);
      --line-strong: rgba(89, 37, 46, .18);
      --shadow: 0 18px 45px rgba(43, 18, 23, .08);
      --shadow-strong: 0 24px 58px rgba(43, 18, 23, .14);
      --radius: 18px;
      --radius-lg: 24px;
      --radius-xl: 30px;
      --container: 1160px;
      --header-h: 74px;
      --ease: cubic-bezier(.2,.8,.2,1);
    }
    *, *::before, *::after{ box-sizing: border-box; }
    html{ scroll-behavior: smooth; }
    body{
      margin: 0;
      font-family: "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
      color: var(--ink);
      background:
        radial-gradient(1200px 700px at 10% -10%, rgba(140, 61, 71, .12), transparent 55%),
        radial-gradient(1000px 620px at 100% 0%, rgba(184, 119, 87, .10), transparent 50%),
        linear-gradient(180deg, #f6efe8 0%, #fbf7f3 40%, #f7f0ea 100%);
      line-height: 1.75;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    img{
      display: block;
      max-width: 100%;
      height: auto;
    }
    a{
      color: inherit;
      text-decoration: none;
      transition: color .18s var(--ease), opacity .18s var(--ease), transform .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
    }
    button, input, textarea, select{
      font: inherit;
    }
    button{
      cursor: pointer;
    }
    ::selection{
      background: rgba(106, 31, 43, .18);
      color: var(--ink);
    }
    .container{
      width: min(var(--container), calc(100% - 32px));
      margin: 0 auto;
    }
    .sr-only{
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0,0,0,0);
      white-space: nowrap;
      border: 0;
    }
    .site-header{
      position: sticky;
      top: 0;
      z-index: 60;
      background: rgba(251, 247, 243, .90);
      border-bottom: 1px solid rgba(89, 37, 46, .10);
      backdrop-filter: blur(10px);
    }
    .header-inner{
      min-height: var(--header-h);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 12px 0;
    }
    .brand{
      display: inline-flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }
    .brand-mark{
      width: 42px;
      height: 42px;
      border-radius: 14px;
      background:
        linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,.02)),
        linear-gradient(145deg, var(--brand), #3f0f16);
      color: #fff;
      display: grid;
      place-items: center;
      font-weight: 800;
      letter-spacing: .06em;
      box-shadow: var(--shadow);
      flex: 0 0 auto;
    }
    .brand-text{
      display: flex;
      flex-direction: column;
      min-width: 0;
      line-height: 1.15;
    }
    .brand-text strong{
      font-size: 1rem;
      color: var(--ink);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 64vw;
    }
    .brand-text small{
      margin-top: 4px;
      font-size: .82rem;
      color: var(--muted);
    }
    .site-nav{
      display: inline-flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .nav-link{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 0 16px;
      border-radius: 999px;
      border: 1px solid transparent;
      color: var(--muted);
      background: transparent;
      font-weight: 600;
      letter-spacing: .01em;
    }
    .nav-link:hover{
      color: var(--brand);
      background: rgba(106, 31, 43, .06);
      border-color: rgba(106, 31, 43, .10);
    }
    .nav-link.active{
      color: #fff;
      background: linear-gradient(135deg, var(--brand), #853440);
      box-shadow: 0 10px 20px rgba(106, 31, 43, .18);
    }
    .nav-link:focus-visible,
    .btn:focus-visible,
    .card-link:focus-visible,
    summary:focus-visible,
    input:focus-visible{
      outline: 3px solid rgba(184, 119, 87, .34);
      outline-offset: 3px;
    }
    .page-main{
      display: block;
    }
    .hero{
      position: relative;
      overflow: hidden;
      color: #fff;
      background:
        linear-gradient(135deg, rgba(33, 10, 15, .92), rgba(74, 19, 26, .86)),
        url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
    }
    .hero::before{
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(900px 420px at 15% 20%, rgba(255, 197, 159, .12), transparent 50%),
        linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.22));
      pointer-events: none;
    }
    .hero .container{
      position: relative;
      z-index: 1;
      padding: 42px 0 34px;
    }
    .hero-grid{
      display: grid;
      grid-template-columns: 1.08fr .92fr;
      gap: 28px;
      align-items: center;
      min-height: calc(100vh - 110px);
      min-height: clamp(560px, 72vh, 760px);
    }
    .hero-copy{
      padding: 14px 0;
    }
    .eyebrow{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      border-radius: 999px;
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.16);
      color: rgba(255,255,255,.92);
      font-size: .92rem;
      letter-spacing: .02em;
      margin-bottom: 18px;
    }
    .eyebrow::before{
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: #e7a67a;
      box-shadow: 0 0 0 6px rgba(231, 166, 122, .14);
    }
    h1{
      margin: 0;
      font-size: clamp(2.2rem, 4.6vw, 4.5rem);
      line-height: 1.06;
      letter-spacing: -.04em;
    }
    .hero-subtitle{
      margin: 18px 0 0;
      max-width: 42rem;
      font-size: clamp(1rem, 1.34vw, 1.14rem);
      color: rgba(255,255,255,.84);
    }
    .hero-actions{
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 28px;
    }
    .btn{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 48px;
      padding: 0 18px;
      border-radius: 14px;
      border: 1px solid transparent;
      font-weight: 700;
      white-space: nowrap;
      user-select: none;
    }
    .btn-primary{
      color: #fff;
      background: linear-gradient(135deg, #b25c5f, var(--brand));
      box-shadow: 0 18px 28px rgba(106, 31, 43, .24);
    }
    .btn-primary:hover{
      transform: translateY(-1px);
      box-shadow: 0 22px 30px rgba(106, 31, 43, .30);
    }
    .btn-secondary{
      color: #fff;
      border-color: rgba(255,255,255,.22);
      background: rgba(255,255,255,.08);
    }
    .btn-secondary:hover{
      background: rgba(255,255,255,.14);
      border-color: rgba(255,255,255,.34);
      transform: translateY(-1px);
    }
    .btn-light{
      color: var(--brand);
      border-color: rgba(106, 31, 43, .16);
      background: rgba(255,255,255,.86);
    }
    .btn-light:hover{
      background: #fff;
      transform: translateY(-1px);
      box-shadow: var(--shadow);
    }
    .hero-micro{
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 26px;
    }
    .micro-chip{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      border-radius: 999px;
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.12);
      color: rgba(255,255,255,.88);
      font-size: .92rem;
      backdrop-filter: blur(6px);
    }
    .hero-visual{
      display: grid;
      grid-template-columns: 1.15fr .72fr;
      gap: 14px;
      align-items: stretch;
    }
    .visual-main,
    .visual-mini{
      position: relative;
      overflow: hidden;
      border-radius: var(--radius-xl);
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: 0 30px 70px rgba(13, 5, 7, .34);
      background: rgba(255,255,255,.06);
    }
    .visual-main{
      min-height: 560px;
    }
    .visual-main img,
    .visual-mini img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .visual-main::after,
    .visual-mini::after{
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.36));
      pointer-events: none;
    }
    .visual-caption{
      position: absolute;
      left: 18px;
      right: 18px;
      bottom: 18px;
      z-index: 1;
      padding: 14px 16px;
      border-radius: 18px;
      background: rgba(23, 7, 10, .62);
      border: 1px solid rgba(255,255,255,.12);
      color: rgba(255,255,255,.94);
      backdrop-filter: blur(8px);
      box-shadow: 0 18px 30px rgba(0,0,0,.16);
    }
    .visual-caption strong{
      display: block;
      font-size: 1rem;
      margin-bottom: 4px;
    }
    .visual-caption span{
      font-size: .93rem;
      color: rgba(255,255,255,.78);
    }
    .visual-stack{
      display: grid;
      gap: 14px;
    }
    .visual-mini{
      min-height: calc(50% - 7px);
    }
    .section{
      padding: 72px 0;
    }
    .section-tight{
      padding: 42px 0 72px;
    }
    .section-lift{
      margin-top: -24px;
      position: relative;
      z-index: 2;
    }
    .section.alt{
      background:
        linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.78)),
        linear-gradient(180deg, #fcf8f4 0%, #f8f1ea 100%);
      border-top: 1px solid rgba(89, 37, 46, .06);
      border-bottom: 1px solid rgba(89, 37, 46, .06);
    }
    .section-head{
      display: flex;
      flex-wrap: wrap;
      align-items: end;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 24px;
    }
    .section-title{
      margin: 0;
      font-size: clamp(1.55rem, 2vw, 2.2rem);
      line-height: 1.15;
      letter-spacing: -.02em;
      color: var(--ink);
    }
    .section-title small{
      display: block;
      margin-bottom: 10px;
      font-size: .82rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--brand-2);
    }
    .section-lead{
      margin: 0;
      max-width: 52rem;
      color: var(--muted);
      font-size: 1.02rem;
    }
    .status-grid{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }
    .status-card{
      padding: 18px 18px 16px;
      border-radius: var(--radius);
      background: rgba(255,255,255,.86);
      border: 1px solid rgba(89, 37, 46, .10);
      box-shadow: var(--shadow);
      transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
    }
    .status-card:hover{
      transform: translateY(-2px);
      box-shadow: var(--shadow-strong);
      border-color: rgba(106, 31, 43, .18);
    }
    .status-label{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
      padding: 7px 12px;
      border-radius: 999px;
      background: rgba(106, 31, 43, .08);
      color: var(--brand);
      font-weight: 700;
      font-size: .84rem;
    }
    .status-card p{
      margin: 0;
      color: var(--muted);
    }
    .featured-grid{
      display: grid;
      grid-template-columns: 1.12fr .88fr;
      gap: 20px;
      align-items: start;
    }
    .feature-card,
    .news-card,
    .point-card,
    .cta-panel,
    .faq-item{
      border-radius: var(--radius-lg);
      border: 1px solid rgba(89, 37, 46, .10);
      background: rgba(255,255,255,.88);
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    .feature-card{
      display: flex;
      flex-direction: column;
      min-height: 100%;
      transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
    }
    .feature-card:hover,
    .news-card:hover,
    .point-card:hover{
      transform: translateY(-3px);
      box-shadow: var(--shadow-strong);
      border-color: rgba(106, 31, 43, .16);
    }
    .feature-media,
    .news-media{
      position: relative;
      overflow: hidden;
      background: #eee;
    }
    .feature-media{
      aspect-ratio: 16/10;
    }
    .feature-media img,
    .news-media img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: scale(1.001);
      transition: transform .5s var(--ease);
    }
    .feature-card:hover .feature-media img,
    .news-card:hover .news-media img{
      transform: scale(1.04);
    }
    .card-overlay{
      position: absolute;
      left: 16px;
      top: 16px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      z-index: 1;
    }
    .tag,
    .badge{
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 30px;
      padding: 0 11px;
      border-radius: 999px;
      font-size: .82rem;
      font-weight: 700;
      letter-spacing: .01em;
    }
    .tag{
      background: rgba(255,255,255,.90);
      color: var(--brand);
      border: 1px solid rgba(255,255,255,.34);
      box-shadow: 0 8px 16px rgba(0,0,0,.08);
    }
    .badge{
      background: rgba(106, 31, 43, .08);
      color: var(--brand);
      border: 1px solid rgba(106, 31, 43, .10);
    }
    .feature-body,
    .news-body,
    .point-body,
    .faq-body,
    .cta-body{
      padding: 18px;
    }
    .feature-title,
    .news-title,
    .point-title{
      margin: 0 0 10px;
      line-height: 1.28;
      letter-spacing: -.02em;
      color: var(--ink);
    }
    .feature-title{
      font-size: 1.3rem;
    }
    .news-title{
      font-size: 1.08rem;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .point-title{
      font-size: 1.05rem;
    }
    .feature-summary,
    .news-summary,
    .point-summary{
      margin: 0;
      color: var(--muted);
    }
    .feature-summary{
      font-size: .98rem;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .news-summary{
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      font-size: .95rem;
    }
    .meta-row{
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 14px;
      color: var(--weak);
      font-size: .86rem;
    }
    .meta-chip{
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 10px;
      border-radius: 999px;
      background: var(--surface-2);
      border: 1px solid rgba(89, 37, 46, .08);
      color: var(--muted);
    }
    .card-footer{
      margin-top: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .card-link{
      color: var(--brand);
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .card-link:hover{
      color: var(--brand-2);
      transform: translateX(2px);
    }
    .aside-stack{
      display: grid;
      gap: 20px;
    }
    .feature-side{
      display: grid;
      gap: 20px;
    }
    .feature-side .feature-card .feature-media{
      aspect-ratio: 16/9;
    }
    .news-grid{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
    }
    .news-card{
      display: flex;
      flex-direction: column;
      transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
    }
    .news-media{
      aspect-ratio: 16/10;
    }
    .news-body{
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    .news-card .card-footer{
      margin-top: auto;
    }
    .empty-state{
      padding: 26px 18px;
      border-radius: var(--radius);
      border: 1px dashed rgba(106, 31, 43, .22);
      background: rgba(255,255,255,.68);
      color: var(--muted);
      text-align: center;
      font-weight: 600;
    }
    .points-grid{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }
    .point-card{
      transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
    }
    .point-icon{
      width: 48px;
      height: 48px;
      border-radius: 16px;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, rgba(106, 31, 43, .12), rgba(184, 119, 87, .12));
      color: var(--brand);
      font-size: 1.16rem;
      font-weight: 800;
      margin-bottom: 14px;
      border: 1px solid rgba(106, 31, 43, .08);
    }
    .point-summary{
      font-size: .96rem;
    }
    .faq-list{
      display: grid;
      gap: 14px;
    }
    .faq-item{
      background: rgba(255,255,255,.90);
    }
    .faq-item summary{
      list-style: none;
      padding: 18px 18px;
      cursor: pointer;
      font-weight: 700;
      color: var(--ink);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }
    .faq-item summary::-webkit-details-marker{
      display: none;
    }
    .faq-item summary::after{
      content: "＋";
      flex: 0 0 auto;
      width: 28px;
      height: 28px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      background: rgba(106, 31, 43, .08);
      color: var(--brand);
      transition: transform .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease);
    }
    .faq-item[open] summary::after{
      content: "－";
      background: rgba(106, 31, 43, .12);
    }
    .faq-body{
      padding-top: 0;
      color: var(--muted);
      border-top: 1px solid rgba(89, 37, 46, .08);
    }
    .faq-body p{
      margin: 0;
    }
    .cta-panel{
      position: relative;
      overflow: hidden;
      color: #fff;
      background:
        linear-gradient(135deg, rgba(36, 15, 18, .88), rgba(106, 31, 43, .76)),
        url('/assets/images/backpic/back-3.jpg') center/cover no-repeat;
    }
    .cta-panel::before{
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(700px 360px at 90% 20%, rgba(255, 199, 164, .14), transparent 50%);
      pointer-events: none;
    }
    .cta-grid{
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr .9fr;
      gap: 18px;
      align-items: center;
      padding: 24px;
    }
    .cta-title{
      margin: 0;
      font-size: clamp(1.5rem, 2.2vw, 2.3rem);
      line-height: 1.14;
    }
    .cta-text{
      margin: 12px 0 0;
      max-width: 42rem;
      color: rgba(255,255,255,.84);
    }
    .cta-actions{
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 20px;
    }
    .quick-form{
      display: grid;
      gap: 12px;
      padding: 18px;
      border-radius: 22px;
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.14);
      backdrop-filter: blur(8px);
    }
    .quick-form label{
      font-size: .9rem;
      color: rgba(255,255,255,.84);
      font-weight: 700;
    }
    .search-row{
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
    }
    .quick-form input{
      width: 100%;
      min-height: 48px;
      padding: 0 14px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.22);
      background: rgba(255,255,255,.94);
      color: var(--ink);
    }
    .quick-form input::placeholder{
      color: #8b7477;
    }
    .form-note{
      margin: 0;
      font-size: .88rem;
      color: rgba(255,255,255,.72);
    }
    .site-footer{
      padding: 34px 0 42px;
      background: #201013;
      color: rgba(255,255,255,.84);
      border-top: 1px solid rgba(255,255,255,.08);
    }
    .footer-grid{
      display: grid;
      grid-template-columns: 1.15fr .85fr .8fr;
      gap: 20px;
      align-items: start;
    }
    .footer-brand{
      display: inline-flex;
      align-items: center;
      gap: 12px;
      color: #fff;
      margin-bottom: 14px;
    }
    .footer-brand .brand-mark{
      box-shadow: none;
    }
    .footer-title{
      margin: 0 0 12px;
      color: #fff;
      font-size: 1rem;
    }
    .footer-list{
      display: grid;
      gap: 10px;
    }
    .footer-list a{
      color: rgba(255,255,255,.76);
    }
    .footer-list a:hover{
      color: #fff;
    }
    .footer-note{
      margin: 0;
      color: rgba(255,255,255,.68);
      font-size: .92rem;
    }
    .footer-bottom{
      margin-top: 22px;
      padding-top: 18px;
      border-top: 1px solid rgba(255,255,255,.10);
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 12px;
      color: rgba(255,255,255,.62);
      font-size: .9rem;
    }
    .footer-bottom a{
      color: rgba(255,255,255,.74);
    }
    .footer-bottom a:hover{
      color: #fff;
    }
    .section-anchor{
      scroll-margin-top: 92px;
    }
    @media (max-width: 1080px){
      .hero-grid{
        grid-template-columns: 1fr;
        min-height: auto;
        gap: 22px;
      }
      .hero-visual{
        grid-template-columns: 1fr 1fr;
      }
      .visual-main{
        min-height: 460px;
      }
      .featured-grid,
      .cta-grid,
      .footer-grid{
        grid-template-columns: 1fr;
      }
      .news-grid,
      .points-grid,
      .status-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    @media (max-width: 768px){
      :root{
        --header-h: auto;
      }
      .header-inner{
        flex-direction: column;
        align-items: flex-start;
      }
      .site-nav{
        width: 100%;
        justify-content: flex-start;
      }
      .nav-link{
        min-height: 40px;
        padding: 0 14px;
      }
      .hero .container{
        padding-top: 24px;
      }
      .hero-grid{
        gap: 18px;
      }
      .hero-visual{
        grid-template-columns: 1fr;
      }
      .visual-main{
        min-height: 360px;
      }
      .visual-stack{
        grid-template-columns: 1fr 1fr;
      }
      .news-grid,
      .points-grid,
      .status-grid{
        grid-template-columns: 1fr;
      }
      .search-row{
        grid-template-columns: 1fr;
      }
      .btn{
        width: 100%;
      }
      .hero-actions,
      .cta-actions{
        display: grid;
      }
      .section{
        padding: 56px 0;
      }
      .section-tight{
        padding: 34px 0 56px;
      }
      .section-head{
        align-items: flex-start;
      }
    }
    @media (max-width: 520px){
      .container{
        width: min(var(--container), calc(100% - 22px));
      }
      .brand-text strong{
        max-width: 72vw;
        font-size: .96rem;
      }
      .brand-mark{
        width: 38px;
        height: 38px;
        border-radius: 13px;
      }
      .eyebrow{
        font-size: .86rem;
        padding: 7px 11px;
      }
      h1{
        font-size: clamp(2rem, 11vw, 2.8rem);
      }
      .hero-subtitle{
        font-size: .98rem;
      }
      .hero-micro{
        gap: 8px;
      }
      .micro-chip{
        width: 100%;
        justify-content: center;
      }
      .visual-main{
        min-height: 300px;
      }
      .visual-stack{
        grid-template-columns: 1fr;
      }
      .feature-body,
      .news-body,
      .point-body,
      .faq-body,
      .cta-body{
        padding: 16px;
      }
      .section-title{
        font-size: 1.42rem;
      }
      .cta-grid{
        padding: 18px;
      }
      .quick-form{
        padding: 14px;
      }
      .footer-bottom{
        flex-direction: column;
      }
    }

/* roulang page: article */
:root{
      --bg: #f6efe8;
      --bg-soft: #fbf6f1;
      --surface: #ffffff;
      --surface-2: #f7eee7;
      --surface-3: #efe2db;
      --ink: #241316;
      --muted: #6d5458;
      --weak: #8c7478;
      --brand: #6a1f2b;
      --brand-2: #8d3a42;
      --brand-3: #b87757;
      --line: rgba(89, 37, 46, .12);
      --line-strong: rgba(89, 37, 46, .18);
      --shadow: 0 18px 45px rgba(43, 18, 23, .08);
      --shadow-strong: 0 24px 58px rgba(43, 18, 23, .14);
      --radius: 18px;
      --radius-lg: 24px;
      --radius-xl: 30px;
      --container: 1160px;
      --header-h: 74px;
      --ease: cubic-bezier(.2,.8,.2,1);
    }
    *{ box-sizing: border-box; }
    html{ scroll-behavior: smooth; }
    body{
      margin: 0;
      font-family: "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
      color: var(--ink);
      background:
        radial-gradient(1200px 700px at 10% -10%, rgba(140, 61, 71, .12), transparent 55%),
        radial-gradient(1000px 620px at 100% 0%, rgba(184, 119, 87, .10), transparent 50%),
        linear-gradient(180deg, #f6efe8 0%, #fbf7f3 40%, #f7f0ea 100%);
      line-height: 1.75;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    img{
      display: block;
      max-width: 100%;
      height: auto;
    }
    a{
      color: inherit;
      text-decoration: none;
      transition: color .18s var(--ease), opacity .18s var(--ease), transform .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
    }
    a:hover{ text-decoration: none; }
    button, input, textarea, select{
      font: inherit;
    }
    button{
      cursor: pointer;
    }
    ::selection{
      background: rgba(106, 31, 43, .16);
      color: var(--ink);
    }
    .container{
      width: min(var(--container), calc(100% - 32px));
      margin: 0 auto;
    }
    .site-header{
      position: sticky;
      top: 0;
      z-index: 60;
      background: rgba(251, 247, 243, .90);
      border-bottom: 1px solid rgba(89, 37, 46, .10);
      backdrop-filter: blur(10px);
    }
    .header-inner{
      min-height: var(--header-h);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 12px 0;
    }
    .brand{
      display: inline-flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }
    .brand-mark{
      width: 42px;
      height: 42px;
      border-radius: 14px;
      background:
        linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,.02)),
        linear-gradient(145deg, var(--brand), #3f0f16);
      color: #fff;
      display: grid;
      place-items: center;
      font-weight: 800;
      letter-spacing: .06em;
      box-shadow: var(--shadow);
      flex: 0 0 auto;
    }
    .brand-text{
      display: flex;
      flex-direction: column;
      min-width: 0;
      line-height: 1.15;
    }
    .brand-text strong{
      font-size: 1rem;
      color: var(--ink);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 64vw;
    }
    .brand-text small{
      margin-top: 4px;
      font-size: .82rem;
      color: var(--muted);
    }
    .site-nav{
      display: inline-flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .nav-link{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 0 16px;
      border-radius: 999px;
      border: 1px solid transparent;
      color: var(--muted);
      background: transparent;
      font-weight: 600;
      letter-spacing: .01em;
    }
    .nav-link:hover{
      color: var(--brand);
      background: rgba(106, 31, 43, .06);
      border-color: rgba(106, 31, 43, .10);
    }
    .nav-link.active{
      color: #fff;
      background: linear-gradient(135deg, var(--brand), #853440);
      box-shadow: 0 10px 20px rgba(106, 31, 43, .18);
    }
    .nav-link:active{
      transform: translateY(1px);
    }
    .nav-link:focus-visible,
    .btn:focus-visible,
    .story-card:focus-visible,
    .faq details > summary:focus-visible,
    .footer-list a:focus-visible{
      outline: 3px solid rgba(184, 119, 87, .34);
      outline-offset: 3px;
    }
    .page-main{
      display: block;
    }
    .section-block{
      padding: 72px 0;
    }
    .article-hero{
      position: relative;
      overflow: hidden;
      color: #fff;
      background:
        linear-gradient(135deg, rgba(25, 8, 12, .94), rgba(78, 20, 28, .86)),
        url('/assets/images/backpic/back-1.jpg') center/cover no-repeat;
    }
    .article-hero::before{
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(900px 420px at 15% 20%, rgba(255, 197, 159, .12), transparent 50%),
        linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.22));
      pointer-events: none;
    }
    .article-hero .container{
      position: relative;
      z-index: 1;
      padding: 30px 0 36px;
    }
    .crumbs{
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      font-size: .94rem;
      color: rgba(255,255,255,.76);
      margin-bottom: 18px;
    }
    .crumbs a{
      color: rgba(255,255,255,.88);
    }
    .crumbs a:hover{
      color: #fff;
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    .crumbs .sep{
      opacity: .5;
    }
    .article-hero-grid{
      display: grid;
      grid-template-columns: 1.08fr .92fr;
      gap: 28px;
      align-items: center;
    }
    .eyebrow{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      border-radius: 999px;
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.16);
      color: rgba(255,255,255,.92);
      font-size: .92rem;
      letter-spacing: .02em;
      margin-bottom: 16px;
    }
    .eyebrow::before{
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: #e7a67a;
      box-shadow: 0 0 0 6px rgba(231, 166, 122, .14);
      flex: 0 0 auto;
    }
    .article-title{
      margin: 0;
      font-size: clamp(2rem, 4vw, 3.55rem);
      line-height: 1.08;
      letter-spacing: -.02em;
      max-width: 13em;
    }
    .article-lead{
      margin: 18px 0 0;
      max-width: 44rem;
      font-size: clamp(1rem, 1.34vw, 1.12rem);
      color: rgba(255,255,255,.84);
    }
    .article-meta-strip{
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 22px;
    }
    .meta-pill{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 38px;
      padding: 0 14px;
      border-radius: 999px;
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.14);
      color: rgba(255,255,255,.92);
      backdrop-filter: blur(8px);
      font-size: .93rem;
      white-space: nowrap;
    }
    .meta-pill .dot{
      width: 8px;
      height: 8px;
      border-radius: 99px;
      background: #e7a67a;
      box-shadow: 0 0 0 5px rgba(231, 166, 122, .15);
      flex: 0 0 auto;
    }
    .hero-actions{
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 28px;
    }
    .btn{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 48px;
      padding: 0 18px;
      border-radius: 14px;
      border: 1px solid transparent;
      font-weight: 700;
      white-space: nowrap;
      user-select: none;
      transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), opacity .18s var(--ease);
    }
    .btn:hover{
      transform: translateY(-1px);
    }
    .btn:active{
      transform: translateY(0);
    }
    .btn-primary{
      color: #fff;
      background: linear-gradient(135deg, #b25c5f, var(--brand));
      box-shadow: 0 18px 28px rgba(106, 31, 43, .24);
    }
    .btn-primary:hover{
      color: #fff;
      box-shadow: 0 20px 34px rgba(106, 31, 43, .30);
    }
    .btn-secondary{
      color: #fff;
      background: rgba(255,255,255,.08);
      border-color: rgba(255,255,255,.18);
      backdrop-filter: blur(8px);
    }
    .btn-secondary:hover{
      background: rgba(255,255,255,.14);
      color: #fff;
    }
    .btn-outline{
      color: var(--brand);
      background: rgba(255,255,255,.76);
      border-color: rgba(106, 31, 43, .14);
    }
    .btn-outline:hover{
      background: #fff;
      color: var(--brand);
      border-color: rgba(106, 31, 43, .24);
      box-shadow: var(--shadow);
    }
    .article-visual{
      display: flex;
      justify-content: flex-end;
    }
    .visual-frame{
      position: relative;
      width: min(100%, 440px);
      border-radius: 28px;
      overflow: hidden;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: 0 30px 70px rgba(0,0,0,.30);
      transform: translateY(0);
      transition: transform .22s var(--ease), box-shadow .22s var(--ease);
    }
    .visual-frame:hover{
      transform: translateY(-3px);
      box-shadow: 0 34px 80px rgba(0,0,0,.36);
    }
    .visual-frame img{
      width: 100%;
      aspect-ratio: 4 / 5;
      object-fit: cover;
      object-position: center;
    }
    .visual-card{
      position: absolute;
      left: 16px;
      right: 16px;
      bottom: 16px;
      padding: 14px 14px 13px;
      border-radius: 18px;
      background: rgba(22, 9, 12, .58);
      border: 1px solid rgba(255,255,255,.14);
      backdrop-filter: blur(10px);
    }
    .visual-card strong{
      display: block;
      font-size: 1.02rem;
      color: #fff;
      line-height: 1.35;
    }
    .visual-card p{
      margin: 6px 0 0;
      color: rgba(255,255,255,.74);
      font-size: .93rem;
    }
    .chip-row{
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
    }
    .chip{
      display: inline-flex;
      align-items: center;
      min-height: 32px;
      padding: 0 11px;
      border-radius: 999px;
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.14);
      color: rgba(255,255,255,.90);
      font-size: .88rem;
    }
    .article-body-wrap{
      margin-top: -18px;
      padding-bottom: 8px;
    }
    .reading-grid{
      display: grid;
      grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr);
      gap: 22px;
      align-items: start;
    }
    .panel,
    .side-card,
    .related-card,
    .faq details,
    .cta-panel,
    .empty-state{
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
    }
    .panel{
      padding: 28px;
    }
    .panel-head{
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 18px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--line);
    }
    .panel-head h2{
      margin: 0;
      font-size: 1.35rem;
      line-height: 1.2;
    }
    .panel-head p{
      margin: 6px 0 0;
      color: var(--muted);
      font-size: .96rem;
    }
    .panel-meta{
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: flex-end;
    }
    .tag,
    .badge-soft{
      display: inline-flex;
      align-items: center;
      min-height: 32px;
      padding: 0 11px;
      border-radius: 999px;
      font-size: .9rem;
      color: var(--brand);
      background: rgba(106, 31, 43, .06);
      border: 1px solid rgba(106, 31, 43, .10);
      white-space: nowrap;
    }
    .tag.muted{
      color: var(--muted);
      background: rgba(255,255,255,.70);
      border-color: var(--line);
    }
    .article-content{
      font-size: 1.02rem;
      line-height: 1.92;
      color: #302024;
      word-break: break-word;
    }
    .article-content > *:first-child{
      margin-top: 0;
    }
    .article-content > *:last-child{
      margin-bottom: 0;
    }
    .article-content h2,
    .article-content h3,
    .article-content h4{
      margin: 1.6em 0 .7em;
      line-height: 1.28;
      letter-spacing: -.01em;
      color: var(--ink);
    }
    .article-content h2{ font-size: 1.46rem; }
    .article-content h3{ font-size: 1.22rem; }
    .article-content h4{ font-size: 1.08rem; }
    .article-content p{
      margin: 0 0 1rem;
    }
    .article-content a{
      color: var(--brand);
      text-decoration: underline;
      text-underline-offset: 3px;
      text-decoration-color: rgba(106, 31, 43, .28);
    }
    .article-content a:hover{
      color: var(--brand-2);
      text-decoration-color: rgba(106, 31, 43, .52);
    }
    .article-content ul,
    .article-content ol{
      margin: 0 0 1.1rem;
      padding-left: 1.25rem;
    }
    .article-content li + li{
      margin-top: .45rem;
    }
    .article-content blockquote{
      margin: 1.4rem 0;
      padding: 1rem 1.05rem;
      border-radius: 18px;
      background: linear-gradient(180deg, #fbf6f2, #f4ebe5);
      border: 1px solid rgba(106, 31, 43, .10);
      border-left: 4px solid var(--brand);
      color: #4d353a;
    }
    .article-content blockquote p:last-child{
      margin-bottom: 0;
    }
    .article-content figure{
      margin: 1.35rem 0;
    }
    .article-content figure img,
    .article-content img{
      width: 100%;
      border-radius: 18px;
      box-shadow: var(--shadow);
      object-fit: cover;
    }
    .article-content figcaption{
      margin-top: .55rem;
      color: var(--weak);
      font-size: .92rem;
      text-align: center;
    }
    .article-content hr{
      border: 0;
      border-top: 1px solid var(--line);
      margin: 1.8rem 0;
    }
    .article-content code{
      padding: .18rem .38rem;
      border-radius: 8px;
      background: #f4e8e1;
      color: #7c2e37;
      font-size: .92em;
    }
    .article-content pre{
      margin: 1.2rem 0;
      padding: 1rem 1.05rem;
      border-radius: 16px;
      background: #1f1114;
      color: #f5ebe8;
      overflow: auto;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
    }
    .article-content pre code{
      padding: 0;
      background: transparent;
      color: inherit;
    }
    .article-content table{
      width: 100%;
      display: block;
      overflow-x: auto;
      border-collapse: collapse;
      margin: 1.2rem 0;
      border: 1px solid var(--line);
      border-radius: 16px;
    }
    .article-content th,
    .article-content td{
      padding: .82rem .9rem;
      border-bottom: 1px solid var(--line);
      text-align: left;
      vertical-align: top;
      white-space: nowrap;
    }
    .article-content th{
      background: #f6ece6;
      color: var(--ink);
      font-weight: 700;
    }
    .reading-tip{
      margin-top: 20px;
      padding: 16px 18px;
      border-radius: 18px;
      background: linear-gradient(180deg, var(--surface-2), var(--surface-3));
      border: 1px solid rgba(106, 31, 43, .10);
    }
    .reading-tip strong{
      display: block;
      margin-bottom: 6px;
      color: var(--ink);
    }
    .reading-tip p{
      margin: 0;
      color: var(--muted);
    }
    .side-stack{
      display: grid;
      gap: 16px;
    }
    .side-card{
      padding: 18px;
    }
    .side-card .thumb{
      position: relative;
      overflow: hidden;
      border-radius: 18px;
      margin-bottom: 14px;
      background: var(--surface-2);
      border: 1px solid var(--line);
    }
    .side-card .thumb img{
      width: 100%;
      aspect-ratio: 16 / 11;
      object-fit: cover;
      object-position: center;
      transition: transform .22s var(--ease);
    }
    .side-card:hover .thumb img{
      transform: scale(1.02);
    }
    .side-title{
      margin: 0;
      font-size: 1.05rem;
      line-height: 1.35;
    }
    .side-note{
      margin: 8px 0 0;
      color: var(--muted);
      font-size: .96rem;
    }
    .info-list{
      display: grid;
      gap: 10px;
      margin-top: 14px;
    }
    .info-row{
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      padding: 11px 12px;
      border-radius: 14px;
      background: var(--bg-soft);
      border: 1px solid var(--line);
    }
    .info-row span{
      color: var(--muted);
      font-size: .95rem;
      flex: 0 0 auto;
    }
    .info-row strong{
      color: var(--ink);
      text-align: right;
      font-weight: 700;
    }
    .side-links{
      display: grid;
      gap: 10px;
      margin-top: 14px;
    }
    .side-links a{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 14px;
      border-radius: 14px;
      background: linear-gradient(180deg, #fff, #fbf6f1);
      border: 1px solid var(--line);
      color: var(--ink);
      font-weight: 600;
    }
    .side-links a:hover{
      border-color: rgba(106, 31, 43, .22);
      box-shadow: 0 14px 30px rgba(43, 18, 23, .08);
      transform: translateY(-1px);
    }
    .side-links small{
      color: var(--weak);
      font-weight: 500;
    }
    .related-section{
      padding-top: 16px;
    }
    .section-title{
      margin: 0 0 16px;
      font-size: 1.5rem;
      line-height: 1.2;
      letter-spacing: -.01em;
      color: var(--ink);
    }
    .section-desc{
      margin: 6px 0 0;
      color: var(--muted);
      max-width: 70ch;
    }
    .related-grid{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }
    .related-card{
      overflow: hidden;
      display: flex;
      flex-direction: column;
      min-height: 100%;
    }
    .related-card .cover{
      position: relative;
      overflow: hidden;
      background: var(--surface-2);
      border-bottom: 1px solid var(--line);
    }
    .related-card .cover img{
      width: 100%;
      aspect-ratio: 16 / 10;
      object-fit: cover;
      object-position: center;
      transition: transform .22s var(--ease);
    }
    .related-card:hover .cover img{
      transform: scale(1.03);
    }
    .related-card .card-body{
      padding: 16px;
      display: grid;
      gap: 10px;
      flex: 1 1 auto;
    }
    .related-card h3{
      margin: 0;
      font-size: 1.06rem;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .related-card p{
      margin: 0;
      color: var(--muted);
      font-size: .96rem;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .card-meta{
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      margin-top: auto;
    }
    .card-meta .mini{
      display: inline-flex;
      align-items: center;
      min-height: 30px;
      padding: 0 10px;
      border-radius: 999px;
      background: rgba(106, 31, 43, .06);
      border: 1px solid rgba(106, 31, 43, .10);
      color: var(--brand);
      font-size: .86rem;
    }
    .faq{
      padding-top: 14px;
    }
    .faq-grid{
      display: grid;
      gap: 12px;
      margin-top: 16px;
    }
    .faq details{
      padding: 0;
      overflow: hidden;
    }
    .faq summary{
      list-style: none;
      cursor: pointer;
      padding: 18px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      font-weight: 700;
      color: var(--ink);
    }
    .faq summary::-webkit-details-marker{ display:none; }
    .faq summary::after{
      content: "+";
      width: 28px;
      height: 28px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      background: rgba(106, 31, 43, .07);
      color: var(--brand);
      flex: 0 0 auto;
      transition: transform .2s var(--ease), background-color .2s var(--ease);
    }
    .faq details[open] summary::after{
      content: "−";
      transform: rotate(0deg);
    }
    .faq .answer{
      padding: 0 20px 18px;
      color: var(--muted);
    }
    .cta-panel{
      margin-top: 18px;
      padding: 24px;
      display: grid;
      gap: 12px;
      align-items: center;
    }
    .cta-panel h2{
      margin: 0;
      font-size: 1.34rem;
    }
    .cta-panel p{
      margin: 0;
      color: var(--muted);
    }
    .cta-actions{
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 8px;
    }
    .empty-state{
      margin-top: 10px;
      padding: 42px 24px;
      text-align: center;
      max-width: 760px;
      margin-left: auto;
      margin-right: auto;
    }
    .empty-badge{
      display: inline-flex;
      align-items: center;
      min-height: 36px;
      padding: 0 14px;
      border-radius: 999px;
      background: rgba(106, 31, 43, .08);
      border: 1px solid rgba(106, 31, 43, .12);
      color: var(--brand);
      font-weight: 700;
      margin-bottom: 14px;
    }
    .empty-state h2{
      margin: 0;
      font-size: 1.6rem;
    }
    .empty-state p{
      margin: 12px auto 0;
      color: var(--muted);
      max-width: 42rem;
    }
    .empty-state .hero-actions{
      justify-content: center;
      margin-top: 24px;
    }
    .site-footer{
      margin-top: 72px;
      padding: 42px 0 24px;
      color: rgba(255,255,255,.88);
      background:
        linear-gradient(180deg, rgba(33, 10, 15, .96), rgba(24, 10, 13, .98));
      border-top: 1px solid rgba(255,255,255,.08);
    }
    .footer-grid{
      display: grid;
      grid-template-columns: 1.55fr .75fr 1fr;
      gap: 26px;
      align-items: start;
      padding-bottom: 22px;
    }
    .footer-brand{
      display: inline-flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
      color: #fff;
    }
    .footer-brand .brand-mark{
      box-shadow: none;
    }
    .footer-brand .brand-text strong{
      color: #fff;
    }
    .footer-brand .brand-text small{
      color: rgba(255,255,255,.68);
    }
    .footer-title{
      margin: 0 0 12px;
      font-size: 1rem;
      color: #fff;
    }
    .footer-list{
      display: grid;
      gap: 10px;
    }
    .footer-list a{
      color: rgba(255,255,255,.80);
    }
    .footer-list a:hover{
      color: #fff;
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    .footer-note{
      margin: 0;
      color: rgba(255,255,255,.70);
      max-width: 36rem;
    }
    .footer-bottom{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding-top: 18px;
      border-top: 1px solid rgba(255,255,255,.10);
      color: rgba(255,255,255,.62);
      font-size: .93rem;
    }
    .footer-bottom a{
      color: rgba(255,255,255,.86);
    }
    .footer-bottom a:hover{
      color: #fff;
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    @media (max-width: 1024px){
      .article-hero-grid,
      .reading-grid,
      .footer-grid{
        grid-template-columns: 1fr;
      }
      .article-visual{
        justify-content: flex-start;
      }
      .visual-frame{
        width: min(100%, 520px);
      }
      .related-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    @media (max-width: 768px){
      :root{
        --header-h: auto;
      }
      .container{
        width: min(var(--container), calc(100% - 22px));
      }
      .header-inner{
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 14px 0;
      }
      .site-nav{
        width: 100%;
        justify-content: flex-start;
      }
      .article-hero .container{
        padding: 24px 0 28px;
      }
      .article-title{
        max-width: none;
        font-size: clamp(1.8rem, 8vw, 2.6rem);
      }
      .panel{
        padding: 20px;
      }
      .related-grid{
        grid-template-columns: 1fr;
      }
      .cta-actions,
      .hero-actions{
        width: 100%;
      }
      .btn{
        flex: 1 1 160px;
      }
      .footer-bottom{
        flex-direction: column;
        align-items: flex-start;
      }
    }
    @media (max-width: 520px){
      .brand-text strong{
        max-width: 70vw;
      }
      .article-hero .container{
        padding-bottom: 22px;
      }
      .article-meta-strip,
      .chip-row{
        gap: 8px;
      }
      .meta-pill,
      .tag,
      .badge-soft,
      .chip{
        min-height: 30px;
        padding: 0 10px;
        font-size: .84rem;
      }
      .faq summary{
        padding: 16px;
      }
      .faq .answer{
        padding: 0 16px 16px;
      }
      .empty-state{
        padding: 34px 18px;
      }
      .btn{
        min-height: 46px;
        padding: 0 16px;
      }
      .site-footer{
        margin-top: 60px;
      }
    }

/* roulang: framework shim */
/* 覆盖 Bootstrap 等对 a/btn 的全局默认，避免导航出现下划线/蓝链 */
.site-header a,.site-header a:hover,.navbar a,.navbar a:hover,.nav-links a,.nav-links a:hover,header nav a,header nav a:hover{text-decoration:none}
.site-header .btn,.navbar .btn,.nav-cta{text-decoration:none}