/* Go or No-Go（戶外）：步道口的告示牌、國家公園海報。深林綠、日出橘、米白；粗圓的 Bricolage 標題；等高線底紋。 */
:root{
  --forest:#173a2c;--forest-2:#22513d;--forest-3:#2f6a50;--sun:#ee7a2b;--sun-hi:#ffa25a;
  --paper:#f4efe2;--paper-hi:#fffdf7;--ink:#13261d;--ink-2:#2c3f35;--sub:#55665c;
  --line:rgba(19,38,29,.2);--hair:rgba(19,38,29,.1);
  --zhu:#c2470f;--zhu-lite:#ffa25a;--gold:#8a5a12;--cream:#f4efe2;--ok:#2a7446;
  --icon-cut:var(--forest);
  --topo-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cg fill='none' stroke='%23f4efe2' stroke-opacity='.09' stroke-width='1.4'%3E%3Cpath d='M160 70c48-6 92 22 96 66s-30 86-80 92-104-14-112-60 48-92 96-98z'/%3E%3Cpath d='M162 98c32-4 62 14 64 44s-20 58-54 62-70-10-74-40 32-62 64-66z'/%3E%3Cpath d='M164 124c18-2 34 8 36 24s-12 32-30 34-38-6-40-22 16-34 34-36z'/%3E%3Cpath d='M-20 40c60 10 90-30 150-20s110 10 210-10'/%3E%3Cpath d='M-20 300c70-20 110 10 170 0s120-40 190-20'/%3E%3Cpath d='M-20 270c60-10 80-60 60-110S20 80-20 60'/%3E%3Cpath d='M340 200c-40 20-40 70-10 100'/%3E%3C/g%3E%3C/svg%3E");
  --topo-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cg fill='none' stroke='%23173a2c' stroke-opacity='.07' stroke-width='1.3'%3E%3Cpath d='M160 70c48-6 92 22 96 66s-30 86-80 92-104-14-112-60 48-92 96-98z'/%3E%3Cpath d='M162 98c32-4 62 14 64 44s-20 58-54 62-70-10-74-40 32-62 64-66z'/%3E%3Cpath d='M164 124c18-2 34 8 36 24s-12 32-30 34-38-6-40-22 16-34 34-36z'/%3E%3Cpath d='M-20 40c60 10 90-30 150-20s110 10 210-10'/%3E%3Cpath d='M-20 300c70-20 110 10 170 0s120-40 190-20'/%3E%3Cpath d='M-20 270c60-10 80-60 60-110S20 80-20 60'/%3E%3Cpath d='M340 200c-40 20-40 70-10 100'/%3E%3C/g%3E%3C/svg%3E");
}
body{font-family:"Public Sans",system-ui,sans-serif;font-size:17px;line-height:1.6;color:var(--ink);background:var(--paper) var(--topo-light);background-attachment:scroll}
h1,h2,h3,.brand,.btn,.answer .a,.big,.dz h2,.tile b{font-family:"Bricolage Grotesque","Public Sans",system-ui,sans-serif}
a{color:var(--forest-2);text-decoration-color:var(--sun);text-decoration-thickness:2px;text-underline-offset:3px}
.wrap{max-width:920px}
.note,.sans,.items li .meta,.eg,.sitefoot,.dz-t p,.dz-open,.dz-skip,label,.form label,th,table{font-family:"Public Sans",system-ui,sans-serif}

