@font-face{font-family:"Library 3 AM";src:url("assets/fonts/library3am.otf") format("opentype");font-display:swap}
:root{--yellow:#eed236;--olive:#4f4f22;--olive2:#6a6525;--olive3:#847b29;--olive4:#9f912c;--cream:#fbf8ea;--paper:#fff;--line:#e3dcb4;--text:#2f2f14;
--display:"Library 3 AM",Impact,sans-serif;--serif:Charter,"Iowan Old Style","Palatino Linotype",Georgia,serif;--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--text);font:17px/1.6 var(--serif)}
img{max-width:100%;height:auto;display:block}
a{color:var(--olive);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--olive2)}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.display{font-family:var(--display);text-transform:uppercase;font-weight:400;letter-spacing:.02em;line-height:1.15;color:var(--olive)}
.kicker{font:700 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--olive2);margin:0 0 10px}
/* header */
.site-header{background:var(--yellow);border-bottom:3px solid var(--olive)}
.site-header .wrap{display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:14px;padding-bottom:10px}
.brand img{height:44px;width:auto}
.nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 22px;font:600 15px/1 var(--sans);margin:0;padding:0;list-style:none}
.nav a{display:block;padding:10px 2px;color:var(--olive);text-decoration:none;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current]{border-bottom-color:var(--olive)}
/* hero */
.hero{position:relative;background:var(--olive);color:#fff}
.hero>img{width:100%;object-position:center 30%;height:min(66vh,620px);min-height:340px;object-fit:cover}
.hero-card{position:absolute;left:0;right:0;bottom:0}
.hero-card .box{background:var(--cream);max-width:560px;padding:26px 28px;margin-bottom:-1px;border-top:4px solid var(--yellow)}
.hero-card h1{font-size:clamp(22px,3.2vw,34px);margin:0 0 10px}
.hero-card p{margin:0 0 16px;color:var(--text)}
.btn{display:inline-block;background:var(--olive);color:var(--yellow);font:700 14px/1 var(--sans);letter-spacing:.04em;padding:13px 20px;text-decoration:none;border-radius:2px}
.btn:hover{background:var(--olive2);color:#fff}
.btn.ghost{background:transparent;color:var(--olive);border:2px solid var(--olive)}
/* sections */
section{padding:56px 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(20px,2.6vw,28px);margin:0}
.sec-head p{margin:6px 0 0;max-width:560px;color:#55552b}
.more{font:600 14px var(--sans)}
.intro{padding:34px 0 10px;text-align:center}
.intro p{font-size:20px;max-width:640px;margin:0 auto}
/* map */
.map-sec{background:var(--paper);border-block:1px solid var(--line)}
.map-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;align-items:center}
.map{width:100%;height:auto;background:#f4efce;border:1px solid var(--line);border-radius:4px}
.map .land{fill:#d6cf93;stroke:#b8b06a;stroke-width:.4}
.map .grid{stroke:#e5deb0;stroke-width:.3}
.map .pin{fill:var(--olive);stroke:var(--yellow);stroke-width:1}
.map .pin.next{fill:var(--yellow);stroke:var(--olive);stroke-dasharray:1.6 1}
.map .home{fill:var(--olive2);stroke:#fff;stroke-width:.8}
.map text{font:600 5.2px var(--sans);fill:var(--olive)}
.legend{list-style:none;margin:0;padding:0;font:15px/1.4 var(--sans)}
.legend li{flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:baseline}
.legend b{flex:0 0 140px}.legend li>span:not(.dot){flex:1 1 160px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--olive);flex:none;position:relative;top:1px}
.dot.next{background:var(--yellow);border:2px solid var(--olive)}
.note{font:12px/1.4 var(--sans);color:#6b6b3a;margin-top:10px}
/* cards */
.grid{display:grid;gap:22px;grid-template-columns:minmax(0,1fr)}
.card{background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;border-radius:3px;overflow:hidden;position:relative}
.card img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:#e9e3b8}
.card .body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:6px;flex:1}
.card h3{margin:0;font:700 19px/1.3 var(--sans);color:var(--olive)}
.card h3 a{text-decoration:none;color:inherit}
.card h3 a::after{content:"";position:absolute;inset:0}
.card .meta{font:13px/1.3 var(--sans);color:#6b6b3a}
.card p{margin:2px 0 0;font-size:15.5px;line-height:1.55}
.tag{display:inline-block;font:700 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;background:var(--yellow);color:var(--olive);padding:5px 8px;border-radius:2px;align-self:flex-start}
.tag.kid{background:var(--olive);color:var(--yellow)}
.trip-card h3{font-family:var(--display);text-transform:uppercase;font-weight:400;font-size:19px;letter-spacing:.02em;line-height:1.25}
.trip-card img{aspect-ratio:3/2}
.next-card{background:var(--yellow);border:3px solid var(--olive);justify-content:center;padding:30px 24px;text-align:left;min-height:260px}
.next-card h3{font-family:var(--display);text-transform:uppercase;font-weight:400;font-size:24px;line-height:1.2;margin:8px 0 10px}
.next-card p{margin:0;font-size:16px}
/* strips */
.band-yellow{background:var(--yellow);border-block:3px solid var(--olive)}
.band-olive{background:var(--olive);color:#f1edc8}
.band-olive .display,.band-olive .kicker,.band-olive .more{color:var(--yellow)}
.band-olive .sec-head p{color:#e4dfae}
.band-olive a{color:var(--yellow)}
.band-yellow .sec-head p{color:var(--olive)}
.band-yellow .kicker{color:var(--olive)}
/* footer */
.site-footer{background:var(--olive);color:#e4dfae;padding:38px 0 30px;font:14px/1.6 var(--sans);border-top:6px solid var(--yellow)}
.site-footer .wrap{display:flex;flex-direction:column;gap:18px}
.site-footer img{height:56px;width:56px;border-radius:6px;background:var(--yellow)}
.site-footer a{color:var(--yellow)}
.foot-nav{display:flex;flex-wrap:wrap;gap:6px 20px;list-style:none;margin:0;padding:0}
/* trip page */
.crumbs{font:13px var(--sans);padding:16px 0 0;color:#6b6b3a}
.crumbs a{color:#6b6b3a}
.trip-hero .box{max-width:720px}
.trip-hero h1{font-size:clamp(24px,4.2vw,44px)}
.summary{display:grid;gap:26px;grid-template-columns:minmax(0,1fr);padding:44px 0 10px}
.summary h2{font-size:22px;margin:0 0 12px}
.route{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:14px 0 0;font:600 14px var(--sans)}
.route li{background:var(--paper);border:1px solid var(--olive3);color:var(--olive);padding:7px 12px;border-radius:30px}
.route li+li::before{content:none}
.facts{background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--yellow);padding:20px 22px;font:15px/1.5 var(--sans);margin:0}
.facts dt{font-weight:700;color:var(--olive);font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-top:12px}
.facts dt:first-child{margin-top:0}
.facts dd{margin:2px 0 0}
.post-grid .card .body{min-height:190px}
.date-rule{font:700 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--olive2);margin:0 0 6px}
.nexttrip{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center}
@media(min-width:640px){.grid.c2,.grid.c3,.grid.c4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){
 body{font-size:18px}
 .site-header .wrap{flex-direction:row;justify-content:space-between;padding-top:16px;padding-bottom:14px}
 .brand img{height:54px}
 .grid.c3{grid-template-columns:repeat(3,1fr)}
 .grid.c4{grid-template-columns:repeat(4,1fr)}
 .map-grid{grid-template-columns:1.9fr 1fr}
 .summary{grid-template-columns:1.6fr 1fr}
 .site-footer .wrap{flex-direction:row;justify-content:space-between;align-items:center}
}
@media(min-width:1100px){.grid.posts{grid-template-columns:repeat(3,1fr)}}

/* ---- site additions (post pages, listings, archive); same tokens as the mockup ---- */
.skip{position:absolute;left:-999px;top:0;background:var(--olive);color:var(--yellow);padding:10px 14px;z-index:10;font:600 14px var(--sans)}
.skip:focus{left:8px;top:8px}
.card .tags{display:flex;flex-wrap:wrap;gap:6px}
.page-head{padding:34px 0 30px;max-width:760px}
.page-head h1{font-size:clamp(26px,4vw,40px);margin:0 0 10px}
.page-head p:not(.kicker){font-size:19px;margin:0}
.map a{cursor:pointer}.map a:hover .pin{fill:var(--olive2)}
.map text{pointer-events:none}
.legend a{color:var(--olive)}
/* post */
.post{max-width:760px;margin:0 auto;padding:6px 0 60px}
.post-head{padding:22px 0 18px}
.post-head h1{font:700 clamp(27px,4vw,40px)/1.2 var(--sans);color:var(--olive);margin:0 0 12px}
.post-meta{font:14px/1.5 var(--sans);color:#6b6b3a;margin:0;display:flex;flex-wrap:wrap;gap:8px 4px;align-items:center}
.post-meta .tag{margin-left:8px}
.post-hero{margin:8px 0 26px}.post-hero img,.post-body figure img,.post-body .gallery img{height:auto;border-radius:3px}
.post-body{font-size:18px}
.post-body h2,.post-body h3,.post-body h4{font-family:var(--sans);color:var(--olive);line-height:1.3;margin:1.8em 0 .5em}
.post-body h2{font-size:26px}.post-body h3{font-size:21px}.post-body h4{font-size:18px}
.post-body p,.post-body ul,.post-body ol{margin:0 0 1.1em}
.post-body li{margin-bottom:.35em}
.post-body figure{margin:1.6em 0}
.post-body figcaption{font:14px/1.45 var(--sans);color:#6b6b3a;margin-top:8px}
.post-body figure img{margin:0 auto}
.post-body video{max-width:100%;height:auto;border-radius:3px;margin:0 auto;display:block}
.post-body hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.post-body .gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:1.6em 0}
.post-body .gallery figure{margin:0}
.post-body .cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.post-body .cols figure{margin:1.2em 0}
.post-body a{overflow-wrap:anywhere}
.about .gallery{display:block;float:right;width:min(42%,300px);margin:6px 0 16px 24px}
.about:after{content:"";display:block;clear:both}
.page-body{max-width:760px}
.ph{background:#e9e3b8;border:2px dashed var(--olive3);border-radius:3px;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;color:var(--olive2);font:600 14px var(--sans);margin:1.4em 0}
.pn{display:grid;grid-template-columns:1fr;gap:14px;margin:44px 0 10px}
.pn a{display:block;background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--yellow);padding:14px 18px;text-decoration:none;font:700 16px/1.35 var(--sans);color:var(--olive);border-radius:3px}
.pn a span{display:block;font:700 12px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--olive2);margin-bottom:4px}
.pn .next{text-align:right}
.back{font:600 14px var(--sans);margin-top:24px}
@media(min-width:640px){.pn{grid-template-columns:1fr 1fr}}
/* archive */
.archive{padding-bottom:70px;max-width:900px}
.arch-month{font:700 13px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--olive2);margin:30px 0 6px;padding-bottom:6px;border-bottom:2px solid var(--olive)}
.arch-row{display:grid;grid-template-columns:1fr;gap:2px;padding:11px 0;border-bottom:1px solid var(--line);font:15px/1.4 var(--sans)}
.arch-row time{color:#6b6b3a;font-size:13px}.arch-row a{font-weight:700;color:var(--olive);text-decoration:none}.arch-row a:hover{text-decoration:underline}
.arch-row .where{color:#6b6b3a;font-size:13px}
@media(min-width:760px){.arch-row{grid-template-columns:110px 1fr 250px;gap:14px;align-items:baseline}}
.post-body figure img,.post-hero img{max-width:100%;max-height:min(80vh,760px);width:auto;height:auto}
.post-body .gallery img{max-height:none;width:100%}
.post-body .cols figure img{max-height:none;width:100%}
/* upcoming trip: plain olive band instead of a photo hero, plus the route-map figure */
.hero.upcoming{min-height:270px}
.routemap{margin:22px 0 0}.routemap img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:4px}
.routemap figcaption{font:13px/1.45 var(--sans);color:#6b6b3a;margin-top:8px}
.next-card a{text-decoration:none}.next-card .stretch{position:absolute;inset:0}
.next-card:hover{border-color:var(--olive2)}
/* series (Islands in Two Oceans): home banner and the small "Part of" box */
.series-sec{padding:6px 0 30px}
.series-banner{background:var(--cream);border:3px solid var(--olive);border-radius:4px;padding:26px 28px;display:flex;flex-wrap:wrap;gap:20px 32px;align-items:center;justify-content:space-between}
.series-banner h2{margin:0 0 8px}.series-banner p:not(.kicker){margin:0;font:17px/1.5 var(--sans);max-width:620px}
.series-links{display:flex;flex-wrap:wrap;gap:10px}
.series-box{background:var(--cream);border:1px solid var(--line);border-left:6px solid var(--yellow);border-radius:4px;padding:12px 16px;margin:0 0 22px;font:15px/1.45 var(--sans)}
.series-box .kicker{margin:0 0 6px}.series-box p{margin:0}.series-box a{color:var(--olive);font-weight:700}
.post .series-box{margin:0 0 24px}

/* visited-countries map */
.map .land{fill:#d6cf93;stroke:#f4efce;stroke-width:.25}
.map .visited{fill:#6a6525;stroke:#f4efce;stroke-width:.25}
.map .vmark{fill:#6a6525;stroke:#f4efce;stroke-width:.6}
.mkey{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px;font:14px var(--sans)}
.mkey li{display:flex;align-items:center;gap:8px}
.sw{display:inline-block;width:16px;height:12px;border-radius:2px;flex:none}
.sw.v{background:#6a6525}.sw.p{width:12px;border-radius:50%;background:var(--olive);border:2px solid var(--yellow);box-shadow:0 0 0 1px var(--olive)}
.sw.n{width:12px;border-radius:50%;background:var(--yellow);border:2px dashed var(--olive)}
.visited{margin-top:28px;border-top:1px solid var(--line);padding-top:22px;display:grid;gap:14px;grid-template-columns:minmax(0,1fr);align-items:start}
.vstat{margin:0;font:600 16px var(--sans);color:var(--olive)}
.vstat b{display:block;font-family:var(--display);font-size:52px;line-height:1;font-weight:400;color:var(--olive2)}
.vlist{margin:0;padding-left:1.9em;font:15px/1.55 var(--sans);columns:2;column-gap:28px}
.vlist li{break-inside:avoid;padding-left:2px}
@media(min-width:640px){.vlist{columns:3}}
@media(min-width:900px){.visited{grid-template-columns:200px minmax(0,1fr)}.vlist{columns:4}}
.map text{paint-order:stroke;stroke:#f4efce;stroke-width:1.6px;stroke-linejoin:round}
/* Southeast Asia route map (inline SVG so labels can link) */
.seamap{margin:30px 0 0}
.seamap-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.seamap svg{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:4px}
.seamap-list{margin:14px 0 0;padding-left:0;list-style:none;font:14px/1.5 var(--sans)}
.seamap-list li{padding:6px 0;border-top:1px solid var(--line)}
.seamap-list li.main{counter-increment:sm}
.seamap-list li.main::before{content:counter(sm);display:inline-block;width:22px;height:22px;line-height:20px;text-align:center;border-radius:50%;background:var(--yellow);border:2px solid var(--olive);font-weight:800;font-size:12px;margin-right:8px}
.seamap-list li:not(.main){padding-left:32px}
.seamap-list{counter-reset:sm}
.seamap-list span{color:#6b6b3a}
.seamap-fl{font:14px/1.5 var(--sans);margin:10px 0 0}
.seamap figcaption{font:13px/1.45 var(--sans);color:#6b6b3a;margin-top:10px}
@media(min-width:900px){.seamap-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:28px;align-items:start}}