/* ──────────────────────────────────────────────────────────────
   三亚市游艇进出口贸易协会 · 中文官网  样式表
   设计方向 D「渐变」· 2026-11
   品牌色取自 VI：深 #0C2828 / 中 #2A7371 / 亮 #19A69A / 渐变 #6EBD8C→#0096A2
   注意：#19A69A 对白底对比度仅 3.16，只用于深底文字、装饰与按钮底色；
        白底上的正文链接一律用 #2A7371（5.54）或更深。
   ────────────────────────────────────────────────────────────── */
@font-face{font-family:"Source Serif 4";
 src:url(/static/fonts/source-serif-4-latin.woff2) format("woff2");
 font-weight:200 900;font-display:swap;
 unicode-range:U+0000-00FF,U+2000-206F,U+2190-21FF,U+2200-22FF}

:root{
 --deep:#0C2828; --mid:#2A7371; --bright:#19A69A; --g1:#6EBD8C; --g2:#0096A2;
 --ink:#13302E; --body:#3F5251; --muted:#6F8482; --line:#DCE7E5;
 --tint:#F2F8F7; --tint2:#EDF6F2; --paper:#fff;
 --grad:linear-gradient(135deg,#6EBD8C 0%,#19A69A 46%,#0096A2 100%);
 --r:18px; --rl:26px;
 --sans:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,-apple-system,sans-serif;
 --serif:"Source Serif 4",Georgia,serif;
 --shadow:0 10px 30px rgba(12,40,40,.08);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--body);font-family:var(--sans);
 font-size:16.5px;line-height:1.8;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--mid);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{color:var(--ink);line-height:1.3;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(28px,4vw,46px);margin:0 0 18px}
h2{font-size:clamp(21px,2.5vw,27px);margin:2.2em 0 .7em}
h3{font-size:18.5px;margin:1.8em 0 .5em}
p{margin:0 0 1.1em}
small{font-size:13px;color:var(--muted);line-height:1.6}
strong{color:var(--ink)}
.wrap{max-width:1160px;margin:0 auto;padding:0 32px}
.skip{position:absolute;left:-9999px;top:0;background:var(--deep);color:#fff;
 padding:12px 20px;border-radius:0 0 12px 0;z-index:99}
.skip:focus{left:0}
a:focus-visible,button:focus-visible{outline:3px solid var(--bright);outline-offset:3px;border-radius:4px}

/* ── 渐变头部：导航 + 预览条 + 标题区，同一块 ───────────────── */
.head{position:relative;background:var(--grad);color:#fff;overflow:hidden;
 border-radius:0 0 var(--rl) var(--rl)}
.head::after{content:"";position:absolute;inset:0;pointer-events:none;background:
 radial-gradient(circle at 88% 4%, rgba(255,255,255,.15) 0 29%, transparent 29.4%),
 radial-gradient(circle at 72% 118%, rgba(12,40,40,.10) 0 25%, transparent 25.4%)}
.head>*{position:relative;z-index:2}

.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;
 padding:18px 0}