/* 站頭：整條深林綠，下緣一條日出橘 */
.sitebar{background:var(--forest);box-shadow:0 0 0 100vmax var(--forest);clip-path:inset(0 -100vmax);padding:12px 0;margin:0}
#head{position:relative;margin-bottom:30px}
#head::after{content:"";display:block;height:6px;margin:0 calc(50% - 50vw);background:var(--sun)}
.brand{color:var(--cream);font-size:23px;font-weight:800;letter-spacing:-.01em}
.brand i{font-style:normal;color:var(--sun-hi)}
.brand svg rect{stroke:rgba(244,239,226,.35);stroke-width:1.5}
.sitenav a{color:#c9d6cd;font:600 15px "Public Sans",sans-serif}
.sitenav a:hover,.sitenav a.on{color:#fff;box-shadow:inset 0 -3px 0 var(--sun)}

h1{font-size:clamp(34px,6vw,54px);line-height:1.02;font-weight:800;letter-spacing:-.025em;margin:0 0 10px;color:var(--forest)}
.sub{font-size:18px;color:var(--ink-2);max-width:62ch}
h2{font-size:25px;font-weight:800;letter-spacing:-.015em;margin:38px 0 8px;color:var(--forest)}
h2 .n{color:var(--zhu)}
.kicker{font:700 13px "Public Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--zhu);margin:0 0 8px}

/* 表單與卡片 */
.card{background:var(--paper-hi);border:2px solid var(--forest);border-radius:16px;box-shadow:0 4px 0 var(--forest);padding:18px 20px}
label,.form label{font:700 13px "Public Sans",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.form input,.form select,input,select,textarea{background:#fff;border:2px solid var(--forest);border-radius:10px;color:var(--ink);font:500 17px "Public Sans",sans-serif;min-height:48px}
.form input:focus,.form select:focus,input:focus,select:focus{outline:3px solid var(--sun);outline-offset:1px;border-color:var(--forest);box-shadow:none}
.btn{background:var(--sun);color:var(--ink);border:2px solid var(--forest);border-radius:12px;font-size:18px;font-weight:800;padding:11px 22px;min-height:48px;box-shadow:0 3px 0 var(--forest)}
.btn:hover{background:var(--forest);color:var(--cream)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--forest)}
.btn.ghost{background:#fff;color:var(--forest);border:2px solid var(--forest)}
.btn.ghost:hover{background:var(--forest);color:var(--cream)}
.eg{font-size:14px;color:var(--sub)}
.eg button{color:var(--forest-2);font-weight:700;text-decoration-color:var(--sun);text-decoration-thickness:2px}

/* 答案：深綠告示牌，米白字 */
.answer{background:var(--forest) var(--topo-dark);color:#dfe8e1;border-radius:18px;border:0;box-shadow:0 5px 0 #0e261c;padding:22px 26px 24px}
.answer .q{color:var(--sun-hi);font:700 13px "Public Sans",sans-serif;letter-spacing:.12em;text-transform:uppercase}
.answer .a{color:#fff;font-size:clamp(30px,5.4vw,48px);font-weight:800;letter-spacing:-.02em;line-height:1.05}
.answer .a b{color:#fff}
.answer .why{color:#cfdcd3;font-size:16px}
.answer .why b{color:#fff}
.answer .why a{color:var(--sun-hi)}
.answer .note{color:#b6c7bc}
.answer th,.answer td{color:#dfe8e1;border-bottom-color:rgba(244,239,226,.18)}
.answer.soft{background:var(--paper-hi);color:var(--ink);border:2px solid var(--forest);border-left:12px solid var(--forest-3);box-shadow:0 4px 0 var(--forest)}
.answer.soft .q{color:var(--forest-3)}
.answer.soft .a,.answer.soft .a b{color:var(--forest)}
.answer.soft .why{color:var(--ink-2)}
.answer.soft .why b{color:var(--ink)}
.answer.soft .why a{color:var(--forest-2)}
.answer.soft .note{color:var(--sub)}
.warn{background:#fde9d9;border:2px solid var(--zhu);border-left:10px solid var(--zhu);border-radius:12px;color:#3b1d0c}
.good{background:#e3f0e6;border:2px solid var(--ok);border-left:10px solid var(--ok);border-radius:12px}
.items li{background:var(--paper-hi);border:2px solid var(--hair);border-left:6px solid var(--forest-3);border-radius:12px}
.items li h3{font-size:19px;font-weight:700;color:var(--forest)}
.items li h3 a{color:var(--forest)}
.tag{border-radius:6px;background:rgba(23,58,44,.1);color:var(--forest);font:700 12px "Public Sans",sans-serif;letter-spacing:.03em}
.tag.hot{background:var(--zhu);color:#fff}
.tag.ok{background:rgba(42,116,70,.16);color:var(--ok)}
.big{color:var(--zhu);font-weight:800}
.bars .b{background:var(--hair);border-radius:99px}
.bars .b i{background:var(--forest-3);border-radius:99px}
.bar i{background:var(--forest-3)}
table{font-size:15px}
th{color:var(--sub);font-size:12px;letter-spacing:.08em;text-transform:uppercase;border-bottom:2px solid var(--forest)}
td{border-bottom:1px solid var(--hair)}
tr.hi td{background:rgba(238,122,43,.12)}
.tblwrap{background:var(--paper-hi);border-radius:12px;border:2px solid var(--hair);padding:2px 6px}
.spark{color:var(--zhu)}
.spark path{stroke-width:2.5}
.note{color:var(--sub);font-size:14px}
.sitefoot{color:var(--sub);border-top:2px solid var(--line)}
.sitefoot .gov{color:var(--forest)}

/* ── 首頁 ── */
.home{background:var(--paper) var(--topo-light)}
.in{max-width:1080px;margin:0 auto;padding:0 20px}
.hero{background:var(--forest) var(--topo-dark);color:var(--cream);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;background:var(--sun)}
.hero .sitebar{box-shadow:none;clip-path:none;background:transparent}
.hero #head{margin:0}
.hero #head::after{display:none}
.hero-main{padding:40px 0 64px;max-width:760px}
.hero .kicker{color:var(--sun-hi)}
.hero h1{color:var(--cream);font-size:clamp(44px,8.2vw,92px);line-height:.95;letter-spacing:-.035em;margin:0 0 20px}
.hero h1 em{font-style:normal;color:var(--sun-hi)}
.hero .lede{font-size:19px;color:#cbd9cf;max-width:52ch;margin:0 0 28px}
.zipbar label{display:block;color:var(--cream);margin-bottom:8px}
.zrow{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.zipbar input{width:230px;max-width:100%;font:800 34px "Bricolage Grotesque",sans-serif;letter-spacing:.08em;padding:8px 16px;min-height:66px;border:3px solid var(--sun);border-radius:14px;background:var(--cream);color:var(--forest)}
.zipbar input::placeholder{font-size:24px;letter-spacing:.02em;color:#8d9a91;font-weight:500}
.zhint{font:600 15px "Public Sans",sans-serif;color:#cbd9cf}
.zhint::after{content:" ↓"}
#err{font:700 15px "Public Sans",sans-serif;color:#ffc59c;margin:10px 0 0;min-height:1.3em}
.band{padding:48px 0}
.band.alt{background:var(--paper-hi);border-top:2px solid var(--forest);border-bottom:2px solid var(--forest)}
.sign{font-size:clamp(28px,4vw,40px);margin:0 0 20px}
.band .k{font-size:17px;color:var(--ink-2);max-width:62ch;margin:-8px 0 22px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.tile{display:flex;align-items:center;gap:18px;padding:18px 20px 18px 18px;background:var(--forest);color:var(--cream);text-decoration:none;border-radius:20px;
  outline:3px solid var(--cream);outline-offset:-9px;box-shadow:0 6px 0 #0e261c;min-height:124px;transition:transform .12s,box-shadow .12s,background .12s}
.tile:hover{background:var(--forest-2);transform:translateY(-2px);box-shadow:0 8px 0 #0e261c}
.tile:active{transform:translateY(3px);box-shadow:0 2px 0 #0e261c}
.tile .pic,.skylink .pic{flex:none;width:76px;height:76px;border-radius:16px;background:var(--sun);color:var(--forest);display:flex;align-items:center;justify-content:center}
.tile .pic svg,.skylink .pic svg{width:54px;height:54px}
.tile .tx{flex:1;min-width:0}
.tile b{display:block;font-size:26px;font-weight:800;line-height:1.05;letter-spacing:-.015em;margin-bottom:4px}
.tile .tx span{display:block;font-size:15px;color:#c3d2c8;line-height:1.4}
.tile .go,.skylink .go{font:800 28px "Bricolage Grotesque",sans-serif;color:var(--sun-hi)}
.again{margin:18px 0 0;font-size:15px;color:var(--ink-2)}
.srcgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.srcgrid a{display:block;padding:14px 16px;background:var(--paper);border:2px solid var(--forest);border-radius:14px;text-decoration:none;color:var(--ink)}
.srcgrid a:hover{background:#fff;box-shadow:0 4px 0 var(--forest)}
.srcgrid b{display:block;font:800 19px "Bricolage Grotesque",sans-serif;color:var(--forest)}
.srcgrid span{font-size:14px;color:var(--sub)}
.rangernote{border:3px solid var(--forest);border-radius:20px;padding:24px 28px;background:var(--paper-hi);max-width:760px;position:relative}
.rangernote h2{margin:0 0 8px;font-size:28px}
.rangernote p{margin:0;color:var(--ink-2)}
.home .sitefoot{padding:6px 0 60px;margin-top:0}
@media(max-width:600px){
  .hero-main{padding:24px 0 48px}
  .hero .lede{font-size:17px}
  .zipbar input{width:100%}
  .tiles{grid-template-columns:1fr;gap:14px}
  .tile{min-height:104px;gap:14px;padding:16px}
  .tile .pic{width:64px;height:64px}.tile .pic svg{width:46px;height:46px}
  .tile b{font-size:23px}
  .band{padding:36px 0}
  .rangernote{padding:20px}
}

/* ── 今日狀況頁 ── */
.todayhead h1 .z{color:var(--zhu);white-space:nowrap}
.spot{margin:18px 0 10px}
.spot .form{margin:0}
.spot #zip{font:800 24px "Bricolage Grotesque",sans-serif;letter-spacing:.06em}
.spot .form label{flex:1 1 160px}
.acts{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:16px 0 0}
.acts a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px 8px;border:2px solid var(--forest);border-radius:12px;text-decoration:none;color:var(--forest);background:#fff;font:800 15px "Bricolage Grotesque",sans-serif}
.acts a svg{width:32px;height:32px}
.acts a:hover{background:var(--paper)}
.acts a.on{background:var(--forest);color:var(--cream);--icon-cut:var(--forest);box-shadow:inset 0 -5px 0 var(--sun)}
.acts a:not(.on){--icon-cut:#fff}
.riverf{margin-top:14px!important;padding-top:14px;border-top:2px dashed var(--line)}
.riverf .st{flex:0 1 150px!important}
.riverf[hidden]{display:none}
.changes{font-size:14.5px;color:var(--ink-2);background:rgba(238,122,43,.12);border-left:6px solid var(--sun);border-radius:10px;padding:10px 14px;margin:14px 0}
.dz{background:var(--paper-hi);border:2px solid var(--forest);border-radius:18px;padding:16px 18px 18px;margin:22px 0;box-shadow:0 4px 0 var(--forest)}
.dz-h{padding-bottom:10px;border-bottom:2px solid var(--hair);margin-bottom:10px}
.dz-n{border-radius:10px;background:var(--sun);color:var(--forest);font:800 17px "Bricolage Grotesque",sans-serif;width:34px;height:34px}
.dz h2{font-size:24px;color:var(--forest)}
.dz-open{color:var(--forest-2);font-weight:600}
.dz-skip{padding-left:46px;font-size:15px}
.skylink{display:flex;align-items:center;gap:16px;margin:22px 0 8px;padding:16px 18px;background:var(--forest) var(--topo-dark);color:var(--cream);border-radius:18px;text-decoration:none;box-shadow:0 5px 0 #0e261c;--icon-cut:var(--forest)}
.skylink>span:nth-child(2){flex:1;min-width:0}
.skylink b{display:block;font:800 23px "Bricolage Grotesque",sans-serif}
.skylink span span{display:block;font-size:15px;color:#c3d2c8}
@media(max-width:600px){
  .acts{gap:5px}
  .acts a{font-size:13px;padding:8px 2px 6px}
  .acts a svg{width:26px;height:26px}
  .dz{padding:14px 12px 14px}
  .dz-skip{padding-left:0}
  .skylink .pic{width:56px;height:56px}.skylink .pic svg{width:40px;height:40px}
}
/* 嵌入時背景透明，紋路不要疊兩層 */
html.embed body{background:transparent!important}
.rangernote p{font-size:17px;line-height:1.6}
@media(max-width:600px){.srcgrid{grid-template-columns:1fr 1fr;gap:8px}.srcgrid a{padding:10px 12px}.srcgrid b{font-size:16px}.srcgrid span{font-size:13px}}