:root{color-scheme:light;--ink:#183436;--muted:#47605e;--accent:#17645c;--paper:#f8f6ee;--line:#d8e2da}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.85 system-ui,"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;overflow-wrap:anywhere}
a{color:var(--accent);text-underline-offset:.2em}
a:focus-visible,summary:focus-visible{outline:3px solid #b16120;outline-offset:4px}
.wrap{width:min(1120px,calc(100% - 36px));margin-inline:auto}
header{background:#102e31;color:#fff}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:72px}
.brand{display:flex;gap:.7rem;align-items:center;font-weight:800;color:white;text-decoration:none}
nav a{color:inherit}
.bar nav{display:flex;gap:1.2rem;font-size:.9rem}
.mobile{display:none}
.skip{position:absolute;left:1rem;top:-8rem;background:white;padding:.6rem;z-index:3}
.skip:focus{top:.5rem}
.hero{margin-top:24px;border-radius:26px;min-height:460px;display:grid;align-content:center;padding:clamp(22px,6vw,72px);background:linear-gradient(90deg,#f8f4e7 8%,#f8f4e7dc 38%,transparent 77%),url('/assets/images/sky-islands-guide.jpg') center/cover}
.hero p{max-width:32rem}
h1,h2,h3{line-height:1.4}
h1{font-size:clamp(1.85rem,4vw,3.4rem);margin:.25em 0}
.hero h1{max-width:13em}
.eyebrow{font-size:.79rem;font-weight:800;letter-spacing:.14em;color:var(--accent)}
.lead{color:var(--muted);font-size:1.08rem}
.cta{display:inline-block;background:#17574f;color:white;padding:.7rem 1.2rem;border-radius:999px;text-decoration:none;font-weight:700}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:16px;margin:1rem 0 2rem}
.card{display:block;background:white;border:1px solid var(--line);border-radius:16px;padding:1.15rem;text-decoration:none;color:var(--ink);transition:transform .25s,border-color .25s}
.card:hover{transform:translateY(-3px);border-color:var(--accent)}
.card strong{display:block;color:var(--accent)}
.card p{margin:.35rem 0 0;color:var(--muted);font-size:.93rem}
.crumb{font-size:.86rem;color:var(--muted);margin-top:1.5rem}
.article{max-width:800px;margin:1rem auto;background:white;border:1px solid var(--line);border-radius:20px;padding:clamp(18px,5vw,48px)}
.article h2{border-bottom:2px solid var(--line);padding-bottom:.45em;margin-top:1.5em}
.article li{margin-bottom:.6em}
figure{margin:1.5em 0}
img,video{max-width:100%;height:auto}
video{display:block;width:100%;background:#102e31;border-radius:12px}
figcaption,small{color:var(--muted)}
table{width:100%;border-collapse:collapse;font-size:.95rem}
th,td{padding:.55em;border:1px solid var(--line);text-align:left;vertical-align:top}
th{background:#e6efe8}
.ad{margin:1.4rem auto;width:100%;max-width:800px}
.ad:has(ins[data-ad-status="unfilled"]){display:none}
footer{background:#102e31;color:white;margin-top:2.5rem;padding:2rem 0}
footer a{color:white}
main{animation:appear .55s ease-out both}
@keyframes appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){
 .desktop{display:none!important}
 .mobile{display:block;position:relative}
 .mobile summary{cursor:pointer;list-style:none;padding:.4rem .6rem;font-size:1.4rem}
 .mobile summary::-webkit-details-marker{display:none}
 .mobile nav{position:absolute;right:0;top:100%;z-index:5;background:#102e31;padding:1rem;border-radius:12px;min-width:12rem;display:grid;gap:.6rem}
 .hero{min-height:350px;background-image:linear-gradient(90deg,#f8f4e7ee,#f8f4e7aa),url('/assets/images/sky-islands-guide.jpg')}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}