.brand{display:flex;align-items:center;gap:12px;color:#fff}
.brand:hover{text-decoration:none}
.brand__mark{width:auto;height:40px}
.brand__text{font-size:15px;font-weight:700;line-height:1.25;letter-spacing:.01em}
.brand-sub{display:block;font-size:8.5px;font-weight:600;letter-spacing:.08em;
 color:rgba(255,255,255,.72);margin-top:4px;font-family:var(--serif)}
.sitenav ul{display:flex;gap:24px;list-style:none;margin:0;padding:0}
.sitenav a{color:rgba(255,255,255,.9);font-size:13.5px;white-space:nowrap;padding:4px 0}
.sitenav a:hover{color:#fff;text-decoration:none}
.sitenav a[aria-current=page]{color:#fff;font-weight:700;box-shadow:inset 0 -2px rgba(255,255,255,.9)}
.navtoggle{display:none;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.4);
 border-radius:10px;width:42px;height:38px;cursor:pointer;padding:9px 10px}
.navtoggle span{display:block;height:2px;background:#fff;border-radius:2px}
.navtoggle span+span{margin-top:5px}
.preview-note{text-align:center;font-size:12px;padding:7px;color:rgba(255,255,255,.9);
 border-top:1px solid rgba(255,255,255,.22);border-bottom:1px solid rgba(255,255,255,.22)}
.hero{padding:54px 0 62px}
.hero__kicker{font-size:11.5px;letter-spacing:.2em;font-weight:700;margin:0 0 18px;
 color:rgba(255,255,255,.82);text-transform:uppercase}
.hero h1{color:#fff;max-width:17em}
.hero__lede{font-size:17px;color:rgba(255,255,255,.94);max-width:40em;margin:0;line-height:1.8}
.home .hero{padding:62px 0 96px}

/* ── 首页数字卡：压在渐变块下沿 ─────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
 margin:-56px 0 0;position:relative;z-index:5}
.stats div{background:#fff;border-radius:var(--r);padding:22px 22px 20px;box-shadow:var(--shadow)}
.stats b{display:block;font-family:var(--serif);font-size:40px;line-height:1;font-weight:600;
 background:linear-gradient(135deg,var(--bright),var(--g2));-webkit-background-clip:text;
 background-clip:text;-webkit-text-fill-color:transparent;color:var(--mid)}
.stats span{display:block;font-size:13.5px;color:var(--body);margin-top:8px}

/* ── 正文容器 ─────────────────────────────────────────────── */
.main{padding:46px 0 72px}
.home .main{padding-top:50px}
.section{margin:0 0 48px}
.section:last-child{margin-bottom:0}
.eyebrow{font-size:11.5px;letter-spacing:.17em;font-weight:700;color:var(--mid);
 text-transform:uppercase;margin:0 0 10px}
.eyebrow+h2{margin-top:.1em}
.intro{font-size:17px;max-width:48em}
.prose{max-width:50em}
.prose h2:first-child,.section h2:first-child{margin-top:0}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1.3em}
.prose li{margin:.45em 0}
.prose li::marker{color:var(--bright)}

/* ── 按钮与链接 ───────────────────────────────────────────── */
.btn{display:inline-block;background:var(--deep);color:#fff;font-weight:700;font-size:14.5px;
 padding:13px 27px;border-radius:999px;line-height:1.4}
.btn:hover{background:#17403E;text-decoration:none;color:#fff}
.head .btn{background:#fff;color:var(--deep)}
.linkish{color:var(--mid);font-weight:700;font-size:14.5px}
.linkish:hover{color:var(--deep)}
.cta-row .linkish{margin-left:18px}

/* ── 卡片 ─────────────────────────────────────────────────── */
.grid{display:grid;gap:22px;margin-top:26px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.pillar{background:var(--tint);border-radius:var(--r);padding:28px 26px}
.pillar:nth-child(even){background:var(--tint2)}
.pillar h3{margin:0 0 9px;font-size:18.5px}
.pillar p{margin:0 0 14px;font-size:14.5px;color:var(--body)}
.pillar .linkish{font-size:14px}

/* ── 图文区 ───────────────────────────────────────────────── */
.feature{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center;
 margin:0 0 48px}
.feature img{width:100%;height:320px;object-fit:cover;border-radius:var(--rl)}
.feature h2{margin-top:0}

/* ── 提示框 ───────────────────────────────────────────────── */
.status-box{background:var(--tint);border-radius:var(--r);padding:22px 24px;margin:0 0 1.6em}
.status-box strong{display:block;margin-bottom:6px;color:var(--ink);font-size:15.5px}
.status-box p{margin:0;font-size:14.5px}

/* ── 表格 ─────────────────────────────────────────────────── */
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);
 margin:0 0 1.8em;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;text-align:left;font-size:14.5px;min-width:520px}
caption{text-align:left;padding:16px 20px 0;font-weight:700;color:var(--ink);font-size:15px}
th,td{padding:14px 20px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--tint);font-size:13px;letter-spacing:.04em;color:var(--ink)}
tbody th{background:#FAFCFB;font-weight:700;color:var(--ink);width:26%}
tr:last-child th,tr:last-child td{border-bottom:0}

/* ── 指南页 ───────────────────────────────────────────────── */
.guide{max-width:52em}
.guide-meta{display:inline-block;font-size:12.5px;color:var(--mid);background:var(--tint);
 border-radius:999px;padding:6px 15px;margin:0 0 1.5em}
.source-ref{display:inline-block;font-family:var(--serif);font-size:11.5px;color:var(--mid);
 background:var(--tint);border-radius:5px;padding:1px 6px;margin:0 2px;vertical-align:.08em;
 text-decoration:none;line-height:1.5}
.source-ref:hover{background:var(--bright);color:#06201F;text-decoration:none}
.source-list{list-style:none;counter-reset:s;padding:0;margin:0}
.source-list li{counter-increment:s;position:relative;padding:18px 0 18px 46px;
 border-bottom:1px solid var(--line)}
.source-list li:last-child{border-bottom:0}
.source-list li::before{content:counter(s);position:absolute;left:0;top:19px;width:30px;
 height:30px;border-radius:9px;background:var(--tint);color:var(--mid);font-family:var(--serif);
 font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center}
.source-list li>a{font-weight:700;color:var(--ink);font-size:15.5px}
.source-list li>a:hover{color:var(--mid)}
.source-list p{margin:4px 0 4px;font-size:14px}
.contact-mail{font-size:clamp(20px,4.5vw,31px);font-weight:700;color:var(--mid);
 overflow-wrap:anywhere}

/* ── 页脚 ─────────────────────────────────────────────────── */
.footer{background:var(--tint);margin-top:60px;padding:46px 0 0}
.footer__inner{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;
 padding-bottom:34px}
.footer__name{font-weight:700;color:var(--ink);margin:0 0 4px;font-size:16px}
.footer__inner p{margin:0 0 4px;font-size:14.5px}
.footer__base{border-top:1px solid var(--line);padding:20px 0 34px;display:flex;
 justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer__base p{margin:0;font-size:12.5px;color:var(--muted)}

/* ── 响应式 ───────────────────────────────────────────────── */
@media(max-width:980px){
 .grid--3{grid-template-columns:repeat(2,1fr)}
 .feature{grid-template-columns:1fr;gap:24px}
 .feature img{height:240px}
 .stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
 body{font-size:16px}
 .wrap{padding:0 20px}
 .navtoggle{display:block}
 .topbar__inner{flex-wrap:wrap;justify-content:flex-start;gap:10px}
 .navtoggle{margin-left:auto}
 .sitenav{display:none;flex:0 0 100%;width:100%;order:3;padding:6px 0 14px}
 .nav-open .sitenav{display:block}
 .sitenav ul{flex-direction:column;gap:0}
 .sitenav li{border-top:1px solid rgba(255,255,255,.22)}
 .sitenav a{display:block;padding:12px 2px;font-size:15px}
 .sitenav a[aria-current=page]{box-shadow:none}
 .brand{min-width:0;flex:0 1 auto;overflow:hidden}
 .brand__text{font-size:13.5px;min-width:0}
 .brand-sub{display:none}
 .navtoggle{flex:0 0 auto}
 .grid--3{grid-template-columns:1fr}
 .stats{grid-template-columns:1fr;margin-top:-40px}
 .home .main{padding-top:38px}
 .hero{padding:40px 0 48px}
 .home .hero{padding:44px 0 80px}
 .footer__inner,.footer__base{flex-direction:column;gap:14px}
}
@media print{.head,.footer,.navtoggle,.preview-note{background:none;color:#000}}